@icen.ai/ui 0.4.0 → 0.8.0

package/dist/components/table.css

@@ -3,22 +3,30 @@
  *
  * 完整契约：
  *   <div class="table-wrap [table-wrap--bordered]">
- *     <table class="admin-table [admin-table--compact|admin-table--dense]">
+ *     <table class="table [--zebra|--compact|--dense] [--sticky-col]">
+ *       <caption class="table-caption">标题说明</caption>     ← 可选
  *       <thead>
- *         <tr><th [colspan=rowspan]>列名</th>…</tr>
+ *         <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
  *       </thead>
  *       <tbody>
- *         <tr class="row-link [.is-selected]">           ← 整行可点
+ *         <tr class="row-link [.is-selected] [.is-expanded]>           ← 整行可点
+ *           <td class="col-fixed">…</td>                                ← 固定列（sticky-col 模式）
  *           <td>…</td>
  *           <td class="ops"><button class="btn btn-sm">…</button></td>
  *         </tr>
+ *         <tr class="row-expand">                                       ← 展开行（配合 .is-expanded）
+ *           <td colspan="99">…展开详情…</td>
+ *         </tr>
  *       </tbody>
  *       <tfoot><tr><td>合计</td>…</tr></tfoot>
  *     </table>
  *   </div>
  *
  * .table-wrap：窄屏横向滚动（滚动条样式见 base.css）；--bordered 加外边框。
- * .admin-table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
+ * .table--zebra：斑马纹（奇数行底色）。
+ * .table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
+ * .table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
+ * .row-expand[hidden]：配合 .row-link.is-expanded 控制展开行显隐。
  */
 
 .table-wrap {
@@ -30,18 +38,18 @@
   border: 1px solid var(--token-line-soft);
 }
 
-.admin-table {
+.table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--density-font-size-md);
   font-variant-numeric: tabular-nums;
 }
-.admin-table th,
-.admin-table td {
+.table th,
+.table td {
   padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
   text-align: left;
 }
-.admin-table th {
+.table th {
   font-weight: 600;
   font-size: var(--density-font-size-xs);
   letter-spacing: 0.05em;
@@ -52,27 +60,27 @@
   background: var(--token-bg-soft);
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--z-raised);
 }
-.admin-table td {
+.table td {
   border-bottom: 1px solid var(--token-line-soft);
   vertical-align: middle;
   color: var(--token-text);
 }
-.admin-table tbody tr:last-child td { border-bottom: 0; }
-.admin-table tbody tr {
+.table tbody tr:last-child td { border-bottom: 0; }
+.table tbody tr {
   transition: background-color var(--icen-tx-fast);
 }
-.admin-table tbody tr:hover {
+.table tbody tr:hover {
   background: var(--token-surface-strong);
 }
-.admin-table tbody tr.row-link {
+.table tbody tr.row-link {
   cursor: pointer;
 }
-.admin-table tbody tr.is-selected {
+.table tbody tr.is-selected {
   background: var(--token-accent-subtle);
 }
-.admin-table tfoot td {
+.table tfoot td {
   border-top: 1px solid var(--token-line);
   border-bottom: 0;
   font-weight: 500;
@@ -80,42 +88,116 @@
 }
 
 /* 紧凑变体 */
-.admin-table--compact th,
-.admin-table--compact td {
+.table--compact th,
+.table--compact td {
   padding: var(--density-space-xs) var(--density-space-sm);
 }
-.admin-table--dense th,
-.admin-table--dense td {
+.table--dense th,
+.table--dense td {
   padding: 4px var(--density-space-xs);
   font-size: var(--density-font-size-sm);
 }
 
 /* 右对齐数字列 */
-.admin-table td.num {
+.table td.num {
   text-align: right;
   font-variant-numeric: tabular-nums lining-nums;
 }
 
-/* 操作列 */
-.admin-table .ops {
+/* 操作列（.btn-sm 必伴 .btn，无需单独列） */
+.table .ops {
   white-space: nowrap;
   text-align: right;
 }
-.admin-table .ops .btn,
-.admin-table .ops .btn-sm {
+.table .ops .btn {
   margin-left: var(--density-space-xs);
 }
 
 /* 可排序表头（使用方 data-sort 指示） */
-.admin-table th[data-sort] {
+.table th[data-sort] {
   cursor: pointer;
   user-select: none;
 }
-.admin-table th[data-sort]::after {
+.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); }
+.table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
+.table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
+
+/* ── 斑马纹 ── */
+.table--zebra tbody tr:nth-child(odd) {
+  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
+}
+.table--zebra tbody tr:hover {
+  background: var(--token-surface-strong);
+}
+
+/* ── 表格标题（caption） ── */
+.table-caption {
+  text-align: left;
+  padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  color: var(--token-text);
+  caption-side: top;
+}
+
+/* ── 首列粘滞（长表横向滚动时保持可见） ── */
+.table--sticky-col th:first-child,
+.table--sticky-col .col-fixed {
+  position: sticky;
+  left: 0;
+  z-index: calc(var(--z-raised) + 1);
+  background: var(--token-bg-soft);
+  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-text) 5%, transparent);
+}
+.table--sticky-col tbody td.col-fixed {
+  background: var(--token-surface);
+}
+.table--sticky-col tbody tr:hover td.col-fixed {
+  background: var(--token-surface-strong);
+}
+
+/* ── 展开行 ── */
+.table .row-expand > td {
+  padding: 0 var(--density-space-md);
+  background: var(--token-bg-soft);
+  border-bottom: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+.table .row-expand[hidden] { display: none; }
+/* 展开行的内容容器（使用方可加 padding/动画） */
+.row-expand-content {
+  padding: var(--density-space-sm) 0;
+  animation: row-expand-in var(--icen-tx-fast) var(--ease-out);
+}
+@keyframes row-expand-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── 列宽工具类 ── */
+.table .col-narrow { width: 80px; }
+.table .col-wide { width: 240px; }
+.table .col-action { width: 1%; white-space: nowrap; }
+
+/* ── 行状态色 ── */
+.table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
+.table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
+.table tbody tr.row-error   { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
+
+/* ── 粘滞表头阴影提示 ── */
+.table thead th {
+  box-shadow: 0 1px 0 var(--token-line);
+}
+
+/* ── 表头分组（rowspan/colspan 样式） ── */
+.table th[rowspan] { vertical-align: bottom; }
+
+@media (prefers-reduced-motion: reduce) {
+  .row-expand-content { animation: none; }
+}

package/dist/components/tabs.css

@@ -2,20 +2,19 @@
  * @icen.ai/ui — Component: tabs（分区导航 / 子导航）
  *
  * 完整契约：
- *   <div class="page-tabs" role="tablist">                       ← 页面内分区
- *     <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
+ *   <div class="tabs" role="tablist">                            ← 页面内分区
+ *     <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
  *   </div>
  *
- *   <nav class="admin-tabs" role="navigation">                   ← 顶部子导航（a 链接）
- *     <a class="[.active]" [aria-current="page"] href="…">…</a>
+ *   <nav class="tabs" role="navigation">                         ← 顶部子导航（a 链接）
+ *     <a class="[.is-active]" [aria-current="page"] href="…">…</a>
  *   </nav>
  *
  * 与 behaviors/tabs 配套：[data-tabs] > [data-tab] + [data-tab-panel]，行为层维护 aria。
- * 窄屏换行不滚动（CLAUDE.md 纪律：tab 条永不出现滚动条）。
+ * 窄屏换行不滚动（纪律：tab 条永不出现滚动条，一律 flex-wrap: wrap）。
  */
 
-.page-tabs,
-.admin-tabs {
+.tabs {
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
@@ -47,14 +46,14 @@
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.page-tab.active,
+.page-tab.is-active,
 .page-tab[aria-selected='true'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
   font-weight: 700;
 }
 
-.admin-tabs a {
+.tabs a {
   padding: var(--density-space-sm) var(--density-space-md);
   font-size: var(--density-font-size-md);
   color: var(--token-text-muted);
@@ -66,48 +65,159 @@
     color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.admin-tabs a:hover {
+.tabs a:hover {
   color: var(--token-accent);
   text-decoration: none;
 }
-.admin-tabs a:focus-visible {
+.tabs a:focus-visible {
   outline: none;
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.admin-tabs a.active,
-.admin-tabs a[aria-current='page'] {
+.tabs a.is-active,
+.tabs a[aria-current='page'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
 }
 
-/* 卡片变体（可选 .page-tabs--cards）：tab 变成 pill，没有底边线 */
-.page-tabs--cards {
+/* 卡片变体（可选 .tabs--cards）：tab 变成 pill，没有底边线 */
+.tabs--cards {
   border-bottom: 0;
   gap: var(--density-space-xs);
   margin-bottom: var(--density-space-md);
 }
-.page-tabs--cards .page-tab {
+.tabs--cards .page-tab {
   padding: var(--density-space-xs) var(--density-space-md);
   border: 1px solid var(--token-outline-soft);
   border-radius: var(--radius-full);
   margin-bottom: 0;
 }
-.page-tabs--cards .page-tab.active,
-.page-tabs--cards .page-tab[aria-selected='true'] {
+.tabs--cards .page-tab.is-active,
+.tabs--cards .page-tab[aria-selected='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
   font-weight: 500;
 }
 
 /* 等宽变体：tab 平均占满容器 */
-.page-tabs--equal .page-tab,
-.admin-tabs--equal a {
+.tabs--equal .page-tab,
+.tabs--equal a {
   flex: 1;
   text-align: center;
 }
 
+/* ── 增强 ── */
+
+/* 尺寸变体 */
+.tabs--sm .page-tab {
+  padding: var(--density-space-xs) var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+}
+.tabs--lg .page-tab {
+  padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
+  font-size: var(--density-font-size-lg);
+}
+
+/* Tab 带图标 */
+.page-tab-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+/* Tab 带徽章/计数 */
+.page-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: var(--density-space-xs);
+  font-size: var(--density-font-size-2xs);
+  font-weight: 600;
+  color: var(--token-text-faint);
+  background: var(--token-fill-2);
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.page-tab.is-active .page-tab-badge,
+.page-tab[aria-selected='true'] .page-tab-badge {
+  background: var(--token-accent);
+  color: var(--token-on-accent);
+}
+
+/* 可关闭 tab */
+.page-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--density-space-xs);
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.page-tab-close:hover {
+  color: var(--token-error);
+  background: var(--token-error-muted);
+}
+.page-tab-close svg { width: 10px; height: 10px; }
+
+/* 分段式 tab（替代底边线，用 segmented 视觉） */
+.tabs--segment {
+  display: inline-flex;
+  border-bottom: none;
+  gap: 2px;
+  padding: 2px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-inset);
+}
+.tabs--segment .page-tab {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding: var(--density-space-xs) var(--density-space-md);
+  border-radius: var(--radius-sm);
+}
+.tabs--segment .page-tab.is-active,
+.tabs--segment .page-tab[aria-selected='true'] {
+  background: var(--token-accent);
+  color: var(--token-on-accent);
+  border-bottom-color: transparent;
+  font-weight: 500;
+}
+
+/* 垂直 tab（侧栏式） */
+.tabs--vertical {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--token-line-soft);
+  margin-bottom: 0;
+  min-width: 160px;
+}
+.tabs--vertical .page-tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+.tabs--vertical .page-tab.is-active,
+.tabs--vertical .page-tab[aria-selected='true'] {
+  border-right-color: var(--token-accent);
+  border-bottom-color: transparent;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .page-tab, .admin-tabs a { transition: none; }
+  .page-tab, .tabs a, .page-tab-close { transition: none; }
 }

package/dist/components/tag-input.css

@@ -40,7 +40,7 @@
 .tag-input.is-max,
 .tag-input.is-max:focus-within {
   border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--token-warning) 14%, transparent);
+  box-shadow: var(--icen-ring-warning);
 }
 .tag-input.is-disabled,
 .tag-input[aria-disabled='true'],
@@ -98,7 +98,7 @@
   cursor: pointer;
   border-radius: var(--radius-full);
   color: inherit;
-  font-size: 11px;
+  font-size: var(--density-font-size-xs);
   line-height: 1;
   opacity: 0.7;
   transition:
@@ -109,7 +109,7 @@
 .tag-chip-x:hover {
   opacity: 1;
   background: color-mix(in srgb, currentColor 18%, transparent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .tag-chip-x:focus-visible {
   outline: none;
@@ -135,7 +135,7 @@
 
 /* 重复值抖动反馈（behavior 短暂挂 is-shake） */
 .tag-input.is-shake {
-  animation: tag-shake 0.32s var(--ease-out);
+  animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
 }
 @keyframes tag-shake {
   0%, 100% { transform: translateX(0); }

package/dist/components/tag.css

@@ -0,0 +1,164 @@
+/*
+ * @icen.ai/ui — Component: tag（展示标签 / Chip）
+ *
+ * 与 pill 的差异（各司其职，不互相替代）：
+ *   - pill = 状态语义徽章（绿/黄/红/信息/accent），小尺寸，行内只读
+ *   - tag  = 中性展示标签，可选关闭按钮、可选中态、可带图标
+ *            常用于：分类、筛选条件、属性标记、邮件标签、文件 tag
+ *
+ * 完整契约：
+ *   <span class="tag [.tag--sm|.tag--lg] [.is-selected] [.is-disabled]
+ *        [.tag--accent|.tag--success|.tag--warning|.tag--error|.tag--info]">
+ *     <span class="tag-icon">…svg…</span>           <!-- 可选左图标 -->
+ *     <span class="tag-label">标签文本</span>
+ *     <button class="tag-close" type="button" aria-label="移除">×</button>  <!-- 可选 -->
+ *   </span>
+ *
+ *   选中态 .is-selected 由消费方驱动（用于筛选条件等）；
+ *   .tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
+ */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--density-space-sm);
+  height: 24px;
+  background: var(--token-fill-1);
+  color: var(--token-text-muted);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  vertical-align: middle;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.tag:hover {
+  background: var(--token-fill-2);
+  color: var(--token-text);
+}
+
+/* 尺寸变体 */
+.tag--sm {
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--density-font-size-xs);
+  gap: 3px;
+}
+.tag--lg {
+  height: 28px;
+  padding: 0 10px;
+  font-size: var(--density-font-size-md);
+  gap: 6px;
+}
+
+/* ── 图标 ── */
+.tag-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-faint);
+}
+.tag-icon svg { width: 12px; height: 12px; }
+.tag--sm .tag-icon svg { width: 10px; height: 10px; }
+.tag--lg .tag-icon svg { width: 14px; height: 14px; }
+.tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+}
+
+/* ── 关闭按钮（消费方点击后自行决定是否从 DOM 移除） ── */
+.tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin-right: -4px;
+  margin-left: 2px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.tag-close:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--token-text-faint) 22%, transparent);
+}
+.tag-close:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.tag-close svg { width: 10px; height: 10px; }
+.tag--sm .tag-close { width: 14px; height: 14px; margin-right: -2px; }
+.tag--lg .tag-close { width: 18px; height: 18px; margin-right: -6px; }
+
+/* ── 选中态（用于筛选条件等）── */
+.tag.is-selected {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent-deep, var(--token-accent));
+  border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
+}
+.tag.is-selected .tag-icon { color: var(--token-accent); }
+
+/* ── 语义色变体（与 pill 对齐，但底色更淡，作分类着色用）── */
+.tag--accent {
+  background: color-mix(in srgb, var(--token-accent) 10%, transparent);
+  color: var(--token-accent-deep, var(--token-accent));
+  border-color: color-mix(in srgb, var(--token-accent) 30%, transparent);
+}
+.tag--success {
+  background: color-mix(in srgb, var(--token-success) 10%, transparent);
+  color: var(--token-success);
+  border-color: color-mix(in srgb, var(--token-success) 30%, transparent);
+}
+.tag--warning {
+  background: color-mix(in srgb, var(--token-warning) 10%, transparent);
+  color: var(--token-warning);
+  border-color: color-mix(in srgb, var(--token-warning) 30%, transparent);
+}
+.tag--error {
+  background: color-mix(in srgb, var(--token-error) 10%, transparent);
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 30%, transparent);
+}
+.tag--info {
+  background: color-mix(in srgb, var(--token-info) 10%, transparent);
+  color: var(--token-info);
+  border-color: color-mix(in srgb, var(--token-info) 30%, transparent);
+}
+
+/* ── 禁用态 ── */
+.tag.is-disabled,
+.tag[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── 可点击（用于可筛选 tag） ── */
+button.tag,
+.tag[role='button'] {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.tag:where(button, [role='button']):focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tag, .tag-close { transition: none; }
+}

package/dist/components/tag.mjs

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