@xihan-ui/styles 1.0.0-alpha.3 → 1.0.0

package/css/space.css

@@ -8,7 +8,7 @@
     display: flex;
     flex-wrap: nowrap;
     /* 不写档位也按 md 留白，这是与裸弹性容器的分野；使用者槽位排在档位之前，写死一个值即盖过所有档 */
-    gap: var(--xh-space-gap, var(--xh-space-3));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-md));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden] 规则，这里还回去 */
@@ -96,22 +96,22 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
   [data-scope='space'][data-part='root'][data-gap='xs'] {
-    gap: var(--xh-space-gap, var(--xh-space-1));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='space'][data-part='root'][data-gap='sm'] {
-    gap: var(--xh-space-gap, var(--xh-space-2));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='space'][data-part='root'][data-gap='md'] {
-    gap: var(--xh-space-gap, var(--xh-space-3));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='space'][data-part='root'][data-gap='lg'] {
-    gap: var(--xh-space-gap, var(--xh-space-4));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='space'][data-part='root'][data-gap='xl'] {
-    gap: var(--xh-space-gap, var(--xh-space-6));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-xl));
   }
 }

package/css/steps.css

@@ -10,8 +10,8 @@
 
     /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_steps-indicator-size: var(--xh-control-h-sm);
-    --xh-_steps-title-font-size: var(--xh-text-label-size);
+    --xh-_steps-indicator-size: var(--xh-space-7);
+    --xh-_steps-title-font-size: var(--xh-control-font-md);
     --xh-_steps-caption-font-size: var(--xh-text-caption-size);
 
     /* 语气落在走过与当前这两步的标记和连接线上：强调色画描边与填充，
@@ -153,8 +153,8 @@
     justify-content: center;
     inline-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
     block-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
-    border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-strong));
-    border-radius: var(--xh-shape-pill);
+    border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-steps-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-steps-indicator-bg, transparent);
     color: var(--xh-steps-indicator-fg, var(--xh-fg-muted));
     font-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-caption-font-size));
@@ -186,7 +186,7 @@
   }
 
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-border-subtle));
     color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
   }
 
@@ -222,7 +222,7 @@
     flex: 1;
     min-inline-size: var(--xh-steps-separator-min-length, var(--xh-space-4));
     block-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-steps-separator-radius, var(--xh-shape-pill));
     background: var(--xh-steps-separator-bg, var(--xh-border-default));
     transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }

package/css/switch.css

@@ -30,7 +30,7 @@
     block-size: var(--xh-_switch-track-h);
     padding: var(--xh-_switch-pad);
     border: 0;
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-switch-radius, var(--xh-shape-pill));
     background: var(--xh-switch-bg, var(--xh-bg-subtle-active));
     cursor: pointer;
     transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -68,7 +68,7 @@
   [data-scope='switch'][data-part='thumb'] {
     inline-size: var(--xh-_switch-thumb-size);
     block-size: var(--xh-_switch-thumb-size);
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-switch-thumb-radius, var(--xh-shape-pill));
     background: var(--xh-switch-thumb, var(--xh-bg-canvas));
     box-shadow: var(--xh-switch-thumb-shadow, var(--xh-elevation-raised));
     transition: translate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -134,4 +134,11 @@
     border-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
     animation: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='switch'][data-part='root'][hidden],
+  [data-scope='switch'][data-part='label'][hidden] {
+    display: none;
+  }
 }

package/css/table.css

@@ -19,13 +19,17 @@
 
   /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
   [data-scope='table'][data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-text));
 
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
     --xh-_table-cell-py: var(--xh-table-cell-py-md);
-    --xh-_table-font-size: var(--xh-text-body-size);
+    --xh-_table-font-size: var(--xh-control-font-md);
 
     display: flex;
     position: relative;
@@ -284,7 +288,8 @@
     color: transparent;
   }
 
-  /* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开 */
+  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开。
+     横杠与勾同走字形令牌，作者换掉标记时两态一起换 */
   [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
     position: relative;
     color: transparent;
@@ -292,11 +297,12 @@
 
   [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
     position: absolute;
-    inline-size: 60%;
-    block-size: var(--xh-stroke-thick);
-    border-radius: var(--xh-shape-pill);
-    background: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
+    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-table-trigger-fg, var(--xh-fg-on-brand));
     content: '';
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
   [data-scope='table'][data-part='select-all-trigger'][data-disabled],
@@ -307,10 +313,12 @@
     cursor: not-allowed;
   }
 
-  /* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上 */
+  /* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上。
+     往内收，与行、排序把手同一口径：把手长在列头里，列头与根都收 overflow，
+     环画在外沿会被裁掉 */
   [data-scope='table'][data-part='select-all-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   /* 行选择把手不占 Tab 位（键盘那一路走 Space），只服务指针 */

package/css/tabs.css

@@ -8,7 +8,7 @@
     /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_tabs-trigger-h: var(--xh-control-h-md);
     --xh-_tabs-trigger-px: var(--xh-control-px-md);
-    --xh-_tabs-trigger-font-size: var(--xh-text-label-size);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这几个私有槽：列表的底、内边距、基线，与标签的描边、选中底、选中态那道指示。
        缺省档（line）是一条基线加一行标签，选中只换文字色——这里的取值即现状 */
@@ -159,4 +159,12 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tabs'][data-part='root'][hidden],
+  [data-scope='tabs'][data-part='list'][hidden],
+  [data-scope='tabs'][data-part='trigger'][hidden] {
+    display: none;
+  }
 }

package/css/tag.css

@@ -130,8 +130,10 @@
     color: var(--xh-tag-fg, var(--xh-fg-default));
   }
 
+  /* 描边档的边就是这枚标签的全部轮廓，走「可操作区边界」那一支：
+     兑了底色的 --xh-_tone-border 六族都在 1.44-2.18，当轮廓看不清 */
   [data-scope='tag'][data-part='root'][data-variant='outline'][data-tone] {
-    border-color: var(--xh-tag-border, var(--xh-_tone-border, var(--xh-border-default)));
+    border-color: var(--xh-tag-border, var(--xh-_tone-border-control, var(--xh-border-default)));
     color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 

package/css/tags-input.css

@@ -15,9 +15,9 @@
     --xh-_tags-input-control-h: var(--xh-control-h-md);
     --xh-_tags-input-control-px: var(--xh-control-px-md);
     --xh-_tags-input-control-gap: var(--xh-control-gap-md);
-    --xh-_tags-input-input-font-size: var(--xh-text-body-size);
-    --xh-_tags-input-item-font-size: var(--xh-text-secondary-size);
-    --xh-_tags-input-label-font-size: var(--xh-text-label-size);
+    --xh-_tags-input-input-font-size: var(--xh-control-font-md);
+    --xh-_tags-input-item-font-size: var(--xh-control-caption-md);
+    --xh-_tags-input-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_tags-input-control-bg: var(--xh-bg-canvas);
     --xh-_tags-input-control-border: var(--xh-border-control);

package/css/text-field.css

@@ -16,9 +16,9 @@
     --xh-_text-field-h: var(--xh-control-h-md);
     --xh-_text-field-px: var(--xh-control-px-md);
     --xh-_text-field-gap: var(--xh-control-gap-md);
-    --xh-_text-field-font-size: var(--xh-text-body-size);
-    --xh-_text-field-label-font-size: var(--xh-text-label-size);
-    --xh-_text-field-action-font-size: var(--xh-text-secondary-size);
+    --xh-_text-field-font-size: var(--xh-control-font-md);
+    --xh-_text-field-label-font-size: var(--xh-control-font-md);
+    --xh-_text-field-action-font-size: var(--xh-control-caption-md);
 
     /* 形态档只换这三个私有槽：底、常态描边、悬停描边 */
     --xh-_text-field-bg: var(--xh-bg-canvas);

package/css/thread.css

@@ -7,6 +7,10 @@
   /* 自建定位上下文，作为绝对定位的回到底部按钮的参照系；
      block-size: 100% 让高度由外部决定，使滚动发生在内部。 */
   [data-scope='thread'][data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -20,14 +24,18 @@
 
   /* 滚动容器，粘底读的是它的 scrollTop / clientHeight / scrollHeight。
      min-block-size: 0 让弹性子项能被压缩从而触发溢出；
-     overscroll-behavior: contain 阻止滚动量传给页面；
-     scrollbar-gutter: stable 避免滚动条出现与消失时推动文字。 */
+     overscroll-behavior: contain 阻止滚动量传给页面。 */
   [data-scope='thread'][data-part='viewport'] {
     flex: 1;
     min-block-size: 0;
     /* 逻辑属性 overflow-block 尚无可用实现，写物理轴 */
     overflow-y: auto;
     overscroll-behavior: contain;
+  }
+
+  /* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+     带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+  [data-scope='thread'][data-part='viewport']:not([data-xh-scrollbar]) {
     scrollbar-gutter: stable;
   }
 

package/css/time-field.css

@@ -13,8 +13,8 @@
     --xh-_time-field-control-h: var(--xh-control-h-md);
     --xh-_time-field-control-px: var(--xh-control-px-md);
     --xh-_time-field-gap: var(--xh-control-gap-md);
-    --xh-_time-field-font-size: var(--xh-text-body-size);
-    --xh-_time-field-label-font-size: var(--xh-text-label-size);
+    --xh-_time-field-font-size: var(--xh-control-font-md);
+    --xh-_time-field-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_time-field-control-bg: var(--xh-bg-canvas);
     --xh-_time-field-control-border: var(--xh-border-control);

package/css/time-picker.css

@@ -24,8 +24,8 @@
     --xh-_time-picker-control-h: var(--xh-control-h-md);
     --xh-_time-picker-control-px: var(--xh-control-px-md);
     --xh-_time-picker-gap: var(--xh-control-gap-md);
-    --xh-_time-picker-font-size: var(--xh-text-body-size);
-    --xh-_time-picker-label-font-size: var(--xh-text-label-size);
+    --xh-_time-picker-font-size: var(--xh-control-font-md);
+    --xh-_time-picker-label-font-size: var(--xh-control-font-md);
     --xh-_time-picker-item-px: var(--xh-control-px-md);
 
     /* 形态档只换这三个私有槽：底色与两档描边 */
@@ -342,7 +342,7 @@
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-picker-presets-gap, var(--xh-space-0_5));
+    gap: var(--xh-time-picker-presets-gap, var(--xh-list-option-gap));
     max-block-size: var(--xh-time-picker-presets-h, var(--xh-viewport-h-sm));
     padding-inline: var(--xh-time-picker-presets-px, var(--xh-space-1));
     overflow-y: auto;
@@ -357,7 +357,7 @@
   [data-scope='time-picker'][data-part='preset'] {
     padding-block: var(--xh-time-picker-preset-py, var(--xh-space-1));
     padding-inline: var(--xh-time-picker-preset-px, var(--xh-space-3));
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
@@ -397,7 +397,7 @@
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-picker-column-gap, var(--xh-space-0_5));
+    gap: var(--xh-time-picker-column-gap, var(--xh-list-option-gap));
     min-inline-size: var(--xh-time-picker-column-min-w, 3.5rem);
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
     block-size: var(--xh-time-picker-column-h, var(--xh-viewport-h-sm));
@@ -432,7 +432,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    padding-block: var(--xh-time-picker-item-py, var(--xh-space-1_5));
+    padding-block: var(--xh-time-picker-item-py, var(--xh-list-option-py-md));
     padding-inline: var(--xh-time-picker-item-px, var(--xh-_time-picker-item-px));
     border-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
     color: var(--xh-time-picker-item-fg, var(--xh-fg-default));

package/css/timeline.css

@@ -10,7 +10,7 @@
     --xh-_timeline-dot-size: var(--xh-space-2_5);
     --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-title-font-size: var(--xh-control-font-md);
     --xh-_timeline-caption-font-size: var(--xh-text-caption-size);
     /* 标题首行占多高。圆点按它居中下移，圆心才落在标题这一行的中线上 */
     --xh-_timeline-line-h: calc(
@@ -92,7 +92,7 @@
     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-shape-pill);
+    border-radius: var(--xh-timeline-indicator-radius, var(--xh-shape-pill));
     /* 使用者令牌排在语气之前；两者都没有时退回一个中性的实心点 */
     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)));
@@ -120,7 +120,7 @@
 
   /* —— 连线 —— */
   [data-scope='timeline'][data-part='connector'] {
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-timeline-connector-radius, var(--xh-shape-pill));
     background: var(--xh-timeline-connector-bg, var(--xh-border-default));
   }
 
@@ -158,7 +158,7 @@
   [data-scope='timeline'][data-part='content'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-space-1);
+    gap: var(--xh-timeline-content-gap, var(--xh-space-1));
     min-inline-size: 0;
   }
 
@@ -176,7 +176,7 @@
   [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-block-start: var(--xh-timeline-content-pt, var(--xh-space-2));
     padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
   }
 
@@ -241,7 +241,7 @@
     grid-row: 1;
     align-self: end;
     padding-block-start: 0;
-    padding-block-end: var(--xh-space-2);
+    padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
   }
 
   [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
@@ -262,7 +262,7 @@
     grid-row: 1;
     align-self: end;
     padding-block-start: 0;
-    padding-block-end: var(--xh-space-2);
+    padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
   }
 
   /* —— 文字 —— */

package/css/toast.css

@@ -1,8 +1,8 @@
 @layer xihan.motion {
   /*
-   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 toaster 的
-   * data-placement 反向选到卡片上，等于把一个组件的动效写进另一个组件的选择器里，
-   * 两边任意一侧改名都会静默失效。竖向一小段位移在九个位上都说得通。
+   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向就得从摞的
+   * data-placement 反向选到条子上，落位一改名整条动效静默失效。
+   * 竖向一小段位移在九个位上都说得通。
    */
   @keyframes xh-toast-in {
     from {
@@ -39,45 +39,95 @@
     --xh-toast-skin: 1;
   }
 
+  /*
+   * 一摞 = 一整面视口大小的定位面：贴边靠 padding，落位靠 justify/align 表达。
+   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+   * 还得再配一次 translate，方向一变就错。
+   * 摞由全局服务渲染，没有对应的容器组件——一次操作的反馈落在哪儿是整个服务的口径。
+   */
+  [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，这里绝不重复写：
+       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有条子吃（见下），
+       否则底下的页面就再也点不动了 */
+    pointer-events: none;
+  }
+
+  [data-scope='toast'][data-part='group'][hidden] {
+    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'] {
+    justify-content: flex-end;
+  }
+
+  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+  [data-scope='toast'][data-part='group'][data-placement$='-start'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='toast'][data-part='group'][data-placement$='-end'] {
+    align-items: flex-end;
+  }
+
+  /*
+   * 一条轻提示是「一句话 + 一枚状态字形」，横排一行、贴着文字收缩。
+   * 语气由淡底、描边与字形三者一起承载，正文留中性——正文也跟着兑成语气色的话，
+   * 绿字压在绿底上，对比度是整条里最差的那一处。
+   */
   [data-scope='toast'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-text));
+    /* 状态字形按控件指示符那一档走，与 alert 的图标框同一把尺 */
+    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-control-indicator-size));
+
+    /* 底与描边取语气层派生好的槽，不在这儿自己再兑一遍：
+       兑法差一档，字形压上去的对比度就跟着差一档（alert 踩过这个坑） */
+    --xh-_toast-tint: var(--xh-_tone-subtle);
+    --xh-_toast-edge: var(--xh-_tone-border);
 
     display: flex;
-    flex-direction: column;
-    gap: var(--xh-toast-gap, var(--xh-space-1));
-    inline-size: var(--xh-toast-w, var(--xh-overlay-max-w));
+    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: 100%;
-    padding-block: var(--xh-toast-py, var(--xh-surface-py-sm));
+       窄屏上不必再算一遍 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-border-default));
-    /* 语气色条做成起始侧的粗边，而不是伪元素：圆角与阴影都不用再对第二遍。
-       两条必须排在 border 简写之后，否则被简写重置回细边与常规描边色。
-       颜色由 connect 从 type 派生的 data-tone 经语气层给出，作者写 --xh-toast-accent
-       就能把某一条整体改色；两者都没有时退回原来的 info 蓝 */
-    border-inline-start-width: var(--xh-toast-accent-width, var(--xh-space-1));
-    border-inline-start-color: var(--xh-toast-accent, var(--xh-_tone-soft, var(--xh-color-info-500)));
+    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-bg-surface-raised));
+    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-secondary-size));
-    line-height: var(--xh-toast-leading, var(--xh-leading-normal));
-    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+    font-size: var(--xh-toast-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-toast-leading, var(--xh-text-body-leading));
+    /* 摞的定位面整面铺开且不吃指针，条子必须自己吃回来：
        悬停按住计时、按钮可点、焦点进出，全指着这一条 */
     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;
   }
@@ -88,41 +138,39 @@
   }
 
   /* 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，外边距得先归零，否则卡片内的行距对不上 */
+    /* 作者可能把它写成 h2/p，外边距得先归零，否则条子内的行距对不上 */
     margin: 0;
+    /* 吃掉剩余宽度，把操作钮与叉推到行尾；min-inline-size 让它在撞上宽度上限时能换行，
+       flex 项的 min-width 默认是 auto，不归零的话长文案会把条子顶出上限 */
+    flex: 1 1 auto;
+    min-inline-size: 0;
     color: var(--xh-toast-title-fg, var(--xh-fg-default));
-    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-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-text-secondary-size));
+    /* 与条子同字号同行高、不加粗：加粗是"这是标题、下面还有正文"的信号，
+       而轻提示没有正文——那一层是 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));
+    line-height: var(--xh-toast-title-leading, var(--xh-text-body-leading));
   }
 
-  /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
-     但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
-  [data-scope='toast'][data-part='title']:empty,
-  [data-scope='toast'][data-part='description']:empty {
+  /* 没给文案时仍然要留在 DOM 里（aria-labelledby 指着它），
+     但空盒子会照吃一份 gap，条子看着就多出一截莫名的留白 */
+  [data-scope='toast'][data-part='title']:empty {
     display: none;
   }
 
-  [data-scope='toast'][data-part='title'][hidden],
-  [data-scope='toast'][data-part='description'][hidden] {
+  [data-scope='toast'][data-part='title'][hidden] {
     display: none;
   }
 
   [data-scope='toast'][data-part='action-trigger'] {
-    /* 作为卡片直接子元素时不跟着拉满整行；被作者包进一行里时它只影响交叉轴，无副作用 */
-    align-self: flex-start;
+    /* 条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字，不是把按钮压扁 */
+    flex: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -132,7 +180,7 @@
     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 字体 */
+    /* 按钮不继承字族字号，不接回来的话条子里会突然冒出一段系统 UI 字体 */
     font: inherit;
     font-weight: var(--xh-toast-action-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
@@ -157,14 +205,16 @@
   }
 
   [data-scope='toast'][data-part='close-trigger'] {
-    align-self: flex-start;
-    /* 和操作按钮同处一行时把叉推到行尾；单独作为卡片子元素时则贴到行内末侧 */
+    flex: none;
+    /* 推到行内末侧；和操作按钮同处一行时排在它后面 */
     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));
+    /* 行级动作钮那一档（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;