@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/notification.css

@@ -0,0 +1,782 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 notification 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+/* Notification 独立皮肤同时传递引入操作 / 关闭钮的动作控件配方与加载环配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.motion {
+  /* 叠放的一摞：新卡片从视口边缘外进入，同时落到自己的折叠层级。整幅位移取令牌，减弱动效下归零，只剩淡入 */
+  @keyframes xh-notification-stack-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-offset, 0px) - var(--xh-motion-travel)));
+      scale: var(--xh-notification-stack-scale, var(--xh-_notification-stack-scale));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * var(--xh-_notification-offset, 0px));
+      scale: var(--xh-notification-stack-scale, var(--xh-_notification-stack-scale));
+    }
+  }
+
+  @keyframes xh-notification-stack-out {
+    from {
+      opacity: 1;
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * var(--xh-_notification-y, 0px));
+      scale: var(--xh-_notification-scale, 1);
+    }
+
+    to {
+      opacity: 0;
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-y, 0px) - var(--xh-motion-travel)));
+      scale: var(--xh-_notification-scale, 1);
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-notification {
+    --xh-notification-skin: 1;
+  }
+
+  /* 作用域包装不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
+     root 只是把队列的作用域圈起来（地标挂在那一摞上，不在这里）。
+     它若留下一个块盒，写在页面中段的用法（按钮和队列摆在一起）就会凭空多出一行空白。
+     另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+     transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
+     所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
+  .xh-scope-notification[data-part='root'] {
+    display: contents;
+  }
+
+  /* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+  .xh-scope-notification[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 逐条排开的一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
+   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+   * 还得再配一次 translate，方向一变就错。
+   * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
+   */
+  .xh-scope-notification[data-part='group'] {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: var(--xh-notification-layer, var(--xh-layer-toast));
+    display: flex;
+    flex-direction: column;
+    /* 基线按卡片的默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
+    justify-content: flex-end;
+    align-items: center;
+    /* 贴边与安全区取大的一头：刘海、圆角与底部横条压住的那一段由系统给出，
+       贴边比它窄时卡片会被切掉一角。桌面上 env() 恒为 0，取值与贴边槽完全一致。
+       两条内联的 env 一起取大值：安全区只有物理方向的四个名字，
+       分左右写在 RTL 下会翻错边，两侧同取较宽的那一段。 */
+    padding-block-start: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-bottom));
+    padding-inline: max(
+      var(--xh-notification-inset, var(--xh-space-6)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+    /* 摞内间距由连接层写进内联 style（三个适配器共用同一份），这里绝不重复写：
+       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见下），
+       否则九个位一叠，底下的页面就再也点不动了 */
+    pointer-events: none;
+  }
+
+  /* 轻提示离视口边更近 */
+  .xh-scope-notification[data-part='group'][data-preset='toast']:not([data-stacked]) {
+    padding-block-start: max(var(--xh-notification-inset, var(--xh-space-4)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-notification-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
+    padding-inline: max(
+      var(--xh-notification-inset, var(--xh-space-4)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  .xh-scope-notification[data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
+  .xh-scope-notification[data-part='group'][data-empty] {
+    display: none;
+  }
+
+  /* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+  .xh-scope-notification[data-part='group'][data-placement^='top'] {
+    justify-content: flex-start;
+  }
+
+  .xh-scope-notification[data-part='group'][data-placement^='middle'] {
+    justify-content: center;
+  }
+
+  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+  .xh-scope-notification[data-part='group'][data-placement$='-start'] {
+    align-items: flex-start;
+  }
+
+  .xh-scope-notification[data-part='group'][data-placement$='-end'] {
+    align-items: flex-end;
+  }
+
+  /*
+   * 叠成一摞：定位面收成一条固定宽度、零高度的线，贴在落位那一角；卡片在里面绝对定位，
+   * 按叠摞测量写进来的层深与偏移错开。贴边改由 inset 表达，定位面不再整面铺开。
+   */
+  .xh-scope-notification[data-part='group'][data-stacked] {
+    inset: auto;
+    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-max-w-lg)), calc(100vw - var(--xh-space-8)));
+    block-size: 0;
+    padding: 0;
+  }
+
+  /* 定位面不再是弹性列：卡片各自绝对定位。收起与空摞照旧撤掉 */
+  .xh-scope-notification[data-part='group'][data-stacked]:not([hidden]):not([data-empty]) {
+    display: block;
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-preset='toast'] {
+    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-toast-w)), calc(100vw - var(--xh-space-8)));
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement^='bottom'] {
+    inset-block-end: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-bottom));
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement^='top'] {
+    inset-block-start: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-top));
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-preset='toast'][data-placement^='bottom'] {
+    inset-block-end: max(var(--xh-notification-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-preset='toast'][data-placement^='top'] {
+    inset-block-start: max(var(--xh-notification-inset, var(--xh-space-4)), env(safe-area-inset-top));
+  }
+
+  /* 中间那一行从视口中线往下叠 */
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement^='middle'] {
+    inset-block-start: 50%;
+  }
+
+  /* 起点是逻辑属性、平移是物理通道：平移乘书写方向的符号，rtl 下居中的那一摞才落回视口正中 */
+  .xh-scope-notification[data-part='group'][data-stacked]:is([data-placement='top'], [data-placement='middle'], [data-placement='bottom']) {
+    inset-inline-start: 50%;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement$='-start'] {
+    inset-inline-start: max(
+      var(--xh-notification-inset, var(--xh-space-6)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement$='-end'] {
+    inset-inline-end: max(
+      var(--xh-notification-inset, var(--xh-space-6)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-preset='toast'][data-placement$='-start'] {
+    inset-inline-start: max(
+      var(--xh-notification-inset, var(--xh-space-4)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked][data-preset='toast'][data-placement$='-end'] {
+    inset-inline-end: max(
+      var(--xh-notification-inset, var(--xh-space-4)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  /*
+   * 一张通知：底与描边一律中性，面走 sheet 三件套（--xh-material-elevated-bg / -border / -shadow，
+   * 亮暗两档同有 1px 描边）。两种预设共用这张面，排版分开写在下面：
+   * 卡片是两列网格，左列一枚类型字形、右列「标题 + 说明 + 操作」、叉钉在右上角；
+   * 轻提示是一行，行首字形、文本列、操作钮与叉依次排开。
+   *
+   * 卡片的槽带 item 段（--xh-notification-item-*），与摞的 --xh-notification-inset 分开。
+   */
+  .xh-scope-notification[data-part='item'] {
+    /* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档；
+       左列那枚类型字形另有自己的尺寸槽，叉与操作钮的字形各按按钮档取值 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-md));
+
+    position: relative;
+    display: grid;
+    /* 左列宽度由字形自己决定，作者不放指示符时它就是 0，正文自然贴到左内衬 */
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    column-gap: var(--xh-notification-item-gap, var(--xh-space-3));
+    row-gap: var(--xh-notification-item-row-gap, var(--xh-space-2));
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-max-w-lg));
+    /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
+       窄屏上不必再算一遍 viewport 减法 */
+    max-inline-size: 100%;
+    padding-block: var(--xh-notification-item-py, var(--xh-surface-pad-lg));
+    padding-inline: var(--xh-notification-item-px, var(--xh-surface-pad-lg));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-item-border, var(--xh-material-elevated-border));
+    border-radius: var(--xh-notification-item-radius, var(--xh-shape-overlay));
+    background: var(--xh-notification-item-bg, var(--xh-material-elevated-bg));
+    color: var(--xh-notification-item-fg, var(--xh-material-elevated-fg));
+    box-shadow: var(--xh-notification-item-shadow, var(--xh-material-elevated-shadow));
+    font-size: var(--xh-notification-item-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-notification-item-leading, var(--xh-text-body-leading));
+    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+       悬停按住计时、按钮可点、焦点进出，全指着这一条 */
+    pointer-events: auto;
+    /* 换位：一张卡收起或新卡插进来时，列表动效先按旧位置反向补偿，再由这条过渡带回新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 轻提示：一行排开，行首那一格贴着内容盒的起始角，文本列与两颗钮在行里垂直居中。
+     指示符盒自带 --xh-space-1 内衬：与间距合起来，字形到正文 12px，与卡片、Alert 同一个距离 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] {
+    flex: none;
+    display: flex;
+    align-items: flex-start;
+    column-gap: var(--xh-notification-item-gap, var(--xh-space-2));
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-toast-w));
+    padding-block: var(--xh-notification-item-py, var(--xh-space-3));
+    padding-inline: var(--xh-notification-item-px, var(--xh-space-4));
+    font-size: var(--xh-notification-item-font-size, var(--xh-text-label-size));
+    /* 叠摞几何常驻：单独摆放时是恒等位移与比例，放进叠放的一摞后由那边换成层深，
+       两处用同一套画法，卡片进出一摞时栅格不跳 */
+    translate: 0 calc(var(--xh-_notification-stack-dir, 1) * var(--xh-_notification-y, 0px));
+    scale: var(--xh-_notification-scale, 1);
+    transform-origin: bottom center;
+  }
+
+  /* 卡片：除指示符外一律落第二列，作者往卡片里塞的任何东西都跟着正文走 */
+  .xh-scope-notification[data-part='item'][data-preset='card'] > *:not([data-part='item-indicator']) {
+    grid-column: 2;
+  }
+
+  /* 退场动画播完连接层给的是 hidden 属性，而上面声明了 display——
+     漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+  .xh-scope-notification[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段。
+     逐条排开的那几摞共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 group 的
+     data-placement 反向选到卡片上，落位一改名整条动效静默失效。竖向一小段位移在九个位上都说得通。
+     同一批新到的几条按到达顺序错开开幕，不按它在那一摞里排第几（序号由条目到达的追踪写进
+     --xh-_stagger-index，封顶）。backwards 不能省：等待期间起帧不生效的话，
+     卡片会先以全不透明度露一下再跳回起帧 */
+  .xh-scope-notification[data-part='item'][data-state='visible'] {
+    animation: xh-sheet-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  /* forwards 不能省：动画播完到卡片真正收起之间还隔着一次提交，
+     不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+  .xh-scope-notification[data-part='item'][data-state='dismissing'] {
+    animation: xh-sheet-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /*
+   * 叠放的一摞：最新一条在最前，后层按层深逐层收拢——层深由叠摞测量写进来，每往后一层乘一次
+   * --xh-motion-scale-stack；减弱动效下那支令牌为 1，层与层只靠位移分开。
+   * 收拢比例作者可以用 --xh-notification-stack-scale 整摞改写。
+   */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'] {
+    --xh-_notification-stack-scale: max(0, 1 - var(--xh-_notification-depth, 0) * (1 - var(--xh-motion-scale-stack)));
+    --xh-_notification-y: var(--xh-_notification-offset, 0px);
+    --xh-_notification-scale: var(--xh-notification-stack-scale, var(--xh-_notification-stack-scale));
+
+    position: absolute;
+    inset-inline: 0;
+    inline-size: 100%;
+    translate: 0 calc(var(--xh-_notification-stack-dir, 1) * var(--xh-_notification-y));
+    scale: var(--xh-_notification-scale);
+    transform-origin: bottom center;
+    transition:
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      scale var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 贴底的几摞往上叠，贴顶与中间那一行往下叠 */
+  .xh-scope-notification[data-part='group'][data-stacked][data-placement^='bottom'] .xh-scope-notification[data-part='item'] {
+    --xh-_notification-stack-dir: -1;
+
+    inset-block-end: 0;
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked]:is([data-placement^='top'], [data-placement^='middle']) .xh-scope-notification[data-part='item'] {
+    --xh-_notification-stack-dir: 1;
+
+    inset-block-start: 0;
+    transform-origin: top center;
+  }
+
+  /* 叠放的卡片从视口边缘推入、沿叠放方向退出，进出场都带着自己那一层的位移与收拢比例 */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-state='visible'] {
+    animation: xh-notification-stack-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-state='dismissing'] {
+    animation: xh-notification-stack-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 收拢的后层只露出一截边：高度压成最前那一条，内容淡出，免得几层字叠在一起 */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-stack-index]:not([data-frontmost]):not([data-expanded]) {
+    block-size: var(--xh-_notification-front-height, auto);
+    overflow: hidden;
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'] > :not([data-part='item-close-trigger']) {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-stack-index]:not([data-frontmost]):not([data-expanded])
+  > :not([data-part='item-close-trigger']) {
+    opacity: 0;
+  }
+
+  /* 展开：按真实高度排成一列，收拢比例归 1 */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-expanded] {
+    --xh-_notification-y: var(--xh-_notification-offset-expanded, 0px);
+    --xh-_notification-scale: 1;
+
+    block-size: var(--xh-_notification-height, auto);
+  }
+
+  /*
+   * 语气的非颜色通道。行首字形按 data-tone 区分信息、成功、警告与失败；加载中另由 data-loading 说。
+   * 行首那一格叠着两层：::before 是加载环（加载环家族配方画成与 Spinner 环档同一副环，随 data-loading
+   * 淡入淡出、转与停），::after 是语气字形，加载中淡出让位——加载落定时环淡出、字形淡入，同一格里交叉淡变。
+   * 两层的颜色都照语气走。轻提示没渲染 item-indicator 时由卡片自己的伪元素补上。
+   */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] {
+    --xh-_loading-ring-fg: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
+  }
+
+  /* 环那一层占着行首那一格，字形那一层叠在它上面 */
+  .xh-scope-notification[data-part='item'][data-preset='toast']::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);
+  }
+
+  /* 字形那一层按卡片的内衬落在同一格上：行首那一格贴着内容盒的起始角（一行按 flex-start 排列） */
+  .xh-scope-notification[data-part='item'][data-preset='toast']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--xh-notification-item-py, var(--xh-space-3));
+    inset-inline-start: var(--xh-notification-item-px, var(--xh-space-4));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-notification-indicator-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;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-notification[data-part='item'][data-preset='toast'][data-tone='success']::after {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  .xh-scope-notification[data-part='item'][data-preset='toast'][data-tone='warning']::after {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  .xh-scope-notification[data-part='item'][data-preset='toast'][data-tone='danger']::after {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* 加载中不是语气：字形淡出让位给环，颜色仍照语气走 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'][data-loading]::after {
+    opacity: 0;
+  }
+
+  /* 作者渲染了指示符部件，行首那两层兜底就让位给它，一行里不出现两枚图形 */
+  .xh-scope-notification[data-part='item'][data-preset='toast']:has([data-part='item-indicator'])::before,
+  .xh-scope-notification[data-part='item'][data-preset='toast']:has([data-part='item-indicator'])::after {
+    content: none;
+  }
+
+  /* 卡片：独占第一列第一行，并与标题首行顶对齐：盒高取一行标题的行高，
+     字形在盒里居中，标题字号改了也不会错位 */
+  .xh-scope-notification[data-part='item-indicator'] {
+    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+
+    grid-column: 1;
+    grid-row: 1;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-label-size)) * var(--xh-leading-tight));
+    inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+    color: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
+  }
+
+  /* 轻提示：方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-indicator']:where(.xh-scope-notification) {
+    flex: none;
+    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-notification-indicator-p, var(--xh-space-1));
+  }
+
+  .xh-scope-notification[data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 作者没往指示符里写内容就由皮肤画兜底的环与字形，塞了自己的图形这几条即不命中。
+     两层叠在同一格：::before 是加载环（加载环配方画成与 Spinner 环档同一副环，随 data-loading 淡入淡出、
+     转与停，起始边取指示符的语气色），::after 是按语气各画一枚的字形，加载中淡出让位——
+     加载落定时环淡出、字形淡入，同一格里交叉淡变。「在等什么」由卡片上的 role=status 与可见文案承担 */
+  .xh-scope-notification[data-part='item-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);
+  }
+
+  .xh-scope-notification[data-part='item-indicator']:empty::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    margin: auto;
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-notification[data-part='item'][data-tone='success'] [data-part='item-indicator']:where(.xh-scope-notification):empty::after {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  .xh-scope-notification[data-part='item'][data-tone='warning'] [data-part='item-indicator']:where(.xh-scope-notification):empty::after {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  .xh-scope-notification[data-part='item'][data-tone='danger'] [data-part='item-indicator']:where(.xh-scope-notification):empty::after {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* 加载中不是语气：字形淡出让位给环，颜色仍照语气走 */
+  .xh-scope-notification[data-part='item-indicator'][data-loading]:empty::after {
+    opacity: 0;
+  }
+
+  /* 标题与说明的文本列。卡片里它落在第二列，两行之间与网格同一个行距；
+     轻提示里它占满行首字形与两颗钮之间的那一段，在行里垂直居中 */
+  .xh-scope-notification[data-part='item-content'] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--xh-notification-item-row-gap, var(--xh-space-2));
+    min-inline-size: 0;
+  }
+
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-content']:where(.xh-scope-notification) {
+    flex: 1 1 auto;
+    align-self: center;
+    row-gap: 0;
+  }
+
+  .xh-scope-notification[data-part='item-content'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-notification[data-part='item-title'] {
+    /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
+    margin: 0;
+    color: var(--xh-notification-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-notification-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
+  }
+
+  /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-title']:where(.xh-scope-notification) {
+    min-inline-size: 0;
+    color: var(--xh-notification-title-fg, var(--xh-_tone-fg));
+  }
+
+  /* 卡片的叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响。
+     让位量与叉的贴边取同一个值，作者改了贴边槽，标题让出的那段跟着走 */
+  .xh-scope-notification[data-part='item'][data-preset='card']:has([data-part='item-close-trigger']) [data-part='item-title']:where(.xh-scope-notification) {
+    padding-inline-end: calc(
+      var(--xh-notification-close-size, var(--xh-control-h-sm)) +
+      var(--xh-notification-close-inset, var(--xh-surface-action-inset))
+    );
+  }
+
+  /* 正文有上限：推一段长文（公告全文）进来时卡片不被撑到整屏高——摞是整面视口的定位面、不吃指针也不裁切，
+     撑出视口的那截既看不到也滚不到。超出的部分在正文自己里面滚，标题与操作钮留在卡片上；
+     滚到头不把滚动量传给页面 */
+  .xh-scope-notification[data-part='item-description'] {
+    margin: 0;
+    max-block-size: var(--xh-notification-description-max-h, var(--xh-viewport-h-md));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    color: var(--xh-notification-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
+  }
+
+  /* 轻提示的说明只是一行短上下文，行高收紧到正文之下 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-description']:where(.xh-scope-notification) {
+    min-inline-size: 0;
+    line-height: var(--xh-notification-description-leading, var(--xh-leading-normal));
+  }
+
+  /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
+     但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
+  .xh-scope-notification[data-part='item-title']:empty,
+  .xh-scope-notification[data-part='item-description']:empty {
+    display: none;
+  }
+
+  .xh-scope-notification[data-part='item-title'][hidden],
+  .xh-scope-notification[data-part='item-description'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 倒计时条。总时长由连接层写进 --xh-notification-progress-duration（不自动消失的那些
+   * 整条收起），计时被按住时动画一并停住——停表这件事此前没有任何可画的地方。
+   * 取装饰档 --xh-_tone-soft：压在卡片底色上仍看得出来。
+   * 裁切只认物理方向：收起的那一侧取书写方向的行尾，rtl 下从左往右收。
+   */
+  .xh-scope-notification[data-part='item-progress'] {
+    --xh-_countdown-cut-left: var(--xh-direction-start);
+    --xh-_countdown-cut-right: var(--xh-direction-end);
+
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--xh-notification-progress-thickness, var(--xh-space-0_5));
+    background: var(--xh-notification-progress-bg, var(--xh-_tone-soft));
+    animation: xh-countdown var(--xh-notification-progress-duration, var(--xh-motion-duration-slide)) var(--xh-motion-ease-loop) forwards;
+  }
+
+  /* 卡片：横跨整张卡片的一行，它不是正文的一部分，不跟着第二列走；两端取胶囊 */
+  .xh-scope-notification[data-part='item'][data-preset='card'] [data-part='item-progress']:where(.xh-scope-notification) {
+    --xh-_countdown-radius: var(--xh-notification-progress-radius, var(--xh-shape-pill));
+
+    grid-column: 1 / -1;
+    border-radius: var(--xh-_countdown-radius);
+  }
+
+  /* 轻提示：贴着卡片底边走 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-progress']:where(.xh-scope-notification) {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  /* 减弱动效：倒计时不连续地缩，按秒一格一格走，段数由连接层随时长交出。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-notification[data-part='item-progress'] {
+      animation-timing-function: steps(var(--xh-_notification-progress-steps, 1), end);
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-notification[data-part='item-progress'] {
+    animation-timing-function: steps(var(--xh-_notification-progress-steps, 1), end);
+  }
+
+  .xh-scope-notification[data-part='item'][data-paused] [data-part='item-progress']:where(.xh-scope-notification) {
+    animation-play-state: paused;
+  }
+
+  .xh-scope-notification[data-part='item-progress'][hidden] {
+    display: none;
+  }
+
+  /* 操作钮是带文案的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底），组件只映射既有使用者槽。
+     语气只落到字形与轻提示的标题：这颗钮坐在带 data-tone 的卡片里，底 / 边 / 字钉在中性语义面上，不随语气；
+     卡片是 sheet 白面承载：hover --xh-bg-subtle（100）→ pressed --xh-bg-subtle-hover（200） */
+  .xh-scope-notification[data-part='item-action-trigger'] {
+    --xh-action-visual-size: var(--xh-notification-action-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-notification-action-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-notification-action-bg, transparent);
+    --xh-action-bg-hover: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-hover));
+    --xh-action-fg-rest: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-border-rest: var(--xh-notification-action-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-notification-action-border, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-notification-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;
+    /* 作者塞进钮里的图标按按钮档取字形尺寸 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-_action-profile-glyph-size));
+
+    /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
+    justify-self: start;
+    font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 轻提示是单行 flex，按钮不参与伸缩：文案长了该换行的是文字 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-action-trigger']:where(.xh-scope-notification) {
+    flex: none;
+    align-self: center;
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  .xh-scope-notification[data-part='item-action-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 icon ghost 档给（卡片投 sm：32px 正方盒；轻提示投 xs：24px，走行级动作钮那一档），组件只映射既有使用者槽。
+     静息透明，sheet 白面承载 hover 100 → pressed 200，写了语气时悬停底跟着语气走（--xh-_tone-subtle） */
+  .xh-scope-notification[data-part='item-close-trigger'] {
+    --xh-action-visual-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-notification-close-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-notification-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-notification-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-notification-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: var(--xh-notification-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;
+    /* 叉的字形按钮档取值，与行首那枚 md 档的类型字形分开 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 卡片：钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+  .xh-scope-notification[data-part='item'][data-preset='card'] [data-part='item-close-trigger']:where(.xh-scope-notification) {
+    position: absolute;
+    inset-block-start: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
+    inset-inline-end: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
+  }
+
+  /* 轻提示：排在一行短消息的行尾，与文本列一起垂直居中 */
+  .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-close-trigger']:where(.xh-scope-notification) {
+    flex: none;
+    align-self: center;
+  }
+
+  /* 轻提示的叉在有悬停能力的设备上默认静默、指针进入卡片或焦点落进卡片后显现——不走家族的
+     hover-focus 显示策略：那一档用 visibility 收起，这颗叉占 Tab 位，收成 visibility: hidden
+     后键盘就够不到它了；这里只压 opacity 与 pointer-events，焦点仍能落进来 */
+  @media (hover: hover) {
+    .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-close-trigger']:where(.xh-scope-notification) {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .xh-scope-notification[data-part='item'][data-preset='toast']:hover [data-part='item-close-trigger']:where(.xh-scope-notification),
+    .xh-scope-notification[data-part='item'][data-preset='toast']:focus-within [data-part='item-close-trigger']:where(.xh-scope-notification) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  /* 收拢的后层只允许最前一条露出关闭入口；触屏没有 hover，必须显式收起后层的叉 */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-stack-index]:not([data-frontmost]):not([data-expanded])
+  [data-part='item-close-trigger']:where(.xh-scope-notification) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
+     家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉，不补回来就会留下一个按不动的叉 */
+  .xh-scope-notification[data-part='item-close-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-notification[data-part='item-close-trigger']: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-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  @media print {
+    /* 通知组固定在视口上，打印那一刻在场就会盖住正文，且它已经错过了被读到的时机。 */
+    .xh-scope-notification[data-part='group'] {
+      display: none;
+    }
+
+    /* 作者把卡片摆在摞外的用法：加载环的静止替代由加载环配方在打印档给出 */
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-notification[data-part='item'][data-preset='toast']::after,
+    .xh-scope-notification[data-part='item-indicator']:empty::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-notification[data-part='item-close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-notification[data-part='item-close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-notification[data-part='item-close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}