@xihan-ui/styles 1.0.0 → 2.0.0

package/css/button-group.css

@@ -1,3 +1,10 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='button-group'] {
@@ -6,13 +13,31 @@
 
   /* 一组按钮连成一条：段与段之间不留缝，靠共边接上，所以不设 gap。
      排布只能读 data-orientation——role=group 不收 aria-orientation，连接层根本不输出它。
-     圆角槽位在容器上先收成 0，组内每段都取得到，两端的圆角再逐段补回来 */
+     圆角在容器上先收成 0，组内每段都取得到，两端的圆角再逐段补回来。
+
+     排不下时这里不折行、也不自己翻成竖排，两条都是有意的：
+     折行会把两端的圆角切在行末与行首——圆角只补在 :first-child 与 :last-child 上，
+     中间那两个角是直角，一条焊死的按钮条断在半路。
+     皮肤自己翻成竖排则会与 data-orientation 脱钩：合边的负外边距收哪个轴、
+     两端圆角补哪一对角、连接层给分隔线派的朝向，三处全部由 data-orientation 决定，
+     只有排布偷偷换了轴，线会横竖不对、角会补在错的两端。
+     朝向由使用者显式给 orientation="vertical"，三处才一起换过去。 */
   [data-scope='button-group'][data-part='root'] {
     /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
     isolation: isolate;
 
-    --xh-button-radius: 0;
+    /* 与下面几档同理，写私有槽而非 --xh-button-radius：
+       后者是使用者的入口，写死它，进了组的胶囊按钮就再也圆不起来 */
+    --xh-_button-group-radius: 0;
+
+    /* 段与段共边焊成一条，solid 段静息不落贴地软影、悬停那一档不抬：抬起其中一段，投影会压到
+       左右两段的面上。两档都只留实心面顶边那条高光；其余形态的影本来就是 none，这两支只被
+       button.css 的 solid 块消费。颜色不在这里灌：段自带 data-xh-action-variant，底 / 前景 / 描边由
+       家族形态矩阵按段自己的形态给出 */
+    --xh-_button-group-shadow-rest: var(--xh-_highlight-tone);
+    --xh-_button-group-shadow-hover: var(--xh-_highlight-tone);
+    --xh-_group-separator-size: calc(var(--xh-_button-group-h, var(--xh-control-h-md)) / 2);
 
     display: inline-flex;
     align-items: stretch;
@@ -26,12 +51,82 @@
     flex-direction: column;
   }
 
+  /* 撑满行宽：整组占满可用宽度，每段等分剩余空间。inline-flex 改成 flex：行内盒撑不满一行 */
+  [data-scope='button-group'][data-part='root'][data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* 分隔线不参与等分：它有自己的厚度，跟着拉伸就成了一条粗带 */
+  [data-scope='button-group'][data-part='root'][data-full-width] > *:not([data-xh-button-group-separator]) {
+    flex: 1;
+  }
+
   /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
      不补的话作者给节点加 hidden 后它照样显示 */
   [data-scope='button-group'][data-part='root'][hidden] {
     display: none;
   }
 
+  /* —— 段间的线 —— */
+  /* 装饰性的一条线，读屏不念。段本来靠共边连成一体，插了它就是把一排按钮分成几组。
+     朝向是这条线自己的（横排里是竖线），与 root 的排布相反 */
+  [data-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);
+  }
+
+  [data-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)));
+  }
+
+  [data-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 上，
+     置灰的原生按钮不收指针事件，指针形状只能由这一层给 */
+  [data-scope='button-group'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 段都按不动了，段间那条线跟着退到弱边一档；换色按 micro 走一遍，
+     与两侧那几段自己的禁用过渡同拍 */
+  [data-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，线整条消失，
+       几组按钮就连成了一长串。换成前景色画回来 */
+    [data-scope='button-group'][data-part='root'] > [data-xh-button-group-separator] {
+      background: CanvasText;
+    }
+
+    [data-scope='button-group'][data-part='root'][data-variant='outline']::after {
+      border-color: ButtonText;
+    }
+  }
+
   /* —— 尺寸 —— */
   /* 高度、内边距、间距、字号在容器上写一次，沿继承流给组内每一段。
      三档都写出来：自定义属性会一路继承，组里再套一组时内层不写就会沿用外层的档。
@@ -58,34 +153,48 @@
   }
 
   /* —— 形态 —— */
-  /* 只写按钮暴露出来的颜色槽位：段自己写了形态时走的是它自己那条规则，这里的槽位不参与。
-     用哪族颜色由根上的 data-tone 决定，语气槽沿继承流下来，没写语气就沿用品牌/中性配色 */
+  /* 组的形态由适配器下发到每一段（段自己写了的优先），段的颜色由家族形态矩阵给出；
+     这里只定段间那条线在各档面上的颜色与浓淡，用哪族颜色由根上的 data-tone 决定 */
   [data-scope='button-group'][data-part='root'][data-variant='solid'] {
-    --xh-button-bg: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-button-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
-    --xh-button-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
-    --xh-button-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-button-group-separator-color: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-button-group-separator-opacity: 0.24;
   }
 
   [data-scope='button-group'][data-part='root'][data-variant='subtle'] {
-    --xh-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-color: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-opacity: 0.16;
+  }
+
+  [data-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));
+  }
+
+  [data-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;
   }
 
-  [data-scope='button-group'][data-part='root'][data-variant='outline'],
   [data-scope='button-group'][data-part='root'][data-variant='ghost'] {
-    --xh-button-bg: transparent;
-    --xh-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
-    --xh-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-color: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-button-group-separator-opacity: 0.16;
   }
 
-  /* 段的描边归组画（两个适配器各一条选择器：Vue 的段就是直接子节点，WC 的段在行为宿主里面）：合边本来就是组的事，按钮那边没有描边色的槽位可以流 */
-  [data-scope='button-group'][data-part='root'][data-variant='outline'] > *,
-  [data-scope='button-group'][data-part='root'][data-variant='outline'] > * [data-scope='button'][data-part='root'] {
-    border-color: var(--xh-_tone-border-control, var(--xh-border-control));
+  /* outline 的外框由组根统一绘制，组内每一段都不再各画一圈边框（段的形态矩阵描边被这一条压平）。 */
+  [data-scope='button-group'][data-part='root'][data-variant='outline']
+    > [data-scope='button'][data-part='root'],
+  [data-scope='button-group'][data-part='root'][data-variant='outline']
+    > * > [data-scope='button'][data-part='root'] {
+    border-color: transparent;
   }
 
   /* —— 合边 —— */
@@ -96,12 +205,15 @@
   }
 
   /* 后一段往回挪一个描边宽度，相邻的两条边重合成一条。
-     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
-  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > * + * {
+     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴。
+     分隔线两侧不合边：那两段本来就是被这条线分开的，再压一次会把线盖掉一半 */
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal']
+    > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
     margin-inline-start: calc(-1 * var(--xh-stroke-thin));
   }
 
-  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > * + * {
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical']
+    > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
     margin-block-start: calc(-1 * var(--xh-stroke-thin));
   }
 
@@ -112,6 +224,16 @@
     z-index: 1;
   }
 
+  /* 独立 Button 按下时缩一档；组内段却靠共边重叠一像素，单段缩放会同时撕开两侧接缝。
+     组内仍保留 active 换底与撤高光，只把会改变外轮廓几何的 scale 收掉（§9.2 允许的只换面）；
+     键盘与触屏的按压由 Headless 投影 data-pressed，与指针 :active 同一档。 */
+  [data-scope='button-group'][data-part='root']
+    > [data-scope='button'][data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]),
+  [data-scope='button-group'][data-part='root']
+    > * > [data-scope='button'][data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+    scale: none;
+  }
+
   /* —— 两端圆角 —— */
   /* 逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
      只认直接子节点：段之间插了别的节点时宁可退化成直角，也不要圆错位置 */

package/css/button.css

@@ -1,6 +1,13 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 独立 Button 皮肤与 full bundle 都从同一份 Family Recipe 取得布局、状态和命中区。 */
+@import '../family/action-control.css';
+
 @layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  /* 独立皮肤可单独引入，spinner 动画名不能依赖别的组件文件。 */
   @keyframes xh-spin {
     to {
       transform: rotate(360deg);
@@ -9,142 +16,152 @@
 }
 
 @layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='button'] {
     --xh-button-skin: 1;
   }
 
+  /* 四种形态的底 / 前景 / 描边由家族形态矩阵按 data-xh-action-variant 给出（缺省 solid 由连接层显式投影，
+     只有 Button 缺省品牌实心）；这里只把公开颜色槽桥接到矩阵之前：使用者槽 → 形态矩阵 → 家族缺省，
+     再映射几何、海拔与顶光。状态选择器、命中区与尺寸 profile 不在这里复制。 */
   [data-scope='button'][data-part='root'] {
-    /* 私有槽位：组件令牌 → 语义令牌两级回退，变体只改这几个槽位 */
-    --xh-_bg: var(--xh-button-bg, var(--xh-bg-subtle));
-    --xh-_bg-hover: var(--xh-button-bg-hover, var(--xh-bg-subtle-hover));
-    --xh-_bg-active: var(--xh-button-bg-active, var(--xh-bg-subtle-active));
-    --xh-_fg: var(--xh-button-fg, var(--xh-fg-default));
-
-    /* 作者塞进来的图标跟着按钮的尺寸档走：xh-icon 的直径读的就是这个继承槽，
-       它自己显式写了 size 时特异性更高，仍以作者写的为准 */
-    --xh-icon-size: var(--xh-button-icon-size, var(--xh-glyph-size-md));
+    --xh-action-bg-rest: var(--xh-button-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-button-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-button-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-button-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-loading: var(--xh-button-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-fg-rest: var(--xh-button-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-button-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-button-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-button-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-loading: var(--xh-button-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-highlight-pressed: transparent;
+    /* 海拔只有 solid 一档有：其余形态按 §8.3 无影，私有槽在下面的 solid 块里才被赋值 */
+    --xh-_button-shadow-rest: var(--xh-button-shadow, none);
+    --xh-_button-shadow-hover: var(--xh-button-shadow-hover, none);
+    --xh-_button-shadow-pressed: none;
+    --xh-action-shadow-rest: var(--xh-_button-shadow-rest);
+    --xh-action-shadow-hover: var(--xh-_button-shadow-hover);
+    --xh-action-shadow-pressed: var(--xh-_button-shadow-pressed);
+    --xh-action-radius: var(--xh-button-radius, var(--xh-_button-radius));
+    /* 成组时几何从 ButtonGroup 的私有槽取：高度、内距、间距与字号沿继承流下来 */
+    --xh-action-visual-size: var(--xh-button-h, var(--xh-_button-group-h, var(--xh-_action-profile-visual-size)));
+    --xh-action-padding-inline: var(--xh-button-px, var(--xh-_button-group-px, var(--xh-_action-profile-padding-inline)));
+    --xh-action-gap: var(--xh-button-gap, var(--xh-_button-group-gap, var(--xh-_action-profile-gap)));
+    --xh-action-font-size: var(--xh-button-font-size, var(--xh-_button-group-font-size, var(--xh-_action-profile-font-size)));
+    /* 圆角只有一个身份：普通 control 的 4px，与 toggle / button-group 一致，按钮没有 shape 轴；
+       成组时由按钮组接管相接侧，要换档写 --xh-button-radius */
+    --xh-_button-radius: var(--xh-_button-group-radius, var(--xh-shape-control));
+    --xh-icon-size: var(--xh-button-icon-size, var(--xh-_action-profile-glyph-size));
 
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-button-gap, var(--xh-_button-group-gap, var(--xh-control-gap-md)));
-    block-size: var(--xh-button-h, var(--xh-_button-group-h, var(--xh-control-h-md)));
-    padding-inline: var(--xh-button-px, var(--xh-_button-group-px, var(--xh-control-px-md)));
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-button-radius, var(--xh-shape-control));
-    background: var(--xh-_bg);
-    color: var(--xh-_fg);
-    font-size: var(--xh-button-font-size, var(--xh-_button-group-font-size, var(--xh-text-label-size)));
     font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='button'][data-part='root']:hover {
-    background: var(--xh-_bg-hover);
-  }
-
-  [data-scope='button'][data-part='root']:active {
-    background: var(--xh-_bg-active);
   }
 
-  [data-scope='button'][data-part='root']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* Button soft 是 §5.3 登记的 raised 消费者：solid 一档静息带顶光与贴地软影，悬停抬到 raised，按下只留顶光。
+     成组时段与段共边焊成一条，静息不落软影、悬停不抬起——投影会压到左右两段的面上，
+     ButtonGroup 用 --xh-_button-group-shadow-rest / -hover 只留顶光 */
+  [data-scope='button'][data-part='root'][data-variant='solid'] {
+    --xh-action-highlight-pressed: var(--xh-_highlight-tone);
+    --xh-_button-shadow-rest: var(--xh-_button-group-shadow-rest, var(--xh-_highlight-tone), var(--xh-material-soft-shadow));
+    --xh-_button-shadow-hover: var(--xh-_button-group-shadow-hover, var(--xh-_highlight-tone), var(--xh-elevation-raised));
+    --xh-_button-shadow-pressed: var(--xh-_highlight-tone);
   }
 
-  [data-scope='button'][data-part='root'][data-disabled],
-  [data-scope='button'][data-part='root'][data-loading] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
+  /* 实心面用对比前景作内环，再加品牌外环；不覆盖表面 box-shadow。 */
+  [data-scope='button'][data-part='root'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* —— 变体 —— */
-  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的品牌/中性配色 */
-  [data-scope='button'][data-part='root'][data-variant='solid'] {
-    --xh-_bg: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
-    --xh-_bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
-    --xh-_fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+  [data-scope='button'][data-part='root'][data-xh-action-variant='solid']:focus-visible::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * (var(--xh-ring-width) + var(--xh-stroke-thin)));
+    border: var(--xh-ring-width) solid var(--xh-ring-focus);
+    border-radius: inherit;
+    pointer-events: none;
   }
 
-  [data-scope='button'][data-part='root'][data-variant='subtle'] {
-    --xh-_bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  /* icon profile 已经给出正方视觉盒；Button 的公开 px 槽不能把它重新撑开。 */
+  [data-scope='button'][data-part='root'][data-icon-only] {
+    --xh-action-padding-inline: 0;
   }
 
-  [data-scope='button'][data-part='root'][data-variant='outline'] {
-    --xh-_bg: transparent;
-    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
-
-    border-color: var(--xh-_tone-border-control, var(--xh-border-control));
+  [data-scope='button'][data-part='root'][data-full-width] {
+    inline-size: 100%;
   }
 
-  [data-scope='button'][data-part='root'][data-variant='ghost'] {
-    --xh-_bg: transparent;
-    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  [data-scope='button'][data-part='label'],
+  [data-scope='button'][data-part='prefix'],
+  [data-scope='button'][data-part='suffix'],
+  [data-scope='button'][data-part='indicator'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: inherit;
   }
 
-  /* —— 尺寸 —— */
-  [data-scope='button'][data-part='root'][data-size='sm'] {
-    --xh-icon-size: var(--xh-button-icon-size, var(--xh-glyph-size-sm));
-
-    block-size: var(--xh-button-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-button-px, var(--xh-control-px-sm));
-    font-size: var(--xh-button-font-size, var(--xh-control-font-sm));
+  [data-scope='button'][data-part='label'] {
+    min-inline-size: 0;
   }
 
-  [data-scope='button'][data-part='root'][data-size='lg'] {
-    --xh-icon-size: var(--xh-button-icon-size, var(--xh-glyph-size-lg));
-
-    block-size: var(--xh-button-h, var(--xh-control-h-lg));
-    padding-inline: var(--xh-button-px, var(--xh-control-px-lg));
-    font-size: var(--xh-button-font-size, var(--xh-control-font-lg));
+  [data-scope='button'][data-part='prefix'],
+  [data-scope='button'][data-part='suffix'],
+  [data-scope='button'][data-part='indicator'] {
+    flex: none;
+    line-height: 0;
   }
 
-  /* 只有图标：左右内距清零，宽度靠比例跟住当前档的高度——换尺寸档时仍是正方形，
-     不必把档位抄进行内样式。写在尺寸档之后，压得住三档各自的 padding-inline */
-  [data-scope='button'][data-part='root'][data-icon-only] {
-    padding-inline: 0;
-    aspect-ratio: 1;
+  [data-scope='button'][data-part='prefix'] > svg,
+  [data-scope='button'][data-part='suffix'] > svg,
+  [data-scope='button'][data-part='indicator'],
+  [data-scope='button'][data-part='indicator'] > svg {
+    inline-size: var(--xh-icon-size);
+    block-size: var(--xh-icon-size);
   }
 
-  [data-scope='button'][data-part='root'][data-full-width] {
-    inline-size: 100%;
+  /* indicator 常驻占位；loading 只切换绘制，不靠删节点改变按钮宽度。 */
+  [data-scope='button'][data-part='indicator'] {
+    visibility: hidden;
   }
 
-  [data-scope='button'][data-part='indicator'] {
-    display: inline-flex;
-    animation: xh-spin var(--xh-button-spin-duration, var(--xh-spin-duration)) linear infinite;
+  [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
+    visibility: visible;
+    animation: xh-spin var(--xh-button-spin-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 减少动效：指示器停转，"还在忙"由按钮自身的挂起样式与指示器图标继续表达。
-     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='button'][data-part='indicator'] {
+    [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='button'][data-part='indicator'] {
+  :where([data-motion='reduce'])
+    [data-scope='button'][data-part='root'][data-loading]
+    [data-scope='button'][data-part='indicator'] {
     animation: none;
   }
 
-  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
-     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='button'][data-part='root'][hidden] {
+  [data-scope='button'][data-part='root'][hidden],
+  [data-scope='button'][data-part='label'][hidden],
+  [data-scope='button'][data-part='prefix'][hidden],
+  [data-scope='button'][data-part='suffix'][hidden],
+  [data-scope='button'][data-part='indicator'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    [data-scope='button'][data-part='root'][data-xh-action-variant='solid']:focus-visible::before {
+      border-color: Highlight;
+    }
+  }
+
+  @media print {
+    [data-scope='button'][data-part='root'] {
+      box-shadow: none;
+    }
+
+    [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
+      animation: none;
+    }
+  }
 }