@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/tag.css

@@ -1,3 +1,4 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: tag（展示标签 / Chip）
  *
@@ -7,30 +8,30 @@
  *            常用于：分类、筛选条件、属性标记、邮件标签、文件 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 class="icen-tag [.icen-tag--sm|.icen-tag--lg] [.is-selected] [.is-disabled]
+ *        [.icen-tag--accent|.icen-tag--success|.icen-tag--warning|.icen-tag--error|.icen-tag--info]">
+ *     <span class="icen-tag-icon">…svg…</span>           <!-- 可选左图标 -->
+ *     <span class="icen-tag-label">标签文本</span>
+ *     <button class="icen-tag-close" type="button" aria-label="移除">×</button>  <!-- 可选 -->
  *   </span>
  *
  *   选中态 .is-selected 由消费方驱动（用于筛选条件等）；
- *   .tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
+ *   .icen-tag-close 点击后消费方决定是否从 DOM 移除本节点（本组件不自动删除）。
  */
 
-.tag {
+.icen-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 0 var(--density-space-sm);
+  padding: 0 var(--icen-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);
+  background: var(--icen-token-fill-hover);
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius-sm);
   font: inherit;
-  font-size: var(--density-font-size-sm);
-  letter-spacing: 0.01em;
+  font-size: var(--icen-font-size-caption);
+  letter-spacing: .01em;
   white-space: nowrap;
   vertical-align: middle;
   transition:
@@ -38,54 +39,54 @@
     border-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.tag:hover {
-  background: var(--token-fill-2);
-  color: var(--token-text);
+.icen-tag:hover {
+  background: var(--icen-token-surface-pressed);
+  color: var(--icen-token-text);
 }
 
 /* 尺寸变体 */
-.tag--sm {
+.icen-tag--sm {
   height: 20px;
   padding: 0 6px;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   gap: 3px;
 }
-.tag--lg {
+.icen-tag--lg {
   height: 28px;
   padding: 0 10px;
-  font-size: var(--density-font-size-md);
+  font-size: var(--icen-density-font-size-md);
   gap: 6px;
 }
 
 /* ── 图标 ── */
-.tag-icon {
+.icen-tag-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--token-text-faint);
+  color: var(--icen-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 {
+.icen-tag-icon svg { width: 12px; height: 12px; }
+.icen-tag--sm .icen-tag-icon svg { width: 10px; height: 10px; }
+.icen-tag--lg .icen-tag-icon svg { width: 14px; height: 14px; }
+.icen-tag-label {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 240px;
 }
 
 /* ── 关闭按钮（消费方点击后自行决定是否从 DOM 移除） ── */
-.tag-close {
+.icen-tag-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   padding: 0;
-  margin-right: -4px;
-  margin-left: 2px;
+  margin-inline-end: -4px;
+  margin-inline-start: 2px;
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: inherit;
   opacity: 0.6;
@@ -93,72 +94,89 @@
   -webkit-tap-highlight-color: transparent;
   transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.tag-close:hover {
+.icen-tag-close:hover {
   opacity: 1;
-  background: color-mix(in srgb, var(--token-text-faint) 22%, transparent);
+  background: color-mix(in srgb, var(--icen-token-text-faint) 22%, transparent);
 }
-.tag-close:focus-visible {
+.icen-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; }
+/* 触屏抬触达面（镜像 pill.css 的 .icen-pill-close 口径；桌面保持 16px 紧凑视觉） */
+@media (pointer: coarse) {
+  .icen-tag-close {
+    min-inline-size: 28px;
+    min-block-size: 28px;
+    opacity: 1;
+  }
+}
+.icen-tag-close svg { width: 10px; height: 10px; }
+.icen-tag--sm .icen-tag-close { width: 14px; height: 14px; margin-inline-end: -2px; }
+.icen-tag--lg .icen-tag-close { width: 18px; height: 18px; margin-inline-end: -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);
+.icen-tag.is-selected {
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
 }
-.tag.is-selected .tag-icon { color: var(--token-accent); }
+.icen-tag.is-selected .icen-tag-icon { color: var(--icen-token-accent-strong); }
 
 /* ── 语义色变体（与 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);
+.icen-tag--accent {
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+}
+.icen-tag--success {
+  background: color-mix(in srgb, var(--icen-token-success) 10%, transparent);
+  color: var(--icen-token-success);
+  border-color: color-mix(in srgb, var(--icen-token-success) 30%, transparent);
+}
+.icen-tag--warning {
+  background: color-mix(in srgb, var(--icen-token-warning) 10%, transparent);
+  color: var(--icen-token-warning);
+  border-color: color-mix(in srgb, var(--icen-token-warning) 30%, transparent);
+}
+.icen-tag--error {
+  background: color-mix(in srgb, var(--icen-token-error) 10%, transparent);
+  color: var(--icen-token-error);
+  border-color: color-mix(in srgb, var(--icen-token-error) 30%, transparent);
+}
+.icen-tag--info {
+  background: color-mix(in srgb, var(--icen-token-info) 10%, transparent);
+  color: var(--icen-token-info);
+  border-color: color-mix(in srgb, var(--icen-token-info) 30%, transparent);
 }
 
 /* ── 禁用态 ── */
-.tag.is-disabled,
-.tag[aria-disabled='true'] {
+.icen-tag.is-disabled,
+.icen-tag[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* ── 可点击（用于可筛选 tag） ── */
-button.tag,
-.tag[role='button'] {
+button.icen-tag,
+.icen-tag[role='button'] {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-.tag:where(button, [role='button']):focus-visible {
+.icen-tag:where(button, [role='button']):focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .tag, .tag-close { transition: none; }
+  .icen-tag, .icen-tag-close { transition: none; }
+}
+
+/* Reveal only the secondary action; its fixed slot keeps the label still. */
+@media (hover: hover) and (pointer: fine) {
+  .icen-tag-close { opacity: 0; transform: scale(.88); transition: opacity var(--icen-tx-fast), transform var(--icen-tx-fast), background-color var(--icen-tx-fast); }
+  .icen-tag:is(:hover,:focus-within) .icen-tag-close { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) { .icen-tag-close { transition: none; transform: none; } }
+
 }

package/dist/components/tag.d.mts

@@ -0,0 +1,2 @@
+// kit: tag 类型面（构建产物，勿手改）
+export {};

package/dist/components/theme-switcher.css

@@ -0,0 +1,105 @@
+@layer icen.components {
+/* Appearance control: .icen-theme-switcher; --xs/--sm/default/--lg sizes.
+ * data-icen-display=icon|color|color-name|name|swatch|swatch-name.
+ * data-icen-layout=inline exposes the same choices as a settings panel.
+ * All rendering is owned by theme-switcher.ts; CSS has no behavior dependency. */
+.icen-theme-switcher {
+  --switcher-height: var(--icen-density-input-height-md);
+  --switcher-font: var(--icen-density-font-size-md);
+  display: inline-flex;
+  max-inline-size: 100%;
+  vertical-align: middle;
+  font-family: var(--icen-font-body);
+  font-size: var(--switcher-font);
+  color: var(--icen-token-text);
+}
+.icen-theme-switcher--xs { --switcher-height: calc(var(--icen-density-input-height-sm) - 4px); --switcher-font: var(--icen-density-font-size-sm); }
+.icen-theme-switcher--sm { --switcher-height: var(--icen-density-input-height-sm); --switcher-font: var(--icen-density-font-size-sm); }
+.icen-theme-switcher--lg { --switcher-height: var(--icen-density-input-height-lg); }
+.icen-theme-switcher-trigger,
+.icen-theme-switcher-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--icen-density-space-sm);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.icen-theme-switcher-trigger { min-block-size: var(--switcher-height); padding: 0 var(--icen-density-space-sm); white-space: nowrap; }
+.icen-theme-switcher-trigger:hover,
+.icen-theme-switcher-option:hover { background: var(--icen-token-surface-hover); border-color: var(--icen-token-line); }
+.icen-theme-switcher-trigger:focus-visible,
+.icen-theme-switcher-option:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; /* 与全局 a:focus-visible / material 系 2px 口径对齐 */ }
+.icen-theme-switcher-trigger[aria-expanded="true"] { border-color: var(--icen-token-accent); }
+.icen-theme-switcher-sample { display: inline-flex; flex: 0 0 auto; inline-size: 40px; block-size: 20px; overflow: hidden; border: 1px solid var(--icen-token-line); border-radius: var(--icen-radius-sm); }
+.icen-theme-switcher-sample i { display: block; flex: 1; }
+.icen-theme-switcher-symbol { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; font-size: 20px; line-height: 1; }
+.icen-theme-switcher[data-icen-display="icon"] .icen-theme-switcher-trigger,
+.icen-theme-switcher[data-icen-display="color"] .icen-theme-switcher-trigger { inline-size: var(--switcher-height); padding: 0; }
+.icen-theme-switcher[data-icen-display="icon"] .icen-theme-switcher-name,
+.icen-theme-switcher[data-icen-display="color"] .icen-theme-switcher-name,
+.icen-theme-switcher[data-icen-display="swatch"] .icen-theme-switcher-name { display: none; }
+.icen-theme-switcher[data-icen-display="name"] .icen-theme-switcher-trigger > .icen-theme-switcher-sample,
+.icen-theme-switcher[data-icen-display="name"] .icen-theme-switcher-trigger > .icen-theme-switcher-symbol { display: none; }
+.icen-theme-switcher:is([data-icen-display="icon"],[data-icen-display="color"],[data-icen-display="color-name"]) .icen-theme-switcher-trigger .icen-theme-switcher-sample { inline-size: 18px; block-size: 18px; border-radius: var(--icen-radius-full); transform: rotate(-35deg); }
+.icen-theme-switcher:is([data-icen-display="icon"],[data-icen-display="color"],[data-icen-display="color-name"]) .icen-theme-switcher-trigger .icen-theme-switcher-sample i:last-child { display: none; }
+.icen-theme-switcher-panel {
+  position: fixed;
+  z-index: var(--icen-z-popover);
+  box-sizing: border-box;
+  padding: var(--icen-density-space-md);
+  overflow: auto;
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  font: var(--icen-density-font-size-sm)/1.5 var(--icen-font-body);
+}
+.icen-theme-switcher-panel[hidden] { display: none; }
+.icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-md); padding-block-start: var(--icen-density-space-md); border-block-start: 1px solid var(--icen-token-separator-soft); }
+.icen-theme-switcher-heading { margin: 0 0 var(--icen-density-space-sm); font-size: var(--icen-font-size-caption); font-weight: 600; letter-spacing: var(--icen-letter-spacing-caption); color: var(--icen-token-text-muted); }
+.icen-theme-switcher-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--icen-density-space-sm); }
+.icen-theme-switcher-option { position: relative; min-block-size: var(--icen-control-height-sm); padding: var(--icen-density-space-sm); }
+.icen-theme-switcher-options--theme .icen-theme-switcher-option { flex-direction: column; align-items: stretch; gap: var(--icen-density-space-sm); text-align: start; }
+.icen-theme-switcher-options--theme .icen-theme-switcher-sample { inline-size: 100%; block-size: 28px; }
+.icen-theme-switcher-option[aria-pressed="true"] { border-color: color-mix(in srgb, var(--icen-token-accent) 32%, var(--icen-token-separator)); background: var(--icen-token-fill-selected); color: var(--icen-token-text); }
+.icen-theme-switcher[data-icen-layout="inline"] { display: block; inline-size: 100%; container: icen-appearance / inline-size; }
+.icen-theme-switcher[data-icen-layout="inline"] > .icen-theme-switcher-panel { position: static; inline-size: 100%; box-shadow: none; background: var(--icen-token-surface); }
+/* Six built-ins form complete rows. Query the host, so sidebars and embedded
+ * settings do not inherit the viewport's column count. */
+@container icen-appearance (min-width: 420px) {
+  .icen-theme-switcher-options--theme { grid-template-columns: repeat(3,minmax(0,1fr)); }
+}
+@container icen-appearance (min-width: 840px) {
+  .icen-theme-switcher-options--theme { grid-template-columns: repeat(6,minmax(0,1fr)); }
+}
+@media (pointer: coarse) {
+  .icen-theme-switcher-trigger { min-block-size: 44px; min-inline-size: 44px; }
+  .icen-theme-switcher-option { min-block-size: 44px; }
+}
+@media (forced-colors: active) {
+  .icen-theme-switcher-option[aria-pressed="true"] { outline: 2px solid Highlight; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-theme-switcher-chevron, .icen-theme-switcher-check, .icen-theme-switcher-trigger, .icen-theme-switcher-option { transition: none; }
+}
+
+/* Compact menu cards keep all three axes visible in ordinary desktop viewports. */
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-sm); padding-block-start: var(--icen-density-space-sm); }
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-options--theme .icen-theme-switcher-option { gap: var(--icen-density-space-xs); }
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-options--theme .icen-theme-switcher-sample { block-size: 24px; }
+
+.icen-theme-switcher-panel[role="dialog"] .icen-theme-switcher-section:has(.icen-theme-switcher-options--mode) .icen-theme-switcher-heading { display: none; }
+
+/* Compatibility with previously authored markup; new renderers omit these slots. */
+.icen-theme-switcher-chevron, .icen-theme-switcher-check { display: none; }
+
+}

package/dist/components/theme-switcher.d.mts

@@ -0,0 +1,2 @@
+// kit: theme-switcher 类型面（构建产物，勿手改）
+export * from '../behaviors/theme-switcher.mjs';

package/dist/components/theme-switcher.mjs

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

package/dist/components/timeline.d.mts

@@ -0,0 +1,2 @@
+// kit: timeline 类型面（构建产物，勿手改）
+export {};