@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/breadcrumb.css

@@ -0,0 +1,232 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 breadcrumb 样式。 */
+
+/* 链接归 Collection Item 导航当前（nav 语境）：面、字色、字重、光标与按压时间线由家族配方按投影的家族角色给，
+   本皮肤只映射桥接槽；当前页由连接层投影 data-xh-collection-terminal，走家族的 terminal 态 */
+@import '../family/collection-item.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-breadcrumb {
+    --xh-breadcrumb-skin: 1;
+  }
+
+  /* 根节点是 nav 地标，不参与排版：整条路径的行为全在 list 上，
+     这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
+  .xh-scope-breadcrumb[data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
+
+    /* 尺寸档只换这两个私有槽，列表与链接都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_breadcrumb-font-size: var(--xh-control-font-md);
+    /* 链接自带 4px 横向内衬，列表间距再给 4px：文字到分隔符一共 8px */
+    --xh-_breadcrumb-gap: var(--xh-space-1);
+    /* 当前项与链接悬停的强调色随语气走。没写 data-tone 时 --xh-_tone-fg 没被声明，
+       退回原来的前景色。聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_breadcrumb-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
+
+    color: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。间距量的是路径里文字与分隔符之间的距离，
+     不在控件间距那把尺上（那把尺的大档与中档同值），三档一律取空间尺 */
+  .xh-scope-breadcrumb[data-part='root'][data-size='sm'] {
+    --xh-_breadcrumb-font-size: var(--xh-control-font-sm);
+    --xh-_breadcrumb-gap: var(--xh-space-0_5);
+  }
+
+  .xh-scope-breadcrumb[data-part='root'][data-size='lg'] {
+    --xh-_breadcrumb-font-size: var(--xh-control-font-lg);
+    --xh-_breadcrumb-gap: var(--xh-space-2);
+  }
+
+  /* ol 的项目符号与内外边距是 UA 给的，库里没有全局 preflight，只能在这儿自己抹平 */
+  .xh-scope-breadcrumb[data-part='list'] {
+    display: flex;
+    align-items: center;
+    /* 层级多到一行放不下就换行：宁可折行，也不要把路径压扁或撑出横向滚动 */
+    flex-wrap: wrap;
+    gap: var(--xh-breadcrumb-gap, var(--xh-_breadcrumb-gap));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .xh-scope-breadcrumb[data-part='list'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-breadcrumb[data-part='item'] {
+    display: inline-flex;
+    align-items: center;
+    /* 库里没有全局 preflight，列表项的外边距在这里自己抹平 */
+    margin: 0;
+    /* 允许被压缩，链接内部的省略号才有生效的余地 */
+    min-inline-size: 0;
+  }
+
+  .xh-scope-breadcrumb[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + 品牌字（写了语气随语气），
+     按下 pressed 200 + 深一档品牌字（品牌字压在 200 档上只有 4:1，按下必须取 strong）；
+     链接盒最少 24px 高，够得上目标尺寸下限；当前页那条不再是"可去的地方"：连接层投影
+     data-xh-collection-terminal，家族给透明面 + 随语气的 fg-default + medium + cursor default，不响应悬停与按下，
+     并压过它同时带的 aria-disabled 禁用面。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
+  .xh-scope-breadcrumb[data-part='link'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-breadcrumb-link-px, var(--xh-space-1));
+    --xh-collection-radius: var(--xh-breadcrumb-link-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    /* 家族会把 --xh-icon-size 写在条目上；不映射，root 上随文字形档的那支会被家族的 md 档盖掉 */
+    --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
+    --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-breadcrumb-link-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-breadcrumb-link-fg-hover, var(--xh-_tone-fg, var(--xh-fg-brand)));
+    --xh-collection-bg-pressed: var(--xh-breadcrumb-link-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-pressed: var(--xh-breadcrumb-link-fg-pressed, var(--xh-_tone-fg, var(--xh-fg-brand-strong)));
+    --xh-collection-fg-terminal: var(--xh-breadcrumb-link-fg-current, var(--xh-_breadcrumb-accent-text));
+    --xh-collection-font-weight-terminal: var(--xh-breadcrumb-link-font-weight-current, var(--xh-font-weight-medium));
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-breadcrumb-link-gap, var(--xh-space-1));
+    min-block-size: var(--xh-breadcrumb-link-h, var(--xh-control-action-size));
+    /* 一层的名字可能很长（文档标题、订单号），压不住会把整条路径撑开 */
+    max-inline-size: var(--xh-breadcrumb-link-max-w, var(--xh-nav-link-max-w));
+    /* 行高随 root 的行距槽：家族基础块给条目写了 leading-normal，这里接回 root 那一支 */
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-breadcrumb[data-part='link'][hidden] {
+    display: none;
+  }
+
+  /* 图标位跟着字号走，与文字并排；不参与省略，压缩时先压文字 */
+  .xh-scope-breadcrumb[data-part='link-icon'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-breadcrumb-link-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-breadcrumb-link-icon-size, var(--xh-glyph-size-text));
+  }
+
+  .xh-scope-breadcrumb[data-part='link-icon'][hidden] {
+    display: none;
+  }
+
+  /* 分隔符是纯视觉占位，读屏那边已被 aria-hidden 摘掉；折叠位是一个列表项，只给里面的触发器排位 */
+  .xh-scope-breadcrumb[data-part='separator'],
+  .xh-scope-breadcrumb[data-part='ellipsis'] {
+    display: inline-flex;
+    flex: none;
+    /* 两者也是列表项，宿主给 li 的外边距会把它们顶离同一行 */
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    /* 分隔符是 aria-hidden 的纯装饰，取最弱一档前景，不与可点的链接抢层级 */
+    color: var(--xh-breadcrumb-separator-fg, var(--xh-fg-disabled));
+    user-select: none;
+  }
+
+  .xh-scope-breadcrumb[data-part='separator'][hidden],
+  .xh-scope-breadcrumb[data-part='ellipsis'][hidden] {
+    display: none;
+  }
+
+  /* 分隔符常常是个图标：给一个跟着字号走的方框，斜杠与图标混用时基线才不跳 */
+  .xh-scope-breadcrumb[data-part='separator'] {
+    inline-size: var(--xh-breadcrumb-separator-size, var(--xh-glyph-size-text));
+  }
+
+  .xh-scope-breadcrumb[data-part='ellipsis'] {
+    min-inline-size: var(--xh-breadcrumb-ellipsis-size, var(--xh-space-5));
+  }
+
+  /* 被收起的层级与展开后的折叠位都带 hidden：紧跟在它后面的分隔符一并收起，路径里不留两个挨着的分隔符 */
+  .xh-scope-breadcrumb[data-part='item'][hidden] + .xh-scope-breadcrumb[data-part='separator'],
+  .xh-scope-breadcrumb[data-part='ellipsis'][hidden] + .xh-scope-breadcrumb[data-part='separator'] {
+    display: none;
+  }
+
+  /* 折叠位里的触发器与链接同属一行导航条目（nav 语境）：面、字色、按压时间线由家族给，几何与链接同一把尺——
+     行内衬一格、control 圆角、字号随档；不写内容时由下面画一枚省略号字形 */
+  .xh-scope-breadcrumb[data-part='ellipsis-trigger'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-space-1);
+    --xh-collection-radius: var(--xh-shape-control);
+    --xh-collection-font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
+    --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-bg-subtle);
+    --xh-collection-fg-hover: var(--xh-_tone-fg, var(--xh-fg-brand));
+    --xh-collection-bg-pressed: var(--xh-bg-subtle-hover);
+    --xh-collection-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--xh-breadcrumb-ellipsis-trigger-h, var(--xh-breadcrumb-link-h, var(--xh-control-action-size)));
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
+  }
+
+  .xh-scope-breadcrumb[data-part='ellipsis-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-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  .xh-scope-breadcrumb[data-part='ellipsis-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形（一条斜线）；作者写了自己的字符或图形，这条即不命中 */
+  .xh-scope-breadcrumb[data-part='separator']: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-slash) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-slash) center / contain no-repeat;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-breadcrumb[data-part='ellipsis-trigger']:empty::before,
+    .xh-scope-breadcrumb[data-part='separator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-breadcrumb[data-part='ellipsis-trigger']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-breadcrumb[data-part='ellipsis-trigger']:is([aria-disabled='true'], [data-disabled]):empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/button-group.css

@@ -0,0 +1,261 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 button group 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-button-group {
+    --xh-button-group-skin: 1;
+  }
+
+  /* 一组按钮连成一条：段与段之间不留缝，靠共边接上，所以不设 gap。
+     排布只能读 data-orientation——role=group 不收 aria-orientation，连接层根本不输出它。
+     圆角在容器上先收成 0，组内每段都取得到，两端的圆角再逐段补回来。
+
+     排不下时这里不折行、也不自己翻成竖排，两条都是有意的：
+     折行会把两端的圆角切在行末与行首——圆角只补在 :first-child 与 :last-child 上，
+     中间那两个角是直角，一条焊死的按钮条断在半路。
+     皮肤自己翻成竖排则会与 data-orientation 脱钩：合边的负外边距收哪个轴、
+     两端圆角补哪一对角、连接层给分隔线派的朝向，三处全部由 data-orientation 决定，
+     只有排布偷偷换了轴，线会横竖不对、角会补在错的两端。
+     朝向由使用者显式给 orientation="vertical"，三处才一起换过去。 */
+  .xh-scope-button-group[data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 与下面几档同理，写私有槽而非 --xh-button-radius：
+       后者是使用者的入口，写死它，进了组的胶囊按钮就再也圆不起来 */
+    --xh-_button-group-radius: 0;
+
+    /* 段与段共边焊成一条，solid 段悬停那一档不抬：抬起其中一段，投影会压到左右两段的面上。
+       其余形态的影本来就是 none，这一支只被 button.css 的 solid 块消费。颜色不在这里灌：段自带
+       data-xh-action-variant，底 / 前景 / 描边由家族形态矩阵按段自己的形态给出 */
+    --xh-_button-group-shadow-hover: none;
+    --xh-_group-separator-size: calc(var(--xh-_button-group-h, var(--xh-control-h-md)) / 2);
+
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 撑满行宽：整组占满可用宽度，每段等分剩余空间。inline-flex 改成 flex：行内盒撑不满一行 */
+  .xh-scope-button-group[data-part='root'][data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* 分隔线不参与等分：它有自己的厚度，跟着拉伸就成了一条粗带 */
+  .xh-scope-button-group[data-part='root'][data-full-width] > *:not([data-xh-button-group-separator]) {
+    flex: 1;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-button-group[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 段间的线 —— */
+  /* 装饰性的一条线，读屏不念。段本来靠共边连成一体，插了它就是把一排按钮分成几组。
+     朝向是这条线自己的（横排里是竖线），与 root 的排布相反 */
+  .xh-scope-button-group[data-part='root'] > [data-xh-button-group-separator] {
+    flex: none;
+    align-self: center;
+    z-index: 1;
+    border-radius: var(--xh-button-group-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-button-group-separator-color, var(--xh-fg-default));
+    opacity: var(--xh-button-group-separator-opacity, var(--xh-control-separator-opacity));
+    pointer-events: none;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-button-group[data-part='root'] > [data-xh-button-group-separator][data-orientation='vertical'] {
+    inline-size: var(--xh-button-group-separator-thickness, var(--xh-stroke-thin));
+    block-size: var(
+      --xh-button-group-separator-size,
+      var(--xh-_group-separator-size)
+    );
+    margin-inline-start: calc(-1 * var(--xh-button-group-separator-thickness, var(--xh-stroke-thin)));
+  }
+
+  .xh-scope-button-group[data-part='root'] > [data-xh-button-group-separator][data-orientation='horizontal'] {
+    block-size: var(--xh-button-group-separator-thickness, var(--xh-stroke-thin));
+    inline-size: var(
+      --xh-button-group-separator-size,
+      var(--xh-_group-separator-size)
+    );
+    margin-block-start: calc(-1 * var(--xh-button-group-separator-thickness, var(--xh-stroke-thin)));
+  }
+
+  /* 整组禁用：段真正的禁用由适配器落到每一段的原生 disabled 上，
+     置灰的原生按钮不收指针事件，指针形状只能由这一层给 */
+  .xh-scope-button-group[data-part='root'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 段都按不动了，段间那条线跟着退到弱边一档；换色按 micro 走一遍，
+     与两侧那几段自己的禁用过渡同拍 */
+  .xh-scope-button-group[data-part='root'] > [data-xh-button-group-separator][data-disabled] {
+    background: var(--xh-button-group-separator-color-disabled, var(--xh-border-subtle));
+    opacity: var(--xh-button-group-separator-opacity-disabled, var(--xh-control-separator-disabled-opacity));
+  }
+
+  @media (forced-colors: active) {
+    /* 段间那条线画的是一块纯底色，这一档里底色被统一换成 Canvas，线整条消失，
+       几组按钮就连成了一长串。换成前景色画回来 */
+    .xh-scope-button-group[data-part='root'] > [data-xh-button-group-separator] {
+      background: CanvasText;
+    }
+
+    .xh-scope-button-group[data-part='root'][data-variant='outline']::after {
+      border-color: ButtonText;
+    }
+  }
+
+  /* —— 尺寸 —— */
+  /* 高度、内边距、间距、字号在容器上写一次，沿继承流给组内每一段。
+     三档都写出来：自定义属性会一路继承，组里再套一组时内层不写就会沿用外层的档。
+     写私有槽而非 --xh-button-*：后者是使用者的入口，组内某一枚自己写了档位时要压得住容器 */
+  .xh-scope-button-group[data-part='root'][data-size='sm'] {
+    --xh-_button-group-h: var(--xh-control-h-sm);
+    --xh-_button-group-px: var(--xh-control-px-sm);
+    --xh-_button-group-gap: var(--xh-control-gap-sm);
+    --xh-_button-group-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-button-group[data-part='root'][data-size='md'] {
+    --xh-_button-group-h: var(--xh-control-h-md);
+    --xh-_button-group-px: var(--xh-control-px-md);
+    --xh-_button-group-gap: var(--xh-control-gap-md);
+    --xh-_button-group-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-button-group[data-part='root'][data-size='lg'] {
+    --xh-_button-group-h: var(--xh-control-h-lg);
+    --xh-_button-group-px: var(--xh-control-px-lg);
+    --xh-_button-group-gap: var(--xh-control-gap-lg);
+    --xh-_button-group-font-size: var(--xh-control-font-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 组的形态由适配器下发到每一段（段自己写了的优先），段的颜色由家族形态矩阵给出；
+     这里只定段间那条线在各档面上的颜色与浓淡，用哪族颜色由根上的 data-tone 决定 */
+  .xh-scope-button-group[data-part='root'][data-variant='solid'] {
+    --xh-button-group-separator-color: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-button-group-separator-opacity: 0.24;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-variant='subtle'] {
+    --xh-button-group-separator-color: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-opacity: 0.16;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-variant='outline'] {
+    --xh-button-group-separator-color: var(--xh-_tone-border-control, var(--xh-border-control));
+    --xh-button-group-separator-opacity: 1;
+
+    position: relative;
+    border-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-button-group[data-part='root'][data-variant='outline']::after {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border: var(--xh-stroke-thin) solid
+      var(--xh-button-group-outline-color, var(--xh-_tone-border-control, var(--xh-border-control)));
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-variant='ghost'] {
+    --xh-button-group-separator-color: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-opacity: 0.16;
+  }
+
+  /* outline 的外框由组根统一绘制，组内每一段都不再各画一圈边框（段的形态矩阵描边被这一条压平）。 */
+  .xh-scope-button-group[data-part='root'][data-variant='outline']
+    > .xh-scope-button[data-part='root'],
+  .xh-scope-button-group[data-part='root'][data-variant='outline']
+    > * > .xh-scope-button[data-part='root'] {
+    border-color: transparent;
+  }
+
+  /* —— 合边 —— */
+  /* 相邻两段的边重合在同一像素上，谁的描边浮在上面必须能指定，
+     因此每一段都是定位元素——静态元素的 z-index 不生效 */
+  .xh-scope-button-group[data-part='root'] > * {
+    position: relative;
+  }
+
+  /* 共边只画一次：后一段不画起始边，由前一段的末端边承担。墨色描边半透明，两条重合会加深。
+     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴。
+     分隔线两侧不合边：那两段本来就是被这条线分开的 */
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal']
+    > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
+    border-inline-start-width: 0;
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical']
+    > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
+    border-block-start-width: 0;
+  }
+
+  /* 悬停或拿到焦点的那一段抬到最上层：焦点环画在元素外侧，
+     不抬层就会被后一段的底色与描边盖掉一半 */
+  .xh-scope-button-group[data-part='root'] > *:hover,
+  .xh-scope-button-group[data-part='root'] > *:focus-within {
+    z-index: 1;
+  }
+
+  /* 独立 Button 按下时缩一档；组内段却靠共边重叠一像素，单段缩放会同时撕开两侧接缝。
+     组内仍保留 active 换底与撤高光，只把会改变外轮廓几何的 scale 收掉（允许的只换面）；
+     键盘与触屏的按压由 Headless 投影 data-pressed，与指针 :active 同一档。 */
+  .xh-scope-button-group[data-part='root']
+    > .xh-scope-button[data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]),
+  .xh-scope-button-group[data-part='root']
+    > * > .xh-scope-button[data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+    scale: none;
+  }
+
+  /* —— 两端圆角 —— */
+  /* 逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
+     只认直接子节点：段之间插了别的节点时宁可退化成直角，也不要圆错位置 */
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal'] > *:first-child,
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal'] > *:first-child .xh-scope-button[data-part='root'] {
+    border-start-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal'] > *:last-child,
+  .xh-scope-button-group[data-part='root'][data-orientation='horizontal'] > *:last-child .xh-scope-button[data-part='root'] {
+    border-start-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical'] > *:first-child,
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical'] > *:first-child .xh-scope-button[data-part='root'] {
+    border-start-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical'] > *:last-child,
+  .xh-scope-button-group[data-part='root'][data-orientation='vertical'] > *:last-child .xh-scope-button[data-part='root'] {
+    border-end-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+}