@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/sidebar.css

@@ -47,11 +47,10 @@
   margin-top: var(--icen-density-space-sm);
 }
 .icen-sidebar-section-label {
-  font-size: var(--icen-density-font-size-xs);
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
-  color: var(--icen-token-text-faint);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  color: var(--icen-token-text-muted);
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
 
 .icen-sidebar-group { margin-bottom: var(--icen-density-space-xs); }
@@ -61,13 +60,13 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--icen-density-space-xs);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-sm);
+  min-block-size: 26px;
+  padding: 3px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
   font-family: inherit;
-  font-size: var(--icen-density-font-size-xs);
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--icen-letter-spacing-caption);
   color: var(--icen-token-text-muted);
   background: none;
   border: 0;
@@ -77,7 +76,7 @@
     color var(--icen-tx-fast);
 }
 .icen-sidebar-group-title:hover {
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
   color: var(--icen-token-text);
 }
 .icen-sidebar-group-title:focus-visible {
@@ -121,10 +120,11 @@
   inline-size: 100%;
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-md);
-  font-size: var(--icen-density-font-size-md);
+  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);
   text-align: start;
   text-decoration: none;
@@ -136,19 +136,19 @@
     color var(--icen-tx-fast);
 }
 .icen-sidebar-item:hover {
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
   text-decoration: none;
   color: var(--icen-token-text);
 }
 .icen-sidebar-item:focus-visible {
   outline: none;
-  box-shadow: var(--icen-ring);
+  box-shadow: var(--icen-ring-inset);
 }
 .icen-sidebar-item.is-active,
 .icen-sidebar-item[aria-current='page'] {
-  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-sidebar-item.is-disabled,
 .icen-sidebar-item[aria-disabled='true'],
@@ -157,12 +157,12 @@
   pointer-events: none;
 }
 .icen-sidebar-item-icon {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   flex-shrink: 0;
   color: var(--icen-token-text-muted);
 }
-.icen-sidebar-item.is-active .icen-sidebar-item-icon { color: var(--icen-token-accent); }
+.icen-sidebar-item.is-active .icen-sidebar-item-icon { color: var(--icen-token-accent-strong); }
 .icen-sidebar-item-label {
   flex: 1;
   overflow: hidden;
@@ -178,11 +178,16 @@
   padding: 0 5px;
   font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
-  color: var(--icen-token-on-accent);
-  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-text-muted);
+  background: var(--icen-token-fill-2);
   border-radius: var(--icen-radius-full);
   font-variant-numeric: tabular-nums;
 }
+.icen-sidebar-item.is-active .icen-sidebar-item-badge,
+.icen-sidebar-item[aria-current='page'] .icen-sidebar-item-badge {
+  color: var(--icen-token-on-accent);
+  background: var(--icen-token-accent-strong);
+}
 
 @media (prefers-reduced-motion: reduce) {
   .icen-sidebar-group-panel,
@@ -241,22 +246,10 @@
   margin-top: auto;
 }
 
-/* 激活态起始缘侧指示条（RTL 镜像到右缘） */
-.icen-sidebar-item.is-active,
-.icen-sidebar-item[aria-current='page'] {
-  position: relative;
-}
+/* 选中项使用整行圆角底色，不再叠加起始缘指示条（源列表语义）。 */
 .icen-sidebar-item.is-active::before,
 .icen-sidebar-item[aria-current='page']::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 60%;
-  border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  content: none;
 }
 
 /* 折叠/轨道模式（icon-only mini sidebar） */
@@ -307,4 +300,15 @@
   font-size: 0;
 }
 
+/* 高对比模式：当前项不能只靠填充色 */
+@media (forced-colors: active) {
+  .icen-sidebar-item.is-active,
+  .icen-sidebar-item[aria-current='page'] {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .icen-sidebar-item.is-active .icen-sidebar-item-icon,
+  .icen-sidebar-item[aria-current='page'] .icen-sidebar-item-icon { color: HighlightText; }
+}
+
 }

package/dist/components/sidebar.d.mts

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

package/dist/components/skeleton.d.mts

@@ -0,0 +1,2 @@
+// kit: skeleton 类型面（构建产物，勿手改）
+export {};

package/dist/components/slider.css

@@ -28,20 +28,20 @@
 
 .icen-slider {
   position: relative;
-  height: 20px;
+  height: 24px;
   width: 100%;
-  --slider-thumb-size: 16px;
-  --slider-track-height: 6px;
+  --slider-thumb-size: 18px;
+  --slider-track-height: 4px;
 }
 .icen-slider--sm {
-  height: 16px;
-  --slider-thumb-size: 12px;
-  --slider-track-height: 4px;
+  height: 18px;
+  --slider-thumb-size: 14px;
+  --slider-track-height: 3px;
 }
 .icen-slider--lg {
-  height: 24px;
-  --slider-thumb-size: 20px;
-  --slider-track-height: 8px;
+  height: 28px;
+  --slider-thumb-size: 22px;
+  --slider-track-height: 5px;
 }
 .icen-slider.is-disabled,
 .icen-slider[aria-disabled='true'],
@@ -66,7 +66,8 @@
   transform: translateY(-50%);
   height: var(--slider-track-height);
   border-radius: var(--icen-radius-full);
-  background: color-mix(in srgb, var(--icen-token-line-soft) 50%, transparent);
+  background: var(--icen-token-fill-3);
+  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--icen-token-text) 8%, transparent);
 }
 .icen-slider--vertical .icen-slider-track {
   left: 50%; right: auto; /* guard:allow-physical 垂直变体轨道水平居中（translateX(-50%) 配套） */
@@ -83,7 +84,7 @@
   transform: translateY(-50%);
   height: var(--slider-track-height);
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transition: width var(--icen-tx-normal);
 }
 .icen-slider--vertical .icen-slider-fill {
@@ -102,7 +103,7 @@
   transform: translateY(-50%);
   height: var(--slider-track-height);
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transition:
     left var(--icen-tx-normal), /* guard:allow-physical 与 behavior 内联写入的物理 left 配套 */
     right var(--icen-tx-normal); /* guard:allow-physical 与 behavior 内联写入的物理 right 配套 */
@@ -125,9 +126,11 @@
   width: var(--slider-thumb-size);
   height: var(--slider-thumb-size);
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-card);
-  border: 2px solid var(--icen-token-accent);
-  box-shadow: var(--icen-token-shadow-card);
+  background: var(--icen-token-surface);
+  border: .5px solid color-mix(in srgb, var(--icen-token-text) 24%, transparent);
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) 26%, transparent),
+    0 3px 8px -3px color-mix(in srgb, var(--icen-design-shadow-color) 22%, transparent);
   pointer-events: none;
   transition:
     transform var(--icen-tx-fast),
@@ -140,15 +143,16 @@
   transform: translate(-50%, 50%);
 }
 .icen-slider:hover .icen-slider-thumb {
-  border-color: var(--icen-token-accent-deep, var(--icen-token-accent));
+  border-color: color-mix(in srgb, var(--icen-token-text) 34%, transparent);
 }
 /* 原生 input 透明，焦点环镜像到可见 thumb 上（消费 --icen-ring-soft） */
 .icen-slider:focus-within .icen-slider-thumb {
-  transform: translate(-50%, -50%) scale(1.15);
-  box-shadow: var(--icen-ring-soft), var(--icen-token-shadow-card);
+  transform: translate(-50%, -50%) scale(1.08);
+  border-color: var(--icen-token-accent-strong);
+  box-shadow: var(--icen-ring-soft), 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) 26%, transparent);
 }
 .icen-slider--vertical:focus-within .icen-slider-thumb {
-  transform: translate(-50%, 50%) scale(1.15);
+  transform: translate(-50%, 50%) scale(1.08);
 }
 
 .icen-slider-native {
@@ -289,12 +293,12 @@
   border-right-color: var(--icen-token-text); /* guard:allow-physical 垂直变体左指箭头（物理几何） */
 }
 
-/* ── 滑块拖拽态（active 时放大） ── */
+/* ── 滑块拖拽态（active 时轻微放大） ── */
 .icen-slider:active .icen-slider-thumb {
-  transform: translate(-50%, -50%) scale(1.25);
+  transform: translate(-50%, -50%) scale(1.12);
 }
 .icen-slider--vertical:active .icen-slider-thumb {
-  transform: translate(-50%, 50%) scale(1.25);
+  transform: translate(-50%, 50%) scale(1.12);
 }
 
 /* ── 填充段带渐变（高级视觉） ── */

package/dist/components/slider.d.mts

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

package/dist/components/spinner.d.mts

@@ -0,0 +1,2 @@
+// kit: spinner 类型面（构建产物，勿手改）
+export {};

package/dist/components/split-pane.css

@@ -23,8 +23,8 @@
   min-height: 200px;
   overflow: hidden;
   background: var(--icen-token-surface);
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-md);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
 }
 
 .icen-split-pane-first {
@@ -44,12 +44,18 @@
 .icen-split-pane-divider {
   flex: 0 0 6px;
   position: relative;
-  background: var(--icen-token-line-soft);
+  background: var(--icen-token-separator-soft);
   cursor: col-resize;
   user-select: none;
   touch-action: none;
   transition: background var(--icen-tx-fast);
 }
+.icen-split-pane-divider::before {
+  /* 不可见命中扩展（±9px → 24px 触达带宽）：分隔条视觉 6px，触屏按 WCAG 2.5.8 打不中 */
+  content: '';
+  position: absolute;
+  inset: -9px 0;
+}
 .icen-split-pane-divider::after {
   content: '';
   position: absolute;
@@ -57,7 +63,7 @@
   left: 50%; /* guard:allow-physical 分隔条圆点居中（translate(-50%,-50%) 配套） */
   width: 2px;
   height: 28px;
-  border-radius: 1px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  border-radius: 1px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
   background: var(--icen-token-text-faint);
   opacity: 0.35;
   transform: translate(-50%, -50%);
@@ -70,11 +76,11 @@
 }
 .icen-split-pane-divider:hover,
 .icen-split-pane-divider.is-dragging {
-  background: color-mix(in srgb, var(--icen-token-accent) 14%, var(--icen-token-line-soft));
+  background: color-mix(in srgb, var(--icen-token-accent) 14%, var(--icen-token-separator-soft));
 }
 .icen-split-pane-divider:focus-visible {
   outline: none;
-  background: color-mix(in srgb, var(--icen-token-accent) 18%, var(--icen-token-line-soft));
+  background: color-mix(in srgb, var(--icen-token-accent) 18%, var(--icen-token-separator-soft));
 }
 
 /* ── 纵向布局（上下分栏） ── */
@@ -99,6 +105,9 @@
   width: 28px;
   height: 2px;
 }
+.icen-split-pane--vertical .icen-split-pane-divider::before {
+  inset: 0 -9px; /* 横向变体的命中扩展方向镜像（上下 ±9px） */
+}
 
 /* ── 嵌套分栏不应再有外边框 ── */
 .icen-split-pane .icen-split-pane {
@@ -109,6 +118,6 @@
 @media (prefers-reduced-motion: reduce) {
   .icen-split-pane-divider { transition: none; }
   .icen-split-pane-divider::after { transition: none; }
-}
+}
 
 }

package/dist/components/split-pane.d.mts

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

package/dist/components/stat.css

@@ -46,10 +46,10 @@
   flex-direction: column;
   gap: var(--icen-density-space-xs);
   background: var(--icen-token-surface);
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-lg);
-  padding: var(--icen-density-space-md);
-  box-shadow: var(--icen-token-shadow-elevated);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md) var(--icen-density-space-md);
+  box-shadow: none;
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast),
@@ -61,8 +61,8 @@
 /* hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
 @media (hover: hover) and (pointer: fine) {
   .icen-stat-card--interactive:hover {
-    transform: translateY(-1px);
-    border-color: color-mix(in srgb, var(--icen-token-accent) 26%, var(--icen-token-outline-soft));
+    transform: none;
+    border-color: var(--icen-token-control-border-hover);
     box-shadow: var(--icen-token-shadow-card);
   }
 }
@@ -74,10 +74,10 @@
   gap: var(--icen-density-space-sm);
 }
 .icen-stat-label {
-  color: var(--icen-token-text-faint);
-  font-size: var(--icen-density-font-size-xs);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  color: var(--icen-token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  font-weight: 600;
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
 .icen-stat-icon {
   display: inline-flex;
@@ -85,9 +85,9 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text);
 }
 .icen-stat-icon.icen-icon--success { background: color-mix(in srgb, var(--icen-token-success) 14%, transparent); color: var(--icen-token-success); }
 .icen-stat-icon.icen-icon--warning { background: color-mix(in srgb, var(--icen-token-warning) 14%, transparent); color: var(--icen-token-warning); }
@@ -103,14 +103,15 @@
 }
 
 .icen-stat-num {
-  font-size: var(--icen-density-font-size-2xl);
-  font-weight: 700;
+  font-size: var(--icen-density-font-size-xl);
+  font-weight: 600;
   line-height: 1.2;
+  letter-spacing: -.015em;
   font-variant-numeric: tabular-nums lining-nums;
   color: var(--icen-token-text);
   word-break: break-all;
 }
-.icen-stat-num--accent  { color: var(--icen-token-accent); }
+.icen-stat-num--accent  { color: var(--icen-token-accent-text); }
 .icen-stat-num--warning { color: var(--icen-token-warning); }
 .icen-stat-num--error   { color: var(--icen-token-error); }
 .icen-stat-num--info    { color: var(--icen-token-info); }
@@ -206,7 +207,7 @@
   stroke-width: 3;
   stroke-linecap: round;
   stroke-dasharray: 0, 100;
-  transition: stroke-dasharray var(--icen-tx-slow) var(--icen-ease-out);
+  transition: stroke-dasharray var(--icen-duration-slow) var(--icen-ease-out);
 }
 .icen-stat-card .icen-stat-ring-fill { stroke: var(--icen-token-accent); }
 

package/dist/components/stat.d.mts

@@ -0,0 +1,2 @@
+// kit: stat 类型面（构建产物，勿手改）
+export {};

package/dist/components/steps.css

@@ -38,24 +38,24 @@
 
 .icen-step-line {
   position: absolute;
-  top: 16px;
-  inset-inline-start: calc(50% + 20px);
-  inline-size: calc(100% - 40px);
+  top: 12px;
+  inset-inline-start: calc(50% + 16px);
+  inline-size: calc(100% - 32px);
   height: 1px;
-  background: var(--icen-token-outline-soft);
+  background: var(--icen-token-separator);
   transition: background-color var(--icen-tx-normal);
 }
 .icen-step:last-child .icen-step-line { display: none; }
-.icen-step--finish .icen-step-line { background: color-mix(in srgb, var(--icen-token-accent) 40%, transparent); }
+.icen-step--finish .icen-step-line { background: color-mix(in srgb, var(--icen-token-accent) 40%, var(--icen-token-separator)); }
 
 .icen-step-dot {
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   border-radius: var(--icen-radius-full);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   position: relative;
@@ -70,33 +70,33 @@
   color: var(--icen-token-on-accent);
 }
 .icen-step--process .icen-step-dot {
-  background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent);
-  border: 2px solid var(--icen-token-accent);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-accent-text);
+  border: 1.5px solid var(--icen-token-accent-strong);
   box-shadow: var(--icen-ring-soft);
 }
 .icen-step--wait .icen-step-dot {
-  background: var(--icen-token-control);
-  color: var(--icen-token-text-faint);
-  border: 1px solid var(--icen-token-outline-soft);
+  background: var(--icen-token-surface-chrome);
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-control-border);
 }
 .icen-step--error .icen-step-dot {
   background: var(--icen-token-error-muted);
   color: var(--icen-token-error);
-  border: 2px solid var(--icen-token-error);
+  border: 1.5px solid var(--icen-token-error);
 }
 
 .icen-step-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);
   margin-top: var(--icen-density-space-xs);
   color: var(--icen-token-text);
 }
-.icen-step--wait .icen-step-title { color: var(--icen-token-text-muted); }
+.icen-step--wait .icen-step-title { color: var(--icen-token-text-muted); font-weight: 400; }
 .icen-step--error .icen-step-title { color: var(--icen-token-error); }
 .icen-step-desc {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   margin-top: 2px;
   max-width: 160px;
   margin-inline: auto;
@@ -104,10 +104,10 @@
 }
 
 /* 尺寸变体 */
-.icen-steps--sm .icen-step-dot { width: 24px; height: 24px; font-size: var(--icen-density-font-size-xs); }
-.icen-steps--sm .icen-step-line { top: 12px; }
-.icen-steps--lg .icen-step-dot { width: 40px; height: 40px; font-size: var(--icen-density-font-size-md); }
-.icen-steps--lg .icen-step-line { top: 20px; }
+.icen-steps--sm .icen-step-dot { width: 20px; height: 20px; font-size: var(--icen-density-font-size-2xs); }
+.icen-steps--sm .icen-step-line { top: 10px; }
+.icen-steps--lg .icen-step-dot { width: 28px; height: 28px; font-size: var(--icen-density-font-size-sm); }
+.icen-steps--lg .icen-step-line { top: 14px; }
 
 /* ── 垂直变体 ── */
 .icen-steps--vertical {
@@ -122,9 +122,9 @@
   padding: 0;
 }
 .icen-steps--vertical .icen-step-line {
-  top: 36px;
+  top: 28px;
   bottom: calc(-1 * var(--icen-density-space-md));
-  inset-inline-start: 16px;
+  inset-inline-start: 12px;
   width: 1px;
   height: auto;
 }
@@ -198,7 +198,7 @@
   background: var(--icen-token-accent);
   transform-origin: left;
   transform: scaleX(0);
-  transition: transform var(--icen-tx-slow) var(--icen-ease-out);
+  transition: transform var(--icen-duration-slow) var(--icen-ease-out);
 }
 .icen-steps--progress .icen-step--finish .icen-step-line::after { transform: scaleX(1); }
 

package/dist/components/steps.d.mts

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