@xihan-ui/styles 1.0.0 → 2.0.0

package/css/toast.css

@@ -1,34 +1,57 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 toast 样式。 */
+
+/* Toast 独立皮肤同时传递引入操作 / 关闭钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.motion {
-  /*
-   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向就得从摞的
-   * data-placement 反向选到条子上，落位一改名整条动效静默失效。
-   * 竖向一小段位移在九个位上都说得通。
-   */
+  /* 新条目从视口边缘外进入，同时落到自己的折叠层级。 */
   @keyframes xh-toast-in {
     from {
       opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-enter);
+      transform: translateY(calc(var(--xh-toast-dir, 1) * (var(--xh-toast-offset-collapsed, 0px) - 100%)))
+        scale(var(--xh-toast-scale-collapsed, 1));
     }
 
     to {
       opacity: 1;
-      translate: 0 0;
-      scale: 1;
+      transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-offset-collapsed, 0px)))
+        scale(var(--xh-toast-scale-collapsed, 1));
+    }
+  }
+
+  @keyframes xh-toast-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  /* 倒计时条：从占满一整条收到零。走一遍就到头，时长由连接层写进时长槽 */
+  @keyframes xh-countdown {
+    from {
+      inline-size: 100%;
+    }
+
+    to {
+      inline-size: 0%;
     }
   }
 
   @keyframes xh-toast-out {
     from {
       opacity: 1;
-      translate: 0 0;
-      scale: 1;
+      transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-y, 0px)))
+        scale(var(--xh-toast-scale, 1));
     }
 
     to {
       opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-enter);
+      transform: translateY(calc(var(--xh-toast-dir, 1) * (var(--xh-toast-y, 0px) - 100%)))
+        scale(var(--xh-toast-scale, 1));
     }
   }
 }
@@ -39,29 +62,13 @@
     --xh-toast-skin: 1;
   }
 
-  /*
-   * 一摞 = 一整面视口大小的定位面：贴边靠 padding，落位靠 justify/align 表达。
-   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
-   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
-   * 还得再配一次 translate，方向一变就错。
-   * 摞由全局服务渲染，没有对应的容器组件——一次操作的反馈落在哪儿是整个服务的口径。
-   */
+  /* 固定宽度的堆叠定位面；每条 Toast 在其中绝对定位。 */
   [data-scope='toast'][data-part='group'] {
     position: fixed;
-    inset-block: 0;
-    inset-inline: 0;
     z-index: var(--xh-toast-layer, var(--xh-layer-toast));
-    display: flex;
-    flex-direction: column;
-    /* 基线按默认落位 top 写，下面只覆盖跟它不同的那几个位 */
-    justify-content: flex-start;
-    align-items: center;
-    padding-block: var(--xh-toast-inset, var(--xh-space-6));
-    padding-inline: var(--xh-toast-inset, var(--xh-space-6));
-    /* 摞内间距由服务写进内联 style，这里绝不重复写：
-       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
-    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有条子吃（见下），
-       否则底下的页面就再也点不动了 */
+    display: block;
+    inline-size: min(var(--xh-toast-inline-size, 28.75rem), calc(100vw - var(--xh-space-8)));
+    block-size: 0;
     pointer-events: none;
   }
 
@@ -69,61 +76,86 @@
     display: none;
   }
 
-  /* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
-  [data-scope='toast'][data-part='group'][data-placement^='middle'] {
-    justify-content: center;
+  [data-scope='toast'][data-part='group'][data-placement='bottom'] {
+    inset-block-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
+    inset-inline-start: 50%;
+    translate: -50% 0;
   }
 
-  [data-scope='toast'][data-part='group'][data-placement^='bottom'] {
-    justify-content: flex-end;
+  [data-scope='toast'][data-part='group'][data-placement='top'] {
+    inset-block-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-top));
+    inset-inline-start: 50%;
+    translate: -50% 0;
   }
 
-  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
   [data-scope='toast'][data-part='group'][data-placement$='-start'] {
-    align-items: flex-start;
+    inset-inline-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-left));
   }
 
   [data-scope='toast'][data-part='group'][data-placement$='-end'] {
-    align-items: flex-end;
+    inset-inline-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-right));
   }
 
-  /*
-   * 一条轻提示是「一句话 + 一枚状态字形」，横排一行、贴着文字收缩。
-   * 语气由淡底、描边与字形三者一起承载，正文留中性——正文也跟着兑成语气色的话，
-   * 绿字压在绿底上，对比度是整条里最差的那一处。
-   */
+  [data-scope='toast'][data-part='group'][data-placement^='bottom'][data-placement$='-start'],
+  [data-scope='toast'][data-part='group'][data-placement^='bottom'][data-placement$='-end'] {
+    inset-block-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
+  }
+
+  [data-scope='toast'][data-part='group'][data-placement^='top'][data-placement$='-start'],
+  [data-scope='toast'][data-part='group'][data-placement^='top'][data-placement$='-end'] {
+    inset-block-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-top));
+  }
+
+  /* 中性浮层承载整条反馈，语气只落到状态字形和标题。
+     面走 sheet 三件套（§8.4：--xh-material-elevated-bg / -border / -shadow，亮暗两档同有 1px 描边）。 */
   [data-scope='toast'][data-part='root'] {
-    /* 状态字形按控件指示符那一档走，与 alert 的图标框同一把尺 */
-    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-control-indicator-size));
+    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档（§6.5） */
+    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-md));
 
-    /* 底与描边取语气层派生好的槽，不在这儿自己再兑一遍：
-       兑法差一档，字形压上去的对比度就跟着差一档（alert 踩过这个坑） */
-    --xh-_toast-tint: var(--xh-_tone-subtle);
-    --xh-_toast-edge: var(--xh-_tone-border);
+    --xh-toast-y: var(--xh-toast-offset-collapsed, 0px);
+    --xh-toast-scale: var(--xh-toast-scale-collapsed, 1);
 
+    position: relative;
     display: flex;
-    align-items: center;
-    gap: var(--xh-toast-gap, var(--xh-control-gap-md));
-    /* 收缩包裹：一句「已保存」撑成定宽方块，右边那片空白会让它读起来像一张公告卡 */
-    inline-size: var(--xh-toast-w, auto);
-    /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
-       窄屏上不必再算一遍 viewport 减法；再叠一道绝对上限，免得一条长文案铺成横幅 */
-    max-inline-size: min(var(--xh-overlay-max-w-xl), 100%);
-    /* 纵内衬取控件档而不是面档：面档（12px）叠上 21px 行盒与两道细边就是 47px 高，
-       那是卡片的体量；控件档（8px）落在 39px，与短消息该有的高度一致
-       （带叉 42px、带操作钮 46px，那两档本就不是默认排版） */
-    padding-block: var(--xh-toast-py, var(--xh-field-py));
-    padding-inline: var(--xh-toast-px, var(--xh-surface-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-_toast-edge));
-    border-radius: var(--xh-toast-radius, var(--xh-shape-surface));
-    background: var(--xh-toast-bg, var(--xh-_toast-tint));
-    color: var(--xh-toast-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-toast-shadow, var(--xh-elevation-sheet));
-    font-size: var(--xh-toast-font-size, var(--xh-text-body-size));
+    flex: none;
+    align-items: flex-start;
+    gap: var(--xh-toast-gap, var(--xh-space-1_5));
+    inline-size: min(var(--xh-toast-inline-size, 28.75rem), 100%);
+    padding-block: var(--xh-toast-py, var(--xh-space-3));
+    padding-inline: var(--xh-toast-px, var(--xh-space-4));
+    border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-material-elevated-border));
+    border-radius: var(--xh-toast-radius, var(--xh-shape-overlay));
+    background: var(--xh-toast-bg, var(--xh-material-elevated-bg));
+    color: var(--xh-toast-fg, var(--xh-material-elevated-fg));
+    box-shadow: var(--xh-toast-shadow, var(--xh-material-elevated-shadow));
+    font-size: var(--xh-toast-font-size, var(--xh-text-label-size));
     line-height: var(--xh-toast-leading, var(--xh-text-body-leading));
     /* 摞的定位面整面铺开且不吃指针，条子必须自己吃回来：
        悬停按住计时、按钮可点、焦点进出，全指着这一条 */
     pointer-events: auto;
+    transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-y))) scale(var(--xh-toast-scale));
+    transform-origin: bottom center;
+    transition:
+      transform var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='toast'][data-part='group'] [data-scope='toast'][data-part='root'] {
+    position: absolute;
+    inset-inline: 0;
+    inline-size: 100%;
+  }
+
+  [data-scope='toast'][data-part='root'][data-placement^='bottom'] {
+    --xh-toast-dir: -1;
+    inset-block-end: 0;
+  }
+
+  [data-scope='toast'][data-part='root'][data-placement^='top'] {
+    --xh-toast-dir: 1;
+    inset-block-start: 0;
+    transform-origin: top center;
   }
 
   /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
@@ -134,126 +166,305 @@
 
   /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
   [data-scope='toast'][data-part='root'][data-state='visible'] {
-    animation: xh-toast-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-toast-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded]) {
+    block-size: var(--xh-toast-front-height, auto);
+    overflow: hidden;
+  }
+
+  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded])
+  > :not([data-part='close-trigger']) {
+    opacity: 0;
   }
 
-  /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
+  [data-scope='toast'][data-part='root'][data-expanded] {
+    --xh-toast-y: var(--xh-toast-offset-expanded, 0px);
+    --xh-toast-scale: 1;
+    block-size: var(--xh-toast-height, auto);
+  }
+
+  [data-scope='toast'][data-part='root'] > :not([data-part='close-trigger']) {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* forwards 不能省：退场窗口（removeDelay 默认 300ms）比退场动画长，
      不定住末帧的话动画跑完会弹回全不透明，条子在被收起前先闪一下 */
   [data-scope='toast'][data-part='root'][data-state='dismissing'] {
     animation: xh-toast-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  [data-scope='toast'][data-part='title'] {
-    /* 作者可能把它写成 h2/p，外边距得先归零，否则条子内的行距对不上 */
-    margin: 0;
-    /* 吃掉剩余宽度，把操作钮与叉推到行尾；min-inline-size 让它在撞上宽度上限时能换行，
-       flex 项的 min-width 默认是 auto，不归零的话长文案会把条子顶出上限 */
+  /*
+   * 语气的非颜色通道。行首字形按 data-tone 区分信息、成功、警告与失败；加载中另由 data-loading 说，
+   * 字形换成转圈但配色仍照语气走。
+   * 作者未渲染 indicator 时由 root 的伪元素补上。
+   */
+  [data-scope='toast'][data-part='root']::before {
+    content: '';
+    flex: none;
+    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));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: var(--xh-toast-icon-fg, var(--xh-_tone-fg));
+    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+  }
+
+  [data-scope='toast'][data-part='root'][data-tone='success']::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  [data-scope='toast'][data-part='root'][data-tone='warning']::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  [data-scope='toast'][data-part='root'][data-tone='danger']::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* 加载中不是语气：只换字形，颜色沿用当前语气的前景档；写在四档语气之后，转圈压过它们 */
+  [data-scope='toast'][data-part='root'][data-loading]::before {
+    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+    mask-image: var(--xh-glyph-mark-rotate-right);
+    animation: xh-toast-spin var(--xh-spin-duration) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；「在等什么」由条子上的
+     role=status 与可见文案继续承担。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='toast'][data-part='root'][data-loading]::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='toast'][data-part='root'][data-loading]::before {
+    animation: none;
+  }
+
+  /* 作者渲染了指示符部件，行首那枚兜底字形就让位给它，一行里不出现两枚图形 */
+  [data-scope='toast'][data-part='root']:has([data-part='indicator'])::before {
+    content: none;
+  }
+
+  /* 指示符部件：字形与 root 上那枚同尺同色，作者往里塞节点即整枚换掉 */
+  [data-scope='toast'][data-part='indicator'] {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    padding: var(--xh-toast-indicator-p, var(--xh-space-1));
+    color: var(--xh-toast-icon-fg, var(--xh-_tone-fg));
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='toast'][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));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+  }
+
+  [data-scope='toast'][data-part='indicator'][data-tone='success']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  [data-scope='toast'][data-part='indicator'][data-tone='warning']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  [data-scope='toast'][data-part='indicator'][data-tone='danger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+    mask-image: var(--xh-glyph-mark-rotate-right);
+    animation: xh-toast-spin var(--xh-spin-duration) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：与 root 上那枚同一处理——转圈停下，静止的箭头仍读得出「还没好」。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
+    animation: none;
+  }
+
+  [data-scope='toast'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='toast'][data-part='content'] {
     flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    min-inline-size: 0;
+  }
+
+  [data-scope='toast'][data-part='title'],
+  [data-scope='toast'][data-part='description'] {
+    margin: 0;
     min-inline-size: 0;
-    color: var(--xh-toast-title-fg, var(--xh-fg-default));
-    /* 与条子同字号同行高、不加粗：加粗是"这是标题、下面还有正文"的信号，
-       而轻提示没有正文——那一层是 notification 的 */
-    font-size: var(--xh-toast-title-font-size, var(--xh-text-body-size));
-    font-weight: var(--xh-toast-title-font-weight, var(--xh-text-body-weight));
+  }
+
+  [data-scope='toast'][data-part='title'] {
+    color: var(--xh-toast-title-fg, var(--xh-_tone-fg));
+    font-size: var(--xh-toast-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-toast-title-font-weight, var(--xh-font-weight-semibold));
     line-height: var(--xh-toast-title-leading, var(--xh-text-body-leading));
   }
 
+  [data-scope='toast'][data-part='description'] {
+    color: var(--xh-toast-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-toast-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-toast-description-leading, var(--xh-leading-normal));
+  }
+
   /* 没给文案时仍然要留在 DOM 里（aria-labelledby 指着它），
      但空盒子会照吃一份 gap，条子看着就多出一截莫名的留白 */
   [data-scope='toast'][data-part='title']:empty {
     display: none;
   }
 
+  [data-scope='toast'][data-part='description']:empty {
+    display: none;
+  }
+
   [data-scope='toast'][data-part='title'][hidden] {
     display: none;
   }
 
+  /* 操作钮是带文案的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底，§7.2.2），组件只映射既有使用者槽。
+     语气只落到状态字形和标题：这颗钮坐在带 data-tone 的条子里，底 / 边 / 字钉在中性语义面上，不随语气；
+     条子是 sheet 白面承载：hover --xh-bg-subtle（100）→ pressed --xh-bg-subtle-hover（200）。
+     条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字 */
   [data-scope='toast'][data-part='action-trigger'] {
-    /* 条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字，不是把按钮压扁 */
+    --xh-action-visual-size: var(--xh-toast-action-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-toast-action-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-toast-action-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-toast-action-bg, transparent);
+    --xh-action-bg-hover: var(--xh-toast-action-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-toast-action-bg-active, var(--xh-bg-subtle-hover));
+    --xh-action-fg-rest: var(--xh-toast-action-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-toast-action-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-toast-action-fg, var(--xh-fg-default));
+    --xh-action-border-rest: var(--xh-toast-action-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-toast-action-border, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-toast-action-border, var(--xh-border-control-hover));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-toast-action-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-toast-action-px, var(--xh-control-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-toast-action-border, var(--xh-border-default));
-    border-radius: var(--xh-toast-action-radius, var(--xh-shape-control));
-    background: var(--xh-toast-action-bg, var(--xh-bg-subtle));
-    color: var(--xh-toast-action-fg, var(--xh-fg-default));
-    /* 按钮不继承字族字号，不接回来的话条子里会突然冒出一段系统 UI 字体 */
-    font: inherit;
+    align-self: center;
     font-weight: var(--xh-toast-action-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
   }
 
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
   [data-scope='toast'][data-part='action-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='toast'][data-part='action-trigger']:hover:not(:disabled) {
-    background: var(--xh-toast-action-bg-hover, var(--xh-bg-subtle-hover));
+  /*
+   * 倒计时条。总时长由连接层写进 --xh-toast-progress-duration（不自动消失的那些整条收起），
+   * 计时被按住时动画一并停住——停表这件事此前没有任何可画的地方。
+   * 取装饰档 --xh-_tone-soft：压在同族淡底上仍看得出来。
+   */
+  [data-scope='toast'][data-part='progress'] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--xh-toast-progress-thickness, var(--xh-space-0_5));
+    background: var(--xh-toast-progress-bg, var(--xh-_tone-soft));
+    animation: xh-countdown var(--xh-toast-progress-duration, var(--xh-motion-duration-slide)) var(--xh-motion-ease-loop) forwards;
   }
 
-  [data-scope='toast'][data-part='action-trigger']:active:not(:disabled) {
-    background: var(--xh-toast-action-bg-active, var(--xh-bg-subtle-active));
+  [data-scope='toast'][data-part='root'][data-paused] [data-part='progress'] {
+    animation-play-state: paused;
   }
 
-  [data-scope='toast'][data-part='action-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  [data-scope='toast'][data-part='progress'][hidden] {
+    display: none;
   }
 
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size 同尺寸；那颗叉排在单行短消息里，
+     走行级动作钮那一档），组件只映射既有使用者槽。静息透明，sheet 白面承载 hover 100 → pressed 200，
+     写了语气时悬停底跟着语气走（--xh-_tone-subtle）。
+     有悬停能力的设备上默认静默、指针进入条子或焦点落进条子后显现——不走家族的 hover-focus 显示策略：
+     那一档用 visibility 收起，这颗叉占 Tab 位，收成 visibility: hidden 后键盘就够不到它了；
+     这里只压 opacity 与 pointer-events，焦点仍能落进来 */
   [data-scope='toast'][data-part='close-trigger'] {
-    flex: none;
-    /* 推到行内末侧；和操作按钮同处一行时排在它后面 */
-    margin-inline-start: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    /* 行级动作钮那一档（24px），不是浮层角落钮的 28px：
-       后者比一行正文的行盒还高，单它就把整条顶高一截 */
-    block-size: var(--xh-toast-close-size, var(--xh-control-action-size));
-    inline-size: var(--xh-toast-close-size, var(--xh-control-action-size));
-    border: 0;
-    border-radius: var(--xh-toast-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-toast-close-fg, var(--xh-fg-muted));
-    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);
-  }
+    --xh-action-visual-size: var(--xh-toast-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-toast-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-toast-close-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-toast-close-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-toast-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-toast-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-toast-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: var(--xh-toast-close-border, var(--xh-_action-variant-border-rest));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    /* 叉的字形按钮档取值（xs → 16px），与 root 上给指示符的 md 档分开 */
+    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-_action-profile-glyph-size));
 
-  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
-     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
-  [data-scope='toast'][data-part='close-trigger'][hidden] {
-    display: none;
+    flex: none;
+    align-self: center;
   }
 
-  [data-scope='toast'][data-part='close-trigger']:hover:not(:disabled) {
-    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
-  }
+  @media (hover: hover) {
+    [data-scope='toast'][data-part='close-trigger'] {
+      opacity: 0;
+      pointer-events: none;
+    }
 
-  [data-scope='toast'][data-part='close-trigger']:active {
-    background: var(--xh-toast-close-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
+    [data-scope='toast'][data-part='root']:hover [data-part='close-trigger'],
+    [data-scope='toast'][data-part='root']:focus-within [data-part='close-trigger'] {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 
-  /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
-     但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
-  [data-scope='toast'][data-part='close-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 折叠堆叠只允许最前一条露出关闭入口；触屏没有 hover，必须显式收起后台按钮。 */
+  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded])
+  [data-part='close-trigger'] {
+    opacity: 0;
+    pointer-events: none;
   }
 
-  [data-scope='toast'][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，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
+  [data-scope='toast'][data-part='close-trigger'][hidden] {
+    display: none;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
@@ -267,4 +478,22 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  @media print {
+    /* 打印：轻提示是瞬态的，打印那一刻恰好在场就会横在正文上，且它已经错过了被读到的时机。 */
+    [data-scope='toast'][data-part='group'] {
+      display: none;
+    }
+
+    /* 摞收起后条子本不该出现在纸上；这一条兜的是作者把条子摆在别处的用法：
+       动画会被定格在任意一帧——转了一半的圈。取值与减弱动效那一档相同。 */
+    [data-scope='toast'][data-part='root'][data-loading]::before {
+      animation: none;
+    }
+  }
+
+  [data-scope='toast'][data-part='content'][hidden],
+  [data-scope='toast'][data-part='description'][hidden] {
+    display: none;
+  }
 }