@icen.ai/ui 0.9.0 → 0.11.0

package/dist/base.css

@@ -1,7 +1,8 @@
+@layer icen.base {
 /*
  * @icen.ai/ui — Base（元素基线 + 交互基元 + 统一抽象层 + 滚动条）
  *
- * 全部消费 --token-*；任何 preset / 明暗 / style profile 下自洽。
+ * 全部消费 --icen-token-*；任何 preset / 明暗 / style profile 下自洽。
  * 在 tokens 之后、components 之前引入。
  *
  * ════════════════════════════════════════════════════════════════════════
@@ -19,18 +20,18 @@
  *    --icen-tx-fast / -normal / -slow                     ← 统一过渡时长+缓动
  *
  *    组件直接写：
- *      .btn:focus-visible { box-shadow: var(--icen-ring); }
- *      .btn:disabled { opacity: var(--icen-disabled-opacity); }
+ *      .icen-btn:focus-visible { box-shadow: var(--icen-ring); }
+ *      .icen-btn:disabled { opacity: var(--icen-disabled-opacity); }
  *
- *    风格 profile 覆盖原语：
- *      .style-retro { --icen-ring: 2px solid var(--token-accent); --icen-press: translate(2px,2px); }
+ *    原语覆盖反馈配方：
+ *      [data-icen-style="chinese"] { --icen-press: scale(.995); --icen-hover-border: var(--icen-token-line); }
  *
  * ── 层 2：6 个交互基元 class（HTML 显式组合 API）
- *    .pressable / .control / .field / .lift / .surface-elevated / .focus-ring
+ *    .icen-pressable / .icen-control / .icen-field / .icen-lift / .icen-surface-elevated / .icen-focus-ring
  *
  *    用法（任选其一）：
- *      <button class="btn pressable focus-ring">       ← 类组合，体积最小
- *      <button class="btn">                            ← 自洽，CSS 引用同一原语 token
+ *      <button class="icen-btn icen-pressable icen-focus-ring">       ← 类组合，体积最小
+ *      <button class="icen-btn">                            ← 自洽，CSS 引用同一原语 token
  *
  * ── 命名约定（所有组件统一）
  *    根类：       .component
@@ -38,64 +39,66 @@
  *    尺寸：       .component--sm / --lg / --xl
  *    状态：       .is-loading / .is-error / .is-disabled / .is-open / .is-selected /
  *                 .is-focused / .is-active / .is-empty / .is-filled
- *    aria 等价：  [aria-busy=true]↔.is-loading、[data-invalid=true]↔.is-error、
- *                 [aria-disabled=true]/[data-disabled]↔.is-disabled、
+ *    aria 等价：  [aria-busy=true]↔.is-loading、[data-icen-invalid=true]↔.is-error、
+ *                 [aria-disabled=true]/[data-icen-disabled]↔.is-disabled、
  *                 [aria-expanded=true]↔.is-open、[aria-selected=true]/[aria-current=page]↔.is-active
  *
  * ── Token 纪律
- *    颜色：       仅 --token-success / -warning / -error / -info / -accent（语义）
- *    间距：       --density-space-*
- *    字号：       --density-font-size-*
- *    控件高度：   --density-input-height-*
- *    圆角：       --radius-*
- *    阴影：       --token-shadow-*
- *    时长/缓动：  --duration-* / --ease-*（或直接用 --icen-tx-*）
- *    z-index：    --z-*
+ *    颜色：       仅 --icen-token-success / -warning / -error / -info / -accent（语义）
+ *    间距：       --icen-density-space-*
+ *    字号：       --icen-density-font-size-*
+ *    控件高度：   --icen-density-input-height-*
+ *    圆角：       --icen-radius-*
+ *    阴影：       --icen-token-shadow-*
+ *    时长/缓动：  --icen-duration-* / --icen-ease-*（或直接用 --icen-tx-*）
+ *    z-index：    --icen-z-*
  *
  * 暴露的契约：
  *   - 元素基线：box-sizing / body / a / code / pre / img / ::selection
- *   - 滚动条：贴 --token-scrollbar-*（retro profile 另有硬覆盖）
- *   - 工具类：.mono / .serif / .dim / .faint / .numeric / .sr-only / .skip-link
- *   - z-index 标尺：--z-* （浮层一律 portal 到 body）
+ *   - 滚动条：贴 --icen-token-scrollbar-*
+ *   - 工具类：.icen-mono / .icen-serif / .icen-dim / .icen-faint / .icen-numeric / .icen-sr-only / .icen-skip-link
+ *   - z-index 标尺：--icen-z-* （浮层一律 portal 到 body）
  *   - 共享 keyframes：icen-pop-in（弹层进场）/ icen-spin（旋转）/ icen-skeleton-pulse（骨架脉冲）
- *   - 交互基元 class：.pressable / .control / .field / .lift / .surface-elevated / .focus-ring / .motion
- *   - 状态约定：[aria-disabled] / [aria-busy] / [data-loading] / [data-disabled] / [data-invalid]
+ *   - 交互基元 class：.icen-pressable / .icen-control / .icen-field / .icen-lift / .icen-surface-elevated / .icen-focus-ring / .icen-motion
+ *   - 状态约定：[aria-disabled] / [aria-busy] / [data-icen-loading] / [data-icen-disabled] / [data-icen-invalid]
+ *   - 触屏底线：@media (pointer: coarse) 下交互基元与控件目标尺寸 ≥40px
+ *     （min-block/inline-size: max(var(--icen-density-input-height-md), 40px)；WCAG 2.5.5 的工程折中）
+ *   - 悬停守卫：.icen-lift 的 hover 抬升包在 @media (hover: hover) and (pointer: fine)（触屏关闭）
  */
 
 /* ══════════════════════════════════════════════════════════════
    icen 统一抽象层（--icen-* 原语 token）
    ───────────────────────────────────────────────────────────────
    所有组件消费的"原语级"变量：聚焦环、悬停、按下、禁用、过渡。
-   风格 profile（如 .style-retro）只需覆盖这里的少数变量，
-   即可让 56 个组件整体换肤；组件自身无需感知风格切换。
+   原语只需覆盖这里的少数变量即可让组件整体换肤；组件自身无需感知风格切换。
    ══════════════════════════════════════════════════════════════ */
 :root {
   /* ── 聚焦环（focus-visible） ── */
-  --icen-ring: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-accent) 50%, transparent);
-  --icen-ring-soft: 0 0 0 3px color-mix(in srgb, var(--token-accent) 16%, transparent);
-  --icen-ring-error: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-error) 50%, transparent);
-  --icen-ring-success: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-success) 50%, transparent);
-  --icen-ring-warning: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-warning) 50%, transparent);
+  --icen-ring: 0 0 0 2px var(--icen-token-bg), 0 0 0 4px color-mix(in srgb, var(--icen-token-accent) 50%, transparent);
+  --icen-ring-soft: 0 0 0 3px color-mix(in srgb, var(--icen-token-accent) 16%, transparent);
+  --icen-ring-error: 0 0 0 2px var(--icen-token-bg), 0 0 0 4px color-mix(in srgb, var(--icen-token-error) 50%, transparent);
+  --icen-ring-success: 0 0 0 2px var(--icen-token-bg), 0 0 0 4px color-mix(in srgb, var(--icen-token-success) 50%, transparent);
+  --icen-ring-warning: 0 0 0 2px var(--icen-token-bg), 0 0 0 4px color-mix(in srgb, var(--icen-token-warning) 50%, transparent);
   /* inset 聚焦环：空间受限的网格/表头单元格用内阴影聚焦（2px 内描边 + 3px 内光晕） */
-  --icen-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--token-accent) 14%, transparent);
+  --icen-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--icen-token-accent) 50%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
 
   /* ── 悬停 / 按下 / 禁用 ── */
-  --icen-hover-border: color-mix(in srgb, var(--token-accent) 30%, var(--token-line));
-  --icen-hover-border-strong: color-mix(in srgb, var(--token-accent) 55%, var(--token-line));
+  --icen-hover-border: color-mix(in srgb, var(--icen-token-accent) 30%, var(--icen-token-line));
+  --icen-hover-border-strong: color-mix(in srgb, var(--icen-token-accent) 55%, var(--icen-token-line));
   --icen-press: translateY(1px) scale(0.985);
   --icen-press-soft: translateY(1px);
   --icen-disabled-opacity: 0.5;
 
   /* ── 表单控件聚焦（wrapper 视角） ── */
-  --icen-control-focus-shadow: var(--token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --icen-control-focus-border: color-mix(in srgb, var(--token-accent) 55%, var(--token-line));
-  --icen-control-error-shadow: var(--token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--token-error) 16%, transparent);
+  --icen-control-focus-shadow: var(--icen-token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
+  --icen-control-focus-border: color-mix(in srgb, var(--icen-token-accent) 55%, var(--icen-token-line));
+  --icen-control-error-shadow: var(--icen-token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--icen-token-error) 16%, transparent);
 
   /* ── 统一过渡（时长 + 缓动打包） ── */
-  --icen-tx-fast: var(--duration-fast) var(--ease-out);
-  --icen-tx-normal: var(--duration-normal) var(--ease-out);
-  --icen-tx-slow: var(--duration-slow) var(--ease-out);
-  --icen-tx-bounce: var(--duration-normal) var(--ease-bounce);
+  --icen-tx-fast: var(--icen-duration-fast) var(--icen-ease-out);
+  --icen-tx-normal: var(--icen-duration-normal) var(--icen-ease-out);
+  --icen-tx-slow: var(--icen-duration-slow) var(--icen-ease-out);
+  --icen-tx-bounce: var(--icen-duration-normal) var(--icen-ease-bounce);
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -113,11 +116,11 @@ html {
 }
 
 body {
-  background: var(--token-bg);
-  color: var(--token-text);
-  font-family: "Numeric Math", var(--font-body);
+  background: var(--icen-token-bg);
+  color: var(--icen-token-text);
+  font-family: "Numeric Math", var(--icen-font-body);
   font-size: 14px;
-  line-height: var(--line-height-body, 1.6);
+  line-height: var(--icen-line-height-body, 1.6);
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -127,21 +130,21 @@ body {
 }
 
 a {
-  color: var(--token-accent);
+  color: var(--icen-token-accent-text);
   text-decoration: none;
-  transition: color var(--duration-fast) var(--ease-out);
+  transition: color var(--icen-duration-fast) var(--icen-ease-out);
 }
 a:hover { text-decoration: underline; text-underline-offset: 3px; }
 a:focus-visible {
-  outline: 2px solid var(--token-accent);
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 2px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
 }
 
 code, pre {
-  font-family: var(--font-mono);
-  background: var(--token-bg-soft);
-  border-radius: var(--radius-xs);
+  font-family: var(--icen-font-mono);
+  background: var(--icen-token-bg-soft);
+  border-radius: var(--icen-radius-xs);
 }
 code { padding: 1px 5px; }
 pre { padding: 12px 14px; overflow-x: auto; }
@@ -155,65 +158,94 @@ input, button, textarea, select { font: inherit; color: inherit; }
 /* 标题用 heading 栈（typography.css 已声明，这里只兜底防缺字体场景） */
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
-  line-height: var(--line-height-heading, 1.2);
+  line-height: var(--icen-line-height-heading, 1.2);
 }
 
 /* 段落兜底（消费项目可以覆盖） */
 p { margin: 0 0 1em; }
 
-/* 选区：亮色 accent 25%，retro 在 retro-effects.css 里硬覆盖 */
+/* 选区随当前主题强调色变化；深色提高覆盖度。 */
 ::selection {
-  background: color-mix(in srgb, var(--token-accent) 25%, transparent);
+  background: color-mix(in srgb, var(--icen-token-accent) 25%, transparent);
   color: inherit;
 }
-.dark ::selection {
-  background: color-mix(in srgb, var(--token-accent) 35%, transparent);
+[data-icen-theme="dark"] ::selection {
+  background: color-mix(in srgb, var(--icen-token-accent) 35%, transparent);
 }
 
-/* ══════════════════════════════════════════════════════════════
-   全局滚动条：细薄、无上下箭头、贴 token
-   尺寸/轨道/滑块/按钮全部走 --token-scrollbar-*，
-   每个色彩预设可在自己的块里覆盖以表达品牌色差；
-   .style-retro 在 style-profiles.css 里另有像素化硬覆盖。
-   ══════════════════════════════════════════════════════════════ */
-
-::-webkit-scrollbar { width: var(--token-scrollbar-size); height: var(--token-scrollbar-size); }
-::-webkit-scrollbar-track { background: var(--token-scrollbar-track); }
+/* Native scrollbar paint; policy slots live in tokens/scrollbars.css. */
+* {
+  scrollbar-width: var(--icen-scrollbar-width, thin);
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-idle, 100%), transparent) var(--icen-token-scrollbar-track);
+  scrollbar-gutter: var(--icen-token-scrollbar-gutter);
+}
+:where(*:not(html):hover) {
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb-hover) var(--icen-scrollbar-hover, 100%), transparent) var(--icen-token-scrollbar-track);
+}
+:where(*:focus-within, [data-icen-scroll-active]) {
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent) var(--icen-token-scrollbar-track);
+}
+/* Keep native arrows disabled when standard properties would override the skin. */
+@supports selector(::-webkit-scrollbar) {
+  *, :where(*:hover, *:focus-within, [data-icen-scroll-active]) {
+    scrollbar-width: var(--icen-scrollbar-webkit-width, auto);
+    scrollbar-color: auto;
+  }
+}
+::-webkit-scrollbar {
+  width: var(--icen-token-scrollbar-size);
+  height: var(--icen-token-scrollbar-size);
+  display: var(--icen-scrollbar-display, block);
+}
+::-webkit-scrollbar-track { background: var(--icen-token-scrollbar-track); }
 ::-webkit-scrollbar-thumb {
-  background: var(--token-scrollbar-thumb);
-  border-radius: 999px;
-  border: 2px solid transparent;
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-idle, 100%), transparent);
+  border-radius: var(--icen-radius-full);
+  border: var(--icen-token-scrollbar-inset) solid transparent;
   background-clip: padding-box;
+  transition: background-color var(--icen-token-scrollbar-fade-duration) var(--icen-ease-out);
 }
-::-webkit-scrollbar-thumb:hover {
-  background: var(--token-scrollbar-thumb-hover);
-  background-clip: padding-box;
+:where(*:not(html):hover)::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb-hover) var(--icen-scrollbar-hover, 100%), transparent);
+}
+:is(*:focus-within, [data-icen-scroll-active])::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent);
 }
 ::-webkit-scrollbar-button,
 ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
 ::-webkit-scrollbar-corner { background: transparent; }
-html {
-  scrollbar-width: thin;
-  scrollbar-color: var(--token-scrollbar-thumb) var(--token-scrollbar-track);
+@media (prefers-reduced-motion: reduce) {
+  ::-webkit-scrollbar-thumb { transition: none; }
+}
+@media (forced-colors: active) {
+  *, :where(*:hover, *:focus-within, [data-icen-scroll-active]) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  ::-webkit-scrollbar { display: block; }
+  ::-webkit-scrollbar-thumb { background-color: CanvasText; }
 }
 
 /* ══════════════════════════════════════════════════════════════
    通用工具类
    ══════════════════════════════════════════════════════════════ */
 
-.mono { font-family: var(--font-mono); }
-.dim { color: var(--token-text-muted); }
-.faint { color: var(--token-text-faint); }
-.serif { font-family: var(--font-heading); }
+.icen-mono { font-family: var(--icen-font-mono); }
+.icen-dim { color: var(--icen-token-text-muted); }
+.icen-faint { color: var(--icen-token-text-faint); }
+.icen-serif { font-family: var(--icen-font-heading); }
 
 /* 数字密集区：tabular-nums + 数学字体 */
-.numeric {
-  font-family: "Numeric Math", var(--font-mono);
+.icen-numeric {
+  font-family: "Numeric Math", var(--icen-font-mono);
   font-variant-numeric: lining-nums tabular-nums;
 }
 
 /* 无障碍：屏幕阅读器可见、视觉隐藏 */
-.sr-only {
+.icen-sr-only {
   position: absolute;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
@@ -225,23 +257,23 @@ html {
 }
 
 /* 跳转链接：默认视觉隐藏，聚焦时显形（无障碍要求） */
-.skip-link {
+.icen-skip-link {
   position: fixed;
-  top: var(--density-space-sm, 8px);
-  left: var(--density-space-sm, 8px);
-  z-index: var(--z-tooltip);
+  top: var(--icen-density-space-sm, 8px);
+  left: var(--icen-density-space-sm, 8px);
+  z-index: var(--icen-z-tooltip);
   padding: 8px 14px;
-  background: var(--token-surface);
-  color: var(--token-text);
-  border: 1px solid var(--token-line);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--token-shadow-elevated);
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  border: 1px solid var(--icen-token-line);
+  border-radius: var(--icen-radius-sm);
+  box-shadow: var(--icen-token-shadow-elevated);
   transform: translateY(-150%);
-  transition: transform var(--duration-normal) var(--ease-out);
+  transition: transform var(--icen-duration-normal) var(--icen-ease-out);
 }
-.skip-link:focus {
+.icen-skip-link:focus {
   transform: translateY(0);
-  outline: 2px solid var(--token-accent);
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 2px;
 }
 
@@ -257,19 +289,19 @@ html {
      dialog    → 模态对话框 + backdrop
      popover   → 弹出层/下拉菜单（高于 dialog 因为常常 portal 出去）
      tooltip   → 工具提示
-     fx        → 效果层（retro 扫描线/噪点等，永远在最上）
+     fx        → 效果层（永远在最上）
    ══════════════════════════════════════════════════════════════ */
 :root {
-  --z-base: 0;
-  --z-raised: 10;
-  --z-sticky: 50;
-  --z-chrome: 200;
-  --z-toast: 400;
-  --z-banner: 450;
-  --z-dialog: 500;
-  --z-popover: 620;
-  --z-tooltip: 700;
-  --z-fx: 1000;
+  --icen-z-base: 0;
+  --icen-z-raised: 10;
+  --icen-z-sticky: 50;
+  --icen-z-chrome: 200;
+  --icen-z-toast: 560; /* 反馈层必须压过 dialog(500)：模态里触发的 toast 不能被遮罩压住；仍低于 popover/tooltip（瞬态浮层） */
+  --icen-z-banner: 450;
+  --icen-z-dialog: 500;
+  --icen-z-popover: 620;
+  --icen-z-tooltip: 700;
+  --icen-z-fx: 1000;
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -277,16 +309,20 @@ html {
      icen-pop-in         → 弹层进场（scale .96 + translateY -4px）
      icen-spin           → 旋转（spinner / 加载态）
      icen-skeleton-pulse → 骨架脉冲
-   注：menu.css / popover.css 保留自己的 scale(.95)±8px 四方向版
-       （方向语义不同：按 data-side 反向位移），不并入 icen-pop-in。
+   注：menu.css / popover.css 保留自己的 scale(.985)±3px 四方向版
+       （方向语义不同：按 data-icen-side 反向位移），不并入 icen-pop-in。
    ══════════════════════════════════════════════════════════════ */
 @keyframes icen-pop-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 @keyframes icen-spin {
   to { transform: rotate(360deg); }
 }
+@keyframes icen-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
 @keyframes icen-skeleton-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
@@ -295,14 +331,13 @@ html {
 /* ══════════════════════════════════════════════════════════════
    交互基元（全组件地基）
    规格：源 self-contained，命名空间不含 opengal 的 og-/vn- 前缀。
-   style-profiles.css 的 .style-retro 段会按 .pressable/.control/.lift
-   这些类名施加像素化覆盖；改名前请同步修 style-profiles.css。
+   原语通过 --icen-* 反馈变量覆盖这些基元，类名契约保持稳定。
    ══════════════════════════════════════════════════════════════ */
 
-/* ── .pressable — 可按压（按钮、卡片按钮、tag close 等）
+/* ── .icen-pressable — 可按压（按钮、卡片按钮、tag close 等）
    hover：顶部高光 ::after 渐入；focus-visible：同样高光 + 描边
    active：下陷 + 微缩；aria-busy：减淡；disabled / aria-disabled：50% + 禁手势 */
-.pressable {
+.icen-pressable {
   position: relative;
   overflow: hidden;
   will-change: transform;
@@ -314,7 +349,7 @@ html {
     opacity var(--icen-tx-normal),
     transform var(--icen-tx-normal);
 }
-.pressable::after {
+.icen-pressable::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -322,129 +357,136 @@ html {
   opacity: 0;
   pointer-events: none;
   background: linear-gradient(180deg,
-    color-mix(in srgb, var(--token-surface) 24%, transparent),
+    color-mix(in srgb, var(--icen-token-surface) 24%, transparent),
     transparent 46%);
   transition: opacity var(--icen-tx-normal);
 }
-.pressable:hover::after,
-.pressable:focus-visible::after { opacity: 1; }
-.pressable:focus-visible {
+.icen-pressable:hover::after,
+.icen-pressable:focus-visible::after { opacity: 1; }
+.icen-pressable:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.pressable:active {
+.icen-pressable:active {
   transform: var(--icen-press);
 }
-.pressable[aria-busy='true'],
-.pressable[data-loading] {
+.icen-pressable[aria-busy='true'],
+.icen-pressable[data-icen-loading] {
   cursor: progress;
   opacity: 0.7;
   pointer-events: none;
 }
-.pressable:disabled,
-.pressable[aria-disabled='true'],
-.pressable[data-disabled] {
+.icen-pressable:disabled,
+.icen-pressable[aria-disabled='true'],
+.icen-pressable[data-icen-disabled] {
   transform: none;
   opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
-.pressable:disabled::after,
-.pressable[aria-disabled='true']::after,
-.pressable[data-disabled]::after { display: none; }
+.icen-pressable:disabled::after,
+.icen-pressable[aria-disabled='true']::after,
+.icen-pressable[data-icen-disabled]::after { display: none; }
 
-/* ── .control — 表单控件 wrapper 基元（包裹原生 input/textarea/select）
+/* ── .icen-control — 表单控件 wrapper 基元（包裹原生 input/textarea/select）
    hover：边框稍深；focus-within：内嵌阴影 + accent 3px 光晕
-   :invalid / [data-invalid]：error 色边框 + error 色光晕 */
-.control {
+   :invalid / [data-icen-invalid]：error 色边框 + error 色光晕 */
+.icen-control {
   transition: background-color var(--icen-tx-normal),
     border-color var(--icen-tx-normal),
     box-shadow var(--icen-tx-normal);
 }
-.control:hover {
+.icen-control:hover {
   border-color: var(--icen-hover-border);
 }
-.control:focus-within {
+.icen-control:focus-within {
   box-shadow: var(--icen-control-focus-shadow);
   border-color: var(--icen-control-focus-border);
 }
-.control:where(:has(:invalid), [data-invalid='true']) {
-  border-color: var(--token-error);
+.icen-control:where(:has(:invalid), [data-icen-invalid='true']) {
+  border-color: var(--icen-token-error);
 }
-.control:where(:has(:invalid), [data-invalid='true']):focus-within {
+.icen-control:where(:has(:invalid), [data-icen-invalid='true']):focus-within {
   box-shadow: var(--icen-control-error-shadow);
-  border-color: var(--token-error);
+  border-color: var(--icen-token-error);
 }
 /* 内部裸 input/textarea/select 不再有自己的边框/阴影，交给 wrapper 表达 */
-.control > input:not([type='checkbox']):not([type='radio']):not([type='file']),
-.control > textarea,
-.control > select {
+.icen-control > input:not([type='checkbox']):not([type='radio']):not([type='file']),
+.icen-control > textarea,
+.icen-control > select {
   background: transparent;
   border: 0;
   outline: none;
   box-shadow: none;
 }
 
-/* ── .field — 带 label / hint / error 的表单字段容器（取代旧 .vn-editable-field）
+/* ── .icen-field — 带 label / hint / error 的表单字段容器
    契约：
-     <label class="field">
-       <span class="field-label">姓名</span>
-       <span class="control"><input /></span>
-       <span class="field-hint">必填</span>
-       <span class="field-error">错误</span>
+     <label class="icen-field">
+       <span class="icen-field-label">姓名</span>
+       <span class="icen-control"><icen-input /></span>
+       <span class="icen-field-hint">必填</span>
+       <span class="icen-field-error">错误</span>
      </label> */
-.field {
+.icen-field {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
 }
-.field-label {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-field-label {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   letter-spacing: 0.02em;
 }
-.field-hint {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+.icen-field-hint {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.field-error {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-error);
+.icen-field-error {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-error);
 }
-.field[data-invalid='true'] .field-label { color: var(--token-error); }
+.icen-field[data-icen-invalid='true'] .icen-field-label { color: var(--icen-token-error); }
 
-/* ── .lift — 可交互卡片悬停浮起（pressable 的轻量版，无 ::after 高光）
-   hover / focus-within：上移 1px + accent 边 + card 阴影 */
-.lift {
+/* ── .icen-lift — 可交互卡片悬停浮起（pressable 的轻量版，无 ::after 高光）
+   hover：仅在可悬停设备生效（触屏关闭抬升，AGENTS 动效守卫）；
+   focus-within：全设备生效（键盘/触屏焦点同样给浮起反馈） */
+.icen-lift {
   transition: border-color var(--icen-tx-slow),
     box-shadow var(--icen-tx-slow),
     transform var(--icen-tx-slow);
 }
-.lift:hover,
-.lift:focus-within {
+@media (hover: hover) and (pointer: fine) {
+  .icen-lift:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--icen-token-accent) 26%, var(--icen-token-outline-soft));
+    box-shadow: var(--icen-token-shadow-card);
+  }
+}
+.icen-lift:focus-within {
   transform: translateY(-1px);
-  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
-  box-shadow: var(--token-shadow-card);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 26%, var(--icen-token-outline-soft));
+  box-shadow: var(--icen-token-shadow-card);
 }
 
-/* ── .surface-elevated — 提升的静态表面（非交互卡片）
+/* ── .icen-surface-elevated — 提升的静态表面（非交互卡片）
    用于不需要 hover 反馈但需要脱离背景的面板/对话框内嵌区域 */
-.surface-elevated {
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-card);
+.icen-surface-elevated {
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-card);
 }
 
-/* ── .focus-ring — 显式聚焦环工具类（ring-2 + offset-1 等价） */
-.focus-ring:focus-visible {
+/* ── .icen-focus-ring — 显式聚焦环工具类（ring-2 + offset-1 等价） */
+.icen-focus-ring:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
-/* ── .motion — 显式动画工具类（仅在 prefers-reduced-motion: no-preference 时生效） */
+/* ── .icen-motion — 显式动画工具类（仅在 prefers-reduced-motion: no-preference 时生效） */
 @media (prefers-reduced-motion: no-preference) {
-  .motion { transition: all var(--icen-tx-normal); }
+  .icen-motion { transition: all var(--icen-tx-normal); }
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -454,43 +496,71 @@ html {
 /* reduced-motion：所有动画/过渡压缩到 ~0ms（保留可访问性最小可视信号） */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */
+    animation-iteration-count: 1 !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */
+    transition-duration: 0.01ms !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */
+    scroll-behavior: auto !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */
   }
 }
 
-/* 触屏设备（无精细指针）：关闭 hover 抬升、压低 pressable scale */
+/* 触屏设备（无精细指针）：压低 pressable 按下形变（hover 抬升已由 hover 守卫关闭） */
 @media (pointer: coarse) {
-  .lift:hover { transform: none; }
-  .pressable:active { transform: translateY(0) scale(0.99); }
+  .icen-pressable:active { transform: translateY(0) scale(0.99); }
 }
 
 /* 高对比度模式（Windows High Contrast / 强制 colors） */
 @media (forced-colors: active) {
-  .pressable, .control, .lift, .surface-elevated, .focus-ring:focus-visible {
+  .icen-pressable, .icen-control, .icen-lift, .icen-surface-elevated, .icen-focus-ring:focus-visible {
     forced-color-adjust: none;
   }
-  .focus-ring:focus-visible,
-  .pressable:focus-visible {
+  .icen-focus-ring:focus-visible,
+  .icen-pressable:focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
+  /* 强制颜色会丢弃 box-shadow——本库多数焦点环正是 box-shadow(var(--icen-ring))。
+     组件普遍以 outline:none 关闭了默认焦点，所以这里必须提权兜底：
+     所有原生可聚焦元素在强制颜色下都拿到系统焦点框。 */
+  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
+    outline: 2px solid Highlight !important; /* guard:allow-important 高对比模式焦点兜底：组件 outline:none 会吞掉默认焦点 */
+    outline-offset: 2px !important; /* guard:allow-important 高对比模式焦点兜底：组件 outline:none 会吞掉默认焦点 */
+  }
 }
 
 /* 打印：去掉阴影/背景/动效，节约墨水并避免打印截断 */
 @media print {
   *, *::before, *::after {
-    background: transparent !important;
-    color: #000 !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
+    background: transparent !important; /* guard:allow-important 打印样式需确定性覆盖 */
+    color: #000 !important; /* guard:allow-important 打印样式需确定性覆盖 */
+    box-shadow: none !important; /* guard:allow-important 打印样式需确定性覆盖 */
+    text-shadow: none !important; /* guard:allow-important 打印样式需确定性覆盖 */
   }
   body { font-size: 12pt; line-height: 1.4; }
   a, a:visited { text-decoration: underline; }
   a[href]::after { content: ' (' attr(href) ')'; font-size: 90%; }
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
   h1, h2, h3 { page-break-after: avoid; }
-  .pressable, .lift, .surface-elevated { box-shadow: none !important; transform: none !important; }
+  .icen-pressable, .icen-lift, .icen-surface-elevated { box-shadow: none !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */ transform: none !important; }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   触屏目标尺寸底线（@media pointer: coarse）
+   ───────────────────────────────────────────────────────────────
+   交互基元与控件的可点区域在触屏下抬到 ≥40px：WCAG 2.5.5（Target
+   Size AAA 44px）的工程折中。用 max() 保住密度 token 的调节权——
+   密度档高于 40px 时仍按 token 走；逻辑属性形态（block/inline）
+   与全库书写方向自洽。块与内联同时给底线（方形命中区）。
+   ══════════════════════════════════════════════════════════════ */
+@media (pointer: coarse) {
+  .icen-pressable,
+  .icen-control,
+  .icen-field,
+  .icen-lift,
+  button.icen-btn,
+  a[role='button'] {
+    min-block-size: max(var(--icen-density-input-height-md), 40px);
+    min-inline-size: max(var(--icen-density-input-height-md), 40px);
+  }
+}
+
 }