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

package/css/timer.css

@@ -0,0 +1,119 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='timer'] {
+    --xh-timer-skin: 1;
+  }
+
+  /* 三个尺寸档只换这几个私有槽，各部件从 root 继承它们，换档不必给每个部件各写一条选择器 */
+  [data-scope='timer'][data-part='root'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-2-size);
+    --xh-_timer-gap: var(--xh-space-3);
+    --xh-_timer-control-h: var(--xh-control-h-md);
+    --xh-_timer-control-px: var(--xh-control-px-md);
+    --xh-_timer-control-gap: var(--xh-control-gap-md);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-timer-gap, var(--xh-_timer-gap));
+    color: var(--xh-timer-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='timer'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='timer'][data-part='root'][data-size='sm'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-3-size);
+    --xh-_timer-gap: var(--xh-space-2);
+    --xh-_timer-control-h: var(--xh-control-h-sm);
+    --xh-_timer-control-px: var(--xh-control-px-sm);
+    --xh-_timer-control-gap: var(--xh-control-gap-sm);
+  }
+
+  [data-scope='timer'][data-part='root'][data-size='lg'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-1-size);
+    --xh-_timer-gap: var(--xh-space-4);
+    --xh-_timer-control-h: var(--xh-control-h-lg);
+    --xh-_timer-control-px: var(--xh-control-px-lg);
+    --xh-_timer-control-gap: var(--xh-control-gap-lg);
+  }
+
+  /* —— 时间区 —— */
+  /* 等宽数字：逐位宽度一致，秒数换位时分隔符与后面的段都不会左右挪动。
+     direction 钉成 ltr：每段是一个独立的 flex 项，主轴方向跟着文字方向走，
+     不钉住的话 rtl 页面上时分秒会整体倒过来排——时间串的读序两个方向都一样。 */
+  [data-scope='timer'][data-part='area'] {
+    display: inline-flex;
+    align-items: baseline;
+    direction: ltr;
+    color: var(--xh-timer-area-fg, var(--xh-fg-default));
+    font-size: var(--xh-timer-digit-font-size, var(--xh-_timer-digit-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-semibold);
+    line-height: var(--xh-leading-tight);
+  }
+
+  [data-scope='timer'][data-part='area'][hidden] {
+    display: none;
+  }
+
+  /* 走完之后这串数字不再是活的信息，退一档；暂停在半路的仍是要盯着看的数，不退 */
+  [data-scope='timer'][data-part='area'][data-state='completed'] {
+    color: var(--xh-timer-completed-fg, var(--xh-fg-muted));
+  }
+
+  /* 记号只是排版，比数字弱一档、两侧留一点气口 */
+  [data-scope='timer'][data-part='separator'] {
+    padding-inline: var(--xh-timer-separator-px, var(--xh-space-0_5));
+    color: var(--xh-timer-separator-fg, var(--xh-fg-subtle));
+    font-weight: var(--xh-font-weight-regular);
+  }
+
+  /* —— 起停按钮 —— */
+  [data-scope='timer'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-timer-control-gap, var(--xh-_timer-control-gap));
+    block-size: var(--xh-timer-control-h, var(--xh-_timer-control-h));
+    padding-inline: var(--xh-timer-control-px, var(--xh-_timer-control-px));
+    border: var(--xh-stroke-thin) solid var(--xh-timer-control-border, var(--xh-border-control));
+    border-radius: var(--xh-timer-control-radius, var(--xh-shape-control));
+    background: var(--xh-timer-control-bg, var(--xh-bg-surface));
+    color: var(--xh-timer-control-fg, var(--xh-fg-default));
+    font-size: var(--xh-text-label-size);
+    font-weight: var(--xh-text-label-weight);
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='timer'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  [data-scope='timer'][data-part='control']:hover {
+    border-color: var(--xh-timer-control-border-hover, var(--xh-border-control-hover));
+    background: var(--xh-timer-control-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='timer'][data-part='control']:active {
+    background: var(--xh-timer-control-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='timer'][data-part='control']:focus-visible {
+    border-color: var(--xh-timer-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 作者把按钮禁掉时的样子。文字改用 fg-disabled 就不再叠 opacity，两条一起上会掉到读不出来 */
+  [data-scope='timer'][data-part='control']:disabled {
+    border-color: var(--xh-timer-control-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-timer-control-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+}

package/css/toast.css

@@ -1,8 +1,8 @@
 @layer xihan.motion {
   /*
-   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 toaster 的
-   * data-placement 反向选到卡片上，等于把一个组件的动效写进另一个组件的选择器里，
-   * 两边任意一侧改名都会静默失效。竖向一小段位移在九个位上都说得通。
+   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向就得从摞的
+   * data-placement 反向选到条子上，落位一改名整条动效静默失效。
+   * 竖向一小段位移在九个位上都说得通。
    */
   @keyframes xh-toast-in {
     from {
@@ -27,7 +27,7 @@
 
     to {
       opacity: 0;
-      translate: 0 var(--xh-motion-distance-sm);
+      translate: 0 var(--xh-motion-distance-md);
       scale: var(--xh-motion-scale-enter);
     }
   }
@@ -39,42 +39,95 @@
     --xh-toast-skin: 1;
   }
 
-  [data-scope='toast'][data-part='root'] {
+  /*
+   * 一摞 = 一整面视口大小的定位面：贴边靠 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;
-    gap: var(--xh-toast-gap, var(--xh-space-1));
-    inline-size: var(--xh-toast-w, 20rem);
+    /* 基线按默认落位 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'] {
+    /* 状态字形按控件指示符那一档走，与 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;
+    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-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)));
+       窄屏上不必再算一遍 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-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-3));
-    font-size: var(--xh-toast-font-size, var(--xh-font-size-sm));
-    line-height: var(--xh-toast-leading, var(--xh-leading-normal));
-    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+    box-shadow: var(--xh-toast-shadow, var(--xh-elevation-sheet));
+    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;
   }
@@ -85,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-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));
+    /* 与条子同字号同行高、不加粗：加粗是"这是标题、下面还有正文"的信号，
+       而轻提示没有正文——那一层是 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;
@@ -129,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);
@@ -154,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;
@@ -169,6 +222,10 @@
     font: inherit;
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
@@ -178,10 +235,15 @@
   }
 
   [data-scope='toast'][data-part='close-trigger']:hover:not(:disabled) {
-    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle));
+    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle-hover));
     color: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
   }
 
+  [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);
+  }
+
   /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
      但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
   [data-scope='toast'][data-part='close-trigger']:disabled {
@@ -193,4 +255,16 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='toast'][data-part='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;
+  }
 }

package/css/toggle-group.css

@@ -7,10 +7,36 @@
   /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 root 不设 gap。
      排布只能读 data-orientation——aria-orientation 在多选模式下连接层根本不输出（role=group 不收） */
   [data-scope='toggle-group'][data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 段的度量与字号走私有槽中转，与同族的分段控件一处对一处 */
+    --xh-_toggle-group-h: var(--xh-control-h-md);
+    --xh-_toggle-group-px: var(--xh-control-px-md);
+    --xh-_toggle-group-gap: var(--xh-control-gap-md);
+    --xh-_toggle-group-font-size: var(--xh-control-font-md);
+
     display: inline-flex;
     align-items: stretch;
   }
 
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='toggle-group'][data-part='root'][data-size='sm'] {
+    --xh-_toggle-group-h: var(--xh-control-h-sm);
+    --xh-_toggle-group-px: var(--xh-control-px-sm);
+    --xh-_toggle-group-gap: var(--xh-control-gap-sm);
+    --xh-_toggle-group-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-size='lg'] {
+    --xh-_toggle-group-h: var(--xh-control-h-lg);
+    --xh-_toggle-group-px: var(--xh-control-px-lg);
+    --xh-_toggle-group-gap: var(--xh-control-gap-lg);
+    --xh-_toggle-group-font-size: var(--xh-control-font-lg);
+  }
+
   [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
   }
@@ -45,15 +71,15 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-toggle-group-item-gap, var(--xh-control-gap-md));
-    block-size: var(--xh-toggle-group-item-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-toggle-group-item-px, var(--xh-control-px-md));
+    gap: var(--xh-toggle-group-item-gap, var(--xh-_toggle-group-gap));
+    block-size: var(--xh-toggle-group-item-h, var(--xh-_toggle-group-h));
+    padding-inline: var(--xh-toggle-group-item-px, var(--xh-_toggle-group-px));
     border: var(--xh-stroke-thin) solid var(--xh-_border);
     /* 中间段一律直角，圆角只由首末两端补回来 */
     border-radius: 0;
     background: var(--xh-_bg);
     color: var(--xh-_fg);
-    font-size: var(--xh-toggle-group-item-font-size, var(--xh-text-label-size));
+    font-size: var(--xh-toggle-group-item-font-size, var(--xh-_toggle-group-font-size));
     font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
     white-space: nowrap;

package/css/toggle.css

@@ -95,14 +95,20 @@
 
   /* —— 尺寸 —— */
   [data-scope='toggle'][data-part='root'][data-size='sm'] {
-    block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
-    font-size: var(--xh-font-size-sm);
+    block-size: var(--xh-toggle-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-toggle-px, var(--xh-control-px-sm));
+    font-size: var(--xh-toggle-font-size, var(--xh-control-font-sm));
   }
 
   [data-scope='toggle'][data-part='root'][data-size='lg'] {
-    block-size: var(--xh-control-h-lg);
-    padding-inline: var(--xh-control-px-lg);
-    font-size: var(--xh-font-size-lg);
+    block-size: var(--xh-toggle-h, var(--xh-control-h-lg));
+    padding-inline: var(--xh-toggle-px, var(--xh-control-px-lg));
+    font-size: var(--xh-toggle-font-size, var(--xh-control-font-lg));
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='toggle'][data-part='root'][hidden] {
+    display: none;
   }
 }

package/css/tone.css

@@ -9,15 +9,25 @@
  * 这里只声明私有槽，各组件的形态规则去消费。所以加一个语气是改这一处 6 条规则，
  * 而不是逐个组件写 6 遍。
  *
- * --xh-_tone-on 是实心底上的前景色，按实测对比度分派而非统一白字：
- * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
- * warning 2.70、info 3.47 都不到 4.5，这三族必须配深字。
+ * --xh-_tone-on 是实心底上的前景色，--xh-_tone-shift 是交互态要往哪个方向挪
+ * （永远背离前景色走，悬停与按下才不会反过来压低对比度）。两者都由 --xh-_tone 现推：
+ * 按 WCAG 的权重算出语气色的相对亮度，低于 0.179 配白字、高于配深字，shift 取反面。
+ * 0.179 是白字与黑字对比度相等的那一点，解析解。
+ *
+ * 现推是因为语气色可换肤：写死的分派只对本仓这套 600 档成立，使用者换一套调色板
+ * 配对就不再成立，而门禁只验本仓的色，换肤后的失配一路绿灯。
  *
- * --xh-_tone-shift 是交互态要往哪个方向挪：永远背离前景色走，悬停与按下才不会
- * 反过来压低对比度。白字族往深处挪，深字族往浅处挪。
+ * 够不到相对颜色语法的引擎退回逐族写死的那一份，取值是本仓这套色的实测结果：
+ * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
+ * warning 2.70、info 3.47 都不到 4.5，这三族配深字。兜底那一份用的是固定原语而不是
+ * --xh-fg-default：实心底本身是原语色、不随主题翻，配色若跟着主题翻，暗色下就会变成
+ * 白字压在浅黄底上（实测对比度 2.70）。
  *
- * 这两个槽用的都是固定原语而不是 --xh-fg-default：实心底本身是原语色、不随主题翻，
- * 配色若跟着主题翻，暗色下就会变成白字压在浅黄底上（实测对比度 2.70）。
+ * brand 是例外：那一族的色相归使用者，所以它的底与前景走 --xh-bg-brand / --xh-fg-on-brand
+ * 这两个语义令牌。缺省主题下它们就解析成 brand-600 与 neutral-0，与其余五族同值；
+ * 改写过品牌色的使用者只改这两个令牌，实心底与它上面的字就一起跟着走。
+ * 底与前景既然随主题翻，brand 的 shift 也必须随主题翻——现推那一档自动跟着底色走，
+ * 文件末尾那条深色覆盖是给兜底那一档用的。
  */
 @layer xihan.components {
   [data-tone] {
@@ -25,9 +35,6 @@
        而不是让 --xh-_tone 悬空——悬空会让下面每条 color-mix 变成计算期无效，
        用它的声明会整条失效，且 var() 兜底也救不回来（槽位是「已声明但无效」）。 */
     --xh-_tone: var(--xh-color-neutral-600);
-    /* 装饰性强调（色条、图标这类）用 500 档：600 是给实心底与文字用的强调档，
-       压在细长的色条上偏重。alert 与 toast 原本就用 500，接语气层不该改变它们的观感 */
-    --xh-_tone-soft: var(--xh-color-neutral-500);
     --xh-_tone-on: var(--xh-color-neutral-0);
     --xh-_tone-shift: var(--xh-color-neutral-950);
 
@@ -41,14 +48,19 @@
     /* 控件的可操作区边界要 3:1，兑了底色的 --xh-_tone-border 六族全在 1.44–2.18，够不着。
        这一支直接取主色本体；两族在各自的底上仍不够，在下面按主题单独兜 */
     --xh-_tone-border-control: var(--xh-_tone);
-    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅 */
-    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 72%, var(--xh-fg-default));
+    /* 装饰性强调（色条、指示条、锚点高亮这类）是非文字图形，同样要 3:1，
+       要求与可操作区边界一模一样，就直接跟着那一支走，连它按主题兜的两族一并继承。
+       要读得清的状态文字不在此列，那些走 --xh-_tone-fg */
+    --xh-_tone-soft: var(--xh-_tone-border-control);
+    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅。
+       兑到 60% 是实测出来的：这一档要同时压得住淡底的静态/悬停/按下三态、面与抬起的面
+       共五种底，72% 时六族里有三族够不到 4.5（最低 3.66），60% 全部达标且留有余量 */
+    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 60%, var(--xh-fg-default));
   }
 
   [data-tone='brand'] {
-    --xh-_tone: var(--xh-color-brand-600);
-    --xh-_tone-soft: var(--xh-color-brand-500);
-    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone: var(--xh-bg-brand);
+    --xh-_tone-on: var(--xh-fg-on-brand);
     --xh-_tone-shift: var(--xh-color-neutral-950);
   }
 
@@ -60,40 +72,37 @@
 
   [data-tone='danger'] {
     --xh-_tone: var(--xh-color-danger-600);
-    --xh-_tone-soft: var(--xh-color-danger-500);
     --xh-_tone-on: var(--xh-color-neutral-0);
     --xh-_tone-shift: var(--xh-color-neutral-950);
   }
 
   [data-tone='success'] {
     --xh-_tone: var(--xh-color-success-600);
-    --xh-_tone-soft: var(--xh-color-success-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
 
   [data-tone='warning'] {
     --xh-_tone: var(--xh-color-warning-600);
-    --xh-_tone-soft: var(--xh-color-warning-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
 
   [data-tone='info'] {
     --xh-_tone: var(--xh-color-info-600);
-    --xh-_tone-soft: var(--xh-color-info-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
 
   /* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
      语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
-     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它 */
+     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它。
+     data-theme 写在语气容器自己身上还是写在祖先上都算，两种用法都成立 */
   [data-tone='warning'] {
     --xh-_tone-border-control: var(--xh-color-warning-700);
   }
 
-  [data-theme='dark'] [data-tone='warning'] {
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='warning'] {
     --xh-_tone-border-control: var(--xh-color-warning-600);
   }
 
@@ -101,7 +110,33 @@
     --xh-_tone-border-control: var(--xh-color-neutral-600);
   }
 
-  [data-theme='dark'] [data-tone='neutral'] {
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='neutral'] {
     --xh-_tone-border-control: var(--xh-color-neutral-550);
   }
+
+  /* 把语气色转成线性 sRGB 分量、按 WCAG 的权重算出相对亮度：低于 0.179 前景取白、
+     高于取黑，挪动方向取前景的反面。三个通道写同一个式子，算出来的是纯白或纯黑；
+     alpha 显式写 1，不然会连语气色的透明度一起继承过来。
+     探针按这里实际用到的整个形态测，只测得起 color(from …) 的引擎不会落进半截支持。
+     上面各族写死的那一份是兜底：引擎不认这条语法时整块丢弃，退回那一份 */
+  @supports (color: color(from red srgb-linear clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) 0 0 / 1)) {
+    [data-tone] {
+      --xh-_tone-on: color(from var(--xh-_tone) srgb-linear
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) / 1);
+      --xh-_tone-shift: color(from var(--xh-_tone) srgb-linear
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1) / 1);
+    }
+  }
+
+  /* brand 的底与前景走语义令牌、随主题翻，所以它的 shift 也必须跟着翻，
+     否则深色下前景是深字而 shift 仍往深处挪，悬停与按下反而压低对比度
+     （实测 5.29 → 4.25 → 3.49，而不写 tone 的品牌链是 5.29 → 7.33 → 10.85）。
+     其余五族的底是固定原语、不随主题翻，shift 也就不必翻 */
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='brand'] {
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
 }

package/css/toolbar.css

@@ -101,7 +101,7 @@
   [data-scope='toolbar'][data-part='separator'] {
     flex: none;
     align-self: stretch;
-    border-radius: var(--xh-toolbar-separator-radius, var(--xh-radius-full));
+    border-radius: var(--xh-toolbar-separator-radius, var(--xh-shape-pill));
     background: var(--xh-toolbar-separator-color, var(--xh-border-default));
   }