@xihan-ui/styles 1.0.0-alpha.0

package/css/timeline.css

@@ -0,0 +1,284 @@
+@layer xihan.components {
+  [data-scope='timeline'][data-part='root'] {
+    /* 尺寸档只换这几个私有槽，条目、圆点与文字都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_timeline-dot-size: 10px;
+    --xh-_timeline-gutter: var(--xh-space-3);
+    --xh-_timeline-item-gap: var(--xh-space-5);
+    --xh-_timeline-title-font-size: var(--xh-text-label-size);
+    --xh-_timeline-caption-font-size: var(--xh-font-size-xs);
+    /* 标题首行占多高。圆点按它居中下移，圆心才落在标题这一行的中线上 */
+    --xh-_timeline-line-h: calc(
+      var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size)) * var(--xh-leading-tight)
+    );
+
+    /* 条目之间不设 gap：留白由 content 自己的边距撑出来，连线才连得到下一条的圆点。
+       ol 的项目符号与内外边距是 UA 给的，库里没有全局 preflight，只能在这儿自己抹平 */
+    display: flex;
+    margin: 0;
+    padding: 0;
+    color: var(--xh-timeline-fg, var(--xh-fg-default));
+    list-style: none;
+  }
+
+  [data-scope='timeline'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='timeline'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  [data-scope='timeline'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。圆点直径不在控件高度那把尺上，两侧直接给像素 */
+  [data-scope='timeline'][data-part='root'][data-size='sm'] {
+    --xh-_timeline-dot-size: 8px;
+    --xh-_timeline-gutter: var(--xh-space-2);
+    --xh-_timeline-item-gap: var(--xh-space-4);
+    --xh-_timeline-title-font-size: var(--xh-font-size-sm);
+    /* 字号档最小就是 xs，时刻文本不再往下走，故不重声明 caption */
+  }
+
+  [data-scope='timeline'][data-part='root'][data-size='lg'] {
+    --xh-_timeline-dot-size: 12px;
+    --xh-_timeline-gutter: var(--xh-space-4);
+    --xh-_timeline-item-gap: var(--xh-space-6);
+    --xh-_timeline-title-font-size: var(--xh-font-size-lg);
+    --xh-_timeline-caption-font-size: var(--xh-font-size-sm);
+  }
+
+  /* —— 条目 —— */
+  /* 圆点与连线占一列（横排时占一行），内容占另一列，用 grid 而不是再包一层节点：
+     解剖里没有那个包裹层，作者也不该被逼着多写一个 div */
+  [data-scope='timeline'][data-part='item'] {
+    display: grid;
+    column-gap: var(--xh-timeline-gutter, var(--xh-_timeline-gutter));
+    /* 库里没有全局 preflight，列表项的外边距在这里自己抹平 */
+    margin: 0;
+    /* 允许被压缩，内容里的省略号才有生效的余地 */
+    min-inline-size: 0;
+  }
+
+  [data-scope='timeline'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  /* 横排时每条等分整行 */
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    flex: 1;
+  }
+
+  /* —— 圆点 —— */
+  [data-scope='timeline'][data-part='indicator'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
+    block-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
+    border-radius: var(--xh-radius-full);
+    /* 使用者令牌排在语气之前；两者都没有时退回一个中性的实心点 */
+    background: var(--xh-timeline-indicator-bg, var(--xh-_tone-soft, var(--xh-fg-muted)));
+    color: var(--xh-timeline-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+    font-size: var(--xh-timeline-indicator-font-size, var(--xh-_timeline-caption-font-size));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='timeline'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='indicator'] {
+    grid-column: 1;
+    grid-row: 1;
+    /* 行高减去直径的一半：calc 里的除法要写成乘 0.5，除号在这儿是无效语法 */
+    margin-block-start: calc(
+      (var(--xh-_timeline-line-h) - var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size))) * 0.5
+    );
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='indicator'] {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  /* —— 连线 —— */
+  [data-scope='timeline'][data-part='connector'] {
+    border-radius: var(--xh-radius-full);
+    background: var(--xh-timeline-connector-bg, var(--xh-border-default));
+  }
+
+  [data-scope='timeline'][data-part='connector'][hidden] {
+    display: none;
+  }
+
+  /* 竖排：从圆点下沿一直伸到条目底边，接上下一条的圆点。
+     min-block-size 兜住内容极短的条目，那时也还看得见一截线 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='connector'] {
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: center;
+    inline-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thick));
+    min-block-size: var(--xh-timeline-connector-min-length, var(--xh-space-4));
+    margin-block-start: var(--xh-space-1);
+  }
+
+  /* 横排：线转成横的一条，与圆点同一行 */
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='connector'] {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: center;
+    min-inline-size: var(--xh-timeline-connector-min-length, var(--xh-space-4));
+    block-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thick));
+    margin-inline-start: var(--xh-space-1);
+  }
+
+  /* 末条后面没有下一件事，那截线不该占地方；作者不写它也一样，写了就替他收掉 */
+  [data-scope='timeline'][data-part='item']:last-child [data-scope='timeline'][data-part='connector'] {
+    display: none;
+  }
+
+  /* —— 内容 —— */
+  [data-scope='timeline'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-space-1);
+    min-inline-size: 0;
+  }
+
+  [data-scope='timeline'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 条目之间的留白由内容自己的边距撑出来，连线的那一列因此能一路连到下一条 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='content'] {
+    grid-column: 2;
+    grid-row: 1 / -1;
+    padding-block-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='content'] {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    padding-block-start: var(--xh-space-2);
+    padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
+  }
+
+  /* 末条的留白同样收掉：它后面已经没有要隔开的东西 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:last-child [data-scope='timeline'][data-part='content'] {
+    padding-block-end: 0;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:last-child [data-scope='timeline'][data-part='content'] {
+    padding-inline-end: 0;
+  }
+
+  /* —— 侧别 —— */
+  /* 不写 placement 时内容落在结束侧，即上面那几条基础规则。
+     start 把线挪到结束侧、内容挪到起始侧，文字一并靠向线 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='start'] {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='start'] [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='start'] [data-scope='timeline'][data-part='connector'] {
+    grid-column: 2;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='start'] [data-scope='timeline'][data-part='content'] {
+    grid-column: 1;
+    align-items: flex-end;
+    text-align: end;
+  }
+
+  /* alternate：线走中间，奇数条在结束侧、偶数条在起始侧 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate'] {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate'] [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate'] [data-scope='timeline'][data-part='connector'] {
+    grid-column: 2;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate'] [data-scope='timeline'][data-part='content'] {
+    grid-column: 3;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate']:nth-child(even) [data-scope='timeline'][data-part='content'] {
+    grid-column: 1;
+    align-items: flex-end;
+    text-align: end;
+  }
+
+  /* 横排的 start 是把内容挪到线的上方，内容贴着线的那一边对齐 */
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] {
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='connector'] {
+    grid-row: 2;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='content'] {
+    grid-row: 1;
+    align-self: end;
+    padding-block-start: 0;
+    padding-block-end: var(--xh-space-2);
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
+    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='connector'] {
+    grid-row: 2;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='content'] {
+    grid-row: 3;
+    align-self: start;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate']:nth-child(even) [data-scope='timeline'][data-part='content'] {
+    grid-row: 1;
+    align-self: end;
+    padding-block-start: 0;
+    padding-block-end: var(--xh-space-2);
+  }
+
+  /* —— 文字 —— */
+  [data-scope='timeline'][data-part='title'] {
+    color: var(--xh-timeline-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size));
+    font-weight: var(--xh-timeline-title-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-tight);
+  }
+
+  [data-scope='timeline'][data-part='description'] {
+    color: var(--xh-timeline-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-timeline-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='timeline'][data-part='time'] {
+    color: var(--xh-timeline-time-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-timeline-time-font-size, var(--xh-_timeline-caption-font-size));
+    /* 等宽数字：时刻里的 1 与 7 在比例字体里宽度不同，不定住会让整列时间左右抖一格 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-normal);
+  }
+}

package/css/toast.css

@@ -0,0 +1,195 @@
+@layer xihan.motion {
+  /*
+   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 toaster 的
+   * data-placement 反向选到卡片上，等于把一个组件的动效写进另一个组件的选择器里，
+   * 两边任意一侧改名都会静默失效。竖向一小段位移在九个位上都说得通。
+   */
+  @keyframes xh-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes xh-toast-out {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(4px) scale(0.96);
+    }
+  }
+
+  /* 通知是自己冒出来的，用户没按任何键：减弱动效的诉求在这里比别处更硬。
+     !important 在低层里反而更强（重要声明的层序是反的），足以压住组件层的动画。 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='toast'][data-part] {
+      animation-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer xihan.components {
+  [data-scope='toast'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-toast-gap, var(--xh-space-1));
+    inline-size: var(--xh-toast-w, 20rem);
+    /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
+       窄屏上不必再算一遍 viewport 减法 */
+    max-inline-size: 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-border-default));
+    /* 语气色条做成起始侧的粗边，而不是伪元素：圆角与阴影都不用再对第二遍。
+       两条必须排在 border 简写之后，否则被简写重置回细边与常规描边色。
+       颜色由 connect 从 type 派生的 data-tone 经语气层给出，作者写 --xh-toast-accent
+       就能把某一条整体改色；两者都没有时退回原来的 info 蓝 */
+    border-inline-start-width: var(--xh-toast-accent-width, 4px);
+    border-inline-start-color: var(--xh-toast-accent, var(--xh-_tone-soft, var(--xh-color-info-500)));
+    border-radius: var(--xh-toast-radius, var(--xh-shape-surface));
+    background: var(--xh-toast-bg, var(--xh-bg-surface-raised));
+    color: var(--xh-toast-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-toast-shadow, var(--xh-elevation-3));
+    font-size: var(--xh-toast-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-toast-leading, var(--xh-leading-normal));
+    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+       悬停按住计时、按钮可点、焦点进出，全指着这一条 */
+    pointer-events: auto;
+  }
+
+  /* loading 说的是「事情还没完」，不是好消息也不是坏消息，走中性灰。
+     它不是语气：连接层给它派生的 neutral 档是 500，而这里要的是 fg-muted（600） */
+  [data-scope='toast'][data-part='root'][data-type='loading'] {
+    border-inline-start-color: var(--xh-toast-accent, var(--xh-fg-muted));
+  }
+
+  /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
+     漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+  [data-scope='toast'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 生命周期只有三段，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);
+  }
+
+  /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
+     不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+  [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;
+    color: var(--xh-toast-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-toast-title-font-size, var(--xh-font-size-md));
+    font-weight: var(--xh-toast-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-toast-title-leading, var(--xh-leading-tight));
+  }
+
+  [data-scope='toast'][data-part='description'] {
+    margin: 0;
+    color: var(--xh-toast-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-toast-description-font-size, var(--xh-font-size-sm));
+  }
+
+  /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
+     但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
+  [data-scope='toast'][data-part='title']:empty,
+  [data-scope='toast'][data-part='description']:empty {
+    display: none;
+  }
+
+  [data-scope='toast'][data-part='title'][hidden],
+  [data-scope='toast'][data-part='description'][hidden] {
+    display: none;
+  }
+
+  [data-scope='toast'][data-part='action-trigger'] {
+    /* 作为卡片直接子元素时不跟着拉满整行；被作者包进一行里时它只影响交叉轴，无副作用 */
+    align-self: flex-start;
+    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;
+    font-weight: var(--xh-toast-action-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [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));
+  }
+
+  [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='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='close-trigger'] {
+    align-self: flex-start;
+    /* 和操作按钮同处一行时把叉推到行尾；单独作为卡片子元素时则贴到行内末侧 */
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-toast-close-size, var(--xh-control-h-sm));
+    inline-size: var(--xh-toast-close-size, var(--xh-control-h-sm));
+    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;
+  }
+
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
+     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
+  [data-scope='toast'][data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='toast'][data-part='close-trigger']:hover:not(:disabled) {
+    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle));
+    color: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
+  }
+
+  /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
+     但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
+  [data-scope='toast'][data-part='close-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [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);
+  }
+}

package/css/toaster.css

@@ -0,0 +1,69 @@
+@layer xihan.components {
+  /* 地标容器不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
+     root 只是给读屏一个可跳转的落点。它若留下一个块盒，写在页面中段的用法
+     （按钮和队列摆在一起）就会凭空多出一行空白。
+     另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+     transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
+     所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
+  [data-scope='toaster'][data-part='root'] {
+    display: contents;
+  }
+
+  /* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+  [data-scope='toaster'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
+   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+   * 还得再配一次 translate，方向一变就错。
+   * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
+   */
+  [data-scope='toaster'][data-part='group'] {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: var(--xh-layer-toast);
+    display: flex;
+    flex-direction: column;
+    /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
+    justify-content: flex-end;
+    align-items: center;
+    padding-block: var(--xh-toaster-inset, var(--xh-space-6));
+    padding-inline: var(--xh-toaster-inset, var(--xh-space-6));
+    /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
+       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见 toast.css），
+       否则九个位一叠，底下的页面就再也点不动了 */
+    pointer-events: none;
+  }
+
+  [data-scope='toaster'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
+  [data-scope='toaster'][data-part='group'][data-empty] {
+    display: none;
+  }
+
+  /* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+  [data-scope='toaster'][data-part='group'][data-placement^='top'] {
+    justify-content: flex-start;
+  }
+
+  [data-scope='toaster'][data-part='group'][data-placement^='middle'] {
+    justify-content: center;
+  }
+
+  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+  [data-scope='toaster'][data-part='group'][data-placement$='-start'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='toaster'][data-part='group'][data-placement$='-end'] {
+    align-items: flex-end;
+  }
+}