{ "$comment": "@xxd/css 原生组件注册表：文档站、pnpm xxd ls / doc、xxd-ui Skill 都读它。改组件时同步改这里（registry.test.mjs 会检查类名真的存在于 CSS）。", "components": [ { "name": "Text", "zh": "文字层级", "category": "基础", "classes": [ "xxd-text", "xxd-text-pair" ], "attributes": { "data-variant": "display | heading1 | heading2 | heading3 | body | secondary | caption | mono | mono-secondary | success | danger | warning", "data-size": "xs | sm | base | lg", "data-truncate": "一行省略" }, "markup": "
\n

外观

\n

只影响这个插件

\n
\n

正文 13px --r-sm

", "react": "Text", "rules": [ "字重只有 400 / 500 / 600", "相关的字靠得更近", "不改字距", "行内等宽字 0.92em" ], "summary": "标题、正文、说明、等宽字的固定几档：层级靠字号和字重，不靠颜色。", "a11y": [ "标题用真正的 h1–h3（按页面层级，不跳级），不要用加粗的 p 冒充", "说明文字用 --muted（≥ 4.5:1），不要更浅" ] }, { "name": "Interaction", "zh": "交互工具", "category": "基础", "classes": [ "xxd-reveal", "xxd-concentric", "xxd-icon-line", "xxd-num", "xxd-bubble" ], "markup": "
悬停这一行
\n
", "js": "Xxd.showBubble(button, \"已复制\")", "rules": [ "hover 进入立即变、离开 140ms 淡回", "悬停才出现的操作：触屏常显、键盘能到", "同心圆角：外 = 内 + 间距" ], "summary": "悬停才出现的操作（.xxd-reveal）、整行可点、按下下沉这类交互小工具。", "a11y": [ "悬停才出现的按钮在键盘聚焦时也出现（:focus-within），触屏上一直显示", "整行可点时行里只放一个主链接，其余按钮单独可聚焦" ] }, { "name": "Button", "zh": "按钮", "category": "操作", "classes": [ "xxd-btn", "xxd-label-text" ], "attributes": { "data-variant": "primary | secondary（缺省）| ghost | outline | danger | danger-outline", "data-size": "xs | sm | md | lg", "data-icon-only": "纯图标（必须有 aria-label）", "aria-pressed": "切换态", "aria-busy": "进行中：宽度不跳，转圈居中；Xxd.runBusy(btn, task) 完成后图标变勾", "data-block": "撑满一行", "data-shape": "round：圆形图标按钮（跟随圆角开关）" }, "markup": "\n\n\n\n\n", "react": "Button", "rules": [ "按钮文字描述下一次点击会做什么", "一处只放一个实心按钮", "破坏性操作写清楚，不只靠颜色", "§9", "长标签包在 里（或加 .xxd-label-text）才有省略号；按钮永远不会撑出容器，裸文字超长时只会被裁掉。" ], "js": "await Xxd.runBusy(button, () => save())", "sample": "", "states": [ "default", "hover", "focus", "active", "disabled", "busy" ], "summary": "按钮文字描述下一次点击会做什么。一处只放一个实心按钮。", "examples": [ { "title": "尺寸", "markup": "\n\n\n" }, { "title": "图标按钮", "markup": "\n\n", "text": "纯图标按钮必须有 aria-label；悬停时 tooltip 连续出现。圆形图标按钮跟随圆角开关。" }, { "title": "纯平 / 质感（D1 对比）", "markup": "
", "text": "右上角「主色」里把按钮质感切到「质感」：实心按钮多一条顶部 1px 内高光、深一点的边，按下时下沉 0.5px。" }, { "title": "进行中与完成", "markup": "", "text": "点一下：宽度不跳，转圈居中；完成后图标变勾 1 秒。" } ], "a11y": [ "只有图标的按钮必须写 aria-label（tooltip 不算名字）", "进行中写 aria-busy=\"true\"：文字隐藏、出 spinner，读屏仍读按钮名", "切换按钮用 aria-pressed；按下 / 禁用 / 聚焦状态都不只靠颜色", "紧凑模式下按钮变矮，点击区仍不小于 --hit-min（40px，触屏 44px）" ] }, { "name": "Link", "zh": "文字链接按钮", "category": "操作", "classes": [ "xxd-link" ], "markup": "", "react": "Link", "rules": [ "40% 下划线，hover 变实" ], "attributes": { "data-variant": "inline（缺省）| plain | current", "data-external / target=_blank": "后面带外链图标" }, "sample": "改为新建一篇", "states": [ "default", "hover", "focus" ], "summary": "看起来像链接的按钮：句子里的次要操作，比如「改为新建一篇」。", "a11y": [ "跳转用 ，执行操作用 ", "react": "ButtonGroup", "summary": "几个并列的按钮拼成一条：同一件事的几种做法。", "a11y": [ "是一组互斥选项时改用分段控件（radiogroup），不要用按钮组", "需要时给外层 role=\"group\" 和 aria-label" ] }, { "name": "Field", "zh": "字段", "category": "表单", "classes": [ "xxd-field", "xxd-label", "xxd-help", "xxd-error", "xxd-input", "xxd-textarea" ], "attributes": { "aria-invalid": "出错时边框变危险色", "data-optional": "在 label 上：后面加「可选」", "data-autosize": "textarea 随内容长高" }, "markup": "
\n \n \n

最多 100 个字

\n
", "react": "Input", "rules": [ "一个框只有一个框：聚焦时边框变深一次，不加外圈和内框", "§4" ], "sample": "", "states": [ "default", "hover", "focus", "disabled", "error", "readonly" ], "summary": "标签 + 输入框 + 说明 / 错误：表单的一行。", "a11y": [ "label 的 for 指向输入框；说明和错误用 aria-describedby 连上", "出错时输入框写 aria-invalid=\"true\"，错误文字写清楚怎么改，不只变红" ] }, { "name": "Select", "zh": "选择", "category": "表单", "classes": [ "xxd-select" ], "attributes": { "data-variant": "bare：设置行里的「一个值 + 一个 chevron」" }, "markup": "", "react": "Select", "rules": [ "原生 ", "states": [ "default", "hover", "focus", "disabled" ], "summary": "原生 写 aria-label", "键盘和读屏行为都是浏览器原生的" ] }, { "name": "Picker", "zh": "自绘选择", "category": "表单", "classes": [ "xxd-picker", "xxd-picker__trigger", "xxd-picker__value", "xxd-option-group", "xxd-option-group__label" ], "summary": "原生 \n \n", "js": "Xxd.bindSearch(input, { onQuery: (q) => Xxd.markMatches(container, q) })", "rules": [ "⌘F / Ctrl+F 跳到它，Esc 清空", "匹配的字用 mark.xxd-hit 标出来" ], "summary": "带放大镜和清空按钮的搜索框；Esc 先清空，再按一次才离开。", "a11y": [ "type=\"search\"，没有可见标签时写 aria-label", "清空按钮有 aria-label；Esc 有内容时清空、没内容时交给外层" ] }, { "name": "InputGroup", "zh": "输入组", "category": "表单", "classes": [ "xxd-input-group", "xxd-input-group__addon", "xxd-input-group__suffix" ], "summary": "前后缀、内嵌按钮。整组是一个框，聚焦时整组边框变深一次。", "attributes": { "data-size": "sm", "aria-invalid": "出错" }, "markup": "
\n https://\n \n .xiaoxiaodong.ai\n \n
", "react": "InputGroup", "rules": [ "一个框只有一个框：前后缀在框里面，不是两个框拼起来" ], "a11y": [ "前后缀是纯文字说明，输入框仍需要自己的 label 或 aria-label", "组里的按钮是独立的 Tab 停留点" ] }, { "name": "SecretInput", "zh": "密钥输入", "category": "表单", "classes": [ "xxd-secret" ], "summary": "API 密钥、令牌：默认遮住，可以显示 / 隐藏、一键复制。会员站的 API 设置和插件的 AI 服务密钥都用它。", "markup": "
\n \n
\n \n \n \n
\n

只保存在这台电脑上。

\n
", "react": "SensitiveInput", "a11y": [ "显示 / 隐藏按钮是切换按钮（aria-pressed），文字跟着变", "复制成功的「已复制」通过 live region 读出" ], "rules": [ "默认遮住；显示后不要自动再遮住（用户自己决定）" ] }, { "name": "ClipboardText", "zh": "可复制的值", "category": "表单", "classes": [ "xxd-clipboard" ], "summary": "只读的值加一个复制按钮；复制后按钮上方冒出「已复制」，图标变勾一下。", "attributes": { "data-size": "sm" }, "markup": "
\n pnpm xxd new ~/js/插件-今日待办\n \n
", "react": "ClipboardText", "js": "[data-copy=\"文本\"] 或 [data-copy-target=\"#选择器\"]；data-copy-done 自定义气泡文字", "a11y": [ "复制按钮有 aria-label；「已复制」通过 live region（role=status）读出", "被复制的值是可选中的文字，键盘用户也能自己复制" ] }, { "name": "InlineCopy", "zh": "正文里可复制的字", "category": "表单", "classes": [ "xxd-inline-copy" ], "markup": "

命令 ，一点就复制。

", "react": "InlineCopyText", "rules": [ "hover / 聚焦时才出复制图标；触屏常显" ], "summary": "句子里的一段可复制的字（命令、ID）：点一下复制，冒出「已复制」。", "a11y": [ "本身是 \n \n\n
…
…
", "js": "list.addEventListener(\"xxd:change\", (e) => e.detail.value)", "react": "Tabs", "rules": [ "基线上的文字 + 滑动的短墨线", "选中改颜色不加粗", "tab 下面不再画第二条线", "放不下时两端渐隐，选中项自动滚进视野" ], "summary": "切换同一处的几块内容；墨线滑到选中项。", "a11y": [ "role=tablist / tab / tabpanel 由 JS 补齐，选中项 aria-selected，面板 aria-labelledby", "← → Home End 切换，Tab 只停在选中的那一个（roving tabindex）" ] }, { "name": "Segmented", "zh": "分段控件", "category": "导航", "classes": [ "xxd-segmented" ], "markup": "
\n \n \n
", "js": "group.addEventListener(\"xxd:change\", (e) => e.detail.value)", "react": "Tabs variant=\"segmented\"", "rules": [ "一个托盘，选中段像纸一样浮出来，不是框里套框" ], "summary": "2–4 个互斥选项挤在一条里：视图切换、类型选择。", "a11y": [ "role=radiogroup + aria-label，每段 role=radio + aria-checked", "← → 切换，Tab 只停一次；选中态在高对比模式下有描边" ] }, { "name": "Breadcrumbs", "zh": "面包屑", "category": "导航", "classes": [ "xxd-breadcrumbs", "xxd-breadcrumbs__more" ], "markup": "
  1. 首页
  2. 插件
  3. 长文发布
  4. 版本
  5. 1.8
  6. 1.8.2
", "react": "Breadcrumbs", "attributes": { "data-collapse": "超过 N 项（缺省 4）时中间折叠成「…」菜单", "data-size": "sm" }, "summary": "当前页在哪：一行路径；data-collapse=\"4\" 时中间几级折进「…」菜单。", "a11y": [ "外层