@icen.ai/ui 0.2.1 → 0.4.0

package/dist/components/tabs.css

@@ -1,26 +1,113 @@
 /*
- * @icen.ai/ui — Component: tabs（分区导航）
- * .page-tabs > .page-tab（页面内分区，active 加粗）
- * .admin-tabs > a（顶部子导航）
- * 窄屏换行不滚动（overflow 纪律：tab 条永不出现滚动条）。
+ * @icen.ai/ui — Component: tabs（分区导航 / 子导航）
+ *
+ * 完整契约：
+ *   <div class="page-tabs" role="tablist">                       ← 页面内分区
+ *     <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
+ *   </div>
+ *
+ *   <nav class="admin-tabs" role="navigation">                   ← 顶部子导航（a 链接）
+ *     <a class="[.active]" [aria-current="page"] href="…">…</a>
+ *   </nav>
+ *
+ * 与 behaviors/tabs 配套：[data-tabs] > [data-tab] + [data-tab-panel]，行为层维护 aria。
+ * 窄屏换行不滚动（CLAUDE.md 纪律：tab 条永不出现滚动条）。
  */
 
-.page-tabs, .admin-tabs {
-  display: flex; gap: 2px; flex-wrap: wrap;
-  border-bottom: 1px solid var(--token-line-soft); margin-bottom: 26px;
+.page-tabs,
+.admin-tabs {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--token-line-soft);
+  margin-bottom: var(--density-space-lg);
 }
+
 .page-tab {
-  background: none; border: 0; cursor: pointer;
-  padding: 9px 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
-  color: var(--token-text-muted); border-bottom: 2px solid transparent;
-  margin-bottom: -1px; white-space: nowrap;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: var(--density-space-sm) var(--density-space-md);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-md);
+  letter-spacing: 0.05em;
+  color: var(--token-text-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.page-tab:hover {
+  color: var(--token-accent);
+}
+.page-tab:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--icen-ring);
+}
+.page-tab.active,
+.page-tab[aria-selected='true'] {
+  color: var(--token-accent);
+  border-bottom-color: var(--token-accent);
+  font-weight: 700;
 }
-.page-tab:hover { color: var(--token-accent); }
-.page-tab.active { color: var(--token-accent); border-bottom-color: var(--token-accent); font-weight: 700; }
 
 .admin-tabs a {
-  padding: 9px 14px; font-size: 13px; color: var(--token-text-muted);
-  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
+  padding: var(--density-space-sm) var(--density-space-md);
+  font-size: var(--density-font-size-md);
+  color: var(--token-text-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.admin-tabs a:hover {
+  color: var(--token-accent);
+  text-decoration: none;
+}
+.admin-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'] {
+  color: var(--token-accent);
+  border-bottom-color: var(--token-accent);
+}
+
+/* 卡片变体（可选 .page-tabs--cards）：tab 变成 pill，没有底边线 */
+.page-tabs--cards {
+  border-bottom: 0;
+  gap: var(--density-space-xs);
+  margin-bottom: var(--density-space-md);
+}
+.page-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'] {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-accent);
+  font-weight: 500;
+}
+
+/* 等宽变体：tab 平均占满容器 */
+.page-tabs--equal .page-tab,
+.admin-tabs--equal a {
+  flex: 1;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-tab, .admin-tabs a { transition: none; }
 }
-.admin-tabs a:hover { color: var(--token-accent); text-decoration: none; }
-.admin-tabs a.active { color: var(--token-accent); border-bottom-color: var(--token-accent); }

package/dist/components/tabs.mjs

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

package/dist/components/tag-input.css

@@ -2,47 +2,143 @@
  * @icen.ai/ui — Component: tag-input（多值标签编辑）
  * 规格源自 opengal primitives/advanced-input.tsx 的 TagInput；与 behaviors/tag-input.ts 配套。
  *
- * 契约：
- *   <div class="tag-input control" data-tags="初始,标签" data-max="5">
+ * 完整契约：
+ *   <div class="tag-input control [.tag-input--sm|.tag-input--lg] [.is-disabled]"
+ *        data-tags="初始,标签" data-max="5" data-duplicate="false|true">
  *     <input class="tag-input-field" placeholder="…" />
  *   </div>
- * behavior 按 data-tags 渲染 .tag-chip（含 .tag-chip-x 删除钮），并回写 data-tags；
- * 达到 data-max 时容器加 .is-max（warning 色边框）并拒加。
+ *
+ * behavior 渲染：
+ *   - 解析 data-tags → 渲染 .tag-chip（含 .tag-chip-x 删除钮），input 放在末尾
+ *   - 达到 data-max 时容器加 .is-max（warning 色边框）并拒加
+ *   - data-duplicate="false" 时重复值被拒绝（短暂 .is-shake 抖动反馈）
+ *   - 删除钮 Enter/Space 触发，删后 input 自动聚焦
  */
 
 .tag-input {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
-  padding: 6px; min-height: 36px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-xs);
+  min-height: var(--density-input-height-md);
   background: var(--token-control);
   border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-inset);
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.tag-input:hover {
+  border-color: var(--icen-hover-border);
 }
-.tag-input:focus-within { border-color: var(--token-accent); }
-.tag-input.is-max, .tag-input.is-max:focus-within {
+.tag-input:focus-within {
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+.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);
+}
+.tag-input.is-disabled,
+.tag-input[aria-disabled='true'],
+.tag-input[data-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  background: var(--token-bg-soft);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.tag-input.is-disabled { opacity: 0.4; }
 .tag-input.is-disabled .tag-input-field { cursor: not-allowed; }
+.tag-input.is-disabled .tag-chip-x { pointer-events: none; }
+
+.tag-input--sm { min-height: var(--density-input-height-sm); }
+.tag-input--lg { min-height: var(--density-input-height-lg); }
 
 .tag-chip {
-  display: inline-flex; align-items: center; gap: 4px;
-  padding: 2px 4px 2px 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px var(--density-space-xs);
   border-radius: var(--radius-full);
-  background: var(--token-accent-subtle); color: var(--token-accent);
-  font-size: 11px; font-weight: 500;
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-size: var(--density-font-size-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  max-width: 100%;
+  animation: tag-pop var(--icen-tx-fast);
+}
+.tag-chip-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+.tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
+
+@keyframes tag-pop {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tag-chip { animation: none; }
 }
 
 .tag-chip-x {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 2px; border: none; background: transparent; cursor: pointer;
-  border-radius: var(--radius-full); color: inherit; font-size: 11px; line-height: 1;
-  transition: background-color var(--duration-normal) var(--ease-out);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-full);
+  color: inherit;
+  font-size: 11px;
+  line-height: 1;
+  opacity: 0.7;
+  transition:
+    background-color var(--icen-tx-fast),
+    opacity var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.tag-chip-x:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 18%, transparent);
+  color: var(--token-on-accent, #fff);
+}
+.tag-chip-x:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--icen-ring);
 }
-.tag-chip-x:hover { background: var(--token-fill-2); }
+.tag-chip-x svg { width: 10px; height: 10px; }
 
 .tag-input-field {
-  flex: 1; min-width: 80px; padding: 4px;
-  background: transparent; border: none; outline: none;
-  color: var(--token-text); font: inherit; font-size: 12px;
+  flex: 1;
+  min-width: 80px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--token-text);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+}
+.tag-input-field::placeholder {
+  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
+}
+
+/* 重复值抖动反馈（behavior 短暂挂 is-shake） */
+.tag-input.is-shake {
+  animation: tag-shake 0.32s var(--ease-out);
+}
+@keyframes tag-shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-3px); }
+  40%, 80% { transform: translateX(3px); }
 }
-.tag-input-field::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }

package/dist/components/tag-input.mjs

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

package/dist/components/timeline.mjs

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

package/dist/components/toast.css

@@ -1,27 +1,100 @@
 /*
  * @icen.ai/ui — Component: toast（轻提示，与 behaviors/toast 配套）
+ *
  * 容器固定在右下角，左缘 3px 语义色条；滑入动画用 motion token。
+ *
+ * 完整契约：
+ *   <div class="toast-container" role="status" aria-live="polite">
+ *     <div class="toast [ok|err|warn]" role="status|alert">
+ *       <span class="toast-msg">文本</span>
+ *       <button class="toast-action">撤销</button>       ← 可选 action
+ *     </div>
+ *   </div>
+ *
+ * behavior 自动维护 role 与 aria-live。
  */
 
 .toast-container {
-  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
-  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
+  position: fixed;
+  right: var(--density-space-md);
+  bottom: var(--density-space-md);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  align-items: flex-end;
   pointer-events: none;
 }
+
 .toast {
   pointer-events: auto;
-  background: var(--token-surface); color: var(--token-text);
-  border: 1px solid var(--token-line-soft); border-left: 3px solid var(--token-line-strong);
-  border-radius: var(--radius-sm); box-shadow: var(--token-shadow-overlay);
-  padding: 11px 16px; font-size: 13px; max-width: 360px;
-  animation: icen-toast-in var(--duration-slow) var(--ease-out);
-}
-.toast.ok { border-left-color: var(--token-success); }
-.toast.err { border-left-color: var(--token-error); }
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  background: var(--token-surface);
+  color: var(--token-text);
+  border: 1px solid var(--token-line-soft);
+  border-left: 3px solid var(--token-line-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--token-shadow-overlay);
+  padding: var(--density-space-sm) var(--density-space-md);
+  font-size: var(--density-font-size-md);
+  line-height: 1.4;
+  max-width: 380px;
+  animation: icen-toast-in var(--icen-tx-slow);
+}
+
+/* 语义色：左缘 3px 强调 */
+.toast.ok   { border-left-color: var(--token-success); }
+.toast.err  { border-left-color: var(--token-error); }
 .toast.warn { border-left-color: var(--token-warning); }
-.toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
+
+.toast-msg {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.toast-action {
+  flex-shrink: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  color: var(--token-accent);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--icen-tx-fast);
+}
+.toast-action:hover { color: var(--token-accent-deep, var(--token-accent)); }
+.toast-action:focus-visible {
+  outline: none;
+  border-radius: var(--radius-xs);
+  box-shadow: var(--icen-ring);
+}
+
+.toast.leaving {
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity var(--icen-tx-normal),
+    transform var(--icen-tx-normal);
+}
 
 @keyframes icen-toast-in {
   from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 480px) {
+  .toast-container { right: var(--density-space-sm); bottom: var(--density-space-sm); left: var(--density-space-sm); align-items: stretch; }
+  .toast { max-width: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast { animation: none; }
 }

package/dist/components/toast.mjs

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

package/dist/components/tooltip.css

@@ -1,56 +1,116 @@
 /*
  * @icen.ai/ui — Component: tooltip（纯 CSS 气泡提示，无 JS）
- * 契约：任意元素加 data-tooltip="文案"；默认在上方，
- * data-tooltip-side="top|bottom|left|right" 换方向。
- * hover 延迟 400ms 出现，focus-visible 立即出现。
+ *
+ * 完整契约：
+ *   <button data-tooltip="提示文案" data-tooltip-side="top|bottom|left|right" data-tooltip-align="start|center|end">
+ *   多行：data-tooltip-multiline="true" 允许换行（默认 whitespace nowrap 截断）
+ *   无障碍：键盘 :focus-visible 立即出现（无延迟），鼠标 hover 延迟 400ms。
  */
 
 [data-tooltip] { position: relative; }
 
 [data-tooltip]::after {
   content: attr(data-tooltip);
-  position: absolute; z-index: var(--z-tooltip);
-  width: max-content; max-width: min(260px, calc(100vw - 32px));
-  padding: 4px 8px;
-  font-size: 11px; font-weight: 400; line-height: 1.375; white-space: normal; text-align: left;
-  background: var(--token-card-strong); color: var(--token-text);
-  border: 1px solid var(--token-outline-soft);
-  box-shadow: var(--token-shadow-overlay);
-  border-radius: var(--radius-md);
-  opacity: 0; pointer-events: none;
-  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
+  position: absolute;
+  z-index: var(--z-tooltip);
+  width: max-content;
+  max-width: min(260px, calc(100vw - 32px));
+  padding: 4px var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--token-text) 92%, var(--token-bg));
+  color: var(--token-bg);
+  border: 1px solid var(--token-line);
+  box-shadow: var(--token-shadow-elevated);
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--icen-tx-fast),
+    transform var(--icen-tx-fast);
   transition-delay: 400ms;
 
-  /* 默认：上方 */
-  bottom: calc(100% + 4px); left: 50%;
+  /* 默认：上方、水平居中 */
+  bottom: calc(100% + 6px);
+  left: 50%;
   transform: translate(-50%, 4px);
 }
 
+/* 多行模式 */
+[data-tooltip-multiline='true']::after {
+  white-space: normal;
+  max-width: min(320px, calc(100vw - 32px));
+}
+
+/* ── 方向 ── */
 [data-tooltip-side='bottom']::after {
-  bottom: auto; top: calc(100% + 4px); left: 50%;
+  bottom: auto;
+  top: calc(100% + 6px);
+  left: 50%;
   transform: translate(-50%, -4px);
 }
 [data-tooltip-side='left']::after {
-  bottom: auto; top: 50%; left: auto; right: calc(100% + 4px);
+  bottom: auto;
+  top: 50%;
+  left: auto;
+  right: calc(100% + 6px);
   transform: translate(4px, -50%);
 }
 [data-tooltip-side='right']::after {
-  bottom: auto; top: 50%; right: auto; left: calc(100% + 4px);
+  bottom: auto;
+  top: 50%;
+  right: auto;
+  left: calc(100% + 6px);
   transform: translate(-4px, -50%);
 }
 
-[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
-  opacity: 1; transform: translate(-50%, 0);
+/* ── 对齐（仅 top/bottom 方向生效）── */
+[data-tooltip-align='start']::after { left: 0; transform: translate(0, 4px); }
+[data-tooltip-align='end']::after { left: auto; right: 0; transform: translate(0, 4px); }
+[data-tooltip-side='bottom'][data-tooltip-align='start']::after { transform: translate(0, -4px); }
+[data-tooltip-side='bottom'][data-tooltip-align='end']::after { transform: translate(0, -4px); }
+
+/* ── 出现：hover/focus-visible ── */
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
 }
-[data-tooltip-side='bottom']:hover::after, [data-tooltip-side='bottom']:focus-visible::after {
-  opacity: 1; transform: translate(-50%, 0);
+[data-tooltip-side='bottom']:hover::after,
+[data-tooltip-side='bottom']:focus-visible::after {
+  transform: translate(-50%, 0);
 }
-[data-tooltip-side='left']:hover::after, [data-tooltip-side='left']:focus-visible::after {
-  opacity: 1; transform: translate(0, -50%);
+[data-tooltip-side='left']:hover::after,
+[data-tooltip-side='left']:focus-visible::after {
+  transform: translate(0, -50%);
 }
-[data-tooltip-side='right']:hover::after, [data-tooltip-side='right']:focus-visible::after {
-  opacity: 1; transform: translate(0, -50%);
+[data-tooltip-side='right']:hover::after,
+[data-tooltip-side='right']:focus-visible::after {
+  transform: translate(0, -50%);
 }
 
+/* align 起效（覆盖 translateX 的 -50%） */
+[data-tooltip-align='start']:hover::after,
+[data-tooltip-align='start']:focus-visible::after { transform: translate(0, 0); }
+[data-tooltip-align='end']:hover::after,
+[data-tooltip-align='end']:focus-visible::after { transform: translate(0, 0); }
+[data-tooltip-side='bottom'][data-tooltip-align='start']:hover::after,
+[data-tooltip-side='bottom'][data-tooltip-align='start']:focus-visible::after { transform: translate(0, 0); }
+[data-tooltip-side='bottom'][data-tooltip-align='end']:hover::after,
+[data-tooltip-side='bottom'][data-tooltip-align='end']:focus-visible::after { transform: translate(0, 0); }
+
 /* 键盘聚焦立即出现（覆盖 400ms 延迟） */
 [data-tooltip]:focus-visible::after { transition-delay: 0ms; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-tooltip]::after {
+    transition: opacity var(--icen-tx-fast);
+    transform: none !important;
+  }
+  [data-tooltip]:hover::after,
+  [data-tooltip]:focus-visible::after { transform: none !important; }
+}

package/dist/components/tooltip.mjs

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

package/dist/components/tree.mjs

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