@icen.ai/ui 0.5.0 → 0.8.0

package/dist/components/segmented.css

@@ -72,7 +72,7 @@
 .segmented-item.is-active,
 .segmented-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-elevated);
 }
 .segmented-item:disabled,
@@ -130,7 +130,7 @@
 .toggle-item.is-active,
 .toggle-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-card);
 }
 .toggle-item:disabled,
@@ -181,7 +181,7 @@
 }
 .stepper-btn:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent);
+  box-shadow: var(--icen-ring-inset);
 }
 .stepper-btn:disabled,
 .stepper-btn[aria-disabled='true'] {
@@ -225,7 +225,7 @@
   height: 48px;
   padding: 0;
   text-align: center;
-  font-size: 18px;
+  font-size: var(--density-font-size-xl);
   font-weight: 600;
   font-family: var(--font-mono);
   color: var(--token-text);
@@ -254,7 +254,7 @@
   cursor: not-allowed;
 }
 .otp--sm .otp-cell { width: 32px; height: 40px; font-size: var(--density-font-size-lg); }
-.otp--lg .otp-cell { width: 48px; height: 56px; font-size: 22px; }
+.otp--lg .otp-cell { width: 48px; height: 56px; font-size: var(--density-font-size-2xl); }
 
 @media (prefers-reduced-motion: reduce) {
   .segmented-item, .toggle-item, .stepper-btn, .stepper, .otp-cell { transition: none; }

package/dist/components/segmented.mjs

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

package/dist/components/select.css

@@ -26,7 +26,8 @@
  *   </div>
  *
  * behavior 维护：
- *   - .select.is-open ↔ aria-expanded；panel [hidden] 切换；ESC/外部点击关闭
+ *   - .select.is-open ↔ aria-expanded；panel portal 到 body（inline left/top/width/max-height，
+ *     带 data-side="top|bottom"；多选时带 data-select-multiple）；ESC/外部点击关闭
  *   - 选项 .is-focused 跟随键盘箭头；Enter 选中 → 写回 .select-value / .is-selected
  *   - data-select-search：面板顶部自动插入搜索框，实时过滤（含 data-keywords），空分组自动隐藏
  *   - data-select-multiple：点击切选不关面板，trigger 显示计数，hidden input 同步逗号分隔值
@@ -35,7 +36,6 @@
 .select {
   position: relative;
   width: 100%;
-  isolation: isolate; /* panel 不被后面兄弟节点的层叠遮挡 */
 }
 
 .select-trigger {
@@ -105,12 +105,11 @@
 }
 .select.is-open .select-chevron { transform: rotate(180deg); }
 
+/* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
+   data-side="top|bottom" 标记翻侧方向；多选时 panel 带 data-select-multiple 属性。 */
 .select-panel {
   position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 100%;
-  max-height: 240px;
+  z-index: var(--z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 4px;
@@ -118,17 +117,10 @@
   border: 1px solid var(--token-outline);
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
-  z-index: var(--z-popover);
   transform-origin: top center;
-  animation: select-panel-in var(--icen-tx-fast);
-}
-@keyframes select-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .select-panel { animation: none; }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
+.select-panel[data-side='top'] { transform-origin: bottom center; }
 
 /* 选项 */
 .select-option {
@@ -230,7 +222,7 @@
   border-radius: var(--radius-xs);
   background: transparent;
   color: var(--token-text-faint);
-  font-size: 15px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
@@ -249,8 +241,8 @@
   flex-wrap: wrap;
 }
 
-/* 多选项 checkbox 指示器（选项左侧） */
-.select[data-select-multiple] .select-option::before {
+/* 多选项 checkbox 指示器（选项左侧；panel portal 到 body，属性在 panel 上） */
+.select-panel[data-select-multiple] .select-option::before {
   content: '';
   width: 14px;
   height: 14px;
@@ -259,11 +251,11 @@
   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 {
+.select-panel[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 {
+.select-panel[data-select-multiple] .select-option.is-selected::after {
   content: '✓';
   margin-left: auto;
 }

package/dist/components/sidebar.css

@@ -170,7 +170,7 @@
   padding: 0 5px;
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   font-variant-numeric: tabular-nums;

package/dist/components/split-pane.css

@@ -82,7 +82,6 @@
 }
 .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 {

package/dist/components/stat.css

@@ -6,10 +6,10 @@
  *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
  *       <div class="stat-head">
  *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon [.icon--ok|.icon--warn|.icon--bad|.icon--info]>…svg…</span>
+ *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
  *       </div>
  *       <div class="stat-body">
- *         <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
+ *         <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>
@@ -85,10 +85,10 @@
   background: var(--token-accent-subtle);
   color: var(--token-accent);
 }
-.stat-icon.icon--ok   { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
-.stat-icon.icon--warn { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
-.stat-icon.icon--bad  { 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.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; }
 
 /* ── 内容体（数字 + 趋势） ── */
@@ -99,17 +99,17 @@
 }
 
 .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;
@@ -134,7 +134,7 @@
   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 {
@@ -215,20 +215,16 @@
   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: stat-skeleton 1.5s ease-in-out infinite;
+  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%; }
-@keyframes stat-skeleton {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
 @media (prefers-reduced-motion: reduce) {
   .stat-card.is-loading .stat-num,
   .stat-card.is-loading .stat-delta { animation: 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);
@@ -152,7 +152,7 @@
   width: 16px;
   height: 16px;
 }
-.step--finish .step-dot-icon { color: var(--token-on-accent, #fff); }
+.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); }

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: '';
@@ -224,7 +220,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: transparent;
 }
@@ -234,9 +230,9 @@
   left: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .switch--text[aria-checked='false']::before {
   content: 'OFF';
@@ -244,7 +240,7 @@
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: var(--token-text-faint);
 }
@@ -304,7 +300,7 @@
     background-color var(--icen-tx-fast);
 }
 .radio-card:hover {
-  border-color: var(--token-hover-border, color-mix(in srgb, var(--token-accent) 30%, transparent));
+  border-color: var(--icen-hover-border);
 }
 .radio-card-head {
   display: flex;

package/dist/components/table.css

@@ -3,7 +3,7 @@
  *
  * 完整契约：
  *   <div class="table-wrap [table-wrap--bordered]">
- *     <table class="admin-table [--zebra|--compact|--dense] [--sticky-col]">
+ *     <table class="table [--zebra|--compact|--dense] [--sticky-col]">
  *       <caption class="table-caption">标题说明</caption>     ← 可选
  *       <thead>
  *         <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
@@ -23,9 +23,9 @@
  *   </div>
  *
  * .table-wrap：窄屏横向滚动（滚动条样式见 base.css）；--bordered 加外边框。
- * .admin-table--zebra：斑马纹（奇数行底色）。
- * .admin-table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
- * .admin-table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
+ * .table--zebra：斑马纹（奇数行底色）。
+ * .table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
+ * .table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
  * .row-expand[hidden]：配合 .row-link.is-expanded 控制展开行显隐。
  */
 
@@ -38,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;
@@ -60,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;
@@ -88,51 +88,50 @@
 }
 
 /* 紧凑变体 */
-.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); }
 
 /* ── 斑马纹 ── */
-.admin-table--zebra tbody tr:nth-child(odd) {
+.table--zebra tbody tr:nth-child(odd) {
   background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
 }
-.admin-table--zebra tbody tr:hover {
+.table--zebra tbody tr:hover {
   background: var(--token-surface-strong);
 }
 
@@ -147,30 +146,30 @@
 }
 
 /* ── 首列粘滞（长表横向滚动时保持可见） ── */
-.admin-table--sticky-col th:first-child,
-.admin-table--sticky-col .col-fixed {
+.table--sticky-col th:first-child,
+.table--sticky-col .col-fixed {
   position: sticky;
   left: 0;
-  z-index: 2;
+  z-index: calc(var(--z-raised) + 1);
   background: var(--token-bg-soft);
-  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-shadow-card-base, rgba(0,0,0,0.06)) 40%, transparent);
+  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-text) 5%, transparent);
 }
-.admin-table--sticky-col tbody td.col-fixed {
+.table--sticky-col tbody td.col-fixed {
   background: var(--token-surface);
 }
-.admin-table--sticky-col tbody tr:hover td.col-fixed {
+.table--sticky-col tbody tr:hover td.col-fixed {
   background: var(--token-surface-strong);
 }
 
 /* ── 展开行 ── */
-.admin-table .row-expand > td {
+.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);
 }
-.admin-table .row-expand[hidden] { display: none; }
+.table .row-expand[hidden] { display: none; }
 /* 展开行的内容容器（使用方可加 padding/动画） */
 .row-expand-content {
   padding: var(--density-space-sm) 0;
@@ -182,22 +181,22 @@
 }
 
 /* ── 列宽工具类 ── */
-.admin-table .col-narrow { width: 80px; }
-.admin-table .col-wide { width: 240px; }
-.admin-table .col-action { width: 1%; white-space: nowrap; }
+.table .col-narrow { width: 80px; }
+.table .col-wide { width: 240px; }
+.table .col-action { width: 1%; white-space: nowrap; }
 
 /* ── 行状态色 ── */
-.admin-table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
-.admin-table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
-.admin-table tbody tr.row-error   { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
+.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); }
 
 /* ── 粘滞表头阴影提示 ── */
-.admin-table thead th {
+.table thead th {
   box-shadow: 0 1px 0 var(--token-line);
 }
 
 /* ── 表头分组（rowspan/colspan 样式） ── */
-.admin-table th[rowspan] { vertical-align: bottom; }
+.table th[rowspan] { vertical-align: bottom; }
 
 @media (prefers-reduced-motion: reduce) {
   .row-expand-content { animation: none; }