@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/toggle-group.css

@@ -0,0 +1,424 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 toggle group 样式。 */
+
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-toggle-group {
+    --xh-toggle-group-skin: 1;
+  }
+
+  /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 root 不设 gap。
+     排布只能读 data-orientation——aria-orientation 在多选模式下连接层根本不输出（role=group 不收） */
+  .xh-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);
+    --xh-_group-separator-size: calc(var(--xh-_toggle-group-h) / 2);
+
+    /* 形态的落点：没写 data-variant 时这十支保持缺省档的取值，段的规则读的是
+       「使用者令牌 → 这十支 → 语义令牌」三级，使用者令牌永远排在形态之前。
+       未选中那五支管段的壳，选中那五支管当前值那一段。
+       缺省档（subtle）的段坐在自己的淡底面上，悬停 200 → 按下 300（淡底承载）；
+       选中段是无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28% */
+    --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
+    --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
+    --xh-_toggle-group-item-fg: var(--xh-fg-default);
+    --xh-_toggle-group-item-border: transparent;
+    --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_toggle-group-item-bg-on-hover: var(
+      --xh-_tone-subtle-hover,
+      var(--xh-bg-brand-subtle-hover)
+    );
+    --xh-_toggle-group-item-bg-on-active: var(
+      --xh-_tone-subtle-active,
+      var(--xh-bg-brand-subtle-active)
+    );
+    --xh-_toggle-group-item-fg-on: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_toggle-group-item-border-on: transparent;
+    --xh-_toggle-group-item-highlight-on: none;
+
+    /* 连续分段不能换行；窄容器由作者改为竖排或全宽布局。 */
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  /* —— 形态 ——
+     四档与 toggle 一处对一处：未选中那些段长什么样在这里定，选中那一段用哪一档底也在这里定，
+     切换仍由 data-state='on' 那一条统一完成。
+     缺省档（没写 data-variant）使用中性浅底，选中段使用品牌淡底 */
+  .xh-scope-toggle-group[data-part='root'][data-variant='solid'] {
+    --xh-_toggle-group-item-bg: transparent;
+    --xh-_toggle-group-item-border: transparent;
+    --xh-_toggle-group-item-bg-on: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_toggle-group-item-bg-on-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_toggle-group-item-fg-on: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_toggle-group-item-border-on: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_toggle-group-item-highlight-on: var(--xh-_highlight-tone);
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-variant='solid']:is(
+    :not([data-tone]),
+    [data-tone='brand']
+  ) {
+    --xh-_toggle-group-item-bg-on: var(--xh-action-brand-solid);
+    --xh-_toggle-group-item-bg-on-hover: var(--xh-action-brand-solid-hover);
+    --xh-_toggle-group-item-bg-on-active: var(--xh-action-brand-solid-active);
+    --xh-_toggle-group-item-fg-on: var(--xh-action-on-brand-solid);
+    --xh-_toggle-group-item-border-on: var(--xh-action-brand-solid);
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-variant='subtle'] {
+    --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
+    --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
+    --xh-_toggle-group-item-fg: var(--xh-fg-default);
+    --xh-_toggle-group-item-border: transparent;
+    --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_toggle-group-item-bg-on-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-_toggle-group-item-fg-on: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_toggle-group-item-border-on: transparent;
+    --xh-_toggle-group-item-highlight-on: none;
+  }
+
+  /* outline 与 ghost 的段坐在画布上：悬停 100 → 按下 200（白底承载） */
+  .xh-scope-toggle-group[data-part='root'][data-variant='outline'] {
+    --xh-_toggle-group-item-bg: transparent;
+    --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_toggle-group-item-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_toggle-group-item-border: transparent;
+    --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_toggle-group-item-bg-on-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-_toggle-group-item-fg-on: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_toggle-group-item-border-on: transparent;
+    --xh-_toggle-group-item-highlight-on: none;
+
+    position: relative;
+    border-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-variant='outline']::after {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border: var(--xh-stroke-thin) solid
+      var(--xh-toggle-group-outline-color, var(--xh-_tone-border-control, var(--xh-border-control)));
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-variant='ghost'] {
+    --xh-_toggle-group-item-bg: transparent;
+    --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_toggle-group-item-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_toggle-group-item-border: transparent;
+    --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_toggle-group-item-bg-on-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-_toggle-group-item-fg-on: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_toggle-group-item-border-on: transparent;
+    --xh-_toggle-group-item-highlight-on: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-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);
+  }
+
+  .xh-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);
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  /* root 会短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给条目，
+     在它身上画环只会闪一下就跳走，高亮要长在条目上 */
+  .xh-scope-toggle-group[data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  /* 段是 Action Control 的 text 档定尺按钮：盒型、三档几何、悬停 / 按下 / 焦点 / 禁用面与过渡都由家族给，
+     这里只把使用者槽映射到桥接槽（-gap / -h / -px / -bg / -bg-hover / -bg-active / -fg / -border / -bg-disabled /
+     -fg-disabled / -border-disabled / -font-size 使用者槽保留为第一参数，缺省落到 root 上按形态赋值的十支私有槽）。
+     状态规则只改写桥接槽，底色 / 描边 / 前景三者永远同步换，不会出现选中了底色却没跟上描边 */
+  .xh-scope-toggle-group[data-part='item'] {
+    --xh-action-gap: var(--xh-toggle-group-item-gap, var(--xh-_toggle-group-gap));
+    --xh-action-visual-size: var(--xh-toggle-group-item-h, var(--xh-_toggle-group-h));
+    --xh-action-padding-inline: var(--xh-toggle-group-item-px, var(--xh-_toggle-group-px));
+    --xh-action-font-size: var(--xh-toggle-group-item-font-size, var(--xh-_toggle-group-font-size));
+    /* 中间段一律直角，圆角只由首末两端补回来 */
+    --xh-action-radius: 0;
+    --xh-action-bg-rest: var(--xh-toggle-group-item-bg, var(--xh-_toggle-group-item-bg));
+    --xh-action-bg-hover: var(--xh-toggle-group-item-bg-hover, var(--xh-_toggle-group-item-bg-hover));
+    --xh-action-bg-pressed: var(--xh-toggle-group-item-bg-active, var(--xh-_toggle-group-item-bg-active));
+    --xh-action-bg-focus-visible: var(--xh-toggle-group-item-bg, var(--xh-_toggle-group-item-bg));
+    --xh-action-bg-disabled: var(--xh-toggle-group-item-bg-disabled, var(--xh-bg-muted));
+    --xh-action-fg-rest: var(--xh-toggle-group-item-fg, var(--xh-_toggle-group-item-fg));
+    --xh-action-fg-hover: var(--xh-toggle-group-item-fg, var(--xh-_toggle-group-item-fg));
+    --xh-action-fg-pressed: var(--xh-toggle-group-item-fg, var(--xh-_toggle-group-item-fg));
+    --xh-action-fg-focus-visible: var(--xh-toggle-group-item-fg, var(--xh-_toggle-group-item-fg));
+    --xh-action-fg-disabled: var(--xh-toggle-group-item-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-border-rest: var(--xh-toggle-group-item-border, var(--xh-_toggle-group-item-border));
+    --xh-action-border-hover: var(--xh-toggle-group-item-border, var(--xh-_toggle-group-item-border));
+    --xh-action-border-pressed: var(--xh-toggle-group-item-border, var(--xh-_toggle-group-item-border));
+    --xh-action-border-focus-visible: var(--xh-toggle-group-item-border, var(--xh-_toggle-group-item-border));
+    --xh-action-border-disabled: var(--xh-toggle-group-item-border-disabled, var(--xh-border-subtle));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-highlight-hover: transparent;
+    --xh-action-highlight-pressed: transparent;
+    --xh-action-highlight-focus-visible: transparent;
+    --xh-action-highlight-disabled: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-shadow-focus-visible: none;
+    --xh-action-shadow-disabled: none;
+    /* 共边相接的分段按下只换面不缩放：相邻两段靠负外边距压成一条边，缩放任一段都会把接缝拉开 */
+    --xh-action-scale-pressed: none;
+
+    /* 相邻两段靠负外边距压掉一条重边，谁的描边浮在上面必须能指定，
+       因此条目必须是定位元素——静态元素的 z-index 不生效 */
+    z-index: 0;
+    font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 共边只画一次：后一段不画起始边，由前一段的末端边承担。墨色描边半透明，两条重合会加深。
+     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal']
+    > .xh-scope-toggle-group[data-part='item']
+    + .xh-scope-toggle-group[data-part='item'] {
+    border-inline-start-width: 0;
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-toggle-group[data-part='item']
+    + .xh-scope-toggle-group[data-part='item'] {
+    border-block-start-width: 0;
+  }
+
+  /* 两端圆角用逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
+     只认 root 的直接子节点：条目之间插了别的节点时宁可退化成直角，也不要圆错位置。
+     角画在条目上，槽名也带 item 段，与同文件其余条目槽同段 */
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal']
+    > .xh-scope-toggle-group[data-part='item']:first-child {
+    border-start-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal']
+    > .xh-scope-toggle-group[data-part='item']:last-child {
+    border-start-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-toggle-group[data-part='item']:first-child {
+    border-start-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-toggle-group[data-part='item']:last-child {
+    border-end-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  /* 选中态：单选是 role=radio + aria-checked，多选是原生按钮 + aria-pressed，
+     两套 ARIA 各出一半，样式一条都对不上——只有 data-state 是两种模式共同的出口。
+     无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28%，三态都经桥接槽交给家族画；
+     用哪族颜色由 data-tone 决定：语气槽沿继承流下来，root 自己写了 tone 算、
+     整组落在语气容器里也算；没有语气就退回品牌配色，与不接语气时逐值相同。
+     使用者令牌排在语气之前：写了组件槽就以它为准。
+     只有 solid 形态提供内高光（一条 inset 描边式 box-shadow），其余形态在根变量中关闭 */
+  .xh-scope-toggle-group[data-part='item'][data-state='on'] {
+    --xh-action-bg-rest: var(--xh-toggle-group-item-bg-on, var(--xh-_toggle-group-item-bg-on));
+    --xh-action-bg-hover: var(--xh-toggle-group-item-bg-on-hover, var(--xh-_toggle-group-item-bg-on-hover));
+    --xh-action-bg-pressed: var(--xh-toggle-group-item-bg-on-active, var(--xh-_toggle-group-item-bg-on-active));
+    --xh-action-bg-focus-visible: var(--xh-toggle-group-item-bg-on, var(--xh-_toggle-group-item-bg-on));
+    --xh-action-bg-disabled: var(
+      --xh-toggle-group-item-bg-on-disabled,
+      color-mix(in oklab, var(--xh-_toggle-group-item-bg-on) 50%, var(--xh-bg-muted-opaque))
+    );
+    --xh-action-fg-rest: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
+    --xh-action-fg-hover: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
+    --xh-action-fg-pressed: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
+    --xh-action-fg-focus-visible: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
+    --xh-action-fg-disabled: var(--xh-toggle-group-item-fg-on-disabled, var(--xh-_toggle-group-item-fg-on));
+    --xh-action-border-rest: var(--xh-toggle-group-item-border-on, var(--xh-_toggle-group-item-border-on));
+    --xh-action-border-hover: var(--xh-toggle-group-item-border-on, var(--xh-_toggle-group-item-border-on));
+    --xh-action-border-pressed: var(--xh-toggle-group-item-border-on, var(--xh-_toggle-group-item-border-on));
+    --xh-action-border-focus-visible: var(--xh-toggle-group-item-border-on, var(--xh-_toggle-group-item-border-on));
+    --xh-action-border-disabled: var(--xh-toggle-group-item-border-on-disabled, var(--xh-_toggle-group-item-border-on));
+    --xh-action-shadow-rest: var(--xh-toggle-group-item-shadow, var(--xh-_toggle-group-item-highlight-on));
+    --xh-action-shadow-hover: var(--xh-toggle-group-item-shadow, var(--xh-_toggle-group-item-highlight-on));
+    --xh-action-shadow-pressed: var(--xh-toggle-group-item-shadow, var(--xh-_toggle-group-item-highlight-on));
+    --xh-action-shadow-focus-visible: var(--xh-toggle-group-item-shadow, var(--xh-_toggle-group-item-highlight-on));
+
+    /* 抬一层，让 brand 描边压住邻居的灰边。共边处两条边重合在同一像素上，
+       不抬层就由文档序决定谁在上，选中段的左右两侧会一边有色一边灰 */
+    z-index: 1;
+  }
+
+  /* solid 档的选中面是实心语气底，默认环压上去不足 3:1：环色改取配对前景色，经家族的焦点环桥接槽灌入 */
+  .xh-scope-toggle-group[data-part='root'][data-variant='solid']
+    .xh-scope-toggle-group[data-part='item'][data-state='on'] {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 集合条目一律 aria-disabled 而非原生 disabled（禁用项仍要能当方向键的起点），禁用面由家族按 data-disabled 给：
+     底 / 字 / 边读上面映射的 -disabled 三支，不用 opacity 变淡（半透明会把压在下面那条边透出来，共边处当场变成两条线）；
+     禁用且选中的段底色掺一半 muted 进 brand（映射在选中态那条里），既看得出选中，也看得出改不动；
+     改不动的段收掉内高光：底已经掺了灰，再留一条亮线只剩噪点（家族的 -shadow-disabled 缺省 none） */
+
+  /* 焦点环要浮在共边之上：outline 画在元素外侧，不抬层就会被后一段的底色与描边盖掉一半 */
+  .xh-scope-toggle-group[data-part='item']:focus-visible {
+    z-index: 2;
+  }
+
+  /* —— 撑满行宽 —— */
+  /* 整组占满可用宽度，每段等分剩余空间。inline-flex 改成 flex：行内盒撑不满一行 */
+  .xh-scope-toggle-group[data-part='root'][data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-full-width]
+    > .xh-scope-toggle-group[data-part='item'] {
+    flex: 1;
+  }
+
+  /* —— 段间的线 —— */
+  /* 装饰性的一条线，读屏不念。段本来靠共边连成一体，插了它就是把一排开关分成几组。
+     朝向是这条线自己的（横排里是竖线），与 root 的排布相反 */
+  .xh-scope-toggle-group[data-part='root'] > [data-xh-toggle-group-separator] {
+    flex: none;
+    align-self: center;
+    z-index: 2;
+    border-radius: var(--xh-toggle-group-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-toggle-group-separator-color, var(--xh-fg-default));
+    opacity: var(--xh-toggle-group-separator-opacity, var(--xh-control-separator-opacity));
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-toggle-group[data-part='root'] > [data-xh-toggle-group-separator][data-orientation='vertical'] {
+    inline-size: var(--xh-toggle-group-separator-thickness, var(--xh-stroke-thin));
+    block-size: var(
+      --xh-toggle-group-separator-size,
+      var(--xh-_group-separator-size)
+    );
+    margin-inline-start: calc(-1 * var(--xh-toggle-group-separator-thickness, var(--xh-stroke-thin)));
+  }
+
+  .xh-scope-toggle-group[data-part='root'] > [data-xh-toggle-group-separator][data-orientation='horizontal'] {
+    block-size: var(--xh-toggle-group-separator-thickness, var(--xh-stroke-thin));
+    inline-size: var(
+      --xh-toggle-group-separator-size,
+      var(--xh-_group-separator-size)
+    );
+    margin-block-start: calc(-1 * var(--xh-toggle-group-separator-thickness, var(--xh-stroke-thin)));
+  }
+
+  /* 段都按不动了，段间那条线跟着退到弱边一档 */
+  .xh-scope-toggle-group[data-part='root'] > [data-xh-toggle-group-separator][data-disabled] {
+    background: var(--xh-toggle-group-separator-color-disabled, var(--xh-border-subtle));
+    opacity: var(--xh-toggle-group-separator-opacity-disabled, var(--xh-control-separator-disabled-opacity));
+  }
+
+  /* 插了分隔线之后首末两段不再是 root 的首末子节点，圆角改按元素类型认：
+     条目是原生 button，分隔线不是。没有分隔线时这两条与上面按子节点认的那几条同值 */
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal']
+    > .xh-scope-toggle-group[data-part='item']:first-of-type {
+    border-start-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='horizontal']
+    > .xh-scope-toggle-group[data-part='item']:last-of-type {
+    border-start-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-toggle-group[data-part='item']:first-of-type {
+    border-start-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toggle-group[data-part='root'][data-orientation='vertical']
+    > .xh-scope-toggle-group[data-part='item']:last-of-type {
+    border-end-start-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-item-radius, var(--xh-shape-control));
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  .xh-scope-toggle-group[data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-toggle-group[data-part='root'][hidden],
+  .xh-scope-toggle-group[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 手指落点由家族给：text 档的 ::after 只在块轴外扩到 44px、行内轴按段的盒不动——
+     条目在行内轴上靠负外边距共边相接，往两侧扩会与相邻条目的命中区叠上 */
+
+  @media (forced-colors: active) {
+    /* 段间那条线画的是一块纯底色，这一档里底色被统一换成 Canvas，线整条消失，
+       几组开关就连成了一长串。换成前景色画回来 */
+    .xh-scope-toggle-group[data-part='root'] > [data-xh-toggle-group-separator] {
+      background: CanvasText;
+    }
+
+    .xh-scope-toggle-group[data-part='root'][data-variant='outline']::after {
+      border-color: ButtonText;
+    }
+
+  }
+}

package/dist/css/toggle.css

@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 toggle 样式。 */
+
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  .xh-scope-toggle {
+    --xh-toggle-skin: 1;
+  }
+
+  /* 未按下的四档形态由家族形态矩阵按 data-xh-action-variant 给出（缺省 subtle 由连接层显式投影；solid 未按下时
+     投 ghost，只在按下时才是品牌实心）；公开槽桥接到矩阵之前：使用者槽 → 形态矩阵 → 家族缺省。
+     按下（on）是无滑块开关的选中面：品牌淡底 12 → 悬停 20 → 按压 28，前景 fg-on-brand-subtle，
+     私有槽在下面的 data-state='on' 块里接到桥接槽上。 */
+  .xh-scope-toggle[data-part='root'] {
+    --xh-_toggle-bg-on: var(--xh-toggle-bg-on, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
+    --xh-_toggle-bg-on-hover: var(
+      --xh-toggle-bg-on-hover,
+      var(
+        --xh-_tone-subtle-hover,
+        var(--xh-bg-brand-subtle-hover)
+      )
+    );
+    --xh-_toggle-bg-on-active: var(
+      --xh-toggle-bg-on-active,
+      var(
+        --xh-_tone-subtle-active,
+        var(--xh-bg-brand-subtle-active)
+      )
+    );
+    --xh-_toggle-fg-on: var(--xh-toggle-fg-on, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
+    --xh-_toggle-border-on: var(--xh-toggle-border-on, transparent);
+    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。
+       掺的是淡底的不透明档：墨色淡底半透明，掺进去整块面会跟着变半透明 */
+    --xh-_toggle-bg-on-disabled: var(
+      --xh-toggle-bg-on-disabled,
+      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle-opaque))
+    );
+    --xh-_toggle-fg-on-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_toggle-fg-on));
+    --xh-action-bg-rest: var(--xh-toggle-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-toggle-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-toggle-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-toggle-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-disabled: var(--xh-toggle-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-toggle-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-toggle-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-toggle-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-toggle-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-disabled: var(--xh-toggle-fg-disabled, var(--xh-_action-variant-fg-disabled));
+    --xh-action-border-rest: var(--xh-toggle-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-toggle-border, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-toggle-border, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-toggle-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-toggle-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-action-radius: var(--xh-toggle-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-toggle-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-toggle-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-toggle-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-toggle-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
+
+    font-weight: var(--xh-toggle-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-toggle > svg {
+    inline-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
+    block-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
+    flex: none;
+    pointer-events: none;
+  }
+
+  /* outline 按下后描边仍是可操作区那一档：淡底面上没有描边就与 subtle 的按下态分不开 */
+  .xh-scope-toggle[data-part='root'][data-variant='outline'] {
+    --xh-_toggle-border-on: var(--xh-toggle-border-on, var(--xh-_tone-border-control, var(--xh-border-control)));
+  }
+
+  /* 按下（on）：solid 之外的三档一律品牌淡底；solid 的按下面由矩阵 solid 列给出（连接层此时投影
+     data-xh-action-variant='solid'），这里不接管。 */
+  .xh-scope-toggle[data-part='root']:not([data-variant='solid'])[data-state='on'] {
+    --xh-action-bg-rest: var(--xh-_toggle-bg-on);
+    --xh-action-bg-hover: var(--xh-_toggle-bg-on-hover);
+    --xh-action-bg-pressed: var(--xh-_toggle-bg-on-active);
+    --xh-action-bg-focus-visible: var(--xh-_toggle-bg-on);
+    --xh-action-bg-disabled: var(--xh-_toggle-bg-on-disabled);
+    --xh-action-fg-rest: var(--xh-_toggle-fg-on);
+    --xh-action-fg-hover: var(--xh-_toggle-fg-on);
+    --xh-action-fg-pressed: var(--xh-_toggle-fg-on);
+    --xh-action-fg-focus-visible: var(--xh-_toggle-fg-on);
+    --xh-action-fg-disabled: var(--xh-_toggle-fg-on-disabled);
+    --xh-action-border-rest: var(--xh-_toggle-border-on);
+    --xh-action-border-hover: var(--xh-_toggle-border-on);
+    --xh-action-border-pressed: var(--xh-_toggle-border-on);
+    --xh-action-border-focus-visible: var(--xh-_toggle-border-on);
+    --xh-action-border-disabled: var(--xh-_toggle-border-on);
+  }
+
+  /* 使用者的 --xh-toggle-shadow 只落在按下面上：矩阵各态无影，淡底与阴影互斥 */
+  .xh-scope-toggle[data-part='root'][data-state='on'] {
+    --xh-action-shadow-rest: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-hover: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-disabled: none;
+  }
+
+  /* solid 按下后是实心面：顶边内高光与全库实心档共用一条式子。
+     禁用同样掺一半中性面保留选中信息（与上面三档同一条规则）：矩阵 solid 列的 disabled 是中性
+     bg-subtle + fg-disabled，直接吃它就与未按下的禁用面分不开；底取实心面本身（矩阵在暗色下
+     换过的品牌实心也一并跟着）掺 --xh-bg-subtle，前景留实心面的配对前景。 */
+  .xh-scope-toggle[data-part='root'][data-variant='solid'][data-state='on'] {
+    --xh-action-bg-disabled: var(
+      --xh-toggle-bg-on-disabled,
+      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle-opaque))
+    );
+    --xh-action-fg-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_action-variant-fg-rest));
+    --xh-action-highlight-rest: var(--xh-_highlight-tone);
+    --xh-action-highlight-hover: var(--xh-_highlight-tone);
+    --xh-action-highlight-pressed: var(--xh-_highlight-tone);
+    --xh-action-highlight-focus-visible: var(--xh-_highlight-tone);
+  }
+
+  /* 只有 solid 按下后才是实心面：环色与面同族画在面里看不出来，环改取面自己的前景色；
+     品牌淡底不是实心面，吃库环 */
+  .xh-scope-toggle[data-part='root'][data-variant='solid'][data-state='on']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  .xh-scope-toggle[data-part='root'][data-full-width] {
+    inline-size: 100%;
+  }
+
+  .xh-scope-toggle[data-part='root'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    .xh-scope-toggle[data-part='root'][data-state='on'] {
+      border-color: currentColor;
+      font-weight: var(--xh-font-weight-semibold);
+    }
+  }
+}