@icen.ai/ui 0.4.0 → 0.5.0

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

@@ -259,3 +259,78 @@
 @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/select.css

@@ -3,15 +3,24 @@
  * 规格源自 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>
@@ -19,6 +28,8 @@
  * behavior 维护：
  *   - .select.is-open ↔ aria-expanded；panel [hidden] 切换；ESC/外部点击关闭
  *   - 选项 .is-focused 跟随键盘箭头；Enter 选中 → 写回 .select-value / .is-selected
+ *   - data-select-search：面板顶部自动插入搜索框，实时过滤（含 data-keywords），空分组自动隐藏
+ *   - data-select-multiple：点击切选不关面板，trigger 显示计数，hidden input 同步逗号分隔值
  */
 
 .select {
@@ -178,3 +189,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: 15px;
+  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 指示器（选项左侧） */
+.select[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[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 {
+  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

@@ -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;
+}

package/dist/components/slider.css

@@ -202,6 +202,119 @@
   background: color-mix(in srgb, var(--token-text) 12%, transparent);
 }
 
+/* ── 带标签的刻度（marks）── */
+.slider-marks {
+  position: relative;
+  height: 20px;
+  margin-top: 2px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.slider-mark {
+  position: absolute;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast);
+}
+.slider-mark:hover {
+  color: var(--token-accent);
+}
+.slider-mark.is-active {
+  color: var(--token-accent);
+  font-weight: 500;
+}
+/* 刻度上的大点（配合 marks 使用） */
+.slider-mark::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -8px;
+  width: 3px;
+  height: 3px;
+  border-radius: var(--radius-full);
+  background: var(--token-text-faint);
+  transform: translateX(-50%);
+  transition: background-color var(--icen-tx-fast);
+}
+.slider-mark:hover::before,
+.slider-mark.is-active::before {
+  background: var(--token-accent);
+}
+
+/* ── 值提示气泡（拖拽时出现）── */
+.slider-tooltip {
+  position: absolute;
+  bottom: calc(50% + var(--slider-thumb-size));
+  transform: translateX(-50%);
+  padding: 2px var(--density-space-xs);
+  background: var(--token-text);
+  color: var(--token-card-strong);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  border-radius: var(--radius-xs);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--icen-tx-fast);
+  z-index: 3;
+}
+.slider-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--token-text);
+}
+.slider:active .slider-tooltip,
+.slider:focus-within .slider-tooltip {
+  opacity: 1;
+}
+.slider--vertical .slider-tooltip {
+  bottom: auto;
+  left: calc(50% + var(--slider-thumb-size));
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.slider--vertical .slider-tooltip::after {
+  top: 50%;
+  left: auto;
+  right: 100%;
+  transform: translateY(-50%);
+  border-top-color: transparent;
+  border-right-color: var(--token-text);
+}
+
+/* ── 滑块拖拽态（active 时放大） ── */
+.slider:active .slider-thumb {
+  transform: translate(-50%, -50%) scale(1.25);
+}
+.slider--vertical:active .slider-thumb {
+  transform: translate(-50%, 50%) scale(1.25);
+}
+
+/* ── 填充段带渐变（高级视觉） ── */
+.slider-fill--gradient,
+.slider-range--gradient {
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--token-accent) 60%, transparent),
+    var(--token-accent));
+}
+
+/* ── 禁用态填充色变灰 ── */
+.slider.is-disabled .slider-fill,
+.slider.is-disabled .slider-range {
+  background: var(--token-fill-2);
+}
+.slider.is-disabled .slider-thumb {
+  border-color: var(--token-text-faint);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .slider-fill, .slider-range, .slider-thumb { transition: none; }
+  .slider-tooltip { transition: none; }
+  .slider-mark, .slider-mark::before { transition: none; }
 }

package/dist/components/split-pane.css

@@ -0,0 +1,112 @@
+/*
+ * @icen.ai/ui — Component: split-pane（分栏拖拽容器，与 behaviors/split-pane 配套）
+ *
+ * 契约：
+ *   <div class="split-pane [--vertical]" data-split-pane style="--split: 50%">
+ *     <div class="split-pane-first">左侧（或上侧）内容</div>
+ *     <div class="split-pane-divider" role="separator" aria-orientation="vertical" aria-valuenow="50"></div>
+ *     <div class="split-pane-second">右侧（或下侧）内容</div>
+ *   </div>
+ *
+ * behavior 接管 .split-pane-divider 的 pointer 拖拽，按比例更新 --split 变量
+ * （范围 10% – 90%）；双击分隔条复位到 50%。
+ *
+ * 常用于：编辑器左右分栏 / 后台主从布局 / 邮件列表+详情。
+ */
+
+.split-pane {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  overflow: hidden;
+  background: var(--token-surface);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+}
+
+.split-pane-first {
+  flex: 0 0 var(--split, 50%);
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.split-pane-second {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* ── 分隔条（默认纵向 col-resize） ── */
+.split-pane-divider {
+  flex: 0 0 6px;
+  position: relative;
+  background: var(--token-line-soft);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  transition: background var(--icen-tx-fast);
+}
+.split-pane-divider::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 28px;
+  border-radius: 1px;
+  background: var(--token-text-faint);
+  opacity: 0.35;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.split-pane-divider:hover::after,
+.split-pane-divider.is-dragging::after {
+  opacity: 1;
+  background: var(--token-accent);
+}
+.split-pane-divider:hover,
+.split-pane-divider.is-dragging {
+  background: color-mix(in srgb, var(--token-accent) 14%, var(--token-line-soft));
+}
+.split-pane-divider:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--token-accent) 18%, var(--token-line-soft));
+}
+
+/* ── 纵向布局（上下分栏） ── */
+.split-pane--vertical {
+  flex-direction: column;
+}
+.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 {
+  flex-basis: auto;
+  min-height: 0;
+}
+.split-pane--vertical .split-pane-divider {
+  cursor: row-resize;
+  flex-basis: 6px;
+  height: 6px;
+  width: auto;
+}
+.split-pane--vertical .split-pane-divider::after {
+  width: 28px;
+  height: 2px;
+}
+
+/* ── 嵌套分栏不应再有外边框 ── */
+.split-pane .split-pane {
+  border: 0;
+  border-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .split-pane-divider { transition: none; }
+  .split-pane-divider::after { transition: none; }
+}

package/dist/components/split-pane.mjs

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