Flowbite デザインシステム.

<main id="page" class="mx-auto max-w-5xl p-6 md:p-10 text-body"><header class="mb-8 flex flex-wrap items-start justify-between gap-4"><div><p class="text-xs font-semibold tracking-widest text-fg-brand">FLOWBITE · FIELD GUIDE</p><h1 class="mt-3 text-3xl font-semibold tracking-tight text-heading">Pack for a day of making.</h1><p class="mt-3 max-w-xl text-sm leading-6">A workshop packing guide with grouped instructions and a local materials note.</p></div><button id="open-note" class="rounded-base bg-brand px-5 py-3 text-sm font-medium text-white hover:bg-brand-strong focus:ring-4 focus:ring-brand-soft">Prepare materials note</button></header><div class="grid gap-8 md:grid-cols-[1.4fr_1fr]"><section aria-label="Packing categories"><div id="packing-accordion" class="overflow-hidden rounded-base border border-default"><h2><button id="paper-trigger" type="button" class="category-trigger" aria-expanded="true" aria-controls="paper-panel"><span><b>01</b> Paper & surfaces</span><span aria-hidden="true">⌄</span></button></h2><div id="paper-panel" aria-labelledby="paper-trigger"><div class="category-body"><p>Choose stocks before the session. Keep one sheet untouched as a reference.</p><label><input type="checkbox" data-item="Drawing sheets" class="check"> <span><strong>Drawing sheets</strong><small>12 × A3 sheets, 120–160 gsm</small></span></label><label><input type="checkbox" data-item="Tracing paper" class="check"> <span><strong>Tracing paper</strong><small>6 sheets for overlays and revisions</small></span></label></div></div><h2><button id="tools-trigger" type="button" class="category-trigger" aria-expanded="false" aria-controls="tools-panel"><span><b>02</b> Tools & marks</span><span aria-hidden="true">⌄</span></button></h2><div id="tools-panel" class="hidden" aria-labelledby="tools-trigger"><div class="category-body"><p>Test every marker. Put cutting tools in a separate protective sleeve.</p><label><input type="checkbox" data-item="Pencils and markers" class="check"> <span><strong>Pencils and markers</strong><small>2B pencils, one broad and one fine marker</small></span></label><label><input type="checkbox" data-item="Ruler and cutting mat" class="check"> <span><strong>Ruler and cutting mat</strong><small>One shared station per four people</small></span></label></div></div><h2><button id="space-trigger" type="button" class="category-trigger" aria-expanded="false" aria-controls="space-panel"><span><b>03</b> Shared space</span><span aria-hidden="true">⌄</span></button></h2><div id="space-panel" class="hidden" aria-labelledby="space-trigger"><div class="category-body"><p>Make wall space usable and document ideas before taking them down.</p><label><input type="checkbox" data-item="Low-tack tape" class="check"> <span><strong>Low-tack tape</strong><small>Test on a hidden part of the wall first</small></span></label><label><input type="checkbox" data-item="Documentation cards" class="check"> <span><strong>Documentation cards</strong><small>One title and author card per final piece</small></span></label></div></div></div></section><aside class="rounded-base border border-default bg-neutral-primary p-6"><div class="kit-art" aria-hidden="true"><i></i><i></i><i></i><em class="bg-brand-medium"></em></div><p class="mt-5 text-xs tracking-widest text-fg-brand font-semibold">WORKSHOP KIT</p><h2 class="mt-2 text-xl font-semibold text-heading">Six things, one shared table.</h2><p class="mt-3 text-sm leading-6">Check items as you pack. Opening another category keeps your choices.</p><div class="mt-6 flex items-center justify-between text-sm"><span>Packed</span><output id="count" class="font-semibold text-heading">0 of 6</output></div><div class="mt-2 h-2 rounded-full bg-neutral-tertiary" role="progressbar" aria-label="Packing progress" aria-valuemin="0" aria-valuemax="6" aria-valuenow="0"><div id="bar" class="h-2 rounded-full bg-brand" style="width:0%"></div></div><p id="next-item" class="mt-4 text-sm text-body-subtle">Next: Drawing sheets</p><button id="clear" class="mt-5 text-sm font-medium text-fg-brand underline underline-offset-4">Clear packed items</button></aside></div><p id="result" class="mt-6 rounded-base bg-success-soft p-4 text-sm text-fg-success" role="status" hidden></p></main><aside id="materials-drawer" tabindex="-1" aria-labelledby="drawer-title" class="fixed right-0 top-0 z-40 h-screen w-96 max-w-full translate-x-full overflow-y-auto border-l border-default bg-neutral-primary p-6"><div class="flex items-center justify-between gap-4"><h2 id="drawer-title" class="text-xl font-semibold text-heading">Materials note</h2><button id="close-note" class="rounded-base border border-default px-3 py-2 text-sm" aria-label="Close materials note">Close</button></div><p class="mt-4 text-sm leading-6 text-body">Record who is preparing the kit and which items still need attention.</p><form id="note-form" class="mt-6"><label for="owner" class="mb-2 block text-sm font-medium text-heading">Prepared by</label><input id="owner" class="mb-5 block w-full rounded-base border border-default bg-neutral-secondary p-3 text-sm text-heading focus:border-brand focus:ring-brand" required minlength="2" maxlength="60" placeholder="Your name"><label for="note" class="mb-2 block text-sm font-medium text-heading">Session note</label><textarea id="note" rows="4" maxlength="240" class="block w-full rounded-base border border-default bg-neutral-secondary p-3 text-sm text-heading focus:border-brand focus:ring-brand" placeholder="For example: bring the shared cutting mat."></textarea><p id="remaining" class="mt-5 text-sm leading-6 text-body"></p><button type="submit" class="mt-6 w-full rounded-base bg-brand px-5 py-3 text-sm font-medium text-white hover:bg-brand-strong">Save local note</button><p class="mt-3 text-xs leading-5 text-body-subtle">No email, purchase or shared document is created.</p></form></aside>

import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();

body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Flowbite specimen</title><link rel="stylesheet" href="output.css"><link rel="stylesheet" href="style.css"></head><body>
<main id="page" class="mx-auto max-w-5xl p-6 md:p-10 text-body"><header class="mb-8 flex flex-wrap items-start justify-between gap-4"><div><p class="text-xs font-semibold tracking-widest text-fg-brand">FLOWBITE · FIELD GUIDE</p><h1 class="mt-3 text-3xl font-semibold tracking-tight text-heading">Pack for a day of making.</h1><p class="mt-3 max-w-xl text-sm leading-6">A workshop packing guide with grouped instructions and a local materials note.</p></div><button id="open-note" class="rounded-base bg-brand px-5 py-3 text-sm font-medium text-white hover:bg-brand-strong focus:ring-4 focus:ring-brand-soft">Prepare materials note</button></header><div class="grid gap-8 md:grid-cols-[1.4fr_1fr]"><section aria-label="Packing categories"><div id="packing-accordion" class="overflow-hidden rounded-base border border-default"><h2><button id="paper-trigger" type="button" class="category-trigger" aria-expanded="true" aria-controls="paper-panel"><span><b>01</b> Paper & surfaces</span><span aria-hidden="true">⌄</span></button></h2><div id="paper-panel" aria-labelledby="paper-trigger"><div class="category-body"><p>Choose stocks before the session. Keep one sheet untouched as a reference.</p><label><input type="checkbox" data-item="Drawing sheets" class="check"> <span><strong>Drawing sheets</strong><small>12 × A3 sheets, 120–160 gsm</small></span></label><label><input type="checkbox" data-item="Tracing paper" class="check"> <span><strong>Tracing paper</strong><small>6 sheets for overlays and revisions</small></span></label></div></div><h2><button id="tools-trigger" type="button" class="category-trigger" aria-expanded="false" aria-controls="tools-panel"><span><b>02</b> Tools & marks</span><span aria-hidden="true">⌄</span></button></h2><div id="tools-panel" class="hidden" aria-labelledby="tools-trigger"><div class="category-body"><p>Test every marker. Put cutting tools in a separate protective sleeve.</p><label><input type="checkbox" data-item="Pencils and markers" class="check"> <span><strong>Pencils and markers</strong><small>2B pencils, one broad and one fine marker</small></span></label><label><input type="checkbox" data-item="Ruler and cutting mat" class="check"> <span><strong>Ruler and cutting mat</strong><small>One shared station per four people</small></span></label></div></div><h2><button id="space-trigger" type="button" class="category-trigger" aria-expanded="false" aria-controls="space-panel"><span><b>03</b> Shared space</span><span aria-hidden="true">⌄</span></button></h2><div id="space-panel" class="hidden" aria-labelledby="space-trigger"><div class="category-body"><p>Make wall space usable and document ideas before taking them down.</p><label><input type="checkbox" data-item="Low-tack tape" class="check"> <span><strong>Low-tack tape</strong><small>Test on a hidden part of the wall first</small></span></label><label><input type="checkbox" data-item="Documentation cards" class="check"> <span><strong>Documentation cards</strong><small>One title and author card per final piece</small></span></label></div></div></div></section><aside class="rounded-base border border-default bg-neutral-primary p-6"><div class="kit-art" aria-hidden="true"><i></i><i></i><i></i><em class="bg-brand-medium"></em></div><p class="mt-5 text-xs tracking-widest text-fg-brand font-semibold">WORKSHOP KIT</p><h2 class="mt-2 text-xl font-semibold text-heading">Six things, one shared table.</h2><p class="mt-3 text-sm leading-6">Check items as you pack. Opening another category keeps your choices.</p><div class="mt-6 flex items-center justify-between text-sm"><span>Packed</span><output id="count" class="font-semibold text-heading">0 of 6</output></div><div class="mt-2 h-2 rounded-full bg-neutral-tertiary" role="progressbar" aria-label="Packing progress" aria-valuemin="0" aria-valuemax="6" aria-valuenow="0"><div id="bar" class="h-2 rounded-full bg-brand" style="width:0%"></div></div><p id="next-item" class="mt-4 text-sm text-body-subtle">Next: Drawing sheets</p><button id="clear" class="mt-5 text-sm font-medium text-fg-brand underline underline-offset-4">Clear packed items</button></aside></div><p id="result" class="mt-6 rounded-base bg-success-soft p-4 text-sm text-fg-success" role="status" hidden></p></main><aside id="materials-drawer" tabindex="-1" aria-labelledby="drawer-title" class="fixed right-0 top-0 z-40 h-screen w-96 max-w-full translate-x-full overflow-y-auto border-l border-default bg-neutral-primary p-6"><div class="flex items-center justify-between gap-4"><h2 id="drawer-title" class="text-xl font-semibold text-heading">Materials note</h2><button id="close-note" class="rounded-base border border-default px-3 py-2 text-sm" aria-label="Close materials note">Close</button></div><p class="mt-4 text-sm leading-6 text-body">Record who is preparing the kit and which items still need attention.</p><form id="note-form" class="mt-6"><label for="owner" class="mb-2 block text-sm font-medium text-heading">Prepared by</label><input id="owner" class="mb-5 block w-full rounded-base border border-default bg-neutral-secondary p-3 text-sm text-heading focus:border-brand focus:ring-brand" required minlength="2" maxlength="60" placeholder="Your name"><label for="note" class="mb-2 block text-sm font-medium text-heading">Session note</label><textarea id="note" rows="4" maxlength="240" class="block w-full rounded-base border border-default bg-neutral-secondary p-3 text-sm text-heading focus:border-brand focus:ring-brand" placeholder="For example: bring the shared cutting mat."></textarea><p id="remaining" class="mt-5 text-sm leading-6 text-body"></p><button type="submit" class="mt-6 w-full rounded-base bg-brand px-5 py-3 text-sm font-medium text-white hover:bg-brand-strong">Save local note</button><p class="mt-3 text-xs leading-5 text-body-subtle">No email, purchase or shared document is created.</p></form></aside>

<script src="bundle.js" defer></script></body></html>