# Flowbite 设计系统

## Flowbite 设计系统界面预览

展开三个打包类别，勾选物品，并在原生抽屉中准备本地笔记。

## Flowbite 设计系统设计参考

Flowbite 4.0.2 默认主题搭配 Tailwind CSS 4.3.3。以下具名别名是实际的 Flowbite 主题变量；其引用的色阶来自 Tailwind。打包插图和应用间距设置为原创内容。

### 默认语义文本和状态角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --color-body | var(--color-gray-600) | 常规说明文本。 |
| --color-body-subtle | var(--color-gray-500) | 辅助说明。 |
| --color-heading | var(--color-gray-900) | 标题和高强调度标签。 |
| --color-fg-brand | var(--color-blue-700) | 品牌色前景。 |
| --color-fg-success | var(--color-emerald-700) | 成功状态前景。 |
| --color-fg-danger | var(--color-rose-700) | 错误状态前景。 |
| --color-fg-warning | var(--color-orange-900) | 警告状态前景。 |
| --color-fg-disabled | var(--color-gray-400) | 禁用状态前景。 |
### 默认界面表面和边框

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --color-neutral-primary | var(--color-white) | 卡片和抽屉表面。 |
| --color-neutral-secondary | var(--color-gray-50) | 页面背景。 |
| --color-neutral-tertiary | var(--color-gray-100) | 进度轨道。 |
| --color-brand | var(--color-blue-700) | 主要操作和已打包进度。 |
| --color-brand-soft | var(--color-blue-100) | 焦点环或柔和的品牌色表面。 |
| --color-brand-softer | var(--color-blue-50) | 展开的手风琴和插图表面。 |
| --color-brand-strong | var(--color-blue-800) | 操作悬停状态。 |
| --color-default | var(--color-gray-200) | 标准组件边框。 |
| --color-success-soft | var(--color-emerald-50) | 本地结果表面。 |
### 默认几何和字体变量

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | 以 Inter 为首选的 UI 字体栈；预览使用可用的系统后备字体，不加载远程字体。 |
| --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | 代码字体栈。 |
| --radius-xxs | 2px | 2 像素圆角。 |
| --radius-xs | 4px | 4 像素圆角。 |
| --radius-sm | 6px | 6 像素圆角。 |
| --radius | 8px | 8 像素圆角。 |
| --radius-base | 12px | 圆角基准使用的 12 像素面板圆角。 |
| --radius-lg | 16px | 16 像素圆角。 |
| --default-border-width | 1px | 1 像素边框。 |
| --leading-5 | 20px | 20 像素行高。 |
| --leading-6 | 24px | 24 像素行高。 |
### 示例中使用的 Tailwind 布局值

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| p-6 / md:p-10 | 1.5rem / 2.5rem | 页面内边距使用 Tailwind 默认的四分之一 rem 间距单位。 |
| gap-8 | 2rem | 打包类别与进度摘要之间的间距。 |
| md breakpoint | 48rem | 切换为两列布局。 |
| text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | 正文、分区标题和页面标题工具类。 |
| w-96 / max-w-full | 24rem / 100% | 抽屉宽度不会超出移动设备视口。 |
## Flowbite 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Flowbite 设计系统 4 新增具名默认主题

### Flowbite 4 新增具名默认主题

> 此示例使用 Flowbite 4.0.2，而非一组未标版本的旧式蓝灰色代码片段。其默认主题定义了 color-body、color-heading、color-brand 和 color-neutral-primary 等语义别名。页面先导入该主题，再应用 Flowbite Tailwind 插件，然后使用 text-heading 和 bg-brand 等对应类。

这些别名指向 Tailwind 的色阶。例如，常规品牌操作引用 blue-700，而更强烈的悬停状态则引用 blue-800。规范保留了这些引用，让读者能够区分语义角色与基础颜色值。打包插图沿用相同的品牌角色，但并非官方的 Flowbite 插图。

阅读配套规范

## Flowbite 设计系统：主题几何设置与 Tailwind 布局协同工作

### 主题几何设置与 Tailwind 布局协同工作

默认主题的 radius-base 为 12 像素，rounded-base 用于主要容器、抽屉控件和结果提示。主题还定义了 2、4、6、8 和 16 像素的不同圆角。因此，如果复制的组件使用了较新的语义类名，导入主题就很重要。

提供的字体栈以 Inter 为首选字体，但这个独立预览不会下载远程字体，而是使用可用的系统备用字体。页面间距采用 Tailwind 工具类：p-6 为 1.5 rem，gap-8 为 2 rem，桌面端的 p-10 为 2.5 rem。这些布局工具类并未被描述为另行虚构的 Flowbite 间距尺度。

阅读配套规范

## Flowbite 设计系统：一个 Accordion 实例管理三个类别

### 一个手风琴实例管理三个类别

JavaScript 使用数组中的项目构造 Accordion。每个项目都有稳定的 ID、触发元素和目标面板；Paper 类别默认处于激活状态。alwaysOpen 为 false，因此打开 Tools 会关闭 Paper。自定义的 activeClasses 和 inactiveClasses 使用默认主题中的语义前景色和界面表面名称。

该类控制面板的显示状态，并更新其触发器上的 aria-expanded。标记提供 aria-controls 和与之匹配的面板 ID。面板折叠时，清单输入仍保留在文档中，因此勾选状态会在切换类别后继续保留。折叠区域只会隐藏内容，不会重置用户已完成的打包工作。

阅读配套规范

## Flowbite 设计系统：进度由实际复选框状态计算得出

### 进度根据实际复选框状态计算

六个真实复选框对应具体的工作坊材料。应用根据它们当前的 checked 属性计算已打包数量、下一件物品和剩余物品文本。进度条的宽度和 aria-valuenow 也会根据同一数量更新，避免单独的计数器与清单状态不一致。

图纸和描图纸是分开的选项，因为它们的准备方式不同。裁切垫说明这是一个共用工作台，低黏性胶带则附有关于墙面材质的注意事项。这些具体信息让展开的类别更实用；手风琴并非只是用来隐藏重复、空泛的段落。

1. 打开 Paper，并将 Drawing sheets 标记为已打包。

2. 打开 Tools，将 Pencils and markers 标记为已打包，然后返回 Paper。

3. 确认两个选项仍处于选中状态，且摘要显示六项中已完成两项。

阅读配套规范

## Flowbite 设计系统：一个 Drawer 实例管理显示状态和背景遮罩

### 一个抽屉实例控制可见性和遮罩层

材料面板通过 new Drawer 初始化，设置 placement 为 right、backdrop 为 true、bodyScrolling 为 false。打开面板时调用 show；关闭时调用 hide。原生 Flowbite 实现会应用定位和过渡类、背景遮罩及可见性属性。本页面有意使用 JavaScript API，而不再为同一面板混用第二个数据属性初始化器。

抽屉宽度为 24 rem，并设置 max-w-full，因此在窄视口中仍然易于使用。面板内容可在内部垂直滚动。页面高度由其内容决定；抽屉的 h-screen 是有意设置的固定覆盖层，不会为嵌入页面造成最小高度循环。

阅读配套规范

## Flowbite 设计系统：围绕抽屉生命周期添加焦点管理

### 围绕抽屉的生命周期添加焦点管理

onShow 回调会将背景中的 main 元素设为 inert，并将焦点移至 Prepared by 输入框。onHide 会移除 inert，并将焦点移回 Prepare materials note。一个简短的 keydown 处理程序会在面板的第一个和最后一个控件之间循环切换 Tab 和 Shift+Tab。这些补充逻辑在完整源码中清晰可见，并非假定由样式类提供。

Flowbite 会为其抽屉处理 Escape 键。示例中的回调确保无论通过哪种方式关闭面板，背景都会恢复交互能力。面板通过 aria-labelledby 设置标签；关闭控件则有明确的无障碍名称。实际应用应结合自身的 portals 和路由测试此行为，而不应将库的名称视为全面无障碍保障。

阅读配套规范

## Flowbite 设计系统：验证负责人信息，并且只保存本地文本

### 验证负责人，只保存本地文本

Prepared by 为必填项，并设有最小和最大长度限制。提交处理程序还会去除姓名首尾空格，并拒绝仅包含空白字符的输入。Session note 为选填项，最多 240 个字符。每次打开抽屉时都会刷新剩余物品摘要，以反映当前清单，而不是先前的打包状态。

保存后会关闭抽屉，并显示一条本地提示，其中包含负责人、已打包数量和选填文本。系统不会发送电子邮件，也不会创建共享文档。用户输入的字符串通过 textContent 赋值。编辑打包清单时会清除旧的结果提示，否则其中先前的计数可能造成误导。

阅读配套规范

## Flowbite 设计系统：包含 JavaScript 库生成的类

### 包含由 JavaScript 库生成的类

Tailwind 输入文件会导入默认的 Flowbite 主题并注册 flowbite/plugin。显式 source 指令涵盖 HTML、应用模块和 Flowbite 的 ESM 库。最后一项尤为重要：即使库在运行时添加的类没有直接写在初始 HTML 中，也必须存在于生成的样式表中。

打包文件从 flowbite 导入 Accordion 和 Drawer。示例会在标记就绪后为每个组件实例初始化一次。对于会挂载和卸载视图的框架应用，应在生命周期设置中配套清理实例，避免重复添加事件监听器。本地页面只挂载一次，也没有客户端路由切换。

阅读配套规范

## Flowbite 设计系统：明确说明实现边界的打包辅助工具

### 用于辅助打包的工具，并明确展示实现边界

这份实地指南演示了内容丰富的手风琴、持久保留的复选框状态和覆盖层工作流程。它不包含虚构的库存数据或远程采购结果。六种材料都是示例工作坊准备事项，保存的备注只会在页面运行期间保留在内存中。

默认语义主题、组件类和 JavaScript 行为来自 Flowbite；工作坊内容、原创插图和焦点增强则属于应用代码。这样的分工让读者既能复用实用的组合，也能了解该库实际负责的部分。

- 使用 Flowbite 的有状态实例控制面板的显示与隐藏。

- 在应用逻辑中维护清单数据和派生进度。

- 只有通过明确的后端集成，才能处理实际购买或共享持久化。

阅读配套规范

## 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>
```

代码参考

- 按钮通过 aria-controls 关联到面板 ID。

- 抽屉由其标题标注。

- 进度条公开的计数与视力正常用户看到的计数相同。

### 原生 Flowbite 实例和本地状态

Accordion/Drawer 初始化，以及应用专属的清单和焦点管理。

```
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();
```

代码参考

- 一个 Accordion 实例控制全部三个类别。

- Drawer 生命周期回调会使背景不可交互，并在关闭后恢复焦点。

- 焦点循环是应用明确添加的功能。

### 原创打包插图及配套 CSS

围绕原生实用工具的应用布局细节。

```
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}}
```

代码参考

- 纸张、铅笔和尺子的几何图形是原创装饰性 CSS。

### 完整的 index.html 文档

与上文提供的样式表构建产物和完整交互源码配合使用。

```
<!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>
```

代码参考

- 将提供的交互代码保存为 main.js，并按设置说明将其编译为 bundle.js。

- 包含视口设置和原生资源加载。

## Flowbite 设计系统 Agent 设置

### 实现起点

已验证 Flowbite 4.0.2 与 Tailwind CSS 4.3.3。请根据 input.css 的实际位置调整 node_modules 源路径。无需远程字体。

```
/* npm install flowbite@4.0.2 */
/* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
```

### 适用于你项目的提示词

```
使用完整的 Flowbite 4.0.2 工作坊打包指南，包括 Tailwind 源发现，以及原生 Accordion 和 Drawer 初始化。将分组物品和清单状态与指南关联，并在记录本地打包备注前验证负责人信息。保留抽屉的键盘焦点管理、背景不可交互处理和关闭行为。将原创插图 CSS 与库的语义主题分开。此本地打包流程中不得加入服务工单或外部提交。
```

## Flowbite 设计系统来源与范围

Flowbite 4.0.2，使用其默认主题。打包内容、装饰插图和焦点增强均为原创。物品备注保留在本地。

- 官方代码仓库 第四版设置和组件 API。

- 默认主题源代码 实际的语义别名和几何属性。

- Accordion 实现 实例选项和 aria-expanded 更新。

- Drawer 实现 显示状态、背景遮罩和生命周期方法。

- Accordion 指南 官方组合参考。

- Drawer 指南 官方覆盖层 API。

- Tailwind 主题 基础间距和排版实用工具。

## Flowbite 设计系统相关资源

### Fomantic UI

原生 Fomantic UI 阅读书架，包含经过验证的编译主题值、jQuery 下拉菜单和评分模块、明确的键盘支持，以及持久化的本地收藏列表。

### Foundation

可运行的 Foundation proof desk，使用 XY Grid、Abide 自定义验证器、Reveal 确认组件、实际的 Sass 设置以及完整的本地集成代码。

### Framework7

原生 Framework7 速写本，包含可实际使用的滑动操作、明确的 iOS 主题值、支持键盘访问的操作菜单按钮，以及一个筛选列表；已完成的研究项目会保留在列表中，直到重置为止。


- [实现参考](https://flowbite.com/docs/components/accordion/)
- [来源](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css)
- [来源](https://tailwindcss.com/docs/theme)
- [阅读配套规范](https://flowbite.com/docs/getting-started/quickstart/)
- [阅读配套规范](https://flowbite.com/docs/components/accordion/)
- [阅读配套规范](https://flowbite.com/docs/forms/checkbox/)
- [阅读配套规范](https://flowbite.com/docs/components/drawer/)
- [阅读配套规范](https://flowbite.com/docs/forms/input-field/)
- [阅读配套规范](https://flowbite.com/docs/getting-started/javascript/)
- [代码参考](https://flowbite.com/docs/components/accordion/)
- [代码参考](https://flowbite.com/docs/components/drawer/)
- [代码参考](https://flowbite.com/docs/customize/colors/)
- [代码参考](https://flowbite.com/)
- [官方代码仓库 第四版设置和组件 API。](https://github.com/themesberg/flowbite)
- [默认主题源代码 实际的语义别名和几何属性。](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css)
- [Accordion 实现 实例选项和 aria-expanded 更新。](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts)
- [Drawer 实现 显示状态、背景遮罩和生命周期方法。](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts)
- [Accordion 指南 官方组合参考。](https://flowbite.com/docs/components/accordion/)
- [Drawer 指南 官方覆盖层 API。](https://flowbite.com/docs/components/drawer/)
- [Tailwind 主题 基础间距和排版实用工具。](https://tailwindcss.com/docs/theme)