@icen.ai/ui 0.10.0 → 0.11.1

package/dist/components/charts.css

@@ -17,45 +17,53 @@
  *   标记 .icen-chart-mark-line / .icen-chart-mark-point / .icen-chart-mark-label
  *   （spec.marks：SVG 变体属性直出样式仅挡指针事件，vbar DOM 变体在 chart-bar.css）。
  *
- * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--icen-token-accent)）。
+ * 图表是「数据墨水」而非装饰面：网格与轴用发丝线，数据用饱和色，文字一律等宽数字，
+ * 悬浮只提亮不位移。单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 accent）。
  */
 
 .icen-chart {
   width: 100%;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--icen-density-space-sm);
+  color: var(--icen-token-text);
+  font-variant-numeric: tabular-nums;
 }
 .icen-chart-empty {
-  height: 150px;
+  height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  gap: 6px;
+  font-size: var(--icen-font-size-caption);
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-muted);
 }
 
 /* ── 图例 / 轴标签（donut / stack / vbar / line 共用） ── */
 .icen-chart-legend {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   min-width: 0;
   flex: 1;
 }
 .icen-chart-legend-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  font-size: var(--icen-density-font-size-xs);
+  gap: 7px;
   min-width: 0;
+  font-size: var(--icen-font-size-caption);
+  line-height: 1.45;
 }
 .icen-chart-legend-dot {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   flex-shrink: 0;
   border-radius: var(--icen-radius-full);
   background: var(--chart-tone, var(--icen-token-accent));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--icen-token-card) 70%, transparent);
 }
 .icen-chart-legend-label {
   flex: 1;
@@ -67,6 +75,8 @@
 }
 .icen-chart-legend-value {
   flex-shrink: 0;
+  font-family: var(--icen-font-mono);
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
   color: var(--icen-token-text-faint);
 }
@@ -74,13 +84,15 @@
 .icen-chart-labels {
   display: flex;
   gap: var(--icen-density-space-xs);
-  margin-top: var(--icen-density-space-xs);
+  margin-top: 4px;
 }
 .icen-chart-labels > span {
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -94,7 +106,7 @@
   display: block;
   position: relative;
   min-block-size: 1.5em;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
 }
 .icen-chart-labels--points > span {
   position: absolute;
@@ -113,8 +125,10 @@
 
 /* 标题（spec.title 有值时渲染） */
 .icen-chart-title {
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.005em;
   color: var(--icen-token-text);
 }
 
@@ -130,8 +144,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   border-radius: var(--icen-radius-xs);
@@ -140,9 +154,10 @@
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.icen-chart-legend-eye:hover { color: var(--icen-token-text); background: var(--icen-token-fill-1); }
+.icen-chart-legend-eye:hover { color: var(--icen-token-text); background: var(--icen-token-fill-hover); }
+.icen-chart-legend-eye:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-legend-eye:focus-visible { outline: none; box-shadow: var(--icen-ring); }
-.icen-chart-legend-eye svg { width: 13px; height: 13px; }
+.icen-chart-legend-eye svg { width: 14px; height: 14px; }
 @media (pointer: coarse) {
   .icen-chart-legend-eye { min-inline-size: 44px; min-block-size: 44px; }
   .icen-chart-legend-toggle-item { min-block-size: 44px; }
@@ -155,26 +170,35 @@
   display: none;
 }
 
-/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针 */
+/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针。
+   浮层物理：玻璃面 + 发丝边 + 抬升阴影；无 backdrop-filter 时回落不透明面。 */
 .icen-chart-tooltip {
   position: fixed;
   z-index: var(--icen-z-tooltip);
   max-width: 280px;
-  padding: 3px 8px;
+  padding: 6px 10px;
   border-radius: var(--icen-radius-sm);
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-line);
-  box-shadow: var(--icen-token-shadow-elevated);
-  font-size: var(--icen-density-font-size-xs);
+  background: var(--icen-token-surface-glass);
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  border: 1px solid var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  font-size: var(--icen-font-size-caption);
+  line-height: 1.45;
+  letter-spacing: 0.005em;
   font-variant-numeric: tabular-nums;
   color: var(--icen-token-text);
   pointer-events: none;
 }
 .icen-chart-tooltip[hidden] { display: none; }
 
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .icen-chart-tooltip { background: var(--icen-token-surface-raised); }
+}
+
 /* 数据标记（各图型的条/点/段/格）：交互态由委托层挂 .is-hover，图例切换挂 .is-off */
 [data-icen-chart-mark] { cursor: pointer; }
-[data-icen-chart-mark].is-hover { filter: brightness(1.12); }
+[data-icen-chart-mark].is-hover { filter: brightness(1.06); }
 [data-icen-chart-mark].is-off { opacity: 0.16; pointer-events: none; }
 svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
 
@@ -182,11 +206,12 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
 .icen-chart-legend--toggle .icen-chart-legend-toggle-item {
   cursor: pointer;
   border-radius: var(--icen-radius-xs);
-  padding: 2px 4px;
-  margin: -2px -4px;
+  padding: 3px 5px;
+  margin: -3px -5px;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-chart-legend--toggle .icen-chart-legend-toggle-item:hover { background: var(--icen-token-fill-1); }
+.icen-chart-legend--toggle .icen-chart-legend-toggle-item:hover { background: var(--icen-token-fill-hover); }
+.icen-chart-legend--toggle .icen-chart-legend-toggle-item:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-legend--toggle .icen-chart-legend-toggle-item:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
@@ -207,21 +232,24 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-faint);
 }
 .icen-chart-zoom-reset {
   flex-shrink: 0;
-  padding: 1px 8px;
+  min-height: 22px;
+  padding: 0 9px;
   border: 1px solid var(--icen-token-line);
   border-radius: var(--icen-radius-full);
   background: var(--icen-token-fill-1);
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
   color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.icen-chart-zoom-reset:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); }
+.icen-chart-zoom-reset:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); border-color: var(--icen-token-line-strong); }
+.icen-chart-zoom-reset:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-zoom-reset:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
 /* 缩放手势选区（拖拽期挂 body，position:fixed；accent 10% 填充） */
@@ -242,8 +270,8 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
   height: 150px;
 }
 .icen-chart-skeleton-bar {
-  height: 10px;
-  border-radius: var(--icen-radius-sm);
+  height: 8px;
+  border-radius: var(--icen-radius-xs);
   background: color-mix(in srgb, var(--icen-token-text) 8%, transparent);
   animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
@@ -278,12 +306,29 @@ svg .icen-chart-mark-label {
   cursor: pointer;
 }
 .icen-chart-map-dot {
-  transition: transform var(--icen-tx-fast);
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out), fill-opacity var(--icen-tx-fast);
   transform-box: fill-box;
   transform-origin: center;
 }
 .icen-chart-map-point.is-hover .icen-chart-map-dot {
   transform: scale(1.5);
+  fill-opacity: 0.9;
+}
+
+/* 高对比模式：图表配色由系统接管，只保留结构可辨的最小描边 */
+@media (forced-colors: active) {
+  .icen-chart-tooltip {
+    background: Canvas;
+    border-color: CanvasText;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .icen-chart-legend-dot,
+  .icen-chart-legend--toggle .icen-chart-legend-dot {
+    border: 1px solid CanvasText;
+  }
+  .icen-chart-zoom-reset { border-color: CanvasText; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -292,4 +337,33 @@ svg .icen-chart-mark-label {
   }
 }
 
+/* ── 键盘游标与读屏层（spec.a11y：summary/keyboard/table） ──
+   自包含 sr-only 几何（kit 独立引入时 base.css 可能缺席，不依赖 .icen-sr-only） */
+.icen-chart-summary,
+.icen-chart-live,
+.icen-chart-table {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+/* 键盘游标入口：图形可聚焦，焦点环走统一 ring 令牌 */
+[data-icen-chart-kb] { outline: none; }
+[data-icen-chart-kb]:focus-visible { box-shadow: var(--icen-ring); border-radius: var(--icen-radius-xs); }
+/* 游标焦点：DOM 柱条用轮廓环；SVG 点圆放大描边（r 为 SVG2 几何属性，不支持时退化为描边加粗） */
+.icen-chart-kb-focus {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 1px;
+  border-radius: var(--icen-radius-xs);
+}
+circle.icen-chart-kb-focus {
+  outline: none;
+  stroke-width: 3px;
+  r: 5px;
+}
+
 }

package/dist/components/charts.d.mts

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

package/dist/components/code-block.css

@@ -46,8 +46,8 @@
 /* ══════════════ 容器 ══════════════ */
 
 .icen-code-block {
-  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(--cb-background, var(--icen-token-surface));
   overflow: hidden;
 }
@@ -56,12 +56,12 @@
   margin: 0;
   border: 0;
   border-radius: 0;
-  padding: var(--icen-density-space-sm) 0;
+  padding: 10px 0;
   background: transparent !important; /* guard:allow-important shiki 主题自带内联背景，容器统一接管 */
   color: var(--icen-token-text);
   font-family: var(--icen-font-mono);
-  font-size: var(--icen-density-font-size-md);
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.6;
   overflow-x: auto;
   transition: max-height var(--icen-duration-slow) var(--icen-ease-out);
   direction: ltr;
@@ -83,9 +83,11 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-md);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  font-size: var(--icen-density-font-size-sm);
+  min-block-size: 34px;
+  padding: 0 var(--icen-density-space-md);
+  background: var(--icen-token-surface-chrome);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  font-size: 11.5px;
   line-height: 1.4;
   color: var(--icen-token-text-muted);
 }

package/dist/components/code-block.d.mts

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

package/dist/components/command-palette.css

@@ -47,12 +47,12 @@
   justify-content: center;
   padding-top: 12vh;
   padding-inline: var(--icen-density-space-md);
-  background: color-mix(in srgb, var(--icen-token-text) 40%, transparent);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  background: var(--icen-token-scrim);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   animation: icen-cp-fade-in var(--icen-tx-fast);
   /* 退场走过渡（behavior 的 closing 阶段；可中断续接） */
-  transition: opacity var(--icen-tx-fast) var(--icen-ease-out);
+  transition: opacity var(--icen-duration-fast) var(--icen-ease-out);
 }
 .icen-command-palette-backdrop[hidden] { display: none; }
 .icen-command-palette-backdrop[data-icen-state='closing'] {
@@ -68,12 +68,12 @@
   max-inline-size: 560px;
   max-block-size: 70vh;
   overflow: hidden;
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
   border-radius: var(--icen-radius-lg);
-  box-shadow: var(--icen-token-shadow-overlay);
-  animation: icen-cp-scale-in var(--icen-tx-fast) var(--icen-ease-out);
-  transition: transform var(--icen-tx-fast) var(--icen-ease-out);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-overlay);
+  animation: icen-cp-scale-in var(--icen-duration-normal) var(--icen-ease-enter);
+  transition: transform var(--icen-duration-fast) var(--icen-ease-exit);
 }
 .icen-command-palette-backdrop[data-icen-state='closing'] .icen-command-palette {
   transform: translateY(2px) scale(0.99);
@@ -85,17 +85,18 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-md);
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  min-block-size: 48px;
+  padding: 8px var(--icen-density-space-md);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
 }
 .icen-command-palette-search-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   flex-shrink: 0;
 }
-.icen-command-palette-search-icon svg { width: 16px; height: 16px; }
+.icen-command-palette-search-icon svg { width: 18px; height: 18px; }
 .icen-command-palette-input {
   flex: 1;
   min-width: 0;
@@ -104,17 +105,23 @@
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-density-font-size-lg);
+}
+/* 搜索栏不是 .icen-control（吃不到全局 focus-within 环）：输入框是开面板即聚焦的
+   主控件，焦点可见性自持——包裹层给 focus-within 软环 */
+.icen-command-palette-search:focus-within {
+  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+  border-radius: 0;
 }
 .icen-command-palette-input::placeholder {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-muted);
 }
 .icen-command-palette-esc {
   font-family: var(--icen-font-mono);
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   padding: 2px 6px;
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-control-border);
   border-radius: var(--icen-radius-xs);
   flex-shrink: 0;
 }
@@ -136,38 +143,38 @@
 }
 .icen-command-palette-group:last-child { margin-bottom: 0; }
 .icen-command-palette-group-label {
-  margin: var(--icen-density-space-sm) var(--icen-density-space-sm) var(--icen-density-space-xs);
-  font-size: var(--icen-density-font-size-xs);
+  margin: var(--icen-density-space-sm) var(--icen-density-space-sm) 3px;
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
-  color: var(--icen-token-text-faint);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  color: var(--icen-token-text-muted);
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
 .icen-command-palette-group:first-child .icen-command-palette-group-label { margin-top: 0; }
 
 .icen-command-palette-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-sm);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  padding: 8px var(--icen-density-space-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 5px var(--icen-density-space-sm);
   border: 0;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-command-palette-item:hover { background: var(--icen-token-fill-1); }
+.icen-command-palette-item:hover { background: var(--icen-token-fill-hover); }
 .icen-command-palette-item.is-active {
-  /* 当前候选 = 选中表面（accent 微底 + 内描边），不改文字色；与菜单/选择器同语言 */
-  background: var(--icen-token-accent-subtle);
+  /* 当前候选 = 选中表面；与菜单/选择器同语言 */
+  background: var(--icen-token-fill-selected);
   color: var(--icen-token-text);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 65%, var(--icen-token-line-soft));
+  box-shadow: none;
 }
 .icen-command-palette-item:focus-visible {
   outline: none;
@@ -181,9 +188,9 @@
   flex-shrink: 0;
   width: 18px;
   height: 18px;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
-.icen-command-palette-item.is-active .icen-command-palette-item-icon { color: var(--icen-token-accent); }
+.icen-command-palette-item.is-active .icen-command-palette-item-icon { color: var(--icen-token-accent-strong); }
 .icen-command-palette-item-icon svg { width: 16px; height: 16px; }
 .icen-command-palette-item-label {
   flex: 1;
@@ -221,22 +228,22 @@
 
 /* ── 底栏 ── */
 .icen-command-palette-foot {
-  padding: var(--icen-density-space-xs) var(--icen-density-space-md);
-  border-top: 1px solid var(--icen-token-line-soft);
-  background: var(--icen-token-bg-soft);
+  padding: 6px var(--icen-density-space-md);
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-command-palette-foot-hint {
   display: inline-flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-command-palette-foot-hint kbd {
   font-family: var(--icen-font-mono);
   font-size: var(--icen-density-font-size-2xs);
   padding: 1px 4px;
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-control-border);
   border-radius: var(--icen-radius-xs);
   background: var(--icen-token-surface);
 }
@@ -246,7 +253,7 @@
   to { opacity: 1; }
 }
 @keyframes icen-cp-scale-in {
-  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
+  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
 

package/dist/components/command-palette.d.mts

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