@icen.ai/ui 0.2.1 → 0.3.0

package/dist/components/sidebar.css

@@ -1,54 +1,182 @@
 /*
  * @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>
+ *
+ * 完整契约：
+ *   <aside class="sidebar [sidebar--sticky] [sidebar--sm|sidebar--lg]">
+ *     <div class="sidebar-section">                       ← 可选区块标题
+ *       <span class="sidebar-section-label">主菜单</span>
+ *     </div>
+ *     <div class="sidebar-group is-open">
+ *       <button class="sidebar-group-title" aria-expanded="true">
+ *         <span class="sidebar-group-title-text">分组</span>
+ *       </button>
+ *       <div class="sidebar-group-panel">
+ *         <div class="sidebar-group-panel-inner">
+ *           <a class="sidebar-item [.is-active]" href="…" [aria-current="page"]>
+ *             <svg class="sidebar-item-icon">…</svg>
+ *             <span class="sidebar-item-label">条目</span>
+ *             <span class="sidebar-item-badge">3</span>     ← 可选徽章
+ *           </a>
  *         </div>
- *       </aside>
- * 契约：.is-open 由 behaviors/sidebar 切换（同步 aria-expanded）；
- * 展开动画 = grid-template-rows 0fr↔1fr（同 accordion 约定），内层 overflow:hidden。
- * 滚动条样式归 base.css 全局纪律，这里只声明 overflow-y。
+ *       </div>
+ *     </div>
+ *   </aside>
+ *
+ * behavior：.is-open 由 sidebar.ts 切换（同步 aria-expanded）；
+ *           展开动画 = grid-template-rows 0fr↔1fr（同 accordion 约定）。
  */
 
-.sidebar { width: 260px; flex-shrink: 0; overflow-y: auto; padding-right: 4px; }
-.sidebar--sticky { position: sticky; top: 80px; max-height: calc(100vh - 100px); }
+.sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: var(--density-space-xs);
+}
+.sidebar--sticky {
+  position: sticky;
+  top: 80px;
+  max-height: calc(100vh - 100px);
+}
+.sidebar--sm { width: 220px; }
+.sidebar--lg { width: 320px; }
+
+.sidebar-section {
+  padding: var(--density-space-md) var(--density-space-sm) var(--density-space-xs);
+  margin-top: var(--density-space-sm);
+}
+.sidebar-section-label {
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  color: var(--token-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
 
-.sidebar-group { margin-bottom: 8px; }
+.sidebar-group { margin-bottom: var(--density-space-xs); }
 .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;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-sm) var(--density-space-sm);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--token-text-muted);
-  background: none; border: 0; cursor: pointer;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.sidebar-group-title:hover {
+  background: var(--token-control-hover);
+  color: var(--token-text);
+}
+.sidebar-group-title:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.sidebar-group-title-text {
+  flex: 1;
+  text-align: left;
 }
-.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);
+  content: '▾';
+  font-size: var(--density-font-size-sm);
+  line-height: 1;
+  color: var(--token-text-muted);
   transform: rotate(-90deg);
-  transition: transform var(--duration-normal) var(--ease-out);
+  transition: transform var(--icen-tx-normal);
 }
 .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);
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--icen-tx-normal);
 }
 .sidebar-group.is-open .sidebar-group-panel { grid-template-rows: 1fr; }
-.sidebar-group-panel-inner { overflow: hidden; min-height: 0; }
+.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; }
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-sm) var(--density-space-sm);
+  border-radius: var(--radius-md);
+  font-size: var(--density-font-size-md);
+  color: var(--token-text);
+  text-align: left;
+  text-decoration: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.sidebar-item:hover {
+  background: var(--token-control-hover);
+  text-decoration: none;
+  color: var(--token-text);
+}
+.sidebar-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.sidebar-item.is-active,
+.sidebar-item[aria-current='page'] {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-weight: 500;
+}
+.sidebar-item.is-disabled,
+.sidebar-item[aria-disabled='true'],
+.sidebar-item[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  pointer-events: none;
+}
+.sidebar-item-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--token-text-muted);
+}
+.sidebar-item.is-active .sidebar-item-icon { color: var(--token-accent); }
+.sidebar-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar-item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  color: var(--token-on-accent, #fff);
+  background: var(--token-accent);
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-group-panel,
+  .sidebar-group-title::after { transition: none; }
+}

package/dist/components/sidebar.mjs

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

package/dist/components/skeleton.mjs

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

package/dist/components/slider.css

@@ -3,67 +3,205 @@
  * 规格源自 opengal primitives/input.tsx 的 Slider 与 advanced-input.tsx 的 DualRangeSlider；
  * 与 behaviors/slider.ts 配套（透明原生 range 覆盖层驱动 fill/thumb 定位）。
  *
- * 契约（单值）：
- *   <div class="slider">
+ * 完整契约：
+ *   <div class="slider [--sm|--lg] [--vertical] [.is-disabled]" data-min=0 data-max=100 data-step=1>
  *     <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 class="slider-fill" style="width:40%"></div>                 单值：from 0
+ *     OR
+ *     <div class="slider-range" style="left:20%; right:35%"></div>      双值：选中段
+ *     <div class="slider-thumb" style="left:calc(40% - 8px)"></div>     单 thumb
+ *     OR
+ *     <div class="slider-thumb slider-thumb--lo" …>
+ *     <div class="slider-thumb slider-thumb--hi" …>                     双 thumb
+ *     <input class="slider-native" type="range" />                      单：1 个；双：2 个 [data-thumb=lo|hi]
  *   </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）
+ *
+ *   带标签行：
+ *   <div class="slider-row">
+ *     <span class="slider-label">音量</span>
+ *     <span class="slider-value">40</span>     ← behavior 同步当前值，tabular-nums
+ *   </div>
+ *
+ * behavior 维护：thumb 位置 % 化、aria-valuenow/min/max、键盘 ←/→ 步进、Shift 十步、双滑块互锁。
  */
 
-.slider { position: relative; height: 20px; width: 100%; }
+.slider {
+  position: relative;
+  height: 20px;
+  width: 100%;
+  --slider-thumb-size: 16px;
+  --slider-track-height: 6px;
+}
+.slider--sm {
+  height: 16px;
+  --slider-thumb-size: 12px;
+  --slider-track-height: 4px;
+}
+.slider--lg {
+  height: 24px;
+  --slider-thumb-size: 20px;
+  --slider-track-height: 8px;
+}
+.slider.is-disabled,
+.slider[aria-disabled='true'],
+.slider[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* 垂直方向（orient=vertical），常见于音量/色相 */
+.slider--vertical {
+  width: 20px;
+  height: 100%;
+  min-height: 120px;
+}
+.slider--vertical.slider--sm { width: 16px; }
+.slider--vertical.slider--lg { width: 24px; }
 
 .slider-track {
-  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
-  height: 6px; border-radius: var(--radius-full);
+  position: absolute;
+  left: 0; right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--slider-track-height);
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--token-line-soft) 50%, transparent);
 }
+.slider--vertical .slider-track {
+  left: 50%; right: auto;
+  top: 0; bottom: 0;
+  transform: translateX(-50%);
+  height: 100%;
+  width: var(--slider-track-height);
+}
 
 .slider-fill {
-  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
-  height: 6px; border-radius: var(--radius-full);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--slider-track-height);
+  border-radius: var(--radius-full);
   background: var(--token-accent);
-  transition: width var(--duration-normal) var(--ease-out);
+  transition: width var(--icen-tx-normal);
+}
+.slider--vertical .slider-fill {
+  left: 50%;
+  top: auto; bottom: 0;
+  transform: translateX(-50%);
+  width: var(--slider-track-height);
+  height: auto;
+  transition: height var(--icen-tx-normal);
 }
 
 /* 双滑块选中段：left = lo%、right = (100 - hi)% */
 .slider-range {
-  position: absolute; top: 50%; transform: translateY(-50%);
-  height: 6px; border-radius: var(--radius-full);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--slider-track-height);
+  border-radius: var(--radius-full);
   background: var(--token-accent);
-  transition: left var(--duration-normal) var(--ease-out),
-    right var(--duration-normal) var(--ease-out);
+  transition:
+    left var(--icen-tx-normal),
+    right var(--icen-tx-normal);
+}
+.slider--vertical .slider-range {
+  left: 50%;
+  top: auto;
+  transform: translateX(-50%);
+  width: var(--slider-track-height);
+  height: auto;
+  transition:
+    top var(--icen-tx-normal),
+    bottom var(--icen-tx-normal);
 }
 
 .slider-thumb {
-  position: absolute; top: 50%; transform: translateY(-50%);
-  width: 16px; height: 16px; border-radius: var(--radius-full);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  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);
+  transition:
+    transform var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.slider--vertical .slider-thumb {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
 }
-/* 原生 input 透明，焦点环镜像到可见 thumb 上 */
+.slider:hover .slider-thumb {
+  border-color: var(--token-accent-deep, var(--token-accent));
+}
+/* 原生 input 透明，焦点环镜像到可见 thumb 上（消费 --icen-ring-soft） */
 .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);
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: var(--icen-ring-soft), var(--token-shadow-card);
+}
+.slider--vertical:focus-within .slider-thumb {
+  transform: translate(-50%, 50%) scale(1.15);
 }
 
 .slider-native {
-  position: absolute; inset: 0; width: 100%; height: 100%;
-  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
 }
 .slider-native:disabled { cursor: not-allowed; }
+.slider-native:focus { outline: none; }
 
-.slider-row {
-  display: flex; align-items: center; justify-content: space-between;
-  font-size: 12px; color: var(--token-text-muted);
+/* 双滑块需要两个 native input 叠加，--z 错开避免相互拦截 */
+.slider--dual .slider-native[data-thumb='hi'] { z-index: 2; }
+
+/* 当前值标签 */
+.slider-value {
   font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+}
+
+.slider-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+.slider-label { color: var(--token-text-muted); }
+
+/* 刻度（behavior 可选渲染） */
+.slider-ticks {
+  position: absolute;
+  left: 0; right: 0;
+  top: 50%;
+  height: var(--slider-track-height);
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+}
+.slider-tick {
+  width: 1px;
+  height: 100%;
+  background: color-mix(in srgb, var(--token-text) 12%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slider-fill, .slider-range, .slider-thumb { transition: none; }
 }

package/dist/components/slider.mjs

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

package/dist/components/spinner.mjs

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

package/dist/components/stat.css

@@ -1,18 +1,113 @@
 /*
  * @icen.ai/ui — Component: stat（指标卡）
- * 用法：<div class="stat-grid"><div class="stat-card"><div class="stat-num">0</div><div class="stat-label">用户总数</div></div>…
+ *
+ * 完整契约：
+ *   <div class="stat-grid [stat-grid--2|stat-grid--3|stat-grid--4]">
+ *     <div class="stat-card [.stat-card--interactive]">
+ *       <div class="stat-head">
+ *         <span class="stat-label">用户总数</span>
+ *         <span class="stat-icon">…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>
+ *     </div>
+ *   </div>
  */
 
 .stat-grid {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 14px; margin-bottom: 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--density-space-md);
+  margin-bottom: var(--density-space-lg);
 }
+.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
+
 .stat-card {
-  background: var(--token-surface); border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-lg); padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  background: var(--token-surface);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-lg);
+  padding: var(--density-space-md);
   box-shadow: var(--token-shadow-elevated);
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    transform var(--icen-tx-fast);
+}
+.stat-card--interactive {
+  cursor: pointer;
+}
+.stat-card--interactive:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
+  box-shadow: var(--token-shadow-card);
+}
+
+.stat-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+}
+.stat-label {
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.stat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+}
+.stat-icon svg { width: 14px; height: 14px; }
+
+.stat-num {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums lining-nums;
+  color: var(--token-text);
+  word-break: break-all;
 }
-.stat-num { font-size: 24px; font-weight: 700; line-height: 1.25; word-break: break-all; }
 .stat-num.accent { color: var(--token-accent); }
-.stat-num.warn { color: var(--token-warning); }
-.stat-label { color: var(--token-text-faint); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
+.stat-num.warn   { color: var(--token-warning); }
+.stat-num.bad    { color: var(--token-error); }
+.stat-num.info   { color: var(--token-info); }
+
+.stat-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.stat-delta svg { width: 12px; height: 12px; }
+.stat-delta.up   { color: var(--token-success); }
+.stat-delta.down { color: var(--token-error); }
+.stat-delta.flat { color: var(--token-text-faint); }
+.stat-period {
+  color: var(--token-text-faint);
+  margin-left: var(--density-space-xs);
+}
+
+/* 紧凑变体 */
+.stat-card--sm {
+  padding: var(--density-space-sm);
+  gap: 2px;
+}
+.stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
+.stat-card--sm .stat-label { font-size: 10px; }

package/dist/components/stat.mjs

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