@icen.ai/ui 0.4.0 → 0.8.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,111 @@
+/*
+ * @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%);
+  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';

package/dist/components/stat.css

@@ -3,18 +3,31 @@
  *
  * 完整契约：
  *   <div class="stat-grid [stat-grid--2|stat-grid--3|stat-grid--4]">
- *     <div class="stat-card [.stat-card--interactive]">
+ *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
  *       <div class="stat-head">
  *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon">…svg…</span>             ← 可选
+ *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
  *       </div>
- *       <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
- *       <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
- *         <svg>…arrow…</svg> +12.4%
- *         <span class="stat-period">比上周</span>
+ *       <div class="stat-body">
+ *         <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>
+ *         </div>
+ *       </div>
+ *       <div class="stat-spark">…svg mini chart…</div>         ← 可选：迷你折线/柱状
+ *       <div class="stat-progress">                           ← 可选：进度环
+ *         <svg class="stat-ring" viewBox="0 0 36 36">
+ *           <circle class="stat-ring-track" cx="18" cy="18" r="15.5" />
+ *           <circle class="stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
+ *         </svg>
  *       </div>
  *     </div>
  *   </div>
+ *
+ * .stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
+ * .stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
+ * .stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
  */
 
 .stat-grid {
@@ -72,20 +85,31 @@
   background: var(--token-accent-subtle);
   color: var(--token-accent);
 }
+.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; }
 
+/* ── 内容体（数字 + 趋势） ── */
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .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;
@@ -110,4 +134,99 @@
   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 {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-md);
+}
+.stat-card--horizontal .stat-head {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.stat-card--horizontal .stat-body {
+  text-align: right;
+  flex-shrink: 0;
+}
+.stat-card--horizontal .stat-delta {
+  justify-content: flex-end;
+}
+
+/* ── 迷你图槽（stat-spark）── */
+.stat-spark {
+  margin-top: var(--density-space-xs);
+  height: 28px;
+  width: 100%;
+}
+.stat-spark svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.stat-card--horizontal .stat-spark {
+  margin-top: 0;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+/* ── 进度环 ── */
+.stat-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--density-space-xs);
+}
+.stat-card--horizontal .stat-progress {
+  margin-top: 0;
+  flex-shrink: 0;
+}
+.stat-ring {
+  width: 48px;
+  height: 48px;
+  transform: rotate(-90deg);
+}
+.stat-ring-track {
+  fill: none;
+  stroke: var(--token-fill-2);
+  stroke-width: 3;
+}
+.stat-ring-fill {
+  fill: none;
+  stroke: var(--token-accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 0, 100;
+  transition: stroke-dasharray var(--icen-tx-slow) var(--ease-out);
+}
+.stat-card .stat-ring-fill { stroke: var(--token-accent); }
+
+/* ── 数字带前缀/后缀 ── */
+.stat-num-prefix,
+.stat-num-suffix {
+  font-size: 0.6em;
+  font-weight: 500;
+  color: var(--token-text-faint);
+  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: 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%; }
+@media (prefers-reduced-motion: reduce) {
+  .stat-card.is-loading .stat-num,
+  .stat-card.is-loading .stat-delta { animation: none; }
+  .stat-ring-fill { transition: none; }
+}

package/dist/components/steps.css

@@ -61,7 +61,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);
@@ -133,3 +133,100 @@
 @media (prefers-reduced-motion: reduce) {
   .step-dot, .step-line { transition: none; }
 }
+
+/* ── 纯点变体（无数字/无标签，紧凑进度指示） ── */
+.steps--dots .step-dot {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  font-size: 0;
+}
+.steps--dots .step-line { top: 20px; }
+.steps--dots .step-title,
+.steps--dots .step-desc { display: none; }
+.steps--dots .step { flex: none; }
+.steps--dots { gap: var(--density-space-xs); }
+
+/* ── 自定义图标槽（step-dot 内放 svg） ── */
+.step-dot-icon {
+  width: 16px;
+  height: 16px;
+}
+.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); }
+
+/* ── 可点击步骤 ── */
+.step--clickable {
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast);
+}
+.step--clickable:hover .step-dot {
+  transform: scale(1.08);
+  box-shadow: var(--icen-ring-soft);
+}
+.step--clickable:hover .step-title {
+  color: var(--token-accent);
+}
+
+/* ── 进度条变体（步骤间的填充进度，非离散连线） ── */
+.steps--progress .step-line {
+  height: 3px;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+  overflow: hidden;
+}
+.steps--progress .step-line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--token-accent);
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform var(--icen-tx-slow) var(--ease-out);
+}
+.steps--progress .step--finish .step-line::after { transform: scaleX(1); }
+
+/* ── 垂直模式的进度条变体 ── */
+.steps--vertical.steps--progress .step-line::after {
+  transform-origin: top;
+  transform: scaleY(0);
+}
+.steps--vertical.steps--progress .step--finish .step-line::after {
+  transform: scaleY(1);
+}
+
+/* ── 步骤描述富化（可选 icon + text） ── */
+.step-extra {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  justify-content: center;
+}
+.step--error .step-extra { color: var(--token-error); }
+
+/* ── 数字步骤的连接箭头（可选替代纯线条） ── */
+.steps--connected .step-line {
+  height: 0;
+  background: transparent;
+}
+.steps--connected .step-line::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-top: 1px dashed var(--token-outline-soft);
+}
+.steps--connected .step--finish .step-line::before {
+  border-top-style: solid;
+  border-top-color: var(--token-accent);
+}
+
+@media (max-width: 640px) {
+  /* 小屏：横向 steps 变为可横向滚动 */
+  .steps { overflow-x: auto; flex-wrap: nowrap; }
+  .step { min-width: 80px; }
+}

package/dist/components/switch.css

@@ -59,8 +59,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 +71,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 +100,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: '';
@@ -210,3 +206,145 @@
 .radio-item[aria-checked='true'] .radio-dot::after {
   transform: translate(-50%, -50%) scale(1);
 }
+
+/* ── 开关色彩变体 ── */
+.switch--success[aria-checked='true'] { background: var(--token-success); }
+.switch--warning[aria-checked='true'] { background: var(--token-warning); }
+.switch--danger[aria-checked='true']  { background: var(--token-error); }
+
+/* ── 开关带文字（on/off 文字嵌入） ── */
+.switch--text {
+  --switch-w: 52px;
+}
+.switch--text .switch-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--density-font-size-2xs);
+  font-weight: 700;
+  color: transparent;
+}
+.switch--text[aria-checked='true']::before {
+  content: 'ON';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--density-font-size-2xs);
+  font-weight: 700;
+  color: var(--token-on-accent);
+}
+.switch--text[aria-checked='false']::before {
+  content: 'OFF';
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--density-font-size-2xs);
+  font-weight: 700;
+  color: var(--token-text-faint);
+}
+
+/* ── 带标签的开关行 ── */
+.switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) 0;
+}
+.switch-row-label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+.switch-row-title {
+  font-size: var(--density-font-size-md);
+  color: var(--token-text);
+}
+.switch-row-desc {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+
+/* ── 勾选行（checkbox + label 组合） ── */
+.checkbox-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--density-space-sm);
+  cursor: pointer;
+}
+.checkbox-row-label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── 单选卡片（富化版 radio-item，带描述与图标） ── */
+.radio-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-md);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+  cursor: pointer;
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.radio-card:hover {
+  border-color: var(--icen-hover-border);
+}
+.radio-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+}
+.radio-card.is-selected,
+.radio-card[aria-checked='true'] {
+  border-color: var(--token-accent);
+  background: var(--token-accent-subtle);
+  box-shadow: var(--icen-ring-soft);
+}
+.radio-card:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.radio-card-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  color: var(--token-text);
+}
+.radio-card-desc {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  line-height: 1.5;
+}
+
+/* 单选卡片网格 */
+.radio-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--density-space-sm);
+}
+
+/* ── 复选框组（多列网格） ── */
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--density-space-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch-thumb { transition: none; }
+  .radio-dot::after { transition: none; }
+  .radio-card { transition: none; }
+}