@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/kb-segment.d.mts

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

package/dist/components/kb-sources.d.mts

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

package/dist/components/kb-sql.d.mts

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

package/dist/components/kb-trace.d.mts

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

package/dist/components/kb-visibility.d.mts

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

package/dist/components/kb-who-can.d.mts

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

package/dist/components/kb.css

@@ -21,37 +21,39 @@
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 10px;
-  min-height: 28px;
+  min-height: var(--icen-density-item-height);
   padding: 2px 8px;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
+  transition: background-color var(--icen-tx-fast);
 }
-.icen-kb-row:hover { background: var(--icen-token-bg-soft); }
+.icen-kb-row:hover { background: var(--icen-token-fill-hover); }
 .icen-kb-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .icen-kb-row-title {
-  font-size: 13px;
+  font-size: var(--icen-density-font-size-md);
   color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.icen-kb-row-sub { font-size: 11.5px; color: var(--icen-token-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.icen-kb-row-sub { font-size: var(--icen-density-font-size-xs); color: var(--icen-token-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .icen-kb-row-side { display: inline-flex; align-items: center; gap: 8px; }
 
 /* 密度：compact 档（管理台/密集列表） */
-[data-icen-density='compact'] .icen-kb-row { min-height: 24px; gap: 8px; }
+[data-icen-density='compact'] .icen-kb-row { min-height: var(--icen-density-item-height); gap: 8px; }
 
 /* 数字与元信息 */
 .icen-kb-num {
   font-family: var(--icen-font-mono);
   font-variant-numeric: tabular-nums;
-  font-size: 12px;
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-muted);
   white-space: nowrap;
 }
 .icen-kb-meta {
   font-family: var(--icen-font-mono);
-  font-size: 11px;
-  letter-spacing: 0.3px;
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.2px;
   color: var(--icen-token-text-faint);
   white-space: nowrap;
   /* nowrap 必须配省略截断（诚实截断纪律）：裸 nowrap 会让长文本横向溢出盖到邻列 */
@@ -61,12 +63,13 @@
 
 /* 状态点（族内状态色的唯一入口） */
 .icen-kb-dot {
-  width: 7px;
-  height: 7px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   flex: 0 0 auto;
   background: var(--icen-token-text-faint);
   opacity: 0.6;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--icen-token-card) 70%, transparent);
 }
 .icen-kb-dot.is-ok { background: var(--icen-token-success); opacity: 1; }
 .icen-kb-dot.is-warn { background: var(--icen-token-warning); opacity: 1; }
@@ -88,16 +91,16 @@
   overflow: hidden;
   min-inline-size: 40px;
 }
-.icen-kb-score-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--icen-token-accent); opacity: 0.75; /* guard:allow-radius 微构件（指示条等图形级，不属容器圆角面） */ }
-.icen-kb-score-value { font-family: var(--icen-font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--icen-token-text-muted); min-inline-size: 34px; text-align: right; /* guard:allow-physical 分数数字右对齐惯例（数字是 LTR 文种，RTL 不镜像） */ }
+.icen-kb-score-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--icen-token-accent-strong); opacity: 0.85; /* guard:allow-radius 微构件（指示条等图形级，不属容器圆角面） */ }
+.icen-kb-score-value { font-family: var(--icen-font-mono); font-variant-numeric: tabular-nums; font-size: var(--icen-density-font-size-xs); color: var(--icen-token-text-muted); min-inline-size: 34px; text-align: right; /* guard:allow-physical 分数数字右对齐惯例（数字是 LTR 文种，RTL 不镜像） */ }
 
 /* 证据引用体（原文摘录、citedText、chunk 预览；证据线沿 inline-start，RTL 镜像） */
 .icen-kb-quote {
   position: relative;
   padding-block: 2px;
   padding-inline-start: 12px;
-  font-size: 12.5px;
-  line-height: 1.7;
+  font-size: var(--icen-density-font-size-md);
+  line-height: 1.75;
   color: var(--icen-token-text-muted);
 }
 .icen-kb-quote::before {
@@ -114,7 +117,9 @@
 .icen-kb-passage-body mark,
 .icen-kb-hit mark {
   background: color-mix(in srgb, var(--icen-token-accent) 18%, transparent);
-  color: inherit;
+  /* 全量正文色：命中片段底色是 muted，inherit 只有 ~3.8-4.2:1（12.5px 低于 AA）；
+     高亮词本就该比环绕文本更醒目而非更淡 */
+  color: var(--icen-token-text);
   border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
   padding: 0 2px;
 }
@@ -129,16 +134,17 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 10.5px;
+  min-height: 22px;
+  padding: 0 7px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1;
-  letter-spacing: 0.3px;
-  color: var(--icen-token-text-faint);
-  border: 1px solid var(--icen-token-line-soft);
+  letter-spacing: .02em;
+  color: var(--icen-token-text-muted);
+  border: 1px solid var(--icen-token-separator-soft);
   border-radius: var(--icen-radius-full);
-  padding: 2.5px 7px;
   white-space: nowrap;
 }
-.icen-kb-badge svg { width: 10px; height: 10px; }
+.icen-kb-badge svg { width: 11px; height: 11px; }
 .icen-kb-badge--official {
   color: var(--icen-token-accent-text);
   border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
@@ -158,13 +164,15 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  min-height: 22px;
+  padding: 0 7px;
   font-family: var(--icen-font-mono);
-  font-size: 11px;
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-muted);
   background: var(--icen-token-bg-soft);
   border: 1px solid var(--icen-token-line-soft);
   border-radius: var(--icen-radius-sm);
-  padding: 2px 7px;
   max-inline-size: 220px;
   white-space: nowrap;
   overflow: hidden;
@@ -177,25 +185,27 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  min-height: 28px;
+  min-height: var(--icen-density-item-height);
   padding: 2px 8px;
   border: none;
   background: none;
   border-radius: var(--icen-radius-sm);
   font: inherit;
-  font-size: 12.5px;
+  font-size: var(--icen-density-font-size-md);
   color: var(--icen-token-text-muted);
   cursor: pointer;
   text-align: start;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.icen-kb-fold-head:hover { color: var(--icen-token-text); background: var(--icen-token-bg-soft); }
-.icen-kb-fold-head:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: -2px; }
+.icen-kb-fold-head:hover { color: var(--icen-token-text); background: var(--icen-token-fill-hover); }
+.icen-kb-fold-head:active { background: var(--icen-token-fill-pressed); }
+.icen-kb-fold-head:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 .icen-kb-fold-caret {
   display: inline-block;
   width: 1em;
   color: var(--icen-token-text-faint);
-  font-size: 10px;
-  transition: transform 0.16s ease-out;
+  font-size: var(--icen-density-font-size-xs);
+  transition: transform var(--icen-tx-fast);
   flex: 0 0 auto;
 }
 .icen-kb-fold-head[aria-expanded='true'] .icen-kb-fold-caret { transform: rotate(90deg); }
@@ -204,12 +214,13 @@
 /* 键位提示（标注队列快捷键等） */
 .icen-kb-key {
   font-family: var(--icen-font-mono);
-  font-size: 10px;
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1;
   color: var(--icen-token-text-faint);
   border: 1px solid var(--icen-token-line-soft);
   border-bottom-width: 2px;
   border-radius: 4px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
-  padding: 1px 5px;
+  padding: 3px 5px;
   background: var(--icen-token-bg-soft);
 }
 
@@ -221,7 +232,8 @@
   gap: 8px;
   padding: 28px 16px;
   color: var(--icen-token-text-faint);
-  font-size: 12.5px;
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.6;
   text-align: center;
 }
 
@@ -230,9 +242,10 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 11.5px;
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
   color: var(--icen-token-text-faint);
-  padding: 4px 8px;
+  padding: 6px 8px;
 }
 .icen-kb-notice svg { width: 12px; height: 12px; flex: 0 0 auto; }
 /* flex 容器内 hidden 会被 display 覆盖——notice 显隐必须显式归零 */
@@ -242,7 +255,8 @@
    三态：pre ✓ 安全基线 / post ⚠ 缺陷层 / none ✕ fail-open 危险——spec §9.0-1/§9.7） */
 .icen-kb-layer-chip {
   font-family: var(--icen-font-mono);
-  font-size: 11px;
+  font-size: var(--icen-density-font-size-xs);
+  min-height: 22px;
   cursor: pointer;
 }
 .icen-kb-layer-chip[data-icen-layer='pre'] { color: var(--icen-token-success); border-color: color-mix(in srgb, var(--icen-token-success) 45%, transparent); }
@@ -256,6 +270,16 @@
   .icen-kb-dot.is-live { animation: none; }
 }
 
+/* 高对比模式：状态与证据结构不能只靠底色差 */
+@media (forced-colors: active) {
+  .icen-kb-dot { border: 1px solid CanvasText; }
+  .icen-kb-badge,
+  .icen-kb-chip,
+  .icen-kb-key { border-color: CanvasText; }
+  .icen-kb-score-bar { border: 1px solid CanvasText; }
+  .icen-kb-quote::before { background: CanvasText; }
+}
+
 /* ── RTL：方向性折叠 caret 镜像（▸ 收起态指向行进方向） ── */
 :is([dir='rtl']) .icen-kb-fold-caret { transform: scaleX(-1); }
 :is([dir='rtl']) .icen-kb-fold-head[aria-expanded='true'] .icen-kb-fold-caret { transform: rotate(90deg) scaleX(-1); }

package/dist/components/kb.d.mts

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

package/dist/components/kbd.d.mts

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

package/dist/components/layout.css

@@ -32,22 +32,22 @@
 .icen-stack--justify-evenly { justify-content: space-evenly; }
 
 /* ── Divider：分隔线 ── */
-.icen-divider { background: var(--icen-token-outline-soft); height: 1px; width: 100%; }
+.icen-divider { background: var(--icen-token-separator-soft); height: 1px; width: 100%; }
 .icen-divider--vertical { width: 1px; height: 100%; align-self: stretch; }
 
-/* ── Surface：卡片容器（默认 inset 阴影 + density-space-lg padding） ── */
+/* ── Surface：卡片容器（默认 hairline 表面，无内阴影） ── */
 .icen-surface {
-  border-radius: var(--icen-radius-lg);
-  background: var(--icen-token-card);
-  border: 1px solid var(--icen-token-outline-soft);
-  box-shadow: var(--icen-token-shadow-inset);
+  border-radius: var(--icen-control-radius-lg);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-separator-soft);
+  box-shadow: none;
   padding: var(--icen-density-space-lg);
 }
 .icen-surface--elevated { box-shadow: var(--icen-token-shadow-card); }
 .icen-surface--overlay {
-  background: var(--icen-token-card-strong);
-  border-color: var(--icen-token-outline);
-  box-shadow: var(--icen-token-shadow-overlay);
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-overlay);
 }
 .icen-surface--p-none { padding: 0; }
 .icen-surface--p-sm { padding: var(--icen-density-space-md); }
@@ -64,7 +64,7 @@
 .icen-text--2xl { font-size: var(--icen-density-font-size-2xl); }
 .icen-text--muted { color: var(--icen-token-text-muted); }
 .icen-text--faint { color: var(--icen-token-text-faint); }
-.icen-text--accent { color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent))); }
+.icen-text--accent { color: var(--icen-token-accent-text); }
 .icen-text--success { color: var(--icen-token-success); }
 .icen-text--warning { color: var(--icen-token-warning); }
 .icen-text--error { color: var(--icen-token-error); }

package/dist/components/layout.d.mts

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

package/dist/components/list.d.mts

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

package/dist/components/material-chinese.css

@@ -2,6 +2,8 @@
 /* 中式 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);
@@ -59,6 +61,14 @@
 @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;

package/dist/components/material-soviet.css

@@ -2,6 +2,8 @@
 /* 苏式 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);
@@ -61,6 +63,14 @@
 @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;

package/dist/components/material.css

@@ -1,17 +1,21 @@
 @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);
@@ -123,23 +127,21 @@
 }
 :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 {
@@ -152,33 +154,74 @@
   -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. */

package/dist/components/media-card.d.mts

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

package/dist/components/media.css

@@ -6,9 +6,7 @@
  * 规格源自 opengal data/display.tsx 的 Avatar、data/cartridge-card.tsx 的 hover overlay、
  * data/exhibit.tsx 的 Carousel 与 Rating。
  *
- * 例外声明（deliberate exception）：carousel-thumbs 隐藏滚动条是有意设计
- * （缩略图条视觉纯净，滚动仍可用）。违反「组件不写滚动条样式」纪律仅此处，
- * 先例参照 scroll-area.css 的尺寸变体。
+ * 滚动条沿用全局策略，缩略图容器可使用 data-icen-scrollbars 局部定制。
  */
 
 /* ══════════════ avatar · 头像 ══════════════ */
@@ -19,8 +17,9 @@
   justify-content: center;
   overflow: hidden;
   border-radius: var(--icen-radius-full);
+  /* 首字母是文字：承文本须用 accent-text 档（accent 亮档只做图形，契约见 design.css） */
   background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text);
   font-weight: 600;
   width: 36px;
   height: 36px;
@@ -104,19 +103,17 @@
 .icen-media-card {
   position: relative;
   overflow: hidden;
-  border-radius: var(--icen-radius-lg);
-  background: var(--icen-token-bg-soft);
+  border-radius: var(--icen-control-radius-lg);
+  background: var(--icen-token-surface-raised);
   transition:
     transform var(--icen-tx-slow),
     box-shadow var(--icen-tx-slow);
 }
-/* hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
+/* hover 只给接触影，不做位移（媒体内容本身已经在动） */
 @media (hover: hover) and (pointer: fine) {
   .icen-media-card:hover {
-    transform: translateY(-6px);
-    box-shadow:
-      var(--icen-token-shadow-overlay),
-      0 0 20px var(--icen-token-accent-glow);
+    transform: none;
+    box-shadow: var(--icen-token-shadow-card);
   }
 }
 .icen-media-card-cover {
@@ -143,15 +140,15 @@
   pointer-events: none;
   /* 下圆角自带：backdrop-filter 在部分 Chromium 不被祖先 overflow+radius 裁切（直角戳出圆角），
      不赌浏览器行为，overlay 底部两角与卡同弧度 */
-  border-end-start-radius: var(--icen-radius-lg);
-  border-end-end-radius: var(--icen-radius-lg);
+  border-end-start-radius: var(--icen-control-radius-lg);
+  border-end-end-radius: var(--icen-control-radius-lg);
 }
 .icen-media-card:hover .icen-media-card-overlay {
   transform: translateY(0);
   transition-delay: var(--media-overlay-delay, 80ms);
 }
 .icen-media-card-overlay-title {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
   margin: 0;
 }
@@ -279,7 +276,7 @@
 .icen-carousel {
   position: relative;
   overflow: hidden;
-  border-radius: var(--icen-radius-lg);
+  border-radius: var(--icen-control-radius-lg);
   background: var(--icen-token-control);
 }
 .icen-carousel-track {
@@ -294,17 +291,17 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: var(--icen-radius-full);
-  background: color-mix(in srgb, var(--icen-token-card) 78%, transparent);
-  border: 1px solid var(--icen-token-outline-soft);
+  background: color-mix(in srgb, var(--icen-token-surface) 88%, transparent);
+  border: 1px solid var(--icen-token-material-edge);
   color: var(--icen-token-text);
   display: flex;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(12px) saturate(1.3);
+  -webkit-backdrop-filter: blur(12px) saturate(1.3);
   box-shadow: var(--icen-token-shadow-card);
   cursor: pointer;
   z-index: 2;
@@ -314,14 +311,14 @@
     opacity var(--icen-tx-fast);
 }
 .icen-carousel-arrow:hover {
-  background: var(--icen-token-card-strong);
+  background: var(--icen-token-surface);
 }
 .icen-carousel-arrow:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring), var(--icen-token-shadow-card);
 }
 .icen-carousel-arrow:active {
-  transform: translateY(-50%) scale(0.95);
+  transform: translateY(-50%) scale(0.96);
 }
 .icen-carousel-arrow:disabled,
 .icen-carousel-arrow[aria-disabled='true'] {
@@ -398,16 +395,14 @@
   transition: width var(--icen-tx-slow);
 }
 
-/* 缩略图导航条（deliberate exception：隐藏滚动条是设计意图，见文件头注释） */
+/* Thumbnail navigation shares the global scrollbar policy. */
 .icen-carousel-thumbs {
   display: flex;
   gap: var(--icen-density-space-xs);
   margin-top: var(--icen-density-space-sm);
   padding: var(--icen-density-space-xs);
   overflow-x: auto;
-  scrollbar-width: none;
 }
-.icen-carousel-thumbs::-webkit-scrollbar { display: none; }
 .icen-carousel-thumb {
   flex-shrink: 0;
   width: 56px;
@@ -450,7 +445,7 @@
 
 /* 渐入动画 */
 .icen-carousel-slide {
-  animation: carousel-slide-fade var(--icen-tx-normal) var(--icen-ease-out);
+  animation: carousel-slide-fade var(--icen-duration-normal) var(--icen-ease-out);
 }
 @keyframes carousel-slide-fade {
   from { opacity: 0.6; }