@xihan-ui/styles 1.0.0 → 2.0.0

package/css/scroll-area.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.
+ */
+
+/* 定义 scroll area 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='scroll-area'] {
@@ -58,13 +65,6 @@
     overflow-y: hidden;
   }
 
-  /* 视口带 tabindex=0（滚动区里可能一个可聚焦元素都没有），因此要有焦点环。
-     偏移取负：环画在视口内侧，否则会被 root 的 overflow:hidden 裁掉半圈 */
-  [data-scope='scroll-area'][data-part='viewport']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
   /* 有滚动条要占道时，视口在那条轴上收窄一条道的宽度，末端内容不再被压在滚动条底下。
      缩视口而不是给视口加内边距：滚动容器末端缘的 padding 计不计进 scrollWidth，各引擎不一致。 */
   [data-scope='scroll-area'][data-part='viewport'][data-lane-vertical] {
@@ -75,6 +75,64 @@
     block-size: calc(100% - var(--xh-_scrollbar-thickness));
   }
 
+  /* —— 边缘渐隐 —— */
+  /* 两条轴各铺一层遮罩，取交集：还滚得动的那一侧把内容淡出，滚到头即收成 0。
+     渐变没有逻辑方向，只能沿物理方向铺，横轴那一层的两端在 rtl 下对调（见下）。
+     遮罩里的黑白画的是 alpha 的两端，不是设计色。
+     -webkit-* 那两条排在前面兜住只认前缀写法的引擎。
+     画在视口上而不是根上：自绘滚动条是视口的兄弟节点，不会跟着一起淡掉 */
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade'] {
+    /* 渐隐带宽跟着尺寸档走，与滚动条厚度同一个 data-size */
+    --xh-_scroll-area-fade-size: var(--xh-scroll-area-fade-size, var(--xh-space-6));
+    /* 四条边各自的带宽：到头那一侧收成 0，没到头才铺开 */
+    --xh-_scroll-area-fade-block-start: 0px;
+    --xh-_scroll-area-fade-block-end: 0px;
+    --xh-_scroll-area-fade-inline-start: 0px;
+    --xh-_scroll-area-fade-inline-end: 0px;
+    --xh-_scroll-area-fade-left: var(--xh-_scroll-area-fade-inline-start);
+    --xh-_scroll-area-fade-right: var(--xh-_scroll-area-fade-inline-end);
+
+    -webkit-mask-image:
+      linear-gradient(to bottom, transparent 0, black var(--xh-_scroll-area-fade-block-start), black calc(100% - var(--xh-_scroll-area-fade-block-end)), transparent 100%),
+      linear-gradient(to right, transparent 0, black var(--xh-_scroll-area-fade-left), black calc(100% - var(--xh-_scroll-area-fade-right)), transparent 100%);
+    mask-image:
+      linear-gradient(to bottom, transparent 0, black var(--xh-_scroll-area-fade-block-start), black calc(100% - var(--xh-_scroll-area-fade-block-end)), transparent 100%),
+      linear-gradient(to right, transparent 0, black var(--xh-_scroll-area-fade-left), black calc(100% - var(--xh-_scroll-area-fade-right)), transparent 100%);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade'][data-size='sm'] {
+    --xh-_scroll-area-fade-size: var(--xh-scroll-area-fade-size, var(--xh-space-4));
+  }
+
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade'][data-size='lg'] {
+    --xh-_scroll-area-fade-size: var(--xh-scroll-area-fade-size, var(--xh-space-8));
+  }
+
+  /* 还回得去、还去得了的那一侧才铺带：贴着那一端时属性在场，规则不命中 */
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade']:not([data-at-min-vertical]) {
+    --xh-_scroll-area-fade-block-start: var(--xh-_scroll-area-fade-size);
+  }
+
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade']:not([data-at-max-vertical]) {
+    --xh-_scroll-area-fade-block-end: var(--xh-_scroll-area-fade-size);
+  }
+
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade']:not([data-at-min-horizontal]) {
+    --xh-_scroll-area-fade-inline-start: var(--xh-_scroll-area-fade-size);
+  }
+
+  [data-scope='scroll-area'][data-part='viewport'][data-variant='fade']:not([data-at-max-horizontal]) {
+    --xh-_scroll-area-fade-inline-end: var(--xh-_scroll-area-fade-size);
+  }
+
+  /* 从右往左排版时横轴的起始端在右：两端对调，逻辑那两支槽的取值不动 */
+  [dir='rtl'] [data-scope='scroll-area'][data-part='viewport'][data-variant='fade'] {
+    --xh-_scroll-area-fade-left: var(--xh-_scroll-area-fade-inline-end);
+    --xh-_scroll-area-fade-right: var(--xh-_scroll-area-fade-inline-start);
+  }
+
   /* 横向溢出全靠它撑：内容若跟着视口一起收成 100% 宽，横轴永远量不出溢出，
      横向滚动条也就永远不显形。 */
   [data-scope='scroll-area'][data-part='content'] {
@@ -86,6 +144,9 @@
      （轨道与滑块的皮仍归 scrollbar 那一份）。滑块主轴的起点与长度由连接层写进内联样式，这里不碰。 */
   [data-scope='scroll-area'][data-part='scrollbar'] {
     position: absolute;
+    /* 浮层的 positioner 一律 pointer-events: none，条子作为它的子节点会继承到，拖不动也点不着；
+       收起态那条规则优先级更高，仍旧穿透 */
+    pointer-events: auto;
     /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
        指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
        user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */

package/css/scrollbar.css

@@ -1,11 +1,20 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 scrollbar 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='scrollbar'] {
     --xh-scrollbar-skin: 1;
   }
 
-  /* 挂了自绘滚动条的容器：原生滚动条只藏外观，滚动能力一点不动。
-     标记由机器挂监听时打上，最后一条滚动条拆走才撤。下面那条 ::-webkit-scrollbar 兜住还没实现 scrollbar-width 的引擎 */
+  /* 库内原生滚动面的细条规则住在 reset 层（reset.css），本文件只管自绘条本身。
+     挂了自绘滚动条的容器：原生滚动条只藏外观，滚动能力一点不动。
+     标记由机器挂监听时打上，最后一条滚动条拆走才撤。这条是 (0,1,0)，压得过 reset 层的 thin；
+     下面那条 ::-webkit-scrollbar 兜住还没实现 scrollbar-width 的引擎 */
   [data-xh-scrollbar] {
     scrollbar-width: none;
   }
@@ -70,6 +79,12 @@
     inset-inline-end: var(--xh-_scrollbar-thickness);
   }
 
+  /* 贴在滚动层上的根：位置由连接层按层在壳内的偏移盒写成内联几何（含让位），
+     壳边的 inset 全部放开，交叉轴的厚度仍由上面的方向规则给 */
+  [data-scope='scrollbar'][data-part='root'][data-anchor='layer'] {
+    inset: auto;
+  }
+
   [data-scope='scrollbar'][data-part='root'][data-state='hidden'] {
     visibility: hidden;
     opacity: 0;
@@ -101,9 +116,16 @@
   [data-scope='scrollbar'][data-part='thumb'] {
     position: absolute;
     border-radius: var(--xh-scrollbar-thumb-radius, var(--xh-shape-pill));
-    background: var(--xh-scrollbar-thumb-bg, var(--xh-fg-scrollbar-thumb));
+    background: var(
+      --xh-scrollbar-thumb-bg,
+      var(--xh-fg-scrollbar-thumb)
+    );
+    /* 滑块里没有字，这支墨色只给聚焦环用。 */
+    color: var(--xh-fg-default);
     cursor: default;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 交叉轴在轨道内两侧各收进一个间隙，与轨道那条 padding 共用同一个旋钮。
@@ -118,19 +140,24 @@
     inset-block: var(--xh-scrollbar-gutter);
   }
 
+  /* 这两档的面往另一头走（浅色主题更深、深色主题更亮），配对的墨色跟着翻到反色那一支 */
   [data-scope='scrollbar'][data-part='thumb']:hover {
-    background: var(--xh-scrollbar-thumb-bg-hover, var(--xh-fg-scrollbar-thumb-hover));
+    background: var(
+      --xh-scrollbar-thumb-bg-hover,
+      var(--xh-fg-scrollbar-thumb-hover)
+    );
   }
 
   [data-scope='scrollbar'][data-part='thumb'][data-dragging] {
-    background: var(--xh-scrollbar-thumb-bg-active, var(--xh-fg-scrollbar-thumb-active));
+    background: var(
+      --xh-scrollbar-thumb-bg-active,
+      var(--xh-fg-scrollbar-thumb-active)
+    );
   }
 
-  /* 只有开了 focusable 的滑块进得了 Tab 序，环也就只画在它身上。
-     偏移取负：环画在轨道内侧，否则会被滚动容器的溢出边界裁掉半圈 */
-  [data-scope='scrollbar'][data-part='thumb']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
+  /* 面是实心的中性色，环色与面同族，画在面里就看不出来；环改取这一档配对的墨色 */
+  [data-scope='scrollbar'][data-part='thumb']:not([data-disabled]):focus-visible {
+    --xh-_ring-color: currentColor;
   }
 
   /* 根与轨道都是纯容器，不承载焦点；作者若给它们加了 tabindex，也不该在这儿多画一圈 */
@@ -142,7 +169,6 @@
   /* 禁用：整条不显形，这里只兜住作者硬把它显出来的那一路 */
   [data-scope='scrollbar'][data-part='thumb'][data-disabled] {
     background: var(--xh-scrollbar-thumb-bg-disabled, var(--xh-border-subtle));
-    cursor: not-allowed;
   }
 
   /* 交叉口补丁：贴在本条末端之外的那一格，与轨道同色，跟着本条淡入淡出 */
@@ -150,7 +176,7 @@
     position: absolute;
     inline-size: var(--xh-_scrollbar-thickness);
     block-size: var(--xh-_scrollbar-thickness);
-    background: var(--xh-scrollbar-corner-bg, var(--xh-scrollbar-track-bg, var(--xh-bg-scrollbar-track)));
+    background: var(--xh-scrollbar-corner-bg, var(--xh-scrollbar-track-bg, transparent));
   }
 
   [data-scope='scrollbar'][data-part='corner'][data-orientation='vertical'] {
@@ -167,4 +193,12 @@
   [data-scope='scrollbar'][data-part='corner'][hidden] {
     display: none;
   }
+
+  @media print {
+    /* 打印：滚动条画的是「还能往下看多少」，纸上没有这回事，它只会在版心边上留一条灰带。 */
+    [data-scope='scrollbar'][data-part='root'],
+    [data-scope='scrollbar'][data-part='corner'] {
+      display: none;
+    }
+  }
 }

package/css/segmented.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.
+ */
+
+/* 定义 segmented 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='segmented'] {
@@ -12,32 +19,49 @@
     --xh-_segmented-px: var(--xh-control-px-md);
     --xh-_segmented-gap: var(--xh-control-gap-md);
     --xh-_segmented-font-size: var(--xh-control-font-md);
-    /* 指示器底色与选中段的文字色；没写 data-tone 时就是这里的取值 */
-    --xh-_segmented-indicator-bg: var(--xh-bg-surface);
+    /* 指示器（有滑块开关的白色抬起面，§7.3）的底、描边与选中段的文字色；没写 data-tone 时就是这里的取值 */
+    --xh-_segmented-indicator-bg: var(--xh-bg-surface-raised);
     --xh-_segmented-fg-selected: var(--xh-fg-default);
+    /* 轨道是淡底承载面：段坐在它上面，悬停 200 → 按下 300（§7.2），host 槽向内下发同一副阶梯 */
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
 
+    /* 一行排不下就折行：每个选项都必须看得见、点得到，硬撑一行会把末尾几段顶出容器。
+       段各自带圆角，折行不会切角；不改成横向滚动是因为段离轨道内沿只有一格衬距，
+       轨道一旦成为滚动容器，段的焦点环（画在段外侧 2px 处）会被裁掉。
+       轨道是一块淡底面（§8.3）：--xh-bg-subtle 底 + 同宽透明占位边 + 无影，边界由滑块的描边与轨道底色的落差承担 */
     position: relative;
     display: inline-flex;
+    flex-wrap: wrap;
     align-items: stretch;
     padding: var(--xh-segmented-track-padding, var(--xh-space-0_5));
-    border: var(--xh-stroke-thin) solid var(--xh-segmented-border, var(--xh-border-subtle));
-    border-radius: var(--xh-segmented-radius, var(--xh-shape-control));
+    border: var(--xh-stroke-thin) solid var(--xh-segmented-border, transparent);
+    border-radius: var(--xh-segmented-radius, var(--xh-shape-surface));
     background: var(--xh-segmented-bg, var(--xh-bg-subtle));
     font-size: var(--xh-segmented-font-size, var(--xh-_segmented-font-size));
   }
 
-  /* 横排时外盒整体就是一档控件高：段被 align-items: stretch 撑满轨道内侧，与同行控件齐平 */
+  /* 横排时外盒整体就是一档控件高：段被 align-items: stretch 撑满轨道内侧，与同行控件齐平。
+     写下限而非定值：排得下时两者逐值相同，排不下折了行才让轨道往下长 */
   [data-scope='segmented'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
-    block-size: var(--xh-segmented-h, var(--xh-_segmented-h));
+    min-block-size: var(--xh-segmented-h, var(--xh-_segmented-h));
   }
 
+  /* 段的高度交给轨道：一行时被 stretch 撑满轨道内侧。
+     下限按「一档控件高减掉轨道上下的衬距与描边」算，折了行每一行仍是这个高度，
+     不写的话多行会被 align-content 均分成一叠扁条 */
   [data-scope='segmented'][data-part='root'][data-orientation='horizontal'] [data-scope='segmented'][data-part='item'] {
     block-size: auto;
+    min-block-size: calc(
+      var(--xh-segmented-h, var(--xh-_segmented-h)) - 2 * var(--xh-segmented-track-padding, var(--xh-space-0_5)) - 2 *
+        var(--xh-stroke-thin)
+    );
   }
 
   [data-scope='segmented'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
+    flex-wrap: nowrap;
   }
 
   /* 撑满行宽：各段等分剩余空间，长短不一的文字也排得齐 */
@@ -66,7 +90,6 @@
 
   [data-scope='segmented'][data-part='root'][data-disabled] {
     background: var(--xh-segmented-bg-disabled, var(--xh-bg-muted));
-    cursor: not-allowed;
   }
 
   /* 整组禁用时指示器落回轨道平面（不再浮起），但底色一点不兑淡：
@@ -79,10 +102,15 @@
   /* —— 语气 —— */
   /* 选择器带 [data-tone] 限定：不限定的话，放在语气容器里的分段控件会跟着改色 */
   [data-scope='segmented'][data-part='root'][data-tone] {
-    --xh-_segmented-indicator-bg: var(--xh-_tone, var(--xh-bg-surface));
+    --xh-_segmented-indicator-bg: var(--xh-_tone, var(--xh-bg-surface-raised));
     --xh-_segmented-fg-selected: var(--xh-_tone-on, var(--xh-fg-default));
   }
 
+  /* 语气档的滑块是实心语气面，描边与底同色：raised 面必带描边，这里的描边只是把边位补齐，不另画一圈 */
+  [data-scope='segmented'][data-part='root'][data-tone] [data-scope='segmented'][data-part='indicator'] {
+    border-color: var(--xh-segmented-indicator-border, var(--xh-_tone, var(--xh-border-default)));
+  }
+
   /* —— 尺寸 —— */
   /* 缺省的 md 档写在上面的基础规则里 */
   [data-scope='segmented'][data-part='root'][data-size='sm'] {
@@ -121,10 +149,10 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    /* 段是轨道里铺开的一段（§9.2 Segmented item 归行级），按下只换面不缩放：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),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 选中态：单选是 role=radio + aria-checked，样式一律读 data-state，不读 ARIA。
@@ -133,21 +161,31 @@
     color: var(--xh-segmented-item-fg-checked, var(--xh-_segmented-fg-selected));
   }
 
+  /* 指示器在场时选中段自己透空，环紧挨着的是压在它底下、与它同一块矩形的指示器实心底；
+     环色与那块底同族就看不出来，改取选中段自己的前景色——那一支本来就配着这块底定的。
+     指示器是可选部件，作者没渲染它时选中段直接坐在轨道底上，那一档的环仍取默认那一支 */
+  [data-scope='segmented'][data-part='root']:has([data-scope='segmented'][data-part='indicator']:not([hidden]))
+    [data-scope='segmented'][data-part='item'][data-state='checked']:focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
   /* 悬停只提亮未选中的那几段：选中段的底下压着指示器，再变色就成了两套强调。
-     底色用中性的悬停档——它是「指哪一段」的轻反馈，不表达选中 */
+     底色用中性的悬停档——它是「指哪一段」的轻反馈，不表达选中；段坐在淡底轨道里，悬停取 200（§7.2） */
   [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-state='checked']):hover {
     background-color: var(--xh-segmented-item-bg-hover, var(--xh-bg-subtle-hover));
     color: var(--xh-segmented-item-fg-hover, var(--xh-fg-default));
   }
 
-  /* 按下去要有回应：整段轻微下压，松手即弹回。选中段也压——按在已选段上同样是一次点击。
-     只读段不压：它本来就不接受改值，压下去等于骗人 */
-  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):active {
-    scale: var(--xh-segmented-item-press-scale, var(--xh-motion-scale-press));
+  /* 按下去要有回应：未选中段换到按下面（淡底承载 300），几何不动；只读段不压。
+     选中段不叠按下面：它压着的白色滑块本身就是选中身份（§7.3 有滑块开关无叠加态） */
+  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
+    background-color: var(--xh-segmented-item-bg-pressed, var(--xh-bg-subtle-active));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   /* 只读：值改不动，但对比度不降，光标也不摆出"禁止"的样子 */
-  [data-scope='segmented'][data-part='item'][data-readonly] {
+  [data-scope='segmented'][data-part='item'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
@@ -156,7 +194,6 @@
      用了 fg-disabled 就不再叠 opacity：半透明会把底下的指示器透出来 */
   [data-scope='segmented'][data-part='item'][data-disabled] {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   /* 禁用且选中的那一段不换文字色：它压着的是指示器的实心底，换成 fg-disabled 后
@@ -166,12 +203,6 @@
     color: var(--xh-segmented-item-fg-checked-disabled, var(--xh-_segmented-fg-selected));
   }
 
-  /* 焦点环往内收一格：段贴着轨道内缘，往外画会被 root 的描边切掉一半 */
-  [data-scope='segmented'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-offset));
-  }
-
   [data-scope='segmented'][data-part='item-text'] {
     color: inherit;
     user-select: none;
@@ -191,18 +222,23 @@
     inset-block-start: var(--xh-_segmented-indicator-y);
     inline-size: var(--xh-_segmented-indicator-w);
     block-size: var(--xh-_segmented-indicator-h);
+    /* 白色抬起面三件（§7.3 有滑块开关）：surface-raised 底 + border-default 描边 + raised 影，描边必须在，影只是加成。
+       尺寸由连接层按段的盒量出，描边吃进盒里（border-box），滑块与段仍是同一块矩形 */
+    border: var(--xh-stroke-thin) solid var(--xh-segmented-indicator-border, var(--xh-border-default));
     border-radius: var(--xh-segmented-indicator-radius, var(--xh-shape-inset));
     background: var(--xh-segmented-indicator-bg, var(--xh-_segmented-indicator-bg));
     box-shadow: var(--xh-segmented-indicator-shadow, var(--xh-elevation-raised));
     /* 段压在它上面，点击一律交给段；作者把它写在段之后时也不至于吞掉点击 */
     pointer-events: none;
-    /* 用标准曲线而不是进场那条：滑块是被推过去的，起步就该有速度，
-       纯减速曲线看着像自己飘过去。四个几何量同时走，段宽不等时才不会先变形再挪位 */
+    /* 用连续档而不是进场那条：滑块是被推过去的，起步就该有速度，
+       纯减速曲线看着像自己飘过去。四个几何量同时走，段宽不等时才不会先变形再挪位。
+       投影单列一项：整组禁用时滑块落回轨道平面，那层投影跟着收 */
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-ease-standard),
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-ease-standard),
-      inline-size var(--xh-motion-duration-enter) var(--xh-ease-standard),
-      block-size var(--xh-motion-duration-enter) var(--xh-ease-standard);
+      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
@@ -212,4 +248,33 @@
   [data-scope='segmented'][data-part='indicator'][hidden] {
     display: none;
   }
+
+  @media print {
+    /* 打印默认丢背景色：滑块那块底与它的落影都不画，「当前选的是哪一段」在纸上没了。
+       选中段改画一圈实边、字加粗，两条都不吃底色 */
+    [data-scope='segmented'][data-part='item'][data-state='checked'] {
+      border: var(--xh-stroke-thin) solid currentColor;
+      font-weight: var(--xh-font-weight-bold);
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 按下：常态靠底色深一档表出，这一档里底色被统一换成 Canvas；按住那一下用系统高亮反色画回来 */
+    [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media (pointer: coarse) {
+    /* 手指的落点比一段高：命中区由伪元素向块轴两侧外扩，段的盒与轨道内的分格一点不动。
+       只扩块轴——段与段在行内轴上首尾相接，往两侧扩会与相邻段的命中区叠上。
+       取 8px 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕 */
+    [data-scope='segmented'][data-part='item']::before {
+      content: '';
+      position: absolute;
+      inset-block: -8px;
+      inset-inline: 0;
+    }
+  }
 }