@icen.ai/ui 0.5.0 → 0.8.1

package/dist/components/segmented.css

@@ -28,7 +28,15 @@
  *        …
  *      </div>
  *
- * segmented/toggle 是纯 CSS 状态组件（.is-active）；stepper/otp 由 behaviors/input.ts 接线。
+ * segmented / stepper 由 behaviors/controls.ts 接线（initSegmented / initStepper，
+ * 派 icen:segmented-change / icen:stepper-change）；otp 由 behaviors/input.ts 的
+ * initInput 接线；toggle-group 为纯 CSS 状态组件（.is-active，使用方自行驱动）。
+ *
+ * 增强段（正文"增强"段）：
+ *   变体：segmented--block / segmented--ghost / toggle-group--block / toggle-group--ghost
+ *   槽位：stepper-unit（步进器单位后缀）/ otp-separator（OTP 分组分隔符）
+ *   状态类（消费方施加）：.otp.is-complete（behavior 接线中）/ .otp.is-error /
+ *         .segmented.is-error / .segmented.is-disabled / .toggle-group.is-error / .toggle-group.is-disabled
  */
 
 /* ── 分段控件（排他单选） ── */
@@ -72,7 +80,7 @@
 .segmented-item.is-active,
 .segmented-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-elevated);
 }
 .segmented-item:disabled,
@@ -130,7 +138,7 @@
 .toggle-item.is-active,
 .toggle-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-card);
 }
 .toggle-item:disabled,
@@ -181,7 +189,7 @@
 }
 .stepper-btn:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent);
+  box-shadow: var(--icen-ring-inset);
 }
 .stepper-btn:disabled,
 .stepper-btn[aria-disabled='true'] {
@@ -225,7 +233,7 @@
   height: 48px;
   padding: 0;
   text-align: center;
-  font-size: 18px;
+  font-size: var(--density-font-size-xl);
   font-weight: 600;
   font-family: var(--font-mono);
   color: var(--token-text);
@@ -254,7 +262,7 @@
   cursor: not-allowed;
 }
 .otp--sm .otp-cell { width: 32px; height: 40px; font-size: var(--density-font-size-lg); }
-.otp--lg .otp-cell { width: 48px; height: 56px; font-size: 22px; }
+.otp--lg .otp-cell { width: 48px; height: 56px; font-size: var(--density-font-size-2xl); }
 
 @media (prefers-reduced-motion: reduce) {
   .segmented-item, .toggle-item, .stepper-btn, .stepper, .otp-cell { transition: none; }

package/dist/components/segmented.mjs

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

package/dist/components/select.css

@@ -4,14 +4,24 @@
  *
  * 完整契约：
  *   <div class="select [data-disabled] [.is-open]" data-select
- *        [data-select-search] [data-select-multiple] [data-select-max="3"]>
+ *        [data-select-search] [data-select-multiple] [data-select-max="3"]
+ *        [data-panel-width="220"] [data-panel-min="200"]
+ *        [data-panel-max="360"] [data-panel-max-height="320"]>
+ *     <!-- 选项 .select-option 内支持任意 HTML（色卡 / 图标 / 多行）；
+ *          面板尺寸为全库统一 PanelSizing 契约（behaviors/popover.ts） -->
  *     <button class="select-trigger pressable focus-ring [--sm|--lg]" aria-haspopup="listbox"
  *             aria-expanded="false" [disabled]>
  *       <span class="select-leading">…</span>           可选前缀
- *       <span class="select-value is-empty">占位</span>
- *       <button class="select-clear" aria-label="清除">×</button>  ← 多选时可选
+ *       <span class="select-value is-empty">占位</span>   多选有选中时 behavior 隐藏它
+ *       <span class="select-chips">                     ← 多选选中态由 behavior 渲染（勿手写）
+ *         <span class="select-chip">标签<span class="select-chip-x" role="button" tabindex="-1">×</span></span>
+ *         <span class="select-chip select-chip--more">+2</span>
+ *       </span>
  *       <svg class="select-chevron">…</svg>
  *     </button>
+ *     <button class="select-clear" aria-label="清除全部" hidden>×</button>  ← 多选可选：
+ *         与 trigger 同级（不能嵌套在 button 内），绝对定位叠进 trigger 右侧；
+ *         behavior 在有选中时自动显示
  *     <div class="select-panel" hidden role="listbox">
  *       <div class="select-search">                      ← data-select-search 时 behavior 自动注入
  *         <input class="select-search-input" placeholder="搜索…" />
@@ -26,7 +36,8 @@
  *   </div>
  *
  * behavior 维护：
- *   - .select.is-open ↔ aria-expanded；panel [hidden] 切换；ESC/外部点击关闭
+ *   - .select.is-open ↔ aria-expanded；panel portal 到 body（inline left/top/width/max-height，
+ *     带 data-side="top|bottom"；多选时带 data-select-multiple）；ESC/外部点击关闭
  *   - 选项 .is-focused 跟随键盘箭头；Enter 选中 → 写回 .select-value / .is-selected
  *   - data-select-search：面板顶部自动插入搜索框，实时过滤（含 data-keywords），空分组自动隐藏
  *   - data-select-multiple：点击切选不关面板，trigger 显示计数，hidden input 同步逗号分隔值
@@ -35,7 +46,6 @@
 .select {
   position: relative;
   width: 100%;
-  isolation: isolate; /* panel 不被后面兄弟节点的层叠遮挡 */
 }
 
 .select-trigger {
@@ -105,12 +115,11 @@
 }
 .select.is-open .select-chevron { transform: rotate(180deg); }
 
+/* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
+   data-side="top|bottom" 标记翻侧方向；多选时 panel 带 data-select-multiple 属性。 */
 .select-panel {
   position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 100%;
-  max-height: 240px;
+  z-index: var(--z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 4px;
@@ -118,17 +127,10 @@
   border: 1px solid var(--token-outline);
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
-  z-index: var(--z-popover);
   transform-origin: top center;
-  animation: select-panel-in var(--icen-tx-fast);
-}
-@keyframes select-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .select-panel { animation: none; }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
+.select-panel[data-side='top'] { transform-origin: bottom center; }
 
 /* 选项 */
 .select-option {
@@ -217,8 +219,13 @@
   box-shadow: var(--icen-control-focus-shadow);
 }
 
-/* ── 多选清除按钮 ── */
+/* ── 多选清除按钮（与 trigger 同级，绝对定位叠进 trigger 右侧、chevron 左侧） ── */
 .select-clear {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--density-space-sm) + 20px);
+  transform: translateY(-50%);
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -230,7 +237,7 @@
   border-radius: var(--radius-xs);
   background: transparent;
   color: var(--token-text-faint);
-  font-size: 15px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
@@ -239,6 +246,53 @@
   color: var(--token-text);
   background: var(--token-fill-1);
 }
+/* 有清除钮时 trigger 右侧让位（clear 18px + chevron 14px + 间距） */
+.select:has(.select-clear) .select-trigger { padding-right: 52px; }
+
+/* ── 多选 chips（tag 式展示；× 仅 hover 对应 chip 时出现） ── */
+.select-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.select-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  font-size: var(--density-font-size-xs);
+  line-height: 1.6;
+  color: var(--token-text);
+  background: var(--token-fill-2);
+  border-radius: var(--radius-sm);
+  padding: 0 7px;
+  white-space: nowrap;
+}
+.select-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  margin-left: 0;
+  color: var(--token-text-faint);
+  border-radius: var(--radius-full);
+  font-size: var(--density-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    width var(--icen-tx-fast),
+    opacity var(--icen-tx-fast),
+    margin-left var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.select-chip:hover .select-chip-x,
+.select-chip-x:focus-visible { width: 12px; opacity: 1; margin-left: 4px; }
+.select-chip-x:hover { color: var(--token-error); }
+.select-chip--more { color: var(--token-text-muted); background: var(--token-fill-1); }
 
 /* ── 多选 trigger 高度自适应（chips 可能换行） ── */
 .select[data-select-multiple] .select-trigger {
@@ -249,8 +303,8 @@
   flex-wrap: wrap;
 }
 
-/* 多选项 checkbox 指示器（选项左侧） */
-.select[data-select-multiple] .select-option::before {
+/* 多选项 checkbox 指示器（选项左侧；panel portal 到 body，属性在 panel 上） */
+.select-panel[data-select-multiple] .select-option::before {
   content: '';
   width: 14px;
   height: 14px;
@@ -259,11 +313,11 @@
   border-radius: var(--radius-xs);
   transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.select[data-select-multiple] .select-option.is-selected::before {
+.select-panel[data-select-multiple] .select-option.is-selected::before {
   background: var(--token-accent);
   border-color: var(--token-accent);
 }
-.select[data-select-multiple] .select-option.is-selected::after {
+.select-panel[data-select-multiple] .select-option.is-selected::after {
   content: '✓';
   margin-left: auto;
 }
@@ -271,5 +325,6 @@
 @media (prefers-reduced-motion: reduce) {
   .select-panel { animation: none; }
   .select-search-input,
+  .select-chip-x,
   .select-clear { transition: none; }
 }

package/dist/components/sidebar.css

@@ -170,7 +170,7 @@
   padding: 0 5px;
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   font-variant-numeric: tabular-nums;

package/dist/components/split-pane.css

@@ -82,7 +82,6 @@
 }
 .split-pane--vertical .split-pane-first {
   flex: 0 0 var(--split, 50%);
-  flex-basis: var(--split, 50%);
   min-height: 0;
 }
 .split-pane--vertical .split-pane-second {

package/dist/components/stat.css

@@ -6,10 +6,10 @@
  *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
  *       <div class="stat-head">
  *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon [.icon--ok|.icon--warn|.icon--bad|.icon--info]>…svg…</span>
+ *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
  *       </div>
  *       <div class="stat-body">
- *         <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
+ *         <div class="stat-num [--accent|--warning|--error|--info]">0</div>
  *         <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
  *           <svg>…arrow…</svg> +12.4%
  *           <span class="stat-period">比上周</span>
@@ -85,10 +85,10 @@
   background: var(--token-accent-subtle);
   color: var(--token-accent);
 }
-.stat-icon.icon--ok   { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
-.stat-icon.icon--warn { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
-.stat-icon.icon--bad  { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
-.stat-icon.icon--info { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
+.stat-icon.icon--success { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
+.stat-icon.icon--warning { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
+.stat-icon.icon--error   { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
+.stat-icon.icon--info    { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
 .stat-icon svg { width: 14px; height: 14px; }
 
 /* ── 内容体（数字 + 趋势） ── */
@@ -99,17 +99,17 @@
 }
 
 .stat-num {
-  font-size: 24px;
+  font-size: var(--density-font-size-2xl);
   font-weight: 700;
   line-height: 1.2;
   font-variant-numeric: tabular-nums lining-nums;
   color: var(--token-text);
   word-break: break-all;
 }
-.stat-num.accent { color: var(--token-accent); }
-.stat-num.warn   { color: var(--token-warning); }
-.stat-num.bad    { color: var(--token-error); }
-.stat-num.info   { color: var(--token-info); }
+.stat-num--accent  { color: var(--token-accent); }
+.stat-num--warning { color: var(--token-warning); }
+.stat-num--error   { color: var(--token-error); }
+.stat-num--info    { color: var(--token-info); }
 
 .stat-delta {
   display: inline-flex;
@@ -134,7 +134,7 @@
   gap: 2px;
 }
 .stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
-.stat-card--sm .stat-label { font-size: 10px; }
+.stat-card--sm .stat-label { font-size: var(--density-font-size-2xs); }
 
 /* ── 横向布局（dashboard 顶栏：标签左 + 数字右） ── */
 .stat-card--horizontal {
@@ -215,20 +215,16 @@
   margin: 0 1px;
 }
 
-/* ── 加载态骨架 ── */
+/* ── 加载态骨架（脉冲 keyframes 见 base.css 的 icen-skeleton-pulse） ── */
 .stat-card.is-loading .stat-num,
 .stat-card.is-loading .stat-delta {
   color: transparent;
   background: var(--token-fill-2);
   border-radius: var(--radius-xs);
-  animation: stat-skeleton 1.5s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--stat-skeleton-duration, 1.5s) ease-in-out infinite;
 }
 .stat-card.is-loading .stat-num { height: 28px; }
 .stat-card.is-loading .stat-delta { height: 14px; width: 60%; }
-@keyframes stat-skeleton {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
 @media (prefers-reduced-motion: reduce) {
   .stat-card.is-loading .stat-num,
   .stat-card.is-loading .stat-delta { animation: none; }

package/dist/components/steps.css

@@ -2,7 +2,8 @@
  * @icen.ai/ui — Component: steps（步骤条，横向默认 / .steps--vertical 垂直）
  *
  * 完整契约：
- *   <ol class="steps [steps--vertical] [steps--sm|steps--lg]" aria-label="进度">
+ *   <ol class="steps [steps--vertical] [steps--sm|steps--lg] [steps--dots|steps--progress|steps--connected]"
+ *        aria-label="进度">
  *     <li class="step [step--finish|step--process|step--wait] [.step--error]">
  *       <span class="step-line"></span>                   ← 横向：右半段连线；末步自动隐藏
  *       <span class="step-dot">[✓ | ! | 数字]</span>
@@ -14,7 +15,11 @@
  *   </ol>
  *
  * 四态：finish / process / wait / error（错误用 error 色 dot + 描边）。
- * 点击 .step[role=button] 由使用方实现跳转。
+ * 变体与增强（正文下半段）：--dots 纯点紧凑 / --progress 步骤间填充进度线 / --connected 虚线连接；
+ *   dot 内可放 svg.step-dot-icon；step-desc 旁可加 .step-extra 富化描述；
+ *   可点击步骤标 .step--clickable（与 controls.ts initSteps 的 JSDoc 同口径）。
+ * 点击 .step[role=button] 由 behaviors/controls.ts 的 initSteps() 接线（激活态位移 +
+ * icen:step-change）；跳转业务仍由使用方监听事件实现。
  */
 
 .steps {
@@ -61,7 +66,7 @@
 }
 .step--finish .step-dot {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .step--process .step-dot {
   background: var(--token-accent-subtle);
@@ -141,7 +146,9 @@
   padding: 0;
   font-size: 0;
 }
-.steps--dots .step-line { top: 20px; }
+/* 线 top = dot 高度一半：默认 32→16 / sm 24→12 / lg 40→20 / dots 10→5；
+   本块位于尺寸变体之后，同等特异性下靠源顺序生效，dots 与 --sm/--lg 叠加时以 5px 为准 */
+.steps--dots .step-line { top: 5px; }
 .steps--dots .step-title,
 .steps--dots .step-desc { display: none; }
 .steps--dots .step { flex: none; }
@@ -152,7 +159,7 @@
   width: 16px;
   height: 16px;
 }
-.step--finish .step-dot-icon { color: var(--token-on-accent, #fff); }
+.step--finish .step-dot-icon { color: var(--token-on-accent); }
 .step--process .step-dot-icon { color: var(--token-accent); }
 .step--wait .step-dot-icon { color: var(--token-text-faint); }
 .step--error .step-dot-icon { color: var(--token-error); }
@@ -171,8 +178,11 @@
 }
 
 /* ── 进度条变体（步骤间的填充进度，非离散连线） ── */
+/* 高度 1px→3px 时线只向下扩张 2px，整体上移 1px 使线心与 1px 基线居中一致；
+   用 translateY 而非改 top，可同时适配 --sm(12px)/--lg(20px) 的不同基线 */
 .steps--progress .step-line {
   height: 3px;
+  transform: translateY(-1px);
   border-radius: var(--radius-full);
   background: var(--token-fill-2);
   overflow: hidden;

package/dist/components/steps.mjs

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

package/dist/components/switch.css

@@ -1,6 +1,8 @@
 /*
  * @icen.ai/ui — Component: switch / checkbox / radio（开关 / 勾选 / 单选行）
- * 纯 CSS 状态组件：状态全走 aria-checked / .is-selected；交互由使用方或演示页脚本切换。
+ * 状态组件：状态全走 aria-checked / .is-selected；交互由 behaviors/controls.ts 的
+ * initSwitch() 接线（点击 / Space / Enter 翻转并派 icen:switch-change / icen:check-change），
+ * 不接线时亦可由使用方自行驱动状态。
  *
  * 完整契约：
  *   <button class="switch [--sm|--lg]" role="switch" aria-checked="true|false" [disabled]>
@@ -59,8 +61,8 @@
   width: var(--switch-thumb);
   height: var(--switch-thumb);
   border-radius: var(--radius-full);
-  background: var(--token-on-accent, #fff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  background: var(--token-on-accent);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--token-text) 15%, transparent);
   transition: transform var(--icen-tx-bounce);
 }
 .switch[aria-checked='true'] .switch-thumb {
@@ -71,10 +73,6 @@
 .switch--sm { --switch-w: 36px; --switch-h: 20px; --switch-thumb: 16px; }
 .switch--lg { --switch-w: 56px; --switch-h: 28px; --switch-thumb: 24px; }
 
-@media (prefers-reduced-motion: reduce) {
-  .switch-thumb { transition: none; }
-}
-
 /* ── 勾选框（✓ 与半选横条均 ::before 自绘） ── */
 .checkbox {
   --checkbox-size: 16px;
@@ -104,7 +102,7 @@
 .checkbox[aria-checked='mixed'] {
   background: var(--token-accent);
   border-color: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .checkbox::before {
   content: '';
@@ -224,7 +222,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: transparent;
 }
@@ -234,9 +232,9 @@
   left: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .switch--text[aria-checked='false']::before {
   content: 'OFF';
@@ -244,7 +242,7 @@
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: var(--token-text-faint);
 }
@@ -304,7 +302,7 @@
     background-color var(--icen-tx-fast);
 }
 .radio-card:hover {
-  border-color: var(--token-hover-border, color-mix(in srgb, var(--token-accent) 30%, transparent));
+  border-color: var(--icen-hover-border);
 }
 .radio-card-head {
   display: flex;

package/dist/components/switch.mjs

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