@xihan-ui/styles 1.0.0 → 2.0.0

package/css/accordion.css

@@ -1,3 +1,15 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 accordion 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立；
+   独立皮肤同时传递引入标题栏的动作控件配方，full bundle 递归去重。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='accordion'] {
@@ -5,14 +17,12 @@
   }
 
   [data-scope='accordion'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-text));
+    /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档（§6.5），标题栏上另按家族档取值 */
+    --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这四个私有槽，标题栏从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_accordion-trigger-h: var(--xh-control-h-md);
-    --xh-_accordion-trigger-px: var(--xh-control-px-md);
-    --xh-_accordion-trigger-gap: var(--xh-control-gap-md);
-    --xh-_accordion-trigger-font-size: var(--xh-control-font-md);
+    /* 尺寸档只换正文这两个私有槽，正文从 root 继承它们；标题栏的三档几何由家族 disclosure-trigger 档给 */
+    --xh-_accordion-content-px: var(--xh-space-4);
+    --xh-_accordion-content-pb: var(--xh-space-4);
 
     /* 语气落在展开着的标题上，指示器写在标题里、跟着继承这个色，不另立规则。
        没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
@@ -22,6 +32,7 @@
     display: flex;
     flex-direction: column;
     inline-size: 100%;
+    contain: layout style;
   }
 
   [data-scope='accordion'][data-part='root'][data-orientation='horizontal'] {
@@ -31,20 +42,17 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='accordion'][data-part='root'][data-size='sm'] {
-    --xh-_accordion-trigger-h: var(--xh-control-h-sm);
-    --xh-_accordion-trigger-px: var(--xh-control-px-sm);
-    --xh-_accordion-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_accordion-trigger-font-size: var(--xh-control-font-sm);
+    --xh-_accordion-content-px: var(--xh-space-3);
+    --xh-_accordion-content-pb: var(--xh-space-3);
   }
 
   [data-scope='accordion'][data-part='root'][data-size='lg'] {
-    --xh-_accordion-trigger-h: var(--xh-control-h-lg);
-    --xh-_accordion-trigger-px: var(--xh-control-px-lg);
-    --xh-_accordion-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_accordion-trigger-font-size: var(--xh-control-font-lg);
+    --xh-_accordion-content-px: var(--xh-space-5);
+    --xh-_accordion-content-pb: var(--xh-space-5);
   }
 
   [data-scope='accordion'][data-part='item'] {
+    position: relative;
     min-inline-size: 0;
   }
 
@@ -64,46 +72,109 @@
     border-inline-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-subtle));
   }
 
-  [data-scope='accordion'][data-part='header'] {
+  /* 作者显式渲染的分隔线。渲染了它，上面那条 item + item 的相邻规则就不再命中，
+     两条线不会同时出现 */
+  [data-scope='accordion'][data-part='item-separator'] {
+    flex: none;
+    block-size: var(--xh-stroke-thin);
+    border: 0;
     margin: 0;
-    font: inherit;
+    background: var(--xh-accordion-item-border, var(--xh-border-subtle));
   }
 
-  [data-scope='accordion'][data-part='trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    inline-size: 100%;
-    gap: var(--xh-accordion-trigger-gap, var(--xh-_accordion-trigger-gap));
-    block-size: var(--xh-accordion-trigger-h, var(--xh-_accordion-trigger-h));
-    padding-inline: var(--xh-accordion-trigger-px, var(--xh-_accordion-trigger-px));
-    border: 0;
-    border-radius: var(--xh-accordion-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-accordion-trigger-bg, transparent);
-    color: var(--xh-accordion-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-accordion-trigger-font-size, var(--xh-_accordion-trigger-font-size));
-    font-weight: var(--xh-accordion-trigger-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
+  [data-scope='accordion'][data-part='item-separator'][hidden] {
+    display: none;
   }
 
-  [data-scope='accordion'][data-part='trigger']:hover {
-    background: var(--xh-accordion-trigger-bg-hover, var(--xh-bg-subtle));
+  [data-scope='accordion'][data-part='root'][data-orientation='horizontal']
+    > [data-scope='accordion'][data-part='item-separator'] {
+    block-size: auto;
+    inline-size: var(--xh-stroke-thin);
   }
 
-  [data-scope='accordion'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* —— 形态 —— */
+  /* ghost 档不在这儿：它就是上面那套基础取值，写不写 data-variant 都长一个样 */
+  /* 整份有了一块面，条与条之间就不再靠那条相邻边分开 */
+  [data-scope='accordion'][data-part='root']:is([data-variant='outline'], [data-variant='subtle'])
+    > [data-scope='accordion'][data-part='item']
+    + [data-scope='accordion'][data-part='item'] {
+    border-block-start: 0;
+    border-inline-start: 0;
   }
 
+  /* outline：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）；
+     根的外边走 --xh-accordion-border，与条与条之间的分隔线槽 --xh-accordion-item-border 各管各的 */
+  [data-scope='accordion'][data-part='root'][data-variant='outline'] {
+    border: var(--xh-stroke-thin) solid var(--xh-accordion-border, var(--xh-border-default));
+    border-radius: var(--xh-accordion-item-radius, var(--xh-shape-surface));
+    background: var(--xh-accordion-item-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-accordion-item-shadow, none);
+    overflow: clip;
+  }
+
+  /* subtle：同一块连续表面，底换成淡底，描边让位给底色但留住 1px 边位（三档几何一致）；
+     淡底承载面向标题栏下发 hover 200 → pressed 300（§7.2） */
+  [data-scope='accordion'][data-part='root'][data-variant='subtle'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-accordion-item-radius, var(--xh-shape-surface));
+    background: var(--xh-accordion-item-bg, var(--xh-bg-subtle));
+    box-shadow: var(--xh-accordion-item-shadow, none);
+    overflow: clip;
+  }
+
+  [data-scope='accordion'][data-part='root']:is([data-variant='outline'], [data-variant='subtle'])
+    > [data-scope='accordion'][data-part='item']:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    inset-inline: 3%;
+    inset-block-end: 0;
+    block-size: var(--xh-stroke-thin);
+    background: var(--xh-accordion-item-border, var(--xh-border-subtle));
+    pointer-events: none;
+  }
+
+  [data-scope='accordion'][data-part='header'] {
+    margin: 0;
+    font: inherit;
+  }
+
+  /* 标题栏铺满一行，盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
+     （ghost 形态：白底承载 hover 100 → pressed 200，淡底容器由根下发 host 槽；按下只换面不缩放，§9.2）；
+     这里只把使用者槽映射到桥接槽：字色三态同值（家族的 hover / pressed 字色规则比皮肤更特定，不映射会被换回
+     缺省字色），字形按标题栏自己的档位取 --xh-_action-profile-glyph-size；边归零贴住条目，几何与迁移前一致 */
+  [data-scope='accordion'][data-part='trigger'] {
+    --xh-action-gap: var(--xh-accordion-trigger-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-accordion-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-block: var(--xh-accordion-trigger-py, var(--xh-_action-profile-padding-block));
+    --xh-action-padding-inline: var(--xh-accordion-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-accordion-trigger-radius, var(--xh-_action-profile-radius));
+    --xh-action-bg-rest: var(--xh-accordion-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-accordion-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-fg-rest: var(--xh-accordion-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-accordion-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-accordion-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-font-size: var(--xh-accordion-trigger-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-_action-profile-glyph-size));
+
+    border-width: 0;
+    font-weight: var(--xh-accordion-trigger-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 展开态自带一个槽：与常态共用一个的话，作者一改常态字色，
+     展开那一档的语气高亮就跟着被抹平，再也分不开。悬停 / 按下的面与收起态同档（§7.3 open 与家族 hover 同档中性） */
   [data-scope='accordion'][data-part='trigger'][data-state='open'] {
-    color: var(--xh-accordion-trigger-fg, var(--xh-_accordion-open-fg));
+    --xh-action-fg-rest: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
+    --xh-action-fg-hover: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
+    --xh-action-fg-pressed: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
   }
 
-  /* 禁用条目走 aria-disabled，仍留在 Tab 序里，只是不可操作 */
+  /* 禁用条目走 aria-disabled，仍留在 Tab 序里，只是不可操作；前景换成禁用色，不靠 opacity 压暗
+     （家族按 data-disabled 给禁用面与指针，字色槽在这里保留优先） */
   [data-scope='accordion'][data-part='trigger'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
+    --xh-action-fg-disabled: var(--xh-accordion-trigger-fg-disabled, var(--xh-_action-variant-fg-disabled));
   }
 
   [data-scope='accordion'][data-part='indicator'] {
@@ -111,16 +182,18 @@
     align-items: center;
     justify-content: center;
     flex: none;
+    color: var(--xh-accordion-indicator-fg, var(--xh-fg-muted));
     line-height: var(--xh-leading-none);
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 指示器与正文同档转向（§9.4）：正文 enter 档展开，箭头也用同一段时长翻过去 */
+    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
   [data-scope='accordion'][data-part='indicator']:empty::before {
     content: '';
     display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
     vertical-align: var(--xh-glyph-baseline-shift);
     background-color: currentColor;
     -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
@@ -134,49 +207,32 @@
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='accordion'][data-part='content'] {
+    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    --xh-_disclosure-pb: var(--xh-accordion-content-pb, var(--xh-_accordion-content-pb));
+
     display: grid;
     grid-template-rows: 1fr;
     overflow: clip;
-    padding-block: var(--xh-accordion-content-py, var(--xh-stack-gap-md));
-    padding-inline: var(--xh-accordion-content-px, var(--xh-control-px-md));
-    color: var(--xh-accordion-content-fg, var(--xh-fg-default));
+    padding-block-start: 0;
+    padding-block-end: var(--xh-accordion-content-pb, var(--xh-_accordion-content-pb));
+    padding-inline: var(--xh-accordion-content-px, var(--xh-_accordion-content-px));
+    color: var(--xh-accordion-content-fg, var(--xh-fg-muted));
+    font-size: var(--xh-accordion-content-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
   }
 
+  /* 展开那一档才提前备好行高这条通道：属性随 data-state 一起消失，收起后不长期占着 */
   [data-scope='accordion'][data-part='content'][data-state='open'] {
-    animation: xh-accordion-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    will-change: grid-template-rows;
+    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='accordion'][data-part='content'][data-state='closed'] {
-    animation: xh-accordion-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 }
 
 @layer xihan.motion {
-  /* 行高与内缩同帧动：内缩不归零的话，border-box 会把盒子钳在上下内缩之和上，收不干净 */
-  @keyframes xh-accordion-expand {
-    from {
-      grid-template-rows: 0fr;
-      padding-block: 0;
-    }
-
-    to {
-      grid-template-rows: 1fr;
-      padding-block: var(--xh-accordion-content-py, var(--xh-stack-gap-md));
-    }
-  }
-
-  @keyframes xh-accordion-collapse {
-    from {
-      grid-template-rows: 1fr;
-      padding-block: var(--xh-accordion-content-py, var(--xh-stack-gap-md));
-    }
-
-    to {
-      grid-template-rows: 0fr;
-      padding-block: 0;
-    }
-  }
-
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='accordion'][data-part='root'][hidden],

package/css/affix.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 affix 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='affix'] {
@@ -25,8 +32,16 @@
    * transform / filter / backdrop-filter / contain，包含块就被抢走，钉住的内容立刻贴错位置——
    * 所以别往覆盖钩子里加这几个属性。
    */
-  [data-scope='affix'][data-part='content'][data-affixed] {
+  [data-scope='affix'][data-part='content'][data-fixed] {
     position: fixed;
     z-index: var(--xh-affix-layer, var(--xh-layer-sticky));
   }
+
+  @media print {
+    /* 打印：钉住的是作者自己的内容，不能收起；但保持 fixed 会让部分打印引擎每页重复一次，
+       所以只把它放回正常流。 */
+    [data-scope='affix'][data-part='content'][data-fixed] {
+      position: static;
+    }
+  }
 }

package/css/alert.css

@@ -1,29 +1,34 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 alert 样式。 */
+
+/* Alert 独立皮肤同时传递引入关闭钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='alert'] {
     --xh-alert-skin: 1;
   }
 
+  /* 提示本体是一层中性 surface：边界由 --xh-border-default 描边承担、无影（§5.3 静态反馈面），
+     语气只落到图标与标题，不会用整块彩底抢走正文层级。 */
   [data-scope='alert'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-text));
-
-    /* 底色、描边、图标色一律取语气层派生好的槽：连接层给 alert 兜了 tone=info 的缺省，
-       data-tone 恒在，语气层的槽也就恒被声明。此前这里自己又兑了一遍（12% / 32%），
-       与语气层的公式差一档，图标压上去只有 1.79–2.47 */
-    --xh-_alert-tint: var(--xh-_tone-subtle);
-    --xh-_alert-edge: var(--xh-_tone-border);
+    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档（§6.5） */
+    --xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-md));
 
     display: flex;
-    /* 说明用 flex: 1 1 100% 独占一行，容器不换行的话它只会挤在标题旁边 */
-    flex-wrap: wrap;
     align-items: flex-start;
-    gap: var(--xh-alert-gap, var(--xh-space-3));
-    padding-block: var(--xh-alert-py, var(--xh-space-3));
-    padding-inline: var(--xh-alert-px, var(--xh-space-4));
-    border: var(--xh-stroke-thin) solid var(--xh-alert-border, var(--xh-_alert-edge));
+    gap: var(--xh-alert-gap, var(--xh-space-4));
+    padding-block: var(--xh-alert-py, var(--xh-surface-py-sm));
+    padding-inline: var(--xh-alert-px, var(--xh-surface-px-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-alert-border, var(--xh-border-default));
     border-radius: var(--xh-alert-radius, var(--xh-shape-surface));
-    background: var(--xh-alert-bg, var(--xh-_alert-tint));
+    background: var(--xh-alert-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-alert-shadow, none);
     color: var(--xh-alert-fg, var(--xh-fg-default));
     font-size: var(--xh-alert-font-size, var(--xh-text-body-size));
     line-height: var(--xh-alert-leading, var(--xh-leading-normal));
@@ -35,15 +40,40 @@
     display: none;
   }
 
-  [data-scope='alert'][data-part='icon'] {
+  [data-scope='alert'][data-part='indicator'] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
-    /* 与首行文字对齐：图标框高取一行正文的行高 */
-    block-size: calc(var(--xh-text-body-size) * var(--xh-leading-normal));
-    inline-size: var(--xh-alert-icon-box, var(--xh-control-indicator-size));
-    color: var(--xh-alert-icon-fg, var(--xh-_tone-fg));
+    padding: var(--xh-alert-indicator-p, var(--xh-space-1));
+    color: var(--xh-alert-indicator-fg, var(--xh-_tone-fg));
+  }
+
+  /* 必需的文本列：标题与说明在这里排成一列。 */
+  [data-scope='alert'][data-part='content'] {
+    display: flex;
+    /* 伸缩基准取 0 而不是 auto：取 auto 时基准是这一列的 max-content——
+       一段长说明就能把基准撑到比整行还宽，root 那条换行随即把图标、文本列、叉拆成三行 */
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--xh-alert-content-gap, var(--xh-space-1));
+    min-inline-size: 0;
+  }
+
+  /* 列里的两段文字不再参与 root 那一行的伸缩：宽度由列自己给 */
+  [data-scope='alert'][data-part='content'] [data-part='title'],
+  [data-scope='alert'][data-part='content'] [data-part='description'] {
+    flex: none;
+  }
+
+  /* 操作与关闭入口都留在尾端，不把说明挤到下一行。 */
+  [data-scope='alert'][data-part='action'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    align-self: center;
+    gap: var(--xh-alert-action-gap, var(--xh-space-2));
+    margin-inline-start: auto;
   }
 
   /* 标题与说明摞成一列，占满 root 剩下的横向空间，
@@ -55,15 +85,15 @@
   }
 
   [data-scope='alert'][data-part='title'] {
-    flex: 1 1 auto;
-    color: var(--xh-alert-title-fg, var(--xh-fg-default));
+    flex: none;
+    color: var(--xh-alert-title-fg, var(--xh-_tone-fg));
     font-size: var(--xh-alert-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-alert-title-font-weight, var(--xh-font-weight-semibold));
     line-height: var(--xh-alert-title-leading, var(--xh-leading-tight));
   }
 
   [data-scope='alert'][data-part='description'] {
-    flex: 1 1 100%;
+    flex: none;
     color: var(--xh-alert-description-fg, var(--xh-fg-muted));
     font-size: var(--xh-alert-description-font-size, var(--xh-text-secondary-size));
   }
@@ -73,53 +103,36 @@
     display: none;
   }
 
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由
+     Action Control 的 icon ghost 档给（连接层投 sm：与此前 --xh-control-h-sm 同尺寸），组件只映射既有使用者槽。
+     静息透明；提示本体是白底承载，hover 100 → pressed 200，写了语气时悬停底跟着语气走（--xh-_tone-subtle）。
+     closable=false 时连接层同时给 hidden 与 disabled / data-disabled，家族按后者收掉反馈 */
   [data-scope='alert'][data-part='close-trigger'] {
-    flex: none;
-    /* 前面没有标题时也把叉推到行尾 */
-    margin-inline-start: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-alert-close-size, var(--xh-control-h-sm));
-    inline-size: var(--xh-alert-close-size, var(--xh-control-h-sm));
-    border: 0;
-    border-radius: var(--xh-alert-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-alert-close-fg, var(--xh-fg-muted));
-    /* 按钮不继承字族字号，不接回来的话提示里会突然冒出一段系统 UI 字体 */
-    font: inherit;
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半 */
-  [data-scope='alert'][data-part='close-trigger'][hidden] {
-    display: none;
-  }
-
-  /* 悬停与按下的底色跟着语气走：提示本体已是该语气的淡底，叉的底色在同一色系里再深两档 */
-  [data-scope='alert'][data-part='close-trigger']:hover:not(:disabled) {
-    background: var(--xh-alert-close-bg-hover, var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover)));
-    color: var(--xh-alert-close-fg-hover, var(--xh-fg-default));
-  }
+    --xh-action-visual-size: var(--xh-alert-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-alert-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-alert-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-alert-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-alert-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-alert-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-alert-close-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-alert-close-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    /* 叉的字形按钮档取值（sm → 16px），与 root 上给指示符的 md 档分开 */
+    --xh-icon-size: var(--xh-alert-icon-size, var(--xh-_action-profile-glyph-size));
 
-  [data-scope='alert'][data-part='close-trigger']:active {
-    background: var(--xh-alert-close-bg-active, var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active)));
-    scale: var(--xh-motion-scale-press);
-  }
-
-  [data-scope='alert'][data-part='close-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    flex: none;
+    align-self: center;
+    border-width: 0;
   }
 
-  [data-scope='alert'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半；
+     家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  [data-scope='alert'][data-part='close-trigger'][hidden] {
+    display: none;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
@@ -134,9 +147,43 @@
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
 
+  /*
+   * 打印：底色被丢掉，六档语气那层淡底一起没了，剩下的描边兑了 40% 的底色，在纸上几乎印不出。
+   * 描边换成正文色把这块提示框出来，标题加重一档——纸上分得出「这是一段提示」，
+   * 靠的是框与字重这两条无色通道，不是那层底。
+   * 关闭钮在纸上按不动，一并收起。
+   */
+  @media print {
+    [data-scope='alert'][data-part='root'] {
+      border-color: currentColor;
+    }
+
+    [data-scope='alert'][data-part='title'] {
+      font-weight: var(--xh-font-weight-bold);
+    }
+
+    [data-scope='alert'][data-part='close-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-scope='alert'][data-part='root'] {
+      border-color: CanvasText;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='alert'][data-part='icon'][hidden] {
+  [data-scope='alert'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='alert'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='alert'][data-part='action'][hidden] {
     display: none;
   }
 }