@icen.ai/ui 0.1.0 → 0.2.0

package/dist/components/pagination.css

@@ -0,0 +1,32 @@
+/*
+ * @icen.ai/ui — Component: pagination（分页）
+ * 用法：<nav class="pagination" aria-label="分页">
+ *         <button class="page-btn motion is-disabled">‹</button>
+ *         <button class="page-btn motion">1</button>
+ *         <span class="page-ellipsis">…</span>
+ *         <button class="page-btn motion is-active" aria-current="page">5</button>
+ *         <button class="page-btn motion">›</button>
+ *       </nav>
+ * 翻页逻辑由消费方实现，这里只提供静态样式契约。
+ */
+
+.pagination { display: flex; align-items: center; gap: 4px; }
+
+.page-btn {
+  min-width: 28px; height: 28px; padding: 0 6px;
+  border-radius: var(--radius-md); font-size: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--token-text-muted); background: none; border: 0; cursor: pointer;
+}
+.page-btn:not(.is-active):hover { background: var(--token-control-hover); color: var(--token-text); }
+.page-btn.is-active {
+  background: var(--token-accent); color: var(--token-on-accent);
+  font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.page-btn.is-disabled, .page-btn:disabled { opacity: .3; pointer-events: none; }
+
+.page-ellipsis {
+  min-width: 28px; height: 28px; font-size: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--token-text-faint);
+}

package/dist/components/popover.css

@@ -0,0 +1,25 @@
+/*
+ * @icen.ai/ui — Component: popover（锚定浮层，与 behaviors/popover 配套）
+ * 面板由 JS portal 到 document.body 并按 fixed 定位；data-side 由布局函数写入。
+ */
+
+.popover {
+  position: fixed; z-index: var(--z-popover);
+  padding: 8px;
+  background: var(--token-card-strong); color: var(--token-text);
+  border: 1px solid var(--token-outline);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-lg);
+  animation: icen-popover-in 150ms var(--ease-out);
+}
+.popover[data-side='top'] { animation-name: icen-popover-in-top; }
+
+/* 进场动画与 .menu 同参数：fade + scale(.95→1) + 按侧位移 8px */
+@keyframes icen-popover-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes icen-popover-in-top {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}

package/dist/components/segmented.css

@@ -0,0 +1,112 @@
+/*
+ * @icen.ai/ui — Component: segmented（分段控件 / 切换组 / 数字步进器 / OTP）
+ * 规格源自 opengal primitives/input.tsx 的 SegmentedControl 与 advanced-input.tsx
+ * 的 ToggleButtonGroup / NumberStepper / OtpInput。
+ * segmented 与 toggle-group 是纯 CSS 状态组件（.is-active）；stepper 由使用方接线；
+ * otp 单元格交互见 behaviors/input.ts 的 initInput。
+ */
+
+/* ── 分段控件（排他单选） ── */
+.segmented {
+  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+}
+
+.segmented-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px; font-size: 12px; font-weight: 500;
+  border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-md);
+  color: var(--token-text-muted);
+}
+.segmented-item:hover:not(.is-active) {
+  color: var(--token-text); background: var(--token-surface-hover);
+}
+.segmented-item.is-active {
+  background: var(--token-accent); color: var(--token-on-accent, #fff);
+  box-shadow: var(--token-shadow-elevated);
+}
+.segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* 尺寸：容器修饰符驱动 item 内边距 / 字号 */
+.segmented--sm .segmented-item { padding: 4px 10px; font-size: 11px; }
+
+/* ── 切换组（segmented 同族变体：更松的 padding、item 更小圆角、active 阴影更轻） ── */
+.toggle-group {
+  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+}
+
+.toggle-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px; font-size: 12px; font-weight: 500;
+  border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-xs);
+  color: var(--token-text-muted);
+}
+.toggle-item:hover:not(.is-active) {
+  color: var(--token-text); background: var(--token-control-hover);
+}
+.toggle-item.is-active {
+  background: var(--token-accent); color: var(--token-on-accent, #fff);
+  box-shadow: var(--token-shadow-card);
+}
+.toggle-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.toggle-group--sm .toggle-item { padding: 4px 10px; font-size: 11px; }
+
+/* ── 数字步进器 ── */
+.stepper {
+  display: inline-flex; align-items: stretch;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.stepper-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 10px; border: none; background: transparent; cursor: pointer;
+  color: var(--token-text-muted);
+  transition: background-color var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out);
+}
+.stepper-btn:hover { background: var(--token-control-hover); color: var(--token-text); }
+.stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.stepper-input {
+  width: 56px; padding: 8px 0;
+  text-align: center; font-variant-numeric: tabular-nums;
+  background: transparent; outline: none; border: none;
+  border-left: 1px solid var(--token-outline-soft);
+  border-right: 1px solid var(--token-outline-soft);
+  color: var(--token-text); font: inherit; font-size: 13px;
+}
+/* 隐藏原生 number 箭头（± 交给 .stepper-btn） */
+.stepper-input::-webkit-outer-spin-button,
+.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.stepper-input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
+
+/* ── OTP 验证码单元格 ── */
+.otp { display: inline-flex; align-items: center; gap: 8px; }
+
+.otp-cell {
+  width: 40px; height: 48px; padding: 0;
+  text-align: center; font-size: 18px; font-weight: 600;
+  color: var(--token-text);
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
+}
+.otp-cell:focus-visible {
+  border-color: var(--token-accent);
+  box-shadow: 0 0 0 2px var(--token-accent-subtle);
+}
+.otp-cell:disabled { opacity: 0.4; cursor: not-allowed; }

package/dist/components/select.css

@@ -0,0 +1,79 @@
+/*
+ * @icen.ai/ui — Component: select（弹层选择器）
+ * 规格源自 opengal primitives/input.tsx 的 Select；与 behaviors/select.ts 配套。
+ *
+ * 契约：
+ *   <div class="select" data-select>
+ *     <button class="select-trigger pressable focus-ring" aria-haspopup="listbox" aria-expanded="false">
+ *       <span class="select-leading">…</span>        可选前缀
+ *       <span class="select-value is-empty">占位</span>
+ *       <svg class="select-chevron">…</svg>
+ *     </button>
+ *     <div class="select-panel" hidden>
+ *       <button class="select-option" data-value="x">…</button>
+ *     </div>
+ *     <input type="hidden" data-select-value />     可选，behavior 同步 value
+ *   </div>
+ * 状态：容器 .is-open；选项 .is-focused / .is-selected（尾部 ✓）/ .is-disabled；
+ *       .select-value.is-empty = 未选占位（faint 色，behavior 选中后移除）。
+ */
+
+.select { position: relative; width: 100%; }
+
+.select-trigger {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  height: 36px; padding: 0 12px; font-size: 13px; text-align: left;
+  background: var(--token-control); color: var(--token-text);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+  cursor: pointer;
+}
+.select-trigger:focus-visible { border-color: var(--token-accent); }
+.select-trigger:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.select-trigger--sm { height: 32px; padding: 0 10px; font-size: 12px; }
+.select-trigger--lg { height: 40px; padding: 0 14px; font-size: 14px; }
+
+.select-leading {
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  color: var(--token-text-faint);
+}
+.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.select-value.is-empty { color: var(--token-text-faint); }
+
+.select-chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+.select.is-open .select-chevron { transform: rotate(180deg); }
+
+.select-panel {
+  position: absolute; top: calc(100% + 4px); left: 0;
+  min-width: 100%; max-height: 240px; overflow-y: auto; padding: 4px;
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-outline);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-overlay);
+  z-index: var(--z-popover);
+  transform-origin: top center;
+  animation: select-panel-in var(--duration-fast) var(--ease-out);
+}
+@keyframes select-panel-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.select-option {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 6px 10px; font-size: 12px; text-align: left;
+  border: none; background: transparent; color: var(--token-text);
+  border-radius: var(--radius-sm); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+.select-option.is-focused { background: var(--token-fill-2); }
+.select-option.is-selected { color: var(--token-accent); }
+.select-option.is-selected::after { content: '✓'; margin-left: auto; flex-shrink: 0; }
+.select-option.is-disabled { opacity: 0.4; cursor: not-allowed; }

package/dist/components/sidebar.css

@@ -0,0 +1,54 @@
+/*
+ * @icen.ai/ui — Component: sidebar（侧栏导航，分组折叠配套 behaviors/sidebar）
+ * 用法：<aside class="sidebar sidebar--sticky">
+ *         <div class="sidebar-group is-open">
+ *           <button class="sidebar-group-title" aria-expanded="true">分组</button>
+ *           <div class="sidebar-group-panel"><div class="sidebar-group-panel-inner">
+ *             <a class="sidebar-item is-active" href="…">条目</a>
+ *           </div></div>
+ *         </div>
+ *       </aside>
+ * 契约：.is-open 由 behaviors/sidebar 切换（同步 aria-expanded）；
+ * 展开动画 = grid-template-rows 0fr↔1fr（同 accordion 约定），内层 overflow:hidden。
+ * 滚动条样式归 base.css 全局纪律，这里只声明 overflow-y。
+ */
+
+.sidebar { width: 260px; flex-shrink: 0; overflow-y: auto; padding-right: 4px; }
+.sidebar--sticky { position: sticky; top: 80px; max-height: calc(100vh - 100px); }
+
+.sidebar-group { margin-bottom: 8px; }
+.sidebar-group-title {
+  width: 100%; display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; border-radius: var(--radius-md);
+  font-family: inherit; font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 1px;
+  color: var(--token-text-muted);
+  background: none; border: 0; cursor: pointer;
+}
+.sidebar-group-title:hover { background: var(--token-control-hover); color: var(--token-text); }
+/* chevron：闭合态 rotate(-90deg)，展开回正 */
+.sidebar-group-title::after {
+  content: '▾'; font-size: 12px; line-height: 1; color: var(--token-text-muted);
+  transform: rotate(-90deg);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.sidebar-group.is-open .sidebar-group-title::after { transform: none; }
+
+.sidebar-group-panel {
+  display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-out);
+}
+.sidebar-group.is-open .sidebar-group-panel { grid-template-rows: 1fr; }
+.sidebar-group-panel-inner { overflow: hidden; min-height: 0; }
+
+.sidebar-item {
+  width: 100%; display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-radius: var(--radius-lg);
+  font-size: 13px; color: var(--token-text); text-align: left;
+  text-decoration: none; background: none; border: 0; cursor: pointer;
+}
+.sidebar-item:hover { background: var(--token-control-hover); text-decoration: none; }
+.sidebar-item.is-active { background: var(--token-accent-subtle); color: var(--token-accent); font-weight: 500; }
+.sidebar-item > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--token-text-muted); }
+.sidebar-item.is-active > svg { color: var(--token-accent); }
+.sidebar-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/components/slider.css

@@ -0,0 +1,69 @@
+/*
+ * @icen.ai/ui — Component: slider（单值 / 双滑块）
+ * 规格源自 opengal primitives/input.tsx 的 Slider 与 advanced-input.tsx 的 DualRangeSlider；
+ * 与 behaviors/slider.ts 配套（透明原生 range 覆盖层驱动 fill/thumb 定位）。
+ *
+ * 契约（单值）：
+ *   <div class="slider">
+ *     <div class="slider-track"></div>
+ *     <div class="slider-fill" style="width:40%"></div>
+ *     <div class="slider-thumb" style="left:calc(40% - 8px)"></div>
+ *     <input class="slider-native" type="range" />
+ *   </div>
+ * 双滑块：.slider--dual 内 .slider-range（left/right 定位选中段）
+ *   + .slider-thumb--lo / .slider-thumb--hi + 两个 .slider-native[data-thumb=lo|hi]
+ * label 行：.slider-row（label + 当前值，tabular-nums）
+ */
+
+.slider { position: relative; height: 20px; width: 100%; }
+
+.slider-track {
+  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-line-soft) 50%, transparent);
+}
+
+.slider-fill {
+  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+/* 双滑块选中段：left = lo%、right = (100 - hi)% */
+.slider-range {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: left var(--duration-normal) var(--ease-out),
+    right var(--duration-normal) var(--ease-out);
+}
+
+.slider-thumb {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 16px; height: 16px; border-radius: var(--radius-full);
+  background: var(--token-card);
+  border: 2px solid var(--token-accent);
+  box-shadow: var(--token-shadow-card);
+  pointer-events: none;
+  transition: transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+/* 原生 input 透明，焦点环镜像到可见 thumb 上 */
+.slider:focus-within .slider-thumb {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent),
+    0 0 0 3px var(--token-bg);
+}
+
+.slider-native {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
+}
+.slider-native:disabled { cursor: not-allowed; }
+
+.slider-row {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 12px; color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}

package/dist/components/steps.css

@@ -0,0 +1,61 @@
+/*
+ * @icen.ai/ui — Component: steps（步骤条，横向默认 / .steps--vertical 垂直）
+ * 用法：<ol class="steps">
+ *         <li class="step step--finish">
+ *           <span class="step-line"></span>
+ *           <span class="step-dot">✓</span>
+ *           <div class="step-body">
+ *             <div class="step-title">已完成</div>
+ *             <div class="step-desc">描述</div>
+ *           </div>
+ *         </li>
+ *       </ol>
+ * 三态：.step--finish（accent 实底，内容放 ✓）/ .step--process（accent 描边）/ .step--wait（灰）。
+ * 连接线画在「当前步 → 下一步」之间，颜色跟随当前步状态；末步不显示（.step:last-child）。
+ * 垂直版同一 DOM：.step-line 改为绝对左侧竖线，穿过 16px 间隙接到下一颗圆点。
+ */
+
+.steps { display: flex; list-style: none; margin: 0; padding: 0; }
+.step { flex: 1; position: relative; text-align: center; }
+
+.step-line {
+  position: absolute; top: 16px; left: calc(50% + 20px);
+  width: calc(100% - 40px); height: 1px;
+  background: var(--token-outline-soft);
+}
+.step:last-child .step-line { display: none; }
+.step--finish .step-line { background: color-mix(in srgb, var(--token-accent) 40%, transparent); }
+
+.step-dot {
+  width: 32px; height: 32px; border-radius: var(--radius-full);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 600; position: relative; z-index: 1;
+}
+.step--finish .step-dot { background: var(--token-accent); color: var(--token-on-accent); }
+.step--process .step-dot {
+  background: var(--token-accent-subtle); color: var(--token-accent);
+  border: 2px solid var(--token-accent);
+}
+.step--wait .step-dot {
+  background: var(--token-control); color: var(--token-text-faint);
+  border: 1px solid var(--token-outline-soft);
+}
+
+.step-title { font-size: 13px; font-weight: 500; margin-top: 6px; }
+.step--wait .step-title { color: var(--token-text-muted); }
+.step-desc {
+  font-size: 11px; color: var(--token-text-faint);
+  margin-top: 2px; max-width: 160px; margin-inline: auto;
+}
+
+/* ── 垂直变体 ── */
+.steps--vertical { flex-direction: column; gap: 16px; }
+.steps--vertical .step { flex: none; display: flex; gap: 12px; text-align: left; }
+.steps--vertical .step-line {
+  top: 36px; bottom: -16px; left: 16px;
+  width: 1px; height: auto;
+}
+.steps--vertical .step-dot { flex-shrink: 0; }
+.steps--vertical .step-body { padding-top: 4px; }
+.steps--vertical .step-title { margin-top: 0; }
+.steps--vertical .step-desc { max-width: none; margin-inline: 0; }

package/dist/components/switch.css

@@ -0,0 +1,95 @@
+/*
+ * @icen.ai/ui — Component: switch（开关 / 勾选框 / 单选行）
+ * 纯 CSS 状态组件：状态全走 aria-checked / .is-selected，交互由使用方（或演示页脚本）切换。
+ *
+ * 开关：<button class="switch [--sm]" role="switch" aria-checked="true"><span class="switch-thumb"></span></button>
+ * 勾选：<button class="checkbox focus-ring" role="checkbox" aria-checked="true|false|mixed"></button>
+ * 单选：<div class="radio-group" role="radiogroup">
+ *         <button class="radio-item motion is-selected"><span class="radio-dot"></span>…</button>
+ *       </div>
+ */
+
+/* ── 开关 ── */
+.switch {
+  position: relative; display: inline-flex; flex-shrink: 0;
+  width: 44px; height: 24px; padding: 0;
+  border: none; border-radius: var(--radius-full);
+  background: var(--token-control-hover); cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.switch[aria-checked='true'] { background: var(--token-accent); }
+.switch:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.switch-thumb {
+  position: absolute; top: 2px; left: 2px;
+  width: 20px; height: 20px; border-radius: var(--radius-full);
+  background: var(--token-on-accent, #fff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.switch[aria-checked='true'] .switch-thumb { transform: translateX(20px); }
+
+.switch--sm { width: 36px; height: 20px; }
+.switch--sm .switch-thumb { width: 16px; height: 16px; }
+.switch--sm[aria-checked='true'] .switch-thumb { transform: translateX(16px); }
+
+/* ── 勾选框（✓ 与半选横条均 ::before 自绘，无需内联 svg） ── */
+.checkbox {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  width: 16px; height: 16px; padding: 0;
+  background: var(--token-control); color: transparent;
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm); cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out);
+}
+.checkbox:hover:not([aria-checked='true']):not([aria-checked='mixed']) {
+  border-color: color-mix(in srgb, var(--token-accent) 50%, transparent);
+}
+.checkbox[aria-checked='true'], .checkbox[aria-checked='mixed'] {
+  background: var(--token-accent);
+  border-color: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+}
+.checkbox::before {
+  content: ''; width: 10px; height: 10px;
+  background: currentColor; opacity: 0;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+.checkbox[aria-checked='true']::before { opacity: 1; }
+.checkbox[aria-checked='mixed']::before {
+  opacity: 1; width: 8px; height: 2px;
+  clip-path: none; border-radius: var(--radius-full);
+}
+.checkbox:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── 单选行 ── */
+.radio-group { display: flex; flex-direction: column; gap: 4px; }
+
+.radio-item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 12px; font-size: 13px; text-align: left;
+  border: none; background: transparent; color: var(--token-text);
+  border-radius: var(--radius-sm); cursor: pointer;
+}
+.radio-item.is-selected {
+  background: var(--token-accent-subtle); color: var(--token-accent); font-weight: 500;
+}
+.radio-item:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.radio-dot {
+  position: relative; width: 16px; height: 16px; flex-shrink: 0;
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-full);
+  transition: border-color var(--duration-normal) var(--ease-out);
+}
+.radio-item.is-selected .radio-dot { border-color: var(--token-accent); }
+.radio-dot::after {
+  content: ''; position: absolute; top: 50%; left: 50%;
+  width: 8px; height: 8px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+.radio-item.is-selected .radio-dot::after { transform: translate(-50%, -50%) scale(1); }

package/dist/components/tag-input.css

@@ -0,0 +1,48 @@
+/*
+ * @icen.ai/ui — Component: tag-input（多值标签编辑）
+ * 规格源自 opengal primitives/advanced-input.tsx 的 TagInput；与 behaviors/tag-input.ts 配套。
+ *
+ * 契约：
+ *   <div class="tag-input control" data-tags="初始,标签" data-max="5">
+ *     <input class="tag-input-field" placeholder="…" />
+ *   </div>
+ * behavior 按 data-tags 渲染 .tag-chip（含 .tag-chip-x 删除钮），并回写 data-tags；
+ * 达到 data-max 时容器加 .is-max（warning 色边框）并拒加。
+ */
+
+.tag-input {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  padding: 6px; min-height: 36px;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+}
+.tag-input:focus-within { border-color: var(--token-accent); }
+.tag-input.is-max, .tag-input.is-max:focus-within {
+  border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
+}
+.tag-input.is-disabled { opacity: 0.4; }
+.tag-input.is-disabled .tag-input-field { cursor: not-allowed; }
+
+.tag-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 4px 2px 8px;
+  border-radius: var(--radius-full);
+  background: var(--token-accent-subtle); color: var(--token-accent);
+  font-size: 11px; font-weight: 500;
+}
+
+.tag-chip-x {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px; border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-full); color: inherit; font-size: 11px; line-height: 1;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.tag-chip-x:hover { background: var(--token-fill-2); }
+
+.tag-input-field {
+  flex: 1; min-width: 80px; padding: 4px;
+  background: transparent; border: none; outline: none;
+  color: var(--token-text); font: inherit; font-size: 12px;
+}
+.tag-input-field::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }

package/dist/components/toast.css

@@ -4,7 +4,7 @@
  */
 
 .toast-container {
-  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
+  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
   display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
   pointer-events: none;
 }

package/dist/components/tooltip.css

@@ -0,0 +1,56 @@
+/*
+ * @icen.ai/ui — Component: tooltip（纯 CSS 气泡提示，无 JS）
+ * 契约：任意元素加 data-tooltip="文案"；默认在上方，
+ * data-tooltip-side="top|bottom|left|right" 换方向。
+ * hover 延迟 400ms 出现，focus-visible 立即出现。
+ */
+
+[data-tooltip] { position: relative; }
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute; z-index: var(--z-tooltip);
+  width: max-content; max-width: min(260px, calc(100vw - 32px));
+  padding: 4px 8px;
+  font-size: 11px; font-weight: 400; line-height: 1.375; white-space: normal; text-align: left;
+  background: var(--token-card-strong); color: var(--token-text);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-md);
+  opacity: 0; pointer-events: none;
+  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
+  transition-delay: 400ms;
+
+  /* 默认：上方 */
+  bottom: calc(100% + 4px); left: 50%;
+  transform: translate(-50%, 4px);
+}
+
+[data-tooltip-side='bottom']::after {
+  bottom: auto; top: calc(100% + 4px); left: 50%;
+  transform: translate(-50%, -4px);
+}
+[data-tooltip-side='left']::after {
+  bottom: auto; top: 50%; left: auto; right: calc(100% + 4px);
+  transform: translate(4px, -50%);
+}
+[data-tooltip-side='right']::after {
+  bottom: auto; top: 50%; right: auto; left: calc(100% + 4px);
+  transform: translate(-4px, -50%);
+}
+
+[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
+  opacity: 1; transform: translate(-50%, 0);
+}
+[data-tooltip-side='bottom']:hover::after, [data-tooltip-side='bottom']:focus-visible::after {
+  opacity: 1; transform: translate(-50%, 0);
+}
+[data-tooltip-side='left']:hover::after, [data-tooltip-side='left']:focus-visible::after {
+  opacity: 1; transform: translate(0, -50%);
+}
+[data-tooltip-side='right']:hover::after, [data-tooltip-side='right']:focus-visible::after {
+  opacity: 1; transform: translate(0, -50%);
+}
+
+/* 键盘聚焦立即出现（覆盖 400ms 延迟） */
+[data-tooltip]:focus-visible::after { transition-delay: 0ms; }