@icen.ai/ui 0.10.0 → 0.11.1

package/dist/components/content.css

@@ -19,13 +19,13 @@
   font-family: var(--icen-font-mono);
   font-weight: 500;
   border-radius: var(--icen-radius-xs);
-  border: 1px solid var(--icen-token-outline);
+  border: 1px solid var(--icen-token-control-border);
   background: var(--icen-token-control);
   color: var(--icen-token-text-muted);
-  box-shadow: var(--icen-token-shadow-inset);
-  height: 20px;
-  min-width: 20px;
-  padding: 0 var(--icen-density-space-xs);
+  box-shadow: 0 1px 0 var(--icen-token-control-border);
+  height: 19px;
+  min-width: 19px;
+  padding: 0 5px;
   font-size: var(--icen-density-font-size-xs);
 }
 .icen-kbd--sm {
@@ -49,10 +49,10 @@
   padding: 2px var(--icen-density-space-xs);
   border-radius: var(--icen-radius-xs);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
+  border: 1px solid var(--icen-token-separator-soft);
   font-size: 0.9em;
   font-family: var(--icen-font-mono);
-  color: var(--icen-token-accent-text, var(--icen-token-accent));
+  color: var(--icen-token-accent-text);
   word-break: break-word;
 }
 
@@ -67,13 +67,14 @@
   padding: 0;
 }
 .icen-list-item {
-  padding: var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 4px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
   transition: background-color var(--icen-tx-fast);
 }
-.icen-list-item:hover { background: var(--icen-token-control-hover); }
-.icen-list .icen-list-item + .icen-list-item { border-top: 1px solid var(--icen-token-outline-soft); }
-.icen-list--compact .icen-list-item { padding: var(--icen-density-space-xs) var(--icen-density-space-sm); }
+.icen-list-item:hover { background: var(--icen-token-fill-hover); }
+.icen-list .icen-list-item + .icen-list-item { border-top: 1px solid var(--icen-token-separator-soft); }
+.icen-list--compact .icen-list-item { padding: 2px var(--icen-density-space-sm); }
 
 /* ══════════════ accordion · 手风琴（behaviors/accordion 配套） ══════════════
  * DOM：
@@ -87,7 +88,7 @@
  * data-icen-single：展开一项自动收起其余（behavior 实现）。
  */
 .icen-accordion-item {
-  border-bottom: 1px solid var(--icen-token-outline-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
 }
 .icen-accordion-item:last-child { border-bottom: 0; }
 .icen-accordion-trigger {
@@ -96,19 +97,20 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  min-block-size: 32px;
+  padding: 5px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   color: var(--icen-token-text);
   text-align: start;
   background: none;
   border: 0;
   cursor: pointer;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   transition: background-color var(--icen-tx-fast);
 }
 .icen-accordion-trigger:hover {
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
 }
 .icen-accordion-trigger:focus-visible {
   outline: none;
@@ -147,21 +149,21 @@
   transition: padding-block-end var(--icen-tx-normal);
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
-  line-height: 1.6;
+  line-height: 1.55;
 }
 .icen-accordion-item.is-open .icen-accordion-panel-inner { padding-block-end: var(--icen-density-space-sm); }
 
 /* 卡片式手风琴：整组包在带边框的卡片里 */
 .icen-accordion--cards {
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   overflow: hidden;
 }
 .icen-accordion--cards .icen-accordion-item {
   border-bottom: 0;
 }
 .icen-accordion--cards .icen-accordion-item + .icen-accordion-item {
-  border-top: 1px solid var(--icen-token-outline-soft);
+  border-top: 1px solid var(--icen-token-separator-soft);
 }
 
 /* ══════════════ timeline · 时间线 ══════════════
@@ -186,7 +188,7 @@
   top: 32px;
   bottom: 0;
   width: 1px;
-  background: var(--icen-token-outline-soft);
+  background: var(--icen-token-separator);
 }
 .icen-timeline-dot {
   width: 28px;
@@ -196,8 +198,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-control-border);
   color: var(--icen-token-text-muted);
   z-index: 1;
 }
@@ -215,20 +217,21 @@
   gap: var(--icen-density-space-sm);
 }
 .icen-timeline-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   color: var(--icen-token-text);
 }
 .icen-timeline-time {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   margin-inline-start: auto;
   font-variant-numeric: tabular-nums;
+  letter-spacing: .01em;
 }
 .icen-timeline-desc {
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
-  margin: 4px 0 0;
+  margin: 3px 0 0;
   line-height: 1.5;
 }
 
@@ -238,8 +241,8 @@
  */
 .icen-desc { display: flex; flex-direction: column; gap: var(--icen-density-space-sm); }
 .icen-desc-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-title);
+  font-weight: var(--icen-font-weight-title);
   color: var(--icen-token-text);
   margin: 0;
 }
@@ -250,15 +253,15 @@
   margin: 0;
 }
 .icen-desc--bordered .icen-desc-grid {
-  background: var(--icen-token-outline-soft);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-separator-soft);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   overflow: hidden;
 }
 .icen-desc-item { grid-column: span var(--desc-span, 1); }
 .icen-desc--bordered .icen-desc-item {
-  background: var(--icen-token-card);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  background: var(--icen-token-surface);
+  padding: 6px 10px;
 }
 .icen-desc:not(.icen-desc--bordered) .icen-desc-item {
   display: flex;
@@ -267,10 +270,10 @@
 }
 .icen-desc-item dt {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-desc-item dd {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   margin: 0;
   line-height: 1.5;
@@ -300,27 +303,28 @@
 .icen-tree-node {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   /* 深度缩进沿 inline-start（RTL 下树向左侧生长） */
-  padding-block: var(--icen-density-space-xs);
+  min-block-size: var(--icen-control-height-sm);
+  padding-block: 3px;
   padding-inline: calc(4px + var(--depth, 0) * 14px) var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-sm);
-  font-size: var(--icen-density-font-size-md);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   cursor: pointer;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-tree-node:hover { background: var(--icen-token-control-hover); }
+.icen-tree-node:hover { background: var(--icen-token-fill-hover); }
 .icen-tree-node:focus-visible,
 .icen-tree-node:focus-within {
   outline: none;
-  box-shadow: var(--icen-ring);
+  box-shadow: var(--icen-ring-inset);
 }
 .icen-tree-node.is-selected,
 .icen-tree-node[aria-selected='true'] {
-  background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
-  font-weight: 500;
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
 }
 .icen-tree-node.is-disabled,
 .icen-tree-node[aria-disabled='true'] {
@@ -365,11 +369,11 @@
 }
 .icen-tree-icon {
   flex-shrink: 0;
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
   color: var(--icen-token-text-muted);
 }
-.icen-tree-node.is-selected .icen-tree-icon { color: var(--icen-token-accent); }
+.icen-tree-node.is-selected .icen-tree-icon { color: var(--icen-token-accent-strong); }
 .icen-tree-badge {
   display: inline-flex;
   align-items: center;
@@ -410,7 +414,7 @@
   gap: 1px;
 }
 .icen-list-item-title {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -418,7 +422,7 @@
 }
 .icen-list-item-meta {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-list-item-trailing {
   flex-shrink: 0;
@@ -430,9 +434,9 @@
   cursor: pointer;
 }
 .icen-list-item.is-selected {
-  background: var(--icen-token-accent-subtle);
+  background: var(--icen-token-fill-selected);
 }
-.icen-list-item.is-selected .icen-list-item-title { color: var(--icen-token-accent); font-weight: 500; }
+.icen-list-item.is-selected .icen-list-item-title { color: var(--icen-token-text); font-weight: var(--icen-font-weight-control); }
 
 /* 列表项 flex 布局（leading + content + trailing） */
 .icen-list-item--flex {
@@ -477,8 +481,9 @@
 .icen-timeline-extra {
   margin-top: var(--icen-density-space-xs);
   padding: var(--icen-density-space-sm);
-  background: var(--icen-token-bg-soft);
-  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-surface-chrome);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-radius-xs);
   font-size: var(--icen-density-font-size-sm);
 }
 
@@ -533,7 +538,7 @@
   position: relative;
   margin-inline-start: 7px;
   padding-inline-start: 0;
-  border-inline-start: 1px solid var(--icen-token-outline-soft);
+  border-inline-start: 1px solid var(--icen-token-separator-soft);
 }
 .icen-tree--lined .icen-tree-node {
   position: relative;

package/dist/components/context-menu.d.mts

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

package/dist/components/copy.css

@@ -28,12 +28,12 @@
   align-items: center;
   justify-content: center;
   gap: var(--icen-density-space-xs);
-  height: var(--icen-density-input-height-sm);
-  padding: 0 var(--icen-density-space-sm);
+  height: var(--icen-control-height-sm);
+  padding: 0 var(--icen-control-padding-inline-sm);
   background: var(--icen-token-control);
   color: var(--icen-token-text-muted);
-  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-control-radius-sm);
   font: inherit;
   font-size: var(--icen-density-font-size-sm);
   cursor: pointer;
@@ -45,7 +45,7 @@
 }
 .icen-copy-btn:hover {
   color: var(--icen-token-text);
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-copy-btn:focus-visible {
   outline: none;
@@ -61,11 +61,11 @@
 /* ghost 变体：透明底，纯描边 / hover 才显底 */
 .icen-copy-btn--ghost {
   background: transparent;
-  border-color: var(--icen-token-line-soft);
+  border-color: var(--icen-token-separator-soft);
 }
 .icen-copy-btn--ghost:hover {
-  background: var(--icen-token-fill-1);
-  border-color: var(--icen-token-accent);
+  background: var(--icen-token-fill-hover);
+  border-color: var(--icen-token-control-border-hover);
 }
 
 /* ── 成功闪烁态（behavior 1.4s 后移除）── */
@@ -77,8 +77,8 @@
 
 /* ── 图标变体：方形按钮，仅放 svg ── */
 .icen-copy-btn--icon {
-  inline-size: var(--icen-density-input-height-sm);
-  block-size: var(--icen-density-input-height-sm);
+  inline-size: var(--icen-control-height-sm);
+  block-size: var(--icen-control-height-sm);
   padding: 0;
 }
 .icen-copy-btn--icon svg {

package/dist/components/copy.d.mts

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

package/dist/components/datatable.css

@@ -23,11 +23,11 @@
  */
 
 .icen-datatable {
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-lg);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   background: var(--icen-token-surface);
   overflow: hidden;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
 }
 
 /* ── 工具栏（搜索） ── */
@@ -35,22 +35,24 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  min-block-size: 44px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-dt-search {
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 32px;
-  width: 260px;
+  gap: 7px;
+  height: 30px;
+  width: 240px;
   max-width: 100%;
-  padding: 0 10px;
-  color: var(--icen-token-text-faint);
+  padding: 0 var(--icen-field-padding-inline-sm);
+  color: var(--icen-token-text-muted);
   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: 1px 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-dt-search:focus-within {
@@ -79,11 +81,11 @@
 .icen-dt-row {
   display: grid;
   align-items: center;
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   transition: background var(--icen-tx-fast);
 }
 .icen-dt-body .icen-dt-row:last-child { border-bottom: 0; }
-.icen-dt-body .icen-dt-row:hover { background: var(--icen-token-fill-1); }
+.icen-dt-body .icen-dt-row:hover { background: var(--icen-token-fill-hover); }
 
 /* 行内次要动作（columns.render 产出 .icen-dt-actions）：隐式待命，行悬停/聚焦显现；
    触屏常显；按钮本体 26px 视觉 + 触屏隐形 44px 命中 */
@@ -122,18 +124,18 @@
     margin: -9px;
   }
 }
-.icen-dt-row.is-selected { background: var(--icen-token-accent-subtle); }
-.icen-dt-row.is-selected:hover { background: color-mix(in srgb, var(--icen-token-accent-subtle) 82%, var(--icen-token-fill-1)); }
+.icen-dt-row.is-selected { background: var(--icen-token-fill-selected); }
+.icen-dt-row.is-selected:hover { background: color-mix(in srgb, var(--icen-token-fill-selected) 82%, var(--icen-token-fill-hover)); }
 .icen-dt-row.is-clickable { cursor: pointer; }
 .icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected) {
-  background: color-mix(in srgb, var(--icen-token-fill-1) 55%, transparent);
+  background: color-mix(in srgb, var(--icen-token-fill-hover) 55%, transparent);
 }
 .icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected):hover {
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 
 .icen-dt-cell {
-  padding: 0 12px;
+  padding: 0 10px;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -141,8 +143,8 @@
   color: var(--icen-token-text);
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 44px;
+  gap: 6px;
+  min-height: 32px;
 }
 .icen-datatable--virtual .icen-dt-cell { min-height: 0; height: 100%; }
 .icen-dt-cell[data-icen-align='center'] { justify-content: center; text-align: center; }
@@ -150,9 +152,9 @@
 .icen-dt-cell--check, .icen-dt-cell--expand { justify-content: center; padding: 0 4px; }
 
 /* ── 表头 ── */
-.icen-dt-head { border-bottom: 1px solid var(--icen-token-line-soft); }
+.icen-dt-head { border-bottom: 1px solid var(--icen-token-separator); }
 .icen-dt-row--head {
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
   border-bottom: 0;
 }
 .icen-datatable--virtual .icen-dt-row--head {
@@ -162,9 +164,10 @@
 }
 .icen-dt-cell--head {
   position: relative;
-  min-height: 40px;
-  font-size: var(--icen-density-font-size-sm);
+  min-height: 30px;
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
+  letter-spacing: var(--icen-letter-spacing-caption);
   color: var(--icen-token-text-muted);
   user-select: none;
 }
@@ -206,11 +209,11 @@
   z-index: var(--icen-z-popover);
   min-width: 168px;
   max-width: 240px;
-  padding: 4px;
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-overlay);
+  padding: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   font-weight: 400;
   animation: icen-pop-in var(--icen-tx-fast);
 }
@@ -223,14 +226,15 @@
 .icen-dt-filter-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: var(--icen-radius-sm);
-  font-size: var(--icen-density-font-size-sm);
+  gap: 7px;
+  min-block-size: var(--icen-control-height-sm);
+  padding: 3px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   cursor: pointer;
 }
-.icen-dt-filter-item:hover { background: var(--icen-token-fill-1); }
+.icen-dt-filter-item:hover { background: var(--icen-token-fill-hover); }
 .icen-dt-filter-item > span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -246,7 +250,7 @@
 .icen-dt-filter-reset {
   border: 0;
   background: transparent;
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text); /* 12px 链接字对白底需 AA（裸 accent 4.07:1 不达） */
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   cursor: pointer;
@@ -281,12 +285,12 @@
 .icen-dt-expand-btn:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); }
 .icen-dt-expand-btn[aria-expanded='true'] { transform: rotate(180deg); color: var(--icen-token-accent); }
 .icen-dt-expand-row {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  background: var(--icen-token-bg-soft);
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
   color: var(--icen-token-text-muted);
   font-size: var(--icen-density-font-size-sm);
-  line-height: 1.7;
+  line-height: 1.55;
   white-space: normal;
 }
 
@@ -306,10 +310,11 @@
 .icen-dt-foot {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
-  padding: 10px 14px;
-  border-top: 1px solid var(--icen-token-line-soft);
+  padding: 6px 10px;
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-dt-foot:empty { display: none; }
 .icen-dt-stat {
@@ -317,11 +322,11 @@
   color: var(--icen-token-text-faint);
   font-variant-numeric: tabular-nums;
 }
-.icen-dt-stat--sel { color: var(--icen-token-accent); display: inline-flex; align-items: center; gap: 6px; }
+.icen-dt-stat--sel { color: var(--icen-token-accent-text); display: inline-flex; align-items: center; gap: 6px; }
 .icen-dt-clear-sel {
   border: 0;
   background: transparent;
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text); /* 同 filter-reset：小号链接字走可读变体 */
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   cursor: pointer;
@@ -338,18 +343,18 @@
 .icen-dt-page-size {
   appearance: none;
   -webkit-appearance: none;
-  height: 28px;
-  padding: 0 8px;
+  height: 26px;
+  padding: 0 7px;
   margin-inline-end: 6px;
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   color: var(--icen-token-text-muted);
-  background: transparent;
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
 }
-.icen-dt-page-size:hover { border-color: var(--icen-token-accent); color: var(--icen-token-text); }
+.icen-dt-page-size:hover { border-color: var(--icen-token-control-border-hover); color: var(--icen-token-text); }
 .icen-dt-page-btn {
   min-width: 28px;
   height: 28px;
@@ -366,12 +371,12 @@
 }
 .icen-dt-page-btn:hover:not(:disabled):not(.is-active) {
   color: var(--icen-token-text);
-  border-color: var(--icen-token-line-soft);
+  border-color: var(--icen-token-control-border);
 }
 .icen-dt-page-btn.is-active {
-  color: var(--icen-token-accent);
-  border-color: var(--icen-token-accent);
-  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 24%, transparent);
+  background: var(--icen-token-fill-selected);
   font-weight: 600;
 }
 .icen-dt-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@@ -386,9 +391,9 @@
   .icen-dt-editor.is-invalid { animation: none; }
 }
 
-/* ── 紧凑密度（32px 行高） ── */
-.icen-datatable--compact .icen-dt-cell { min-height: 32px; padding: 0 10px; }
-.icen-datatable--compact .icen-dt-cell--head { min-height: 32px; font-size: var(--icen-density-font-size-xs); }
+/* ── 紧凑密度（28px 行高） ── */
+.icen-datatable--compact .icen-dt-cell { min-height: 28px; padding: 0 8px; }
+.icen-datatable--compact .icen-dt-cell--head { min-height: 28px; font-size: var(--icen-density-font-size-xs); }
 
 /* ── 工具栏行内末端操作按钮组 ── */
 .icen-dt-toolbar-actions {
@@ -465,6 +470,14 @@
 .icen-datatable--frozen .icen-dt-row.is-selected:hover .icen-dt-cell--frozen {
   background: color-mix(in srgb, var(--icen-token-accent-subtle) 82%, var(--icen-token-fill-1));
 }
+/* 斑马纹是行级底色，冻结格不透明面透不上来：偶数行冻结格重铺同款色，
+   否则条纹在冻结边界处断掉（选中/hover 已有对应规则） */
+.icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected) .icen-dt-cell--frozen {
+  background: color-mix(in srgb, var(--icen-token-fill-1) 55%, transparent);
+}
+.icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected):hover .icen-dt-cell--frozen {
+  background: var(--icen-token-fill-1);
+}
 
 /* ── 行状态类（rowClassName 产出；--danger/--warning/--success 同族语义行底色） ── */
 .icen-dt-row--danger { background: color-mix(in srgb, var(--icen-token-error) 6%, transparent) !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */ }

package/dist/components/datatable.d.mts

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