@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/radio-group.css

@@ -0,0 +1,598 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 radio group 样式。 */
+
+@import '../family/action-control.css';
+@import '../family/choice-card.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-radio-group {
+    --xh-radio-group-skin: 1;
+  }
+
+  .xh-scope-radio-group[data-part='root'] {
+    /* 尺寸档只换这几个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器；
+       segment-h / segment-px 只给 segmented 形态的段用 */
+    --xh-_radio-group-item-gap: var(--xh-control-gap-md);
+    --xh-_radio-group-font-size: var(--xh-control-font-md);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-md);
+    --xh-_radio-group-segment-h: var(--xh-control-h-md);
+    --xh-_radio-group-segment-px: var(--xh-control-px-md);
+    /* 条目图标跟着尺寸档换直径，放进来的图标组件与裸 svg 都从这一支取 */
+    --xh-icon-size: var(--xh-radio-group-icon-size, var(--xh-glyph-size-md));
+    /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
+    --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
+    /* 条目是圆圈的承载面：行自己坐画布走 100 → 200，行面上的圆圈按淡底容器阶梯再上一档（200 → 300）。
+       两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
+       圆圈按下读同一支私有槽，即与宿主的 host 槽同源 */
+    --xh-_radio-group-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_radio-group-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    /* 标题与条目都是根的直接子节点，一支 gap 同时管「标题到集合」与「条目之间」：
+       集合标题与集合隔 --xh-space-2，同组条目之间也是同一档紧密关系 */
+    display: flex;
+    gap: var(--xh-radio-group-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 横排一行摆不下时条目落到下一行。不换行的话它们只会被压窄，
+     文字逐字折行、每个条目变成一根竖条 */
+  .xh-scope-radio-group[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  /* card 形态：卡片撑满竖排的一列；横排时各卡等分一行、按内容等高，窄到放不下两张就折到下一行 */
+  .xh-scope-radio-group[data-part='root'][data-variant='card'] {
+    align-items: stretch;
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-variant='card'][data-orientation='horizontal']
+    > .xh-scope-radio-group[data-part='item'] {
+    flex: 1 1 0;
+    min-inline-size: min(var(--xh-control-min-w), 100%);
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-radio-group[data-part='root'][data-size='sm'] {
+    --xh-_radio-group-item-gap: var(--xh-control-gap-sm);
+    --xh-_radio-group-font-size: var(--xh-control-font-sm);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-sm);
+    --xh-_radio-group-segment-h: var(--xh-control-h-sm);
+    --xh-_radio-group-segment-px: var(--xh-control-px-sm);
+    --xh-icon-size: var(--xh-radio-group-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-size='lg'] {
+    --xh-_radio-group-item-gap: var(--xh-control-gap-lg);
+    --xh-_radio-group-font-size: var(--xh-control-font-lg);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
+    --xh-_radio-group-segment-h: var(--xh-control-h-lg);
+    --xh-_radio-group-segment-px: var(--xh-control-px-lg);
+    --xh-icon-size: var(--xh-radio-group-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  /* 集合标题：14 / 500 / fg-muted，字号不随 size 档——随档的是条目文字 */
+  .xh-scope-radio-group[data-part='label'] {
+    color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-radio-group-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-radio-group-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* label 自己不带状态属性，整组禁用只写在 root 上，禁用标签色统一 --xh-fg-subtle */
+  .xh-scope-radio-group[data-part='root'][data-disabled] .xh-scope-radio-group[data-part='label'] {
+    color: var(--xh-radio-group-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 条目是「圆圈 + 文案」的整行命中区：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、手型、
+     过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
+     行自己坐画布走 100 → 200（--xh-action-bg-* 钉住自己的面），行面上的圆圈按淡底容器阶梯再上一档
+     （--xh-action-host-bg-* 向内声明自己是圆圈的承载面，host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住；
+     也因此 root 带 data-tone 时 --xh-_tone-subtle 不会把整行染色）。
+     xs 的 24px 是命中地板，圆圈 12 / 16 / 20px 居中其间；字号与间距按组档位从 root 的私有槽映射。
+     条目禁用走 aria-disabled 而非原生 disabled，条目仍可聚焦，家族的禁用块读 data-disabled。
+     position 是给条目内那份视觉隐藏的原生输入做定位基准，别去掉 */
+  .xh-scope-radio-group[data-part='item'] {
+    --xh-action-gap: var(--xh-radio-group-item-gap, var(--xh-_radio-group-item-gap));
+    --xh-action-radius: var(--xh-radio-group-item-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
+    --xh-action-padding-inline: 0;
+    --xh-action-padding-block: 0;
+    --xh-action-fg-rest: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-radio-group-item-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-bg-hover: var(--xh-radio-group-item-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-radio-group-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-action-host-bg-hover: var(--xh-_radio-group-host-bg-hover);
+    --xh-action-host-bg-pressed: var(--xh-_radio-group-host-bg-pressed);
+
+    position: relative;
+    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
+       沿用「条目按内容收宽」的既有决定，写法同 checkbox-group 条目 */
+    inline-size: auto;
+    /* ghost 的 1px 透明边位会把圆圈列相对组标题错开 1px：边归零，几何保持不变 */
+    border-width: 0;
+  }
+
+  /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
+     家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
+     不排就会把 not-allowed 覆盖回 default */
+  .xh-scope-radio-group[data-part='item'][data-readonly]:not([data-disabled]):not([data-xh-choice-card]) {
+    --xh-action-bg-hover: transparent;
+    --xh-action-bg-pressed: transparent;
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  /* 圆圈是字段家族的控制盒（字段静息形态）：透明底 + --xh-border-control 描边 + 无影。
+     不缩放（行级只换面），过渡只有底与描边；按下走 press 时间线、释放同走 micro */
+  .xh-scope-radio-group[data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
+    block-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-radio-group-indicator-bg, transparent);
+    transition:
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 悬停整行时未选中的圆圈描边升一档（字段静息 → hover 的同一条阶梯）；
+     选中圈与校验失败的圈保住各自的描边——圈内的点 / 警示色本身已经在表达状态 */
+  .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):hover
+    > .xh-scope-radio-group[data-part='indicator']:not([data-state='checked']):not([data-invalid]) {
+    border-color: var(--xh-radio-group-indicator-border-hover, var(--xh-border-control-hover));
+  }
+
+  /* 按下去要有回应。圆圈不是激活宿主：宿主是投影了 row 档的整行条目，圆圈在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200，
+     坐在上面的圆圈到 300（行以 --xh-action-host-bg-pressed 声明自己是圆圈的承载面，桥接槽只写不读，
+     圆圈读的是喂给它的那支私有槽），描边不动、几何不动；
+     与家族按压块同一时间线（按下 --xh-motion-duration-press，释放同走 micro） */
+  .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+    > .xh-scope-radio-group[data-part='indicator'] {
+    background: var(--xh-radio-group-indicator-bg-pressed, var(--xh-_radio-group-host-bg-pressed));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  .xh-scope-radio-group[data-part='indicator'][data-state='checked'] {
+    border-color: var(--xh-radio-group-indicator-border-checked, var(--xh-_radio-group-accent));
+  }
+
+  /* 校验失败：圆圈描边转警示色，压在 checked 规则之后 */
+  .xh-scope-radio-group[data-part='indicator'][data-invalid],
+  .xh-scope-radio-group[data-part='indicator'][data-state='checked'][data-invalid] {
+    border-color: var(--xh-radio-group-indicator-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 圆点用 scale 收放，选中态切换不引起布局抖动。
+     直径取指示器的一半：换尺寸档时圈与点一起走，比例不散。
+     收起走强减速、不过冲：过冲曲线收到 0 会冲成负缩放，闪出一个极小的镜像点；换色走 micro */
+  .xh-scope-radio-group[data-part='indicator']::before {
+    content: '';
+    inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
+    block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
+    border-radius: var(--xh-shape-circle);
+    background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
+    scale: 0;
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 出现时略微涨过 1 再收回，过冲量落在圈内不碰描边 */
+  .xh-scope-radio-group[data-part='indicator'][data-state='checked']::before {
+    scale: 1;
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-settle),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 选中的圆点是这颗圈的「填色」：按下随行换到语气的 active 档（与 checkbox-group 勾中方框按下同档），
+     换色走按压时间线（按下 press、释放回到 micro）；选中圈的描边保住不换 */
+  .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+    > .xh-scope-radio-group[data-part='indicator'][data-state='checked']::before {
+    background: var(--xh-radio-group-indicator-dot-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-settle),
+      background-color var(--xh-motion-duration-press) var(--xh-motion-ease-press);
+  }
+
+  /* 禁用：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点，不靠 opacity；
+     与 checkbox-group 方框、独立 checkbox 逐档一致。条目自己带 data-disabled（组禁用也逐条下放），圆圈读它 */
+  .xh-scope-radio-group[data-part='item'][data-disabled] > .xh-scope-radio-group[data-part='indicator'] {
+    border-color: var(--xh-radio-group-indicator-border-disabled, var(--xh-border-default));
+    background: var(--xh-radio-group-indicator-bg-disabled, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-radio-group[data-part='item'][data-disabled] > .xh-scope-radio-group[data-part='indicator']::before {
+    background: var(--xh-radio-group-indicator-dot-disabled, var(--xh-fg-disabled));
+  }
+
+  .xh-scope-radio-group[data-part='item-text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 卡片的文案是卡的标题：取标签字重，与说明拉开层级 */
+  .xh-scope-radio-group[data-part='item'][data-xh-choice-card] > .xh-scope-radio-group[data-part='item-text'] {
+    font-weight: var(--xh-radio-group-card-title-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 说明是次级文字：13 / fg-muted / 正文行高，不随选中与语气换色；落在文案下方同一列。
+     列表形态的条目带了说明时同样排成两行，行首的圆圈对齐第一行 */
+  .xh-scope-radio-group[data-part='item-description'] {
+    grid-column: 2;
+    color: var(--xh-radio-group-item-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-radio-group-item-description-font-size, var(--xh-text-secondary-size));
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-normal);
+    user-select: none;
+  }
+
+  .xh-scope-radio-group[data-part='item']:not([data-xh-choice-card]):has(> .xh-scope-radio-group[data-part='item-description']) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    row-gap: var(--xh-radio-group-item-row-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-radio-group[data-part='item'][data-disabled] > .xh-scope-radio-group[data-part='item-description'] {
+    color: var(--xh-radio-group-item-description-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 条目图标：纯装饰，可及名全在文字上。直径取根上按尺寸档下发的 --xh-icon-size，
+     放进来的图标组件与裸 svg 取同一直径；颜色随条目的前景色，选中、悬停、禁用一并跟着换 */
+  .xh-scope-radio-group[data-part='item-icon'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-icon-size);
+    block-size: var(--xh-icon-size);
+    color: inherit;
+  }
+
+  .xh-scope-radio-group[data-part='item-icon'] > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* 两行排版（卡片、带说明的列表行）里图标自成一列，排在圆圈与文案之间；说明仍落在文案下方同一列 */
+  .xh-scope-radio-group[data-part='item']:has(> .xh-scope-radio-group[data-part='item-icon']):is(
+      [data-xh-choice-card],
+      :has(> .xh-scope-radio-group[data-part='item-description'])
+    ) {
+    grid-template-columns: auto auto minmax(0, 1fr);
+  }
+
+  .xh-scope-radio-group[data-part='item']:has(> .xh-scope-radio-group[data-part='item-icon'])
+    > .xh-scope-radio-group[data-part='item-description'] {
+    grid-column: 3;
+  }
+
+  /* —— segmented 形态 ——
+     一条淡底轨道装着首尾相接的若干段，选中段由 thumb 部件标出：一块白色抬起的滑块，换段时滑过去。
+     轨道就是 root：滑块绝对定位于它，段与段之间不留缝，所以 gap 归零。
+     轨道是一块淡底面：--xh-bg-subtle 底 + 同宽透明占位边 + 无影，边界由滑块的描边与轨道底色的落差承担。
+     一行排不下就折行：每个选项都必须看得见、点得到；不改成横向滚动是因为段离轨道内沿只有一格衬距，
+     轨道一旦成为滚动容器，段的焦点环（画在段外侧 2px 处）会被裁掉 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'] {
+    /* 滑块（有滑块开关的白色抬起面）的底与选中段的文字色；没写 data-tone 时就是这里的取值 */
+    --xh-_radio-group-thumb-bg: var(--xh-bg-surface-raised);
+    --xh-_radio-group-segment-fg-checked: var(--xh-fg-default);
+    /* 轨道是淡底承载面：段坐在它上面，悬停 200 → 按下 300，host 槽向内下发同一副阶梯 */
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0;
+    padding: var(--xh-radio-group-track-padding, var(--xh-space-0_5));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-track-border, transparent);
+    border-radius: var(--xh-radio-group-track-radius, var(--xh-shape-surface));
+    background: var(--xh-radio-group-track-bg, var(--xh-bg-subtle));
+    font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
+  }
+
+  /* 横排时外盒整体就是一档控件高：段被 align-items: stretch 撑满轨道内侧，与同行控件齐平。
+     写下限而非定值：排得下时两者逐值相同，排不下折了行才让轨道往下长 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-orientation='horizontal'] {
+    align-items: stretch;
+    min-block-size: var(--xh-radio-group-segment-h, var(--xh-_radio-group-segment-h));
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-orientation='vertical'] {
+    flex-wrap: nowrap;
+  }
+
+  /* 撑满行宽：各段等分剩余空间，长短不一的文字也排得齐 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-block] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* 等分只在横排成立：竖排的主轴是块轴，flex-basis: 0 会顶掉段自己的高度档，
+     竖排下段本来就靠上面那条 inline-size: 100% 与 align-items: stretch 撑满宽度 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-block][data-orientation='horizontal']
+    > .xh-scope-radio-group[data-part='item'] {
+    flex: 1 1 0;
+  }
+
+  /* 轨道里不排标题：组标题在这一形态下视觉隐藏，只作可及名（aria-labelledby 的目标仍在）。
+     要可见标题放进表单字段。刻意不写 display：display:none 的节点读屏取不到名字 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'] > .xh-scope-radio-group[data-part='label'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* root 会短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给段，在它身上画环只会闪一下就跳走 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-invalid] {
+    border-color: var(--xh-radio-group-track-border-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-disabled] {
+    background: var(--xh-radio-group-track-bg-disabled, var(--xh-bg-muted));
+  }
+
+  /* 语气：选择器带 [data-tone] 限定，不限定的话放在语气容器里的分段会跟着改色。
+     语气档的滑块是实心语气面，选中段的字取语气面上的前景 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-tone] {
+    --xh-_radio-group-thumb-bg: var(--xh-_tone, var(--xh-bg-surface-raised));
+    --xh-_radio-group-segment-fg-checked: var(--xh-_tone-on, var(--xh-fg-default));
+  }
+
+  /* 段：轨道里铺开的一格，不投影 Action Control 家族（与 Tabs segment 档同），面与字写在段自己身上。
+     段自己也定位，于是与绝对定位的滑块按文档序比高低：滑块写在段之前，段与它的焦点环便压在滑块上面 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'] > .xh-scope-radio-group[data-part='item'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-radio-group-item-gap, var(--xh-_radio-group-item-gap));
+    block-size: var(--xh-radio-group-segment-h, var(--xh-_radio-group-segment-h));
+    padding-inline: var(--xh-radio-group-segment-px, var(--xh-_radio-group-segment-px));
+    border: 0;
+    border-radius: var(--xh-radio-group-segment-radius, var(--xh-shape-control));
+    background: transparent;
+    color: var(--xh-radio-group-segment-fg, var(--xh-fg-muted));
+    font-weight: var(--xh-radio-group-segment-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    /* 段归行级：按下只换面不缩放，transition 里没有 scale */
+    transition:
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 段的高度交给轨道：一行时被 stretch 撑满轨道内侧。下限按「一档控件高减掉轨道上下的衬距与描边」算，
+     折了行每一行仍是这个高度，不写的话多行会被 align-content 均分成一叠扁条 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-orientation='horizontal']
+    > .xh-scope-radio-group[data-part='item'] {
+    block-size: auto;
+    min-block-size: calc(
+      var(--xh-radio-group-segment-h, var(--xh-_radio-group-segment-h)) - 2 *
+        var(--xh-radio-group-track-padding, var(--xh-space-0_5)) - 2 * var(--xh-stroke-thin)
+    );
+  }
+
+  /* 这一形态的选中由滑块标出，不画行首圆圈 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item']
+    > .xh-scope-radio-group[data-part='indicator'] {
+    display: none;
+  }
+
+  /* 选中态读 data-state，不读 ARIA。文字色也要跟着变——滑块是可选部件，作者不渲染它时"当前是哪一段"仍然要看得出来 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item'][data-state='checked'] {
+    color: var(--xh-radio-group-segment-fg-checked, var(--xh-_radio-group-segment-fg-checked));
+  }
+
+  /* 滑块在场时选中段自己透空，环紧挨着的是压在它底下、与它同一块矩形的滑块实心底；
+     环色与那块底同族就看不出来，改取选中段自己的前景色——那一支本来就配着这块底定的 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']:has(> .xh-scope-radio-group[data-part='thumb']:not([hidden]))
+    > .xh-scope-radio-group[data-part='item'][data-state='checked']:focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
+  /* 悬停只提亮未选中的那几段：选中段的底下压着滑块，再变色就成了两套强调。
+     底色用中性的悬停档：段坐在淡底轨道里，悬停取 200；只读收回悬停，与列表形态同一个决定 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):hover {
+    background-color: var(--xh-radio-group-segment-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-radio-group-segment-fg-hover, var(--xh-fg-default));
+  }
+
+  /* 按下去要有回应：未选中段换到按下面（淡底承载 300），几何不动。
+     选中段不叠按下面：它压着的白色滑块本身就是选中身份（有滑块开关无叠加态） */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
+    background-color: var(--xh-radio-group-segment-bg-pressed, var(--xh-bg-subtle-active));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 只读：值改不动，但对比度不降，光标也不摆出"禁止"的样子 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 条目一律 aria-disabled 而非原生 disabled（禁用段仍要能当方向键的起点），这里读 data-disabled。
+     用了 fg-disabled 就不再叠 opacity：半透明会把底下的滑块透出来 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 禁用且选中的那一段不换文字色：它压着的是滑块的实心底，换成 fg-disabled 后六族语气只剩 1.04–3.01 的对比度，
+     「当前选的是哪一段」当场看不见。禁用由轨道底色、未选中段的文字色与光标表达，选中段保持可读 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+    > .xh-scope-radio-group[data-part='item'][data-disabled][data-state='checked'] {
+    color: var(--xh-radio-group-segment-fg-checked-disabled, var(--xh-_radio-group-segment-fg-checked));
+  }
+
+  .xh-scope-radio-group[data-part='thumb'] {
+    /* 位置与尺寸由机器量好、连接层写成私有槽（它量得到，样式表量不到）；
+       这几个是还没量到时的落点，量到即被内联的私有槽盖过 */
+    --xh-_radio-group-thumb-x: 0;
+    --xh-_radio-group-thumb-y: 0;
+    --xh-_radio-group-thumb-w: 0;
+    --xh-_radio-group-thumb-h: 0;
+    --xh-_radio-group-thumb-stretch: 0;
+
+    /* 摆在行首块首，位置交给 translate（只走合成），尺寸跟着段宽走。起始缘是按书写方向量的，
+       translate 只认物理方向：乘上 --xh-direction-sign，RTL 下从右缘往左推 */
+    position: absolute;
+    display: block;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: var(--xh-_radio-group-thumb-w);
+    block-size: var(--xh-_radio-group-thumb-h);
+    translate: calc(var(--xh-_radio-group-thumb-x) * var(--xh-direction-sign)) var(--xh-_radio-group-thumb-y);
+    /* 白色抬起面三件（有滑块开关）：surface-raised 底 + border-default 描边 + raised 影，描边必须在，影只是加成。
+       尺寸由连接层按段的盒量出，描边吃进盒里（border-box），滑块与段仍是同一块矩形 */
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-thumb-border, var(--xh-border-default));
+    border-radius: var(--xh-radio-group-thumb-radius, var(--xh-shape-inset));
+    background: var(--xh-radio-group-thumb-bg, var(--xh-_radio-group-thumb-bg));
+    box-shadow: var(--xh-radio-group-thumb-shadow, var(--xh-elevation-raised));
+    /* 段压在它上面，点击一律交给段；作者把它写在段之后时也不至于吞掉点击 */
+    pointer-events: none;
+    /* 用连续档而不是进场那条：滑块是被推过去的，起步就该有速度，纯减速曲线看着像自己飘过去。
+       四个几何量同时走，段宽不等时才不会先变形再挪位。投影单列一项：整组禁用时滑块落回轨道平面，那层投影跟着收 */
+    transition:
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 语气档的滑块是实心语气面，描边与底同色：raised 面必带描边，这里的描边只是把边位补齐，不另画一圈 */
+  .xh-scope-radio-group[data-part='root'][data-variant='segmented'][data-tone] > .xh-scope-radio-group[data-part='thumb'] {
+    border-color: var(--xh-radio-group-thumb-border, var(--xh-_tone, var(--xh-border-default)));
+  }
+
+  /* 整组禁用时滑块落回轨道平面（不再浮起），但底色一点不兑淡：
+     它上面压着选中段的文字，往 muted 兑哪怕一成，brand 的对比度就从 5.08 掉到 4.24 */
+  .xh-scope-radio-group[data-part='root'][data-disabled] > .xh-scope-radio-group[data-part='thumb'] {
+    box-shadow: var(--xh-radio-group-thumb-shadow-disabled, none);
+  }
+
+  /* 首次落位与同一项的重量（窗口缩放、换上正式字体）直接到位，只有换项才滑：连接层在这一落点投影
+     data-instant。投影的淡变照留，整组禁用时滑块落回轨道平面仍是淡变 */
+  .xh-scope-radio-group[data-part='thumb'][data-instant] {
+    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 液态档：两沿由弹簧逐帧推着走（连接层每一帧写好盒子），几何量不再补过渡；
+     被拉长时在另一个方向上压扁，表达体积守恒，拉长到目标的两倍时压到 --xh-motion-scale-squash */
+  :where([data-material='liquid']) .xh-scope-radio-group[data-part='thumb'] {
+    --xh-_radio-group-thumb-squash: max(var(--xh-motion-scale-squash), calc(1 - var(--xh-_radio-group-thumb-stretch) * (1 - var(--xh-motion-scale-squash))));
+
+    scale: 1 var(--xh-_radio-group-thumb-squash);
+    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  :where([data-material='liquid']) .xh-scope-radio-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-radio-group[data-part='thumb'] {
+    scale: var(--xh-_radio-group-thumb-squash) 1;
+  }
+
+  /* 家族 row 档在粗指针下用 ::after 把热区扩到 44px 高：条目按 24px 行 + 8px 间距密排，热区会压进相邻条目、
+     指针落错行，A 档 24px 由 xs 地板保住（同 checkbox-group 条目） */
+  @media (pointer: coarse) {
+    .xh-scope-radio-group[data-part='item']::after {
+      min-block-size: 0;
+    }
+
+    /* segmented 的段不归家族：手指的落点比一段高，命中区由伪元素向块轴两侧外扩，段的盒与轨道内的分格一点不动。
+       只扩块轴——段与段在行内轴上首尾相接，往两侧扩会与相邻段的命中区叠上。
+       外扩一格 space-2 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕 */
+    .xh-scope-radio-group[data-part='root'][data-variant='segmented'] > .xh-scope-radio-group[data-part='item']::before {
+      content: '';
+      position: absolute;
+      inset-block: calc(-1 * var(--xh-space-2));
+      inset-inline: 0;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-radio-group[data-part='root'][hidden],
+  .xh-scope-radio-group[data-part='thumb'][hidden],
+  .xh-scope-radio-group[data-part='item'][hidden],
+  .xh-scope-radio-group[data-part='item-icon'][hidden],
+  .xh-scope-radio-group[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 按下：常态靠圆圈换底表出，这一档里底色被统一换成 Canvas；按住那一下把圈的描边换成系统高亮色 */
+    .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+      > .xh-scope-radio-group[data-part='indicator'] {
+      border-color: Highlight;
+    }
+
+    /* 禁用的圆点跟随系统的置灰前景 */
+    .xh-scope-radio-group[data-part='item'][data-disabled]
+      > .xh-scope-radio-group[data-part='indicator'][data-state='checked']::before {
+      background: GrayText;
+    }
+
+    /* segmented 的段按下：常态靠底色深一档表出，这一档里底色被统一换成 Canvas；按住那一下用系统高亮反色画回来 */
+    .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+      > .xh-scope-radio-group[data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色：选中那颗圆点是一块底，落到纸上整个消失，选中与没选中的圈一模一样。
+       圆点改画成一圈实边——边框印得出来，直径与圆心都不动（描边吃进盒里）。 */
+    .xh-scope-radio-group[data-part='indicator'][data-state='checked']::before {
+      border: var(--xh-stroke-thick) solid currentColor;
+    }
+
+    /* segmented 的滑块那块底与它的落影都不画，「当前选的是哪一段」在纸上没了：选中段改画一圈实边、字加粗 */
+    .xh-scope-radio-group[data-part='root'][data-variant='segmented']
+      > .xh-scope-radio-group[data-part='item'][data-state='checked'] {
+      border: var(--xh-stroke-thin) solid currentColor;
+      font-weight: var(--xh-font-weight-bold);
+    }
+  }
+}