@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/switch.css

@@ -24,9 +24,9 @@
 
 /* ── 开关 ── */
 .icen-switch {
-  --switch-w: 44px;
-  --switch-h: 24px;
-  --switch-thumb: 20px;
+  --switch-w: 38px;
+  --switch-h: 22px;
+  --switch-thumb: 18px;
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -35,13 +35,13 @@
   padding: 0;
   border: none;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-2);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-normal);
 }
 .icen-switch[aria-checked='true'] {
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
 }
 .icen-switch:disabled,
 .icen-switch[aria-disabled='true'],
@@ -57,26 +57,30 @@
 .icen-switch-thumb {
   position: absolute;
   top: 50%;
-  left: calc((var(--switch-h) - var(--switch-thumb)) / 2); /* guard:allow-physical 开关是物理隐喻控件（Material 惯例：RTL 下开/关方向保持物理，不镜像） */
+  left: calc((var(--switch-h) - var(--switch-thumb)) / 2); /* guard:allow-physical 开关是物理隐喻控件（RTL 下开/关方向保持物理，不镜像） */
   transform: translateY(-50%);
   width: var(--switch-thumb);
   height: var(--switch-thumb);
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-on-accent);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--icen-token-text) 15%, transparent);
-  transition: transform var(--icen-tx-bounce);
+  background: var(--icen-token-surface);
+  border: 0;
+  box-shadow:
+    0 0 0 .5px color-mix(in srgb, var(--icen-token-text) 16%, transparent),
+    0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) 22%, transparent),
+    0 2px 6px -2px color-mix(in srgb, var(--icen-design-shadow-color) 18%, transparent);
+  transition: transform var(--icen-duration-normal) var(--icen-ease-out);
 }
 .icen-switch[aria-checked='true'] .icen-switch-thumb {
   transform: translateY(-50%) translateX(calc(var(--switch-w) - var(--switch-h))); /* guard:allow-physical translateX 位移属物理动画语义（开关不随 RTL 镜像） */
 }
 
 /* 尺寸变体 */
-.icen-switch--sm { --switch-w: 36px; --switch-h: 20px; --switch-thumb: 16px; }
-.icen-switch--lg { --switch-w: 56px; --switch-h: 28px; --switch-thumb: 24px; }
+.icen-switch--sm { --switch-w: 32px; --switch-h: 18px; --switch-thumb: 14px; }
+.icen-switch--lg { --switch-w: 46px; --switch-h: 26px; --switch-thumb: 22px; }
 
 /* ── 勾选框（✓ 与半选横条均 ::before 自绘） ── */
 .icen-checkbox {
-  --checkbox-size: 16px;
+  --checkbox-size: 15px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -86,8 +90,8 @@
   padding: 0;
   background: var(--icen-token-control);
   color: transparent;
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-sm);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition:
@@ -97,7 +101,7 @@
     box-shadow var(--icen-tx-fast);
 }
 .icen-checkbox:hover:not([aria-checked='true']):not([aria-checked='mixed']):not(:disabled) {
-  border-color: color-mix(in srgb, var(--icen-token-accent) 50%, transparent);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-checkbox[aria-checked='true'],
 .icen-checkbox[aria-checked='mixed'] {
@@ -107,20 +111,21 @@
 }
 .icen-checkbox::before {
   content: '';
-  width: 40%;
-  height: 40%;
+  inline-size: 11px;
+  block-size: 11px;
   background: currentColor;
   opacity: 0;
-  clip-path: none;
-  border-radius: max(0px, calc(var(--icen-radius-xs) - var(--icen-density-space-xs)));
+  mask: var(--icen-token-icon-check) center / contain no-repeat;
+  -webkit-mask: var(--icen-token-icon-check) center / contain no-repeat;
+  transition: opacity var(--icen-duration-fast) var(--icen-ease-out);
 }
 .icen-checkbox[aria-checked='true']::before { opacity: 1; }
 .icen-checkbox[aria-checked='mixed']::before {
   opacity: 1;
-  width: 60%;
-  height: 2px;
-  clip-path: none;
-  border-radius: var(--icen-radius-full);
+  inline-size: 9px;
+  block-size: 9px;
+  mask-image: var(--icen-token-icon-minus);
+  -webkit-mask-image: var(--icen-token-icon-minus);
 }
 .icen-checkbox:disabled,
 .icen-checkbox[aria-disabled='true'],
@@ -133,8 +138,8 @@
   box-shadow: var(--icen-ring);
 }
 
-.icen-checkbox--sm { --checkbox-size: 14px; }
-.icen-checkbox--lg { --checkbox-size: 20px; }
+.icen-checkbox--sm { --checkbox-size: 13px; }
+.icen-checkbox--lg { --checkbox-size: 18px; }
 
 /* ── 单选行（radio item：整行可点） ── */
 .icen-radio-group {
@@ -148,13 +153,14 @@
   align-items: center;
   gap: var(--icen-density-space-sm);
   width: 100%;
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  font-size: var(--icen-density-font-size-md);
+  min-block-size: calc(var(--icen-control-height-sm) + 2px);
+  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   border: 1px solid transparent;
   background: transparent;
   color: var(--icen-token-text);
-  border-radius: var(--icen-radius-md);
+  border-radius: var(--icen-control-radius);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition:
@@ -163,14 +169,14 @@
     border-color var(--icen-tx-fast);
 }
 .icen-radio-item:hover:not(.is-disabled) {
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 .icen-radio-item.is-selected,
 .icen-radio-item[aria-checked='true'] {
   background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
+  color: var(--icen-token-text);
   font-weight: 500;
-  border-color: color-mix(in srgb, var(--icen-token-accent) 25%, transparent);
+  border-color: transparent;
 }
 .icen-radio-item:focus-visible {
   outline: none;
@@ -185,26 +191,26 @@
 
 .icen-radio-dot {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
   flex-shrink: 0;
-  border: 1px solid var(--icen-token-outline-soft);
+  border: 1px solid var(--icen-token-control-border);
   border-radius: var(--icen-radius-full);
   background: var(--icen-token-control);
   transition: border-color var(--icen-tx-fast);
 }
 .icen-radio-item.is-selected .icen-radio-dot,
-.icen-radio-item[aria-checked='true'] .icen-radio-dot { border-color: var(--icen-token-accent); }
+.icen-radio-item[aria-checked='true'] .icen-radio-dot { border-color: var(--icen-token-accent-strong); }
 .icen-radio-dot::after {
   content: '';
   position: absolute;
   top: 50%; left: 50%; /* guard:allow-physical 圆心居中：left 50% + translate(-50%) 任意方向下均为圆心 */
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transform: translate(-50%, -50%) scale(0);
-  transition: transform var(--icen-tx-bounce);
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out);
 }
 .icen-radio-item.is-selected .icen-radio-dot::after,
 .icen-radio-item[aria-checked='true'] .icen-radio-dot::after {
@@ -353,4 +359,37 @@
   .icen-radio-card { transition: none; }
 }
 
+/* 高对比模式：开关/勾选/单选靠底色与 mask 表达状态，强制颜色会抹平——
+   用系统高亮色 + forced-color-adjust:none 保住「开/关」的可辨差异。 */
+@media (forced-colors: active) {
+  .icen-switch {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+  .icen-switch[aria-checked='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .icen-switch-thumb {
+    forced-color-adjust: none;
+    background: CanvasText;
+    border: 1px solid Canvas;
+  }
+  .icen-switch[aria-checked='true'] .icen-switch-thumb { background: HighlightText; }
+  .icen-checkbox[aria-checked='true'],
+  .icen-checkbox[aria-checked='mixed'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+  .icen-checkbox::before { forced-color-adjust: none; background: HighlightText; }
+  .icen-radio-dot::after { forced-color-adjust: none; background: Highlight; }
+  .icen-radio-item.is-selected,
+  .icen-radio-item[aria-checked='true'] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .icen-radio-card.is-selected,
+  .icen-radio-card[aria-checked='true'] { border-color: Highlight; }
+}
+
 }

package/dist/components/switch.d.mts

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

package/dist/components/table.css

@@ -33,38 +33,37 @@
 .icen-table-wrap {
   overflow-x: auto;
   overscroll-behavior: contain;
-  border-radius: var(--icen-radius-lg);
+  border-radius: var(--icen-control-radius-lg);
 }
 .icen-table-wrap--bordered {
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-separator-soft);
 }
 
 .icen-table {
   inline-size: 100%;
   border-collapse: collapse;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   font-variant-numeric: tabular-nums;
 }
 .icen-table th,
 .icen-table td {
-  padding: var(--icen-density-space-sm) calc(var(--icen-density-space-md) + 2px);
+  padding: 6px 10px;
   text-align: start;
 }
 .icen-table th {
   font-weight: 600;
-  font-size: var(--icen-density-font-size-xs);
-  letter-spacing: 0.05em;
-  color: var(--icen-token-text-faint);
-  border-bottom: 1px solid var(--icen-token-line);
+  font-size: var(--icen-font-size-caption);
+  letter-spacing: var(--icen-letter-spacing-caption);
+  color: var(--icen-token-text-muted);
+  border-bottom: 1px solid var(--icen-token-separator);
   white-space: nowrap;
-  text-transform: uppercase;
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
   position: sticky;
   top: 0;
   z-index: var(--icen-z-raised);
 }
 .icen-table td {
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   vertical-align: middle;
   color: var(--icen-token-text);
 }
@@ -73,29 +72,29 @@
   transition: background-color var(--icen-tx-fast);
 }
 .icen-table tbody tr:hover {
-  background: var(--icen-token-surface-strong);
+  background: var(--icen-token-fill-hover);
 }
 .icen-table tbody tr.icen-row-link {
   cursor: pointer;
 }
 .icen-table tbody tr.is-selected {
-  background: var(--icen-token-accent-subtle);
+  background: var(--icen-token-fill-selected);
 }
 .icen-table tfoot td {
-  border-top: 1px solid var(--icen-token-line);
+  border-top: 1px solid var(--icen-token-separator);
   border-bottom: 0;
   font-weight: 500;
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
 }
 
 /* 紧凑变体 */
 .icen-table--compact th,
 .icen-table--compact td {
-  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  padding: 4px 8px;
 }
 .icen-table--dense th,
 .icen-table--dense td {
-  padding: 4px var(--icen-density-space-xs);
+  padding: 2px 6px;
   font-size: var(--icen-density-font-size-sm);
 }
 
@@ -150,18 +149,20 @@
   mask: var(--icen-token-icon-arrow-down) center / contain no-repeat; opacity: 1; color: var(--icen-token-accent); }
 
 /* ── 斑马纹 ── */
-.icen-table--zebra tbody tr:nth-child(odd) {
-  background: color-mix(in srgb, var(--icen-token-bg-soft) 50%, transparent);
+/* :not 守卫：斑马纹与状态行同为行级背景，后写同特异性会盖掉选中/状态色
+   （ datatable.css 同款口径） */
+.icen-table--zebra tbody tr:nth-child(odd):not(.is-selected):not(.icen-row-success, .icen-row-warning, .icen-row-error) {
+  background: color-mix(in srgb, var(--icen-token-fill-hover) 55%, transparent);
 }
-.icen-table--zebra tbody tr:hover {
-  background: var(--icen-token-surface-strong);
+.icen-table--zebra tbody tr:hover:not(.is-selected):not(.icen-row-success, .icen-row-warning, .icen-row-error) {
+  background: var(--icen-token-fill-hover);
 }
 
 /* ── 表格标题（caption） ── */
 .icen-table-caption {
   text-align: start;
-  padding: var(--icen-density-space-sm) calc(var(--icen-density-space-md) + 2px);
-  font-size: var(--icen-density-font-size-md);
+  padding: 8px 10px;
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
   color: var(--icen-token-text);
   caption-side: top;
@@ -173,21 +174,30 @@
   position: sticky;
   inset-inline-start: 0;
   z-index: calc(var(--icen-z-raised) + 1);
-  background: var(--icen-token-bg-soft);
-  box-shadow: 2px 0 4px color-mix(in srgb, var(--icen-token-text) 5%, transparent);
+  background: var(--icen-token-surface-chrome);
+  box-shadow: 1px 0 0 var(--icen-token-separator-soft);
 }
 .icen-table--sticky-col tbody td.icen-col-fixed {
   background: var(--icen-token-surface);
 }
+/* 粘滞列是不透明面：选中/斑马/状态的行级底色透不上来，需在此重铺，
+   否则整行只有粘滞列一格「没被选中」，读起来像半选 */
+.icen-table--sticky-col tbody tr.is-selected td.icen-col-fixed,
+.icen-table--sticky-col tbody tr.is-selected th:first-child {
+  background: color-mix(in srgb, var(--icen-token-accent) 13%, var(--icen-token-surface));
+}
+.icen-table--sticky-col tbody tr.icen-row-success td.icen-col-fixed { background: color-mix(in srgb, var(--icen-token-success) 6%, var(--icen-token-surface)); }
+.icen-table--sticky-col tbody tr.icen-row-warning td.icen-col-fixed { background: color-mix(in srgb, var(--icen-token-warning) 6%, var(--icen-token-surface)); }
+.icen-table--sticky-col tbody tr.icen-row-error td.icen-col-fixed { background: color-mix(in srgb, var(--icen-token-error) 6%, var(--icen-token-surface)); }
 .icen-table--sticky-col tbody tr:hover td.icen-col-fixed {
-  background: var(--icen-token-surface-strong);
+  background: color-mix(in srgb, var(--icen-token-fill-hover) 65%, var(--icen-token-surface));
 }
 
 /* ── 展开行 ── */
 .icen-table .icen-row-expand > td {
-  padding: 0 var(--icen-density-space-md);
-  background: var(--icen-token-bg-soft);
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  padding: 0 10px;
+  background: var(--icen-token-surface-chrome);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
 }
@@ -195,7 +205,7 @@
 /* 展开行的内容容器（使用方可加 padding/动画） */
 .icen-row-expand-content {
   padding: var(--icen-density-space-sm) 0;
-  animation: row-expand-in var(--icen-tx-fast) var(--icen-ease-out);
+  animation: row-expand-in var(--icen-duration-fast) var(--icen-ease-out);
 }
 @keyframes row-expand-in {
   from { opacity: 0; transform: translateY(-4px); }
@@ -212,9 +222,9 @@
 .icen-table tbody tr.icen-row-warning { background: color-mix(in srgb, var(--icen-token-warning) 6%, transparent); }
 .icen-table tbody tr.icen-row-error   { background: color-mix(in srgb, var(--icen-token-error) 6%, transparent); }
 
-/* ── 粘滞表头阴影提示 ── */
+/* ── 粘滞表头提示：底部 1px 分隔已足够，不再叠阴影 ── */
 .icen-table thead th {
-  box-shadow: 0 1px 0 var(--icen-token-line);
+  box-shadow: none;
 }
 
 /* ── 表头分组（rowspan/colspan 样式） ── */
@@ -224,4 +234,16 @@
   .icen-row-expand-content { animation: none; }
 }
 
+/* 高对比模式：选中行/语义行不能只靠底色差 */
+@media (forced-colors: active) {
+  .icen-table tbody tr.is-selected {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .icen-table tbody tr.is-selected :is(td, th) { color: HighlightText; }
+  .icen-table tbody tr.icen-row-success,
+  .icen-table tbody tr.icen-row-warning,
+  .icen-table tbody tr.icen-row-error { border-inline-start: 2px solid CanvasText; }
+}
+
 }

package/dist/components/table.d.mts

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

package/dist/components/tabs.css

@@ -19,7 +19,7 @@
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   margin-bottom: var(--icen-density-space-lg);
 }
 
@@ -27,20 +27,24 @@
   background: none;
   border: 0;
   cursor: pointer;
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  font-family: var(--icen-font-mono);
-  font-size: var(--icen-density-font-size-md);
-  letter-spacing: 0.05em;
+  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);
 }
 .icen-page-tab:hover {
-  color: var(--icen-token-accent);
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
 }
 .icen-page-tab:focus-visible {
   outline: none;
@@ -49,14 +53,15 @@
 }
 .icen-page-tab.is-active,
 .icen-page-tab[aria-selected='true'] {
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
+  color: var(--icen-token-text);
   border-bottom-color: var(--icen-token-accent);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .icen-tabs a {
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  font-size: var(--icen-density-font-size-md);
+  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;
@@ -67,7 +72,7 @@
     border-color var(--icen-tx-fast);
 }
 .icen-tabs a:hover {
-  color: var(--icen-token-accent);
+  color: var(--icen-token-text);
   text-decoration: none;
 }
 .icen-tabs a:focus-visible {
@@ -89,16 +94,18 @@
 }
 .icen-tabs--cards .icen-page-tab {
   padding: var(--icen-density-space-xs) var(--icen-density-space-md);
-  border: 1px solid var(--icen-token-outline-soft);
+  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);
 }
 .icen-tabs--cards .icen-page-tab.is-active,
 .icen-tabs--cards .icen-page-tab[aria-selected='true'] {
-  background: var(--icen-token-accent-strong);
-  color: var(--icen-token-on-accent);
-  border-color: var(--icen-token-accent-strong);
-  font-weight: 500;
+  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 平均占满容器 */
@@ -112,11 +119,11 @@
 
 /* 尺寸变体 */
 .icen-tabs--sm .icen-page-tab {
-  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  padding: 4px var(--icen-density-space-sm);
   font-size: var(--icen-density-font-size-sm);
 }
 .icen-tabs--lg .icen-page-tab {
-  padding: var(--icen-density-space-md) calc(var(--icen-density-space-md) + 4px);
+  padding: 8px calc(var(--icen-density-space-md) + 2px);
   font-size: var(--icen-density-font-size-lg);
 }
 
@@ -156,8 +163,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  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;
@@ -172,6 +179,10 @@
   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 同款系统环（缺省会落回浏览器默认蓝圈） */
+}
 .icen-page-tab-close svg { width: 10px; height: 10px; }
 
 /* 分段式 tab（替代底边线，用 segmented 视觉） */
@@ -179,31 +190,35 @@
   display: inline-flex;
   border-bottom: none;
   gap: 2px;
-  padding: 2px;
-  background: var(--icen-token-panel);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-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);
 }
 .icen-tabs--segment .icen-page-tab {
   border-bottom: none;
   margin-bottom: 0;
-  padding: var(--icen-density-space-xs) var(--icen-density-space-md);
-  border-radius: var(--icen-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));
 }
 .icen-tabs--segment .icen-page-tab.is-active,
 .icen-tabs--segment .icen-page-tab[aria-selected='true'] {
-  background: var(--icen-token-accent-strong);
-  color: var(--icen-token-on-accent);
-  border-bottom-color: transparent;
-  font-weight: 500;
+  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（侧栏式）：轨道与指示条在 inline-end 侧，RTL 自动镜像到左缘 */
 .icen-tabs--vertical {
   flex-direction: column;
   border-bottom: none;
-  border-inline-end: 1px solid var(--icen-token-line-soft);
+  border-inline-end: 1px solid var(--icen-token-separator-soft);
   margin-bottom: 0;
   min-inline-size: 160px;
 }
@@ -212,11 +227,17 @@
   border-inline-end: 2px solid transparent;
   margin-bottom: 0;
   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;
 }
 .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) {

package/dist/components/tabs.d.mts

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

package/dist/components/tag-input.css

@@ -7,27 +7,27 @@
  * is-max is a capacity state, is-unavailable follows actual disabled state.
  */
 .icen-tag-input {
-  --tag-action-size: calc(var(--icen-density-input-height-md) - var(--icen-density-space-xs) * 2 - 2px);
+  --tag-action-size: calc(var(--icen-control-height-md) - 10px);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--icen-density-space-xs);
   padding: var(--icen-density-space-xs);
-  min-block-size: var(--icen-density-input-height-md);
+  min-block-size: var(--icen-control-height-md);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  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-density-input-height-sm) - var(--icen-density-space-xs) * 2 - 2px); min-block-size: var(--icen-density-input-height-sm); }
-.icen-tag-input--lg { --tag-action-size: calc(var(--icen-density-input-height-lg) - var(--icen-density-space-xs) * 2 - 2px); min-block-size: var(--icen-density-input-height-lg); }
+.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-density-space-xs); padding-inline-start: var(--icen-density-space-sm); border-radius: var(--icen-radius-full); background: var(--icen-token-accent-subtle); color: var(--icen-token-accent-text,var(--icen-token-text)); font-size: var(--icen-density-font-size-sm); font-weight: 500; line-height: 1.4; max-inline-size: 100%; min-inline-size: 0; animation: icen-pop-in var(--icen-tx-fast); }
+.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); }
@@ -41,6 +41,10 @@
 .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; }