@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/scroll-area.css

@@ -1,115 +1,87 @@
 @layer icen.components {
-/*
- * @icen.ai/ui — Component: scroll-area（自定义滚动容器）
- *
- * 全局 base.css 已经提供细薄滚动条（所有元素默认生效）。
- * 本组件提供"显式带视觉边界的滚动区"——常用于：
- *   - 侧边栏长列表
- *   - 下拉面板内的滚动区
- *   - 需要限定高度并强调"这里可以滚"的容器
- *
- * 完整契约：
- *   <div class="icen-scroll-area [--sm|--lg] [--both]">
- *     任意超长内容…
- *   </div>
- *
- *   横向专用：<div class="icen-scroll-area icen-scroll-area--x">…</div>
- *   垂直专用：<div class="icen-scroll-area icen-scroll-area--y">…</div>
- *
- * 变体：
- *   --x  仅横向滚动（纵向裁剪）
- *   --y  仅纵向滚动（横向裁剪）
- *   --both 双向滚动
- *   --sm  窄滚动条（6px 宽）
- *   --lg  正常滚动条（10px 宽，默认 8px）
- *   --inset  内嵌阴影式（类似 code 编辑器）
- */
-
-.icen-scroll-area {
-  overflow: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-}
-
-.icen-scroll-area--x { overflow-x: auto; overflow-y: hidden; }
-.icen-scroll-area--y { overflow-x: hidden; overflow-y: auto; }
-.icen-scroll-area--both { overflow: auto; }
-
-/* ── 尺寸变体：覆盖全局滚动条宽度 ── */
-.icen-scroll-area--sm {
-  scrollbar-width: thin;
-}
-.icen-scroll-area--sm::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.icen-scroll-area--sm::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--icen-token-text-faint) 28%, transparent);
-  border-radius: 3px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
-  border: 0;
-}
-
-.icen-scroll-area--lg {
-  scrollbar-width: auto;
-}
-.icen-scroll-area--lg::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-.icen-scroll-area--lg::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--icen-token-text-faint) 35%, transparent);
-  border-radius: var(--icen-radius-xs);
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-.icen-scroll-area--lg::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--icen-token-text-faint) 50%, transparent);
-  background-clip: padding-box;
-}
-
-/* ── 内嵌变体：带视觉边界 ── */
-.icen-scroll-area--inset {
-  background: var(--icen-token-bg-soft);
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
-  padding: var(--icen-density-space-sm);
-}
-.icen-scroll-area--inset:focus-visible {
-  outline: none;
-  border-color: var(--icen-control-focus-border);
-  box-shadow: var(--icen-control-focus-shadow);
-}
-
-/* ── 渐隐遮罩（可选）：上下边缘渐隐，暗示可滚动 ── */
-.icen-scroll-area--fade {
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    transparent 0,
-    #000 var(--icen-density-space-sm),
-    #000 calc(100% - var(--icen-density-space-sm)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--icen-density-space-sm),
-    #000 calc(100% - var(--icen-density-space-sm)),
-    transparent 100%
-  );
-}
-
-/* ── 可被键盘聚焦的滚动容器 ── */
-.icen-scroll-area[tabindex='0']:focus-visible {
-  outline: none;
-  box-shadow: var(--icen-ring-soft);
-  border-radius: var(--icen-radius-md);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .icen-scroll-area { scroll-behavior: auto; }
-}
+/*
+ * @icen.ai/ui — Component: scroll-area（自定义滚动容器）
+ *
+ * 全局 base.css 已经提供细薄滚动条（所有元素默认生效）。
+ * 本组件提供"显式带视觉边界的滚动区"——常用于：
+ *   - 侧边栏长列表
+ *   - 下拉面板内的滚动区
+ *   - 需要限定高度并强调"这里可以滚"的容器
+ *
+ * 完整契约：
+ *   <div class="icen-scroll-area [--sm|--lg] [--both]">
+ *     任意超长内容…
+ *   </div>
+ *
+ *   横向专用：<div class="icen-scroll-area icen-scroll-area--x">…</div>
+ *   垂直专用：<div class="icen-scroll-area icen-scroll-area--y">…</div>
+ *
+ * 变体：
+ *   --x  仅横向滚动（纵向裁剪）
+ *   --y  仅纵向滚动（横向裁剪）
+ *   --both 双向滚动
+ *   --sm  窄滚动条（6px 宽）
+ *   --lg  正常滚动条（12px 宽，默认 8px）
+ *   --inset  内嵌阴影式（类似 code 编辑器）
+ */
+
+.icen-scroll-area {
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+.icen-scroll-area--x { overflow-x: auto; overflow-y: hidden; }
+.icen-scroll-area--y { overflow-x: hidden; overflow-y: auto; }
+.icen-scroll-area--both { overflow: auto; }
+
+/* Size variants share the global track, thumb and visibility policy. */
+.icen-scroll-area--sm { --icen-token-scrollbar-size: var(--icen-token-scrollbar-size-sm); }
+.icen-scroll-area--lg { --icen-token-scrollbar-size: var(--icen-token-scrollbar-size-lg); }
+
+/* ── 内嵌变体：带视觉边界 ── */
+.icen-scroll-area--inset {
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: var(--icen-token-shadow-field);
+  padding: var(--icen-density-space-sm);
+}
+.icen-scroll-area--inset:focus-visible {
+  outline: none;
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+
+/* ── 渐隐遮罩（可选）：上下边缘渐隐，暗示可滚动 ── */
+.icen-scroll-area--fade {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 0,
+    #000 var(--icen-density-space-sm),
+    #000 calc(100% - var(--icen-density-space-sm)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--icen-density-space-sm),
+    #000 calc(100% - var(--icen-density-space-sm)),
+    transparent 100%
+  );
+}
+
+/* ── 可被键盘聚焦的滚动容器 ── */
+.icen-scroll-area[tabindex='0']:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring-soft);
+  border-radius: var(--icen-radius-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-scroll-area { scroll-behavior: auto; }
+}
 
 }

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

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

package/dist/components/scroll-area.mjs

@@ -1,2 +1,3 @@
 // @icen.ai/ui — kit: scroll-area（CSS + behavior 一行入口；构建产物，勿手改）
 import './scroll-area.css';
+export * from '../behaviors/scroll-area.mjs';

package/dist/components/segmented.css

@@ -45,24 +45,26 @@
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 2px;
+  padding: 3px;
   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);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: var(--icen-token-shadow-field);
 }
 
 .icen-segmented-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: var(--icen-density-space-xs) calc(var(--icen-density-space-sm) + 2px);
-  font-size: var(--icen-density-font-size-sm);
-  font-weight: 500;
+  justify-content: center;
+  gap: var(--icen-control-gap-sm);
+  min-block-size: calc(var(--icen-control-height-sm) - 8px);
+  padding: 0 var(--icen-control-padding-inline-sm);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--icen-radius-sm);
+  border-radius: max(0px, calc(var(--icen-control-radius-lg) - 3px));
   color: var(--icen-token-text-muted);
   -webkit-tap-highlight-color: transparent;
   transition:
@@ -72,7 +74,7 @@
 }
 .icen-segmented-item:hover:not(.is-active):not(:disabled) {
   color: var(--icen-token-text);
-  background: var(--icen-token-surface-hover);
+  background: var(--icen-token-fill-hover);
 }
 .icen-segmented-item:focus-visible {
   outline: none;
@@ -82,47 +84,51 @@
 .icen-segmented-item[aria-checked='true'] {
   background: var(--icen-token-accent-strong);
   color: var(--icen-token-on-accent);
-  box-shadow: var(--icen-token-shadow-elevated);
+  box-shadow: var(--icen-token-shadow-control);
 }
 .icen-segmented-item:disabled,
 .icen-segmented-item[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
 }
-.icen-segmented-item svg { width: 13px; height: 13px; flex-shrink: 0; }
+.icen-segmented-item svg { width: 14px; height: 14px; flex-shrink: 0; }
 
 /* 尺寸 */
 .icen-segmented--sm .icen-segmented-item {
-  padding: 2px var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-xs);
+  min-block-size: calc(var(--icen-control-height-sm) - 12px);
+  padding: 0 var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
 }
 .icen-segmented--lg .icen-segmented-item {
-  padding: var(--icen-density-space-xs) var(--icen-density-space-md);
-  font-size: var(--icen-density-font-size-md);
+  min-block-size: calc(var(--icen-control-height-md) - 6px);
+  padding: 0 var(--icen-density-space-md);
+  font-size: var(--icen-font-size-control);
 }
 
 /* ── 切换组（segmented 同族变体） ── */
 .icen-toggle-group {
   display: inline-flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: var(--icen-density-space-xs);
+  gap: 2px;
+  padding: 3px;
   background: var(--icen-token-panel);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius-lg);
 }
 
 .icen-toggle-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-sm);
-  font-weight: 500;
+  justify-content: center;
+  gap: var(--icen-control-gap-sm);
+  min-block-size: calc(var(--icen-control-height-sm) - 8px);
+  padding: 0 var(--icen-control-padding-inline-sm);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--icen-radius-xs);
+  border-radius: max(0px, calc(var(--icen-control-radius-lg) - 3px));
   color: var(--icen-token-text-muted);
   transition:
     background-color var(--icen-tx-fast),
@@ -130,7 +136,7 @@
 }
 .icen-toggle-item:hover:not(.is-active):not(:disabled) {
   color: var(--icen-token-text);
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
 }
 .icen-toggle-item:focus-visible {
   outline: none;
@@ -156,13 +162,14 @@
 .icen-stepper {
   display: inline-flex;
   align-items: stretch;
+  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);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
   overflow: hidden;
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.icen-stepper:hover { border-color: var(--icen-hover-border); }
+.icen-stepper:hover { border-color: var(--icen-token-control-border-hover); }
 .icen-stepper:focus-within {
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
@@ -344,4 +351,15 @@
   background: color-mix(in srgb, var(--icen-token-success) 8%, transparent);
 }
 
+/* 高对比模式：分段/切换组的选中段不能只靠白面阴影 */
+@media (forced-colors: active) {
+  .icen-segmented-item.is-active,
+  .icen-segmented-item[aria-checked='true'],
+  .icen-toggle-item.is-active,
+  .icen-toggle-group-btn.is-active {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+}
+
 }

package/dist/components/segmented.d.mts

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

package/dist/components/select.css

@@ -45,7 +45,7 @@
  */
 
 .icen-select {
-  --select-height: var(--icen-density-input-height-md);
+  --select-height: var(--icen-control-height-md);
   position: relative;
   inline-size: 100%;
 }
@@ -54,25 +54,28 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   inline-size: 100%;
   height: var(--select-height);
-  padding: 0 var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-md);
+  padding: 0 var(--icen-field-padding-inline);
+  font-family: var(--icen-font-body);
+  font-size: var(--icen-font-size-control);
+  line-height: 1.4;
   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:
+    background-color var(--icen-tx-fast),
     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-select-trigger:hover:not(:disabled) {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-select-trigger:focus-visible {
   outline: none;
@@ -88,8 +91,8 @@
 }
 
 /* 尺寸变体（与 input-wrap 对齐） */
-.icen-select-trigger--sm { height: var(--icen-density-input-height-sm); padding: 0 10px; font-size: var(--icen-density-font-size-sm); }
-.icen-select-trigger--lg { height: var(--icen-density-input-height-lg); padding: 0 var(--icen-density-space-md); font-size: var(--icen-density-font-size-lg); }
+.icen-select-trigger--sm { height: var(--icen-control-height-sm); padding-inline: var(--icen-field-padding-inline-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-select-trigger--lg { height: var(--icen-control-height-lg); padding-inline: var(--icen-control-padding-inline-lg); font-size: var(--icen-density-font-size-lg); }
 
 .icen-select-leading {
   display: inline-flex;
@@ -107,20 +110,21 @@
   white-space: nowrap;
 }
 .icen-select-value.is-empty {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-faint); /* 全量 faint：60% 混透浅色仅 ~2.4:1 低于 AA（faint 全量 ≥4.9:1） */
 }
 
 .icen-select-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-select.is-open .icen-select-chevron { transform: rotate(180deg); }
 
@@ -131,11 +135,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);
 }
@@ -146,29 +150,47 @@
 .icen-select-option {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  padding: 6px var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 4px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   border: none;
   background: transparent;
   color: var(--icen-token-text);
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.icen-select-option:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
+.icen-select-option:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
 .icen-select-option.is-focused {
-  background: var(--icen-token-fill-2);
+  background: var(--icen-token-fill-selected);
   color: var(--icen-token-text);
 }
+/* A checked popup item carries a trailing glyph, the desktop convention; color
+ * and weight remain redundant signals rather than the only distinction. */
 .icen-select-option.is-selected {
-  color: var(--icen-token-accent-text);
-  font-weight: 500;
-  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
+  background: var(--icen-token-fill-selected);
+}
+.icen-select-option.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-select-option.is-selected.is-focused,
+.icen-select-option.is-selected:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
 }
 .icen-select-option.is-disabled {
   opacity: 0.4;
@@ -181,11 +203,11 @@
   margin-top: 4px;
 }
 .icen-select-group-label {
-  padding: 6px var(--icen-density-space-sm) 2px;
-  font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  padding: 8px var(--icen-density-space-sm) 3px;
+  font-size: var(--icen-font-size-caption);
+  font-weight: 600;
+  color: var(--icen-token-text-muted);
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
 
 /* 空状态（behavior 渲染 no-match） */
@@ -199,11 +221,11 @@
 /* ── 搜索框（data-icen-select-search 时 behavior 自动注入） ── */
 .icen-select-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-select-search-input { min-inline-size: 0; }
@@ -261,8 +283,8 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  inline-size: 16px;
-  block-size: 20px;
+  inline-size: 24px; /* WCAG 2.5.8 下限：16px 的移除钮在桌面端也易误触（移除是删数据操作） */
+  block-size: 24px;
   margin-inline-start: var(--icen-density-space-xs);
   padding: 0;
   border: 0;
@@ -284,6 +306,13 @@
   padding-bottom: 4px;
   flex-wrap: wrap;
 }
+/* sm 档的 chips 需要压到 24px 拇指高度内：24px chip + 2px×2 内距 = 28px 控件高。 */
+.icen-select[data-icen-select-multiple]:has(> .icen-select-trigger--sm) .icen-select-trigger {
+  padding-block: 2px;
+}
+.icen-select[data-icen-select-multiple]:has(> .icen-select-trigger--sm) > .icen-select-chips {
+  padding-block: 2px;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .icen-select-panel { animation: none; }
@@ -344,7 +373,17 @@
 
 .icen-select-panel:has(> .icen-select-search) { scroll-padding-block-start: calc(var(--icen-density-input-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-select-chevron { display: none; }
+/* Clear affordance replaces the popup glyph in the trailing slot; the two are
+ * never shown together, so the trigger keeps one stable optical end. */
+.icen-select:has(.icen-select-clear:not([hidden])) .icen-select-chevron { display: none; }
+
+/* 高对比模式：选中项用系统高亮，勾选 glyph 保留在 HighlightText 上 */
+@media (forced-colors: active) {
+  .icen-select-option.is-selected {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .icen-select-option.is-selected::after { background: HighlightText; }
+}
 
 }

package/dist/components/select.d.mts

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