@icen.ai/ui 0.2.1 → 0.4.0

package/dist/components/steps.css

@@ -1,61 +1,135 @@
 /*
  * @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 间隙接到下一颗圆点。
+ *
+ * 完整契约：
+ *   <ol class="steps [steps--vertical] [steps--sm|steps--lg]" aria-label="进度">
+ *     <li class="step [step--finish|step--process|step--wait] [.step--error]">
+ *       <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>
+ *
+ * 四态：finish / process / wait / error（错误用 error 色 dot + 描边）。
+ * 点击 .step[role=button] 由使用方实现跳转。
  */
 
-.steps { display: flex; list-style: none; margin: 0; padding: 0; }
-.step { flex: 1; position: relative; text-align: center; }
+.steps {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.step {
+  flex: 1;
+  position: relative;
+  text-align: center;
+  padding: 0 var(--density-space-xs);
+}
 
 .step-line {
-  position: absolute; top: 16px; left: calc(50% + 20px);
-  width: calc(100% - 40px); height: 1px;
+  position: absolute;
+  top: 16px;
+  left: calc(50% + 20px);
+  width: calc(100% - 40px);
+  height: 1px;
   background: var(--token-outline-soft);
+  transition: background-color var(--icen-tx-normal);
 }
 .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;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  z-index: 1;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.step--finish .step-dot {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
 }
-.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);
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
   border: 2px solid var(--token-accent);
+  box-shadow: var(--icen-ring-soft);
 }
 .step--wait .step-dot {
-  background: var(--token-control); color: var(--token-text-faint);
+  background: var(--token-control);
+  color: var(--token-text-faint);
   border: 1px solid var(--token-outline-soft);
 }
+.step--error .step-dot {
+  background: var(--token-error-muted);
+  color: var(--token-error);
+  border: 2px solid var(--token-error);
+}
 
-.step-title { font-size: 13px; font-weight: 500; margin-top: 6px; }
+.step-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  margin-top: var(--density-space-xs);
+  color: var(--token-text);
+}
 .step--wait .step-title { color: var(--token-text-muted); }
+.step--error .step-title { color: var(--token-error); }
 .step-desc {
-  font-size: 11px; color: var(--token-text-faint);
-  margin-top: 2px; max-width: 160px; margin-inline: auto;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  margin-top: 2px;
+  max-width: 160px;
+  margin-inline: auto;
+  line-height: 1.4;
 }
 
+/* 尺寸变体 */
+.steps--sm .step-dot { width: 24px; height: 24px; font-size: var(--density-font-size-xs); }
+.steps--sm .step-line { top: 12px; }
+.steps--lg .step-dot { width: 40px; height: 40px; font-size: var(--density-font-size-md); }
+.steps--lg .step-line { top: 20px; }
+
 /* ── 垂直变体 ── */
-.steps--vertical { flex-direction: column; gap: 16px; }
-.steps--vertical .step { flex: none; display: flex; gap: 12px; text-align: left; }
+.steps--vertical {
+  flex-direction: column;
+  gap: var(--density-space-md);
+}
+.steps--vertical .step {
+  flex: none;
+  display: flex;
+  gap: var(--density-space-sm);
+  text-align: left;
+  padding: 0;
+}
 .steps--vertical .step-line {
-  top: 36px; bottom: -16px; left: 16px;
-  width: 1px; height: auto;
+  top: 36px;
+  bottom: calc(-1 * var(--density-space-md));
+  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; }
+.steps--vertical .step-desc {
+  max-width: none;
+  margin-inline: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .step-dot, .step-line { transition: none; }
+}

package/dist/components/steps.mjs

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

package/dist/components/switch.css

@@ -1,95 +1,212 @@
 /*
- * @icen.ai/ui — Component: switch（开关 / 勾选框 / 单选行）
- * 纯 CSS 状态组件：状态全走 aria-checked / .is-selected，交互由使用方（或演示页脚本）切换。
+ * @icen.ai/ui — Component: switch / checkbox / radio（开关 / 勾选 / 单选行）
+ * 纯 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>
+ * 完整契约：
+ *   <button class="switch [--sm|--lg]" role="switch" aria-checked="true|false" [disabled]>
+ *     <span class="switch-thumb"></span>
+ *   </button>
+ *
+ *   <button class="checkbox focus-ring [--sm|--lg]" role="checkbox"
+ *           aria-checked="true|false|mixed" [disabled]></button>
+ *
+ *   <div class="radio-group" role="radiogroup">
+ *     <button class="radio-item motion [.is-selected]" role="radio"
+ *             aria-checked="true|false" [disabled]>
+ *       <span class="radio-dot"></span>
+ *       <span>标签</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-w: 44px;
+  --switch-h: 24px;
+  --switch-thumb: 20px;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--token-control-hover);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--icen-tx-normal);
+}
+.switch[aria-checked='true'] {
+  background: var(--token-accent);
+}
+.switch:disabled,
+.switch[aria-disabled='true'],
+.switch[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+}
+.switch:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
 
 .switch-thumb {
-  position: absolute; top: 2px; left: 2px;
-  width: 20px; height: 20px; border-radius: var(--radius-full);
+  position: absolute;
+  top: 50%;
+  left: calc((var(--switch-h) - var(--switch-thumb)) / 2);
+  transform: translateY(-50%);
+  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.1);
-  transition: transform var(--duration-normal) var(--ease-out);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  transition: transform var(--icen-tx-bounce);
 }
-.switch[aria-checked='true'] .switch-thumb { transform: translateX(20px); }
+.switch[aria-checked='true'] .switch-thumb {
+  transform: translateY(-50%) translateX(calc(var(--switch-w) - var(--switch-h)));
+}
+
+/* 尺寸变体 */
+.switch--sm { --switch-w: 36px; --switch-h: 20px; --switch-thumb: 16px; }
+.switch--lg { --switch-w: 56px; --switch-h: 28px; --switch-thumb: 24px; }
 
-.switch--sm { width: 36px; height: 20px; }
-.switch--sm .switch-thumb { width: 16px; height: 16px; }
-.switch--sm[aria-checked='true'] .switch-thumb { transform: translateX(16px); }
+@media (prefers-reduced-motion: reduce) {
+  .switch-thumb { transition: none; }
+}
 
-/* ── 勾选框（✓ 与半选横条均 ::before 自绘，无需内联 svg） ── */
+/* ── 勾选框（✓ 与半选横条均 ::before 自绘） ── */
 .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;
+  --checkbox-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  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);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
 }
-.checkbox:hover:not([aria-checked='true']):not([aria-checked='mixed']) {
+.checkbox:hover:not([aria-checked='true']):not([aria-checked='mixed']):not(:disabled) {
   border-color: color-mix(in srgb, var(--token-accent) 50%, transparent);
 }
-.checkbox[aria-checked='true'], .checkbox[aria-checked='mixed'] {
+.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;
+  content: '';
+  width: 60%;
+  height: 60%;
+  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);
+  opacity: 1;
+  width: 60%;
+  height: 2px;
+  clip-path: none;
+  border-radius: var(--radius-full);
+}
+.checkbox:disabled,
+.checkbox[aria-disabled='true'],
+.checkbox[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
 }
-.checkbox:disabled { opacity: 0.4; cursor: not-allowed; }
+.checkbox:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.checkbox--sm { --checkbox-size: 14px; }
+.checkbox--lg { --checkbox-size: 20px; }
 
-/* ── 单选行 ── */
-.radio-group { display: flex; flex-direction: column; gap: 4px; }
+/* ── 单选行（radio item：整行可点） ── */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+}
 
 .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;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: var(--density-space-sm) var(--density-space-md);
+  font-size: var(--density-font-size-md);
+  text-align: left;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--token-text);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
 }
-.radio-item.is-selected {
-  background: var(--token-accent-subtle); color: var(--token-accent); font-weight: 500;
+.radio-item:hover:not(.is-disabled) {
+  background: var(--token-fill-1);
+}
+.radio-item.is-selected,
+.radio-item[aria-checked='true'] {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-weight: 500;
+  border-color: color-mix(in srgb, var(--token-accent) 25%, transparent);
+}
+.radio-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.radio-item:disabled,
+.radio-item.is-disabled,
+.radio-item[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
 }
-.radio-item:disabled { opacity: 0.4; cursor: not-allowed; }
 
 .radio-dot {
-  position: relative; width: 16px; height: 16px; flex-shrink: 0;
+  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);
+  background: var(--token-control);
+  transition: border-color var(--icen-tx-fast);
 }
-.radio-item.is-selected .radio-dot { border-color: var(--token-accent); }
+.radio-item.is-selected .radio-dot,
+.radio-item[aria-checked='true'] .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);
+  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);
+  transition: transform var(--icen-tx-bounce);
+}
+.radio-item.is-selected .radio-dot::after,
+.radio-item[aria-checked='true'] .radio-dot::after {
+  transform: translate(-50%, -50%) scale(1);
 }
-.radio-item.is-selected .radio-dot::after { transform: translate(-50%, -50%) scale(1); }

package/dist/components/switch.mjs

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

package/dist/components/table.css

@@ -1,19 +1,121 @@
 /*
  * @icen.ai/ui — Component: table（数据表）
- * 用法：<div class="table-wrap"><table class="admin-table">…
- * .table-wrap 负责窄屏横向滚动（滚动条样式见 base.css）；行内操作列用 .ops。
+ *
+ * 完整契约：
+ *   <div class="table-wrap [table-wrap--bordered]">
+ *     <table class="admin-table [admin-table--compact|admin-table--dense]">
+ *       <thead>
+ *         <tr><th [colspan=rowspan]>列名</th>…</tr>
+ *       </thead>
+ *       <tbody>
+ *         <tr class="row-link [.is-selected]">           ← 整行可点
+ *           <td>…</td>
+ *           <td class="ops"><button class="btn btn-sm">…</button></td>
+ *         </tr>
+ *       </tbody>
+ *       <tfoot><tr><td>合计</td>…</tr></tfoot>
+ *     </table>
+ *   </div>
+ *
+ * .table-wrap：窄屏横向滚动（滚动条样式见 base.css）；--bordered 加外边框。
+ * .admin-table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
  */
 
-.table-wrap { overflow-x: auto; }
-.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.table-wrap {
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--radius-lg);
+}
+.table-wrap--bordered {
+  border: 1px solid var(--token-line-soft);
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--density-font-size-md);
+  font-variant-numeric: tabular-nums;
+}
+.admin-table th,
+.admin-table td {
+  padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
+  text-align: left;
+}
 .admin-table th {
-  text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 1px;
-  color: var(--token-text-faint); padding: 10px 14px;
-  border-bottom: 1px solid var(--token-line-soft); white-space: nowrap;
+  font-weight: 600;
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.05em;
+  color: var(--token-text-faint);
+  border-bottom: 1px solid var(--token-line);
+  white-space: nowrap;
+  text-transform: uppercase;
+  background: var(--token-bg-soft);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.admin-table td {
+  border-bottom: 1px solid var(--token-line-soft);
+  vertical-align: middle;
+  color: var(--token-text);
 }
-.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--token-line-soft); vertical-align: middle; }
 .admin-table tbody tr:last-child td { border-bottom: 0; }
-.admin-table tbody tr:hover { background: var(--token-surface-strong); }
-.admin-table tbody tr.row-link { cursor: pointer; }
-.admin-table .ops { white-space: nowrap; text-align: right; }
-.admin-table .ops .btn-sm { margin-left: 6px; }
+.admin-table tbody tr {
+  transition: background-color var(--icen-tx-fast);
+}
+.admin-table tbody tr:hover {
+  background: var(--token-surface-strong);
+}
+.admin-table tbody tr.row-link {
+  cursor: pointer;
+}
+.admin-table tbody tr.is-selected {
+  background: var(--token-accent-subtle);
+}
+.admin-table tfoot td {
+  border-top: 1px solid var(--token-line);
+  border-bottom: 0;
+  font-weight: 500;
+  background: var(--token-bg-soft);
+}
+
+/* 紧凑变体 */
+.admin-table--compact th,
+.admin-table--compact td {
+  padding: var(--density-space-xs) var(--density-space-sm);
+}
+.admin-table--dense th,
+.admin-table--dense td {
+  padding: 4px var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+}
+
+/* 右对齐数字列 */
+.admin-table td.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+/* 操作列 */
+.admin-table .ops {
+  white-space: nowrap;
+  text-align: right;
+}
+.admin-table .ops .btn,
+.admin-table .ops .btn-sm {
+  margin-left: var(--density-space-xs);
+}
+
+/* 可排序表头（使用方 data-sort 指示） */
+.admin-table th[data-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+.admin-table th[data-sort]::after {
+  content: '↕';
+  margin-left: var(--density-space-xs);
+  color: var(--token-text-faint);
+  opacity: 0.6;
+}
+.admin-table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
+.admin-table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }

package/dist/components/table.mjs

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