@icen.ai/ui 0.8.0 → 0.8.1

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="搜索…" />
@@ -209,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;
@@ -231,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 {
@@ -263,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/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 {
@@ -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; }
@@ -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]>

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';

package/dist/components/table.mjs

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

package/dist/components/tabs.css

@@ -221,3 +221,26 @@
 @media (prefers-reduced-motion: reduce) {
   .page-tab, .tabs a, .page-tab-close { transition: none; }
 }
+
+/* ── 指示条（[data-tabs-ink]，与 behaviors/tabs 配套；本节为追加）── */
+/* tablist（.tabs）挂 data-tabs-ink 时，行为层创建并移动 .tabs-ink：
+   宽 / translateX 由 JS 内联写入（布局定位，同 popover 模式）；
+   此处只负责视觉（高度 / 圆角 / 背景）与位移过渡（--duration / --ease token）。 */
+.tabs[data-tabs-ink] {
+  position: relative;
+}
+.tabs-ink {
+  position: absolute;
+  bottom: -1px; /* 盖在容器 1px 底边线上，与活动 tab 的 2px 下划线同高 */
+  left: 0;
+  height: 2px;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  pointer-events: none;
+  transition:
+    width var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tabs-ink { transition: none; }
+}

package/dist/components/tag-input.css

@@ -70,12 +70,7 @@
   max-width: 100%;
   animation: tag-pop var(--icen-tx-fast);
 }
-.tag-chip-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-}
+/* readonly 变体（消费方手写标记，behavior 不产出） */
 .tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
 
 @keyframes tag-pop {

package/dist/components/upload.css

@@ -195,21 +195,6 @@
   box-shadow: var(--icen-ring);
 }
 
-/* 进度条（behavior 可选注入 .upload-list-item-progress） */
-.upload-list-item-progress {
-  height: 2px;
-  width: 100%;
-  background: var(--token-fill-2);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-  margin-top: 2px;
-}
-.upload-list-item-progress-bar {
-  height: 100%;
-  background: var(--token-accent);
-  border-radius: var(--radius-full);
-  transition: width var(--icen-tx-normal) var(--ease-out);
-}
 .upload-list-item.is-error {
   border-color: var(--token-error);
 }

package/dist/index.d.mts

@@ -1,31 +1,33 @@
-export { PRESETS, STORAGE_KEY, STYLES, ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, setTheme, toggleDark } from './behaviors/theme.js';
-export { ToastConfig, ToastKind, ToastOptions, toast } from './behaviors/toast.js';
+export { PRESETS, STORAGE_KEY, STYLES, ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, listThemePresets, registerThemePreset, setStyle, setTheme, toggleDark } from './behaviors/theme.js';
+export { IcenEventMap, IcenGestureDetail, IcenGestureEvent, IcenListenOptions, IcenPolicy, destroyGestures, emitIcen, getEventPolicy, initGestures, onIcen, resetEventPolicies, setEventPolicy } from './behaviors/events.js';
+export { ToastConfig, ToastHandle, ToastKind, ToastOptions, toast } from './behaviors/toast.js';
 export { initTabs } from './behaviors/tabs.js';
 export { initCopy } from './behaviors/copy.js';
 export { initInput } from './behaviors/input.js';
+export { initPagination, initRating, initSegmented, initStepper, initSteps, initSwitch, initTableSort } from './behaviors/controls.js';
 export { initSelect } from './behaviors/select.js';
 export { initSlider } from './behaviors/slider.js';
 export { initTagInput } from './behaviors/tag-input.js';
 export { initUpload } from './behaviors/upload.js';
-export { closeModal, initModal, openModal } from './behaviors/modal.js';
+export { FOCUSABLE, ModalOpenOptions, closeModal, initModal, openModal } from './behaviors/modal.js';
 export { initDropdown } from './behaviors/dropdown.js';
-export { ContextMenuEntry, ContextMenuHeader, ContextMenuItem, ContextMenuOptions, ContextMenuSeparator, closeMenu, initContextMenu, openContextMenu, registerContextMenu } from './behaviors/context-menu.js';
-export { OpenPopoverOptions, PopoverAlign, PopoverLayout, PopoverLayoutOptions, PopoverRect, PopoverSide, PopoverViewport, closePopover, computePopoverLayout, openPopover } from './behaviors/popover.js';
+export { ContextMenuEntry, ContextMenuHeader, ContextMenuItem, ContextMenuOptions, ContextMenuSeparator, closeContextMenu, closeMenu, emitMenuSelect, initContextMenu, openContextMenu, registerContextMenu } from './behaviors/context-menu.js';
+export { OpenPopoverOptions, PanelSizing, PopoverAlign, PopoverLayout, PopoverLayoutOptions, PopoverRect, PopoverSide, PopoverViewport, applyPanelSizing, closePopover, computePopoverLayout, openPopover, readPanelSizing, resolvePanelSizing, sizingToLayout } from './behaviors/popover.js';
 export { initAccordion } from './behaviors/accordion.js';
 export { initTree } from './behaviors/tree.js';
 export { initCarousel } from './behaviors/carousel.js';
-export { ChartCalendarOptions, ChartChromeOptions, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartLegendState, ChartLineOptions, ChartMarkData, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, HeatmapDatum, RadarSeries, chartFormatValue, inferChartType, normalizeChartSpec, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderHBar, renderHeatmap, renderLine, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.js';
+export { ChartCalendarOptions, ChartChromeOptions, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartI18nLabels, ChartLineOptions, ChartMarkData, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, HeatmapDatum, RadarSeries, bindChartEvents, chartFormatValue, inferChartType, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderHBar, renderHeatmap, renderLine, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.js';
 export { initNav } from './behaviors/nav.js';
 export { initSidebar } from './behaviors/sidebar.js';
-export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.js';
+export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationRecord, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.js';
 export { initBackTop } from './behaviors/back-top.js';
-export { closeCommandPalette, initCommandPalette, openCommandPalette } from './behaviors/command-palette.js';
+export { CommandPaletteCommand, CommandPaletteOpenOptions, closeCommandPalette, initCommandPalette, openCommandPalette } from './behaviors/command-palette.js';
 export { initDatePicker } from './behaviors/date-picker.js';
 export { initSplitPane } from './behaviors/split-pane.js';
 export { TableColumn, TableHandle, TableOptions, createTable } from './behaviors/datatable.js';
-export { AiAudioPart, AiContent, AiContentPart, AiFilePart, AiImagePart, AiKindDef, AiKindTint, AiMediaPart, AiResourceLinkPart, AiStatus, AiTextPart, AiToolCallModel, AiUsage, AiVideoPart, aiContentUrl, aiStatusLabel, contentToText, contextEstimate, estimateTokens, formatDuration, formatTokens, getAiKind, inferKind, isAiContentPart, isAiContentPartArray, normalizeContentParts, normalizeMcpContent, normalizeToolCall, normalizeUsage, registerAiKind, svgIcon } from './behaviors/ai-core.js';
+export { AI_STATUSES, AiAudioPart, AiContent, AiContentPart, AiFilePart, AiImagePart, AiKindDef, AiKindTint, AiMediaPart, AiResourceLinkPart, AiStatus, AiTextPart, AiToolCallModel, AiUsage, AiVideoPart, addUsage, aiContentUrl, aiStatusLabel, contentToText, contextEstimate, estimateTokens, formatDuration, formatTokens, getAiKind, h, inferKind, isAiContentPart, normalizeContentParts, normalizeMcpContent, normalizeToolCall, normalizeUsage, registerAiKind, svgIcon } from './behaviors/ai-core.js';
 export { AiMessageHandle, AiMessageModel, AiStreamHandle, createAiStream, initAiChat, renderAiContentPart, renderAiMessage } from './behaviors/ai-chat.js';
-export { AiComposerBindOpts, AiComposerBinding, AiComposerCommand, AiComposerCurrentModel, AiComposerRefKind, AiComposerRefSource, AiProviderModelOption, AiProviderOption, bindComposer, initAiComposer, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage } from './behaviors/ai-composer.js';
+export { AiComposerBindOpts, AiComposerBinding, AiComposerCommand, AiComposerCurrentModel, AiComposerRefDef, AiComposerRefKind, AiComposerRefSource, AiProviderModelOption, AiProviderOption, bindComposer, initAiComposer, registerRefKind, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage } from './behaviors/ai-composer.js';
 export { AiSubagentHandle, AiToolCallHandle, initAiSubagent, initAiTool, renderAiSubagent, renderAiToolCall } from './behaviors/ai-tool.js';
 export { AiDiffFile, AiDiffFileStatus, AiDiffHunk, AiDiffLine, AiDiffModel, initAiDiff, parseUnifiedDiff, renderAiDiff } from './behaviors/ai-diff.js';
 export { AiAuditRenderOpts, AiContextFile, AiContextMcpServer, AiContextModel, AiContextSkill, AiTodoItem, AiUsageRenderOpts, AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing } from './behaviors/ai-panel.js';