@icen.ai/ui 0.4.0 → 0.8.0

package/dist/components/pill.css

@@ -2,7 +2,7 @@
  * @icen.ai/ui — Component: pill（状态徽章 / tag）
  *
  * 完整契约：
- *   <span class="pill [ok|warn|bad|accent|info] [.pill--dot|pill--outline|pill--sm]">文本</span>
+ *   <span class="pill [pill--success|pill--warning|pill--error|pill--info|pill--accent] [.pill--dot|pill--outline|pill--sm]">文本</span>
  *
  * 语义色纪律：仅绿/黄/红/信息 + 品牌 accent。
  * --dot：左侧加状态色圆点；--outline：透明底、纯描边；--sm：紧凑尺寸。
@@ -24,27 +24,27 @@
   vertical-align: middle;
 }
 
-.pill.ok {
+.pill--success {
   color: var(--token-success);
   border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
   background: color-mix(in srgb, var(--token-success) 9%, transparent);
 }
-.pill.warn {
+.pill--warning {
   color: var(--token-warning);
   border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
   background: color-mix(in srgb, var(--token-warning) 9%, transparent);
 }
-.pill.bad {
+.pill--error {
   color: var(--token-error);
   border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
   background: color-mix(in srgb, var(--token-error) 9%, transparent);
 }
-.pill.accent {
+.pill--accent {
   color: var(--token-accent-deep, var(--token-accent));
   border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
   background: color-mix(in srgb, var(--token-accent) 9%, transparent);
 }
-.pill.info {
+.pill--info {
   color: var(--token-info);
   border-color: color-mix(in srgb, var(--token-info) 35%, transparent);
   background: color-mix(in srgb, var(--token-info) 9%, transparent);
@@ -69,7 +69,7 @@
 /* 尺寸变体 */
 .pill--sm {
   padding: 1px var(--density-space-xs);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .pill--lg {
   padding: 4px calc(var(--density-space-sm) + 2px);
@@ -79,10 +79,80 @@
 /* 实色变体：accent 实底（用于 count、活跃状态等强调场景） */
 .pill--solid {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
 }
-.pill--solid.ok   { background: var(--token-success); border-color: var(--token-success); color: var(--token-on-accent, #fff); }
-.pill--solid.warn { background: var(--token-warning); border-color: var(--token-warning); color: var(--token-on-accent, #fff); }
-.pill--solid.bad  { background: var(--token-error);   border-color: var(--token-error);   color: var(--token-on-accent, #fff); }
-.pill--solid.info { background: var(--token-info);    border-color: var(--token-info);    color: var(--token-on-accent, #fff); }
+.pill--solid.pill--success { background: var(--token-success); border-color: var(--token-success); }
+.pill--solid.pill--warning { background: var(--token-warning); border-color: var(--token-warning); }
+.pill--solid.pill--error   { background: var(--token-error);   border-color: var(--token-error); }
+.pill--solid.pill--info    { background: var(--token-info);    border-color: var(--token-info); }
+
+/* ── 增强 ── */
+
+/* 可关闭 pill */
+.pill-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.pill-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
+.pill-close svg { width: 9px; height: 9px; }
+
+/* 图标 pill */
+.pill-icon {
+  display: inline-flex;
+  align-items: center;
+}
+.pill-icon svg { width: 10px; height: 10px; }
+
+/* 实时脉冲（用于"直播"/"实时"状态） */
+.pill--live::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  margin-right: 2px;
+  animation: pill-pulse var(--pill-pulse-duration, 1.5s) ease-in-out infinite;
+}
+@keyframes pill-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+/* 纯数字计数（不带文字） */
+.pill--count {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  justify-content: center;
+  font-size: var(--density-font-size-2xs);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* 渐变变体 */
+.pill--gradient {
+  background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
+  color: var(--token-on-accent);
+  border-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pill--live::before { animation: none; }
+  .pill-close { transition: none; }
+}

package/dist/components/scroll-area.css

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

package/dist/components/scroll-area.mjs

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

package/dist/components/segmented.css

@@ -72,7 +72,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 +130,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 +181,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 +225,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,8 +254,83 @@
   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; }
 }
+
+/* ── 增强 ── */
+
+/* 全宽分段（每项等宽） */
+.segmented--block,
+.toggle-group--block {
+  display: flex;
+  width: 100%;
+}
+.segmented--block .segmented-item,
+.toggle-group--block .toggle-item {
+  flex: 1;
+  justify-content: center;
+}
+
+/* 分段底色变体（幽灵底，用于次要分组） */
+.segmented--ghost,
+.toggle-group--ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.segmented--ghost .segmented-item.is-active,
+.toggle-group--ghost .toggle-item.is-active {
+  background: var(--token-fill-2);
+  color: var(--token-text);
+  box-shadow: none;
+}
+
+/* 分段错误态 */
+.segmented.is-error,
+.toggle-group.is-error {
+  border-color: var(--token-error);
+}
+
+/* 分段禁用整体 */
+.segmented.is-disabled,
+.toggle-group.is-disabled {
+  opacity: var(--icen-disabled-opacity);
+  pointer-events: none;
+}
+
+/* 步进器带单位后缀 */
+.stepper-unit {
+  display: inline-flex;
+  align-items: center;
+  padding-right: var(--density-space-sm);
+  color: var(--token-text-faint);
+  font-size: 0.85em;
+}
+
+/* OTP 分组分隔符（如 4-4 分两组时中间加横线） */
+.otp-separator {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--density-space-xs);
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-lg);
+  font-weight: 300;
+}
+
+/* OTP 错误态 */
+.otp.is-error .otp-cell { border-color: var(--token-error); }
+.otp.is-error .otp-cell.is-filled {
+  background: var(--token-error-muted);
+  border-color: var(--token-error);
+}
+
+/* OTP 完成（全部填满）态 */
+.otp.is-complete .otp-cell {
+  border-color: var(--token-success);
+}
+.otp.is-complete .otp-cell.is-filled {
+  background: color-mix(in srgb, var(--token-success) 8%, transparent);
+}

package/dist/components/segmented.mjs

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

package/dist/components/select.css

@@ -3,28 +3,39 @@
  * 规格源自 opengal primitives/input.tsx 的 Select；与 behaviors/select.ts 配套。
  *
  * 完整契约：
- *   <div class="select [data-disabled] [.is-open]" data-select>
+ *   <div class="select [data-disabled] [.is-open]" data-select
+ *        [data-select-search] [data-select-multiple] [data-select-max="3"]>
  *     <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>  ← 多选时可选
  *       <svg class="select-chevron">…</svg>
  *     </button>
  *     <div class="select-panel" hidden role="listbox">
- *       <button class="select-option [.is-focused|.is-selected|.is-disabled]" data-value="x">…</button>
+ *       <div class="select-search">                      ← data-select-search 时 behavior 自动注入
+ *         <input class="select-search-input" placeholder="搜索…" />
+ *       </div>
+ *       <div class="select-group">                       ← 可选分组
+ *         <p class="select-group-label">组标题</p>
+ *         <button class="select-option [.is-focused|.is-selected|.is-disabled]" data-value="x">…</button>
+ *       </div>
+ *       <div class="select-empty">无匹配项</div>         ← 搜索无结果时 behavior 显示
  *     </div>
  *     <input type="hidden" data-select-value />     可选，behavior 同步 value
  *   </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 同步逗号分隔值
  */
 
 .select {
   position: relative;
   width: 100%;
-  isolation: isolate; /* panel 不被后面兄弟节点的层叠遮挡 */
 }
 
 .select-trigger {
@@ -94,12 +105,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;
@@ -107,17 +117,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 {
@@ -178,3 +181,87 @@
   color: var(--token-text-faint);
   text-align: center;
 }
+
+/* ── 搜索框（data-select-search 时 behavior 自动注入） ── */
+.select-search {
+  padding: 4px 4px 6px;
+  border-bottom: 1px solid var(--token-outline-soft);
+  margin-bottom: 4px;
+  position: sticky;
+  top: 0;
+  background: var(--token-card-strong);
+  z-index: 1;
+}
+.select-search-input {
+  width: 100%;
+  height: 30px;
+  padding: 0 var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text);
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
+}
+.select-search-input:focus {
+  outline: none;
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+
+/* ── 多选清除按钮 ── */
+.select-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.select-clear:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+
+/* ── 多选 trigger 高度自适应（chips 可能换行） ── */
+.select[data-select-multiple] .select-trigger {
+  min-height: var(--density-input-height-md);
+  height: auto;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex-wrap: wrap;
+}
+
+/* 多选项 checkbox 指示器（选项左侧；panel portal 到 body，属性在 panel 上） */
+.select-panel[data-select-multiple] .select-option::before {
+  content: '';
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border: 1.5px solid var(--token-outline);
+  border-radius: var(--radius-xs);
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.select-panel[data-select-multiple] .select-option.is-selected::before {
+  background: var(--token-accent);
+  border-color: var(--token-accent);
+}
+.select-panel[data-select-multiple] .select-option.is-selected::after {
+  content: '✓';
+  margin-left: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-panel { animation: none; }
+  .select-search-input,
+  .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;
@@ -180,3 +180,121 @@
   .sidebar-group-panel,
   .sidebar-group-title::after { transition: none; }
 }
+
+/* ── 增强 ── */
+
+/* 侧栏头部（品牌/标题） */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-bottom: 1px solid var(--token-outline-soft);
+  margin-bottom: var(--density-space-sm);
+}
+.sidebar-header-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  font-family: var(--font-heading);
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  color: var(--token-text);
+  text-decoration: none;
+}
+.sidebar-header-brand > svg,
+.sidebar-header-brand > img {
+  width: 24px;
+  height: 24px;
+}
+.sidebar-header-toggle {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.sidebar-header-toggle:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+
+/* 侧栏底部 */
+.sidebar-footer {
+  padding: var(--density-space-sm);
+  border-top: 1px solid var(--token-outline-soft);
+  margin-top: auto;
+}
+
+/* 激活态左侧指示条 */
+.sidebar-item.is-active,
+.sidebar-item[aria-current='page'] {
+  position: relative;
+}
+.sidebar-item.is-active::before,
+.sidebar-item[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+}
+
+/* 折叠/轨道模式（icon-only mini sidebar） */
+.sidebar--collapsed {
+  width: 56px;
+}
+.sidebar--collapsed .sidebar-item-label,
+.sidebar--collapsed .sidebar-item-badge,
+.sidebar--collapsed .sidebar-section-label,
+.sidebar--collapsed .sidebar-group-title-text,
+.sidebar--collapsed .sidebar-group-title::after {
+  display: none;
+}
+.sidebar--collapsed .sidebar-group-title {
+  justify-content: center;
+  padding: var(--density-space-sm);
+}
+.sidebar--collapsed .sidebar-item {
+  justify-content: center;
+  padding: var(--density-space-sm);
+}
+.sidebar--collapsed .sidebar-item-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* 侧栏内搜索 */
+.sidebar-search {
+  margin-bottom: var(--density-space-sm);
+}
+
+/* 分组分隔线 */
+.sidebar-divider {
+  height: 1px;
+  background: var(--token-outline-soft);
+  margin: var(--density-space-sm) 0;
+}
+
+/* 徽章变体色 */
+.sidebar-item-badge--success { background: var(--token-success); }
+.sidebar-item-badge--warning { background: var(--token-warning); }
+.sidebar-item-badge--error   { background: var(--token-error); }
+.sidebar-item-badge--dot {
+  width: 8px;
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+  font-size: 0;
+}