@icen.ai/ui 0.10.0 → 0.11.1

package/dist/components/cascader.css

@@ -60,25 +60,26 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   inline-size: 100%;
-  height: var(--icen-density-input-height-md);
-  padding: 0 var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-md);
+  height: var(--icen-control-height-md);
+  padding: 0 var(--icen-field-padding-inline);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   background: var(--icen-token-control);
   color: var(--icen-token-text);
-  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);
   cursor: pointer;
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast);
-  padding-inline-end: var(--icen-density-space-sm);
+  padding-inline-end: calc(var(--icen-field-padding-inline) + 18px);
 }
 .icen-cascader-trigger:hover:not(:disabled) {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-cascader-trigger:focus-visible {
   outline: none;
@@ -106,15 +107,16 @@
 
 .icen-cascader-chevron {
   position: absolute;
-  inset-inline-end: var(--icen-density-space-sm);
+  inset-inline-end: var(--icen-field-padding-inline);
   inset-block-start: 50%;
   translate: 0 -50%;
-  inline-size: 16px;
-  block-size: 16px;
+  inline-size: 12px;
+  block-size: 12px;
   flex: none;
   color: var(--icen-token-text-muted);
+  opacity: .82;
   pointer-events: none;
-  transition: transform var(--icen-tx-fast);
+  transition: transform var(--icen-tx-fast), opacity var(--icen-tx-fast);
 }
 .icen-cascader.is-open .icen-cascader-chevron { transform: rotate(180deg); }
 
@@ -139,10 +141,10 @@
 }
 .icen-cascader-clear:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 /* 有清除钮时 trigger 行内末端侧让位（clear 18px + chevron 14px + 间距） */
-.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-density-input-height-sm) + var(--icen-density-space-xs)); }
+.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-space-sm) + var(--icen-control-height-sm) + var(--icen-density-space-xs)); }
 
 /* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
    data-icen-side="top|bottom" 标记翻侧方向。 */
@@ -151,11 +153,11 @@
   z-index: var(--icen-z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: var(--icen-density-space-sm);
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
+  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-shadow-overlay);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   transform-origin: top center;
   animation: icen-pop-in var(--icen-tx-fast);
 }
@@ -164,11 +166,11 @@
 /* ── 搜索框（opts.searchable 时 behavior 渲染）── */
 .icen-cascader-search {
   padding: var(--icen-density-space-xs);
-  border-bottom: 1px solid var(--icen-token-outline-soft);
-  margin-bottom: 4px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  margin-bottom: var(--icen-density-space-xs);
   position: sticky;
   top: 0;
-  background: var(--icen-token-card-strong);
+  background: var(--icen-token-surface);
   z-index: 1;
 }
 .icen-cascader-search-input { min-inline-size: 0; }
@@ -195,25 +197,41 @@
 .icen-cascader-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: 6px var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-sm);
-  border-radius: var(--icen-radius-sm);
+  gap: var(--icen-control-gap-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 4px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
+  border-radius: var(--icen-radius-xs);
   color: var(--icen-token-text);
   cursor: pointer;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.icen-cascader-item:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
+.icen-cascader-item:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
 .icen-cascader-item.is-focused {
-  background: var(--icen-token-fill-2);
+  background: var(--icen-token-fill-selected);
 }
 .icen-cascader-item.is-active {
   color: var(--icen-token-accent-text);
   font-weight: 500;
   background: var(--icen-token-accent-subtle);
 }
+.icen-cascader-item.is-selected {
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
+}
+.icen-cascader-item.is-selected::after {
+  content: '';
+  inline-size: 12px;
+  block-size: 12px;
+  flex: none;
+  margin-inline-start: auto;
+  background: currentColor;
+  mask: var(--icen-token-icon-check) center / contain no-repeat;
+  -webkit-mask: var(--icen-token-icon-check) center / contain no-repeat;
+}
 .icen-cascader-item.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -254,8 +272,8 @@
   cursor: pointer;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-cascader-result:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
-.icen-cascader-result.is-focused { background: var(--icen-token-fill-2); }
+.icen-cascader-result:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
+.icen-cascader-result.is-focused { background: var(--icen-token-fill-selected); }
 .icen-cascader-result.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -297,15 +315,18 @@
 }
 @media (pointer: coarse) {
   .icen-cascader-clear { min-inline-size: 44px; min-block-size: 44px; inset-inline-end: var(--icen-density-space-sm); }
-  .icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-density-input-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
+  .icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-trigger { padding-inline-end: calc(var(--icen-control-height-sm) + var(--icen-density-space-sm) + var(--icen-density-space-xs)); }
 }
 
-.icen-cascader--sm .icen-cascader-trigger { block-size: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
-.icen-cascader--lg .icen-cascader-trigger { block-size: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+.icen-cascader--sm .icen-cascader-trigger { block-size: var(--icen-control-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-cascader--lg .icen-cascader-trigger { block-size: var(--icen-control-height-lg); font-size: var(--icen-density-font-size-lg); }
 
-.icen-cascader-panel:has(> .icen-cascader-search) { scroll-padding-block-start: calc(var(--icen-density-input-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
+.icen-cascader-panel:has(> .icen-cascader-search) { scroll-padding-block-start: calc(var(--icen-control-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
 
 /* Popup affordance is carried by the control surface, not a direction glyph. */
-.icen-cascader-chevron { display: none; }
+/* Clear affordance replaces the popup glyph in the trailing slot. */
+.icen-cascader:has(.icen-cascader-clear:not([hidden])) .icen-cascader-chevron { display: none; }
+
+
 
 }

package/dist/components/cascader.d.mts

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

package/dist/components/chart-area.css

@@ -11,6 +11,10 @@
  * 同样追加进 svg（样式属性直出，挡指针事件在基座 charts.css）。
  */
 
+.icen-chart-area {
+  position: relative;
+  min-width: 0;
+}
 .icen-chart-area > svg {
   display: block;
   width: 100%;
@@ -18,4 +22,46 @@
   overflow: visible;
 }
 
+.icen-chart-area svg .icen-chart-grid {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.9;
+}
+.icen-chart-area svg .icen-chart-baseline {
+  stroke: var(--icen-token-line);
+  opacity: 1;
+}
+
+/* 面积是主体：渐变略浓于折线（.3 → 0），但描边收细到 1.75 */
+.icen-chart-area svg > path[fill='none'] {
+  stroke-width: 1.75;
+}
+.icen-chart-area svg stop:first-child { stop-opacity: 0.3; }
+.icen-chart-area svg stop:last-child { stop-opacity: 0; }
+
+/* 数据点：小一号的白芯色环，hover 放大到 1.5×（与折线同一套手感） */
+.icen-chart-area svg circle[data-icen-chart-mark]:not([data-icen-chart-hit]) {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out), opacity var(--icen-tx-fast);
+}
+.icen-chart-area svg circle[data-icen-chart-mark]:not([data-icen-chart-hit]):has(+ .is-hover) {
+  transform: scale(1.5);
+}
+.icen-chart-area svg circle[data-icen-chart-hit].is-hover {
+  fill: color-mix(in srgb, var(--icen-token-accent) 9%, transparent);
+}
+
+.icen-chart-area .icen-chart-labels {
+  margin-top: 5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-area svg circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-area svg .icen-chart-grid,
+  .icen-chart-area svg .icen-chart-baseline { stroke: GrayText; }
+}
+
 }

package/dist/components/chart-area.d.mts

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

package/dist/components/chart-bar.css

@@ -22,26 +22,35 @@
   position: relative;
   display: flex;
   align-items: flex-end;
-  gap: var(--icen-density-space-xs);
+  gap: 4px;
   height: 112px;
 }
+/* 轨道同时承担两件事：极淡的槽 + 四档横向网格（柱体覆盖网格，空白区仍可读数） */
 .icen-chart-vbar-track {
   flex: 1;
-  height: 100%;
   min-width: 0;
+  height: 100%;
   display: flex;
   align-items: flex-end;
-  background: color-mix(in srgb, var(--icen-token-fill-2) 45%, transparent);
-  border-radius: var(--icen-radius-sm);
   overflow: hidden;
+  border-radius: var(--icen-radius-xs);
+  background:
+    repeating-linear-gradient(
+      to top,
+      color-mix(in srgb, var(--icen-token-line-soft) 90%, transparent) 0 1px,
+      transparent 1px 25%
+    ),
+    color-mix(in srgb, var(--icen-token-fill-2) 34%, transparent);
 }
 .icen-chart-vbar-bar {
   width: 100%;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: var(--chart-tone, var(--icen-token-accent));
-  transition: height var(--icen-tx-slow);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 55%, transparent);
+  transition: height var(--icen-duration-slow) var(--icen-ease-out), filter var(--icen-tx-fast);
 }
-.icen-chart-vbar-bar:hover {
+.icen-chart-vbar-bar:hover,
+.icen-chart-vbar-bar.is-hover {
   filter: brightness(1.08);
 }
 
@@ -49,14 +58,22 @@
 .icen-chart-hbar {
   display: flex;
   flex-direction: column;
-  gap: var(--icen-density-space-xs);
+  gap: 2px;
 }
 .icen-chart-hbar-row {
   display: grid;
-  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) minmax(52px, auto); /* 数值列可长：定宽 52px 遇 "1234567.89" 会换行撑高整行错位 */
   gap: var(--icen-density-space-xs);
   align-items: center;
-  font-size: var(--icen-density-font-size-xs);
+  min-height: 26px;
+  padding: 0 4px;
+  margin: 0 -4px;
+  border-radius: var(--icen-radius-xs);
+  font-size: 12px;
+  transition: background-color var(--icen-tx-fast);
+}
+.icen-chart-hbar-row:hover {
+  background: var(--icen-token-fill-hover);
 }
 .icen-chart-hbar-label {
   overflow: hidden;
@@ -65,24 +82,28 @@
   color: var(--icen-token-text-muted);
 }
 .icen-chart-hbar-track {
-  height: 10px;
+  height: 8px;
   overflow: hidden;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-fill-2);
+  background: color-mix(in srgb, var(--icen-token-fill-2) 70%, transparent);
 }
 .icen-chart-hbar-bar {
   height: 100%;
   border-radius: var(--icen-radius-full);
   background: var(--chart-tone, var(--icen-token-accent));
-  transition: width var(--icen-tx-slow);
+  transition: width var(--icen-duration-slow) var(--icen-ease-out), filter var(--icen-tx-fast);
 }
-.icen-chart-hbar-bar:hover {
+.icen-chart-hbar-bar:hover,
+.icen-chart-hbar-bar.is-hover {
   filter: brightness(1.08);
 }
 .icen-chart-hbar-value {
   text-align: right;
+  font-family: var(--icen-font-mono);
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
-  color: var(--icen-token-text-faint);
+  white-space: nowrap; /* 配合 minmax(52px, auto)：长数值单行右对齐，不换行 */
+  color: var(--icen-token-text-muted);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -96,11 +117,29 @@
   flex-direction: column;
   justify-content: flex-end;
   gap: 0;
+  background: color-mix(in srgb, var(--icen-token-fill-2) 26%, transparent);
+}
+.icen-chart-vbar-track--multi.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar {
+  flex: none;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+/* 堆叠两端保留外轮廓圆角，段与段之间用 2px 面色缝分界（同色相邻也辨得清） */
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar:first-child {
+  border-end-start-radius: var(--icen-radius-xs);
+  border-end-end-radius: var(--icen-radius-xs);
+}
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar:last-child {
+  border-start-start-radius: var(--icen-radius-xs);
+  border-start-end-radius: var(--icen-radius-xs);
+}
+.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar + .icen-chart-vbar-bar {
+  box-shadow: inset 0 2px 0 var(--icen-token-card);
 }
-.icen-chart-vbar-track--multi.icen-chart-vbar-track--stacked > .icen-chart-vbar-bar { flex: none; width: 100%; }
 
 /* ── 标记线/标记点（spec.marks 的 vbar DOM 变体；--chart-mark-tone 注入标记色；
-     绝对定位元素无 z-index 也高于同容器内的静态条/轨，保持 DOM 顺序即叠放正确）── */
+      绝对定位元素无 z-index 也高于同容器内的静态条/轨，保持 DOM 顺序即叠放正确）── */
 .icen-chart-vbar .icen-chart-mark-line {
   position: absolute;
   pointer-events: none;
@@ -118,8 +157,8 @@
 }
 .icen-chart-vbar .icen-chart-mark-label {
   position: absolute;
-  font-size: var(--icen-density-font-size-2xs);
-  line-height: 1.2;
+  font-size: 11px;
+  line-height: 1.25;
   color: var(--chart-mark-tone, var(--icen-token-text-muted));
   white-space: nowrap;
 }
@@ -148,4 +187,12 @@
   transform: translateX(-50%);
 }
 
+@media (forced-colors: active) {
+  .icen-chart-vbar-track {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+  .icen-chart-hbar-track { border: 1px solid CanvasText; }
+}
+
 }

package/dist/components/chart-bar.d.mts

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

package/dist/components/chart-calendar.d.mts

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

package/dist/components/chart-gauge.css

@@ -17,6 +17,14 @@
   display: block;
   width: 132px;
   height: 132px;
+  overflow: visible;
+}
+/* 轨道与进度同宽（10）；轨道压到 6 成，进度弧圆头收口 */
+.icen-chart-gauge svg circle {
+  stroke-width: 10;
+}
+.icen-chart-gauge svg circle:first-of-type {
+  opacity: 0.7;
 }
 .icen-chart-gauge-center {
   position: absolute;
@@ -25,17 +33,29 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1px;
+  gap: 2px;
+  text-align: center;
 }
 .icen-chart-gauge-value {
   font-size: var(--icen-density-font-size-2xl);
-  font-weight: 700;
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
   color: var(--icen-token-text);
 }
 .icen-chart-gauge-label {
-  font-size: var(--icen-density-font-size-xs);
+  max-width: 88px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-faint);
 }
 
+@media (forced-colors: active) {
+  .icen-chart-gauge svg circle:first-of-type { stroke: CanvasText; }
+}
+
 }

package/dist/components/chart-gauge.d.mts

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

package/dist/components/chart-graph.css

@@ -17,15 +17,18 @@
   width: 100%;
   height: auto;
   display: block;
+  overflow: visible;
 }
 
-/* 边：不参与命中（交互只留节点），任一端簇隐藏时淡化 */
+/* 边：不参与命中（交互只留节点），任一端簇隐藏时淡化；权重宽度由行为直出 */
 .icen-chart-graph-edge {
   pointer-events: none;
+  stroke: var(--icen-token-line);
+  opacity: 0.9;
   transition: opacity var(--icen-tx-fast);
 }
 .icen-chart-graph-edge.is-off {
-  opacity: 0.1;
+  opacity: 0.08;
 }
 
 /* 节点：拖拽抓手（触屏禁默认手势，pointer 拖拽不滚动页面） */
@@ -37,18 +40,22 @@
   cursor: grabbing;
 }
 .icen-chart-graph-dot {
-  transition: stroke var(--icen-tx-fast), stroke-width var(--icen-tx-fast);
+  transition: stroke var(--icen-tx-fast), stroke-width var(--icen-tx-fast), filter var(--icen-tx-fast);
 }
 /* hover：描边换前景色（bindDatumEvents 挂 .is-hover） */
 .icen-chart-graph-node.is-hover .icen-chart-graph-dot {
   stroke: var(--icen-token-text);
   stroke-width: 2;
+  filter: brightness(1.05);
 }
 /* 拖拽态：accent 描边 */
 .icen-chart-graph-node.is-drag .icen-chart-graph-dot {
   stroke: var(--icen-token-accent);
   stroke-width: 2.5;
 }
+.icen-chart-graph-node.is-off {
+  opacity: 0.16;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .icen-chart-graph-edge,
@@ -57,4 +64,9 @@
   }
 }
 
+@media (forced-colors: active) {
+  .icen-chart-graph-edge { stroke: GrayText; }
+  .icen-chart-graph-dot { stroke: CanvasText; }
+}
+
 }

package/dist/components/chart-graph.d.mts

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