@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/tabs.css

@@ -1,62 +1,68 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: tabs（分区导航 / 子导航）
  *
  * 完整契约：
- *   <div class="tabs" role="tablist">                            ← 页面内分区
- *     <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
+ *   <div class="icen-tabs" role="tablist">                            ← 页面内分区
+ *     <button class="icen-page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
  *   </div>
  *
- *   <nav class="tabs" role="navigation">                         ← 顶部子导航（a 链接）
+ *   <icen-nav class="icen-tabs" role="navigation">                         ← 顶部子导航（a 链接）
  *     <a class="[.is-active]" [aria-current="page"] href="…">…</a>
- *   </nav>
+ *   </icen-nav>
  *
- * 与 behaviors/tabs 配套：[data-tabs] > [data-tab] + [data-tab-panel]，行为层维护 aria。
+ * 与 behaviors/tabs 配套：[data-icen-tabs] > [data-icen-tab] + [data-icen-tab-panel]，行为层维护 aria。
  * 窄屏换行不滚动（纪律：tab 条永不出现滚动条，一律 flex-wrap: wrap）。
  */
 
-.tabs {
+.icen-tabs {
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
-  border-bottom: 1px solid var(--token-line-soft);
-  margin-bottom: var(--density-space-lg);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  margin-bottom: var(--icen-density-space-lg);
 }
 
-.page-tab {
+.icen-page-tab {
   background: none;
   border: 0;
   cursor: pointer;
-  padding: var(--density-space-sm) var(--density-space-md);
-  font-family: var(--font-mono);
-  font-size: var(--density-font-size-md);
-  letter-spacing: 0.05em;
-  color: var(--token-text-muted);
+  padding: 6px var(--icen-density-space-sm);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
+  letter-spacing: 0;
+  color: var(--icen-token-text-muted);
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
+  border-radius: var(--icen-radius-xs) var(--icen-radius-xs) 0 0;
   white-space: nowrap;
   transition:
     color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.page-tab:hover {
-  color: var(--token-accent);
+.icen-page-tab:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
 }
-.page-tab:focus-visible {
+.icen-page-tab:focus-visible {
   outline: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--icen-radius-sm);
   box-shadow: var(--icen-ring);
 }
-.page-tab.is-active,
-.page-tab[aria-selected='true'] {
-  color: var(--token-accent);
-  border-bottom-color: var(--token-accent);
-  font-weight: 700;
+.icen-page-tab.is-active,
+.icen-page-tab[aria-selected='true'] {
+  color: var(--icen-token-text);
+  border-bottom-color: var(--icen-token-accent);
+  font-weight: 600;
 }
 
-.tabs a {
-  padding: var(--density-space-sm) var(--density-space-md);
-  font-size: var(--density-font-size-md);
-  color: var(--token-text-muted);
+.icen-tabs a {
+  padding: 6px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
+  color: var(--icen-token-text-muted);
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   white-space: nowrap;
@@ -65,44 +71,46 @@
     color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.tabs a:hover {
-  color: var(--token-accent);
+.icen-tabs a:hover {
+  color: var(--icen-token-text);
   text-decoration: none;
 }
-.tabs a:focus-visible {
+.icen-tabs a:focus-visible {
   outline: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--icen-radius-sm);
   box-shadow: var(--icen-ring);
 }
-.tabs a.is-active,
-.tabs a[aria-current='page'] {
-  color: var(--token-accent);
-  border-bottom-color: var(--token-accent);
+.icen-tabs a.is-active,
+.icen-tabs a[aria-current='page'] {
+  color: var(--icen-token-accent);
+  border-bottom-color: var(--icen-token-accent);
 }
 
-/* 卡片变体（可选 .tabs--cards）：tab 变成 pill，没有底边线 */
-.tabs--cards {
+/* 卡片变体（可选 .icen-tabs--cards）：tab 变成 pill，没有底边线 */
+.icen-tabs--cards {
   border-bottom: 0;
-  gap: var(--density-space-xs);
-  margin-bottom: var(--density-space-md);
+  gap: var(--icen-density-space-xs);
+  margin-bottom: var(--icen-density-space-md);
 }
-.tabs--cards .page-tab {
-  padding: var(--density-space-xs) var(--density-space-md);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-full);
+.icen-tabs--cards .icen-page-tab {
+  padding: var(--icen-density-space-xs) var(--icen-density-space-md);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-full);
   margin-bottom: 0;
+  color: var(--icen-token-text-muted);
+  background: var(--icen-token-control);
 }
-.tabs--cards .page-tab.is-active,
-.tabs--cards .page-tab[aria-selected='true'] {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
-  border-color: var(--token-accent);
-  font-weight: 500;
+.icen-tabs--cards .icen-page-tab.is-active,
+.icen-tabs--cards .icen-page-tab[aria-selected='true'] {
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 28%, var(--icen-token-line-soft));
+  font-weight: 600;
 }
 
 /* 等宽变体：tab 平均占满容器 */
-.tabs--equal .page-tab,
-.tabs--equal a {
+.icen-tabs--equal .icen-page-tab,
+.icen-tabs--equal a {
   flex: 1;
   text-align: center;
 }
@@ -110,137 +118,156 @@
 /* ── 增强 ── */
 
 /* 尺寸变体 */
-.tabs--sm .page-tab {
-  padding: var(--density-space-xs) var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
+.icen-tabs--sm .icen-page-tab {
+  padding: 4px var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
 }
-.tabs--lg .page-tab {
-  padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
-  font-size: var(--density-font-size-lg);
+.icen-tabs--lg .icen-page-tab {
+  padding: 8px calc(var(--icen-density-space-md) + 2px);
+  font-size: var(--icen-density-font-size-lg);
 }
 
 /* Tab 带图标 */
-.page-tab-icon {
+.icen-page-tab-icon {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
-  margin-right: 2px;
+  margin-inline-end: 2px;
 }
 
 /* Tab 带徽章/计数 */
-.page-tab-badge {
+.icen-page-tab-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  margin-left: var(--density-space-xs);
-  font-size: var(--density-font-size-2xs);
+  margin-inline-start: var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-2xs);
   font-weight: 600;
-  color: var(--token-text-faint);
-  background: var(--token-fill-2);
-  border-radius: var(--radius-full);
+  color: var(--icen-token-text-faint);
+  background: var(--icen-token-fill-2);
+  border-radius: var(--icen-radius-full);
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.page-tab.is-active .page-tab-badge,
-.page-tab[aria-selected='true'] .page-tab-badge {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
+.icen-page-tab.is-active .icen-page-tab-badge,
+.icen-page-tab[aria-selected='true'] .icen-page-tab-badge {
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
 }
 
 /* 可关闭 tab */
-.page-tab-close {
+.icen-page-tab-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-left: var(--density-space-xs);
-  margin-right: -4px;
+  width: 24px; /* WCAG 2.5.8 下限：16px 关闭钮过小（svg 视觉仍 10px） */
+  height: 24px;
+  margin-inline-start: var(--icen-density-space-xs);
+  margin-inline-end: -4px;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-full);
+  border-radius: var(--icen-radius-full);
   background: transparent;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.page-tab-close:hover {
-  color: var(--token-error);
-  background: var(--token-error-muted);
+.icen-page-tab-close:hover {
+  color: var(--icen-token-error);
+  background: var(--icen-token-error-muted);
+}
+.icen-page-tab-close:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring); /* 与 .icen-page-tab 同款系统环（缺省会落回浏览器默认蓝圈） */
 }
-.page-tab-close svg { width: 10px; height: 10px; }
+.icen-page-tab-close svg { width: 10px; height: 10px; }
 
 /* 分段式 tab（替代底边线，用 segmented 视觉） */
-.tabs--segment {
+.icen-tabs--segment {
   display: inline-flex;
   border-bottom: none;
   gap: 2px;
-  padding: 2px;
-  background: var(--token-panel);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-inset);
+  padding: 3px;
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: var(--icen-token-shadow-field);
 }
-.tabs--segment .page-tab {
+.icen-tabs--segment .icen-page-tab {
   border-bottom: none;
   margin-bottom: 0;
-  padding: var(--density-space-xs) var(--density-space-md);
-  border-radius: var(--radius-sm);
+  min-block-size: calc(var(--icen-control-height-sm) - 8px);
+  padding: 0 var(--icen-control-padding-inline-sm);
+  border-radius: max(0px, calc(var(--icen-control-radius-lg) - 3px));
 }
-.tabs--segment .page-tab.is-active,
-.tabs--segment .page-tab[aria-selected='true'] {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
-  border-bottom-color: transparent;
-  font-weight: 500;
+.icen-tabs--segment .icen-page-tab.is-active,
+.icen-tabs--segment .icen-page-tab[aria-selected='true'] {
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  border: 1px solid color-mix(in srgb, var(--icen-token-line) 72%, transparent);
+  margin: -1px;
+  border-bottom-color: color-mix(in srgb, var(--icen-token-line) 72%, transparent);
+  font-weight: var(--icen-font-weight-control);
+  box-shadow: var(--icen-token-shadow-control);
 }
 
-/* 垂直 tab（侧栏式） */
-.tabs--vertical {
+/* 垂直 tab（侧栏式）：轨道与指示条在 inline-end 侧，RTL 自动镜像到左缘 */
+.icen-tabs--vertical {
   flex-direction: column;
   border-bottom: none;
-  border-right: 1px solid var(--token-line-soft);
+  border-inline-end: 1px solid var(--icen-token-separator-soft);
   margin-bottom: 0;
-  min-width: 160px;
+  min-inline-size: 160px;
 }
-.tabs--vertical .page-tab {
+.icen-tabs--vertical .icen-page-tab {
   border-bottom: none;
-  border-right: 2px solid transparent;
+  border-inline-end: 2px solid transparent;
   margin-bottom: 0;
-  margin-right: -1px;
+  margin-inline-end: -1px;
+  border-start-start-radius: var(--icen-radius-xs);
+  border-end-start-radius: var(--icen-radius-xs);
+  min-block-size: var(--icen-control-height-sm);
+  text-align: start;
+  justify-content: flex-start;
 }
-.tabs--vertical .page-tab.is-active,
-.tabs--vertical .page-tab[aria-selected='true'] {
-  border-right-color: var(--token-accent);
+.icen-tabs--vertical .icen-page-tab.is-active,
+.icen-tabs--vertical .icen-page-tab[aria-selected='true'] {
+  border-inline-end-color: var(--icen-token-accent);
   border-bottom-color: transparent;
+  background: var(--icen-token-fill-selected);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .page-tab, .tabs a, .page-tab-close { transition: none; }
+  .icen-page-tab, .icen-tabs a, .icen-page-tab-close { transition: none; }
 }
 
-/* ── 指示条（[data-tabs-ink]，与 behaviors/tabs 配套；本节为追加）── */
-/* tablist（.tabs）挂 data-tabs-ink 时，行为层创建并移动 .tabs-ink：
+/* ── 指示条（[data-icen-tabs-ink]，与 behaviors/tabs 配套；本节为追加）── */
+/* tablist（.icen-tabs）挂 data-icen-tabs-ink 时，行为层创建并移动 .icen-tabs-ink：
    宽 / translateX 由 JS 内联写入（布局定位，同 popover 模式）；
    此处只负责视觉（高度 / 圆角 / 背景）与位移过渡（--duration / --ease token）。 */
-.tabs[data-tabs-ink] {
+.icen-tabs[data-icen-tabs-ink] {
   position: relative;
 }
-.tabs-ink {
+/* 挂墨水条时，活动 tab 自身的下划线让位（不双画） */
+.icen-tabs[data-icen-tabs-ink] .icen-page-tab.is-active,
+.icen-tabs[data-icen-tabs-ink] .icen-page-tab[aria-selected='true'] { border-bottom-color: transparent; }
+.icen-tabs-ink {
   position: absolute;
   bottom: -1px; /* 盖在容器 1px 底边线上，与活动 tab 的 2px 下划线同高 */
-  left: 0;
+  left: 0; /* guard:allow-physical 指示条由 JS 内联写 width/translateX 定位（popover 同模式），原点取物理左缘由布局函数计算 */
   height: 2px;
-  border-radius: var(--radius-full);
-  background: var(--token-accent);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-accent);
   pointer-events: none;
   transition:
-    width var(--duration-normal) var(--ease-out),
-    transform var(--duration-normal) var(--ease-out);
+    width var(--icen-duration-normal) var(--icen-ease-out),
+    transform var(--icen-duration-normal) var(--icen-ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .tabs-ink { transition: none; }
+  .icen-tabs-ink { transition: none; }
+}
+
 }

package/dist/components/tabs.d.mts

@@ -0,0 +1,2 @@
+// kit: tabs 类型面（构建产物，勿手改）
+export * from '../behaviors/tabs.mjs';

package/dist/components/tag-input.css

@@ -1,139 +1,58 @@
-/*
- * @icen.ai/ui — Component: tag-input（多值标签编辑）
- * 规格源自 opengal primitives/advanced-input.tsx 的 TagInput；与 behaviors/tag-input.ts 配套。
- *
- * 完整契约：
- *   <div class="tag-input control [.tag-input--sm|.tag-input--lg] [.is-disabled]"
- *        data-tags="初始,标签" data-max="5" data-duplicate="false|true">
- *     <input class="tag-input-field" placeholder="…" />
- *   </div>
- *
- * behavior 渲染：
- *   - 解析 data-tags → 渲染 .tag-chip（含 .tag-chip-x 删除钮），input 放在末尾
- *   - 达到 data-max 时容器加 .is-max（warning 色边框）并拒加
- *   - data-duplicate="false" 时重复值被拒绝（短暂 .is-shake 抖动反馈）
- *   - 删除钮 Enter/Space 触发，删后 input 自动聚焦
+@layer icen.components {
+/* Tag editor: native input.icen-tag-input-field inside .icen-tag-input.
+ * Behavior adds stable .icen-tag-chip > bdi.icen-tag-chip-label +
+ * button.icen-tag-chip-x, an optical .icen-tag-input-count, hidden native form
+ * entries, and an adjacent .icen-tag-input-feedback[role=status].
+ * --sm / --lg vary density; data-icen-readonly keeps labels without actions.
+ * is-max is a capacity state, is-unavailable follows actual disabled state.
  */
-
-.tag-input {
+.icen-tag-input {
+  --tag-action-size: calc(var(--icen-control-height-md) - 10px);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--density-space-xs);
-  padding: var(--density-space-xs);
-  min-height: var(--density-input-height-md);
-  background: var(--token-control);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-inset);
-  transition:
-    border-color var(--icen-tx-fast),
-    box-shadow var(--icen-tx-fast);
-}
-.tag-input:hover {
-  border-color: var(--icen-hover-border);
-}
-.tag-input:focus-within {
-  border-color: var(--icen-control-focus-border);
-  box-shadow: var(--icen-control-focus-shadow);
-}
-.tag-input.is-max,
-.tag-input.is-max:focus-within {
-  border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
-  box-shadow: var(--icen-ring-warning);
-}
-.tag-input.is-disabled,
-.tag-input[aria-disabled='true'],
-.tag-input[data-disabled] {
-  opacity: var(--icen-disabled-opacity);
-  background: var(--token-bg-soft);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.tag-input.is-disabled .tag-input-field { cursor: not-allowed; }
-.tag-input.is-disabled .tag-chip-x { pointer-events: none; }
-
-.tag-input--sm { min-height: var(--density-input-height-sm); }
-.tag-input--lg { min-height: var(--density-input-height-lg); }
-
-.tag-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 4px 2px var(--density-space-xs);
-  border-radius: var(--radius-full);
-  background: var(--token-accent-subtle);
-  color: var(--token-accent);
-  font-size: var(--density-font-size-xs);
-  font-weight: 500;
-  line-height: 1.4;
-  max-width: 100%;
-  animation: tag-pop var(--icen-tx-fast);
-}
-/* readonly 变体（消费方手写标记，behavior 不产出） */
-.tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
-
-@keyframes tag-pop {
-  from { opacity: 0; transform: scale(0.85); }
-  to { opacity: 1; transform: scale(1); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .tag-chip { animation: none; }
-}
-
-.tag-chip-x {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: var(--radius-full);
-  color: inherit;
-  font-size: var(--density-font-size-xs);
-  line-height: 1;
-  opacity: 0.7;
-  transition:
-    background-color var(--icen-tx-fast),
-    opacity var(--icen-tx-fast),
-    color var(--icen-tx-fast);
-}
-.tag-chip-x:hover {
-  opacity: 1;
-  background: color-mix(in srgb, currentColor 18%, transparent);
-  color: var(--token-on-accent);
-}
-.tag-chip-x:focus-visible {
-  outline: none;
-  opacity: 1;
-  box-shadow: var(--icen-ring);
-}
-.tag-chip-x svg { width: 10px; height: 10px; }
+  gap: var(--icen-density-space-xs);
+  padding: var(--icen-density-space-xs);
+  min-block-size: var(--icen-control-height-md);
+  background: var(--icen-token-control);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
+  transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
+}
+.icen-tag-input:focus-within { border-color: var(--icen-control-focus-border); box-shadow: var(--icen-control-focus-shadow); }
+.icen-tag-input--sm { --tag-action-size: calc(var(--icen-control-height-sm) - 8px); min-block-size: var(--icen-control-height-sm); }
+.icen-tag-input--lg { --tag-action-size: calc(var(--icen-control-height-lg) - 12px); min-block-size: var(--icen-control-height-lg); }
+.icen-tag-input:is(.is-disabled,.is-unavailable,[aria-disabled='true'],[data-icen-disabled]) { background: var(--icen-token-bg-soft); cursor: not-allowed; }
+.icen-tag-input.is-unavailable > .icen-tag-chip { background: var(--icen-token-fill-2); color: var(--icen-token-text-muted); }
+.icen-tag-input.is-unavailable .icen-tag-chip-x { visibility: hidden; }
+.icen-tag-input.is-unavailable :is(.icen-tag-input-field,.icen-tag-chip-x) { cursor: not-allowed; }
+.icen-tag-chip { display: inline-flex; align-items: center; gap: var(--icen-control-gap-sm); padding-inline-start: var(--icen-density-space-sm); border-radius: var(--icen-radius-full); background: var(--icen-token-accent-subtle); color: var(--icen-token-text); font-size: var(--icen-density-font-size-sm); font-weight: var(--icen-font-weight-control); line-height: 1.4; max-inline-size: 100%; min-inline-size: 0; animation: icen-pop-in var(--icen-tx-fast); }
+.icen-tag-chip-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.icen-tag-chip--readonly, .is-readonly > .icen-tag-chip { background: var(--icen-token-fill-2); color: var(--icen-token-text-muted); padding-inline: var(--icen-density-space-sm); min-block-size: var(--tag-action-size); }
+.icen-tag-chip-x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--tag-action-size); block-size: var(--tag-action-size); padding: 0; border: 0; border-radius: var(--icen-radius-full); color: inherit; background: transparent; cursor: pointer; transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), opacity var(--icen-tx-fast); }
+.icen-tag-chip-x svg { inline-size: 12px; block-size: 12px; pointer-events: none; }
+.icen-tag-chip-x[hidden] { display: none; }
+.icen-tag-chip-x:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: -2px; opacity: 1; }
+.icen-tag-input-field { flex: 1 1 6ch; min-inline-size: 6ch; max-inline-size: 100%; padding: var(--icen-density-space-xs); border: 0; background: transparent; outline: none; color: var(--icen-token-text); font: inherit; font-size: var(--icen-density-font-size-sm); }
+.icen-tag-input-field::placeholder { color: var(--icen-token-text-muted); opacity: 1; }
+.icen-tag-input--sm :is(.icen-tag-chip,.icen-tag-input-field) { font-size: var(--icen-density-font-size-xs); }
+.icen-tag-input--lg :is(.icen-tag-chip,.icen-tag-input-field) { font-size: var(--icen-density-font-size-md); }
+.icen-tag-input-count { flex: 0 0 auto; padding-inline: var(--icen-density-space-xs); color: var(--icen-token-text-muted); font-size: var(--icen-density-font-size-xs); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
+.icen-tag-input-feedback { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
+.icen-tag-input-feedback.is-visible { position: static; display: block; inline-size: auto; block-size: auto; margin-block-start: var(--icen-density-space-xs); overflow: visible; clip-path: none; color: var(--icen-token-text-muted); font-size: var(--icen-density-font-size-sm); }
+/* 行为侧错误（重复 tag / 超上限）可见时必挂 aria-invalid：错误文案走 error 色、
+   边框同步，否则错误与中性提示同灰、字段看不出异常（form.css 同款口径） */
+.icen-tag-input:has(.icen-tag-input-field[aria-invalid='true']) .icen-tag-input-feedback.is-visible { color: var(--icen-token-error); }
+.icen-tag-input:has(.icen-tag-input-field[aria-invalid='true']) { border-color: var(--icen-token-error); }
+@media (hover: hover) and (pointer: fine) {
+  .icen-tag-input:not(.is-unavailable):hover { border-color: var(--icen-hover-border); }
+  .icen-tag-chip-x { opacity: 0; }
+  .icen-tag-chip:is(:hover,:focus-within) .icen-tag-chip-x { opacity: 1; }
+  .icen-tag-chip-x:hover { background: var(--icen-token-fill-2); }
+}
+@media (pointer: coarse) { .icen-tag-chip-x { min-inline-size: 44px; min-block-size: 44px; opacity: 1; } .icen-tag-input-field { min-block-size: 44px; } }
+@media (prefers-reduced-motion: reduce) { .icen-tag-chip { animation: none; } .icen-tag-input, .icen-tag-chip-x { transition: none; } }
+@media (forced-colors: active) { .icen-tag-chip { border: 1px solid CanvasText; } .icen-tag-chip-x:focus-visible { outline-color: Highlight; } }
 
-.tag-input-field {
-  flex: 1;
-  min-width: 80px;
-  padding: 2px;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--token-text);
-  font: inherit;
-  font-size: var(--density-font-size-sm);
-}
-.tag-input-field::placeholder {
-  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
-}
-
-/* 重复值抖动反馈（behavior 短暂挂 is-shake） */
-.tag-input.is-shake {
-  animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
-}
-@keyframes tag-shake {
-  0%, 100% { transform: translateX(0); }
-  20%, 60% { transform: translateX(-3px); }
-  40%, 80% { transform: translateX(3px); }
 }

package/dist/components/tag-input.d.mts

@@ -0,0 +1,2 @@
+// kit: tag-input 类型面（构建产物，勿手改）
+export * from '../behaviors/tag-input.mjs';