@icen.ai/ui 0.5.0 → 0.8.1

package/dist/components/chart-bar.css

@@ -77,3 +77,13 @@
 @media (prefers-reduced-motion: reduce) {
   .chart-vbar-bar, .chart-hbar-bar { transition: none; }
 }
+
+/* ── 多系列：分组（簇内并排）与堆叠（列内向上叠）── */
+.chart-vbar-track--multi { gap: 2px; }
+.chart-vbar-track--multi > .chart-vbar-bar { flex: 1; min-width: 0; width: auto; }
+.chart-vbar-track--multi.chart-vbar-track--stacked {
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0;
+}
+.chart-vbar-track--multi.chart-vbar-track--stacked > .chart-vbar-bar { flex: none; width: 100%; }

package/dist/components/chart-calendar.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-calendar（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-heatmap.css';
+import './charts.css';
+export { renderCalendar } from '../behaviors/charts.mjs';

package/dist/components/chart-gauge.css

@@ -27,7 +27,7 @@
   gap: 1px;
 }
 .chart-gauge-value {
-  font-size: 20px;
+  font-size: var(--density-font-size-2xl);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--token-text);

package/dist/components/chart-heatmap.css

@@ -50,3 +50,43 @@
 }
 .chart-heatmap-legend > span:first-child { margin-right: 2px; }
 .chart-heatmap-legend > span:last-child { margin-left: 2px; }
+
+/* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
+ * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
+ * 月份标签按周列定位：left = col / columns * 100%。 */
+.chart-calendar {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  grid-template-rows: 14px auto auto;
+  column-gap: 4px;
+  row-gap: 3px;
+}
+.chart-calendar-months {
+  grid-column: 2;
+  position: relative;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.chart-calendar-month {
+  position: absolute;
+  top: 0;
+  left: calc(var(--col, 0) / var(--columns, 1) * 100%);
+  white-space: nowrap;
+}
+.chart-calendar-weekdays {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  line-height: 1;
+}
+.chart-calendar .chart-heatmap-grid {
+  grid-column: 2;
+  grid-row: 2;
+}
+.chart-calendar .chart-heatmap-legend {
+  grid-column: 2;
+  grid-row: 3;
+}

package/dist/components/chart-pie.css

@@ -18,9 +18,3 @@
   height: 132px;
   flex-shrink: 0;
 }
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}

package/dist/components/chart-scatter.css

@@ -0,0 +1,24 @@
+/*
+ * @icen.ai/ui — Component: chart-scatter（散点/气泡图专属样式）
+ * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
+ *   .chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-chart-mark]）
+ * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
+ */
+
+.chart-scatter svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.chart-scatter circle[data-chart-mark] {
+  transition: fill-opacity var(--icen-tx-fast);
+}
+.chart-scatter circle[data-chart-mark]:hover {
+  fill-opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-scatter circle[data-chart-mark] { transition: none; }
+}

package/dist/components/chart-scatter.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-scatter（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-scatter.css';
+import './charts.css';
+export { renderScatter } from '../behaviors/charts.mjs';

package/dist/components/charts.css

@@ -70,7 +70,7 @@
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,10 +78,95 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* ── 调色盘：多系列图（donut/stack/line/radar）由 behavior 选用 ── */
+/* ── 调色盘：手写 markup 调色盘；behavior 走 charts.ts PALETTE_VARS 内联同值（两处值需人工同步） ── */
 .chart-tone-1 { --chart-tone: var(--token-accent); }
 .chart-tone-2 { --chart-tone: var(--token-accent-cold); }
 .chart-tone-3 { --chart-tone: var(--token-success); }
 .chart-tone-4 { --chart-tone: var(--token-warning); }
 .chart-tone-5 { --chart-tone: var(--token-info); }
 .chart-tone-6 { --chart-tone: color-mix(in srgb, var(--token-text) 50%, transparent); }
+
+/* ═══ 通用层（renderChart）：标题 / 内置 tooltip / 标记交互 / 图例切换 ═══ */
+
+/* 标题（spec.title 有值时渲染） */
+.chart-title {
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  color: var(--token-text);
+}
+
+/* 头部行（renderChart 渲染）：标题 + 图例可见性小眼睛 */
+.chart-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  min-height: 24px;
+}
+.chart-legend-eye {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.chart-legend-eye:hover { color: var(--token-text); background: var(--token-fill-1); }
+.chart-legend-eye:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.chart-legend-eye svg { width: 13px; height: 13px; }
+
+/* 图例统一隐藏：容器级继承——data-legend-hidden 一条选择器覆盖全部图型的图例 */
+[data-legend-hidden='true'] .chart-legend,
+[data-legend-hidden='true'] .chart-legend--toggle,
+[data-legend-hidden='true'] .chart-heatmap-legend {
+  display: none;
+}
+
+/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针 */
+.chart-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-width: 280px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-line);
+  box-shadow: var(--token-shadow-elevated);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+  pointer-events: none;
+}
+.chart-tooltip[hidden] { display: none; }
+
+/* 数据标记（各图型的条/点/段/格）：交互态由委托层挂 .is-hover，图例切换挂 .is-off */
+[data-chart-mark] { cursor: pointer; }
+[data-chart-mark].is-hover { filter: brightness(1.12); }
+[data-chart-mark].is-off { opacity: 0.16; pointer-events: none; }
+svg circle[data-chart-mark].is-hover { stroke-width: 3; }
+
+/* 可切换图例：行可点（Enter/Space 等价），.is-off 划线淡化 */
+.chart-legend--toggle .chart-legend-toggle-item {
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  padding: 2px 4px;
+  margin: -2px -4px;
+  transition: background-color var(--icen-tx-fast);
+}
+.chart-legend--toggle .chart-legend-toggle-item:hover { background: var(--token-fill-1); }
+.chart-legend--toggle .chart-legend-toggle-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.chart-legend--toggle .is-off .chart-legend-label,
+.chart-legend--toggle .is-off .chart-legend-value {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+.chart-legend--toggle .is-off .chart-legend-dot { opacity: 0.3; }

package/dist/components/charts.mjs

@@ -9,4 +9,5 @@ import './chart-area.css';
 import './chart-stack.css';
 import './chart-gauge.css';
 import './chart-sparkline.css';
+import './chart-scatter.css';
 export * from '../behaviors/charts.mjs';

package/dist/components/command-palette.css

@@ -188,7 +188,7 @@
 
 .command-palette-item-kbd {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   padding: 1px 5px;
   border: 1px solid var(--token-line-soft);
@@ -219,7 +219,7 @@
 }
 .command-palette-foot-hint kbd {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   padding: 1px 4px;
   border: 1px solid var(--token-line-soft);
   border-radius: var(--radius-xs);

package/dist/components/content.css

@@ -3,6 +3,9 @@
  *
  * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
  *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
+ * markup API 变体（正文"增强"段，behavior 不产出、由手写 markup 消费）：
+ *   .accordion--cards / .code-inline--success|--warning|--error /
+ *   .timeline--right|--alternate|--sm / .timeline-extra / .timeline-dot--sm 及 dot 语义色（--error 等）
  * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
  */
 
@@ -28,7 +31,7 @@
   height: 16px;
   min-width: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .kbd-group {
   display: inline-flex;
@@ -192,11 +195,11 @@
   z-index: 1;
 }
 .timeline-dot svg { width: 13px; height: 13px; }
-.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent, #fff); border-color: transparent; }
+.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent); border-color: transparent; }
 
 .timeline-body { flex: 1; min-width: 0; }
 .timeline-head {
@@ -362,9 +365,9 @@
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   flex-shrink: 0;
@@ -454,7 +457,6 @@
 /* 自定义 dot 尺寸 */
 .timeline-dot--sm { width: 20px; height: 20px; }
 .timeline-dot--sm svg { width: 10px; height: 10px; }
-.timeline-dot--sm ~ .timeline-item:not(:last-child)::after,
 .timeline--sm .timeline-item:not(:last-child)::after { left: 10px; top: 24px; }
 
 /* 时间线自定义内容槽（放标签、卡片等） */
@@ -532,22 +534,6 @@
   background: var(--token-outline-soft);
 }
 
-/* 树节点复选框（checkbox tree） */
-.tree-checkbox {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-/* 树拖拽视觉态 */
-.tree-node.is-dragging {
-  opacity: 0.5;
-}
-.tree-node.is-drop-target {
-  box-shadow: inset 0 -2px var(--token-accent);
-}
-
 /* 树搜索高亮 */
 .tree-label mark {
   background: color-mix(in srgb, var(--token-warning) 30%, transparent);

package/dist/components/copy.css

@@ -6,17 +6,17 @@
  *   <button class="copy-btn" data-copy="复制的文本">复制</button>
  *   <button class="copy-btn copy-btn--ghost" data-copy="…">复制链接</button>
  *
- *   图标变体（带 data-copy-icon，仅加 .done 类；由 CSS 显隐子 svg）：
+ *   图标变体（带 data-copy-icon，仅加 .is-done 类；由 CSS 显隐子 svg）：
  *   <button class="copy-btn copy-btn--icon" data-copy="…" data-copy-icon aria-label="复制">
  *     <svg class="copy-icon-clipboard">…</svg>
  *     <svg class="copy-icon-check" hidden>…</svg>
  *   </button>
  *
  * behavior 自动处理：
- *   - 文本变体：成功后 textContent = '已复制' + 加 .done 类，1.4s 后还原
- *   - 图标变体（带 data-copy-icon）：仅加 .done 类（不改文本），由 CSS 切换 svg 显隐
+ *   - 文本变体：成功后 textContent = '已复制' + 加 .is-done 类，1.4s 后还原
+ *   - 图标变体（带 data-copy-icon）：仅加 .is-done 类（不改文本），由 CSS 切换 svg 显隐
  *
- * 与 toast.ok 区别：copy 是"原地反馈"（按钮自身闪烁），toast 是"全局通知"。
+ * 与 toast.toast--success 区别：copy 是"原地反馈"（按钮自身闪烁），toast 是"全局通知"。
  */
 
 .copy-btn {
@@ -65,7 +65,7 @@
 }
 
 /* ── 成功闪烁态（behavior 1.4s 后移除）── */
-.copy-btn.done {
+.copy-btn.is-done {
   color: var(--token-success);
   border-color: color-mix(in srgb, var(--token-success) 40%, transparent);
   background: color-mix(in srgb, var(--token-success) 10%, transparent);
@@ -83,10 +83,10 @@
   flex-shrink: 0;
 }
 
-/* .done 时显隐切换：剪贴板 → 对勾 */
+/* .is-done 时显隐切换：剪贴板 → 对勾 */
 .copy-btn[data-copy-icon] .copy-icon-check { display: none; }
-.copy-btn[data-copy-icon].done .copy-icon-clipboard { display: none; }
-.copy-btn[data-copy-icon].done .copy-icon-check { display: inline-block; }
+.copy-btn[data-copy-icon].is-done .copy-icon-clipboard { display: none; }
+.copy-btn[data-copy-icon].is-done .copy-icon-check { display: inline-block; }
 
 @media (prefers-reduced-motion: reduce) {
   .copy-btn { transition: none; }

package/dist/components/datatable.css

@@ -125,11 +125,11 @@
 .dt-cell--head.is-sortable:hover { color: var(--token-text); }
 .dt-cell--head: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);
 }
 .dt-head-title { overflow: hidden; text-overflow: ellipsis; }
 .dt-sort {
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   flex-shrink: 0;
 }
@@ -165,11 +165,7 @@
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   font-weight: 400;
-  animation: dt-panel-in var(--icen-tx-fast);
-}
-@keyframes dt-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 .dt-filter-list {
   max-height: 220px;
@@ -400,7 +396,7 @@
 .dt-resize:active::after {
   background: var(--token-accent);
 }
-.dt-cell--head { /* 确保相对定位供 resize 绝对定位 */ }
+/* .dt-cell--head 已在主规则 position: relative，供 resize 手柄绝对定位 */
 
 /* ── 冻结列（左固定 sticky） ── */
 .datatable--frozen .dt-cell--frozen {
@@ -422,7 +418,7 @@
   background: color-mix(in srgb, var(--token-accent-subtle) 82%, var(--token-fill-1));
 }
 
-/* ── 行状态类（rowClassName 产出） ── */
+/* ── 行状态类（rowClassName 产出；--danger/--warning/--success 同族语义行底色） ── */
 .dt-row--danger { background: color-mix(in srgb, var(--token-error) 6%, transparent) !important; }
 .dt-row--danger:hover { background: color-mix(in srgb, var(--token-error) 10%, transparent) !important; }
 .dt-row--warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent) !important; }

package/dist/components/date-picker.css

@@ -3,7 +3,7 @@
  *
  * 契约：
  *   <div class="date-picker" data-date-picker data-date-picker-input="id">
- *     <button class="date-picker-trigger" type="button" aria-haspopup="dialog">
+ *     <button class="date-picker-trigger [--sm|--lg]" type="button" aria-haspopup="dialog">
  *       <span class="date-picker-value">2026-07-29</span>
  *       <svg class="date-picker-icon">…日历 svg…</svg>
  *     </button>
@@ -101,11 +101,7 @@
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   font-size: var(--density-font-size-sm);
-  animation: icen-dp-in var(--icen-tx-fast);
-}
-@keyframes icen-dp-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 
 .date-picker-head {
@@ -189,10 +185,10 @@
 }
 .date-picker-cell.is-selected {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 600;
 }
-.date-picker-cell.is-selected.is-today { border-color: var(--token-on-accent, #fff); }
+.date-picker-cell.is-selected.is-today { border-color: var(--token-on-accent); }
 .date-picker-cell.is-outside {
   color: var(--token-text-faint);
   opacity: 0.55;

package/dist/components/empty.css

@@ -129,7 +129,3 @@
 @media (max-width: 480px) {
   .empty--404 .empty-title { font-size: 56px; }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .empty { animation: none; }
-}

package/dist/components/feedback.css

@@ -149,7 +149,7 @@
 /* 不定进度（spinner 替代品）：bar 来回扫动 */
 .progress--indeterminate .progress-bar {
   width: 35% !important;
-  animation: progress-sweep 1.4s var(--ease-in-out, var(--ease-out)) infinite;
+  animation: progress-sweep var(--progress-sweep-duration, 1.4s) var(--ease-in-out, var(--ease-out)) infinite;
 }
 @keyframes progress-sweep {
   0%   { transform: translateX(-100%); }
@@ -173,7 +173,7 @@
   border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
   border-top-color: var(--token-accent);
   border-radius: var(--radius-full);
-  animation: icen-spin 0.8s linear infinite;
+  animation: icen-spin var(--spinner-duration, 0.8s) linear infinite;
 }
 .spinner--sm { width: 14px; height: 14px; border-width: 2px; }
 .spinner--lg { width: 32px; height: 32px; border-width: 3px; }
@@ -181,8 +181,6 @@
 .spinner--error   { border-color: color-mix(in srgb, var(--token-error) 30%, transparent); border-top-color: var(--token-error); }
 .spinner--muted   { border-color: color-mix(in srgb, var(--token-text-faint) 30%, transparent); border-top-color: var(--token-text-faint); }
 
-@keyframes icen-spin { to { transform: rotate(360deg); } }
-
 /* 文字+spinner 组合 */
 .spinner-wrap {
   display: inline-flex;
@@ -197,7 +195,7 @@
   display: block;
   background: color-mix(in srgb, var(--token-text) 8%, transparent);
   border-radius: var(--radius-sm);
-  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
 .skeleton--circle { border-radius: var(--radius-full); }
 .skeleton--text {
@@ -206,11 +204,6 @@
 }
 .skeleton--text:last-child { width: 60%; }
 
-@keyframes icen-skeleton-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
 /* ── alert 增强 ── */
 
 /* 可操作横幅（含按钮） */
@@ -304,7 +297,7 @@
     transparent
   );
   background-size: 20px 20px;
-  animation: progress-stripe 1s linear infinite;
+  animation: progress-stripe var(--progress-stripe-duration, 1s) linear infinite;
 }
 @keyframes progress-stripe {
   from { background-position: 0 0; }
@@ -336,7 +329,7 @@
   height: 6px;
   border-radius: var(--radius-full);
   background: var(--token-accent);
-  animation: spinner-dot 1.4s ease-in-out infinite;
+  animation: spinner-dot var(--spinner-dots-duration, 1.4s) ease-in-out infinite;
 }
 .spinner--dots span:nth-child(2) { animation-delay: 0.2s; }
 .spinner--dots span:nth-child(3) { animation-delay: 0.4s; }
@@ -362,7 +355,7 @@
   height: 100%;
   background: var(--token-accent);
   border-radius: 1px;
-  animation: spinner-bar 1s ease-in-out infinite;
+  animation: spinner-bar var(--spinner-bars-duration, 1s) ease-in-out infinite;
 }
 .spinner--bars span:nth-child(2) { animation-delay: 0.1s; }
 .spinner--bars span:nth-child(3) { animation-delay: 0.2s; }
@@ -376,7 +369,7 @@
 .spinner-overlay {
   position: fixed;
   inset: 0;
-  z-index: var(--z-overlay, 9999);
+  z-index: var(--z-dialog);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -422,7 +415,7 @@
   height: 12px;
   border-radius: var(--radius-xs);
   background: color-mix(in srgb, var(--token-text) 8%, transparent);
-  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
 
 /* 骨架波纹变体（shimmer，区别于 pulse） */
@@ -434,7 +427,7 @@
     color-mix(in srgb, var(--token-text) 6%, transparent) 100%
   );
   background-size: 200% 100%;
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  animation: skeleton-shimmer var(--skeleton-shimmer-duration, 1.5s) ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {
   from { background-position: 200% 0; }
@@ -446,7 +439,7 @@
   .progress--indeterminate .progress-bar { animation: none; width: 100% !important; }
   .progress--striped .progress-bar { animation: none; }
   .progress-ring-fill { transition: none; }
-  .spinner { animation-duration: 2s; }
+  .spinner { --spinner-duration: 2s; }
   .spinner--dots span,
   .spinner--bars span { animation: none; }
   .skeleton,

package/dist/components/form.css

@@ -148,7 +148,7 @@
 
 /* label 带可选标记 */
 .form-label-optional {
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 400;
   color: var(--token-text-faint);
   margin-left: 4px;
@@ -229,11 +229,11 @@
   border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
   border-top-color: var(--token-accent);
   border-radius: 50%;
-  animation: form-loading-spin 0.8s linear infinite;
+  animation: icen-spin var(--form-loading-duration, 0.8s) linear infinite;
 }
-@keyframes form-loading-spin { to { transform: rotate(360deg); } }
 
-/* ── 页面级横幅：操作结果 / 引导提示 ── */
+/* ── 页面级横幅：操作结果 / 引导提示 ──
+   与 feedback.css 的 alert 共享同一套视觉 token（--banner-* 仅在底色/文字/描边上分流） */
 .banner-ok,
 .banner-err {
   display: flex;
@@ -245,23 +245,22 @@
   font-size: var(--density-font-size-sm);
   line-height: 1.5;
   border: 1px solid transparent;
+  background: var(--banner-bg);
+  color: var(--banner-fg);
+  border-color: var(--banner-border);
 }
 .banner-ok {
-  background: var(--token-success-muted);
-  color: var(--token-success);
-  border-color: color-mix(in srgb, var(--token-success) 25%, transparent);
+  --banner-bg: var(--token-success-muted);
+  --banner-fg: var(--token-success);
+  --banner-border: color-mix(in srgb, var(--token-success) 25%, transparent);
 }
 .banner-err {
-  background: var(--token-error-muted);
-  color: var(--token-error);
-  border-color: color-mix(in srgb, var(--token-error) 25%, transparent);
+  --banner-bg: var(--token-error-muted);
+  --banner-fg: var(--token-error);
+  --banner-border: color-mix(in srgb, var(--token-error) 25%, transparent);
 }
 /* block 模式：横向占满，带图标位 */
 .banner-block {
   align-items: center;
   padding: var(--density-space-md);
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .banner-ok, .banner-err { transition: none; }
-}

package/dist/components/input.css

@@ -19,6 +19,7 @@
 
 /* ── 单行 ── */
 .input-wrap {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--density-space-xs);
@@ -140,6 +141,7 @@
 
 /* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
 .textarea-wrap {
+  position: relative;
   display: flex;
   width: 100%;
   background: var(--token-control);
@@ -189,7 +191,6 @@
 }
 
 /* 字符计数（behavior 可挂到 .input-wrap 或 .textarea-wrap 内尾部） */
-.input-wrap { position: relative; }
 .input-wrap--has-counter { padding-right: calc(var(--density-space-sm) + 48px); }
 .input-wrap--has-counter .input-counter {
   position: absolute;
@@ -214,7 +215,6 @@
 .input-counter.is-warn { color: var(--token-warning); }
 .input-counter.is-error { color: var(--token-error); font-weight: 600; }
 
-.textarea-wrap { position: relative; }
 .textarea-wrap .textarea { padding-bottom: 24px; }
 
 /* 有计数器时的 textarea 底部留空 */