iter: d12 新增可关闭标签 tag 组件

.ua/backlog.json

@@ -144,6 +144,14 @@
       "acceptance": "ModalProps 新增 size?: 'sm'|'md'|'lg'（340/420/640）与 footer?: unknown；footer 渲染右对齐操作区带上分割线；缺省行为与旧版一致；manifest/文档/llms-full.txt/demo 同步；npm run check 全绿",
       "status": "done",
       "notes": "宽度档位用 .ua-modal-sm/lg 覆盖基准 md，基础宽 min(420px,90vw) 不动；footer 仅在传入时渲染（null 分支不进 DOM）；demo 的弹窗改为 size:'lg' + 取消/确定 footer 按钮"
+    },
+    {
+      "id": "d12",
+      "title": "新增可关闭标签 tag 组件",
+      "motivation": "badge 纯展示无法移除，筛选条件/已选关键字需要带 × 的标签；补齐 badge 的交互版",
+      "acceptance": "新增 tag.ts：label + variant 五档 + closable/onClose；closable 时渲染带 aria-label 的 × 按钮；只消费 --ua-* 令牌；导出 / manifest / 文档 / llms-full.txt / demo 同步；npm run check 全绿",
+      "status": "done",
+      "notes": "组件无状态：onClose 只通知，节点由调用方按信号重渲染移除（与 form/formItem 返回句柄、dataTable 委托内核的哲学一致）；demo 用 signal<string[]> + renderList 演示真实删除链路，另有四档语义色静态展示"
     }
   ]
 }

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-23T08:54:30.235Z",
+  "generatedAt": "2026-10-23T08:55:03.791Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -130,7 +130,7 @@
     {
       "name": "@ui-arch/ui",
       "type": "skin-dom",
-      "description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
+      "description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / tag / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
       "tags": [
         "components",
         "dom",
@@ -155,6 +155,7 @@
           "breadcrumb(props)：面包屑，nav + ol 语义结构，末项为当前页（aria-current），有 href 走原生链接、无 href 交给 onNavigate",
           "card(props, ...children)：卡片容器",
           "badge(props)：徽标，variant = default | success | warning | danger",
+          "tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
           "alert(props)：提示条，variant = info | success | warning | danger",
           "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
           "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
@@ -201,7 +202,8 @@
           "FormProps",
           "DataTableProps",
           "PopoverProps",
-          "SliderProps"
+          "SliderProps",
+          "TagProps"
         ]
       },
       "usage": "const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')",
@@ -211,7 +213,7 @@
         "语义色 variant 四档：default|info / success / warning / danger，一律来自令牌，禁止硬编码颜色"
       ],
       "docs": {
-        "intro": "25 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
+        "intro": "26 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
         "steps": [
           "安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
           "引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",
@@ -694,6 +696,45 @@
               "状态语义靠 variant 承载，不要自造颜色；纯展示不可交互，需要操作请配 button"
             ]
           },
+          {
+            "id": "tag",
+            "title": "标签 Tag",
+            "demo": "sec-tag",
+            "props": [
+              {
+                "n": "label",
+                "t": "string",
+                "r": 1,
+                "d": "标签文案"
+              },
+              {
+                "n": "variant",
+                "t": "'default' | 'success' | 'warning' | 'danger' | 'info'",
+                "d": "语义色；缺省 default",
+                "df": "default"
+              },
+              {
+                "n": "closable",
+                "t": "boolean",
+                "d": "显示 × 关闭按钮；缺省 false（纯展示）",
+                "df": "false"
+              },
+              {
+                "n": "onClose",
+                "t": "() => void",
+                "k": 1,
+                "d": "关闭回调：调用方从数据源移除该项后重新渲染"
+              }
+            ],
+            "example": "tag({ label: '前端', variant: 'info', closable: true, onClose: () => remove('前端') })",
+            "steps": [
+              "纯展示用 badge，需要可移除的标签（筛选项 / 已选条件）用 tag",
+              "按语义选 variant：info 中性标记、success 通过、warning 待处理、danger 已失效",
+              "closable: true 时必须配 onClose：把数据源里的该项删掉再重渲染（组件无状态，不自行摘除节点）",
+              "组合用法：容器里用 renderList 按信号数组渲染 tag 列表，删除即写回信号",
+              "标签是内联元素，可直接排进 .row 等容器，自动换行由容器决定"
+            ]
+          },
           {
             "id": "alert",
             "title": "提示条 Alert",

.ua/iterations.log

@@ -16,3 +16,4 @@
 {"time": "2026-10-23T16:53:06+08:00", "id": "d09", "result": "done", "summary": "新增滑块 slider：value 信号双向绑定 + min/max/step + 布尔|信号禁用 + showValue，原生 range 承载键盘与触屏，accent-color 令牌化；manifest/llms/demo 同步，check 全绿"}
 {"time": "2026-10-23T16:53:44+08:00", "id": "d10", "result": "done", "summary": "toast 新增 closable（× 手动关闭）与同屏上限 4 条，退场统一走 dismiss() 双兜底；is-closable 才接收指针；demo/manifest/llms 同步，check 全绿"}
 {"time": "2026-10-23T16:54:36+08:00", "id": "d11", "result": "done", "summary": "modal 新增 size 三档（sm/md/lg）与 footer 操作区（右对齐 + 上分割线），缺省行为不变；demo/manifest/llms 同步，check 全绿"}
+{"time": "2026-10-23T16:55:10+08:00", "id": "d12", "result": "done", "summary": "新增可关闭标签 tag（五档语义色 + closable/onClose，无状态委托调用方重渲染）；demo 用 renderList 演示真实删除；manifest/llms 同步，check 全绿"}