{
  "name": "拾界组件库",
  "version": "0.1.0",
  "license": "MIT",
  "implementation": "原创实现；仅参考公开分类与常见交互模式",
  "categories": [
    {
      "id": "button",
      "name": "按钮",
      "description": "明确的操作层级、状态与结果反馈。",
      "group": "基础",
      "icon": "plus",
      "samples": [
        {
          "id": "button-hierarchy",
          "category": "button",
          "title": "操作层级",
          "description": "通过主次关系区分当前页面最重要的动作。",
          "html": "<div class=\"su-action-grid\"><button class=\"su-btn\" data-action=\"演示设置已保存。\">保存设置</button><button class=\"su-btn su-btn-secondary\" data-action=\"已打开演示预览。\">预览</button><button class=\"su-btn su-btn-ghost\" data-action=\"本次演示修改已取消。\">取消</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-sizes",
          "category": "button",
          "title": "按钮尺寸",
          "description": "根据工具栏、常规表单和主要入口选择尺寸。",
          "html": "<div class=\"su-action-grid\"><button class=\"su-btn su-btn-sm\" data-action=\"已执行紧凑操作。\">紧凑操作</button><button class=\"su-btn\" data-action=\"已执行标准操作。\">标准操作</button><button class=\"su-btn su-btn-lg\" data-action=\"已开始创建演示项目。\">开始创建</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-icons",
          "category": "button",
          "title": "图标操作",
          "description": "图标按钮提供明确的辅助文字与访问名称。",
          "html": "<div class=\"su-action-grid\"><button class=\"su-btn\" data-action=\"已建立一个空白演示项目。\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg> 新建项目</button><button class=\"su-btn su-btn-secondary\" data-action=\"演示文件已准备好。\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4\"/></svg> 导出</button><button class=\"su-btn su-btn-secondary su-icon-btn\" aria-label=\"打开演示设置\" data-action=\"已打开演示设置。\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m10 3-.8 3-2.7 1L4 6l-2 3 2.1 2v3L2 16l2 3 2.5-1 2.7 1 .8 3h4l.8-3 2.7-1 2.5 1 2-3-2.1-2v-3L22 9l-2-3-2.5 1-2.7-1L14 3Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg></button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-loading",
          "category": "button",
          "title": "异步操作反馈",
          "description": "执行期间禁用按钮，结束后恢复可操作状态。",
          "html": "<button class=\"su-btn\" data-submit>提交演示申请</button><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.querySelector('[data-submit]').onclick=event=>{const button=event.currentTarget;button.disabled=true;button.innerHTML='<span class=\"su-loading-dot\" aria-hidden=\"true\"></span> 提交中…';root.querySelector('[data-result]').textContent='正在处理本地演示申请。';setTimeout(()=>{button.disabled=false;button.textContent='再次提交';root.querySelector('[data-result]').textContent='演示申请提交成功。';},900);};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-toggle",
          "category": "button",
          "title": "收藏切换",
          "description": "用按下状态表达可重复切换的操作。",
          "html": "<button class=\"su-btn su-btn-secondary\" aria-pressed=\"false\" data-toggle><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\"/></svg> <span>收藏示例</span></button><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.querySelector('[data-toggle]').onclick=event=>{const button=event.currentTarget,active=button.getAttribute('aria-pressed')!=='true';button.setAttribute('aria-pressed',String(active));button.querySelector('span').textContent=active?'已收藏':'收藏示例';root.querySelector('[data-result]').textContent=active?'已加入演示收藏。':'已取消收藏。';};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-segment",
          "category": "button",
          "title": "视图分段选择",
          "description": "相邻选项形成一组互斥的显示方式。",
          "html": "<div class=\"su-button-group\" role=\"group\" aria-label=\"演示视图\"><button aria-pressed=\"true\" data-view=\"列表\">列表</button><button aria-pressed=\"false\" data-view=\"网格\">网格</button><button aria-pressed=\"false\" data-view=\"看板\">看板</button></div><p data-result class=\"su-small su-muted\" role=\"status\">当前演示视图：列表</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.querySelectorAll('[data-view]').forEach(button=>button.onclick=()=>{root.querySelectorAll('[data-view]').forEach(node=>node.setAttribute('aria-pressed',String(node===button)));root.querySelector('[data-result]').textContent='当前演示视图：'+button.dataset.view;});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-copy",
          "category": "button",
          "title": "复制内容",
          "description": "复制失败时给出可直接选取的文字，适应沙箱环境。",
          "html": "<div class=\"su-stack\"><label class=\"su-field\">演示邀请口令<input class=\"su-input\" value=\"一起整理资料\" readonly data-copy-value></label><button class=\"su-btn\" data-copy><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg> 复制口令</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.querySelector('[data-copy]').onclick=async()=>{const field=root.querySelector('[data-copy-value]'),output=root.querySelector('[data-result]');try{await navigator.clipboard.writeText(field.value);output.textContent='演示口令已复制。';}catch{field.focus();field.select();try{output.textContent=document.execCommand('copy')?'演示口令已复制。':'请手动复制已选中的演示口令。';}catch{output.textContent='请手动复制已选中的演示口令。';}}};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-split",
          "category": "button",
          "title": "主操作与更多",
          "description": "把常用操作放在主按钮，次要选择放入菜单。",
          "html": "<div class=\"su-split\"><button class=\"su-btn\" data-action=\"演示文档已保存。\">保存文档</button><details><summary aria-label=\"更多保存方式\">▾</summary><div><button class=\"su-btn su-btn-ghost\" data-action=\"已生成一份演示副本。\">另存为副本</button><button class=\"su-btn su-btn-ghost\" data-action=\"演示文档已归档。\">保存并归档</button></div></details></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});root.addEventListener('click',event=>{if(event.target.closest('[data-action]'))root.querySelector('details').open=false;});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-danger",
          "category": "button",
          "title": "危险操作确认",
          "description": "需要再次点击确认，降低误触的可能性。",
          "html": "<div class=\"su-stack\"><p class=\"su-muted\" style=\"margin:0\">删除后会移除本地演示草稿。</p><button class=\"su-btn su-btn-danger\" data-delete>删除演示草稿</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "let confirm=false;root.querySelector('[data-delete]').onclick=event=>{if(!confirm){confirm=true;event.currentTarget.textContent='确认删除草稿';root.querySelector('[data-result]').textContent='再次点击确认删除；不会影响真实资料。';}else{event.currentTarget.disabled=true;event.currentTarget.textContent='草稿已删除';root.querySelector('[data-result]').textContent='本地演示草稿已删除。';}};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-wide",
          "category": "button",
          "title": "整行主要入口",
          "description": "小屏表单使用整行按钮，保持清晰的行动入口。",
          "html": "<div class=\"su-panel su-stack\"><strong>加入演示协作空间</strong><p class=\"su-muted\" style=\"margin:0\">创建你的第一项演示任务。</p><button class=\"su-btn\" data-action=\"已加入本地演示空间，可以开始创建任务。\" style=\"width:100%;justify-content:center\">立即加入</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-edit",
          "category": "button",
          "title": "行内编辑操作",
          "description": "编辑和保存状态跟随用户当前任务切换。",
          "html": "<label class=\"su-field\">演示项目名称<input class=\"su-input\" value=\"春日资料整理\" readonly data-name></label><div class=\"su-row\" style=\"margin-top:12px\"><button class=\"su-btn su-btn-secondary\" data-edit><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m10 3-.8 3-2.7 1L4 6l-2 3 2.1 2v3L2 16l2 3 2.5-1 2.7 1 .8 3h4l.8-3 2.7-1 2.5 1 2-3-2.1-2v-3L22 9l-2-3-2.5 1-2.7-1L14 3Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg> 编辑名称</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "let editing=false;root.querySelector('[data-edit]').onclick=event=>{const field=root.querySelector('[data-name]'),button=event.currentTarget;if(editing&&!field.value.trim()){root.querySelector('[data-result]').textContent='请输入项目名称。';field.focus();return;}editing=!editing;field.readOnly=!editing;button.textContent=editing?'保存名称':'编辑名称';root.querySelector('[data-result]').textContent=editing?'现在可以修改演示项目名称。':'已保存：'+field.value.trim();if(editing){field.focus();field.select();}};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "button-cooldown",
          "category": "button",
          "title": "重发倒计时",
          "description": "演示发送后短暂等待，避免重复操作。",
          "html": "<button class=\"su-btn\" data-send><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 6 9 7 9-7\"/></svg> 发送演示验证码</button><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-action-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.su-btn-sm{font-size:12px;min-height:32px;padding:6px 12px}.su-btn-lg{font-size:16px;min-height:50px;padding:12px 24px}.su-icon-btn{width:42px;height:42px;padding:9px;display:inline-grid;place-items:center}.su-button-group{display:inline-flex;flex-wrap:wrap;border:1px solid var(--su-border);border-radius:10px;overflow:hidden}.su-button-group button{border:0;border-right:1px solid var(--su-border);border-radius:0;background:var(--su-surface);color:var(--su-text);padding:10px 16px;cursor:pointer}.su-button-group button:last-child{border-right:0}.su-button-group [aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary)}.su-split{display:inline-flex;gap:1px}.su-split>button{border-radius:10px 0 0 10px}.su-split details{position:relative}.su-split summary{display:grid;place-items:center;cursor:pointer;background:var(--su-primary);color:var(--su-on-primary);padding:10px 14px;border-radius:0 10px 10px 0;list-style:none}.su-split details>div{position:absolute;top:44px;right:0;min-width:160px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:10px;padding:6px;z-index:2}.su-split details>div button{display:block;width:100%;text-align:left}.su-loading-dot{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;display:inline-block;border-radius:50%;animation:su-turn .8s linear infinite}@keyframes su-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.su-loading-dot{animation:none}}\n",
          "js": "root.querySelector('[data-send]').onclick=event=>{const button=event.currentTarget;let seconds=5;button.disabled=true;button.textContent=seconds+' 秒后重发';root.querySelector('[data-result]').textContent='本地演示验证码：246810，未发送短信。';const timer=setInterval(()=>{seconds--;button.textContent=seconds?seconds+' 秒后重发':'重新发送';if(!seconds){clearInterval(timer);button.disabled=false;}},1000);};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "card",
      "name": "卡片",
      "description": "组织项目、文章、方案与任务的摘要信息。",
      "group": "数据",
      "icon": "grid",
      "samples": [
        {
          "id": "card-project",
          "category": "card",
          "title": "项目概览卡",
          "description": "概括项目进度、负责人和常用入口。",
          "html": "<div class=\"su-demo-card\"><div class=\"su-card-body\"><div class=\"su-between\"><h3>春日资料整理</h3><span class=\"su-badge\">进行中</span></div><p class=\"su-muted\">演示项目，整理团队的共享资料。</p><div class=\"su-between su-small\"><span>完成进度</span><strong>68%</strong></div><progress max=\"100\" value=\"68\" style=\"width:100%;accent-color:var(--su-primary)\">68%</progress></div><div class=\"su-card-footer\"><span class=\"su-small su-muted\">负责人：小林</span><button class=\"su-btn su-btn-secondary\" data-action=\"演示项目包含 12 项任务，已完成 8 项。\">查看项目</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "card-metric",
          "category": "card",
          "title": "指标摘要卡",
          "description": "数字、趋势和比较范围保持在同一层级。",
          "html": "<div class=\"su-demo-card su-card-body\"><div class=\"su-between\"><span class=\"su-muted\">本周完成任务</span><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg></div><div class=\"su-card-metric\">128 <span class=\"su-small su-muted\">项</span></div><div class=\"su-between su-small\"><span style=\"color:var(--su-success)\">较上周增加 16 项</span><span class=\"su-muted\">演示统计</span></div></div>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "",
          "tags": [],
          "height": 260,
          "license": "MIT"
        },
        {
          "id": "card-article",
          "category": "card",
          "title": "文章预览卡",
          "description": "封面、摘要与阅读动作组成完整内容入口。",
          "html": "<article class=\"su-demo-card\"><div class=\"su-card-cover\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg></div><div class=\"su-card-body\"><span class=\"su-small su-muted\">协作指南 · 演示文章</span><h3 style=\"margin-top:8px\">从整理文件开始建立团队秩序</h3><p class=\"su-muted\">一套清晰的命名与归档习惯，让每个人都能更快找到资料。</p><button class=\"su-btn su-btn-ghost\" data-action=\"演示文章正文：先统一文件名称，再建立归档规则，最后定期整理。\">阅读摘要</button></div></article><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 390,
          "license": "MIT"
        },
        {
          "id": "card-member",
          "category": "card",
          "title": "成员名片",
          "description": "适合成员目录中的角色信息和关注动作。",
          "html": "<div class=\"su-demo-card su-card-body su-stack\"><div class=\"su-card-person\"><span class=\"su-avatar\">小林</span><div><h3 style=\"margin-bottom:4px\">小林</h3><span class=\"su-small su-muted\">产品设计 · 演示成员</span></div></div><p class=\"su-muted\">负责界面规范、交互细节和资料整理。</p><div class=\"su-row\"><span class=\"su-badge\">界面设计</span><span class=\"su-badge\">协作流程</span></div><button class=\"su-btn su-btn-secondary\" data-follow aria-pressed=\"false\">关注成员</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.querySelector('[data-follow]').onclick=event=>{const active=event.currentTarget.getAttribute('aria-pressed')!=='true';event.currentTarget.setAttribute('aria-pressed',String(active));event.currentTarget.textContent=active?'已关注':'关注成员';root.querySelector('[data-result]').textContent=active?'已关注演示成员小林。':'已取消关注。';};",
          "tags": [],
          "height": 360,
          "license": "MIT"
        },
        {
          "id": "card-pricing",
          "category": "card",
          "title": "方案价格卡",
          "description": "价格、权益与选择反馈集中展示。",
          "html": "<div class=\"su-demo-card su-card-body\"><div class=\"su-between\"><h3>团队协作</h3><span class=\"su-badge\">演示方案</span></div><div class=\"su-card-price\">¥ 39 <small>/ 月</small></div><ul class=\"su-card-list\"><li><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg> 5 位协作成员</li><li><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg> 20 G 共享空间</li><li><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg> 历史版本与资料导出</li></ul><button class=\"su-btn\" data-action=\"已选择团队协作演示方案，不会产生订单或扣款。\" style=\"width:100%;justify-content:center\">选择此方案</button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 380,
          "license": "MIT"
        },
        {
          "id": "card-notification",
          "category": "card",
          "title": "通知任务卡",
          "description": "一条需要处理的消息配合明确响应动作。",
          "html": "<div class=\"su-demo-card\"><div class=\"su-card-body\"><div class=\"su-row\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><h3 style=\"margin:0\">新的协作邀请</h3></div><p class=\"su-muted\" style=\"margin-top:12px\">演示成员阿青邀请你加入“内容资料库”。</p><span class=\"su-small su-muted\">刚刚 · 演示消息</span></div><div class=\"su-card-footer\"><button class=\"su-btn su-btn-ghost\" data-reply=\"已忽略这条演示邀请。\">暂不加入</button><button class=\"su-btn\" data-reply=\"已加入演示内容资料库。\">接受邀请</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.querySelectorAll('[data-reply]').forEach(button=>button.onclick=()=>{root.querySelector('[data-result]').textContent=button.dataset.reply;root.querySelectorAll('[data-reply]').forEach(node=>node.disabled=true);});",
          "tags": [],
          "height": 320,
          "license": "MIT"
        },
        {
          "id": "card-horizontal",
          "category": "card",
          "title": "横向内容卡",
          "description": "缩略图与文字并排，适合紧凑的资源列表。",
          "html": "<div class=\"su-demo-card su-card-split\"><div class=\"su-card-cover\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg></div><div class=\"su-card-body\"><span class=\"su-small su-muted\">组件资源</span><h3 style=\"margin-top:6px\">清晰的表单结构</h3><p class=\"su-muted\">从标签、说明到校验，整理常用表单模式。</p><button class=\"su-btn su-btn-secondary\" data-action=\"演示资源已加入稍后阅读清单。\">稍后阅读</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 320,
          "license": "MIT"
        },
        {
          "id": "card-checklist",
          "category": "card",
          "title": "检查清单卡",
          "description": "任务完成状态与完成数量实时同步。",
          "html": "<div class=\"su-demo-card su-card-body\"><div class=\"su-between\"><h3>发布前检查</h3><span data-count class=\"su-badge\">1 / 3</span></div><label class=\"su-card-check\"><input type=\"checkbox\" checked><span>核对演示内容</span></label><label class=\"su-card-check\"><input type=\"checkbox\" ><span>检查小屏布局</span></label><label class=\"su-card-check\"><input type=\"checkbox\" ><span>确认键盘操作</span></label><p class=\"su-small su-muted\" data-result role=\"status\">已完成 1 项演示检查。</p></div>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>{const count=root.querySelectorAll('input:checked').length;root.querySelector('[data-count]').textContent=count+' / 3';root.querySelector('[data-result]').textContent=count===3?'演示检查全部完成。':'已完成 '+count+' 项演示检查。';});",
          "tags": [],
          "height": 330,
          "license": "MIT"
        },
        {
          "id": "card-quota",
          "category": "card",
          "title": "资源用量卡",
          "description": "展示容量及增加用量后的状态变化。",
          "html": "<div class=\"su-demo-card su-card-body su-stack\"><div class=\"su-between\"><h3>演示存储空间</h3><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg></div><div><span class=\"su-card-price\" data-amount>6</span><span class=\"su-muted\"> / 10 G</span></div><progress max=\"10\" value=\"6\" data-progress style=\"width:100%;accent-color:var(--su-primary)\">6 / 10</progress><button class=\"su-btn su-btn-secondary\" data-add>模拟增加 1 G</button><p class=\"su-small su-muted\" data-result role=\"status\">当前剩余 4 G。</p></div>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "let value=6;root.querySelector('[data-add]').onclick=event=>{value=Math.min(10,value+1);root.querySelector('[data-amount]').textContent=value;root.querySelector('[data-progress]').value=value;root.querySelector('[data-result]').textContent=value===10?'演示空间已用满，请整理资料。':'当前剩余 '+(10-value)+' G。';if(value===10)event.currentTarget.disabled=true;};",
          "tags": [],
          "height": 350,
          "license": "MIT"
        },
        {
          "id": "card-expand",
          "category": "card",
          "title": "可展开详情卡",
          "description": "摘要常驻，非必要说明按需展开。",
          "html": "<div class=\"su-demo-card su-card-body\"><h3>空间访问规则</h3><p class=\"su-muted\">公开资料可被团队成员查阅。</p><details><summary style=\"cursor:pointer;color:var(--su-primary);padding:8px 0\">查看详细规则</summary><ul class=\"su-small su-muted\" style=\"line-height:1.8;padding-left:20px\"><li>编辑成员可以更新资料。</li><li>只读成员可以浏览和下载。</li><li>访客需要经过单独邀请。</li></ul></details></div>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "card-empty",
          "category": "card",
          "title": "空状态创建卡",
          "description": "说明当前没有内容，并允许立即建立示例。",
          "html": "<div class=\"su-demo-card su-card-empty\" data-content><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg><h3 style=\"margin:0\">还没有收藏资料</h3><p class=\"su-muted\">先添加一条演示资料，体验整理过程。</p><button class=\"su-btn\" data-create>添加演示资料</button></div><p class=\"su-small su-muted\" data-result role=\"status\">列表为空。</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.querySelector('[data-create]').onclick=()=>{root.querySelector('[data-content]').innerHTML='<div class=\"su-card-body\" style=\"text-align:left\"><span class=\"su-badge\">新资料</span><h3 style=\"margin-top:14px\">协作入门说明</h3><p class=\"su-muted\">已经添加到当前预览的收藏列表。</p></div>';root.querySelector('[data-result]').textContent='已添加 1 条本地演示资料。';};",
          "tags": [],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "card-selection",
          "category": "card",
          "title": "可选择方案卡",
          "description": "整张选项区域可点击，明确表达单选状态。",
          "html": "<fieldset style=\"border:0;padding:0;margin:0\"><legend style=\"font-weight:600;margin-bottom:14px\">选择演示工作方式</legend><div class=\"su-stack\"><label class=\"su-demo-card su-card-body\" style=\"display:flex;align-items:center;gap:12px;cursor:pointer\"><input type=\"radio\" name=\"card-mode\" value=\"个人整理\" checked style=\"accent-color:var(--su-primary)\"><span><strong>个人整理</strong><span class=\"su-small su-muted\" style=\"display:block;margin-top:6px\">适合自己的资料与任务</span></span></label><label class=\"su-demo-card su-card-body\" style=\"display:flex;align-items:center;gap:12px;cursor:pointer\"><input type=\"radio\" name=\"card-mode\" value=\"团队协作\"  style=\"accent-color:var(--su-primary)\"><span><strong>团队协作</strong><span class=\"su-small su-muted\" style=\"display:block;margin-top:6px\">适合共享资料和分配任务</span></span></label></div></fieldset><p class=\"su-small su-muted\" data-result role=\"status\">已选择：个人整理</p>",
          "css": "\n.su-demo-card{border:1px solid var(--su-border);border-radius:16px;background:var(--su-surface);overflow:hidden}.su-card-body{padding:20px}.su-card-body h3{margin:0 0 9px;font-size:18px}.su-card-body p{line-height:1.65;margin:0 0 14px}.su-card-footer{padding:14px 20px;border-top:1px solid var(--su-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.su-card-cover{height:120px;background:var(--su-soft);display:grid;place-items:center;overflow:hidden;position:relative}.su-card-cover svg{width:70px;height:70px;color:var(--su-primary)}.su-card-metric{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0}.su-card-split{display:grid;grid-template-columns:100px 1fr}.su-card-split .su-card-cover{height:100%;min-height:190px}.su-card-price{font-size:35px;font-weight:700}.su-card-price small{font-size:13px;font-weight:400;color:var(--su-muted)}.su-card-list{margin:14px 0;padding:0;list-style:none;display:grid;gap:10px}.su-card-list li{display:flex;align-items:center;gap:8px}.su-card-list svg{width:16px;height:16px;color:var(--su-success)}.su-card-empty{padding:30px 20px;text-align:center}.su-card-empty>svg{width:40px;height:40px;color:var(--su-muted);margin-bottom:12px}.su-card-empty p{margin:8px 0 18px}.su-card-check{display:flex;align-items:center;gap:10px;padding:10px 0}.su-card-check input{accent-color:var(--su-primary)}.su-card-check:has(input:checked) span{text-decoration:line-through;color:var(--su-muted)}.su-card-person{display:flex;align-items:center;gap:12px}.su-card-person .su-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--su-soft);color:var(--su-primary)}\n",
          "js": "root.querySelectorAll('input').forEach(input=>input.onchange=()=>root.querySelector('[data-result]').textContent='已选择：'+input.value);",
          "tags": [],
          "height": 360,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "input",
      "name": "输入框",
      "description": "覆盖搜索、校验、密码、验证码和数量输入。",
      "group": "表单",
      "icon": "file",
      "samples": [
        {
          "id": "input-label",
          "category": "input",
          "title": "标签与帮助文字",
          "description": "将标签、说明与输入内容关联，包含只读字段。",
          "html": "<div class=\"su-field\"><label for=\"su-display-name\">显示名称</label><input id=\"su-display-name\" class=\"su-input\" placeholder=\"填写姓名或昵称\" maxlength=\"24\" aria-describedby=\"su-name-help\"><p id=\"su-name-help\" class=\"su-input-help\">用于项目中的成员展示，最多 24 个字。</p></div><div class=\"su-field\"><label for=\"su-account-id\">账户编号</label><input id=\"su-account-id\" class=\"su-input\" value=\"10086\" readonly></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-search",
          "category": "input",
          "title": "带图标搜索",
          "description": "输入关键字后立即筛选本地演示文件。",
          "html": "<div class=\"su-field\"><label for=\"su-file-search\">搜索文件</label><div class=\"su-input-wrap\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/></svg><input id=\"su-file-search\" class=\"su-input\" placeholder=\"搜索设计、报告等\"></div></div><ul class=\"su-input-results\" aria-live=\"polite\"><li>设计规范</li><li>项目报告</li><li>产品草稿</li></ul>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const names=['设计规范','项目报告','产品草稿'];root.querySelector('input').addEventListener('input',event=>{const matches=names.filter(name=>name.includes(event.target.value.trim()));root.querySelector('ul').replaceChildren(...(matches.length?matches:['未找到文件']).map(name=>{const li=document.createElement('li');li.textContent=name;return li}))})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-prefix",
          "category": "input",
          "title": "前缀与单位",
          "description": "固定技术前缀与可编辑名称分离，避免重复填写。",
          "html": "<div class=\"su-field\"><label for=\"su-site-name\">站点地址</label><div class=\"su-input-prefix\"><span>https://</span><input id=\"su-site-name\" class=\"su-input\" value=\"demo.example\" autocomplete=\"url\"></div><span class=\"su-input-help\">此地址为本地演示，不会发起网络请求。</span></div><div class=\"su-field\"><label for=\"su-storage\">空间配额</label><div class=\"su-input-prefix\"><span>G</span><input id=\"su-storage\" type=\"number\" min=\"1\" max=\"1000\" class=\"su-input\" value=\"100\"></div></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-password",
          "category": "input",
          "title": "密码可见切换",
          "description": "按需显示输入，按钮同步当前状态与可访问名称。",
          "html": "<div class=\"su-field\"><label for=\"su-pass\">密码</label><div class=\"su-input-wrap\"><input id=\"su-pass\" class=\"su-input\" type=\"password\" value=\"example123\" autocomplete=\"new-password\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-pressed=\"false\">显示</button></div><p class=\"su-input-help\">演示密码，可随意修改。</p></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const field=root.querySelector('input'),button=root.querySelector('button');button.addEventListener('click',()=>{const visible=field.type==='password';field.type=visible?'text':'password';button.textContent=visible?'隐藏':'显示';button.setAttribute('aria-pressed',String(visible))})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-clear",
          "category": "input",
          "title": "一键清空",
          "description": "输入非空时显示清空操作，清空后焦点回到字段。",
          "html": "<div class=\"su-field\"><label for=\"su-clearable\">项目名称</label><div class=\"su-input-wrap\"><input id=\"su-clearable\" class=\"su-input\" value=\"秋季设计项目\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"清空项目名称\">清空</button></div><p class=\"su-input-help\" role=\"status\">可以直接编辑或清空名称。</p></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const field=root.querySelector('input'),button=root.querySelector('button'),status=root.querySelector('[role=status]');field.addEventListener('input',()=>{button.hidden=!field.value;status.textContent=field.value?'已输入 '+field.value.length+' 个字':'等待输入项目名称'});button.addEventListener('click',()=>{field.value='';button.hidden=true;status.textContent='已清空项目名称';field.focus()})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-validation",
          "category": "input",
          "title": "即时邮箱校验",
          "description": "提交时反馈错误，修正后恢复，并区分未输入与格式错误。",
          "html": "<form class=\"su-stack\" novalidate><div class=\"su-field\"><label for=\"su-contact\">联系邮箱</label><input id=\"su-contact\" class=\"su-input\" type=\"email\" required placeholder=\"填写常用邮箱\" aria-describedby=\"su-contact-result\"><p id=\"su-contact-result\" class=\"su-input-error\" aria-live=\"polite\"></p></div><button type=\"submit\" class=\"su-btn\" style=\"align-self:flex-start\">验证邮箱</button></form>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const form=root.querySelector('form'),field=root.querySelector('input'),result=root.querySelector('p');function validate(){const valid=field.validity.valid;field.setAttribute('aria-invalid',String(!valid));result.textContent=valid?'邮箱格式正确，可继续使用。':field.validity.valueMissing?'请先填写邮箱地址。':'邮箱格式有误，请检查后重试。';result.style.color=valid?'var(--su-success)':'var(--su-danger)';return valid}form.addEventListener('submit',event=>{event.preventDefault();validate();field.focus()});field.addEventListener('input',()=>{if(field.hasAttribute('aria-invalid'))validate()})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-counter",
          "category": "input",
          "title": "字数与容量",
          "description": "实时统计字符数量，输入达到上限时保留原生限制。",
          "html": "<div class=\"su-field\"><label for=\"su-bio\">个人简介</label><textarea id=\"su-bio\" class=\"su-input su-input-area\" maxlength=\"80\" placeholder=\"写几句话介绍自己\" aria-describedby=\"su-bio-count\"></textarea><div class=\"su-between su-small su-muted\"><span>最多 80 个字符</span><output id=\"su-bio-count\">0 / 80</output></div><div class=\"su-input-meter\" aria-hidden=\"true\"><span style=\"width:0\"></span></div></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const field=root.querySelector('textarea');field.addEventListener('input',()=>{root.querySelector('output').textContent=field.value.length+' / 80';root.querySelector('.su-input-meter span').style.width=(field.value.length/80*100)+'%'})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-stepper",
          "category": "input",
          "title": "数量步进器",
          "description": "按钮与手动输入共享边界，达到上下限后禁用对应按钮。",
          "html": "<div class=\"su-field\"><label for=\"su-seat\">成员席位</label><div class=\"su-input-stepper\"><button type=\"button\" data-step=\"-1\" aria-label=\"减少一个席位\">−</button><input id=\"su-seat\" type=\"number\" min=\"1\" max=\"20\" value=\"3\"><button type=\"button\" data-step=\"1\" aria-label=\"增加一个席位\">+</button></div><output class=\"su-input-help\" aria-live=\"polite\">每席 ¥12，共 ¥36 / 月</output></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const field=root.querySelector('input'),buttons=[...root.querySelectorAll('button')];function update(){const value=Math.max(1,Math.min(20,Number(field.value)||1));field.value=value;buttons[0].disabled=value===1;buttons[1].disabled=value===20;root.querySelector('output').textContent='每席 ¥12，共 ¥'+value*12+' / 月'}buttons.forEach(button=>button.addEventListener('click',()=>{field.value=Number(field.value)+Number(button.dataset.step);update()}));field.addEventListener('change',update);update()",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-verification",
          "category": "input",
          "title": "六位验证码",
          "description": "支持粘贴整段数字、输入后前移、退格回退与重置。",
          "html": "<fieldset style=\"border:0;padding:0;margin:0\" class=\"su-stack\"><legend style=\"font-weight:550;margin-bottom:10px\">六位验证码</legend><div class=\"su-otp\"><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 1 位验证码\" autocomplete=\"one-time-code\"><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 2 位验证码\" ><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 3 位验证码\" ><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 4 位验证码\" ><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 5 位验证码\" ><input class=\"su-input\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"1\" aria-label=\"第 6 位验证码\" ></div><p class=\"su-input-help\" role=\"status\">仅演示输入，不会验证真实短信。</p><button type=\"button\" class=\"su-btn su-btn-secondary\" style=\"align-self:flex-start\">重置输入</button></fieldset>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const fields=[...root.querySelectorAll('input')],status=root.querySelector('[role=status]');function report(){status.textContent=fields.every(field=>field.value)?'验证码已填完整：'+fields.map(field=>field.value).join(''):'已填写 '+fields.filter(field=>field.value).length+' 位'}fields.forEach((field,index)=>{field.addEventListener('input',()=>{field.value=field.value.replace(/[^0-9]/g,'').slice(-1);if(field.value)fields[index+1]?.focus();report()});field.addEventListener('keydown',event=>{if(event.key==='Backspace'&&!field.value)fields[index-1]?.focus();if(event.key==='ArrowLeft')fields[index-1]?.focus();if(event.key==='ArrowRight')fields[index+1]?.focus()});field.addEventListener('paste',event=>{event.preventDefault();const digits=event.clipboardData.getData('text').replace(/[^0-9]/g,'').slice(0,6-index);digits.split('').forEach((digit,offset)=>{fields[index+offset].value=digit});fields[Math.min(5,index+digits.length)]?.focus();report()})});root.querySelector('button').addEventListener('click',()=>{fields.forEach(field=>field.value='');fields[0].focus();report()})",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-budget",
          "category": "input",
          "title": "区间输入",
          "description": "一组字段表达预算范围，检查上下界的业务关系。",
          "html": "<fieldset class=\"su-stack\" style=\"border:0;padding:0;margin:0\"><legend style=\"font-weight:550;margin-bottom:10px\">项目预算</legend><div class=\"su-input-budget\"><input class=\"su-input\" type=\"number\" min=\"0\" value=\"2000\" aria-label=\"最低预算\"><span>至</span><input class=\"su-input\" type=\"number\" min=\"0\" value=\"8000\" aria-label=\"最高预算\"></div><p class=\"su-input-help\" role=\"status\">预算范围：¥2,000 — ¥8,000</p></fieldset>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const fields=[...root.querySelectorAll('input')],status=root.querySelector('[role=status]');fields.forEach(field=>field.addEventListener('input',()=>{const [low,high]=fields.map(el=>Number(el.value));const valid=low<=high&&low>=0&&high>=0&&fields.every(el=>el.value!=='');fields.forEach(el=>el.setAttribute('aria-invalid',String(!valid)));status.style.color=valid?'var(--su-muted)':'var(--su-danger)';status.textContent=valid?'预算范围：¥'+low.toLocaleString()+' — ¥'+high.toLocaleString():'请填写有效金额，最高预算应不低于最低预算。'}))",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "input-autosize",
          "category": "input",
          "title": "自适应多行输入",
          "description": "内容增加时自动增高，到达高度上限后在输入框内滚动。",
          "html": "<div class=\"su-field\"><label for=\"su-note\">项目备注</label><textarea id=\"su-note\" class=\"su-input su-input-area\" rows=\"2\" placeholder=\"试试输入多行内容\" style=\"resize:none\" aria-describedby=\"su-note-help\">今天完成组件交互检查。\n明天整理使用说明。</textarea><p id=\"su-note-help\" class=\"su-input-help\">高度随内容调整，最多显示 180 像素。</p></div>",
          "css": ".su-input-wrap{position:relative;display:flex;align-items:center;width:100%}.su-input-wrap>svg{position:absolute;left:12px;color:var(--su-muted);pointer-events:none}.su-input-wrap>svg+.su-input{padding-left:40px}.su-input-wrap>button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-input-wrap>.su-input{padding-right:76px}.su-input-prefix{display:flex;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-prefix>span{padding:9px 12px;background:var(--su-bg);color:var(--su-muted);border-right:1px solid var(--su-border);white-space:nowrap}.su-input-prefix .su-input{border:0;border-radius:0}.su-input-error{color:var(--su-danger);font-size:12px;min-height:20px}.su-input-help{font-size:12px;color:var(--su-muted);min-height:20px}.su-input[aria-invalid=true]{border-color:var(--su-danger)}.su-input-meter{height:4px;border-radius:3px;background:var(--su-border);overflow:hidden}.su-input-meter>span{height:100%;display:block;background:var(--su-primary);transition:width .2s}.su-input-stepper{display:inline-flex;border:1px solid var(--su-border);border-radius:8px;width:160px;overflow:hidden}.su-input-stepper input{width:64px;border:0;text-align:center;padding:8px;appearance:textfield;color:var(--su-text);background:var(--su-surface)}.su-input-stepper input::-webkit-inner-spin-button{appearance:none}.su-input-stepper button{flex:1;border:0;background:var(--su-bg);color:var(--su-text);min-width:42px;min-height:42px}.su-input-results{list-style:none;margin:0;padding:0;border:1px solid var(--su-border);border-radius:8px;overflow:hidden}.su-input-results li{padding:8px 12px;border-bottom:1px solid var(--su-border)}.su-input-results li:last-child{border:0}.su-otp{display:flex;gap:8px}.su-otp input{width:42px;height:50px;text-align:center;padding:5px;font-size:20px;font-weight:600;min-width:0}.su-input-area{min-height:90px;max-height:180px}.su-input-budget{display:flex;gap:10px}.su-input-budget .su-input{flex:1}.su-input-budget>span{align-self:center;color:var(--su-muted)}@media(max-width:380px){.su-otp{gap:5px}.su-otp input{width:36px}}",
          "js": "const field=root.querySelector('textarea');function resize(){field.style.height='auto';field.style.height=Math.min(180,field.scrollHeight+2)+'px'}field.addEventListener('input',resize);resize()",
          "tags": [
            "表单",
            "可编辑"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "select",
      "name": "选择器",
      "description": "原生选择、搜索、联动、多选和新建选项。",
      "group": "表单",
      "icon": "chevron",
      "samples": [
        {
          "id": "select-basic",
          "category": "select",
          "title": "标准下拉框",
          "description": "保留浏览器原生键盘与移动端选择体验。",
          "html": "<div class=\"su-field\"><label for=\"su-native\">项目状态</label><select id=\"su-native\" class=\"su-input su-select-native\"><option>进行中</option><option>待开始</option><option>已完成</option><option>已归档</option></select></div><p class=\"su-select-result\" role=\"status\"></p>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "const status=root.querySelector('[role=status]');function report(){status.textContent='已选择：'+[...root.querySelectorAll('select')].filter(el=>!el.disabled).map(el=>el.selectedOptions[0]?.textContent||'未选择').join(' / ')}root.querySelectorAll('select').forEach(el=>el.addEventListener('change',report));;report()",
          "tags": [
            "下拉选择",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "select-groups",
          "category": "select",
          "title": "分组选项",
          "description": "利用原生选项组将地区层次表达清楚。",
          "html": "<div class=\"su-field\"><label for=\"su-region\">服务地区</label><select id=\"su-region\" class=\"su-input su-select-native\"><optgroup label=\"华东\"><option>上海</option><option>杭州</option><option>南京</option></optgroup><optgroup label=\"华南\"><option>广州</option><option>深圳</option></optgroup><optgroup label=\"西南\"><option>成都</option><option>重庆</option></optgroup></select></div><p class=\"su-select-result\" role=\"status\"></p>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "const status=root.querySelector('[role=status]');function report(){status.textContent='已选择：'+[...root.querySelectorAll('select')].filter(el=>!el.disabled).map(el=>el.selectedOptions[0]?.textContent||'未选择').join(' / ')}root.querySelectorAll('select').forEach(el=>el.addEventListener('change',report));;report()",
          "tags": [
            "下拉选择",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "select-disabled",
          "category": "select",
          "title": "禁用与只读提示",
          "description": "不可用项保留说明，整个字段可明确进入禁用状态。",
          "html": "<div class=\"su-field\"><label for=\"su-environment\">运行环境</label><select id=\"su-environment\" class=\"su-input su-select-native\"><option>测试环境 · 可用</option><option disabled>生产环境 · 需要审核</option><option>预发布环境 · 可用</option></select></div><div class=\"su-field\"><label for=\"su-plan-fixed\">账户套餐</label><select id=\"su-plan-fixed\" class=\"su-input su-select-native\" disabled><option>团队版 · 管理员已锁定</option></select><span class=\"su-small su-muted\">套餐由空间管理员统一管理。</span></div><p class=\"su-select-result\" role=\"status\"></p>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "const status=root.querySelector('[role=status]');function report(){status.textContent='已选择：'+[...root.querySelectorAll('select')].filter(el=>!el.disabled).map(el=>el.selectedOptions[0]?.textContent||'未选择').join(' / ')}root.querySelectorAll('select').forEach(el=>el.addEventListener('change',report));;report()",
          "tags": [
            "下拉选择",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "select-dependent",
          "category": "select",
          "title": "联动下拉",
          "description": "改变省份后更新城市列表，防止保留无效的旧值。",
          "html": "<div class=\"su-select-dependent\"><div class=\"su-field\"><label for=\"su-province\">省份</label><select id=\"su-province\" class=\"su-input su-select-native\"><option>浙江</option><option>广东</option><option>四川</option></select></div><div class=\"su-field\"><label for=\"su-city\">城市</label><select id=\"su-city\" class=\"su-input su-select-native\"><option>杭州</option><option>宁波</option><option>温州</option></select></div></div><p class=\"su-select-result\" role=\"status\"></p>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "const status=root.querySelector('[role=status]');function report(){status.textContent='已选择：'+[...root.querySelectorAll('select')].filter(el=>!el.disabled).map(el=>el.selectedOptions[0]?.textContent||'未选择').join(' / ')}root.querySelectorAll('select').forEach(el=>el.addEventListener('change',report));const cities={浙江:['杭州','宁波','温州'],广东:['广州','深圳','珠海'],四川:['成都','绵阳','乐山']};const province=root.querySelector('#su-province'),city=root.querySelector('#su-city');province.addEventListener('change',()=>{city.replaceChildren(...cities[province.value].map(name=>{const option=document.createElement('option');option.textContent=name;return option}));report()});report()",
          "tags": [
            "下拉选择",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "select-search",
          "category": "select",
          "title": "可搜索单选",
          "description": "输入缩小范围，方向键定位，回车确认与退出键关闭。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">选择城市</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索并选择\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"展开选项\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"选择城市\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"北京\"},{\"label\":\"上海\"},{\"label\":\"广州\"},{\"label\":\"深圳\"},{\"label\":\"杭州\"},{\"label\":\"成都\"},{\"label\":\"重庆\"},{\"label\":\"南京\"}],config={},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        },
        {
          "id": "select-multiple",
          "category": "select",
          "title": "可搜索多选",
          "description": "搜索、勾选、移除标签与全清操作共用一组选择状态。",
          "html": "<div class=\"su-stack\"><span id=\"su-multi-label\" style=\"font-weight:550\">项目标签</span><div class=\"su-select-tags\" aria-label=\"已选择的标签\"></div><div class=\"su-select-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-select-multi-trigger\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-labelledby=\"su-multi-label\">选择标签<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-select-pop\" role=\"dialog\" aria-label=\"选择项目标签\" hidden><div class=\"su-select-search\"><label for=\"su-tag-search\" class=\"su-small su-muted\">搜索标签</label><input id=\"su-tag-search\" class=\"su-input\" placeholder=\"按名称筛选\"></div><div data-options></div><p class=\"su-select-empty\" hidden>没有匹配标签</p><button type=\"button\" class=\"su-btn su-btn-ghost\" data-clear>清空全部</button></div></div><p class=\"su-select-result\" role=\"status\"></p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst labels=['设计','开发','运营','文档','研究','测试'],selected=new Set(['设计']),trigger=root.querySelector('.su-select-multi-trigger'),pop=root.querySelector('[role=dialog]'),field=root.querySelector('input'),host=root.querySelector('.su-select-host');\nfunction render(){const target=root.querySelector('[data-options]');target.replaceChildren();let visible=0;labels.forEach((label,index)=>{if(!label.includes(field.value.trim()))return;visible++;const wrap=document.createElement('label');wrap.className='su-select-multi-option';const check=document.createElement('input');check.type='checkbox';check.value=label;check.checked=selected.has(label);wrap.append(check,document.createTextNode(label));target.append(wrap)});root.querySelector('.su-select-empty').hidden=visible>0;const tags=root.querySelector('.su-select-tags');tags.replaceChildren();selected.forEach(label=>{const remove=document.createElement('button');remove.type='button';remove.textContent=label+' ×';remove.setAttribute('aria-label','移除标签 '+label);remove.addEventListener('click',()=>{selected.delete(label);render();trigger.focus()});tags.append(remove)});root.querySelector('[role=status]').textContent=selected.size?'已选择 '+selected.size+' 个标签：'+[...selected].join('、'):'尚未选择标签'}\nfunction close(){pop.hidden=true;trigger.setAttribute('aria-expanded','false')}\ntrigger.addEventListener('click',()=>{pop.hidden=!pop.hidden;trigger.setAttribute('aria-expanded',String(!pop.hidden));if(!pop.hidden)field.focus()});field.addEventListener('input',render);pop.addEventListener('change',event=>{if(event.target.type==='checkbox'){const value=event.target.value;event.target.checked?selected.add(value):selected.delete(value);render();[...pop.querySelectorAll('input[type=checkbox]')].find(check=>check.value===value)?.focus()}});root.querySelector('[data-clear]').addEventListener('click',()=>{selected.clear();render()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});pop.addEventListener('keydown',event=>{if(event.key==='Escape'){close();trigger.focus()}});document.addEventListener('focusin',event=>{if(!host.contains(event.target))close()});render();",
          "tags": [
            "多选",
            "搜索下拉",
            "标签"
          ],
          "height": 430,
          "license": "MIT"
        },
        {
          "id": "select-members",
          "category": "select",
          "title": "成员选择",
          "description": "姓名与职责一起搜索，头像帮助快速辨认。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">项目负责人</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索姓名或职责\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"展开选项\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"项目负责人\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"林小夏\",\"detail\":\"设计师\"},{\"label\":\"周书言\",\"detail\":\"产品经理\"},{\"label\":\"陈一舟\",\"detail\":\"开发工程师\"},{\"label\":\"许知远\",\"detail\":\"测试工程师\"}],config={\"people\":true,\"placeholder\":\"搜索姓名或职责\"},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        },
        {
          "id": "select-clearable",
          "category": "select",
          "title": "可清空选择",
          "description": "允许移除选择后恢复空值，不强制自动选中第一项。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">选择文件夹</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索并选择\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"清空所选项\">清空</button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"选择文件夹\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"全部资料\",\"detail\":\"24 项\"},{\"label\":\"设计资源\",\"detail\":\"12 项\"},{\"label\":\"项目文档\",\"detail\":\"8 项\"},{\"label\":\"归档记录\",\"detail\":\"4 项\"}],config={\"clear\":true},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        },
        {
          "id": "select-create",
          "category": "select",
          "title": "搜索并创建",
          "description": "没有匹配内容时，可回车创建本地演示标签。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">选择或创建标签</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索标签，或输入新名称\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"展开选项\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"选择或创建标签\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"产品设计\"},{\"label\":\"前端开发\"},{\"label\":\"用户研究\"}],config={\"create\":true,\"placeholder\":\"搜索标签，或输入新名称\"},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        },
        {
          "id": "select-capacity",
          "category": "select",
          "title": "附带状态的选项",
          "description": "在可选项旁展示容量，禁用选项不会响应键盘确认。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">选择节点分组</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索并选择\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"展开选项\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"选择节点分组\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"华东一组\",\"detail\":\"负载 32%\"},{\"label\":\"华南一组\",\"detail\":\"负载 48%\"},{\"label\":\"华北一组\",\"detail\":\"维护中\",\"disabled\":true},{\"label\":\"西南一组\",\"detail\":\"负载 21%\"}],config={},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        },
        {
          "id": "select-long-list",
          "category": "select",
          "title": "长列表定位",
          "description": "本地较长列表在固定高度内滚动，避免撑开页面。",
          "html": "<div class=\"su-field\"><label for=\"su-combobox\">知识库目录</label><div class=\"su-select-host\"><div class=\"su-select-combo\"><input id=\"su-combobox\" class=\"su-input\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"su-choice-list\" placeholder=\"搜索并选择\" autocomplete=\"off\"><button type=\"button\" class=\"su-btn su-btn-ghost\" aria-label=\"展开选项\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-select-pop\" id=\"su-choice-list\" role=\"listbox\" aria-label=\"知识库目录\" hidden></div></div><p class=\"su-select-result\" role=\"status\">尚未选择，可输入关键字筛选。</p></div>",
          "css": ".su-select-native{appearance:auto;padding-right:32px}.su-select-host{position:relative;min-width:0}.su-select-combo{position:relative;display:flex;align-items:center}.su-select-combo input{padding-right:76px}.su-select-combo button{position:absolute;right:5px;min-height:32px;padding:4px 8px}.su-select-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;max-height:175px;overflow:auto;border:1px solid var(--su-border);border-radius:9px;padding:5px;background:var(--su-surface);box-shadow:0 10px 24px #18213d18}.su-select-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px 10px;border-radius:5px;cursor:pointer}.su-select-pop [role=option].su-select-active{background:var(--su-soft);color:var(--su-primary)}.su-select-pop [aria-selected=true]::after{content:'✓';color:var(--su-primary)}.su-select-pop [aria-disabled=true]{opacity:.4;cursor:not-allowed}.su-select-empty{padding:12px;color:var(--su-muted);text-align:center;font-size:12px}.su-select-result{font-size:12px;color:var(--su-muted);min-height:22px}.su-select-person{display:flex;align-items:center;gap:9px;min-width:0}.su-select-person small{display:block;font-size:11px;color:var(--su-muted)}.su-select-multi-option{display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer}.su-select-multi-option input{accent-color:var(--su-primary);width:17px;height:17px}.su-select-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:25px}.su-select-tags button{border:0;border-radius:5px;background:var(--su-soft);color:var(--su-primary);font-size:12px;padding:3px 7px;display:flex;align-items:center;gap:4px}.su-select-tags svg{width:12px;height:12px}.su-select-multi-trigger{width:100%;justify-content:space-between}.su-select-search{padding:4px;position:sticky;top:-5px;background:var(--su-surface)}.su-select-summary{border-top:1px solid var(--su-border);padding:7px 8px;color:var(--su-muted);font-size:12px}.su-select-dependent{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:360px){.su-select-dependent{grid-template-columns:1fr}}",
          "js": "\nconst data=[{\"label\":\"基础介绍\"},{\"label\":\"安装说明\"},{\"label\":\"快速开始\"},{\"label\":\"账户管理\"},{\"label\":\"团队协作\"},{\"label\":\"权限设置\"},{\"label\":\"导入资料\"},{\"label\":\"导出资料\"},{\"label\":\"版本记录\"},{\"label\":\"快捷操作\"},{\"label\":\"安全设置\"},{\"label\":\"常见问题\"},{\"label\":\"排错指南\"},{\"label\":\"接口说明\"},{\"label\":\"更新日志\"},{\"label\":\"使用条款\"},{\"label\":\"隐私说明\"},{\"label\":\"联系我们\"}],config={},field=root.querySelector('[role=combobox]'),list=root.querySelector('[role=listbox]'),host=root.querySelector('.su-select-host'),status=root.querySelector('[role=status]');let active=-1,selected='',visible=[];\nfunction optionNodes(){return [...list.querySelectorAll('[role=option]')].filter(el=>el.getAttribute('aria-disabled')!=='true')}\nfunction highlight(index){const nodes=optionNodes();active=nodes.length?Math.max(0,Math.min(index,nodes.length-1)):-1;nodes.forEach((node,i)=>node.classList.toggle('su-select-active',i===active));if(active>=0){field.setAttribute('aria-activedescendant',nodes[active].id);nodes[active].scrollIntoView({block:'nearest'})}else field.removeAttribute('aria-activedescendant')}\nfunction render(){const query=field.value.trim();visible=data.filter(item=>query===selected||(item.label+' '+(item.detail||'')).includes(query));list.replaceChildren();visible.forEach((item,index)=>{const option=document.createElement('div');option.setAttribute('role','option');option.id='su-option-'+index;option.dataset.index=String(index);option.setAttribute('aria-selected',String(item.label===selected));if(item.disabled)option.setAttribute('aria-disabled','true');if(config.people){const wrap=document.createElement('span');wrap.className='su-select-person';const avatar=document.createElement('span');avatar.className='su-avatar';avatar.style.cssText='width:28px;height:28px;font-size:12px';avatar.textContent=item.label.slice(-1);const words=document.createElement('span');words.textContent=item.label;const small=document.createElement('small');small.textContent=item.detail||'';words.append(small);wrap.append(avatar,words);option.append(wrap)}else{const text=document.createElement('span');text.textContent=item.label;option.append(text);if(item.detail){const small=document.createElement('small');small.className='su-muted su-small';small.textContent=item.detail;option.append(small)}}list.append(option)});if(!visible.length){const empty=document.createElement('div');empty.className='su-select-empty';empty.textContent=config.create&&query?'回车创建“'+query+'”':'未找到匹配选项';list.append(empty)}highlight(-1)}\nfunction open(){list.hidden=false;field.setAttribute('aria-expanded','true');render()}\nfunction close(){list.hidden=true;field.setAttribute('aria-expanded','false');field.removeAttribute('aria-activedescendant')}\nfunction choose(item){if(!item||item.disabled)return;selected=item.label;field.value=item.label;status.textContent='已选择：'+item.label+(item.detail?' · '+item.detail:'');close();field.focus()}\nfield.addEventListener('focus',open);field.addEventListener('click',()=>{if(list.hidden)open()});field.addEventListener('input',open);\nfield.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();if(selected)field.value=selected;close();return}if(event.key==='Tab'){close();return}if(['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();if(list.hidden)open();highlight(active+(event.key==='ArrowDown'?1:-1));return}if(event.key==='Enter'&&!list.hidden){event.preventDefault();const node=optionNodes()[active];if(node)choose(visible[Number(node.dataset.index)]);else if(config.create&&field.value.trim()&&!visible.length){const item={label:field.value.trim()};data.push(item);choose(item)}}});\nlist.addEventListener('pointerdown',event=>event.preventDefault());list.addEventListener('click',event=>{const option=event.target.closest('[role=option]');if(option)choose(visible[Number(option.dataset.index)])});\nroot.querySelector('.su-select-combo button').addEventListener('click',()=>{if(config.clear){selected='';field.value='';status.textContent='已清空选择';field.focus();open()}else if(list.hidden){field.focus();open()}else close()});document.addEventListener('pointerdown',event=>{if(!host.contains(event.target)){close();if(selected)field.value=selected}});field.addEventListener('blur',()=>setTimeout(()=>{if(!host.contains(document.activeElement)){close();if(selected)field.value=selected}},0));",
          "tags": [
            "搜索下拉",
            "键盘操作",
            "空结果"
          ],
          "height": 400,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "dialog",
      "name": "弹框",
      "description": "在当前页面完成确认、编辑和短流程任务。",
      "group": "反馈",
      "icon": "copy",
      "samples": [
        {
          "id": "dialog-basic",
          "category": "dialog",
          "title": "基础弹框",
          "description": "使用原生弹框获得焦点限制、退出键与背景遮罩。",
          "html": "<button class=\"su-btn\" data-dialog-open=\"basic-modal\">查看说明</button><dialog class=\"su-modal \" id=\"basic-modal\" aria-labelledby=\"basic-modal-title\"><div class=\"su-modal-header\"><h3 id=\"basic-modal-title\">关于这个演示</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p>弹框适合承载当前任务相关的简短内容。</p><p class=\"su-muted\">可以点击关闭按钮，或按退出键返回。</p></div><div class=\"su-modal-footer\"><button class=\"su-btn\" data-dialog-close>我知道了</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\n",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-confirm",
          "category": "dialog",
          "title": "删除前确认",
          "description": "明确告知操作对象与后果，确认后再执行。",
          "html": "<button class=\"su-btn su-btn-danger\" data-dialog-open=\"delete-modal\">删除演示资料</button><dialog class=\"su-modal \" id=\"delete-modal\" aria-labelledby=\"delete-modal-title\"><div class=\"su-modal-header\"><h3 id=\"delete-modal-title\">删除这份演示资料？</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p>资料名称：协作入门说明。</p><p class=\"su-muted\">本次只删除预览中的演示记录，可以重新载入示例恢复。</p></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-dialog-close>取消</button><button class=\"su-btn su-btn-danger\" data-confirm>确认删除</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-confirm]').onclick=()=>{root.querySelector('#delete-modal').close();root.querySelector('[data-result]').textContent='演示资料“协作入门说明”已删除。';root.querySelector('[data-dialog-open]').disabled=true;};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-form",
          "category": "dialog",
          "title": "表单弹框",
          "description": "填写、校验和保存都在当前页面完成。",
          "html": "<button class=\"su-btn\" data-dialog-open=\"form-modal\">新建演示项目</button><dialog class=\"su-modal \" id=\"form-modal\" aria-labelledby=\"form-modal-title\"><div class=\"su-modal-header\"><h3 id=\"form-modal-title\">新建项目</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><form data-form novalidate><label class=\"su-field\">项目名称<input class=\"su-input\" name=\"title\" placeholder=\"例如：春日资料整理\" maxlength=\"30\" autofocus></label><p class=\"su-small\" data-error role=\"alert\" style=\"color:var(--su-danger);margin-top:8px\"></p><button class=\"su-btn\" type=\"submit\">创建项目</button></form></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-form]').onsubmit=event=>{event.preventDefault();const input=event.target.elements.title;if(!input.value.trim()){root.querySelector('[data-error]').textContent='请输入项目名称。';input.focus();return;}root.querySelector('[data-error]').textContent='';root.querySelector('[data-result]').textContent='已创建演示项目：'+input.value.trim();root.querySelector('#form-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-drawer",
          "category": "dialog",
          "title": "侧边设置抽屉",
          "description": "附属设置从侧边展开，保留主页面的空间关系。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"drawer-modal\">打开显示设置</button><dialog class=\"su-modal su-modal-drawer\" id=\"drawer-modal\" aria-labelledby=\"drawer-modal-title\"><div class=\"su-modal-header\"><h3 id=\"drawer-modal-title\">显示设置</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p class=\"su-muted\">调整当前演示中的显示偏好。</p><label class=\"su-row\"><input type=\"checkbox\" checked data-dense> 显示记录摘要</label><label class=\"su-row\" style=\"margin-top:15px\"><input type=\"checkbox\" data-time> 显示更新时间</label></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-dialog-close>取消</button><button class=\"su-btn\" data-save>保存设置</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-save]').onclick=()=>{const values=[];if(root.querySelector('[data-dense]').checked)values.push('记录摘要');if(root.querySelector('[data-time]').checked)values.push('更新时间');root.querySelector('[data-result]').textContent=values.length?'已显示：'+values.join('、'):'已隐藏全部演示附加信息。';root.querySelector('#drawer-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-scroll",
          "category": "dialog",
          "title": "长内容弹框",
          "description": "内容区域独立滚动，底部确认操作保持可见。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"scroll-modal\">阅读演示规则</button><dialog class=\"su-modal su-modal-scroll\" id=\"scroll-modal\" aria-labelledby=\"scroll-modal-title\"><div class=\"su-modal-header\"><h3 id=\"scroll-modal-title\">协作规则</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p>以下内容为演示文本。</p><h4 style=\"margin:18px 0 8px\">1. 建立清晰的文件名称</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p><h4 style=\"margin:18px 0 8px\">2. 为资料选择合适分类</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p><h4 style=\"margin:18px 0 8px\">3. 保留必要的历史版本</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p><h4 style=\"margin:18px 0 8px\">4. 按职责分配访问权限</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p><h4 style=\"margin:18px 0 8px\">5. 及时归档已完成项目</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p><h4 style=\"margin:18px 0 8px\">6. 对重要修改留下说明</h4><p class=\"su-muted\">共享资料由团队成员共同维护。请在操作之前核对内容，并尊重其他成员的整理习惯。</p></div><div class=\"su-modal-footer\"><button class=\"su-btn\" data-ack>已阅读规则</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-ack]').onclick=()=>{root.querySelector('[data-result]').textContent='已确认阅读演示协作规则。';root.querySelector('#scroll-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-preview",
          "category": "dialog",
          "title": "资源预览",
          "description": "在弹框内快速查看资源详情与本地示意图。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"preview-modal\">预览资源</button><dialog class=\"su-modal \" id=\"preview-modal\" aria-labelledby=\"preview-modal-title\"><div class=\"su-modal-header\"><h3 id=\"preview-modal-title\">资料归档示意</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><div class=\"su-modal-art\" aria-label=\"原创资料图标示意\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg></div><p>演示资源：资料归档示意图。</p><p class=\"su-small su-muted\">这是离线图形，不会请求外部图片。</p></div><div class=\"su-modal-footer\"><button class=\"su-btn\" data-dialog-close>完成预览</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\n",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-command",
          "category": "dialog",
          "title": "快速操作弹框",
          "description": "打开后输入关键词，过滤可执行的演示操作。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"command-modal\">打开快速操作</button><dialog class=\"su-modal \" id=\"command-modal\" aria-labelledby=\"command-modal-title\"><div class=\"su-modal-header\"><h3 id=\"command-modal-title\">快速操作</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><label class=\"su-field\">搜索操作<input class=\"su-input\" type=\"search\" placeholder=\"试试输入“资料”\" data-search autofocus></label><div class=\"su-command-list\" style=\"margin-top:15px\"><button class=\"su-btn su-btn-ghost\" data-command=\"新建演示项目\">新建演示项目</button><button class=\"su-btn su-btn-ghost\" data-command=\"打开演示资料库\">打开演示资料库</button><button class=\"su-btn su-btn-ghost\" data-command=\"查看演示成员\">查看演示成员</button><button class=\"su-btn su-btn-ghost\" data-command=\"归档演示资料\">归档演示资料</button></div><p class=\"su-small su-muted\" data-empty hidden>没有匹配的操作。</p></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-search]').oninput=event=>{let count=0;root.querySelectorAll('[data-command]').forEach(button=>{button.hidden=!button.textContent.includes(event.target.value.trim());if(!button.hidden)count++;});root.querySelector('[data-empty]').hidden=count>0;};root.querySelectorAll('[data-command]').forEach(button=>button.onclick=()=>{root.querySelector('[data-result]').textContent='已执行：'+button.dataset.command;root.querySelector('#command-modal').close();});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-steps",
          "category": "dialog",
          "title": "分步创建弹框",
          "description": "小型分步任务使用同一个弹框完成，保留已填内容。",
          "html": "<button class=\"su-btn\" data-dialog-open=\"steps-modal\">创建演示空间</button><dialog class=\"su-modal \" id=\"steps-modal\" aria-labelledby=\"steps-modal-title\"><div class=\"su-modal-header\"><h3 id=\"steps-modal-title\">创建空间</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p class=\"su-small su-muted\" data-step-label>第 1 步，共 2 步</p><div data-first><label class=\"su-field\">空间名称<input class=\"su-input\" value=\"我的资料空间\" data-space maxlength=\"24\"></label></div><div data-second hidden><p>核对演示空间名称：</p><strong data-summary></strong><p class=\"su-muted\" style=\"margin-top:10px\">创建仅发生在本次预览中。</p></div><p class=\"su-small\" data-error role=\"alert\" style=\"color:var(--su-danger)\"></p></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-back hidden>上一步</button><button class=\"su-btn\" data-next>下一步</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nlet step=1;const first=root.querySelector('[data-first]'),second=root.querySelector('[data-second]'),next=root.querySelector('[data-next]'),back=root.querySelector('[data-back]');function render(){first.hidden=step!==1;second.hidden=step!==2;back.hidden=step===1;next.textContent=step===1?'下一步':'确认创建';root.querySelector('[data-step-label]').textContent='第 '+step+' 步，共 2 步';}next.onclick=()=>{const value=root.querySelector('[data-space]').value.trim();if(!value){root.querySelector('[data-error]').textContent='请输入空间名称。';return;}root.querySelector('[data-error]').textContent='';if(step===1){root.querySelector('[data-summary]').textContent=value;step=2;render();}else{root.querySelector('[data-result]').textContent='已创建演示空间：'+value;root.querySelector('#steps-modal').close();step=1;render();}};back.onclick=()=>{step=1;render();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-export",
          "category": "dialog",
          "title": "导出设置弹框",
          "description": "先选择导出范围，再生成可离线保存的文本文件。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"export-modal\">导出演示资料</button><dialog class=\"su-modal \" id=\"export-modal\" aria-labelledby=\"export-modal-title\"><div class=\"su-modal-header\"><h3 id=\"export-modal-title\">导出范围</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><p class=\"su-muted\">选择包含在演示文本中的资料。</p><label class=\"su-row\"><input type=\"checkbox\" value=\"项目说明\" checked data-export-item> 项目说明</label><label class=\"su-row\" style=\"margin-top:10px\"><input type=\"checkbox\" value=\"费用汇总\" checked data-export-item> 费用汇总</label><label class=\"su-row\" style=\"margin-top:10px\"><input type=\"checkbox\" value=\"归档记录\" data-export-item> 归档记录</label><p class=\"su-small\" data-export-error role=\"alert\" style=\"color:var(--su-danger)\"></p></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-dialog-close>取消</button><button class=\"su-btn\" data-export>生成文件</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-export]').onclick=()=>{const names=[...root.querySelectorAll('[data-export-item]:checked')].map(node=>node.value);if(!names.length){root.querySelector('[data-export-error]').textContent='至少选择一项资料。';return;}const newline=String.fromCharCode(10),blob=new Blob(['离线演示资料清单'+newline+names.join(newline)],{type:'text/plain;charset=utf-8'}),url=URL.createObjectURL(blob),link=document.createElement('a');link.href=url;link.download='演示资料清单.txt';link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);root.querySelector('[data-result]').textContent='已生成 '+names.length+' 项演示资料的文本清单；如预览环境阻止下载，可导出本示例后体验。';root.querySelector('#export-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-unsaved",
          "category": "dialog",
          "title": "未保存提示",
          "description": "有改动时按退出键先提示，允许明确放弃修改。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"unsaved-modal\">编辑演示备注</button><dialog class=\"su-modal \" id=\"unsaved-modal\" aria-labelledby=\"unsaved-modal-title\"><div class=\"su-modal-header\"><h3 id=\"unsaved-modal-title\">编辑备注</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><label class=\"su-field\">备注内容<textarea class=\"su-input\" rows=\"3\" data-note>本周整理共享资料。</textarea></label><p class=\"su-small\" data-warning role=\"status\" style=\"margin-top:10px;color:var(--su-warning)\">修改后按退出键，可体验未保存提醒。</p></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-discard>放弃修改</button><button class=\"su-btn\" data-save-note>保存备注</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nconst dialog=root.querySelector('#unsaved-modal'),note=root.querySelector('[data-note]');let saved=note.value;function guardedClose(event){if(note.value!==saved){event.preventDefault();root.querySelector('[data-warning]').textContent='有尚未保存的修改。请保存，或点击“放弃修改”。';}}dialog.addEventListener('cancel',guardedClose);root.querySelector('#unsaved-modal [data-dialog-close]').onclick=()=>{if(note.value===saved)dialog.close();else root.querySelector('[data-warning]').textContent='有尚未保存的修改，请保存或放弃。';};root.querySelector('[data-discard]').onclick=()=>{note.value=saved;dialog.close();root.querySelector('[data-result]').textContent='已放弃本次演示修改。';};root.querySelector('[data-save-note]').onclick=()=>{saved=note.value;dialog.close();root.querySelector('[data-result]').textContent='演示备注已保存。';};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-notifications",
          "category": "dialog",
          "title": "通知偏好弹框",
          "description": "在短流程弹框中组合多选设置和保存反馈。",
          "html": "<button class=\"su-btn su-btn-secondary\" data-dialog-open=\"notices-modal\">设置演示通知</button><dialog class=\"su-modal \" id=\"notices-modal\" aria-labelledby=\"notices-modal-title\"><div class=\"su-modal-header\"><h3 id=\"notices-modal-title\">接收哪些消息？</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><div class=\"su-stack\"><label class=\"su-row\"><input type=\"checkbox\" value=\"任务到期\" checked data-notice> 任务到期</label><label class=\"su-row\"><input type=\"checkbox\" value=\"成员评论\" checked data-notice> 成员评论</label><label class=\"su-row\"><input type=\"checkbox\" value=\"每周摘要\"  data-notice> 每周摘要</label></div></div><div class=\"su-modal-footer\"><button class=\"su-btn su-btn-secondary\" data-dialog-close>取消</button><button class=\"su-btn\" data-save-notices>保存偏好</button></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-save-notices]').onclick=()=>{const values=[...root.querySelectorAll('[data-notice]:checked')].map(node=>node.value);root.querySelector('[data-result]').textContent=values.length?'已接收：'+values.join('、'):'已关闭全部演示通知。';root.querySelector('#notices-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "dialog-schedule",
          "category": "dialog",
          "title": "预约时间弹框",
          "description": "使用有标签的日期与时间输入完成一个短任务。",
          "html": "<button class=\"su-btn\" data-dialog-open=\"schedule-modal\">安排演示提醒</button><dialog class=\"su-modal \" id=\"schedule-modal\" aria-labelledby=\"schedule-modal-title\"><div class=\"su-modal-header\"><h3 id=\"schedule-modal-title\">安排提醒</h3><button class=\"su-modal-close\" data-dialog-close aria-label=\"关闭弹框\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div><div class=\"su-modal-body\"><form data-schedule novalidate class=\"su-stack\"><label class=\"su-field\">提醒日期<input type=\"date\" class=\"su-input\" name=\"date\" value=\"2026-10-28\"></label><label class=\"su-field\">提醒时间<input type=\"time\" class=\"su-input\" name=\"time\" value=\"09:00\"></label><p class=\"su-small\" data-schedule-error role=\"alert\" style=\"color:var(--su-danger);margin:0\"></p><button class=\"su-btn\" type=\"submit\">保存提醒</button></form></div></dialog><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-demo dialog.su-modal{width:min(440px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid var(--su-border);padding:0;border-radius:16px;background:var(--su-surface);color:var(--su-text);box-shadow:0 24px 90px #0003}.su-modal::backdrop{background:#17203366}.su-modal-header{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.su-modal-header h3{font-size:19px;margin:0}.su-modal-body{padding:8px 22px 22px;line-height:1.7}.su-modal-body p{margin:0 0 15px}.su-modal-footer{padding:14px 22px;border-top:1px solid var(--su-border);display:flex;justify-content:flex-end;gap:10px}.su-modal-close{border:0;background:none;color:var(--su-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}.su-modal-close svg{width:18px;height:18px}.su-demo dialog.su-modal-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;width:min(380px,calc(100vw - 30px))}.su-modal-scroll .su-modal-body{max-height:210px;overflow:auto}.su-command-list{display:grid;gap:6px}.su-command-list button{text-align:left;justify-content:flex-start}.su-modal-art{height:160px;display:grid;place-items:center;background:var(--su-soft);border-radius:12px;margin-bottom:15px}.su-modal-art svg{height:75px;width:75px;color:var(--su-primary)}.su-modal-checklist{padding-left:18px;line-height:1.9}.su-modal [hidden]{display:none}\n",
          "js": "\nroot.querySelectorAll('[data-dialog-open]').forEach(button=>button.onclick=()=>{const dialog=root.querySelector('#'+button.dataset.dialogOpen);dialog.dataset.opener=button.dataset.dialogOpen;dialog.showModal();});\nroot.querySelectorAll('[data-dialog-close]').forEach(button=>button.onclick=()=>button.closest('dialog').close());\nroot.querySelectorAll('dialog').forEach(dialog=>dialog.addEventListener('close',()=>{const opener=root.querySelector('[data-dialog-open=\"'+dialog.id+'\"]');if(opener)opener.focus();}));\nroot.querySelector('[data-schedule]').onsubmit=event=>{event.preventDefault();const date=event.target.elements.date.value,time=event.target.elements.time.value;if(!date||!time){root.querySelector('[data-schedule-error]').textContent='请选择完整的日期和时间。';return;}const parts=date.split('-');root.querySelector('[data-result]').textContent='演示提醒已安排：'+parts[0]+'年'+parts[1]+'月'+parts[2]+'日 '+time+'。未创建实际通知。';root.querySelector('#schedule-modal').close();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "tabs",
      "name": "标签页",
      "description": "通过键盘与点击切换内容区域。",
      "group": "导航",
      "icon": "file",
      "samples": [
        {
          "id": "tabs-underline",
          "category": "tabs",
          "title": "下划线导航",
          "description": "切换内容，支持方向键与首尾键。",
          "html": "<div data-tabs  class=\"\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"下划线导航\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >概览</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >成员</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >设置</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><h3>项目概览</h3><p class=\"su-muted\">这里汇总当前演示空间的主要信息。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><div class=\"su-row\"><span class=\"su-avatar\">林</span><span>林予安 · 演示成员</span></div></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><label class=\"su-field\">空间名称<input class=\"su-input\" value=\"设计演示空间\"></label></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-segmented",
          "category": "tabs",
          "title": "分段视图",
          "description": "紧凑分段适合少量互斥视图。",
          "html": "<div data-tabs  class=\"su-tabs-pill su-tabs-full\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"分段视图\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >全部</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >进行中</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >已完成</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>全部 8 项演示任务。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><p>正在处理 3 项演示任务。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>已经完成 5 项演示任务。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-counts",
          "category": "tabs",
          "title": "数量标记",
          "description": "在标签中展示各类项目数量。",
          "html": "<div data-tabs  class=\"\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"数量标记\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >待处理 <span class=\"su-badge\">3</span></button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >已处理 <span class=\"su-badge\">12</span></button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >已关闭 <span class=\"su-badge\">2</span></button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>3 条演示请求等待处理。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><p>12 条演示请求已完成归档。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>2 条演示请求已关闭。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-vertical",
          "category": "tabs",
          "title": "纵向设置",
          "description": "侧向导航适合设置分组。",
          "html": "<div data-tabs  class=\"su-tabs-vertical\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"纵向设置\" aria-orientation=\"vertical\"><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >个人资料</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >消息偏好</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >隐私</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><label class=\"su-field\">显示名称<input class=\"su-input\" value=\"演示用户\"></label></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><label class=\"su-row\"><input class=\"su-check\" type=\"checkbox\" checked>接收演示提醒</label></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>当前演示空间仅自己可见。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-icons",
          "category": "tabs",
          "title": "图标标签",
          "description": "图标辅助区分用途，保留可读文字。",
          "html": "<div data-tabs  class=\"su-tabs-pill\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"图标标签\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg>看板</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>列表</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m10 3-.8 3-2.7 1L4 6l-2 3 2.1 2v3L2 16l2 3 2.5-1 2.7 1 .8 3h4l.8-3 2.7-1 2.5 1 2-3-2.1-2v-3L22 9l-2-3-2.5 1-2.7-1L14 3Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>配置</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><h3>看板视图</h3><p class=\"su-muted\">按任务状态排列演示项目。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><ul><li>整理交互说明</li><li>检查表单状态</li></ul></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><label class=\"su-row\"><input type=\"checkbox\" class=\"su-check\">显示已归档项目</label></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-boxed",
          "category": "tabs",
          "title": "描边分类",
          "description": "独立边框帮助识别内容分组。",
          "html": "<div data-tabs  class=\"su-tabs-boxed\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"描边分类\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >推荐</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >最新</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >收藏</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>推荐阅读：从组件到完整页面。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><p>最新演示：可访问的键盘交互。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>当前收藏了 4 篇演示文章。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-overflow",
          "category": "tabs",
          "title": "横向长导航",
          "description": "窄屏可以滚动标签，键盘焦点保持可见。",
          "html": "<div data-tabs  class=\"\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"横向长导航\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >全部项目</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >设计规范</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >原型交互</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-3\" aria-controls=\"su-panel-3\" aria-selected=\"false\" tabindex=\"-1\" >前端组件</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-4\" aria-controls=\"su-panel-4\" aria-selected=\"false\" tabindex=\"-1\" >数据报表</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-5\" aria-controls=\"su-panel-5\" aria-selected=\"false\" tabindex=\"-1\" >团队文档</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><h3>全部项目</h3><p class=\"su-muted\">第 1 个演示分组，内容随标签切换。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><h3>设计规范</h3><p class=\"su-muted\">第 2 个演示分组，内容随标签切换。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><h3>原型交互</h3><p class=\"su-muted\">第 3 个演示分组，内容随标签切换。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-3\" aria-labelledby=\"su-tab-3\" tabindex=\"0\" hidden><h3>前端组件</h3><p class=\"su-muted\">第 4 个演示分组，内容随标签切换。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-4\" aria-labelledby=\"su-tab-4\" tabindex=\"0\" hidden><h3>数据报表</h3><p class=\"su-muted\">第 5 个演示分组，内容随标签切换。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-5\" aria-labelledby=\"su-tab-5\" tabindex=\"0\" hidden><h3>团队文档</h3><p class=\"su-muted\">第 6 个演示分组，内容随标签切换。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-editor",
          "category": "tabs",
          "title": "代码预览区",
          "description": "切换预览、结构与样式说明。",
          "html": "<div data-tabs  class=\"su-tabs-boxed\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"代码预览区\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg>预览</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18\"/></svg>结构</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m10 3-.8 3-2.7 1L4 6l-2 3 2.1 2v3L2 16l2 3 2.5-1 2.7 1 .8 3h4l.8-3 2.7-1 2.5 1 2-3-2.1-2v-3L22 9l-2-3-2.5 1-2.7-1L14 3Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>样式</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><div class=\"su-panel\"><strong>你好，组件</strong><p class=\"su-muted\">这是一个静态演示面板。</p></div></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><pre style=\"white-space:pre-wrap\"><code>&lt;section&gt;你好，组件&lt;/section&gt;</code></pre></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>统一使用主题变量控制文字、边框和背景。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-disabled",
          "category": "tabs",
          "title": "暂不可用标签",
          "description": "不可用标签从方向键导航中跳过。",
          "html": "<div data-tabs  class=\"\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"暂不可用标签\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >已上线</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >草稿</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" disabled>团队版 · 暂不可用</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>显示 6 个已上线的演示项目。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><p>当前有 2 份本地演示草稿。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>演示中不可用。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-closable",
          "category": "tabs",
          "title": "可关闭草稿",
          "description": "选中标签后按删除键关闭，至少保留一项。",
          "html": "<div data-tabs data-closable class=\"su-tabs-pill su-tabs-closable\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"可关闭草稿\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >方案一</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >方案二</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >方案三</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>方案一：简洁的列表布局。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><p>方案二：更强调任务状态。</p></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>方案三：适合移动端的紧凑布局。</p></section><p class=\"su-tabs-hint\">聚焦标签后按删除键关闭草稿。</p></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [
            "键盘",
            "关闭"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-editable",
          "category": "tabs",
          "title": "新建标签",
          "description": "添加新草稿后，自动切换并聚焦。",
          "html": "<div data-tabs  class=\"su-tabs-boxed su-tabs-editable\"><div class=\"su-tabs-edit\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"新建标签\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >演示草稿</button></div><button class=\"su-btn su-btn-secondary\" data-add-tab aria-label=\"新建草稿\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></button></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><p>点击右侧加号，创建新的本地演示草稿。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tabs-steps",
          "category": "tabs",
          "title": "步骤分段",
          "description": "每个步骤都有独立内容，便于往返核对。",
          "html": "<div data-tabs  class=\"su-tabs-rail\"><div class=\"\"><div class=\"su-tabs-list\" role=\"tablist\" aria-label=\"步骤分段\" ><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-0\" aria-controls=\"su-panel-0\" aria-selected=\"true\" tabindex=\"0\" >1 基本信息</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-1\" aria-controls=\"su-panel-1\" aria-selected=\"false\" tabindex=\"-1\" >2 成员</button><button class=\"su-tab\" role=\"tab\" type=\"button\" id=\"su-tab-2\" aria-controls=\"su-panel-2\" aria-selected=\"false\" tabindex=\"-1\" >3 确认</button></div></div><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-0\" aria-labelledby=\"su-tab-0\" tabindex=\"0\" ><label class=\"su-field\">项目名称<input class=\"su-input\" placeholder=\"填写演示项目名称\"></label></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-1\" aria-labelledby=\"su-tab-1\" tabindex=\"0\" hidden><label class=\"su-field\">邀请说明<textarea class=\"su-input\" rows=\"2\" placeholder=\"写下演示邀请说明\"></textarea></label></section><section class=\"su-tab-panel\" role=\"tabpanel\" id=\"su-panel-2\" aria-labelledby=\"su-tab-2\" tabindex=\"0\" hidden><p>这是演示流程的确认区域，可返回前面的步骤继续填写。</p></section></div>",
          "css": "\n.su-tabs-list{display:flex;gap:4px;border-bottom:1px solid var(--su-border);max-width:100%;overflow:auto;padding:3px 3px 0}.su-tab{border:0;background:transparent;color:var(--su-muted);padding:10px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:42px;border-bottom:2px solid transparent}.su-tab[aria-selected=true]{color:var(--su-primary);border-bottom-color:var(--su-primary);font-weight:600}.su-tab:disabled{opacity:.4}.su-tab-panel{padding:20px 4px;min-height:100px}.su-tabs-pill .su-tabs-list{border:0;background:var(--su-bg);padding:5px;border-radius:10px}.su-tabs-pill .su-tab{border:0;border-radius:7px}.su-tabs-pill .su-tab[aria-selected=true]{background:var(--su-surface);box-shadow:0 2px 6px #0000000d}.su-tabs-vertical{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px}.su-tabs-vertical .su-tabs-list{flex-direction:column;border:0;align-self:start}.su-tabs-vertical .su-tab{border:0;border-radius:7px;text-align:left}.su-tabs-vertical .su-tab[aria-selected=true]{background:var(--su-soft)}.su-tabs-boxed .su-tabs-list{border:0;gap:8px}.su-tabs-boxed .su-tab{border:1px solid var(--su-border);border-radius:8px}.su-tabs-boxed .su-tab[aria-selected=true]{border-color:var(--su-primary);background:var(--su-soft)}.su-tabs-full .su-tab{flex:1;justify-content:center}.su-tabs-rail .su-tabs-list{border:0;gap:0}.su-tabs-rail .su-tab{flex:1;border:0;border-top:3px solid var(--su-border);padding:12px 7px}.su-tabs-rail .su-tab[aria-selected=true]{border-color:var(--su-primary)}.su-tabs-dark{background:#242638;color:#f1effa;padding:14px;border-radius:10px}.su-tabs-dark .su-tabs-list{border-color:#55576f}.su-tabs-dark .su-tab{color:#c6c5d8}.su-tabs-dark .su-tab[aria-selected=true]{color:#c8bdff;border-color:#b5a7ff}.su-tabs-dark .su-muted{color:#b9bbce}.su-tab-close{font-size:20px;line-height:1;margin-left:6px}.su-tabs-edit{display:flex;gap:10px}.su-tabs-edit>.su-tabs-list{flex:1}.su-tabs-edit>button{flex-shrink:0}.su-tabs-hint{font-size:12px;color:var(--su-muted);margin-top:8px}@media(max-width:400px){.su-tabs-vertical{grid-template-columns:90px minmax(0,1fr);gap:10px}.su-tab{padding:10px}}\n",
          "js": "(function tabsInit() {\n const widget=root.querySelector('[data-tabs]'),list=widget.querySelector('[role=tablist]');\n const getTabs=()=>[...list.querySelectorAll('[role=tab]:not(:disabled)')];\n const activate=(tab,focus=false)=>{list.querySelectorAll('[role=tab]').forEach(item=>{const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1;const panel=widget.querySelector('#'+item.getAttribute('aria-controls'));if(panel)panel.hidden=!selected;});if(focus)tab.focus();};\n list.addEventListener('click',event=>{const tab=event.target.closest('[role=tab]');if(tab&&!tab.disabled)activate(tab);});\n list.addEventListener('keydown',event=>{const tabs=getTabs(),tab=event.target.closest('[role=tab]');if(!tab)return;const i=tabs.indexOf(tab),vertical=list.getAttribute('aria-orientation')==='vertical';let next;if(event.key==='Home')next=tabs[0];else if(event.key==='End')next=tabs.at(-1);else if(event.key===(vertical?'ArrowDown':'ArrowRight'))next=tabs[(i+1)%tabs.length];else if(event.key===(vertical?'ArrowUp':'ArrowLeft'))next=tabs[(i-1+tabs.length)%tabs.length];if(next){event.preventDefault();activate(next,true);}if(event.key==='Delete'&&widget.hasAttribute('data-closable')&&tabs.length>1){event.preventDefault();const index=tabs.indexOf(tab);widget.querySelector('#'+tab.getAttribute('aria-controls')).remove();tab.remove();activate(getTabs()[Math.min(index,getTabs().length-1)],true);}});\n const adder=widget.querySelector('[data-add-tab]');if(adder){let count=getTabs().length;adder.addEventListener('click',()=>{count++;const tab=document.createElement('button');tab.className='su-tab';tab.type='button';tab.id='su-tab-'+count;tab.setAttribute('role','tab');tab.setAttribute('aria-controls','su-panel-'+count);tab.textContent='草稿 '+count;list.append(tab);const panel=document.createElement('div');panel.id='su-panel-'+count;panel.className='su-tab-panel';panel.setAttribute('role','tabpanel');panel.setAttribute('aria-labelledby',tab.id);panel.textContent='这是新建的第 '+count+' 份本地演示草稿。';widget.append(panel);activate(tab,true);});}\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "table",
      "name": "表格",
      "description": "排序、搜索、选择与编辑结构化信息。",
      "group": "数据",
      "icon": "grid",
      "samples": [
        {
          "id": "table-basic",
          "category": "table",
          "title": "清晰数据列表",
          "description": "表头、行分隔和数字对齐建立稳定的阅读顺序。",
          "html": "<div data-table-mode=\"\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th><th scope=\"col\">任务数</th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-sort",
          "category": "table",
          "title": "可排序列",
          "description": "点击列标题往返切换升序和降序。",
          "html": "<div data-table-mode=\"sort\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\" aria-sort=\"none\"><button class=\"su-table-sort\" data-sort>项目</button></th><th scope=\"col\" aria-sort=\"none\"><button class=\"su-table-sort\" data-sort>负责人</button></th><th scope=\"col\">状态</th><th scope=\"col\" aria-sort=\"none\"><button class=\"su-table-sort\" data-sort>任务数</button></th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr><tr><td >表单校验</td><td >许白</td><td >进行中</td><td data-sort-value=\"32\">32 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "排序"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-search",
          "category": "table",
          "title": "即时搜索",
          "description": "输入项目、负责人或状态，直接筛选演示行。",
          "html": "<div data-table-mode=\"search\" class=\"su-stack\"><label class=\"su-table-search\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/></svg><input class=\"su-input\" data-table-search placeholder=\"搜索演示记录\" aria-label=\"搜索演示记录\"></label><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th><th scope=\"col\">任务数</th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr><tr><td >表单校验</td><td >许白</td><td >进行中</td><td data-sort-value=\"32\">32 项</td></tr><tr><td >使用指南</td><td >林予安</td><td >待开始</td><td data-sort-value=\"16\">16 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "搜索"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-selection",
          "category": "table",
          "title": "批量选择",
          "description": "全选支持部分选中状态，选中行有清晰反馈。",
          "html": "<div data-table-mode=\"selection\" class=\"su-stack\"><div class=\"su-table-toolbar\"><span class=\"su-small su-muted\">选择需要处理的演示项目</span><button class=\"su-table-mini\" data-clear-selection>清空选择</button></div><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\"><input type=\"checkbox\" class=\"su-check\" data-select-all aria-label=\"全选演示项目\"></th><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th></tr></thead><tbody><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check aria-label=\"选择组件目录\"></td><td>组件目录</td><td>林予安</td><td>进行中</td></tr><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check aria-label=\"选择交互说明\"></td><td>交互说明</td><td>周未</td><td>已完成</td></tr><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check aria-label=\"选择移动端适配\"></td><td>移动端适配</td><td>陈青</td><td>待开始</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "全选",
            "批量"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-pagination",
          "category": "table",
          "title": "本地分页",
          "description": "每页展示三条，前后页按钮自动更新边界状态。",
          "html": "<div data-table-mode=\"pagination\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th><th scope=\"col\">任务数</th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr></tbody></table></div><div class=\"su-table-toolbar\"><button class=\"su-table-mini\" data-page-previous>上一页</button><span class=\"su-small\" data-page-label>第 1 页</span><button class=\"su-table-mini\" data-page-next>下一页</button></div><span data-page-data=\"%5B%5B%22%E7%BB%84%E4%BB%B6%E7%9B%AE%E5%BD%95%22%2C%22%E6%9E%97%E4%BA%88%E5%AE%89%22%2C%22%E8%BF%9B%E8%A1%8C%E4%B8%AD%22%2C%2224%22%5D%2C%5B%22%E4%BA%A4%E4%BA%92%E8%AF%B4%E6%98%8E%22%2C%22%E5%91%A8%E6%9C%AA%22%2C%22%E5%B7%B2%E5%AE%8C%E6%88%90%22%2C%2212%22%5D%2C%5B%22%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%22%2C%22%E9%99%88%E9%9D%92%22%2C%22%E5%BE%85%E5%BC%80%E5%A7%8B%22%2C%2218%22%5D%2C%5B%22%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C%22%2C%22%E8%AE%B8%E7%99%BD%22%2C%22%E8%BF%9B%E8%A1%8C%E4%B8%AD%22%2C%2232%22%5D%2C%5B%22%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97%22%2C%22%E6%9E%97%E4%BA%88%E5%AE%89%22%2C%22%E5%BE%85%E5%BC%80%E5%A7%8B%22%2C%2216%22%5D%2C%5B%22%E9%94%AE%E7%9B%98%E6%A3%80%E6%9F%A5%22%2C%22%E5%91%A8%E6%9C%AA%22%2C%22%E5%B7%B2%E5%AE%8C%E6%88%90%22%2C%228%22%5D%2C%5B%22%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2%22%2C%22%E9%99%88%E9%9D%92%22%2C%22%E8%BF%9B%E8%A1%8C%E4%B8%AD%22%2C%2220%22%5D%2C%5B%22%E5%9B%BE%E6%A0%87%E6%95%B4%E7%90%86%22%2C%22%E8%AE%B8%E7%99%BD%22%2C%22%E5%B7%B2%E5%AE%8C%E6%88%90%22%2C%2210%22%5D%5D\" hidden></span><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "分页"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-expand",
          "category": "table",
          "title": "行内详情",
          "description": "在列表原位置展开详情，避免跳转中断。",
          "html": "<div data-table-mode=\"expand\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">状态</th><th scope=\"col\">详情</th></tr></thead><tbody><tr><td>组件目录</td><td>进行中</td><td><button class=\"su-table-mini\" data-expand aria-expanded=\"false\" aria-controls=\"su-detail-0\">查看</button></td></tr><tr class=\"su-table-details\" id=\"su-detail-0\" hidden><td colspan=\"3\"><strong>演示负责人：林予安</strong><p class=\"su-muted su-small\">共 24 项任务；此处可以放置补充说明、操作记录或关联内容。</p></td></tr><tr><td>交互说明</td><td>已完成</td><td><button class=\"su-table-mini\" data-expand aria-expanded=\"false\" aria-controls=\"su-detail-1\">查看</button></td></tr><tr class=\"su-table-details\" id=\"su-detail-1\" hidden><td colspan=\"3\"><strong>演示负责人：周未</strong><p class=\"su-muted su-small\">共 12 项任务；此处可以放置补充说明、操作记录或关联内容。</p></td></tr><tr><td>移动端适配</td><td>待开始</td><td><button class=\"su-table-mini\" data-expand aria-expanded=\"false\" aria-controls=\"su-detail-2\">查看</button></td></tr><tr class=\"su-table-details\" id=\"su-detail-2\" hidden><td colspan=\"3\"><strong>演示负责人：陈青</strong><p class=\"su-muted su-small\">共 18 项任务；此处可以放置补充说明、操作记录或关联内容。</p></td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "行内展开"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-inline-edit",
          "category": "table",
          "title": "单元格编辑",
          "description": "编辑负责人后保存，退出键可取消本次修改。",
          "html": "<div data-table-mode=\"edit\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">操作</th></tr></thead><tbody><tr><td>组件目录</td><td data-editable>林予安</td><td><button class=\"su-table-mini\" data-edit-row>编辑</button></td></tr><tr><td>交互说明</td><td data-editable>周未</td><td><button class=\"su-table-mini\" data-edit-row>编辑</button></td></tr><tr><td>移动端适配</td><td data-editable>陈青</td><td><button class=\"su-table-mini\" data-edit-row>编辑</button></td></tr></tbody></table></div><p class=\"su-table-help\">编辑时按回车键保存，按退出键取消。</p><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "编辑"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-total",
          "category": "table",
          "title": "金额汇总",
          "description": "勾选条目后实时汇总，金额使用固定小数位。",
          "html": "<div data-table-mode=\"total\" class=\"su-stack\"><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\"><input type=\"checkbox\" class=\"su-check\" data-select-all aria-label=\"全选演示费用\"></th><th scope=\"col\">费用项目</th><th scope=\"col\">金额</th></tr></thead><tbody><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check data-amount=\"36\" aria-label=\"选择资料整理\"></td><td>资料整理</td><td data-money>¥ 36.00</td></tr><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check data-amount=\"48\" aria-label=\"选择交互检查\"></td><td>交互检查</td><td data-money>¥ 48.00</td></tr><tr><td><input class=\"su-check\" type=\"checkbox\" data-row-check data-amount=\"24\" aria-label=\"选择主题设置\"></td><td>主题设置</td><td data-money>¥ 24.00</td></tr></tbody><tfoot><tr><td colspan=\"2\">已选演示合计</td><td data-total>¥ 0.00</td></tr></tfoot></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "汇总"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-sticky",
          "category": "table",
          "title": "固定表头",
          "description": "数据区域内部滚动，表头保持可见。",
          "html": "<div data-table-mode=\"sticky\" class=\"su-stack\"><p class=\"su-table-help\">在表格内向下滚动，查看固定表头。</p><div class=\"su-table-wrap su-table-scroll\" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th><th scope=\"col\">任务数</th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr><tr><td >表单校验</td><td >许白</td><td >进行中</td><td data-sort-value=\"32\">32 项</td></tr><tr><td >使用指南</td><td >林予安</td><td >待开始</td><td data-sort-value=\"16\">16 项</td></tr><tr><td >键盘检查</td><td >周未</td><td >已完成</td><td data-sort-value=\"8\">8 项</td></tr><tr><td >主题配色</td><td >陈青</td><td >进行中</td><td data-sort-value=\"20\">20 项</td></tr><tr><td >图标整理</td><td >许白</td><td >已完成</td><td data-sort-value=\"10\">10 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "滚动"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-density",
          "category": "table",
          "title": "行距与辅助列",
          "description": "用户按阅读场景切换密度和可见信息。",
          "html": "<div data-table-mode=\"density\" class=\"su-stack\"><div class=\"su-row\"><label class=\"su-row\"><input type=\"checkbox\" class=\"su-check\" data-dense>紧凑行距</label><label class=\"su-row\"><input type=\"checkbox\" class=\"su-check\" data-show-optional checked>显示辅助列</label></div><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\" data-optional>负责人</th><th scope=\"col\">状态</th><th scope=\"col\" data-optional>任务数</th></tr></thead><tbody><tr><td>组件目录</td><td data-optional>林予安</td><td>进行中</td><td data-optional>24 项</td></tr><tr><td>交互说明</td><td data-optional>周未</td><td>已完成</td><td data-optional>12 项</td></tr><tr><td>移动端适配</td><td data-optional>陈青</td><td>待开始</td><td data-optional>18 项</td></tr><tr><td>表单校验</td><td data-optional>许白</td><td>进行中</td><td data-optional>32 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "密度",
            "列显隐"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-reorder",
          "category": "table",
          "title": "调整行顺序",
          "description": "使用可聚焦按钮上下移动，边界操作自动禁用。",
          "html": "<div data-table-mode=\"reorder\" class=\"su-stack\"><span data-reorder hidden></span><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">顺序</th><th scope=\"col\">项目</th><th scope=\"col\">调整</th></tr></thead><tbody><tr><td data-position>1</td><td>组件目录</td><td><span class=\"su-table-actions\"><button class=\"su-table-mini\" data-move=\"up\" aria-label=\"上移组件目录\">上移</button><button class=\"su-table-mini\" data-move=\"down\" aria-label=\"下移组件目录\">下移</button></span></td></tr><tr><td data-position>2</td><td>交互说明</td><td><span class=\"su-table-actions\"><button class=\"su-table-mini\" data-move=\"up\" aria-label=\"上移交互说明\">上移</button><button class=\"su-table-mini\" data-move=\"down\" aria-label=\"下移交互说明\">下移</button></span></td></tr><tr><td data-position>3</td><td>移动端适配</td><td><span class=\"su-table-actions\"><button class=\"su-table-mini\" data-move=\"up\" aria-label=\"上移移动端适配\">上移</button><button class=\"su-table-mini\" data-move=\"down\" aria-label=\"下移移动端适配\">下移</button></span></td></tr><tr><td data-position>4</td><td>表单校验</td><td><span class=\"su-table-actions\"><button class=\"su-table-mini\" data-move=\"up\" aria-label=\"上移表单校验\">上移</button><button class=\"su-table-mini\" data-move=\"down\" aria-label=\"下移表单校验\">下移</button></span></td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "排序调整"
          ],
          "height": 365,
          "license": "MIT"
        },
        {
          "id": "table-empty",
          "category": "table",
          "title": "搜索空状态",
          "description": "没有结果时保留表头，并提供明确恢复入口。",
          "html": "<div data-table-mode=\"empty\" class=\"su-stack\"><div class=\"su-table-toolbar\"><label class=\"su-table-search\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/></svg><input class=\"su-input\" data-table-search value=\"不存在的演示项目\" aria-label=\"搜索演示项目\"></label><button class=\"su-table-mini\" data-reset-search>清除搜索</button></div><div class=\"su-table-wrap \" tabindex=\"0\" aria-label=\"可横向滚动的演示表格\"><table><caption>以下均为演示数据</caption><thead><tr><th scope=\"col\">项目</th><th scope=\"col\">负责人</th><th scope=\"col\">状态</th><th scope=\"col\">任务数</th></tr></thead><tbody><tr><td >组件目录</td><td >林予安</td><td >进行中</td><td data-sort-value=\"24\">24 项</td></tr><tr><td >交互说明</td><td >周未</td><td >已完成</td><td data-sort-value=\"12\">12 项</td></tr><tr><td >移动端适配</td><td >陈青</td><td >待开始</td><td data-sort-value=\"18\">18 项</td></tr></tbody></table></div><p data-table-status class=\"su-muted su-small su-table-status\" role=\"status\">演示表格</p></div>",
          "css": "\n.su-table-wrap{width:100%;overflow:auto;border:1px solid var(--su-border);border-radius:10px}.su-table-wrap table{min-width:440px}.su-table-wrap th{background:var(--su-bg)}.su-table-wrap tr:last-child>td{border-bottom:0}.su-table-wrap caption{text-align:left;padding:10px 12px;color:var(--su-muted);font-size:12px;border-bottom:1px solid var(--su-border)}.su-table-wrap tbody tr:hover{background:var(--su-bg)}.su-table-sort{background:none;color:inherit;border:0;padding:0;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:inherit}.su-table-sort::after{content:\"排序\";font-size:10px;font-weight:400}.su-table-wrap th[aria-sort=ascending] .su-table-sort::after{content:\"升序\"}.su-table-wrap th[aria-sort=descending] .su-table-sort::after{content:\"降序\"}.su-table-caption{font-size:12px;color:var(--su-muted)}.su-table-status{min-height:23px}.su-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.su-table-search{display:flex;align-items:center;gap:8px;max-width:280px;width:100%}.su-table-selected{background:var(--su-soft)!important}.su-table-mini{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;border:1px solid var(--su-border);background:var(--su-surface);color:var(--su-text);border-radius:6px;font-size:12px;gap:5px}.su-table-mini:disabled{opacity:.4}.su-table-details td{white-space:normal!important;padding:14px 18px!important;background:var(--su-bg)}.su-table-edit-input{width:110px;min-height:32px;padding:4px 7px;border:1px solid var(--su-primary);border-radius:5px;color:var(--su-text);background:var(--su-surface)}.su-table-wrap tfoot td{background:var(--su-bg);font-weight:600;border-top:1px solid var(--su-border)}.su-table-scroll{height:185px;overflow:auto}.su-table-scroll thead th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--su-border)}.su-table-dense th,.su-table-dense td{padding:6px 10px}.su-table-empty{text-align:center;padding:28px!important;color:var(--su-muted);white-space:normal!important}.su-table-wrap [data-money]{font-variant-numeric:tabular-nums}.su-table-wrap .su-avatar{width:29px;height:29px;font-size:12px}.su-table-person{display:flex;align-items:center;gap:8px}.su-table-actions{display:flex;gap:5px}.su-table-optional-hidden [data-optional]{display:none}.su-table-optional-hidden table{min-width:320px}.su-table-help{font-size:12px;color:var(--su-muted)}\n",
          "js": "(function tableInit(){\n const mode=root.dataset.tableMode||root.querySelector('[data-table-mode]')?.dataset.tableMode,table=root.querySelector('table'),body=table.querySelector('tbody'),out=root.querySelector('[data-table-status]');\n const say=text=>{if(out)out.textContent=text;};\n root.querySelectorAll('[data-sort]').forEach(button=>button.addEventListener('click',()=>{const head=button.closest('th'),index=[...head.parentElement.children].indexOf(head),ascending=head.getAttribute('aria-sort')!=='ascending';table.querySelectorAll('th[aria-sort]').forEach(th=>th.setAttribute('aria-sort','none'));head.setAttribute('aria-sort',ascending?'ascending':'descending');const rows=[...body.querySelectorAll('tr')];rows.sort((a,b)=>{const av=a.children[index].dataset.sortValue||a.children[index].textContent,bv=b.children[index].dataset.sortValue||b.children[index].textContent;return (Number.isFinite(Number(av))&&Number.isFinite(Number(bv))?Number(av)-Number(bv):av.localeCompare(bv,'zh-CN'))*(ascending?1:-1);});rows.forEach(row=>body.append(row));say('已按'+button.textContent.trim()+(ascending?'升序':'降序')+'排列');}));\n const search=root.querySelector('[data-table-search]');if(search){const rows=[...body.querySelectorAll('tr')],empty=document.createElement('tr');empty.hidden=true;const cell=document.createElement('td');cell.colSpan=table.querySelectorAll('thead th').length;cell.className='su-table-empty';cell.textContent='没有匹配的演示记录，请修改关键词。';empty.append(cell);body.append(empty);const filter=()=>{const value=search.value.trim().toLocaleLowerCase('zh-CN');let count=0;rows.forEach(row=>{row.hidden=!row.textContent.toLocaleLowerCase('zh-CN').includes(value);if(!row.hidden)count++;});empty.hidden=count>0;say('显示 '+count+' / '+rows.length+' 条演示记录');};search.addEventListener('input',filter);const reset=root.querySelector('[data-reset-search]');if(reset)reset.addEventListener('click',()=>{search.value='';filter();search.focus();});if(search.value)filter();}\n const selectAll=root.querySelector('[data-select-all]'),rowChecks=[...root.querySelectorAll('[data-row-check]')];if(selectAll){const update=()=>{const chosen=rowChecks.filter(input=>input.checked);selectAll.checked=chosen.length===rowChecks.length;selectAll.indeterminate=chosen.length>0&&chosen.length<rowChecks.length;rowChecks.forEach(input=>input.closest('tr').classList.toggle('su-table-selected',input.checked));const sum=chosen.reduce((total,input)=>total+Number(input.dataset.amount||0),0);const money=root.querySelector('[data-total]');if(money)money.textContent='¥ '+sum.toFixed(2);say('已选择 '+chosen.length+' / '+rowChecks.length+' 条演示记录');};selectAll.addEventListener('change',()=>{rowChecks.forEach(input=>input.checked=selectAll.checked);update();});rowChecks.forEach(input=>input.addEventListener('change',update));const clear=root.querySelector('[data-clear-selection]');if(clear)clear.addEventListener('click',()=>{rowChecks.forEach(input=>input.checked=false);update();});update();}\n root.querySelectorAll('[data-expand]').forEach(button=>button.addEventListener('click',()=>{const detail=root.querySelector('#'+button.getAttribute('aria-controls')),open=button.getAttribute('aria-expanded')!=='true';button.setAttribute('aria-expanded',String(open));button.textContent=open?'收起':'查看';detail.hidden=!open;}));\n root.querySelectorAll('[data-edit-row]').forEach(button=>button.addEventListener('click',()=>{const row=button.closest('tr'),cell=row.querySelector('[data-editable]'),editing=button.dataset.editing==='yes';if(editing){const input=cell.querySelector('input');const value=input.value.trim();if(!value){input.setCustomValidity('请填写负责人');input.reportValidity();return;}cell.textContent=value;button.dataset.editing='';button.textContent='编辑';say('演示负责人已更新');}else{const previous=cell.textContent;cell.textContent='';const input=document.createElement('input');input.className='su-table-edit-input';input.value=previous;input.maxLength=12;input.setAttribute('aria-label','编辑演示负责人');input.addEventListener('input',()=>input.setCustomValidity(''));input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();button.click();}if(event.key==='Escape'){cell.textContent=previous;button.dataset.editing='';button.textContent='编辑';button.focus();say('已取消编辑');}});cell.append(input);button.dataset.editing='yes';button.textContent='保存';input.focus();input.select();}}));\n const dense=root.querySelector('[data-dense]');if(dense)dense.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-dense',dense.checked);say(dense.checked?'已切换为紧凑行距':'已切换为标准行距');});const optional=root.querySelector('[data-show-optional]');if(optional)optional.addEventListener('change',()=>{root.querySelector('.su-table-wrap').classList.toggle('su-table-optional-hidden',!optional.checked);say(optional.checked?'已显示负责人和任务数':'已隐藏辅助列');});\n const reorder=root.querySelector('[data-reorder]');if(reorder){const update=()=>{const rows=[...body.children];rows.forEach((row,index)=>{row.querySelector('[data-move=up]').disabled=index===0;row.querySelector('[data-move=down]').disabled=index===rows.length-1;row.querySelector('[data-position]').textContent=String(index+1);});};body.addEventListener('click',event=>{const button=event.target.closest('[data-move]');if(!button)return;const row=button.closest('tr');if(button.dataset.move==='up'&&row.previousElementSibling)body.insertBefore(row,row.previousElementSibling);else if(button.dataset.move==='down'&&row.nextElementSibling)body.insertBefore(row.nextElementSibling,row);update();if(button.disabled)row.querySelector('[data-move]:not(:disabled)')?.focus();else button.focus();say('已更新本地演示顺序');});update();}\n if(mode==='pagination'){const rows=JSON.parse(decodeURIComponent(root.querySelector('[data-page-data]').dataset.pageData)),size=3;let page=0;const previous=root.querySelector('[data-page-previous]'),next=root.querySelector('[data-page-next]');const render=()=>{body.textContent='';rows.slice(page*size,page*size+size).forEach(values=>{const row=document.createElement('tr');values.forEach((value,i)=>{const cell=document.createElement('td');cell.textContent=value+(i===3?' 项':'');row.append(cell);});body.append(row);});previous.disabled=page===0;next.disabled=(page+1)*size>=rows.length;root.querySelector('[data-page-label]').textContent='第 '+(page+1)+' / '+Math.ceil(rows.length/size)+' 页';say('显示第 '+(page*size+1)+' 至 '+Math.min((page+1)*size,rows.length)+' 条，共 '+rows.length+' 条演示记录');};previous.addEventListener('click',()=>{page--;render();});next.addEventListener('click',()=>{page++;render();});render();}\n})();",
          "tags": [
            "空状态",
            "恢复"
          ],
          "height": 365,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "accordion",
      "name": "折叠面板",
      "description": "按需展开说明、问答和设置内容。",
      "group": "基础",
      "icon": "menu",
      "samples": [
        {
          "id": "accordion-single",
          "category": "accordion",
          "title": "单项展开",
          "description": "适合帮助中心，一次聚焦一个问题。",
          "html": "<details class=\"su-disclosure\" name=\"guide\" open><summary>如何建立新项目？</summary><div class=\"su-answer\">点击项目列表中的新建，填写名称后即可开始。</div></details><details class=\"su-disclosure\" name=\"guide\" ><summary>能否邀请其他成员？</summary><div class=\"su-answer\">在成员设置中生成邀请链接，并选择访问权限。</div></details><details class=\"su-disclosure\" name=\"guide\" ><summary>数据可以导出吗？</summary><div class=\"su-answer\">可以导出表格和配置；导出前请核对数据范围。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-multiple",
          "category": "accordion",
          "title": "多项对照",
          "description": "允许保留多个展开项，方便比较不同规则。",
          "html": "<details class=\"su-disclosure\" open><summary>基础空间</summary><div class=\"su-answer\">包含项目、成员和常用设置。</div></details><details class=\"su-disclosure\" open><summary>共享空间</summary><div class=\"su-answer\">支持团队协作，并保留操作记录。</div></details><details class=\"su-disclosure\" ><summary>归档空间</summary><div class=\"su-answer\">历史项目归档后仍可查阅。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-flush",
          "category": "accordion",
          "title": "简洁问答",
          "description": "使用分隔线组织紧凑的文本内容。",
          "html": "<div class=\"su-flush\"><details class=\"su-disclosure\" open><summary>申请需要哪些材料？</summary><div class=\"su-answer\">准备联系人、项目用途和预计使用人数。</div></details><details class=\"su-disclosure\" ><summary>通常多久能完成？</summary><div class=\"su-answer\">演示流程包含填写、核对和确认三个步骤。</div></details><details class=\"su-disclosure\" ><summary>可以修改申请吗？</summary><div class=\"su-answer\">提交前可以随时返回修改。</div></details></div>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-steps",
          "category": "accordion",
          "title": "步骤说明",
          "description": "把顺序任务与展开说明放在一起。",
          "html": "<details class=\"su-disclosure\" open><summary><span class=\"su-number\">1</span>创建空间</summary><div class=\"su-answer\">取一个便于团队识别的名称。</div></details><details class=\"su-disclosure\" ><summary><span class=\"su-number\">2</span>邀请成员</summary><div class=\"su-answer\">先设置角色，再发送邀请。</div></details><details class=\"su-disclosure\" ><summary><span class=\"su-number\">3</span>开始协作</summary><div class=\"su-answer\">建立第一项任务并指定负责人。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-accent",
          "category": "accordion",
          "title": "重点条款",
          "description": "展开的条目显示清晰的侧边标记。",
          "html": "<div class=\"su-accent\"><details class=\"su-disclosure\" open><summary>服务范围</summary><div class=\"su-answer\">演示服务面向项目协作与资料整理。</div></details><details class=\"su-disclosure\" ><summary>使用限制</summary><div class=\"su-answer\">请勿在演示中填写真实密码或敏感信息。</div></details><details class=\"su-disclosure\" ><summary>资料保留</summary><div class=\"su-answer\">关闭预览后，本次操作结果会重置。</div></details></div>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-controls",
          "category": "accordion",
          "title": "批量展开",
          "description": "长说明页可以一次展开或收起全部内容。",
          "html": "<div class=\"su-row\" style=\"margin-bottom:12px\"><button class=\"su-btn su-btn-secondary\" data-expand>全部展开</button><button class=\"su-btn su-btn-ghost\" data-collapse>全部收起</button></div><details class=\"su-disclosure\" ><summary>使用准备</summary><div class=\"su-answer\">本例展示批量控制。每个条目仍然可以单独展开与收起。</div></details><details class=\"su-disclosure\" ><summary>操作说明</summary><div class=\"su-answer\">本例展示批量控制。每个条目仍然可以单独展开与收起。</div></details><details class=\"su-disclosure\" ><summary>常见问题</summary><div class=\"su-answer\">本例展示批量控制。每个条目仍然可以单独展开与收起。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "root.querySelector('[data-expand]').onclick=()=>root.querySelectorAll('details').forEach(node=>node.open=true);root.querySelector('[data-collapse]').onclick=()=>root.querySelectorAll('details').forEach(node=>node.open=false);",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-search",
          "category": "accordion",
          "title": "搜索问答",
          "description": "根据问题和回答内容过滤，结果始终可展开。",
          "html": "<label class=\"su-field\">查找问题<input class=\"su-input\" type=\"search\" placeholder=\"试试输入“成员”\" data-search></label><div data-items style=\"margin-top:12px\"><details class=\"su-disclosure\" ><summary>如何添加成员？</summary><div class=\"su-answer\">打开成员设置，选择添加成员。</div></details><details class=\"su-disclosure\" ><summary>如何修改通知？</summary><div class=\"su-answer\">在通知设置中选择接收方式。</div></details><details class=\"su-disclosure\" ><summary>如何备份资料？</summary><div class=\"su-answer\">打开资料页，选择导出备份。</div></details></div><p data-empty class=\"su-muted\" hidden>没有匹配的问题。</p>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "root.querySelector('[data-search]').oninput=event=>{let count=0;root.querySelectorAll('details').forEach(node=>{node.hidden=!node.textContent.includes(event.target.value.trim());if(!node.hidden)count++;});root.querySelector('[data-empty]').hidden=count>0;};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-nested",
          "category": "accordion",
          "title": "分组目录",
          "description": "在分类下继续展开子项，适合设置说明。",
          "html": "<details class=\"su-disclosure\" open><summary>账号与安全</summary><div class=\"su-answer\"><details class=\"su-disclosure\" ><summary>修改资料</summary><div class=\"su-answer\">可修改昵称、头像与联系信息。</div></details><details class=\"su-disclosure\" ><summary>登录保护</summary><div class=\"su-answer\">开启验证后，新的设备登录需要再次确认。</div></details></div></details><details class=\"su-disclosure\" ><summary>通知偏好</summary><div class=\"su-answer\">可分别设置项目消息与系统提醒。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-timeline",
          "category": "accordion",
          "title": "更新记录",
          "description": "按日期展开每次更新的具体内容。",
          "html": "<div class=\"su-timeline\"><details class=\"su-disclosure\" open><summary>今天 · 优化资料检索</summary><div class=\"su-answer\">支持按标题和标签查找资料。</div></details><details class=\"su-disclosure\" ><summary>昨天 · 增加成员角色</summary><div class=\"su-answer\">新增只读角色，适合共享查阅。</div></details><details class=\"su-disclosure\" ><summary>本周 · 完善导出</summary><div class=\"su-answer\">导出文件中包含原始列顺序。</div></details></div>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-inbox",
          "category": "accordion",
          "title": "待处理事项",
          "description": "标题附上待办数量，展开后查看明细。",
          "html": "<details class=\"su-disclosure\" open><summary>待审核申请 <span class=\"su-badge\">3 项</span></summary><div class=\"su-answer\">资料补充、成员加入、空间扩容。</div></details><details class=\"su-disclosure\" ><summary>未读消息 <span class=\"su-badge\">2 条</span></summary><div class=\"su-answer\">两条演示消息等待查阅。</div></details><details class=\"su-disclosure\" ><summary>已完成 <span class=\"su-badge\">8 项</span></summary><div class=\"su-answer\">本周已处理八项事务。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-settings",
          "category": "accordion",
          "title": "分段设置",
          "description": "只展开正在修改的设置，并显示保存结果。",
          "html": "<details class=\"su-disclosure\" open><summary>接收通知</summary><div class=\"su-answer\"><label class=\"su-row\"><input type=\"checkbox\" checked data-notice> 接收项目更新</label><button class=\"su-btn\" data-save style=\"margin-top:12px\">保存偏好</button><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p></div></details><details class=\"su-disclosure\" ><summary>显示偏好</summary><div class=\"su-answer\">可在展示站顶部切换浅色与深色主题。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "root.querySelector('[data-save]').onclick=()=>root.querySelector('[data-result]').textContent=root.querySelector('[data-notice]').checked?'已开启项目通知。':'已关闭项目通知。';",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "accordion-release",
          "category": "accordion",
          "title": "版本摘要",
          "description": "摘要和详细变更分层展示，适合产品动态。",
          "html": "<details class=\"su-disclosure\" open><summary><span><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg> 首次发布 <span class=\"su-small su-muted\">完整功能清单</span></span></summary><div class=\"su-answer\"><ul><li>支持建立项目和管理成员</li><li>加入消息提醒与资料归档</li><li>提供表格导出和快捷搜索</li></ul></div></details><details class=\"su-disclosure\" ><summary>后续计划</summary><div class=\"su-answer\">计划加入更多可组合的交互示例。</div></details>",
          "css": "\n.su-disclosure{border:1px solid var(--su-border);border-radius:12px;overflow:hidden;background:var(--su-surface)}\n.su-disclosure+ .su-disclosure{margin-top:10px}.su-disclosure summary{padding:15px 17px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}\n.su-disclosure summary::-webkit-details-marker{display:none}.su-disclosure summary:after{content:'＋';margin-left:auto;color:var(--su-muted)}\n.su-disclosure[open]>summary:after{content:'−'}.su-disclosure .su-answer{padding:0 17px 16px;color:var(--su-muted);line-height:1.7}\n.su-disclosure summary:focus-visible{outline:2px solid var(--su-primary);outline-offset:-3px}\n.su-flush .su-disclosure{border:0;border-bottom:1px solid var(--su-border);border-radius:0}.su-accent .su-disclosure[open]{border-left:4px solid var(--su-primary)}\n.su-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--su-soft);color:var(--su-primary);font-size:13px}\n.su-timeline .su-disclosure{border-left:2px solid var(--su-primary);border-radius:0 12px 12px 0}.su-disclosure .su-small{font-weight:400}\n.su-disclosure summary svg{width:18px;height:18px}.su-disclosure[hidden]{display:none}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "alert",
      "name": "提示信息",
      "description": "展示状态、问题和可执行的处理建议。",
      "group": "反馈",
      "icon": "info",
      "samples": [
        {
          "id": "alert-information",
          "category": "alert",
          "title": "一般提醒",
          "description": "用于补充当前任务相关的信息。",
          "html": "<div class=\"su-notice \" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>演示资料已准备好</strong><p>可以先浏览样例，再开始创建自己的项目。</p></div></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-success",
          "category": "alert",
          "title": "完成反馈",
          "description": "明确说明已完成的动作以及结果。",
          "html": "<div class=\"su-notice su-notice-success\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div style=\"flex:1\"><strong>演示项目已保存</strong><p>新的设置已应用到当前预览。</p></div></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-warning",
          "category": "alert",
          "title": "容量提醒",
          "description": "告诉用户接近限制，并提供具体处理入口。",
          "html": "<div class=\"su-notice su-notice-warning\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>演示空间即将用满</strong><p>已使用 8.6 G，建议整理归档资料。</p><button class=\"su-btn su-btn-secondary\" data-action=\"已打开演示整理清单：旧版本附件、重复图片。\" style=\"margin-top:12px\">查看整理建议</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-retry",
          "category": "alert",
          "title": "错误与重试",
          "description": "失败后保留明确的恢复动作。",
          "html": "<div class=\"su-notice su-notice-danger\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10v.1\"/></svg><div style=\"flex:1\"><strong>演示同步中断</strong><p>连接模拟失败，可以重新尝试。</p><button class=\"su-btn\" data-retry style=\"margin-top:12px\">重新同步</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "root.querySelector('[data-retry]').onclick=event=>{event.currentTarget.disabled=true;event.currentTarget.textContent='同步中…';setTimeout(()=>{root.querySelector('[data-result]').textContent='演示同步已完成，共更新 6 条记录。';event.target.textContent='同步完成';},700);};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-dismiss",
          "category": "alert",
          "title": "可关闭提醒",
          "description": "关闭后可通过按钮恢复，便于重复体验。",
          "html": "<div data-alert><div class=\"su-notice \" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>新功能已经准备好</strong><p>现在可以按标签筛选资料。</p><button class=\"su-btn su-btn-ghost\" data-dismiss style=\"margin-top:10px\">知道了</button></div></div></div><button class=\"su-btn su-btn-secondary\" data-restore hidden>重新显示提醒</button>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "const box=root.querySelector('[data-alert]'),restore=root.querySelector('[data-restore]');root.querySelector('[data-dismiss]').onclick=()=>{box.hidden=true;restore.hidden=false;restore.focus();};restore.onclick=()=>{box.hidden=false;restore.hidden=true;root.querySelector('[data-dismiss]').focus();};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-undo",
          "category": "alert",
          "title": "可撤销操作",
          "description": "对可恢复的操作提供及时撤销入口。",
          "html": "<div class=\"su-notice \" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>演示文档已归档</strong><p>文档仍可恢复到原来的文件夹。</p><button class=\"su-btn su-btn-secondary\" data-undo style=\"margin-top:10px\">撤销归档</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "root.querySelector('[data-undo]').onclick=event=>{root.querySelector('[data-result]').textContent='已撤销，演示文档恢复到资料库。';event.currentTarget.disabled=true;};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-banner",
          "category": "alert",
          "title": "页内通知横幅",
          "description": "横向提示适合位于列表或工作区顶部。",
          "html": "<div class=\"su-notice su-notice-bar\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>演示维护窗口：今晚 23:00</strong><p>预计持续十分钟，已保存的资料不受影响。</p></div></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-solid",
          "category": "alert",
          "title": "高优先级公告",
          "description": "使用实色表面提升一条重要公告的层级。",
          "html": "<div class=\"su-notice su-notice-solid\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>新的团队空间已就绪</strong><p>管理员可以为成员分配访问权限。</p></div></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-details",
          "category": "alert",
          "title": "展开诊断信息",
          "description": "默认展示简短说明，需要时再查看细节。",
          "html": "<div class=\"su-notice su-notice-warning\" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>部分演示任务需要关注</strong><p>两项任务尚未指定负责人。</p><details style=\"margin-top:12px\"><summary style=\"cursor:pointer\">查看任务明细</summary><div class=\"su-log\">资料整理：缺少负责人\n版本核对：缺少截止日期</div></details></div></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-progress",
          "category": "alert",
          "title": "带进度的处理通知",
          "description": "实时更新演示任务的进度，并给出结束状态。",
          "html": "<div class=\"su-notice \" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>生成演示导出文件</strong><p>点击开始后，可以观察任务进度。</p><div class=\"su-notice-progress\"><span data-progress></span></div><button class=\"su-btn\" data-start style=\"margin-top:12px\">开始生成</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "root.querySelector('[data-start]').onclick=event=>{const button=event.currentTarget;button.disabled=true;let value=0;const timer=setInterval(()=>{value=Math.min(100,value+20);root.querySelector('[data-progress]').style.width=value+'%';root.querySelector('[data-result]').textContent=value===100?'演示导出文件已生成。':'正在生成：'+value+'%';if(value===100){clearInterval(timer);button.disabled=false;button.textContent='重新生成';}},220);};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-service",
          "category": "alert",
          "title": "服务状态提示",
          "description": "文字与状态标记同时说明服务可用性。",
          "html": "<div class=\"su-panel su-stack\"><div class=\"su-between\"><strong>演示服务状态</strong><span class=\"su-badge\">运行正常</span></div><div class=\"su-between\"><span>资料服务</span><span style=\"color:var(--su-success)\">正常</span></div><div class=\"su-between\"><span>消息服务</span><span style=\"color:var(--su-warning)\">维护中</span></div><p class=\"su-small su-muted\" style=\"margin:0\">以上为演示状态，并非实际监控数据。</p></div>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "alert-permission",
          "category": "alert",
          "title": "权限提示",
          "description": "解释不可执行的原因，并提供申请入口。",
          "html": "<div class=\"su-notice \" role=\"status\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg><div style=\"flex:1\"><strong>当前为只读成员</strong><p>可以查看资料；编辑前需要申请协作权限。</p><button class=\"su-btn\" data-action=\"演示申请已记录，等待管理员处理。\" style=\"margin-top:12px\">申请编辑权限</button></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-notice{padding:16px;border:1px solid var(--su-border);border-radius:12px;background:var(--su-soft);display:flex;align-items:flex-start;gap:12px}.su-notice svg{width:20px;height:20px;flex:none}.su-notice p{margin:6px 0 0;line-height:1.6}.su-notice strong{display:block}.su-notice .su-btn-ghost{margin-left:auto;flex:none}.su-notice-success{border-color:var(--su-success)}.su-notice-warning{border-color:var(--su-warning)}.su-notice-danger{border-color:var(--su-danger)}.su-notice-solid{background:var(--su-primary);color:var(--su-on-primary);border:0}.su-notice-solid .su-muted{color:inherit}.su-notice-bar{border-radius:0;border-left:4px solid var(--su-primary)}.su-notice [hidden]{display:none}.su-log{white-space:pre-wrap;line-height:1.7;padding:12px;background:var(--su-bg);border-radius:8px}.su-notice-progress{height:5px;border-radius:8px;background:var(--su-border);overflow:hidden;margin-top:12px}.su-notice-progress span{display:block;width:0;height:100%;background:var(--su-primary);transition:width .2s}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "avatar",
      "name": "头像",
      "description": "展示身份、状态、参与者与本地图片预览。",
      "group": "基础",
      "icon": "user",
      "samples": [
        {
          "id": "avatar-initials",
          "category": "avatar",
          "title": "文字头像",
          "description": "没有图片时，用清晰的姓名文字作为头像。",
          "html": "<div class=\"su-row\"><span class=\"su-face \" aria-label=\"小林\">小林</span><span class=\"su-face \" aria-label=\"阿青\">阿青</span><span class=\"su-face \" aria-label=\"小周\">小周</span></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-sizes",
          "category": "avatar",
          "title": "头像尺寸",
          "description": "在成员列表、详情页和个人主页中使用不同尺寸。",
          "html": "<div class=\"su-row\" style=\"align-items:center;gap:18px\"><span class=\"su-face su-face-sm\" aria-label=\"林\">林</span><span class=\"su-face \" aria-label=\"林\">林</span><span class=\"su-face su-face-lg\" aria-label=\"林\">林</span><span class=\"su-face su-face-xl\" aria-label=\"林\">林</span></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-presence",
          "category": "avatar",
          "title": "在线状态",
          "description": "头像与状态文字共同说明成员是否可联系。",
          "html": "<div class=\"su-stack\"><div class=\"su-person\"><span class=\"su-face\">小林<i class=\"su-presence\" aria-hidden=\"true\"></i></span><div><strong>小林</strong><p class=\"su-muted su-small\">在线，可以联系</p></div></div><div class=\"su-person\"><span class=\"su-face\">阿青<i class=\"su-presence su-presence-away\" aria-hidden=\"true\"></i></span><div><strong>阿青</strong><p class=\"su-muted su-small\">暂时离开</p></div></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-group",
          "category": "avatar",
          "title": "参与者叠放",
          "description": "紧凑展示多人参与，并可展开完整名单。",
          "html": "<div class=\"su-row\"><div class=\"su-face-stack\"><span class=\"su-face \" aria-label=\"林\">林</span><span class=\"su-face \" aria-label=\"青\">青</span><span class=\"su-face \" aria-label=\"周\">周</span></div><button class=\"su-btn su-btn-ghost\" data-members>另有 3 人</button></div><p data-result class=\"su-small su-muted\" role=\"status\">演示项目共有 6 名参与者。</p>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelector('[data-members]').onclick=event=>{root.querySelector('[data-result]').textContent='全部演示成员：小林、阿青、小周、安安、小许、阿言。';event.currentTarget.textContent='已显示全部成员';};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-profile",
          "category": "avatar",
          "title": "成员信息行",
          "description": "将姓名、角色和头像组织为易扫读的成员条目。",
          "html": "<div class=\"su-panel su-stack\"><div class=\"su-person\"><span class=\"su-face \" aria-label=\"小林\">小林</span><div style=\"flex:1\"><strong>小林</strong><p class=\"su-muted su-small\">项目负责人 · 演示成员</p></div><span class=\"su-badge\">管理者</span></div><div class=\"su-person\"><span class=\"su-face \" aria-label=\"阿青\">阿青</span><div style=\"flex:1\"><strong>阿青</strong><p class=\"su-muted su-small\">内容整理 · 演示成员</p></div><span class=\"su-badge\">协作者</span></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-shapes",
          "category": "avatar",
          "title": "组织与个人",
          "description": "通过不同外形区分团队标识和个人头像。",
          "html": "<div class=\"su-row\" style=\"gap:28px\"><div class=\"su-stack\" style=\"align-items:center\"><span class=\"su-face \" aria-label=\"林\">林</span><span class=\"su-small\">个人账号</span></div><div class=\"su-stack\" style=\"align-items:center\"><span class=\"su-face su-face-square\" aria-label=\"设计\">设计</span><span class=\"su-small\">设计团队</span></div><div class=\"su-stack\" style=\"align-items:center\"><span class=\"su-face su-face-square\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg></span><span class=\"su-small\">项目空间</span></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-upload",
          "category": "avatar",
          "title": "本地上传预览",
          "description": "读取本地图片预览，不上传到任何服务器。",
          "html": "<div class=\"su-person\"><span class=\"su-face su-face-lg\" data-preview><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21v-2a8 8 0 0 1 16 0v2\"/></svg></span><div><label class=\"su-btn su-btn-secondary\" style=\"cursor:pointer\">选择头像<input type=\"file\" accept=\"image/*\" data-upload style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)\"></label><p class=\"su-small su-muted\" data-result role=\"status\">仅在本地预览，支持 2 兆以内的图片。</p></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelector('[data-upload]').onchange=event=>{const file=event.target.files[0],output=root.querySelector('[data-result]');if(!file)return;if(!file.type.startsWith('image/')||file.size>2*1024*1024){output.textContent='请选择 2 兆以内的图片。';return;}const reader=new FileReader();reader.onload=()=>{const image=document.createElement('img');image.alt='本地选择的头像预览';image.src=reader.result;root.querySelector('[data-preview]').replaceChildren(image);output.textContent='头像已在本地预览，未上传。';};reader.readAsDataURL(file);};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-verified",
          "category": "avatar",
          "title": "认证标记",
          "description": "认证图标有对应的可读文字说明。",
          "html": "<div class=\"su-person\"><span class=\"su-face su-face-lg\">小林<span class=\"su-verified\" aria-label=\"已认证\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg></span></span><div><strong>小林的工作室</strong><p class=\"su-muted su-small\">已认证 · 演示身份</p></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-select",
          "category": "avatar",
          "title": "选择负责人",
          "description": "点击头像选择一位成员，并展示选择结果。",
          "html": "<div class=\"su-face-picker\"><button aria-label=\"选择小林\" aria-pressed=\"true\" data-name=\"小林\"><span class=\"su-face \" aria-label=\"小林\">小林</span></button><button aria-label=\"选择阿青\" aria-pressed=\"false\" data-name=\"阿青\"><span class=\"su-face \" aria-label=\"阿青\">阿青</span></button><button aria-label=\"选择小周\" aria-pressed=\"false\" data-name=\"小周\"><span class=\"su-face \" aria-label=\"小周\">小周</span></button></div><p data-result role=\"status\" class=\"su-small su-muted\">当前演示负责人：小林</p>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelectorAll('[data-name]').forEach(button=>button.onclick=()=>{root.querySelectorAll('[data-name]').forEach(node=>node.setAttribute('aria-pressed',node===button?'true':'false'));root.querySelector('[data-result]').textContent='当前演示负责人：'+button.dataset.name;});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-loading",
          "category": "avatar",
          "title": "加载占位与替换",
          "description": "保留头像和文字的位置，避免内容载入时跳动。",
          "html": "<div class=\"su-person\" data-profile><span class=\"su-avatar-skeleton\" aria-hidden=\"true\"></span><div><div class=\"su-text-skeleton\"></div><div class=\"su-text-skeleton\" style=\"width:90px\"></div></div></div><button class=\"su-btn su-btn-secondary\" data-load style=\"margin-top:20px\">载入演示成员</button><p class=\"su-small su-muted\" data-result role=\"status\">正在展示加载占位。</p>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelector('[data-load]').onclick=event=>{root.querySelector('[data-profile]').innerHTML='<span class=\"su-face\">小林</span><div><strong>小林</strong><p class=\"su-small su-muted\">项目负责人</p></div>';root.querySelector('[data-result]').textContent='演示成员已载入。';event.currentTarget.disabled=true;};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-story",
          "category": "avatar",
          "title": "更新状态环",
          "description": "用头像外环提示存在尚未查阅的内容。",
          "html": "<div class=\"su-row\" style=\"padding:8px\"><button class=\"su-btn su-btn-ghost\" data-story aria-label=\"查看小林的更新\" style=\"padding:0;border:0;border-radius:50%\"><span class=\"su-face su-face-lg su-face-ring\" aria-label=\"小林\">小林</span></button><div><strong>小林发布了新进展</strong><p class=\"su-small su-muted\" data-result role=\"status\">点击头像查看演示更新。</p></div></div>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelector('[data-story]').onclick=()=>{root.querySelector('.su-face').classList.remove('su-face-ring');root.querySelector('[data-result]').textContent='已查阅：项目资料整理完成。';};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "avatar-fallback",
          "category": "avatar",
          "title": "自动文字回退",
          "description": "根据输入的姓名生成本地文字头像。",
          "html": "<div class=\"su-person\"><span class=\"su-face su-face-lg\" data-face>小林</span><label class=\"su-field\" style=\"flex:1\">演示姓名<input class=\"su-input\" value=\"小林\" maxlength=\"12\" data-name placeholder=\"输入姓名\"></label></div><p class=\"su-small su-muted\">清空姓名时显示默认用户图标。</p>",
          "css": "\n.su-face{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--su-soft);color:var(--su-primary);font-weight:700;position:relative;flex:none;overflow:visible}.su-face svg{width:52%;height:52%}.su-face-sm{width:32px;height:32px;font-size:12px}.su-face-lg{width:76px;height:76px;font-size:28px}.su-face-xl{width:100px;height:100px;font-size:34px}.su-face-square{border-radius:12px}.su-presence{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--su-success);border:3px solid var(--su-surface);border-radius:50%}.su-presence-away{background:var(--su-warning)}.su-face-stack{display:flex;align-items:center;padding-left:8px}.su-face-stack .su-face{margin-left:-8px;border:3px solid var(--su-surface)}.su-person{display:flex;align-items:center;gap:12px}.su-person p{margin:4px 0 0}.su-face img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.su-face-picker{display:flex;gap:12px;flex-wrap:wrap}.su-face-picker button{border:2px solid transparent;background:none;padding:4px;border-radius:50%;cursor:pointer}.su-face-picker button[aria-pressed=true]{border-color:var(--su-primary)}.su-verified{position:absolute;right:-5px;bottom:-2px;background:var(--su-primary);color:var(--su-on-primary);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--su-surface)}.su-verified svg{width:14px;height:14px}.su-face-ring{outline:3px solid var(--su-primary);outline-offset:4px}.su-avatar-skeleton{width:48px;height:48px;background:var(--su-border);border-radius:50%}.su-text-skeleton{height:12px;background:var(--su-border);border-radius:4px;width:130px;margin:8px 0}\n",
          "js": "root.querySelector('[data-name]').oninput=event=>{const node=root.querySelector('[data-face]'),value=event.target.value.trim();node.textContent=value?Array.from(value).slice(0,2).join(''):'访客';node.setAttribute('aria-label',value||'访客');};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "badge",
      "name": "徽标标签",
      "description": "用短标签表达分类、状态和数量。",
      "group": "基础",
      "icon": "star",
      "samples": [
        {
          "id": "badge-states",
          "category": "badge",
          "title": "业务状态",
          "description": "短标签表达记录所处的业务阶段。",
          "html": "<div class=\"su-row\" style=\"flex-wrap:wrap\"><span class=\"su-chip su-chip-warning\">待处理</span><span class=\"su-chip su-chip-fill\">进行中</span><span class=\"su-chip su-chip-success\">已完成</span><span class=\"su-chip \">已停用</span></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-presence",
          "category": "badge",
          "title": "带文字的状态点",
          "description": "状态点作为辅助，文字提供完整含义。",
          "html": "<div class=\"su-stack\"><span class=\"su-chip su-chip-dot su-chip-success\">服务正常</span><span class=\"su-chip su-chip-dot su-chip-warning\">正在维护</span><span class=\"su-chip su-chip-dot su-chip-danger\">连接中断</span></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-count",
          "category": "badge",
          "title": "未读计数",
          "description": "计数与实际列表状态一起更新。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-read>查看消息 <span class=\"su-count\" data-count>3</span></button></div><p class=\"su-small su-muted\" data-result role=\"status\">还有 3 条演示消息未读。</p>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "let count=3;root.querySelector('[data-read]').onclick=event=>{count=Math.max(0,count-1);root.querySelector('[data-count]').textContent=count;root.querySelector('[data-result]').textContent=count?'还有 '+count+' 条演示消息未读。':'演示消息已全部读完。';if(!count)event.currentTarget.disabled=true;};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-remove",
          "category": "badge",
          "title": "可移除标签",
          "description": "可删除已选择的标签，并查看剩余结果。",
          "html": "<div class=\"su-tag-list\" data-tags><span class=\"su-chip\">设计<button aria-label=\"移除设计\" data-remove><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></span><span class=\"su-chip\">协作<button aria-label=\"移除协作\" data-remove><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></span><span class=\"su-chip\">资料<button aria-label=\"移除资料\" data-remove><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></span></div><p class=\"su-small su-muted\" data-result role=\"status\">已选择 3 个演示标签。</p>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-remove]');if(button){button.closest('.su-chip').remove();const count=root.querySelectorAll('.su-chip').length;root.querySelector('[data-result]').textContent=count?'已选择 '+count+' 个演示标签。':'演示标签已清空。';}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-filter",
          "category": "badge",
          "title": "筛选标签",
          "description": "选中项带有清晰的按下状态。",
          "html": "<div class=\"su-tag-list\"><button class=\"su-chip su-chip-filter\" aria-pressed=\"true\" data-filter=\"全部\">全部</button><button class=\"su-chip su-chip-filter\" aria-pressed=\"false\" data-filter=\"文档\">文档</button><button class=\"su-chip su-chip-filter\" aria-pressed=\"false\" data-filter=\"图片\">图片</button><button class=\"su-chip su-chip-filter\" aria-pressed=\"false\" data-filter=\"表格\">表格</button></div><p class=\"su-small su-muted\" data-result role=\"status\">正在显示全部演示资料。</p>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "root.querySelectorAll('[data-filter]').forEach(button=>button.onclick=()=>{root.querySelectorAll('[data-filter]').forEach(node=>node.setAttribute('aria-pressed',node===button?'true':'false'));root.querySelector('[data-result]').textContent='正在显示'+button.dataset.filter+'演示资料。';});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-roles",
          "category": "badge",
          "title": "成员角色",
          "description": "将角色与姓名放在同一行，适合成员管理。",
          "html": "<div class=\"su-stack\"><div class=\"su-between\"><span>小林</span><span class=\"su-chip su-chip-fill\">空间管理者</span></div><div class=\"su-between\"><span>阿青</span><span class=\"su-chip \">内容编辑</span></div><div class=\"su-between\"><span>小周</span><span class=\"su-chip \">只读成员</span></div></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-icon",
          "category": "badge",
          "title": "带图标的标签",
          "description": "图标辅助识别验证、保护或收藏等含义。",
          "html": "<div class=\"su-row\" style=\"flex-wrap:wrap\"><span class=\"su-chip su-chip-success\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg>已验证</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg>已收藏</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\"/><path d=\"M3 12h18M5 6h14M5 18h14\"/></svg>公开可见</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21v-2a8 8 0 0 1 16 0v2\"/></svg>仅限成员</span></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-capacity",
          "category": "badge",
          "title": "容量分级",
          "description": "同一行展示用量和对应的容量状态。",
          "html": "<div class=\"su-panel su-stack\"><div class=\"su-between\"><strong>演示空间</strong><span class=\"su-chip su-chip-warning\">接近上限</span></div><progress max=\"100\" value=\"86\" style=\"width:100%;accent-color:var(--su-warning)\">86%</progress><span class=\"su-small su-muted\">已使用 8.6 G / 共 10 G</span></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-vote",
          "category": "badge",
          "title": "互动计数",
          "description": "点击收藏后同步改变标签文字与计数。",
          "html": "<button class=\"su-chip su-chip-filter\" data-vote aria-pressed=\"false\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\"/></svg><span data-label>收藏这个示例</span><span data-count>24</span></button><p class=\"su-small su-muted\" data-result role=\"status\">这是本地演示计数。</p>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "root.querySelector('[data-vote]').onclick=event=>{const button=event.currentTarget,active=button.getAttribute('aria-pressed')!=='true';button.setAttribute('aria-pressed',String(active));root.querySelector('[data-label]').textContent=active?'已收藏':'收藏这个示例';root.querySelector('[data-count]').textContent=active?'25':'24';root.querySelector('[data-result]').textContent=active?'已加入本地演示收藏。':'已取消演示收藏。';};",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-inventory",
          "category": "badge",
          "title": "库存选择",
          "description": "商品状态决定选项是否可用。",
          "html": "<div class=\"su-stack\"><button class=\"su-btn su-btn-secondary su-between\"  data-action=\"已选择演示款式：纸白\"><span>纸白</span><span class=\"su-chip \">现货</span></button><button class=\"su-btn su-btn-secondary su-between\"  data-action=\"已选择演示款式：墨蓝\"><span>墨蓝</span><span class=\"su-chip \">仅剩少量</span></button><button class=\"su-btn su-btn-secondary su-between\" disabled data-action=\"已选择演示款式：岩灰\"><span>岩灰</span><span class=\"su-chip \">暂时售罄</span></button></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-action]');if(button){root.querySelector('[data-result]').textContent=button.dataset.action;}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-files",
          "category": "badge",
          "title": "文件分类",
          "description": "以文件类型标签辅助辨认资料，不依赖颜色。",
          "html": "<div class=\"su-stack\"><div class=\"su-between\"><span>项目说明</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>文档</span></div><div class=\"su-between\"><span>费用汇总</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg>表格</span></div><div class=\"su-between\"><span>封面草图</span><span class=\"su-chip \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>图片</span></div></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "badge-membership",
          "category": "badge",
          "title": "权益摘要",
          "description": "将多个短权益组合在套餐或账号详情中。",
          "html": "<div class=\"su-panel su-stack\"><div class=\"su-between\"><strong>协作空间</strong><span class=\"su-chip su-chip-fill\">演示方案</span></div><div class=\"su-tag-list\"><span class=\"su-chip \">5 位成员</span><span class=\"su-chip \">20 G 空间</span><span class=\"su-chip \">历史版本</span><span class=\"su-chip \">资料导出</span></div><p class=\"su-small su-muted\" style=\"margin:0\">以上仅为组件演示，不涉及实际订购。</p></div>",
          "css": "\n.su-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--su-border);border-radius:999px;font-size:12px;line-height:1.5;background:var(--su-surface);color:var(--su-text)}.su-chip-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.su-chip-success{color:var(--su-success)}.su-chip-warning{color:var(--su-warning)}.su-chip-danger{color:var(--su-danger)}.su-chip-fill{background:var(--su-primary);border-color:transparent;color:var(--su-on-primary)}.su-chip svg{width:13px;height:13px}.su-chip button{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:inherit;min-width:24px;min-height:24px}.su-chip-filter{cursor:pointer;padding:8px 14px}.su-chip-filter[aria-pressed=true]{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-count{border-radius:999px;background:var(--su-danger);color:var(--su-on-danger);font-size:11px;min-width:19px;min-height:19px;display:inline-grid;place-items:center;padding:0 4px}.su-badge-icon{position:relative;display:inline-flex}.su-badge-icon .su-count{position:absolute;right:-7px;top:-6px}.su-tag-list{display:flex;flex-wrap:wrap;gap:8px}\n",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "breadcrumb",
      "name": "面包屑",
      "description": "清晰表达页面位置和层级关系。",
      "group": "导航",
      "icon": "arrow",
      "samples": [
        {
          "id": "breadcrumb-basic",
          "category": "breadcrumb",
          "title": "层级路径",
          "description": "用清晰的层级路径帮助用户理解当前位置。",
          "html": "<nav aria-label=\"当前位置\"><ol class=\"su-crumbs \"><li><button data-crumb=\"首页\">首页</button></li><li><button data-crumb=\"团队空间\">团队空间</button></li><li><span aria-current=\"page\">项目资料</span></li></ol></nav><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-home",
          "category": "breadcrumb",
          "title": "首页图标",
          "description": "首页入口结合图标和文字，保持可辨认。",
          "html": "<nav aria-label=\"当前位置\"><ol class=\"su-crumbs su-crumbs-arrow\"><li><button data-crumb=\"首页\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg> 首页</button></li><li><button data-crumb=\"项目\">项目</button></li><li><span aria-current=\"page\">春日计划</span></li></ol></nav><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.textContent.trim();root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-context",
          "category": "breadcrumb",
          "title": "页面上下文",
          "description": "路径置于页面标题上方，描述位置与当前任务。",
          "html": "<div class=\"su-stack\"><nav aria-label=\"当前位置\"><ol class=\"su-crumbs \"><li><button data-crumb=\"工作空间\">工作空间</button></li><li><button data-crumb=\"成员管理\">成员管理</button></li><li><span aria-current=\"page\">邀请成员</span></li></ol></nav><div><h2 style=\"margin:0 0 6px;font-size:24px\">邀请成员</h2><p class=\"su-muted\" style=\"margin:0\">为新的协作者选择合适的访问范围。</p></div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-compact",
          "category": "breadcrumb",
          "title": "长路径折叠",
          "description": "中间层级折叠为可展开目录，节约空间。",
          "html": "<nav aria-label=\"当前位置\"><ol class=\"su-crumbs\"><li><button data-crumb=\"首页\">首页</button></li><li><details class=\"su-crumb-menu\"><summary aria-label=\"展开中间层级\">更多</summary><div><button data-crumb=\"设计空间\">设计空间</button><button data-crumb=\"项目资料\">项目资料</button><button data-crumb=\"视觉规范\">视觉规范</button></div></details></li><li><span aria-current=\"page\">图标</span></li></ol></nav><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-switch",
          "category": "breadcrumb",
          "title": "切换空间",
          "description": "在路径中就近切换所属工作空间。",
          "html": "<nav aria-label=\"当前位置\"><ol class=\"su-crumbs\"><li><details class=\"su-crumb-menu\"><summary>设计空间 ▾</summary><div><button data-crumb=\"设计空间\">设计空间</button><button data-crumb=\"内容空间\">内容空间</button><button data-crumb=\"个人空间\">个人空间</button></div></details></li><li><button data-crumb=\"项目\">项目</button></li><li><span aria-current=\"page\">资料整理</span></li></ol></nav><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-file",
          "category": "breadcrumb",
          "title": "文件夹路径",
          "description": "路径图标与文件名用于资料管理场景。",
          "html": "<div class=\"su-crumb-panel\"><nav aria-label=\"当前位置\"><ol class=\"su-crumbs \"><li><button data-crumb=\"资料库\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg> 资料库</button></li><li><button data-crumb=\"共享文件\">共享文件</button></li><li><span aria-current=\"page\">项目说明</span></li></ol></nav></div><p class=\"su-small su-muted\" data-result role=\"status\">演示文件：项目说明，更新于今天。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.textContent.trim();root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-steps",
          "category": "breadcrumb",
          "title": "分步流程位置",
          "description": "步骤编号表达顺序，当前步骤具有语义标记。",
          "html": "<ol class=\"su-steps\"><li><span><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg></span>填写资料</li><li aria-current=\"step\"><span>2</span>核对信息</li><li><span>3</span>完成创建</li></ol><div class=\"su-panel su-small su-muted\">当前处于演示流程的第二步，请核对名称和成员。</div>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n.su-steps svg{width:15px;height:15px}",
          "js": "",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-mobile",
          "category": "breadcrumb",
          "title": "紧凑返回入口",
          "description": "小屏界面只保留上级入口和当前页面。",
          "html": "<div class=\"su-panel su-between\"><button class=\"su-btn su-btn-ghost\" data-crumb=\"成员列表\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12h16m-6-6 6 6-6 6\"/></svg> 成员列表</button><strong>成员详情</strong></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-pills",
          "category": "breadcrumb",
          "title": "目录胶囊",
          "description": "适合少量层级的可点击目录入口。",
          "html": "<nav aria-label=\"当前位置\"><ol class=\"su-crumbs su-crumbs-pill su-crumbs-arrow\"><li><button data-crumb=\"全部资源\">全部资源</button></li><li><button data-crumb=\"界面组件\">界面组件</button></li><li><span aria-current=\"page\">按钮</span></li></ol></nav><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-record",
          "category": "breadcrumb",
          "title": "记录详情路径",
          "description": "在完整位置旁边显示当前记录的业务状态。",
          "html": "<div class=\"su-stack\"><nav aria-label=\"当前位置\"><ol class=\"su-crumbs \"><li><button data-crumb=\"项目\">项目</button></li><li><button data-crumb=\"资料审核\">资料审核</button></li><li><span aria-current=\"page\">申请详情</span></li></ol></nav><div class=\"su-between\"><strong>空间扩容申请</strong><span class=\"su-badge\">待审核</span></div><div class=\"su-small su-muted\">演示记录编号：2026－018</div></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-article",
          "category": "breadcrumb",
          "title": "文章分类路径",
          "description": "标题前展示内容所属分类，适合阅读页面。",
          "html": "<article class=\"su-stack\"><nav aria-label=\"当前位置\"><ol class=\"su-crumbs su-crumbs-dot\"><li><button data-crumb=\"知识库\">知识库</button></li><li><button data-crumb=\"使用指南\">使用指南</button></li><li><span aria-current=\"page\">协作入门</span></li></ol></nav><h2 style=\"font-size:25px;margin:0\">让资料整理更有条理</h2><p class=\"su-muted\" style=\"margin:0;line-height:1.7\">从清晰的文件命名开始，再逐步建立共享与归档规则。</p></article><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "breadcrumb-hierarchy",
          "category": "breadcrumb",
          "title": "多级项目导航",
          "description": "按组织、团队、项目和任务展示业务层级。",
          "html": "<div class=\"su-crumb-panel\"><nav aria-label=\"当前位置\"><ol class=\"su-crumbs su-crumbs-arrow\"><li><button data-crumb=\"演示组织\">演示组织</button></li><li><button data-crumb=\"产品团队\">产品团队</button></li><li><button data-crumb=\"资料中心\">资料中心</button></li><li><span aria-current=\"page\">首页改版</span></li></ol></nav></div><div class=\"su-row\" style=\"margin-top:18px\"><span class=\"su-badge\">设计阶段</span><span class=\"su-small su-muted\">负责人：小林</span></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-size:14px}.su-crumbs li{display:flex;align-items:center;gap:8px}.su-crumbs li+li:before{content:'/';color:var(--su-muted)}.su-crumbs button{border:0;padding:6px 2px;background:none;color:var(--su-muted);font:inherit;cursor:pointer}.su-crumbs button:hover{color:var(--su-primary)}.su-crumbs [aria-current]{font-weight:600;color:var(--su-text)}.su-crumbs svg{width:16px;height:16px}.su-crumb-panel{padding:16px;background:var(--su-soft);border-radius:10px}.su-crumbs-arrow li+li:before{content:'›';font-size:20px}.su-crumbs-dot li+li:before{content:'·'}.su-crumbs-pill button{border:1px solid var(--su-border);padding:6px 12px;border-radius:999px}.su-crumb-menu{position:relative}.su-crumb-menu summary{cursor:pointer;padding:6px 10px}.su-crumb-menu div{position:absolute;z-index:2;top:32px;left:0;min-width:150px;padding:8px;border:1px solid var(--su-border);background:var(--su-surface);border-radius:10px;box-shadow:0 8px 28px #0001}.su-crumb-menu div button{display:block;width:100%;text-align:left}.su-steps{display:flex;gap:12px;list-style:none;padding:0;flex-wrap:wrap}.su-steps li{display:flex;align-items:center;gap:8px;color:var(--su-muted)}.su-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%}.su-steps li[aria-current]{color:var(--su-primary);font-weight:600}.su-steps li[aria-current] span{background:var(--su-primary);color:var(--su-on-primary);border-color:transparent}\n",
          "js": "root.addEventListener('click',event=>{const button=event.target.closest('[data-crumb]');if(button){root.querySelector('[data-result]').textContent='演示导航：'+button.dataset.crumb;root.querySelectorAll('details').forEach(node=>node.open=false);}});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "checkbox",
      "name": "复选框",
      "description": "选择多项、批量处理和设置组合偏好。",
      "group": "表单",
      "icon": "check",
      "samples": [
        {
          "id": "checkbox-basic",
          "category": "checkbox",
          "title": "常规多选",
          "description": "一组独立选项支持任意组合。",
          "html": "<fieldset style=\"border:0;padding:0;margin:0\"><legend style=\"font-weight:600\">接收哪些演示通知？</legend><label class=\"su-option \"><input type=\"checkbox\" value=\"项目更新\" checked><span>项目更新</span></label><label class=\"su-option \"><input type=\"checkbox\" value=\"成员加入\" ><span>成员加入</span></label><label class=\"su-option \"><input type=\"checkbox\" value=\"资料评论\" ><span>资料评论</span></label></fieldset><p data-result class=\"su-small su-muted\" role=\"status\">已选择：项目更新</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>{const values=[...root.querySelectorAll('input:checked')].map(node=>node.value);root.querySelector('[data-result]').textContent=values.length?'已选择：'+values.join('、'):'暂未选择通知。';});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-description",
          "category": "checkbox",
          "title": "带补充说明",
          "description": "用说明文字帮助用户理解选项的影响。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" checked><span>每日摘要<small>每天汇总一次动态，减少重复提醒。</small></span></label><label class=\"su-option \"><input type=\"checkbox\" ><span>重要事项即时通知<small>仅在任务到期或权限变化时提醒。</small></span></label><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>root.querySelector('[data-result]').textContent='已更新 '+root.querySelectorAll('input:checked').length+' 项演示偏好。');",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-disabled",
          "category": "checkbox",
          "title": "不可用选项",
          "description": "不可用状态同时解释原因，避免只有置灰。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" checked disabled><span>浏览共享资料</span></label><label class=\"su-option \"><input type=\"checkbox\" disabled><span>修改空间权限<small>仅演示管理员可以修改。</small></span></label><label class=\"su-option \"><input type=\"checkbox\" checked><span>接收评论提醒</span></label><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.querySelector('input:not(:disabled)').onchange=event=>root.querySelector('[data-result]').textContent=event.target.checked?'已开启演示评论提醒。':'已关闭演示评论提醒。';",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-all",
          "category": "checkbox",
          "title": "全选与部分选中",
          "description": "父级复选框使用原生部分选中状态。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" data-all><span><strong>全部演示资料</strong></span></label><div style=\"margin-left:27px;border-left:1px solid var(--su-border);padding-left:14px\"><label class=\"su-option \"><input type=\"checkbox\" data-child checked><span>项目说明</span></label><label class=\"su-option \"><input type=\"checkbox\" data-child ><span>费用表格</span></label><label class=\"su-option \"><input type=\"checkbox\" data-child ><span>封面草图</span></label></div><p data-result class=\"su-small su-muted\" role=\"status\">已选择 1 项演示资料。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "const all=root.querySelector('[data-all]'),children=[...root.querySelectorAll('[data-child]')];function update(){const count=children.filter(node=>node.checked).length;all.checked=count===children.length;all.indeterminate=count>0&&count<children.length;root.querySelector('[data-result]').textContent='已选择 '+count+' 项演示资料。';}all.onchange=()=>{children.forEach(node=>node.checked=all.checked);update();};children.forEach(node=>node.onchange=update);update();",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-tiles",
          "category": "checkbox",
          "title": "功能选择卡",
          "description": "卡片整体可点击，并显示选中边界。",
          "html": "<div class=\"su-checkbox-grid\"><label class=\"su-option su-option-tile\"><input type=\"checkbox\" checked><span>历史版本<small>保留近期修改记录。</small></span></label><label class=\"su-option su-option-tile\"><input type=\"checkbox\" ><span>共享链接<small>向指定成员共享。</small></span></label><label class=\"su-option su-option-tile\"><input type=\"checkbox\" ><span>自动归档<small>定期整理旧资料。</small></span></label><label class=\"su-option su-option-tile\"><input type=\"checkbox\" checked><span>变更提醒<small>追踪资料更新。</small></span></label></div><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>root.querySelector('[data-result]').textContent='已选择 '+root.querySelectorAll('input:checked').length+' 项演示功能。');",
          "tags": [],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "checkbox-tasks",
          "category": "checkbox",
          "title": "任务完成标记",
          "description": "完成项划线，并更新剩余任务数量。",
          "html": "<label class=\"su-option su-option-task\"><input type=\"checkbox\" checked><span>核对演示名称</span></label><label class=\"su-option su-option-task\"><input type=\"checkbox\" ><span>整理资料目录</span></label><label class=\"su-option su-option-task\"><input type=\"checkbox\" ><span>邀请协作成员</span></label><p data-result class=\"su-small su-muted\" role=\"status\">还有 2 项演示任务。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>{const count=root.querySelectorAll('input:not(:checked)').length;root.querySelector('[data-result]').textContent=count?'还有 '+count+' 项演示任务。':'演示任务全部完成。';});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-consent",
          "category": "checkbox",
          "title": "同意后继续",
          "description": "确认一项必要说明后再开放下一步操作。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" data-agree><span>我已了解：此页面只演示本地交互，不会创建真实账号。</span></label><button class=\"su-btn\" data-continue disabled>继续体验</button><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "const button=root.querySelector('[data-continue]');root.querySelector('[data-agree]').onchange=event=>button.disabled=!event.target.checked;button.onclick=()=>root.querySelector('[data-result]').textContent='已确认演示说明，可以继续体验。';",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-conditional",
          "category": "checkbox",
          "title": "条件设置",
          "description": "选中主选项后才显示相关的进一步设置。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" data-toggle><span>开启演示摘要</span></label><label class=\"su-field\" data-settings hidden>接收时间<input class=\"su-input\" type=\"time\" value=\"09:00\" data-time></label><p class=\"su-small su-muted\" role=\"status\" data-result>演示操作仅保存在当前预览中。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "const settings=root.querySelector('[data-settings]');root.querySelector('[data-toggle]').onchange=event=>{settings.hidden=!event.target.checked;root.querySelector('[data-result]').textContent=event.target.checked?'已开启摘要，演示时间为 '+root.querySelector('[data-time]').value+'。':'已关闭演示摘要。';};root.querySelector('[data-time]').onchange=event=>root.querySelector('[data-result]').textContent='演示摘要时间：'+event.target.value;",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-tags",
          "category": "checkbox",
          "title": "标签式多选",
          "description": "使用紧凑选项组合出多个兴趣方向。",
          "html": "<fieldset style=\"border:0;padding:0;margin:0\"><legend style=\"margin-bottom:15px;font-weight:600\">关注的演示主题</legend><div class=\"su-row\" style=\"flex-wrap:wrap\"><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"界面设计\" checked>界面设计</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"交互流程\" >交互流程</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"表单体验\" >表单体验</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"资料管理\" >资料管理</label></div></fieldset><p data-result class=\"su-small su-muted\" role=\"status\">已选择：界面设计</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>{const names=[...root.querySelectorAll('input:checked')].map(node=>node.value);root.querySelector('[data-result]').textContent=names.length?'已选择：'+names.join('、'):'暂未选择主题。';});",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-table",
          "category": "checkbox",
          "title": "表格批量选择",
          "description": "选中记录后显示可处理的数量。",
          "html": "<table class=\"su-check-table\"><caption style=\"text-align:left;font-weight:600;margin-bottom:10px\">演示资料列表</caption><thead><tr><th><input type=\"checkbox\" aria-label=\"全选演示资料\" data-all></th><th>资料名称</th><th>类型</th></tr></thead><tbody><tr><td><input type=\"checkbox\" aria-label=\"选择项目说明\" data-row></td><td>项目说明</td><td>文档</td></tr><tr><td><input type=\"checkbox\" aria-label=\"选择费用汇总\" data-row></td><td>费用汇总</td><td>表格</td></tr><tr><td><input type=\"checkbox\" aria-label=\"选择封面草图\" data-row></td><td>封面草图</td><td>图片</td></tr></tbody></table><p data-result class=\"su-small su-muted\" role=\"status\">暂未选择资料。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "const all=root.querySelector('[data-all]'),inputs=[...root.querySelectorAll('[data-row]')];function update(){const count=inputs.filter(node=>node.checked).length;all.checked=count===inputs.length;all.indeterminate=count>0&&count<inputs.length;root.querySelector('[data-result]').textContent=count?'可批量处理 '+count+' 条演示资料。':'暂未选择资料。';}all.onchange=()=>{inputs.forEach(node=>node.checked=all.checked);update();};inputs.forEach(node=>node.onchange=update);",
          "tags": [],
          "height": 330,
          "license": "MIT"
        },
        {
          "id": "checkbox-week",
          "category": "checkbox",
          "title": "重复日期",
          "description": "选择一周中的多个执行日期。",
          "html": "<fieldset style=\"border:0;padding:0;margin:0\"><legend style=\"font-weight:600;margin-bottom:14px\">演示提醒日期</legend><div class=\"su-row\" style=\"flex-wrap:wrap\"><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周一\" checked>周一</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周二\" checked>周二</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周三\" checked>周三</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周四\" checked>周四</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周五\" checked>周五</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周六\" >周六</label><label class=\"su-choice-chip\"><input type=\"checkbox\" value=\"周日\" >周日</label></div></fieldset><p data-result class=\"su-small su-muted\" role=\"status\">已选择 5 天。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>root.querySelector('[data-result]').textContent='已选择 '+root.querySelectorAll('input:checked').length+' 天。');",
          "tags": [],
          "height": 300,
          "license": "MIT"
        },
        {
          "id": "checkbox-addons",
          "category": "checkbox",
          "title": "附加服务计价",
          "description": "勾选附加项目后实时更新演示总价。",
          "html": "<label class=\"su-option \"><input type=\"checkbox\" checked disabled><span>基础整理服务 <small>演示基础费用 20 元。</small></span></label><label class=\"su-option \"><input type=\"checkbox\" data-price=\"8\"><span>增加归档空间 <small>演示费用增加 8 元。</small></span></label><label class=\"su-option \"><input type=\"checkbox\" data-price=\"12\"><span>增加协作席位 <small>演示费用增加 12 元。</small></span></label><div class=\"su-between su-panel\"><strong>演示合计</strong><strong data-total>¥ 20</strong></div><p class=\"su-small su-muted\">不会生成真实订单或扣款。</p>",
          "css": "\n.su-option{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer}.su-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--su-primary);flex:none}.su-option small{display:block;color:var(--su-muted);font-size:12px;line-height:1.6;margin-top:4px}.su-option:has(input:disabled){opacity:.55;cursor:not-allowed}.su-option-tile{border:1px solid var(--su-border);border-radius:12px;padding:15px}.su-option-tile:has(input:checked){background:var(--su-soft);border-color:var(--su-primary)}.su-option-task:has(input:checked)>span{text-decoration:line-through;color:var(--su-muted)}.su-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.su-choice-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--su-border);border-radius:999px;padding:9px 13px;cursor:pointer}.su-choice-chip:has(input:checked){border-color:var(--su-primary);background:var(--su-soft);color:var(--su-primary)}.su-choice-chip input{accent-color:var(--su-primary)}.su-check-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.su-check-table th,.su-check-table td{padding:12px;border-bottom:1px solid var(--su-border)}.su-check-table input{accent-color:var(--su-primary)}\n",
          "js": "root.addEventListener('change',()=>{const total=20+[...root.querySelectorAll('[data-price]:checked')].reduce((sum,node)=>sum+Number(node.dataset.price),0);root.querySelector('[data-total]').textContent='¥ '+total;});",
          "tags": [],
          "height": 370,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "dropdown",
      "name": "下拉菜单",
      "description": "集中常用操作，支持分组、键盘导航和外部关闭。",
      "group": "导航",
      "icon": "menu",
      "samples": [
        {
          "id": "dropdown-document",
          "category": "dropdown",
          "title": "文档操作",
          "description": "集中常用命令，方向键移动，回车执行。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">更多操作<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"文档操作\" hidden><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>编辑文档</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg>复制副本</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4\"/></svg>导出文件</button><hr><button type=\"button\" role=\"menuitem\" class=\"su-menu-danger\" data-confirm=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7m4-7v7\"/></svg>移入回收站</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-grouped",
          "category": "dropdown",
          "title": "分组菜单",
          "description": "按操作范围分组，并保留不可用项目的状态。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">工作区<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"分组菜单\" hidden><small>当前工作区</small><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg>创建项目</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg>浏览文件</button><hr><small>协作设置</small><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21v-2a8 8 0 0 1 16 0v2\"/></svg>邀请成员</button><button type=\"button\" role=\"menuitem\" disabled><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12h16m-6-6 6 6-6 6\"/></svg>转移工作区</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-profile",
          "category": "dropdown",
          "title": "账户菜单",
          "description": "头像入口结合账户摘要，适用于站点顶栏。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\"><span class=\"su-avatar\" style=\"width:26px;height:26px\">夏</span>林小夏<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"账户菜单\" hidden><div class=\"su-menu-info\"><strong>林小夏</strong><span class=\"su-small su-muted\">设计团队 · 管理员</span></div><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21v-2a8 8 0 0 1 16 0v2\"/></svg>个人资料</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg>通知偏好</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m10 3-.8 3-2.7 1L4 6l-2 3 2.1 2v3L2 16l2 3 2.5-1 2.7 1 .8 3h4l.8-3 2.7-1 2.5 1 2-3-2.1-2v-3L22 9l-2-3-2.5 1-2.7-1L14 3Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>账户设置</button><hr><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12h16m-6-6 6 6-6 6\"/></svg>退出演示账户</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-columns",
          "category": "dropdown",
          "title": "显示字段",
          "description": "多选菜单点击后保持展开，实时汇总已选字段。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">显示字段<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"显示字段\" hidden><small>选择列表中显示的字段</small><button type=\"button\" role=\"menuitemcheckbox\" aria-checked=\"true\">项目名称</button><button type=\"button\" role=\"menuitemcheckbox\" aria-checked=\"true\">负责人</button><button type=\"button\" role=\"menuitemcheckbox\" aria-checked=\"false\">更新时间</button><button type=\"button\" role=\"menuitemcheckbox\" aria-checked=\"false\">使用空间</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-sort",
          "category": "dropdown",
          "title": "排序方式",
          "description": "互斥选项带选中标记，选择后自动收起。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">排序<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"排序方式\" hidden><button type=\"button\" role=\"menuitemradio\" aria-checked=\"true\">最近更新</button><button type=\"button\" role=\"menuitemradio\" aria-checked=\"false\">创建时间</button><button type=\"button\" role=\"menuitemradio\" aria-checked=\"false\">名称升序</button><button type=\"button\" role=\"menuitemradio\" aria-checked=\"false\">使用空间</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-split",
          "category": "dropdown",
          "title": "拆分操作",
          "description": "主按钮直接保存，附加菜单提供另存与导出。",
          "html": "<div class=\"su-menu-host\"><div class=\"su-menu-split\"><button type=\"button\" class=\"su-btn\" data-primary-action>保存文档</button><button type=\"button\" class=\"su-btn su-menu-trigger\" aria-label=\"更多保存方式\" aria-haspopup=\"menu\" aria-expanded=\"false\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button></div><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"拆分操作\" hidden><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg>另存为新版本</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>保存并归档</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4\"/></svg>导出到本机</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-search",
          "category": "dropdown",
          "title": "可搜索命令",
          "description": "菜单内筛选命令，并显示无匹配的空状态。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">查找命令<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"可搜索命令\" hidden><div class=\"su-menu-query\"><label class=\"su-small su-muted\" for=\"su-command-query\">搜索命令</label><input id=\"su-command-query\" class=\"su-input\" placeholder=\"输入名称\"></div><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg>创建页面</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/></svg>搜索文件</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21v-2a8 8 0 0 1 16 0v2\"/></svg>管理成员</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4\"/></svg>通知设置</button><p class=\"su-menu-empty\" hidden>没有匹配的命令</p></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-context",
          "category": "dropdown",
          "title": "右键菜单",
          "description": "支持鼠标右键，同时提供可用键盘触发的入口。",
          "html": "<div class=\"su-context-pad\" data-context>演示文件夹<br><span class=\"su-small su-muted\">右键打开操作菜单，也可使用下方按钮</span></div><div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">打开文件菜单<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"右键菜单\" hidden><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>打开演示文件</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg>复制文件路径</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4\"/></svg>下载文件</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-workspace",
          "category": "dropdown",
          "title": "切换空间",
          "description": "按空间展示成员数，帮助辨认相似名称。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">设计工作室<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"切换空间\" hidden><button type=\"button\" role=\"menuitemradio\" aria-checked=\"true\"><span class=\"su-avatar\" style=\"width:26px;height:26px\">设</span>设计工作室 · 8 位成员</button><button type=\"button\" role=\"menuitemradio\" aria-checked=\"false\"><span class=\"su-avatar\" style=\"width:26px;height:26px\">研</span>产品研发组 · 12 位成员</button><button type=\"button\" role=\"menuitemradio\" aria-checked=\"false\"><span class=\"su-avatar\" style=\"width:26px;height:26px\">我</span>我的个人空间 · 仅自己</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-export",
          "category": "dropdown",
          "title": "导出格式",
          "description": "在一个菜单中提供不同文件格式及清晰的用途说明。",
          "html": "<div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">导出数据<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"导出格式\" hidden><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg>表格文件 · CSV</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18\"/></svg>结构数据 · JSON</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>纯文本 · TXT</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        },
        {
          "id": "dropdown-row",
          "category": "dropdown",
          "title": "列表行操作",
          "description": "紧凑入口适配数据行，反馈区确认当前执行对象。",
          "html": "<div class=\"su-panel su-between\"><span><strong>十月项目报告</strong><br><span class=\"su-small su-muted\">今天 09:30 更新 · 林小夏</span></span><span class=\"su-badge\">已发布</span></div><div class=\"su-menu-host\"><button type=\"button\" class=\"su-btn su-btn-secondary su-menu-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">操作<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><div class=\"su-menu-pop\" role=\"menu\" aria-label=\"列表行操作\" hidden><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg>查看月度报告</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg>复制报告链接</button><button type=\"button\" role=\"menuitem\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg>收藏月度报告</button></div></div><p class=\"su-menu-feedback\" role=\"status\">选择菜单中的操作，结果会显示在这里。</p>",
          "css": "\n.su-menu-host{position:relative;align-self:flex-start}.su-menu-pop{position:fixed;z-index:20;width:228px;padding:6px;background:var(--su-surface);border:1px solid var(--su-border);border-radius:12px;box-shadow:0 12px 35px #18213d20;overflow:auto}.su-menu-pop [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 9px;background:transparent;color:var(--su-text);border:0;border-radius:6px;text-align:left}.su-menu-pop [role^=menuitem]:hover,.su-menu-pop [role^=menuitem]:focus-visible{background:var(--su-soft);color:var(--su-primary)}.su-menu-pop [role^=menuitem]:disabled{opacity:.4}.su-menu-pop small{display:block;padding:6px 9px;color:var(--su-muted);font-size:11px}.su-menu-pop hr{margin:5px 0}.su-menu-pop .su-menu-danger{color:var(--su-danger)}.su-menu-pop [aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--su-primary)}.su-menu-info{padding:10px;border-bottom:1px solid var(--su-border);margin-bottom:5px}.su-menu-info strong{display:block}.su-menu-host .su-menu-trigger svg:last-child{transform:rotate(90deg)}.su-menu-split{display:inline-flex}.su-menu-split>.su-btn:first-child{border-radius:8px 0 0 8px}.su-menu-split>.su-menu-trigger{border-radius:0 8px 8px 0;border-left-color:#ffffff44;padding-inline:10px}.su-menu-query{padding:5px}.su-menu-empty{padding:12px;color:var(--su-muted);text-align:center}.su-context-pad{border:1px dashed var(--su-border);border-radius:10px;padding:22px;text-align:center;background:var(--su-bg)}.su-menu-feedback{min-height:24px;color:var(--su-muted);font-size:12px}",
          "js": "\nconst host=root.querySelector('.su-menu-host'),trigger=root.querySelector('.su-menu-trigger'),menu=root.querySelector('.su-menu-pop'),feedback=root.querySelector('.su-menu-feedback');\nconst items=()=>[...menu.querySelectorAll('[role^=\"menuitem\"]')].filter(item=>!item.disabled&&!item.hidden);\nfunction place(point){const bounds=trigger.getBoundingClientRect(),width=Math.min(228,innerWidth-24);menu.style.width=width+'px';const x=point?point.x:bounds.left;menu.style.left=Math.max(12,Math.min(x,innerWidth-width-12))+'px';const desired=point?point.y:bounds.bottom+6;const height=Math.min(menu.scrollHeight,260);const y=desired+height>innerHeight-10?Math.max(10,(point?point.y:bounds.top)-height-6):desired;menu.style.top=y+'px';menu.style.maxHeight=Math.max(90,innerHeight-y-10)+'px'}\nfunction open(point){menu.hidden=false;trigger.setAttribute('aria-expanded','true');place(point);const search=menu.querySelector('input');(search||items()[0])?.focus()}\nfunction close(restore=false){menu.hidden=true;trigger.setAttribute('aria-expanded','false');if(restore)trigger.focus()}\ntrigger.addEventListener('click',()=>menu.hidden?open():close());\ntrigger.addEventListener('keydown',event=>{if(event.key==='ArrowDown'){event.preventDefault();open()}});\nmenu.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close(true);return}if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key)||event.target.matches('input'))return;event.preventDefault();const list=items();const index=list.indexOf(document.activeElement);const next=event.key==='Home'?0:event.key==='End'?list.length-1:(index+(event.key==='ArrowUp'?-1:1)+list.length)%list.length;list[next]?.focus()});\nmenu.addEventListener('click',event=>{const item=event.target.closest('[role^=\"menuitem\"]');if(!item||item.disabled)return;const role=item.getAttribute('role');if(role==='menuitemcheckbox'){item.setAttribute('aria-checked',String(item.getAttribute('aria-checked')!=='true'));feedback.textContent='显示字段：'+[...menu.querySelectorAll('[aria-checked=true]')].map(el=>el.textContent.trim()).join('、');return}if(role==='menuitemradio'){menu.querySelectorAll('[role=menuitemradio]').forEach(el=>el.setAttribute('aria-checked',String(el===item)))}feedback.textContent=item.dataset.message||('已选择：'+item.textContent.trim());if(item.dataset.confirm==='true'){feedback.textContent='演示文件已移入回收站，可重新打开菜单还原。';item.textContent='还原文件';item.dataset.confirm='false';item.dataset.message='文件已还原'}close(true)});\ndocument.addEventListener('pointerdown',event=>{if(!host.contains(event.target))close()});\ndocument.addEventListener('keydown',event=>{if(event.key==='Tab'&&!menu.hidden)setTimeout(()=>{if(!host.contains(document.activeElement))close()},0)});\nwindow.addEventListener('resize',()=>{if(!menu.hidden)place()});\nroot.querySelector('[data-context]')?.addEventListener('contextmenu',event=>{event.preventDefault();open({x:event.clientX,y:event.clientY})});\nmenu.querySelector('input')?.addEventListener('input',event=>{let count=0;menu.querySelectorAll('[role^=menuitem]').forEach(item=>{item.hidden=!item.textContent.includes(event.target.value.trim());if(!item.hidden)count++});menu.querySelector('.su-menu-empty').hidden=count>0;place()});\nroot.querySelector('[data-primary-action]')?.addEventListener('click',()=>{feedback.textContent='演示文档已保存'})",
          "tags": [
            "键盘操作",
            "点击外部关闭"
          ],
          "height": 340,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "pagination",
      "name": "分页",
      "description": "不同数据浏览场景中的页码、追加与位置反馈。",
      "group": "导航",
      "icon": "arrow",
      "samples": [
        {
          "id": "pagination-numbered",
          "category": "pagination",
          "title": "标准页码",
          "description": "页码、前后页和边界禁用组成完整的分页。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"标准页码\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"numbered\",total=15;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-compact",
          "category": "pagination",
          "title": "紧凑分页",
          "description": "只保留前后翻页和当前位置，适合窄容器。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"紧凑分页\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"compact\",total=24;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-summary",
          "category": "pagination",
          "title": "记录范围",
          "description": "将当前记录范围与总数一起展示。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"记录范围\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"summary\",total=47;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-ellipsis",
          "category": "pagination",
          "title": "省略页码",
          "description": "大量页码折叠为首尾与相邻页，点击后重新计算。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"省略页码\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"ellipsis\",total=120;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-mobile",
          "category": "pagination",
          "title": "移动端翻页",
          "description": "两端按钮留足点击空间，页码居中。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"移动端翻页\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"mobile\",total=24;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-size",
          "category": "pagination",
          "title": "每页条数",
          "description": "调整每页数量会回到首页，并更新总页数。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"每页条数\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"size\",total=36;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-jump",
          "category": "pagination",
          "title": "页码跳转",
          "description": "输入页码后确认跳转，阻止越界和空值。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"页码跳转\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"jump\",total=60;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-load-more",
          "category": "pagination",
          "title": "手动加载更多",
          "description": "按批追加本地演示记录，全部显示后禁用按钮。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"手动加载更多\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"load\",total=12;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 420,
          "license": "MIT"
        },
        {
          "id": "pagination-cursor",
          "category": "pagination",
          "title": "时间顺序翻页",
          "description": "用较新和更早表达记录顺序，隐藏无意义的页码。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"时间顺序翻页\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"cursor\",total=18;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-dots",
          "category": "pagination",
          "title": "轮播指示点",
          "description": "圆点切换指南卡片，读屏可获知当前位置。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"轮播指示点\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"dots\",total=12;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-footer",
          "category": "pagination",
          "title": "数据表底栏",
          "description": "展示选中状态、总量和分页，适合作为数据表底部。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav su-page-footer\" aria-label=\"数据表底栏\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"footer\",total=12;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "pagination-progressive",
          "category": "pagination",
          "title": "加载进度",
          "description": "追加记录同时更新加载比例，清楚表达剩余内容。",
          "html": "<div class=\"su-stack\"><div data-page-content></div><nav class=\"su-page-nav \" aria-label=\"加载进度\"></nav><p class=\"su-page-status\" role=\"status\"></p></div>",
          "css": ".su-page-items{max-height:210px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--su-border);border-radius:9px;overflow:hidden}.su-page-items li{padding:8px 12px;border-bottom:1px solid var(--su-border);display:flex;justify-content:space-between;gap:10px}.su-page-items li:last-child{border-bottom:0}.su-page-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.su-page-nav button{min-width:35px;min-height:36px;padding:5px 9px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav button[aria-current=page]{background:var(--su-primary);border-color:var(--su-primary);color:var(--su-on-primary)}.su-page-nav input{width:58px;min-height:36px;padding:5px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav select{padding:6px;border:1px solid var(--su-border);border-radius:7px;background:var(--su-surface);color:var(--su-text)}.su-page-nav .su-page-dot{border-radius:50%;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;font-size:0}.su-page-nav .su-page-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:auto}.su-page-nav .su-page-round{border-radius:50%;padding:0}.su-page-nav .su-page-label{padding-inline:8px;color:var(--su-muted);font-size:12px}.su-page-nav .su-page-mobile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px}.su-page-nav .su-page-bar{width:100%;height:5px;border:0;border-radius:3px}.su-page-footer{border-top:1px solid var(--su-border);padding-top:12px}.su-page-carousel{padding:22px;background:var(--su-soft);border-radius:10px;text-align:center;min-height:95px;display:grid;place-content:center;gap:5px}.su-page-status{color:var(--su-muted);font-size:12px;min-height:20px}.su-page-nav button:disabled{opacity:.4}",
          "js": "\nconst mode=\"infinite\",total=9;let page=mode==='ellipsis'?8:1,pageSize=3,loaded=3;const content=root.querySelector('[data-page-content]'),nav=root.querySelector('nav'),status=root.querySelector('[role=status]');\nfunction button(text,target,disabled=false,active=false,extra=''){return '<button type=\"button\" data-page=\"'+target+'\" '+(disabled?'disabled ':'')+(active?'aria-current=\"page\" ':'')+extra+'>'+text+'</button>'}\nfunction render(){const pages=Math.ceil(total/pageSize);page=Math.max(1,Math.min(page,pages));const start=(page-1)*pageSize+1,end=Math.min(total,page*pageSize);if(mode==='dots'){content.innerHTML='<div class=\"su-page-carousel\"><strong>'+['准备工作','确定方向','完善细节','正式发布'][page-1]+'</strong><span class=\"su-small su-muted\">项目指南第 '+page+' 张</span></div>'}else{const first=mode==='load'||mode==='infinite'?1:start,last=mode==='load'||mode==='infinite'?loaded:end;content.innerHTML='<ul class=\"su-page-items\">'+Array.from({length:last-first+1},(_,index)=>'<li><span>演示项目 '+String(first+index).padStart(2,'0')+'</span><span class=\"su-small su-muted\">已更新</span></li>').join('')+'</ul>'}\nlet html='';if(mode==='compact'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='summary'){html='<span class=\"su-page-label\">第 '+start+'—'+end+' 项，共 '+total+' 项</span>'+button('上一页',page-1,page===1)+button('下一页',page+1,page===pages)}else if(mode==='mobile'){html='<div class=\"su-page-mobile\">'+button('上一页',page-1,page===1)+'<span class=\"su-small\">第 '+page+' / '+pages+' 页</span>'+button('下一页',page+1,page===pages)+'</div>'}else if(mode==='size'){html='<label class=\"su-small\">每页 <select aria-label=\"每页条数\">'+[3,6,12].map(size=>'<option '+(size===pageSize?'selected':'')+' value=\"'+size+'\">'+size+' 条</option>').join('')+'</select></label>'+button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)}else if(mode==='jump'){html=button('上一页',page-1,page===1)+'<span class=\"su-page-label\">'+page+' / '+pages+'</span>'+button('下一页',page+1,page===pages)+'<label class=\"su-small\">跳到 <input type=\"number\" min=\"1\" max=\"'+pages+'\" value=\"'+page+'\" aria-label=\"跳转页码\"></label><button type=\"button\" data-jump>确定</button>'}else if(mode==='load'||mode==='infinite'){html=(mode==='infinite'?'<progress class=\"su-page-bar\" value=\"'+loaded+'\" max=\"'+total+'\" aria-label=\"已加载比例\"></progress>':'')+'<span class=\"su-page-label\">已加载 '+loaded+' / '+total+' 项</span><button type=\"button\" data-load '+(loaded>=total?'disabled':'')+'>'+(loaded>=total?'全部加载完毕':'再加载 3 项')+'</button>'}else if(mode==='cursor'){html=button('较新的记录',page-1,page===1)+'<span class=\"su-page-label\">按更新时间查看</span>'+button('更早的记录',page+1,page===pages)}else if(mode==='dots'){html=Array.from({length:pages},(_,index)=>button('第 '+(index+1)+' 张',index+1,false,page===index+1,'class=\"su-page-dot\" aria-label=\"第 '+(index+1)+' 张\"')).join('')}else{html=button(mode==='round'?'‹':'上一页',page-1,page===1,false,mode==='round'?'class=\"su-page-round\" aria-label=\"上一页\"':'');const show=mode==='ellipsis'?[1,page-1,page,page+1,pages]:Array.from({length:pages},(_,index)=>index+1);[...new Set(show.filter(value=>value>0&&value<=pages))].sort((a,b)=>a-b).forEach((value,index,array)=>{if(index&&value-array[index-1]>1)html+='<span class=\"su-page-label\" aria-hidden=\"true\">…</span>';html+=button(value,value,false,value===page,mode==='round'?'class=\"su-page-round\"':'')});html+=button(mode==='round'?'›':'下一页',page+1,page===pages,false,mode==='round'?'class=\"su-page-round\" aria-label=\"下一页\"':'');if(mode==='footer')html='<span class=\"su-page-label\">已选 0 项，共 '+total+' 项</span>'+html}\nnav.innerHTML=html;status.textContent=mode==='load'||mode==='infinite'?'当前展示 '+loaded+' 个演示项目':mode==='dots'?'当前为第 '+page+' 张指南':'当前为第 '+page+' 页，展示 '+start+'—'+end+' 项'}\nnav.addEventListener('click',event=>{const button=event.target.closest('button');if(!button||button.disabled)return;if(button.hasAttribute('data-load')){loaded=Math.min(total,loaded+3)}else if(button.hasAttribute('data-jump')){const field=nav.querySelector('input');if(!field.checkValidity()){field.reportValidity();return}page=Number(field.value)}else page=Number(button.dataset.page);render();const current=nav.querySelector('[aria-current=page]');if(current)current.focus({preventScroll:true})});nav.addEventListener('change',event=>{if(event.target.matches('select')){pageSize=Number(event.target.value);page=1;render()}});nav.addEventListener('keydown',event=>{if(event.target.matches('input')&&event.key==='Enter'){event.preventDefault();nav.querySelector('[data-jump]').click()}});render();",
          "tags": [
            "分页",
            "数据切换"
          ],
          "height": 420,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "progress",
      "name": "进度",
      "description": "确定比例、分段目标、流程与不确定状态。",
      "group": "反馈",
      "icon": "grid",
      "samples": [
        {
          "id": "progress-basic",
          "category": "progress",
          "title": "标准进度条",
          "description": "原生进度条配合数值说明，按钮演示推进与重置。",
          "html": "<div class=\"su-between\"><strong>资料完善度</strong><output>40%</output></div><progress class=\"su-progress\" value=\"40\" max=\"100\" aria-label=\"资料完善度\"></progress><div class=\"su-row\"><button type=\"button\" class=\"su-btn\" data-add>完成一项</button><button type=\"button\" class=\"su-btn su-btn-secondary\" data-reset>重置</button></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "const meter=root.querySelector('progress'),out=root.querySelector('output');function set(value){meter.value=value;out.textContent=value+'%';root.querySelector('[data-add]').disabled=value===100}root.querySelector('[data-add]').addEventListener('click',()=>set(Math.min(100,meter.value+20)));root.querySelector('[data-reset]').addEventListener('click',()=>set(0))",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-segments",
          "category": "progress",
          "title": "分段目标",
          "description": "分段填充适合可数目标，明确表示完成了几项。",
          "html": "<div class=\"su-between\"><strong>本周阅读</strong><output>3 / 7 天</output></div><div class=\"su-progress-parts\" role=\"progressbar\" aria-label=\"阅读天数\" aria-valuemin=\"0\" aria-valuemax=\"7\" aria-valuenow=\"3\"><span data-done=\"true\"></span><span data-done=\"true\"></span><span data-done=\"true\"></span><span data-done=\"false\"></span><span data-done=\"false\"></span><span data-done=\"false\"></span><span data-done=\"false\"></span></div><div class=\"su-row\"><button class=\"su-btn\" type=\"button\" data-add>记录一天</button><button class=\"su-btn su-btn-secondary\" type=\"button\" data-reset>重新开始</button></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "let value=3;function render(){root.querySelectorAll('.su-progress-parts span').forEach((span,index)=>span.dataset.done=index<value);root.querySelector('[role=progressbar]').setAttribute('aria-valuenow',value);root.querySelector('output').textContent=value+' / 7 天';root.querySelector('[data-add]').disabled=value===7}root.querySelector('[data-add]').addEventListener('click',()=>{value=Math.min(7,value+1);render()});root.querySelector('[data-reset]').addEventListener('click',()=>{value=0;render()})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-ring",
          "category": "progress",
          "title": "环形进度",
          "description": "环形图与输入滑块绑定，数值可被读屏读取。",
          "html": "<div class=\"su-row\"><div class=\"su-progress-ring\"><svg viewBox=\"0 0 110 110\" aria-hidden=\"true\"><circle cx=\"55\" cy=\"55\" r=\"46\"></circle><circle cx=\"55\" cy=\"55\" r=\"46\" style=\"stroke-dashoffset:115.6\"></circle></svg><output>60%</output></div><div class=\"su-stack\" style=\"flex:1\"><label for=\"su-ring-value\">专注目标</label><input id=\"su-ring-value\" class=\"su-progress-range\" type=\"range\" min=\"0\" max=\"100\" value=\"60\"><span class=\"su-small su-muted\">拖动调整完成比例</span></div></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "root.querySelector('input').addEventListener('input',event=>{const value=Number(event.target.value);root.querySelector('output').textContent=value+'%';root.querySelector('circle:last-child').style.strokeDashoffset=289*(1-value/100)})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-steps",
          "category": "progress",
          "title": "流程步骤",
          "description": "当前步骤与已完成步骤分明，支持上一步和下一步。",
          "html": "<ol class=\"su-progress-step\"><li data-number=\"1\" data-done=\"true\" aria-current=\"step\">基本资料</li><li data-number=\"2\" data-done=\"false\" >选择方案</li><li data-number=\"3\" data-done=\"false\" >检查信息</li><li data-number=\"4\" data-done=\"false\" >完成创建</li></ol><p class=\"su-progress-feedback\" role=\"status\">当前：基本资料</p><div class=\"su-row\"><button type=\"button\" class=\"su-btn su-btn-secondary\" data-prev disabled>上一步</button><button type=\"button\" class=\"su-btn\" data-next>下一步</button></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "let step=0;const list=[...root.querySelectorAll('li')];function render(){list.forEach((item,index)=>{item.dataset.done=index<=step;if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current')});root.querySelector('[role=status]').textContent='当前：'+list[step].textContent;root.querySelector('[data-prev]').disabled=step===0;root.querySelector('[data-next]').disabled=step===list.length-1}root.querySelector('[data-prev]').addEventListener('click',()=>{step--;render()});root.querySelector('[data-next]').addEventListener('click',()=>{step++;render()})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-upload",
          "category": "progress",
          "title": "可暂停上传",
          "description": "本地模拟上传过程，支持暂停、继续与重新开始。",
          "html": "<div class=\"su-progress-file\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg><div><strong>设计文档.zip</strong><p class=\"su-small su-muted\">演示文件 · 20 M</p></div></div><progress class=\"su-progress\" value=\"0\" max=\"100\" aria-label=\"上传进度\"></progress><p class=\"su-progress-feedback\" role=\"status\">等待开始</p><div class=\"su-row\"><button type=\"button\" class=\"su-btn\" data-toggle>开始上传</button><button type=\"button\" class=\"su-btn su-btn-secondary\" data-reset>重置</button></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "let value=0,timer=null;const meter=root.querySelector('progress'),status=root.querySelector('[role=status]'),toggle=root.querySelector('[data-toggle]');function pause(){clearInterval(timer);timer=null}function update(){meter.value=value;status.textContent=value===100?'上传完成（本地演示）':'已上传 '+value+'%';toggle.textContent=value===100?'已完成':timer?'暂停上传':'继续上传';toggle.disabled=value===100}toggle.addEventListener('click',()=>{if(timer){pause();update();return}timer=setInterval(()=>{value=Math.min(100,value+5);if(value===100)pause();update()},250);update()});root.querySelector('[data-reset]').addEventListener('click',()=>{pause();value=0;update();status.textContent='等待开始';toggle.textContent='开始上传'});window.addEventListener('pagehide',pause)",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-allocation",
          "category": "progress",
          "title": "空间分配",
          "description": "多个数据段共享一个总量，并提供明确图例。",
          "html": "<div class=\"su-between\"><strong>存储空间</strong><output>已用 70 / 100 G</output></div><div class=\"su-progress-stack\" role=\"img\" aria-label=\"文件 35 G，图片 25 G，其他 10 G\"><span style=\"width:35%\"></span><span style=\"width:25%\"></span><span style=\"width:10%\"></span></div><div class=\"su-row su-small\"><span>● 文件 35 G</span><span style=\"color:var(--su-success)\">● 图片 25 G</span><span style=\"color:var(--su-warning)\">● 其他 10 G</span></div><button type=\"button\" class=\"su-btn su-btn-secondary\" style=\"align-self:flex-start\">清理其他文件</button>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "let cleaned=false;root.querySelector('button').addEventListener('click',event=>{cleaned=!cleaned;root.querySelector('.su-progress-stack span:last-child').style.width=cleaned?'0%':'10%';root.querySelector('output').textContent='已用 '+(cleaned?60:70)+' / 100 G';root.querySelector('[role=img]').setAttribute('aria-label','文件 35 G，图片 25 G，其他 '+(cleaned?0:10)+' G');root.querySelector('.su-row span:last-child').textContent='● 其他 '+(cleaned?0:10)+' G';event.target.textContent=cleaned?'恢复演示数据':'清理其他文件'})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-tasks",
          "category": "progress",
          "title": "多个任务",
          "description": "每条任务独立展示进度，批量推进后汇总完成数量。",
          "html": "<div class=\"su-stack\"><div><div class=\"su-between su-small\"><label for=\"su-task-0\">图标整理</label><output>80%</output></div><progress id=\"su-task-0\" class=\"su-progress\" max=\"100\" value=\"80\"></progress></div><div><div class=\"su-between su-small\"><label for=\"su-task-1\">交互检查</label><output>40%</output></div><progress id=\"su-task-1\" class=\"su-progress\" max=\"100\" value=\"40\"></progress></div><div><div class=\"su-between su-small\"><label for=\"su-task-2\">说明撰写</label><output>20%</output></div><progress id=\"su-task-2\" class=\"su-progress\" max=\"100\" value=\"20\"></progress></div></div><div class=\"su-between\"><button type=\"button\" class=\"su-btn\">推进全部</button><span class=\"su-progress-feedback\" role=\"status\">0 / 3 项完成</span></div>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "root.querySelector('button').addEventListener('click',event=>{const meters=[...root.querySelectorAll('progress')];meters.forEach(meter=>{meter.value=Math.min(100,meter.value+20);meter.previousElementSibling.querySelector('output').textContent=meter.value+'%'});const done=meters.filter(meter=>meter.value===100).length;root.querySelector('[role=status]').textContent=done+' / 3 项完成';event.target.disabled=done===3})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-countdown",
          "category": "progress",
          "title": "限时倒计时",
          "description": "时间型进度可暂停和重置，避免无人操作自动倒数。",
          "html": "<div class=\"su-between\"><strong>短暂休息</strong><output>10 秒</output></div><progress class=\"su-progress\" max=\"10\" value=\"10\" aria-label=\"剩余休息时间\"></progress><div class=\"su-row\"><button type=\"button\" class=\"su-btn\" data-toggle>开始计时</button><button type=\"button\" class=\"su-btn su-btn-secondary\" data-reset>重置</button></div><p class=\"su-progress-feedback\" role=\"status\">点击开始后倒数。</p>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "let value=10,timer=null;const button=root.querySelector('[data-toggle]');function stop(){clearInterval(timer);timer=null}function render(){root.querySelector('progress').value=value;root.querySelector('output').textContent=value+' 秒';button.textContent=timer?'暂停计时':value===0?'已结束':'继续计时';button.disabled=value===0;root.querySelector('[role=status]').textContent=value===0?'休息结束，可以继续工作。':timer?'倒计时进行中。':'计时已暂停。'}button.addEventListener('click',()=>{if(timer){stop();render();return}timer=setInterval(()=>{value--;if(value===0)stop();render()},1000);render()});root.querySelector('[data-reset]').addEventListener('click',()=>{stop();value=10;render();button.textContent='开始计时'});window.addEventListener('pagehide',stop)",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-retry",
          "category": "progress",
          "title": "失败与重试",
          "description": "保留失败位置与原因，通过重试完成剩余步骤。",
          "html": "<div class=\"su-between\"><strong>导入记录</strong><output>60%</output></div><progress class=\"su-progress su-progress-error\" value=\"60\" max=\"100\" aria-label=\"导入进度\" style=\"accent-color:var(--su-danger)\"></progress><p class=\"su-progress-feedback\" role=\"status\" style=\"color:var(--su-danger)\">第 4 条记录格式有误。演示重试将跳过该记录。</p><button type=\"button\" class=\"su-btn su-btn-secondary\" style=\"align-self:flex-start\">跳过并重试</button>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "root.querySelector('button').addEventListener('click',event=>{root.querySelector('progress').value=100;root.querySelector('progress').classList.remove('su-progress-error');root.querySelector('output').textContent='100%';root.querySelector('[role=status]').textContent='导入完成，已跳过 1 条演示记录。';root.querySelector('[role=status]').style.color='var(--su-success)';event.target.disabled=true;event.target.textContent='已完成'})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-indeterminate",
          "category": "progress",
          "title": "不确定进度",
          "description": "无法估算时长时隐藏百分比，完成后替换为明确结果。",
          "html": "<div class=\"su-between\"><strong>正在整理目录</strong><span class=\"su-badge\">演示中</span></div><div class=\"su-progress-loader\" role=\"progressbar\" aria-label=\"正在整理目录\"><span></span></div><p class=\"su-progress-feedback\" role=\"status\">暂时无法估算剩余时间。</p><button type=\"button\" class=\"su-btn su-btn-secondary\" style=\"align-self:flex-start\">模拟完成</button>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "root.querySelector('button').addEventListener('click',event=>{const meter=root.querySelector('[role=progressbar]');meter.setAttribute('aria-valuemin','0');meter.setAttribute('aria-valuemax','100');meter.setAttribute('aria-valuenow','100');meter.querySelector('span').style.cssText='animation:none;transform:none;width:100%;background:var(--su-success)';root.querySelector('.su-badge').textContent='已完成';root.querySelector('[role=status]').textContent='目录整理完毕，可以继续。';event.target.disabled=true;event.target.textContent='已完成'})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "progress-milestones",
          "category": "progress",
          "title": "里程碑进度",
          "description": "明确显示目标阈值，滑块调整后同步当前阶段。",
          "html": "<div class=\"su-between\"><strong>年度阅读目标</strong><output>24 / 60 本</output></div><progress class=\"su-progress\" value=\"24\" max=\"60\" aria-label=\"阅读目标进度\"></progress><div class=\"su-between su-small su-muted\"><span>起步 0</span><span>习惯 20</span><span>进阶 40</span><span>达成 60</span></div><label for=\"su-books\" class=\"su-small\">已读数量</label><input id=\"su-books\" class=\"su-progress-range\" type=\"range\" min=\"0\" max=\"60\" value=\"24\"><p class=\"su-progress-feedback\" role=\"status\">当前阶段：习惯养成</p>",
          "css": ".su-progress{width:100%;height:9px;display:block;border:0;border-radius:10px;overflow:hidden;background:var(--su-border);accent-color:var(--su-primary)}.su-progress::-webkit-progress-bar{background:var(--su-border);border-radius:10px}.su-progress::-webkit-progress-value{background:var(--su-primary);border-radius:10px}.su-progress::-moz-progress-bar{background:var(--su-primary);border-radius:10px}.su-progress-error::-webkit-progress-value{background:var(--su-danger)}.su-progress-error::-moz-progress-bar{background:var(--su-danger)}.su-progress-track{height:10px;border-radius:8px;background:var(--su-border);overflow:hidden}.su-progress-fill{height:100%;background:var(--su-primary);transition:width .25s}.su-progress-parts{display:flex;gap:4px}.su-progress-parts span{height:10px;flex:1;border-radius:3px;background:var(--su-border)}.su-progress-parts span[data-done=true]{background:var(--su-primary)}.su-progress-ring{width:116px;position:relative;flex-shrink:0}.su-progress-ring svg{display:block;width:116px;height:116px;transform:rotate(-90deg)}.su-progress-ring circle{fill:none;stroke:var(--su-border);stroke-width:8}.su-progress-ring circle:last-child{stroke:var(--su-primary);stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s}.su-progress-ring output{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:650}.su-progress-step{display:flex;gap:6px;padding:0;margin:0;list-style:none}.su-progress-step li{flex:1;text-align:center;font-size:12px;color:var(--su-muted)}.su-progress-step li::before{content:attr(data-number);width:28px;height:28px;display:grid;place-items:center;background:var(--su-bg);border:1px solid var(--su-border);border-radius:50%;margin:0 auto 6px}.su-progress-step li[data-done=true]{color:var(--su-primary)}.su-progress-step li[data-done=true]::before{background:var(--su-primary);color:var(--su-on-primary);border-color:var(--su-primary)}.su-progress-stack{display:flex;height:16px;overflow:hidden;border-radius:8px;background:var(--su-border)}.su-progress-stack span{transition:width .25s}.su-progress-stack span:nth-child(1){background:var(--su-primary)}.su-progress-stack span:nth-child(2){background:var(--su-success)}.su-progress-stack span:nth-child(3){background:var(--su-warning)}.su-progress-loader{height:6px;background:var(--su-border);border-radius:9px;overflow:hidden}.su-progress-loader span{display:block;width:35%;height:100%;background:var(--su-primary);animation:su-progress-slide 1.5s ease-in-out infinite}.su-progress-range{width:100%;accent-color:var(--su-primary)}@keyframes su-progress-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}.su-progress-file{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.su-progress-file>svg{color:var(--su-primary)}.su-progress-feedback{font-size:12px;color:var(--su-muted);min-height:20px}",
          "js": "root.querySelector('input').addEventListener('input',event=>{const value=Number(event.target.value);root.querySelector('progress').value=value;root.querySelector('output').textContent=value+' / 60 本';root.querySelector('[role=status]').textContent='当前阶段：'+(value>=60?'目标达成':value>=40?'持续进阶':value>=20?'习惯养成':'开始阅读')})",
          "tags": [
            "进度",
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "radio",
      "name": "单选框",
      "description": "用可访问的原生表单完成单一选择。",
      "group": "表单",
      "icon": "check",
      "samples": [
        {
          "id": "radio-basic",
          "category": "radio",
          "title": "纵向单选",
          "description": "原生单选组支持方向键切换，并同步选择结果。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>通知频率</legend><div class=\"su-radio-options \"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"实时通知\" checked ><span class=\"su-radio-detail\"><strong>实时通知</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"每天汇总\"  ><span class=\"su-radio-detail\"><strong>每天汇总</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"每周汇总\"  ><span class=\"su-radio-detail\"><strong>每周汇总</strong></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-inline",
          "category": "radio",
          "title": "行内选项",
          "description": "少量短选项横向排布，窄屏自动换行。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>界面密度</legend><div class=\"su-radio-options su-radio-inline\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"宽松\" checked ><span class=\"su-radio-detail\"><strong>宽松</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"适中\"  ><span class=\"su-radio-detail\"><strong>适中</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"紧凑\"  ><span class=\"su-radio-detail\"><strong>紧凑</strong></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-description",
          "category": "radio",
          "title": "带说明的选项",
          "description": "主次文案清晰，整行作为点击区域。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>数据保存位置</legend><div class=\"su-radio-options su-radio-list\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"本机保存\" checked ><span class=\"su-radio-detail\"><strong>仅保存在本机</strong><small>适合个人草稿，离线也可继续使用。</small></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"团队同步\"  ><span class=\"su-radio-detail\"><strong>同步到团队空间</strong><small>成员可共同查看与编辑演示内容。</small></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-tiles",
          "category": "radio",
          "title": "图文选项卡",
          "description": "图标强调不同用途，选中状态同时使用边框和底色。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>选择项目类型</legend><div class=\"su-radio-options su-radio-card su-radio-grid\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"文档\" checked ><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg><span class=\"su-radio-detail\"><strong>文档</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"图册\"  ><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg><span class=\"su-radio-detail\"><strong>图册</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"站点\"  ><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\"/><path d=\"M3 12h18M5 6h14M5 18h14\"/></svg><span class=\"su-radio-detail\"><strong>站点</strong></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-billing",
          "category": "radio",
          "title": "价格方案",
          "description": "同时展示价格、额度和推荐理由，整卡可选。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>选择订阅方案</legend><div class=\"su-radio-options su-radio-card\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"个人版 ¥12 / 月\" checked ><span class=\"su-radio-detail\"><strong>个人版</strong><small>1 位成员 · 20 G 空间</small></span><span class=\"su-radio-price\">¥12<small>/月</small></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"团队版 ¥36 / 月\"  ><span class=\"su-radio-detail\"><strong>团队版</strong><small>5 位成员 · 100 G 空间</small></span><span class=\"su-radio-price\">¥36<small>/月</small></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-segmented",
          "category": "radio",
          "title": "分段控制器",
          "description": "隐藏原生外观仍保留原生键盘与表单行为。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>报告周期</legend><div class=\"su-radio-options su-radio-segment\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"本周\" checked ><span class=\"su-radio-detail\"><strong>本周</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"本月\"  ><span class=\"su-radio-detail\"><strong>本月</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"本季\"  ><span class=\"su-radio-detail\"><strong>本季</strong></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-delivery",
          "category": "radio",
          "title": "配送方式",
          "description": "结合时效与费用，帮助用户判断服务差异。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>配送方式</legend><div class=\"su-radio-options su-radio-card\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"普通配送\" checked ><span class=\"su-radio-detail\"><strong>普通配送</strong><small>预计 3—5 天送达</small></span><span class=\"su-radio-price\">免运费</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"加急配送\"  ><span class=\"su-radio-detail\"><strong>加急配送</strong><small>预计次日送达</small></span><span class=\"su-radio-price\">¥18</span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-table",
          "category": "radio",
          "title": "表格式选择",
          "description": "列对齐便于比较多个可选服务的容量与价格。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>备份空间</legend><div class=\"su-radio-options su-radio-list su-radio-table\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"基础空间\" checked><span><strong>基础空间</strong><small>10 G 容量</small></span><span>¥0 / 月</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"扩展空间\" ><span><strong>扩展空间</strong><small>50 G 容量</small></span><span>¥8 / 月</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"专业空间\" ><span><strong>专业空间</strong><small>200 G 容量</small></span><span>¥20 / 月</span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-rating",
          "category": "radio",
          "title": "评分单选",
          "description": "每档都有文字与原生单选按钮，评分不依赖颜色辨认。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>这次体验如何？</legend><div class=\"su-radio-options su-radio-stars\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"1 分\" checked><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg><span>1 分</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"2 分\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg><span>2 分</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"3 分\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg><span>3 分</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"4 分\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg><span>4 分</span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"5 分\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1Z\"/></svg><span>5 分</span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-disabled",
          "category": "radio",
          "title": "不可用选项",
          "description": "直接解释选项无法使用的原因，避免点击后才报错。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>选择部署地区</legend><div class=\"su-radio-options su-radio-card\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"华东区域\" checked ><span class=\"su-radio-detail\"><strong>华东区域</strong><small>资源充足，可立即创建。</small></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"华北区域\"  disabled><span class=\"su-radio-detail\"><strong>华北区域</strong><small>容量已满，暂不开放。</small></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"西南区域\"  ><span class=\"su-radio-detail\"><strong>西南区域</strong><small>资源充足，可立即创建。</small></span></label></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "radio-custom",
          "category": "radio",
          "title": "自定义金额",
          "description": "选择自定义后启用输入字段，并同步业务结果。",
          "html": "<fieldset class=\"su-radio-fieldset\"><legend>支持项目维护</legend><div class=\"su-radio-options su-radio-inline\"><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"¥5\" checked ><span class=\"su-radio-detail\"><strong>¥5</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"¥20\"  ><span class=\"su-radio-detail\"><strong>¥20</strong></span></label><label class=\"su-radio-option\"><input type=\"radio\" name=\"su-choice\" value=\"自定义\"  ><span class=\"su-radio-detail\"><strong>自定义</strong></span></label></div><div class=\"su-field\"><label for=\"su-custom-money\">自定义金额</label><input id=\"su-custom-money\" class=\"su-input\" type=\"number\" min=\"1\" max=\"9999\" value=\"30\" disabled></div><p class=\"su-radio-output\" role=\"status\"></p></fieldset>",
          "css": ".su-radio-fieldset{margin:0;padding:0;border:0;min-width:0}.su-radio-fieldset legend{font-weight:600;margin-bottom:12px}.su-radio-options{display:flex;flex-direction:column;gap:10px}.su-radio-option{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;min-width:0}.su-radio-option input{width:18px;height:18px;accent-color:var(--su-primary);flex-shrink:0}.su-radio-option small{display:block;color:var(--su-muted);font-size:12px;font-weight:400}.su-radio-option:has(input:disabled){opacity:.45;cursor:not-allowed}.su-radio-inline{flex-direction:row;flex-wrap:wrap;gap:18px}.su-radio-card .su-radio-option{padding:13px;border:1px solid var(--su-border);border-radius:9px}.su-radio-card .su-radio-option:has(input:checked){border-color:var(--su-primary);background:var(--su-soft)}.su-radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.su-radio-grid .su-radio-option{flex-direction:column;text-align:center;justify-content:center;padding:15px 8px;gap:6px}.su-radio-grid .su-radio-option input{margin:0}.su-radio-segment{display:flex;flex-direction:row;gap:3px;border:1px solid var(--su-border);border-radius:9px;padding:4px;background:var(--su-bg)}.su-radio-segment .su-radio-option{flex:1;position:relative;justify-content:center;padding:8px 10px;border-radius:6px}.su-radio-segment input{position:absolute;opacity:0;width:1px;height:1px}.su-radio-segment label:has(input:checked){background:var(--su-surface);box-shadow:0 2px 5px #1c214312;color:var(--su-primary)}.su-radio-segment label:has(input:focus-visible){outline:3px solid var(--su-primary);outline-offset:2px}.su-radio-list .su-radio-option{border-bottom:1px solid var(--su-border);padding:12px 0}.su-radio-list .su-radio-option:last-child{border-bottom:0}.su-radio-detail{flex:1;min-width:0}.su-radio-price{font-size:18px;font-weight:650;white-space:nowrap}.su-radio-price small{font-size:11px;font-weight:400}.su-radio-output{font-size:12px;color:var(--su-muted);padding-top:10px;min-height:28px}.su-radio-stars{display:flex;gap:8px}.su-radio-stars .su-radio-option{position:relative;padding:6px;flex-direction:column;gap:3px;font-size:11px}.su-radio-stars input{margin:0}.su-radio-stars svg{width:26px;height:26px;color:var(--su-muted)}.su-radio-stars label:has(input:checked) svg{fill:var(--su-warning);color:var(--su-warning)}.su-radio-table .su-radio-option{display:grid;grid-template-columns:20px 1fr 70px}.su-radio-table .su-radio-option>span:last-child{font-size:12px;text-align:right;color:var(--su-muted)}@media(max-width:360px){.su-radio-grid{grid-template-columns:1fr}.su-radio-grid .su-radio-option{flex-direction:row;text-align:left;justify-content:flex-start}.su-radio-segment .su-radio-option{padding:8px 5px}}",
          "js": "const options=[...root.querySelectorAll('input[type=radio]')],status=root.querySelector('[role=status]');function report(){const selected=options.find(option=>option.checked);status.textContent='已选择：'+selected.value}options.forEach(option=>option.addEventListener('change',report));report();const custom=root.querySelector('input[type=number]');function customUpdate(){custom.disabled=!options[2].checked;if(options[2].checked)status.textContent=custom.validity.valid?'已选择：¥'+custom.value:'请输入 1—9999 之间的金额'}options.forEach(option=>option.addEventListener('change',customUpdate));custom.addEventListener('input',customUpdate)",
          "tags": [
            "单选",
            "原生表单"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "separator",
      "name": "分隔线",
      "description": "用线条、留白和语义结构整理内容层次。",
      "group": "基础",
      "icon": "menu",
      "samples": [
        {
          "id": "separator-horizontal",
          "category": "separator",
          "title": "水平分隔",
          "description": "用细线划清相邻内容，保持正文阅读节奏。",
          "html": "<div class=\"su-stack\"><div><strong>项目简介</strong><p class=\"su-small su-muted\">一个团队共享的设计资料库。</p></div><hr class=\"su-separator-line\"><div><strong>最近更新</strong><p class=\"su-small su-muted\">新增图标与交互示例。</p></div></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-vertical",
          "category": "separator",
          "title": "工具栏竖线",
          "description": "将不同任务的按钮分组，竖线随工具栏高度伸展。",
          "html": "<div class=\"su-row\"><button type=\"button\" class=\"su-btn su-btn-ghost\" data-mark=\"加粗\">加粗</button><button type=\"button\" class=\"su-btn su-btn-ghost\" data-mark=\"斜体\">斜体</button><span class=\"su-separator-vertical\" role=\"separator\" aria-orientation=\"vertical\"></span><button type=\"button\" class=\"su-btn su-btn-ghost\" data-mark=\"左对齐\">左对齐</button><button type=\"button\" class=\"su-btn su-btn-ghost\" data-mark=\"居中\">居中</button></div><p class=\"su-panel\" data-preview>这段演示文字可以调整格式。</p>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "const preview=root.querySelector('[data-preview]');root.querySelectorAll('button').forEach(button=>button.addEventListener('click',()=>{const action=button.dataset.mark;if(action==='加粗')preview.style.fontWeight=preview.style.fontWeight==='700'?'400':'700';if(action==='斜体')preview.style.fontStyle=preview.style.fontStyle==='italic'?'normal':'italic';if(action==='左对齐')preview.style.textAlign='left';if(action==='居中')preview.style.textAlign='center';button.setAttribute('aria-pressed',String(button.getAttribute('aria-pressed')!=='true'))}))",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-label",
          "category": "separator",
          "title": "带文字的分隔",
          "description": "居中文字标明下一组内容的用途。",
          "html": "<div class=\"su-panel\"><strong>使用账户登录</strong><p class=\"su-small su-muted\">输入邮箱和密码即可继续。</p></div><div class=\"su-separator-label\" role=\"separator\" aria-label=\"其他方式\">其他方式</div><details class=\"su-panel\"><summary>使用一次性验证码</summary><p class=\"su-small su-muted\" style=\"padding-top:8px\">正式业务中可在这里填写验证码。本示例仅展示分组结构。</p></details>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-dashed",
          "category": "separator",
          "title": "虚线票券",
          "description": "虚线表达可拆分的信息区，适合凭证与订单摘要。",
          "html": "<div class=\"su-panel su-stack\"><div class=\"su-between\"><strong>团队工作坊</strong><span class=\"su-badge\">电子凭证</span></div><p class=\"su-small su-muted\">10 月 24 日 14:00 · 在线活动</p><hr class=\"su-separator-line su-separator-dashed\"><div class=\"su-between\"><span class=\"su-small su-muted\">演示编号</span><strong>2026 1024 0086</strong></div><p class=\"su-small su-muted\">凭证为示例数据，无实际核销用途。</p></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-section",
          "category": "separator",
          "title": "章节标题分隔",
          "description": "标题左对齐，余下的分隔线提供结构而不过度装饰。",
          "html": "<div class=\"su-stack\"><div class=\"su-separator-section\">基本信息</div><p class=\"su-small su-muted\">项目名称：秋季设计规范<br>负责人：林小夏</p><div class=\"su-separator-section\">协作设置</div><p class=\"su-small su-muted\">可见范围：团队成员<br>编辑权限：项目维护者</p></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-inset",
          "category": "separator",
          "title": "缩进列表分隔",
          "description": "分隔线对齐正文起点，避免穿过头像视觉区。",
          "html": "<div class=\"su-stack\"><div class=\"su-separator-entry\"><span class=\"su-avatar\">夏</span><span><strong>林小夏</strong><br><span class=\"su-small su-muted\">已更新设计说明</span></span></div><hr class=\"su-separator-line su-separator-inset\"><div class=\"su-separator-entry\"><span class=\"su-avatar\">言</span><span><strong>周书言</strong><br><span class=\"su-small su-muted\">已完成内容检查</span></span></div><hr class=\"su-separator-line su-separator-inset\"><div class=\"su-separator-entry\"><span class=\"su-avatar\">舟</span><span><strong>陈一舟</strong><br><span class=\"su-small su-muted\">已发布演示版本</span></span></div></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-timeline",
          "category": "separator",
          "title": "时间线连接",
          "description": "垂直细线连接有关联的事件，最后一项停止延伸。",
          "html": "<div><div class=\"su-separator-timeline\"><span class=\"su-separator-rail\" aria-hidden=\"true\"></span><div style=\"padding-bottom:15px\"><strong>创建项目</strong><p class=\"su-small su-muted\">今天 09:00</p></div></div><div class=\"su-separator-timeline\"><span class=\"su-separator-rail\" aria-hidden=\"true\"></span><div style=\"padding-bottom:15px\"><strong>完成评审</strong><p class=\"su-small su-muted\">今天 11:30</p></div></div><div class=\"su-separator-timeline\"><span class=\"su-separator-rail\" aria-hidden=\"true\"></span><div style=\"padding-bottom:15px\"><strong>发布版本</strong><p class=\"su-small su-muted\">今天 15:00</p></div></div></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-steps",
          "category": "separator",
          "title": "步骤间连线",
          "description": "横向线表示步骤顺序，按钮推进后更新当前步骤。",
          "html": "<div class=\"su-row\" style=\"flex-wrap:nowrap;gap:6px\"><span class=\"su-separator-step\" data-active=\"true\" aria-current=\"step\"><strong>1</strong>填写</span><span class=\"su-separator-step\" data-active=\"false\" ><strong>2</strong>确认</span><span class=\"su-separator-step\" data-active=\"false\" ><strong>3</strong>完成</span></div><button type=\"button\" class=\"su-btn su-btn-secondary\" style=\"align-self:flex-start\">下一步</button><p class=\"su-small su-muted\" role=\"status\">当前为第 1 步：填写</p>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "let step=0;const steps=[...root.querySelectorAll('.su-separator-step')];root.querySelector('button').addEventListener('click',event=>{step=(step+1)%3;steps.forEach((item,index)=>{item.dataset.active=index===step;if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current')});root.querySelector('[role=status]').textContent='当前为第 '+(step+1)+' 步：'+['填写','确认','完成'][step];event.target.textContent=step===2?'重新演示':'下一步'})",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-footer",
          "category": "separator",
          "title": "卡片底部边界",
          "description": "底栏通过边线与浅底色区分操作区域。",
          "html": "<div class=\"su-panel\" style=\"padding:0\"><div class=\"su-stack\" style=\"padding:18px\"><strong>准备发布</strong><p class=\"su-small su-muted\">检查说明和演示内容，然后保存当前状态。</p></div><div class=\"su-separator-card-footer su-between\"><span class=\"su-small su-muted\" role=\"status\">尚未保存</span><button type=\"button\" class=\"su-btn\">保存</button></div></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "root.querySelector('button').addEventListener('click',event=>{root.querySelector('[role=status]').textContent='已保存演示内容';event.target.textContent='已保存';event.target.disabled=true})",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-metadata",
          "category": "separator",
          "title": "行内信息分隔",
          "description": "短竖线区分紧凑元信息，换行时仍保留清楚的间距。",
          "html": "<div class=\"su-stack\"><h3>如何整理团队知识库</h3><div class=\"su-separator-terms\"><span>林小夏</span><span class=\"su-separator-vertical\" style=\"min-height:16px\" aria-hidden=\"true\"></span><time datetime=\"2026-10-21\">2026 年 10 月 21 日</time><span class=\"su-separator-vertical\" style=\"min-height:16px\" aria-hidden=\"true\"></span><span>阅读约 6 分钟</span></div><p class=\"su-muted\">从资料命名、目录组织到协作更新，用一致规则减少查找时间。</p></div>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "separator-quote",
          "category": "separator",
          "title": "引用与正文",
          "description": "短竖线标注引用语义，大间距分离后续正文。",
          "html": "<article class=\"su-separator-spacing\"><p class=\"su-muted\">为组件选择清晰的边界，让内容自然形成层次。</p><blockquote class=\"su-separator-quote\" style=\"margin:0\">好的分隔应该让信息更容易理解。</blockquote><hr class=\"su-separator-line\"><p class=\"su-small su-muted\">这段演示同时使用引用竖线、段落留白和水平分隔线。</p></article>",
          "css": ".su-separator-line{border:0;border-top:1px solid var(--su-border);margin:0;width:100%}.su-separator-label{display:flex;align-items:center;gap:12px;color:var(--su-muted);font-size:12px}.su-separator-label::before,.su-separator-label::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-vertical{width:1px;min-height:26px;align-self:stretch;background:var(--su-border);flex-shrink:0}.su-separator-terms{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--su-muted)}.su-separator-dashed{border-top-style:dashed}.su-separator-section{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.su-separator-section::after{content:'';height:1px;background:var(--su-border);flex:1}.su-separator-inset{margin-left:52px;width:calc(100% - 52px)}.su-separator-entry{display:flex;align-items:center;gap:10px}.su-separator-content{padding:16px 0}.su-separator-timeline{display:flex;gap:12px}.su-separator-rail{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}.su-separator-rail::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--su-primary);margin:7px 0}.su-separator-rail::after{content:'';width:1px;flex:1;min-height:35px;background:var(--su-border)}.su-separator-timeline:last-child .su-separator-rail::after{background:transparent}.su-separator-step{display:flex;align-items:center;gap:10px;flex:1;color:var(--su-muted);font-size:12px;white-space:nowrap}.su-separator-step::after{content:'';height:1px;flex:1;background:var(--su-border);min-width:14px}.su-separator-step:last-child::after{display:none}.su-separator-step strong{display:grid;place-items:center;border:1px solid var(--su-border);border-radius:50%;width:25px;height:25px}.su-separator-step[data-active=true]{color:var(--su-primary)}.su-separator-step[data-active=true] strong{border-color:var(--su-primary);background:var(--su-soft)}.su-separator-quote{padding-left:16px;border-left:3px solid var(--su-primary);font-size:16px}.su-separator-spacing{display:grid;gap:22px}.su-separator-card-footer{padding:12px 18px;background:var(--su-bg);border-top:1px solid var(--su-border);border-radius:0 0 10px 10px}.su-separator-list{padding:0;list-style:none;margin:0}.su-separator-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--su-border)}.su-separator-list li:last-child{border-bottom:0}",
          "js": "",
          "tags": [
            "内容分隔",
            "布局"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "skeleton",
      "name": "加载骨架",
      "description": "为正在加载的真实布局预留空间。",
      "group": "反馈",
      "icon": "grid",
      "samples": [
        {
          "id": "skeleton-profile",
          "category": "skeleton",
          "title": "个人资料占位",
          "description": "头像与文本保持原有尺寸，内容到达后切换。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:48px;height:48px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:46%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:72%;height:12px\"></span></div></div><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:90%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:70%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:12px\"></span></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-row\"><span class=\"su-avatar\">林</span><div><h3>林予安</h3><p class=\"su-muted\">产品设计师 · 演示账户</p></div></div><p>让内容在加载前后保持稳定。</p></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [
            "头像",
            "布局稳定"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-article",
          "category": "skeleton",
          "title": "文章摘要占位",
          "description": "双栏缩略图与摘要适合内容列表。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-sk-article\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:96px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:88%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:64%;height:12px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-sk-article\"><div class=\"su-panel\">设计<br>笔记</div><div class=\"su-stack\"><h3>设计里的留白</h3><p class=\"su-muted\">演示文章 · 阅读约 3 分钟</p><p>从信息的距离，找到界面的节奏。</p></div></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-gallery",
          "category": "skeleton",
          "title": "图片网格占位",
          "description": "多个固定比例媒体位同时等待内容。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-sk-grid\"><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:82px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:72%;height:12px\"></span></div><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:82px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:72%;height:12px\"></span></div><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:82px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:72%;height:12px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-sk-grid\"><div class=\"su-panel\" style=\"background:var(--su-soft);min-height:110px;display:grid;place-content:center\"><strong><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5\"/></svg> 山间</strong><span class=\"su-small su-muted\">演示画册</span></div><div class=\"su-panel\" style=\"background:var(--su-soft);min-height:110px;display:grid;place-content:center\"><strong><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\"/><path d=\"M3 12h18M5 6h14M5 18h14\"/></svg> 海边</strong><span class=\"su-small su-muted\">演示画册</span></div><div class=\"su-panel\" style=\"background:var(--su-soft);min-height:110px;display:grid;place-content:center\"><strong><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\"/></svg> 林地</strong><span class=\"su-small su-muted\">演示画册</span></div></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-metrics",
          "category": "skeleton",
          "title": "统计数据占位",
          "description": "指标、数字、说明分开占位。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-sk-grid\"><div class=\"su-panel su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:60%;height:10px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:74%;height:28px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:8px\"></span></div><div class=\"su-panel su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:60%;height:10px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:74%;height:28px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:8px\"></span></div><div class=\"su-panel su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:60%;height:10px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:74%;height:28px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:8px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-sk-grid\"><div class=\"su-panel\"><p class=\"su-muted su-small\">访问 · 演示</p><h3 style=\"font-size:25px\">1,248</h3></div><div class=\"su-panel\"><p class=\"su-muted su-small\">收藏 · 演示</p><h3 style=\"font-size:25px\">326</h3></div><div class=\"su-panel\"><p class=\"su-muted su-small\">下载 · 演示</p><h3 style=\"font-size:25px\">89</h3></div></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-table",
          "category": "skeleton",
          "title": "表格行占位",
          "description": "表头和数据行各自保留列宽。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-stack\"><div class=\"su-between su-sk-divider\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:30%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:22%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:16%;height:12px\"></span></div><div class=\"su-between su-sk-divider\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:30%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:22%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:16%;height:12px\"></span></div><div class=\"su-between su-sk-divider\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:30%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:22%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:16%;height:12px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><table><caption class=\"su-small su-muted\">演示项目</caption><thead><tr><th>项目</th><th>负责人</th><th>状态</th></tr></thead><tbody><tr><td>组件整理</td><td>小林</td><td>进行中</td></tr><tr><td>交互检查</td><td>小周</td><td>已完成</td></tr></tbody></table></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-conversation",
          "category": "skeleton",
          "title": "对话消息占位",
          "description": "交错的消息气泡体现发送方向。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:32px;height:32px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:65%;height:30px\"></span></div><div style=\"display:flex;justify-content:end\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:54%;height:38px\"></span></div><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:32px;height:32px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:30px\"></span></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-row\"><span class=\"su-avatar\">陈</span><p class=\"su-panel\">演示：新版组件可以预览了。</p></div><p class=\"su-panel\" style=\"align-self:end;background:var(--su-soft)\">收到，我来检查键盘操作。</p></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [
            "消息"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-product",
          "category": "skeleton",
          "title": "商品信息占位",
          "description": "媒体与价格区分层加载。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-sk-article\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:122px\"></span><div class=\"su-stack\"><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:85%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:64%;height:12px\"></span></div><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:45%;height:28px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:72%;height:32px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-sk-article\"><div class=\"su-panel\" style=\"display:grid;place-content:center;background:var(--su-soft)\"><svg width=\"38\" height=\"38\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg></div><div class=\"su-stack\"><h3>纸上日程本</h3><p class=\"su-muted\">商品布局演示</p><strong>¥ 28.00</strong><span class=\"su-badge\" style=\"align-self:start\">示例商品</span></div></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-chart",
          "category": "skeleton",
          "title": "图表区域占位",
          "description": "静态柱高预留图形空间，避免加载跳动。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-between\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:40%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:18%;height:12px\"></span></div><div class=\"su-sk-bars\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:50px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:80px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:62px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:98px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:72px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:110px\"></span></div></div><div data-content class=\"su-sk-live\" hidden><div class=\"su-between\"><strong>每周访问</strong><span class=\"su-muted su-small\">演示数据</span></div><div class=\"su-sk-bars\" role=\"img\" aria-label=\"演示访问量：周一 50，周二 80，周三 62，周四 98，周五 72，周六 110\"><span style=\"height:50px;background:var(--su-primary)\"></span><span style=\"height:80px;background:var(--su-primary)\"></span><span style=\"height:62px;background:var(--su-primary)\"></span><span style=\"height:98px;background:var(--su-primary)\"></span><span style=\"height:72px;background:var(--su-primary)\"></span><span style=\"height:110px;background:var(--su-primary)\"></span></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-settings",
          "category": "skeleton",
          "title": "设置表单占位",
          "description": "标签、输入区与操作区分别预留。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:25%;height:10px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:38px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:32%;height:10px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:38px\"></span></div></div><div data-content class=\"su-sk-live\" hidden><label class=\"su-field\">项目名称<input class=\"su-input\" value=\"演示空间\"></label><label class=\"su-field\">联系邮箱<input class=\"su-input\" type=\"email\" placeholder=\"填写演示邮箱\"></label></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [
            "表单"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-timeline",
          "category": "skeleton",
          "title": "动态时间线占位",
          "description": "圆点与正文沿同一轴排列。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:16px;height:16px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:52%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:82%;height:12px\"></span></div></div><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:16px;height:16px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:52%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:82%;height:12px\"></span></div></div><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk su-sk-round\" style=\"width:16px;height:16px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:52%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:82%;height:12px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><ol class=\"su-stack\"><li>今天 · 完成界面检查</li><li>昨天 · 整理组件目录</li><li>前天 · 建立演示空间</li></ol><p class=\"su-small su-muted\">以上为演示动态。</p></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-navigation",
          "category": "skeleton",
          "title": "侧栏布局占位",
          "description": "窄栏导航与主要内容同时预留空间。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div style=\"display:grid;grid-template-columns:70px 1fr;gap:22px\"><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:12px\"></span></div><div class=\"su-stack\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:65%;height:22px\"></span><div class=\"su-sk-lines\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:90%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:70%;height:12px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:48%;height:12px\"></span></div><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:100%;height:42px\"></span></div></div></div><div data-content class=\"su-sk-live\" hidden><div style=\"display:grid;grid-template-columns:70px 1fr;gap:22px\"><div class=\"su-stack su-muted\"><strong>总览</strong><span>文档</span><span>成员</span></div><div class=\"su-stack\"><h3>项目总览</h3><p>当前有 3 项演示任务，1 项已完成。</p><span class=\"su-badge\" style=\"align-self:start\">演示空间</span></div></div></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "skeleton-checklist",
          "category": "skeleton",
          "title": "任务清单占位",
          "description": "任务方框与标题逐行对应。",
          "html": "<div data-loading aria-busy=\"true\" aria-label=\"演示内容加载中\" class=\"su-sk-layout\"><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:18px;height:18px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:75%;height:15px\"></span></div><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:18px;height:18px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:75%;height:15px\"></span></div><div class=\"su-row\"><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:18px;height:18px\"></span><span aria-hidden=\"true\" class=\"su-sk \" style=\"width:75%;height:15px\"></span></div></div><div data-content class=\"su-sk-live\" hidden><p class=\"su-muted su-small\">演示清单，可直接勾选</p><label class=\"su-row\"><input class=\"su-check\" type=\"checkbox\" checked>补充使用说明</label><label class=\"su-row\"><input class=\"su-check\" type=\"checkbox\" >检查移动布局</label><label class=\"su-row\"><input class=\"su-check\" type=\"checkbox\" >确认离线下载</label></div><div class=\"su-between\"><button class=\"su-btn su-btn-secondary\" data-load>模拟加载完成</button><span class=\"su-muted su-small su-sk-status\" data-status role=\"status\">加载占位演示</span></div>",
          "css": "\n.su-sk{display:block;min-height:12px;border-radius:5px;background:var(--su-border);position:relative;overflow:hidden}.su-sk::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:su-sk-pass 1.8s ease-in-out infinite}.su-sk-round{border-radius:50%;width:44px;height:44px;flex-shrink:0}.su-sk-lines{display:grid;gap:10px;flex:1}.su-sk-layout{display:grid;gap:14px;min-height:130px}.su-sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.su-sk-image{height:84px}.su-sk-live{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:12px}.su-sk-bars{display:flex;align-items:end;gap:12px;height:120px}.su-sk-bars>*{flex:1}.su-sk-article{display:grid;grid-template-columns:86px 1fr;gap:16px}.su-sk-divider{border-bottom:1px solid var(--su-border);padding:12px 0}.su-sk-status{min-height:20px}@keyframes su-sk-pass{to{transform:translateX(100%)}}@media(max-width:440px){.su-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-sk-article{grid-template-columns:64px 1fr}}\n",
          "js": "const button=root.querySelector('[data-load]');let timer;button.addEventListener('click',()=>{clearTimeout(timer);const loading=root.querySelector('[data-loading]');const content=root.querySelector('[data-content]');const status=root.querySelector('[data-status]');if(button.dataset.loaded==='yes'){button.dataset.loaded='';button.textContent='模拟加载完成';loading.hidden=false;content.hidden=true;loading.setAttribute('aria-busy','true');status.textContent='已重置为加载状态';return;}button.disabled=true;status.textContent='正在读取演示内容';timer=setTimeout(()=>{loading.hidden=true;loading.setAttribute('aria-busy','false');content.hidden=false;button.disabled=false;button.dataset.loaded='yes';button.textContent='重新加载';status.textContent='演示内容已加载';},650);});",
          "tags": [
            "复选框"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "switch",
      "name": "开关",
      "description": "切换偏好、依赖设置与本地状态。",
      "group": "表单",
      "icon": "settings",
      "samples": [
        {
          "id": "switch-basic",
          "category": "switch",
          "title": "基础开关",
          "description": "原生复选框保留键盘与表单语义。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"notice\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>接收消息通知</span></span></label><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-description",
          "category": "switch",
          "title": "带说明的开关",
          "description": "主要标签与补充说明保持独立层次。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"summary\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>每周摘要</span><span class=\"su-muted su-small\">每周一发送本周的演示任务摘要。</span></span></label><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-sizes",
          "category": "switch",
          "title": "紧凑与标准",
          "description": "在密集列表和普通设置中使用不同尺寸。",
          "html": "<div class=\"su-stack\"><label class=\"su-switch su-switch-small\"><input type=\"checkbox\" role=\"switch\" name=\"compact\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>紧凑布局</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"normal\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>标准布局</span></span></label></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-square",
          "category": "switch",
          "title": "方形拨片",
          "description": "方形轨道适合几何感较强的操作界面。",
          "html": "<label class=\"su-switch su-switch-square\"><input type=\"checkbox\" role=\"switch\" name=\"grid\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>显示辅助网格</span></span></label><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-disabled",
          "category": "switch",
          "title": "不可用状态",
          "description": "解释开关为何不可修改，避免只靠灰色表达。",
          "html": "<div class=\"su-stack\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"fixed\" checked disabled><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>安全提醒</span><span class=\"su-muted su-small\">系统要求保持开启。</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"locked\"  disabled><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>团队管理</span><span class=\"su-muted su-small\">演示账户无此权限。</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"local\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>本地草稿</span></span></label></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-setting-row",
          "category": "switch",
          "title": "设置列表",
          "description": "每一行说明一个独立偏好。",
          "html": "<div class=\"su-stack\"><div class=\"su-panel\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"pref0\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>浏览提醒</span><span class=\"su-muted su-small\">有新内容时提示</span></span></label></div><div class=\"su-panel\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"pref1\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>声音反馈</span><span class=\"su-muted su-small\">操作成功时播放提示音</span></span></label></div><div class=\"su-panel\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"pref2\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>自动保存</span><span class=\"su-muted su-small\">每次修改保存到本地</span></span></label></div></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-dependent",
          "category": "switch",
          "title": "主从设置",
          "description": "总开关控制子选项是否可操作。",
          "html": "<div class=\"su-stack\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"master\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>启用提醒</span></span></label><div class=\"su-panel su-stack\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"mail\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>邮件提醒</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"browser\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>页面提醒</span></span></label></div></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});const master=root.querySelector('[name=master]');master.addEventListener('change',()=>{root.querySelectorAll('[name=mail],[name=browser]').forEach(input=>input.disabled=!master.checked);});",
          "tags": [
            "依赖状态"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-theme",
          "category": "switch",
          "title": "主题预览",
          "description": "开关只改变当前预览区的明暗。",
          "html": "<label class=\"su-switch su-switch-icon\"><input type=\"checkbox\" role=\"switch\" name=\"theme\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>深色预览</span></span></label><div data-theme-preview class=\"su-switch-demo-light\"><div class=\"su-row\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5\"/></svg><strong>演示工作区</strong></div><p>更改此开关，查看同一内容的明暗表现。</p></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});root.querySelector('[name=theme]').addEventListener('change',event=>{const box=root.querySelector('[data-theme-preview]');box.className=event.target.checked?'su-switch-demo-dark':'su-switch-demo-light';box.querySelector('svg').outerHTML=event.target.checked?'<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 13A9 9 0 0 1 11 3a9 9 0 1 0 10 10Z\"/></svg>':'<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5\"/></svg>';});",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-confirm",
          "category": "switch",
          "title": "敏感操作确认",
          "description": "开启前明确确认，取消后恢复原状态。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"public\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>公开演示空间</span></span></label><div data-confirm hidden class=\"su-panel su-stack\"><p>确认后，这个演示空间将标记为公开。不会发布任何真实数据。</p><div class=\"su-row\"><button class=\"su-btn\" data-confirm-yes>确认公开</button><button class=\"su-btn su-btn-secondary\" data-confirm-no>保持私密</button></div></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});const input=root.querySelector('[name=public]'),box=root.querySelector('[data-confirm]');input.addEventListener('change',()=>{if(input.checked){input.checked=false;box.hidden=false;root.querySelector('[data-confirm-yes]').focus();}else{box.hidden=true;}});root.querySelector('[data-confirm-yes]').addEventListener('click',()=>{input.checked=true;box.hidden=true;root.querySelector('[data-switch-status]').textContent='演示空间已标记为公开';input.focus();});root.querySelector('[data-confirm-no]').addEventListener('click',()=>{box.hidden=true;root.querySelector('[data-switch-status]').textContent='演示空间保持私密';input.focus();});",
          "tags": [
            "确认"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-async",
          "category": "switch",
          "title": "保存反馈",
          "description": "模拟异步保存，处理中暂停重复操作。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"sync\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>跨设备同步</span></span></label><p class=\"su-small su-muted\" data-save>修改后模拟保存约半秒。</p><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});const input=root.querySelector('[name=sync]');input.addEventListener('change',()=>{input.disabled=true;root.querySelector('[data-save]').textContent='正在保存演示设置…';setTimeout(()=>{input.disabled=false;root.querySelector('[data-save]').textContent='演示设置已保存';},600);});",
          "tags": [
            "加载"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-billing",
          "category": "switch",
          "title": "计费周期切换",
          "description": "一个开关联动价格与周期说明。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"year\"  ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>按年查看</span></span></label><div class=\"su-panel su-stack\"><h3>标准方案 · 演示价格</h3><p><strong data-price style=\"font-size:30px\">¥ 20</strong><span data-period class=\"su-muted\"> / 月</span></p><span class=\"su-small su-muted\" data-note>按月结算，可随时调整。</span></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});root.querySelector('[name=year]').addEventListener('change',event=>{root.querySelector('[data-price]').textContent=event.target.checked?'¥ 192':'¥ 20';root.querySelector('[data-period]').textContent=event.target.checked?' / 年':' / 月';root.querySelector('[data-note]').textContent=event.target.checked?'演示：按年比逐月支付少 48 元。':'按月结算，可随时调整。';});",
          "tags": [
            "价格"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "switch-selection",
          "category": "switch",
          "title": "批量偏好",
          "description": "总开关与各项设置保持双向同步。",
          "html": "<label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"all\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>全部开启</span></span></label><div class=\"su-panel su-stack\"><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"one\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>站内消息</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"two\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>更新提示</span></span></label><label class=\"su-switch \"><input type=\"checkbox\" role=\"switch\" name=\"three\" checked ><span class=\"su-switch-track\" aria-hidden=\"true\"></span><span class=\"su-switch-label\"><span>任务提醒</span></span></label></div><p class=\"su-small su-muted su-switch-status\" data-switch-status role=\"status\">交互仅在本地演示</p>",
          "css": "\n.su-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;max-width:100%;position:relative}.su-switch>input{position:absolute;width:1px;height:1px;opacity:0}.su-switch-track{width:42px;height:24px;border-radius:20px;background:var(--su-muted);position:relative;flex-shrink:0;transition:background .18s}.su-switch-track::after{content:\"\";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.su-switch input:checked+.su-switch-track{background:var(--su-primary)}.su-switch input:checked+.su-switch-track::after{transform:translateX(18px)}.su-switch input:focus-visible+.su-switch-track{outline:3px solid var(--su-primary);outline-offset:3px}.su-switch input:disabled+.su-switch-track{opacity:.4}.su-switch:has(input:disabled){cursor:not-allowed}.su-switch-small .su-switch-track{width:32px;height:20px}.su-switch-small .su-switch-track::after{width:14px;height:14px}.su-switch-small input:checked+.su-switch-track::after{transform:translateX(12px)}.su-switch-square .su-switch-track,.su-switch-square .su-switch-track::after{border-radius:5px}.su-switch-label{display:flex;flex-direction:column;gap:2px}.su-switch-status{min-height:24px}.su-switch-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.su-switch-demo-dark{background:#242638;color:#f1effa;padding:22px;border-radius:10px}.su-switch-demo-light{background:#f3f4f8;color:#252838;padding:22px;border-radius:10px}.su-switch-icon .su-switch-track{width:50px;height:28px}.su-switch-icon .su-switch-track::after{width:22px;height:22px}.su-switch-icon input:checked+.su-switch-track::after{transform:translateX(22px)}\n",
          "js": "root.querySelectorAll('input[role=switch]').forEach(input=>{input.addEventListener('change',()=>{const out=root.querySelector('[data-switch-status]');if(out)out.textContent=input.closest('label').querySelector('.su-switch-label>span').textContent+'：'+(input.checked?'已开启':'已关闭');});});const all=root.querySelector('[name=all]'),items=[...root.querySelectorAll('[name=one],[name=two],[name=three]')];all.addEventListener('change',()=>items.forEach(input=>input.checked=all.checked));items.forEach(input=>input.addEventListener('change',()=>{all.checked=items.every(item=>item.checked);root.querySelector('[data-switch-status]').textContent='已开启 '+items.filter(item=>item.checked).length+' / '+items.length+' 项提醒';}));",
          "tags": [
            "批量"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "toast",
      "name": "轻提示",
      "description": "确认操作结果，提供恢复与后续动作。",
      "group": "反馈",
      "icon": "bell",
      "samples": [
        {
          "id": "toast-success",
          "category": "toast",
          "title": "保存成功",
          "description": "轻量确认操作结果，保留主动关闭入口。",
          "html": "<div class=\"su-row\"><button class=\"su-btn\" data-trigger=\"basic\">保存演示设置</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast su-toast-success\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-retry",
          "category": "toast",
          "title": "错误与重试",
          "description": "错误提示直接提供可演示的恢复动作。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"retry\">模拟保存失败</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast su-toast-error\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10v.1\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-undo",
          "category": "toast",
          "title": "撤销归档",
          "description": "内容移除后，可从提示中恢复。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"undo\">归档演示笔记</button></div><div data-archive-row class=\"su-toast-row\"><span><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H5v20h14V7Zm0 0v5h5M8 12h8m-8 4h8\"/></svg> 周末设计笔记</span><span class=\"su-badge\">演示内容</span></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-timed",
          "category": "toast",
          "title": "自动关闭进度",
          "description": "五秒后关闭，鼠标悬停或键盘聚焦时暂停。",
          "html": "<div class=\"su-row\"><button class=\"su-btn\" data-trigger=\"auto\" data-title=\"演示任务已完成\" data-body=\"悬停或聚焦可暂停倒计时。\">显示定时提示</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast su-toast-success su-toast-timed\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button><span class=\"su-toast-countdown\" aria-hidden=\"true\"></span></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-stack",
          "category": "toast",
          "title": "通知堆叠",
          "description": "连续触发可查看堆叠，最多保留三条。",
          "html": "<div class=\"su-row\"><button class=\"su-btn\" data-trigger=\"counter\">添加演示通知</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-pending",
          "category": "toast",
          "title": "异步处理结果",
          "description": "同一条提示由处理中切换为完成。",
          "html": "<div class=\"su-row\"><button class=\"su-btn\" data-trigger=\"async\">模拟导出</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-rich",
          "category": "toast",
          "title": "完整消息通知",
          "description": "标题与摘要分层展示，适合较长消息。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"basic\" data-title=\"林予安发来一条演示评论\" data-body=\"新的表格布局很清晰，建议补充移动端的列说明。\">查看评论通知</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-action",
          "category": "toast",
          "title": "结果与后续动作",
          "description": "完成提示带有相关操作，并更新页面摘要。",
          "html": "<div class=\"su-row\"><button class=\"su-btn\" data-trigger=\"action\">模拟导入记录</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-position",
          "category": "toast",
          "title": "可选显示位置",
          "description": "预览容器内的左、中、右对齐方式。",
          "html": "<div class=\"su-row\"><label class=\"su-row\">显示位置<select class=\"su-input\" data-position style=\"width:auto\"><option value=\"right\">右侧</option><option value=\"center\">居中</option><option value=\"left\">左侧</option></select></label><button class=\"su-btn\" data-trigger=\"basic\" data-title=\"位置演示\" data-body=\"提示按照所选位置排列。\">显示提示</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-copy",
          "category": "toast",
          "title": "复制反馈",
          "description": "调用真实剪贴板，受限时保留选中内容以便手动复制。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"copy\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"/></svg> 复制文字</button></div><label class=\"su-field\">可复制的演示内容<input class=\"su-input\" data-copy-value value=\"拾 UI 组件演示\" readonly></label><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-compact",
          "category": "toast",
          "title": "紧凑确认条",
          "description": "短反馈适合工具条和轻量编辑操作。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"basic\" data-title=\"已加入演示收藏\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\"/></svg> 收藏演示</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast su-toast-compact su-toast-dark\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "toast-connectivity",
          "category": "toast",
          "title": "连接状态提示",
          "description": "按钮往返模拟离线与恢复，不改变实际网络。",
          "html": "<div class=\"su-row\"><button class=\"su-btn su-btn-secondary\" data-trigger=\"network\" data-online=\"yes\">模拟离线</button></div><div data-toast-stage class=\"su-toast-stage\" aria-live=\"polite\" aria-relevant=\"additions text\"></div><p class=\"su-muted su-small su-toast-output\" data-toast-output role=\"status\">轻提示仅在当前演示区域显示</p><template><div class=\"su-toast \"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"/></svg><div class=\"su-toast-content\"><p class=\"su-toast-title\" data-title></p><p class=\"su-toast-body\" data-body></p><button class=\"su-toast-action\" data-action hidden></button></div><button class=\"su-toast-close\" data-close aria-label=\"关闭提示\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg></button></div></template>",
          "css": "\n.su-toast-stage{min-height:135px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:9px;width:100%}.su-toast{display:flex;align-items:start;gap:10px;max-width:100%;width:350px;border:1px solid var(--su-border);padding:13px 14px;background:var(--su-surface);border-radius:10px;box-shadow:0 5px 16px #171b3510;position:relative;overflow:hidden}.su-toast>svg{margin-top:2px;color:var(--su-primary)}.su-toast-content{flex:1;min-width:0}.su-toast-close{padding:2px;border:0;background:transparent;color:var(--su-muted);display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:5px}.su-toast-close:hover{background:var(--su-bg)}.su-toast-action{border:0;padding:0;margin-top:7px;background:transparent;color:var(--su-primary);text-decoration:underline;text-underline-offset:3px}.su-toast-error{background:var(--su-surface)}.su-toast-error>svg{color:var(--su-danger)}.su-toast-success>svg{color:var(--su-success)}.su-toast-title{font-weight:600}.su-toast-body{font-size:12px;color:var(--su-muted);margin-top:2px}.su-toast-countdown{position:absolute;inset:auto 0 0;height:3px;background:var(--su-primary);transform-origin:left;animation:su-toast-count 5s linear forwards}.su-toast-compact{width:auto;align-items:center;border-radius:8px;padding:10px 14px}.su-toast-compact .su-toast-body{display:none}.su-toast-dark{background:#242638;color:#f1effa;border-color:#42455c}.su-toast-dark .su-toast-body,.su-toast-dark .su-toast-close{color:#c8c9db}.su-toast-dark>svg{color:#b5a7ff}.su-toast-stage[data-position=left]{align-items:start}.su-toast-stage[data-position=center]{align-items:center}.su-toast-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;background:var(--su-bg);border-radius:8px}.su-toast-output{min-height:24px}@keyframes su-toast-count{to{transform:scaleX(0)}}\n",
          "js": "(function toastInit() {\n const stage=root.querySelector('[data-toast-stage]'),template=root.querySelector('template');let serial=0;\n const show=(title,description,options={})=>{const fragment=template.content.cloneNode(true),toast=fragment.querySelector('.su-toast');serial++;toast.dataset.toastId=String(serial);toast.querySelector('[data-title]').textContent=title;const body=toast.querySelector('[data-body]');if(body)body.textContent=description||'';stage.append(fragment);while(stage.children.length>3)stage.firstElementChild.remove();const closer=toast.querySelector('[data-close]');if(closer)closer.addEventListener('click',()=>toast.remove());const action=toast.querySelector('[data-action]');if(action&&options.action){action.hidden=false;action.textContent=options.label;action.addEventListener('click',()=>options.action(toast));}else if(action)action.hidden=true;\n if(options.auto){let remaining=5000,start=0,timer,running=false;const bar=toast.querySelector('.su-toast-countdown');const resume=()=>{if(!toast.isConnected||running)return;running=true;start=Date.now();timer=setTimeout(()=>toast.remove(),remaining);if(bar)bar.style.animationPlayState='running';};const pause=()=>{if(!running)return;running=false;clearTimeout(timer);remaining=Math.max(0,remaining-(Date.now()-start));if(bar)bar.style.animationPlayState='paused';};toast.addEventListener('pointerenter',pause);toast.addEventListener('pointerleave',()=>{if(!toast.contains(document.activeElement))resume();});toast.addEventListener('focusin',pause);toast.addEventListener('focusout',event=>{if(!toast.contains(event.relatedTarget)&&!toast.matches(':hover'))resume();});resume();}\n return toast;};\n const status=root.querySelector('[data-toast-output]');\n root.querySelectorAll('[data-trigger]').forEach(button=>button.addEventListener('click',async()=>{\n const mode=button.dataset.trigger;\n if(mode==='undo'){const row=root.querySelector('[data-archive-row]');row.hidden=true;button.disabled=true;show('已归档演示笔记','你可以撤销本次演示操作。',{label:'撤销归档',action:toast=>{row.hidden=false;button.disabled=false;toast.remove();status.textContent='笔记已恢复';}});}\n else if(mode==='retry')show('暂时无法保存','这是模拟错误，不会发出网络请求。',{label:'重试演示',action:toast=>{toast.querySelector('[data-title]').textContent='重试成功';toast.querySelector('[data-body]').textContent='演示内容已保存。';toast.querySelector('[data-action]').hidden=true;toast.classList.remove('su-toast-error');toast.classList.add('su-toast-success');}});\n else if(mode==='async'){button.disabled=true;const toast=show('正在导出','正在生成本地演示内容…');setTimeout(()=>{if(toast.isConnected){toast.querySelector('[data-title]').textContent='演示导出完成';toast.querySelector('[data-body]').textContent='状态已从处理中切换为完成。';toast.classList.add('su-toast-success');}button.disabled=false;},850);}\n else if(mode==='action')show('演示导入完成','共识别 3 条演示记录。',{label:'查看导入摘要',action:toast=>{status.textContent='摘要：成功 3 条，失败 0 条（演示数据）';toast.remove();}});\n else if(mode==='copy'){const input=root.querySelector('[data-copy-value]');input.select();let copied=false;try{if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(input.value);copied=true;}else copied=document.execCommand('copy');}catch{}show(copied?'已复制演示文字':'请手动复制选中文字',copied?'可以粘贴到本地文本编辑器。':'当前浏览器限制了剪贴板权限。');}\n else if(mode==='network'){const online=button.dataset.online!=='yes';button.dataset.online=online?'yes':'no';button.textContent=online?'模拟离线':'模拟恢复连接';show(online?'演示连接已恢复':'演示连接已中断',online?'现在可以继续查看演示内容。':'这只是本地状态模拟，未改变实际网络。');}\n else if(mode==='counter'){const count=Number(button.dataset.count||0)+1;button.dataset.count=String(count);show('第 '+count+' 条演示通知','最多保留最近 3 条，可以逐条关闭。');}\n else show(button.dataset.title||'演示设置已保存',button.dataset.body||'本次操作只作用于这个演示。',{auto:mode==='auto'});\n }));\n const position=root.querySelector('[data-position]');if(position)position.addEventListener('change',()=>{stage.dataset.position=position.value;status.textContent='通知位置已切换';});\n})();",
          "tags": [
            "状态反馈"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    },
    {
      "id": "tooltip",
      "name": "文字提示",
      "description": "在悬停与聚焦时补充必要说明。",
      "group": "反馈",
      "icon": "info",
      "samples": [
        {
          "id": "tooltip-top",
          "category": "tooltip",
          "title": "上方提示",
          "description": "按钮的补充说明默认出现在上方。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-btn su-btn-secondary\" data-tip-trigger aria-describedby=\"su-help\"  data-action=\"演示草稿已保存\">保存草稿</button><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>保存后仍可继续编辑。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-positions",
          "category": "tooltip",
          "title": "四向提示",
          "description": "根据触发元素的位置选择提示方向。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-tip-icon\" data-tip-trigger aria-describedby=\"su-tip-left\"  aria-label=\"查看左侧说明\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 5 7 7-7 7\"/></svg></button><span class=\"su-tip \" role=\"tooltip\" id=\"su-tip-left\" data-side=\"left\" hidden>左侧说明</span></span><span class=\"su-tip-wrap\"><button class=\"su-tip-icon\" data-tip-trigger aria-describedby=\"su-tip-bottom\"  aria-label=\"查看下方说明\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10v.1\"/></svg></button><span class=\"su-tip \" role=\"tooltip\" id=\"su-tip-bottom\" data-side=\"bottom\" hidden>下方说明</span></span><span class=\"su-tip-wrap\"><button class=\"su-tip-icon\" data-tip-trigger aria-describedby=\"su-tip-right\"  aria-label=\"查看右侧说明\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12h16m-6-6 6 6-6 6\"/></svg></button><span class=\"su-tip \" role=\"tooltip\" id=\"su-tip-right\" data-side=\"right\" hidden>右侧说明</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-icon",
          "category": "tooltip",
          "title": "图标操作说明",
          "description": "纯图标按钮同时提供可访问名称和视觉提示。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-tip-icon\" data-tip-trigger aria-describedby=\"su-help\"  aria-label=\"收藏演示项目\" data-action=\"演示项目已收藏\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\"/></svg></button><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>收藏这个演示项目。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-inline",
          "category": "tooltip",
          "title": "正文词语解释",
          "description": "解释术语，内容也能通过键盘获得。",
          "html": "<div class=\"su-tip-area\"><p>每个空间可设置独立的 <span class=\"su-tip-wrap\"><button class=\"su-tip-underlined\" data-tip-trigger aria-describedby=\"su-help\" >可见范围</button><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>决定哪些演示成员可以查看此空间。</span></span>。</p></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-shortcut",
          "category": "tooltip",
          "title": "操作快捷键",
          "description": "补充快捷键说明，但不劫持系统按键。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-btn su-btn-secondary\" data-tip-trigger aria-describedby=\"su-help\"  data-action=\"已打开演示查找说明\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/></svg> 查找</button><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden><span class=\"su-tip-kbd\">查找内容 <kbd>⌘ K</kbd></span></span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-rich",
          "category": "tooltip",
          "title": "多行说明",
          "description": "标题与说明分层，内容保持简短。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-btn su-btn-secondary\" data-tip-trigger aria-describedby=\"su-help\" >查看空间权限</button><span class=\"su-tip su-tip-rich\" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden><strong>演示成员权限</strong><span>成员可查看内容；管理员可修改设置并邀请其他成员。</span></span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-delayed",
          "category": "tooltip",
          "title": "延迟出现",
          "description": "悬停约半秒再显示，减少掠过时的干扰。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-btn su-btn-secondary\" data-tip-trigger aria-describedby=\"su-help\" data-delay=\"500\">停留片刻</button><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>延迟 500 毫秒出现的演示提示。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-field",
          "category": "tooltip",
          "title": "输入字段帮助",
          "description": "聚焦输入框时显示填写要求。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><input class=\"su-input\" data-tip-trigger aria-describedby=\"su-help\"  aria-label=\"演示项目名称\" placeholder=\"填写项目名称\"><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"bottom\" hidden>建议使用 2 至 20 个字，方便列表识别。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-disabled",
          "category": "tooltip",
          "title": "不可用原因",
          "description": "禁用按钮外的可聚焦容器解释限制原因。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><span class=\"su-tip-trigger-disabled\" data-tip-trigger aria-describedby=\"su-help\"  tabindex=\"0\" role=\"group\" aria-label=\"发布演示，不可用\"><button class=\"su-btn\" disabled tabindex=\"-1\">发布演示</button></span><span class=\"su-tip \" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>请先填写演示项目名称。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-truncated",
          "category": "tooltip",
          "title": "完整名称",
          "description": "长名称截断后，可查看完整信息。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-tip-truncate\" data-tip-trigger aria-describedby=\"su-help\" >本季度组件交互与可访问性改进计划</button><span class=\"su-tip su-tip-rich\" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>本季度组件交互与可访问性改进计划</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-light",
          "category": "tooltip",
          "title": "浅色帮助面板",
          "description": "浅色浮层通过边框与阴影区分层级。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-tip-icon\" data-tip-trigger aria-describedby=\"su-help\"  aria-label=\"查看日期说明\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10v.1\"/></svg></button><span class=\"su-tip su-tip-light\" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden>所有日期均为本地演示日期。</span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [],
          "height": 288,
          "license": "MIT"
        },
        {
          "id": "tooltip-progress",
          "category": "tooltip",
          "title": "指标详细信息",
          "description": "为图标补充数字与可读进度说明。",
          "html": "<div class=\"su-tip-area\"><span class=\"su-tip-wrap\"><button class=\"su-btn su-btn-secondary\" data-tip-trigger aria-describedby=\"su-help\" ><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"/></svg> 存储用量</button><span class=\"su-tip su-tip-rich\" role=\"tooltip\" id=\"su-help\" data-side=\"top\" hidden><strong>演示空间用量</strong><span>已使用 68%，剩余 32%。</span><span class=\"su-tip-progress\" aria-hidden=\"true\"></span></span></span></div><p class=\"su-muted su-small su-tip-output\" data-tip-output role=\"status\">鼠标悬停或键盘聚焦查看说明，按退出键关闭。</p>",
          "css": "\n.su-tip-area{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:48px 18px;min-height:145px}.su-tip-wrap{display:inline-flex;position:relative;align-items:center;gap:5px}.su-tip{position:absolute;z-index:5;width:max-content;max-width:min(220px,65vw);background:#25283a;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.6;box-shadow:0 5px 14px #171b3520;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);pointer-events:auto}.su-tip::after{content:\"\";position:absolute;width:7px;height:7px;background:inherit;left:50%;bottom:-3px;transform:translateX(-50%) rotate(45deg)}.su-tip[data-side=bottom]{top:calc(100% + 9px);bottom:auto}.su-tip[data-side=bottom]::after{bottom:auto;top:-3px}.su-tip[data-side=left]{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=left]::after{left:auto;right:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip[data-side=right]{left:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%)}.su-tip[data-side=right]::after{left:-3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}.su-tip-icon{width:34px;height:34px;border-radius:7px;background:transparent;color:var(--su-muted);border:1px solid var(--su-border);display:inline-flex;align-items:center;justify-content:center}.su-tip-underlined{text-decoration:underline dotted;text-underline-offset:4px;color:var(--su-primary);cursor:help;border:0;background:transparent;padding:0}.su-tip-rich{width:210px;text-align:left;padding:12px}.su-tip-rich strong{display:block;margin-bottom:4px;font-size:13px}.su-tip-rich span{color:#deddec}.su-tip-light{background:var(--su-surface);color:var(--su-text);border:1px solid var(--su-border)}.su-tip-kbd{display:flex;align-items:center;gap:14px}.su-tip-kbd kbd{background:#44475e;border-color:#60647b;color:#fff}.su-tip-output{min-height:24px}.su-tip-wrap>.su-input{max-width:220px}.su-tip-truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;background:transparent;color:var(--su-text);padding:5px}.su-tip-trigger-disabled{display:inline-flex;cursor:help}.su-tip-progress{display:block;width:150px;height:7px;background:#55596c;border-radius:8px;margin-top:8px;overflow:hidden}.su-tip-progress::before{content:\"\";display:block;width:68%;height:100%;background:#b5a7ff}\n",
          "js": "(function tooltipInit(){\n const dismissers=[];\n root.querySelectorAll('[data-tip-trigger]').forEach(trigger=>{const wrap=trigger.closest('.su-tip-wrap'),tip=wrap.querySelector('[role=tooltip]');let timer,hideTimer,closed=false;const hide=()=>{clearTimeout(timer);clearTimeout(hideTimer);tip.hidden=true;};const show=()=>{if(closed)return;clearTimeout(timer);clearTimeout(hideTimer);timer=setTimeout(()=>tip.hidden=false,Number(trigger.dataset.delay||0));};const leave=()=>{clearTimeout(timer);if(!wrap.contains(document.activeElement))hideTimer=setTimeout(hide,140);};dismissers.push(()=>{hide();closed=true;});wrap.addEventListener('pointerenter',()=>{closed=false;show();});wrap.addEventListener('pointerleave',leave);tip.addEventListener('pointerenter',()=>clearTimeout(hideTimer));tip.addEventListener('pointerleave',leave);trigger.addEventListener('focus',()=>{closed=false;show();});trigger.addEventListener('blur',hide);trigger.addEventListener('click',()=>{const out=root.querySelector('[data-tip-output]');if(out&&trigger.dataset.action){out.textContent=trigger.dataset.action;}});});\n document.addEventListener('keydown',event=>{if(event.key==='Escape')dismissers.forEach(dismiss=>dismiss());});\n})();",
          "tags": [
            "数据说明"
          ],
          "height": 288,
          "license": "MIT"
        }
      ]
    }
  ]
}