@icen.ai/ui 0.10.0 → 0.11.0

package/dist/tokens.css

@@ -359,6 +359,12 @@
   --icen-token-surface-glass: color-mix(in srgb, var(--icen-token-surface) var(--icen-design-glass-opacity), transparent);
   --icen-token-overlay-bg: var(--icen-token-surface-glass);
   --icen-token-scrollbar-size: 8px;
+  --icen-token-scrollbar-size-sm: 6px;
+  --icen-token-scrollbar-size-lg: 12px;
+  --icen-token-scrollbar-inset: 2px;
+  --icen-token-scrollbar-gutter: auto;
+  --icen-token-scrollbar-idle-delay: 900ms;
+  --icen-token-scrollbar-fade-duration: var(--icen-duration-normal);
   --icen-token-scrollbar-track: transparent;
   --icen-token-scrollbar-thumb: color-mix(in srgb, var(--icen-design-ink) 22%, transparent);
   --icen-token-scrollbar-thumb-hover: color-mix(in srgb, var(--icen-design-ink) 38%, transparent);
@@ -394,6 +400,46 @@
 }
 
 
+/* ── tokens/scrollbars.css ── */
+/* Policy slots inherit across a component subtree; activity never inherits.
+   Without the optional behavior, auto/scroll retain a visible fallback. */
+:where([data-icen-scrollbars-ready]) {
+  --icen-scrollbar-auto-idle: 0%;
+  --icen-scrollbar-idle: var(--icen-scrollbar-auto-idle);
+  --icen-scrollbar-hover: var(--icen-scrollbar-auto-idle);
+}
+:where([data-icen-scrollbars='auto'], [data-icen-scrollbars='scroll']) {
+  --icen-scrollbar-idle: var(--icen-scrollbar-auto-idle, 100%);
+  --icen-scrollbar-hover: 100%;
+  --icen-scrollbar-active: 100%;
+  --icen-scrollbar-width: thin;
+  --icen-scrollbar-webkit-width: auto;
+  --icen-scrollbar-display: block;
+}
+:where([data-icen-scrollbars='scroll']) {
+  --icen-scrollbar-hover: var(--icen-scrollbar-auto-idle, 100%);
+}
+:where([data-icen-scrollbars='visible']) {
+  --icen-scrollbar-idle: 100%;
+  --icen-scrollbar-hover: 100%;
+  --icen-scrollbar-active: 100%;
+  --icen-scrollbar-width: thin;
+  --icen-scrollbar-webkit-width: auto;
+  --icen-scrollbar-display: block;
+}
+:where([data-icen-scrollbars='hidden']) {
+  --icen-scrollbar-idle: 0%;
+  --icen-scrollbar-hover: 0%;
+  --icen-scrollbar-active: 0%;
+  --icen-scrollbar-width: none;
+  --icen-scrollbar-webkit-width: none;
+  --icen-scrollbar-display: none;
+}
+:where([data-icen-scrollbar-gutter='stable']) { --icen-token-scrollbar-gutter: stable; }
+:where([data-icen-scrollbar-gutter='both-edges']) { --icen-token-scrollbar-gutter: stable both-edges; }
+:where([data-icen-scrollbar-gutter='auto']) { --icen-token-scrollbar-gutter: auto; }
+
+
 /* ── tokens/style-profiles.css ── */
 /* Shared fallback defaults. Built-in primitive recipes live in design/pixel/chinese/soviet.css. */
 :root {
@@ -500,64 +546,153 @@ h1, h2, h3, h4, h5, h6 {
 
 
 /* ── tokens/design.css ── */
-/* 现代 primitive: geometry, type, rhythm and lighting. Color palettes live in themes.json. */
+/* 现代 primitive: geometry, type, rhythm and lighting. Color palettes live in themes.json.
+ *
+ * The default primitive describes a precise desktop application surface: compact
+ * controls, restrained type, layered neutral surfaces and short, purposeful
+ * feedback. All values are semantic inputs; components never hardcode them.
+ * Other primitives (chinese / soviet / pixel) override this file's seeds and keep
+ * their own identity, so every rule here remains palette- and primitive-safe.
+ */
 :root {
+  /* ── Control geometry ── */
   --icen-design-radius: 10px;
   --icen-design-space: 4px;
-  --icen-design-control-height: 40px;
-  --icen-design-font-size: 14px;
-  --icen-design-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  --icen-design-glass-blur: 20px;
+  --icen-design-control-height: 34px;
+  --icen-design-font-size: 13px;
+  --icen-design-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
+    'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  --icen-design-glass-blur: 24px;
   --icen-design-motion: 1;
-}
 
-/* Materials and geometry belong to the primitive, across every palette. */
+  /* Semantic aliases consumed by component CSS. The height scale follows the
+   * active density; the aliases exist so components read intent, not arithmetic. */
+  --icen-control-height-sm: var(--icen-density-input-height-sm);
+  --icen-control-height-md: var(--icen-density-input-height-md);
+  --icen-control-height-lg: var(--icen-density-input-height-lg);
+  --icen-control-radius-sm: var(--icen-radius-sm);
+  --icen-control-radius: var(--icen-radius-sm);
+  --icen-control-radius-lg: var(--icen-radius-md);
+  --icen-control-padding-inline-sm: 9px;
+  --icen-control-padding-inline: 12px;
+  --icen-control-padding-inline-lg: 16px;
+  --icen-field-padding-inline: 9px;
+  --icen-field-padding-inline-sm: 8px;
+  --icen-control-gap: 6px;
+  --icen-control-gap-sm: 4px;
+  --icen-control-icon: 15px;
+  --icen-control-border-width: 1px;
+
+  /* Type roles. Sizes stay on the density scale; these aliases name the role. */
+  --icen-font-size-title: var(--icen-density-font-size-lg);
+  --icen-font-size-section: var(--icen-density-font-size-md);
+  --icen-font-size-control: var(--icen-density-font-size-md);
+  --icen-font-size-caption: var(--icen-density-font-size-xs);
+  --icen-font-weight-control: 500;
+  --icen-font-weight-title: 600;
+  --icen-font-weight-label: 500;
+  --icen-letter-spacing-control: -.006em;
+  --icen-letter-spacing-caption: .01em;
+
+  /* Motion: one-shot state changes are short; spatial entrances use the enter
+   * curve. No bouncy physics for ordinary controls. */
+  --icen-duration-fast: calc(110ms * var(--icen-design-motion));
+  --icen-duration-normal: calc(180ms * var(--icen-design-motion));
+  --icen-duration-slow: calc(260ms * var(--icen-design-motion));
+  --icen-ease-out: cubic-bezier(.22, .8, .24, 1);
+  --icen-ease-in: cubic-bezier(.5, 0, .8, .2);
+  --icen-ease-in-out: cubic-bezier(.45, 0, .25, 1);
+  --icen-ease-enter: cubic-bezier(.16, 1, .3, 1);
+  --icen-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --icen-ease-bounce: var(--icen-ease-out);
+  --icen-hover-border: var(--icen-token-line);
+  --icen-hover-border-strong: var(--icen-token-line-strong);
+  --icen-press: scale(.985);
+  --icen-press-soft: none;
+  --icen-disabled-opacity: .45;
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px color-mix(in srgb, var(--icen-token-accent) 62%, transparent);
+  --icen-ring-soft: 0 0 0 3px color-mix(in srgb, var(--icen-token-accent) 18%, transparent);
+  --icen-control-focus-border: color-mix(in srgb, var(--icen-token-accent) 62%, var(--icen-token-line));
+  --icen-control-focus-shadow: inset 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) 8%, transparent), 0 0 0 3px color-mix(in srgb, var(--icen-token-accent) 18%, transparent);
+
+  /* Material motion: chrome and floating surfaces share a blur radius family. */
+  --icen-material-blur-chrome: 18px;
+  --icen-material-blur-floating: 28px;
+  --icen-material-saturate: 1.4;
+}
+
+/* Materials and geometry belong to the primitive, across every palette.
+ * Recompute the whole derived surface at each palette/theme boundary so an
+ * inherited resolved value can never freeze across a theme switch. */
 :root, [data-icen-preset], [data-icen-theme="dark"] {
+  /* Surface hierarchy: canvas → content → chrome → floating → modal. Chrome and
+   * toolbar sit between canvas and content; selected rows are a tinted content
+   * surface, not a second card. */
+  --icen-token-surface-chrome: color-mix(in srgb, var(--icen-design-canvas) 46%, var(--icen-design-surface));
+  --icen-token-surface-toolbar: color-mix(in srgb, var(--icen-design-canvas) 38%, var(--icen-design-surface));
+  --icen-token-surface-sidebar: color-mix(in srgb, var(--icen-design-canvas) 66%, var(--icen-design-surface));
+  --icen-token-surface-content: var(--icen-design-surface);
+  --icen-token-surface-raised: var(--icen-design-raised);
+  --icen-token-surface-pressed: color-mix(in srgb, var(--icen-design-ink) 8%, var(--icen-design-surface));
+  --icen-token-surface-selected: var(--icen-token-accent-subtle);
+
+  /* Interaction fills. Hover is a hint, pressed a physical push, selected a
+   * persistent state; none of them is used as a substitute for another. */
+  --icen-token-fill-hover: color-mix(in srgb, var(--icen-design-ink) 5%, transparent);
+  --icen-token-fill-pressed: color-mix(in srgb, var(--icen-design-ink) 9%, transparent);
+  --icen-token-fill-selected: color-mix(in srgb, var(--icen-design-accent) 13%, transparent);
+  --icen-token-separator-soft: var(--icen-token-line-soft);
+  --icen-token-separator: var(--icen-token-line);
+  --icen-token-separator-strong: var(--icen-token-line-strong);
+  --icen-token-focus-indicator: color-mix(in srgb, var(--icen-token-accent) 62%, transparent);
+  --icen-token-control-border: color-mix(in srgb, var(--icen-design-ink) 19%, transparent);
+  --icen-token-control-border-hover: color-mix(in srgb, var(--icen-design-ink) 28%, transparent);
   --icen-token-surface-glass: color-mix(in srgb, var(--icen-token-surface) var(--icen-design-glass-opacity), transparent);
+  --icen-token-surface-glass-chrome: color-mix(in srgb, var(--icen-token-surface-toolbar) 88%, transparent);
+
   /* Contact, near-field and ambient shadows share a light source. Negative
    * spread keeps the shadow under the object instead of fogging its outline. */
-  --icen-token-shadow-card: 0 1px 2px -1px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 4px 10px -5px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .7), transparent), 0 12px 24px -12px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .5), transparent);
-  --icen-token-shadow-elevated: 0 1px 3px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .75), transparent), 0 8px 20px -8px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 24px 48px -16px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent);
-  --icen-token-shadow-overlay: 0 2px 6px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 16px 36px -12px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.2), transparent), 0 40px 88px -24px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.2), transparent);
+  --icen-token-shadow-card:
+    0 1px 1px -1px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .5), transparent),
+    0 3px 8px -4px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .55), transparent),
+    0 10px 24px -16px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .45), transparent);
+  --icen-token-shadow-elevated:
+    0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .55), transparent),
+    0 8px 20px -8px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .8), transparent),
+    0 26px 52px -22px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent);
+  --icen-token-shadow-overlay:
+    0 2px 6px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .7), transparent),
+    0 16px 36px -12px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.1), transparent),
+    0 44px 88px -28px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.15), transparent);
+  --icen-token-shadow-control:
+    inset 0 1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 55%, transparent),
+    0 1px 1.5px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .38), transparent);
+  --icen-token-shadow-field: inset 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .3), transparent);
   --icen-token-top-highlight: color-mix(in srgb, var(--icen-design-light) var(--icen-design-highlight-strength), transparent);
   --icen-token-shadow-inset: inset 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .35), transparent), inset 0 -1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 45%, transparent);
   --icen-token-shadow-popover: var(--icen-token-shadow-elevated);
   --icen-token-material-edge: color-mix(in srgb, var(--icen-token-text) var(--icen-design-edge-strength), transparent);
   --icen-token-material-light: inset 0 1px 0 var(--icen-token-top-highlight), inset 0 -1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 18%, transparent);
-  --icen-token-scrim: color-mix(in srgb, var(--icen-design-shadow-color) 32%, transparent);
+  --icen-token-scrim: color-mix(in srgb, var(--icen-design-shadow-color) 38%, transparent);
 }
 
 :root {
   --icen-design-light: #ffffff;
-  --icen-radius-xs: max(0px, calc(var(--icen-design-radius) - 6px));
+  --icen-radius-xs: max(0px, calc(var(--icen-design-radius) - 5px));
   --icen-radius-sm: max(0px, calc(var(--icen-design-radius) - 2px));
   --icen-radius-md: var(--icen-design-radius);
-  --icen-radius-lg: calc(var(--icen-design-radius) + 6px);
-  --icen-radius-xl: calc(var(--icen-design-radius) + 14px);
+  --icen-radius-lg: calc(var(--icen-design-radius) + 4px);
+  --icen-radius-xl: calc(var(--icen-design-radius) + 10px);
   --icen-radius-full: 999px;
   --icen-font-body: var(--icen-design-font);
   --icen-font-heading: var(--icen-design-font);
   --icen-font-cjk: var(--icen-design-font);
-  --icen-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+  --icen-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
   --icen-font-mono-paper: var(--icen-font-mono);
-  --icen-line-height-body: 1.55;
+  --icen-line-height-body: 1.5;
   --icen-line-height-heading: 1.25;
   --icen-letter-spacing-body: 0;
-  --icen-letter-spacing-heading: -.02em;
-  --icen-duration-fast: calc(120ms * var(--icen-design-motion));
-  --icen-duration-normal: calc(180ms * var(--icen-design-motion));
-  --icen-duration-slow: calc(260ms * var(--icen-design-motion));
-  --icen-ease-out: cubic-bezier(.16, 1, .3, 1);
-  --icen-ease-bounce: var(--icen-ease-out);
-  --icen-hover-border: var(--icen-token-line);
-  --icen-hover-border-strong: var(--icen-token-line-strong);
-  --icen-press: scale(.985);
-  --icen-press-soft: scale(.99);
-  --icen-disabled-opacity: .48;
-  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
-  --icen-ring-soft: 0 0 0 3px var(--icen-token-accent-subtle);
-  --icen-control-focus-border: var(--icen-token-accent);
-  --icen-control-focus-shadow: var(--icen-token-shadow-inset), var(--icen-ring-soft);
+  --icen-letter-spacing-heading: -.015em;
 }
 
 /* Density changes rhythm and row height, never shrinks reading text. Re-declare
@@ -578,6 +713,12 @@ h1, h2, h3, h4, h5, h6 {
   --icen-density-input-height-sm: max(28px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 8px));
   --icen-density-input-height-md: calc(var(--icen-design-control-height) + var(--icen-design-density-offset));
   --icen-density-input-height-lg: calc(var(--icen-design-control-height) + var(--icen-design-density-offset) + 8px);
+  --icen-density-item-height: max(24px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 6px));
+  /* 控件高度别名必须在密度边界重新声明：只写在 :root 会在根上解析成固定值，
+   * 之后嵌套 [data-icen-density] 覆盖密度时不再联动。 */
+  --icen-control-height-sm: var(--icen-density-input-height-sm);
+  --icen-control-height-md: var(--icen-density-input-height-md);
+  --icen-control-height-lg: var(--icen-density-input-height-lg);
   --icen-density-font-size-2xs: max(12px, calc(var(--icen-design-font-size) - 2px));
   --icen-density-font-size-xs: max(12px, calc(var(--icen-design-font-size) - 2px));
   --icen-density-font-size-sm: max(12px, calc(var(--icen-design-font-size) - 1px));
@@ -585,6 +726,10 @@ h1, h2, h3, h4, h5, h6 {
   --icen-density-font-size-lg: calc(var(--icen-design-font-size) + 2px);
   --icen-density-font-size-xl: calc(var(--icen-design-font-size) + 6px);
   --icen-density-font-size-2xl: calc(var(--icen-design-font-size) + 12px);
+  --icen-font-size-title: var(--icen-density-font-size-lg);
+  --icen-font-size-section: var(--icen-density-font-size-md);
+  --icen-font-size-control: var(--icen-density-font-size-md);
+  --icen-font-size-caption: var(--icen-density-font-size-xs);
 }
 :root[data-icen-density="compact"],
 :root [data-icen-density="compact"] {
@@ -601,6 +746,7 @@ h1, h2, h3, h4, h5, h6 {
     --icen-density-input-height-sm: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 8px));
     --icen-density-input-height-md: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset)));
     --icen-density-input-height-lg: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) + 8px));
+    --icen-density-item-height: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 6px));
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -741,6 +887,9 @@ h1, h2, h3, h4, h5, h6 {
   --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
   --icen-ring-soft: 0 0 0 2px var(--icen-token-accent);
   --icen-control-focus-shadow: 0 0 0 2px var(--icen-token-accent);
+  /* shadow-inset 被本原语置 none，base.css 合成的 error 版会变成非法的「none, …」
+     列表 → 整条 box-shadow 失效：像素原语自持一份硬边错误光环 */
+  --icen-control-error-shadow: 0 0 0 2px var(--icen-token-error);
   --icen-ease-out: steps(1, end);
   --icen-ease-bounce: steps(1, end);
 }
@@ -829,17 +978,21 @@ h1, h2, h3, h4, h5, h6 {
 @layer icen.components {
 /* Material contract (default 现代 primitive; theme via data-icen-preset):
  * <section data-icen-material="content|chrome|floating">arbitrary content</section>
- * content = opaque reading; chrome = translucent navigation; floating = temporary
+ * content = opaque reading; chrome = navigation; floating = temporary
  * operations. HTML primitives need no JS. Existing components consume the same
  * recipes automatically. Force opaque via html[data-icen-transparency="reduced"].
  * This file ships with tokens.css as well as ui.css; kit consumers need no extras.
+ *
+ * 分层登记（guard: tier-direction 文件级白名单）：材料适配是横切层——选中态/磨砂
+ * 配方覆盖 .icen-ai-composer-popup* 与 .icen-kb-checkpoint-menu-item 等 Beta 类名；
+ * Beta 类名变更对本文件仅静默降级，不破坏 Core 用户，故允许 Core 引用 Beta。
  */
 /* The base layer also defines interaction defaults. Keep the primitive's
  * interaction recipe in the components layer so separately imported base.css
  * cannot quietly restore a different press/focus model. */
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) {
   --icen-press: scale(.985);
-  --icen-press-soft: scale(.99);
+  --icen-press-soft: none;
   --icen-hover-border: var(--icen-token-line);
   --icen-hover-border-strong: var(--icen-token-line-strong);
   --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
@@ -951,23 +1104,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 :root .icen-nav { box-shadow: var(--icen-token-material-light); }
 :root .icen-btn {
-  --btn-border-hover: var(--icen-token-line);
-  gap: var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-md);
-  letter-spacing: 0;
+  --btn-border-hover: var(--icen-hover-border);
+  gap: var(--icen-control-gap);
+  border-radius: var(--icen-control-radius);
+  letter-spacing: var(--icen-letter-spacing-control);
 }
 :root .icen-btn-primary { --btn-border-hover: var(--icen-token-accent-strong); }
 :root :is(.icen-btn-ghost,.icen-btn-link) { --btn-border-hover: transparent; }
 :root .icen-btn-link { --btn-fg: var(--icen-token-accent-text); }
-:root .icen-btn-primary:hover:not(:focus-visible) { box-shadow: none; }
-:root .icen-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-icen-disabled]):not(.is-loading) { transform: var(--icen-press-soft); }
-:root .icen-btn-danger:hover { color: var(--icen-token-error); background: var(--icen-token-error-muted); }
-:root .icen-segmented { padding: var(--icen-density-space-xs); gap: var(--icen-density-space-xs); }
-:root .icen-segmented-item { border-radius: max(0px, calc(var(--icen-radius-md) - var(--icen-density-space-xs) - 1px)); }
+:root .icen-btn-danger:hover:not(:disabled) { color: var(--icen-token-error); background: var(--icen-token-error-muted); }
+:root .icen-segmented { padding: 3px; gap: 2px; }
+:root .icen-segmented-item { border-radius: max(0px, calc(var(--icen-radius-md) - 4px)); }
 :root :is(.icen-segmented-item.is-active,.icen-segmented-item[aria-checked="true"],.icen-toggle-group-btn.is-active) {
   background: var(--icen-token-surface);
   color: var(--icen-token-text);
-  box-shadow: var(--icen-token-shadow-card);
+  box-shadow: var(--icen-token-shadow-control);
 }
 :root :is(.icen-menu,.icen-popover,.icen-select-panel) { border-radius: var(--icen-radius-lg); }
 :root .icen-modal {
@@ -980,33 +1131,74 @@ h1, h2, h3, h4, h5, h6 {
   -webkit-backdrop-filter: none;
 }
 :root .icen-card--elevated { box-shadow: var(--icen-token-shadow-card); }
-:root .icen-card--interactive:hover { transform: none; border-color: var(--icen-token-line); }
+:root .icen-card--interactive:hover { transform: none; border-color: var(--icen-token-control-border-hover); }
 :root .icen-card--interactive:focus-within { box-shadow: var(--icen-ring); }
-:root .icen-switch-thumb { background: var(--icen-token-text-muted); }
-:root .icen-switch[aria-checked="true"] .icen-switch-thumb { background: var(--icen-token-on-accent); }
-:root .icen-input-wrap--sm { padding-inline: var(--icen-density-space-sm); }
 /* 现代: small controls have a legible edge and a quiet, tactile surface. Keep
  * these optical refinements local to the default primitive; other primitives
  * supply their own surface physics without fighting a global component rule. */
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:not(.icen-btn-ghost):not(.icen-btn-link) {
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .35), transparent);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--icen-token-top-highlight) 32%, transparent),
+    transparent 52%
+  );
+  box-shadow: var(--icen-token-shadow-control);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn-primary {
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--icen-token-top-highlight) 16%, transparent),
+    transparent 58%
+  );
 }
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:focus-visible {
   box-shadow: var(--icen-ring);
 }
+/* Stable opaque planes keep content readable over any application backdrop. */
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav,.icen-toast,.icen-notification,.icen-chart-tooltip,.icen-back-top,.icen-carousel-arrow) {
+  background: var(--icen-token-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) [data-icen-material="chrome"] {
+  background: var(--icen-token-surface-toolbar);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-nav.is-scrolled {
+  background: var(--icen-token-surface-toolbar);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is(.icen-card-tag,.icen-media-card-overlay,.icen-carousel-dot,.icen-carousel-index,.icen-spinner-overlay) {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-icen-disabled]):not(.is-loading) {
+  background-image: none;
   box-shadow: var(--icen-token-shadow-inset);
 }
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:active:focus-visible {
   box-shadow: var(--icen-token-shadow-inset), var(--icen-ring);
 }
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is(.icen-input-wrap,.icen-textarea-wrap) {
-  padding-inline: var(--icen-density-space-md);
+  padding-inline: var(--icen-field-padding-inline);
+  padding-block: 0;
 }
 :root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is(.icen-input,.icen-textarea)::placeholder {
   color: var(--icen-token-text-faint);
   opacity: 1;
 }
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-segmented {
+  background: var(--icen-token-surface-raised);
+  border-color: var(--icen-token-line-soft);
+  box-shadow: none;
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-segmented-item.is-active,
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-segmented-item[aria-checked="true"] {
+  border: 1px solid color-mix(in srgb, var(--icen-token-line) 72%, transparent);
+  margin: -1px;
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-toggle-group {
+  background: var(--icen-token-surface-raised);
+  border-color: var(--icen-token-line-soft);
+}
 /* Data readability is explicit, never applied to every numeral in prose. */
 :root :is(.icen-numeric,.icen-table,.icen-datatable,.icen-stat-num) { font-variant-numeric: lining-nums tabular-nums; }
 /* Any translucent material has an opaque alternative, including native controls. */
@@ -1103,6 +1295,8 @@ h1, h2, h3, h4, h5, h6 {
 /* 中式 material adapter. DOM contract: html[data-icen-style="chinese"] with
  * existing ICEN components or [data-icen-material="content|chrome|floating"].
  * No additional wrappers, decorative pseudo-elements or JavaScript required.
+ * 分层登记（guard: tier-direction 白名单）：横切材料适配引用 Beta 类名
+ * .icen-ai-composer-popup，理由同 material.css 头注释。
  */
 :root[data-icen-style="chinese"] {
   --icen-press: scale(.995);
@@ -1160,6 +1354,14 @@ h1, h2, h3, h4, h5, h6 {
 @media (prefers-reduced-motion: reduce) {
   :root[data-icen-style="chinese"] { --icen-press: none; --icen-press-soft: none; }
 }
+/* 减少透明偏好：玻璃面回落实底，文字不叠在内容上 */
+@media (prefers-reduced-transparency: reduce) {
+  :root[data-icen-style="chinese"] :is(.icen-card--glass, [data-icen-material="floating"], .icen-command-palette) {
+    background: var(--icen-token-surface-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 @media (forced-colors: active) {
   :root[data-icen-style="chinese"] :is([data-icen-material],.icen-card,.icen-panel,.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-modal,.icen-nav) {
     background: Canvas;
@@ -1174,6 +1376,8 @@ h1, h2, h3, h4, h5, h6 {
 /* 苏式 material adapter. DOM contract: html[data-icen-style="soviet"] with
  * existing ICEN components or [data-icen-material="content|chrome|floating"].
  * Structural emphasis belongs to frame/header/action, not long-form text.
+ * 分层登记（guard: tier-direction 白名单）：横切材料适配引用 Beta 类名
+ * .icen-ai-composer-popup，理由同 material.css 头注释。
  */
 :root[data-icen-style="soviet"] {
   --icen-press: translateY(1px);
@@ -1233,6 +1437,14 @@ h1, h2, h3, h4, h5, h6 {
 @media (prefers-reduced-motion: reduce) {
   :root[data-icen-style="soviet"] { --icen-press: none; --icen-press-soft: none; }
 }
+/* 减少透明偏好：玻璃面回落实底，文字不叠在内容上 */
+@media (prefers-reduced-transparency: reduce) {
+  :root[data-icen-style="soviet"] :is(.icen-card--glass, [data-icen-material="floating"], .icen-command-palette) {
+    background: var(--icen-token-surface-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 @media (forced-colors: active) {
   :root[data-icen-style="soviet"] :is([data-icen-material],.icen-card,.icen-panel,.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-modal,.icen-nav) {
     background: Canvas;
@@ -1265,9 +1477,9 @@ h1, h2, h3, h4, h5, h6 {
   cursor: pointer;
   transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast), transform var(--icen-tx-fast);
 }
-.icen-icon-action:hover { background: var(--icen-token-fill-1); color: var(--icen-token-text); }
-.icen-icon-action:active { transform: scale(.94); }
-.icen-icon-action:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
+.icen-icon-action:hover { background: var(--icen-token-fill-hover); color: var(--icen-token-text); }
+.icen-icon-action:active { background: var(--icen-token-fill-pressed); }
+.icen-icon-action:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 .icen-icon-action:disabled { opacity: var(--icen-disabled-opacity); pointer-events: none; }
 @media (hover: hover) and (pointer: fine) {
   .icen-icon-action[data-icen-reveal] { opacity: 0; }
@@ -1280,7 +1492,6 @@ h1, h2, h3, h4, h5, h6 {
 }
 @media (prefers-reduced-motion: reduce) {
   .icen-icon-action { transition: none; }
-  .icen-icon-action:active { transform: none; }
 }
 
 :root[data-icen-style="pixel"] .icen-symbol { stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
@@ -1312,11 +1523,14 @@ h1, h2, h3, h4, h5, h6 {
 .icen-search-clear > svg { inline-size: 16px; block-size: 16px; pointer-events: none; }
 .icen-search-clear:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-surface-hover);
+  background: var(--icen-token-fill-hover);
+}
+.icen-search-clear:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-search-clear:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 @media (prefers-reduced-motion: reduce) {
   .icen-search-clear { transition: none; }
@@ -1338,13 +1552,22 @@ h1, h2, h3, h4, h5, h6 {
 .icen-suggestion-symbol > svg { inline-size: 16px; block-size: 16px; }
 .icen-suggestion-copy { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
 .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: icen-spin calc(var(--icen-duration-normal) * 4) linear infinite; }
-.icen-suggestion-retry { flex: 0 0 auto; padding-inline: var(--icen-density-space-sm); min-block-size: var(--icen-density-input-height-sm); border: 1px solid var(--icen-token-outline-soft); border-radius: var(--icen-radius-sm); background: var(--icen-token-fill-1); color: var(--icen-token-text); font: inherit; cursor: pointer; }
-.icen-suggestion-retry:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
-@media (hover: hover) and (pointer: fine) { .icen-suggestion-retry:hover { background: var(--icen-token-fill-2); } }
+.icen-suggestion-retry { flex: 0 0 auto; padding-inline: var(--icen-density-space-sm); min-block-size: var(--icen-density-input-height-sm); border: 1px solid var(--icen-token-outline-soft); border-radius: var(--icen-radius-sm); background: var(--icen-token-fill-1); color: var(--icen-token-text); font: inherit; cursor: pointer; transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast); }
+.icen-suggestion-retry:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+@media (hover: hover) and (pointer: fine) { .icen-suggestion-retry:hover { background: var(--icen-token-fill-2); border-color: var(--icen-token-line); } }
 @media (pointer: coarse) { .icen-suggestion-retry { min-inline-size: 44px; min-block-size: 44px; } }
 :root[data-icen-style="pixel"] .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation-timing-function: steps(8,end); }
 @media (prefers-reduced-motion: reduce) { .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: none; } }
 
+@media (forced-colors: active) {
+  .icen-icon-action,
+  .icen-search-clear,
+  .icen-suggestion-retry { border: 1px solid CanvasText; }
+  .icen-icon-action:focus-visible,
+  .icen-search-clear:focus-visible,
+  .icen-suggestion-retry:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; box-shadow: none; }
+}
+
 /*
  * @icen.ai/ui — Component: input（wrapper 式输入框 / 多行 / 搜索）
  * 规格源自 opengal primitives/input.tsx；与 behaviors/input.ts 配套。
@@ -1376,16 +1599,16 @@ h1, h2, h3, h4, h5, h6 {
 .icen-kb-filter-value {
   box-sizing: border-box;
   min-inline-size: 0;
-  block-size: var(--input-height, var(--icen-density-input-height-md));
-  padding: 0 var(--input-padding-inline, var(--icen-density-space-sm));
+  block-size: var(--input-height, var(--icen-control-height-md));
+  padding: 0 var(--input-padding-inline, var(--icen-field-padding-inline));
   font-family: var(--icen-font-body);
-  font-size: var(--input-font-size, var(--icen-density-font-size-md));
-  line-height: 1.5;
+  font-size: var(--input-font-size, var(--icen-font-size-control));
+  line-height: 1.4;
   color: var(--icen-token-text);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
 .icen-input-wrap {
@@ -1396,7 +1619,7 @@ h1, h2, h3, h4, h5, h6 {
   inline-size: 100%;
 }
 :is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):hover {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 :is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):focus-within {
   outline: none;
@@ -1423,13 +1646,13 @@ h1, h2, h3, h4, h5, h6 {
 /* 尺寸变体 */
 .icen-input-wrap--sm, .icen-input-control--sm,
 .icen-kb-input, .icen-kb-retrieval-query, .icen-kb-hittest-input, .icen-kb-filter-field, .icen-kb-filter-value {
-  --input-height: var(--icen-density-input-height-sm);
-  --input-padding-inline: max(8px, calc(var(--icen-density-space-sm) * 1.25));
+  --input-height: var(--icen-control-height-sm);
+  --input-padding-inline: var(--icen-field-padding-inline-sm);
   --input-font-size: var(--icen-density-font-size-sm);
 }
 .icen-input-wrap--lg, .icen-input-control--lg {
-  --input-height: var(--icen-density-input-height-lg);
-  --input-padding-inline: var(--icen-density-space-md);
+  --input-height: var(--icen-control-height-lg);
+  --input-padding-inline: var(--icen-control-padding-inline-lg);
   --input-font-size: var(--icen-density-font-size-lg);
 }
 
@@ -1445,7 +1668,7 @@ h1, h2, h3, h4, h5, h6 {
   font: inherit;
 }
 .icen-input::placeholder {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-faint); /* 全量 faint：60% 混透浅色仅 ~2.4:1 低于 AA（faint 全量 ≥4.9:1） */
 }
 .icen-input:read-only {
   color: var(--icen-token-text-muted);
@@ -1508,7 +1731,7 @@ h1, h2, h3, h4, h5, h6 {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 22px; height: 22px;
+  width: 24px; height: 24px; /* WCAG 2.5.8 下限（22 → 24） */
   padding: 0;
   border: none;
   background: transparent;
@@ -1537,14 +1760,14 @@ h1, h2, h3, h4, h5, h6 {
   display: flex;
   width: 100%;
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
   transition: border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast);
 }
 .icen-textarea-wrap:hover {
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-textarea-wrap:focus-within {
   box-shadow: var(--icen-control-focus-shadow);
@@ -1567,19 +1790,19 @@ h1, h2, h3, h4, h5, h6 {
 
 .icen-textarea {
   width: 100%;
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  padding: var(--icen-density-space-sm) var(--icen-field-padding-inline);
   background: transparent;
   border: none;
   outline: none;
   resize: vertical;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   line-height: 1.5;
-  min-height: calc(3 * 1.5em + 24px);
+  min-height: calc(3 * 1.5em + 22px);
 }
 .icen-textarea::placeholder {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-faint); /* 全量 faint：60% 混透浅色仅 ~2.4:1 低于 AA（faint 全量 ≥4.9:1） */
 }
 
 /* 字符计数（behavior 可挂到 .icen-input-wrap 或 .icen-textarea-wrap 内行内末端） */