@xihan-ui/styles 2.1.0 → 3.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xihan-ui/styles",
   "type": "module",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "description": "XiHan.UI styled layer — pure CSS skins driven by data-attributes and design tokens.",
   "author": {
     "name": "XiHanFun",
@@ -34,10 +34,15 @@
       "import": "./component-tokens.js"
     },
     "./action-control.css": "./family/action-control.css",
+    "./chart.css": "./family/chart.css",
+    "./choice-card.css": "./family/choice-card.css",
     "./collection-item.css": "./family/collection-item.css",
     "./field-chrome.css": "./family/field-chrome.css",
+    "./loading-ring.css": "./family/loading-ring.css",
+    "./material.css": "./family/material.css",
     "./motion.css": "./family/motion.css",
     "./swatch.css": "./family/swatch.css",
+    "./tag-list.css": "./family/tag-list.css",
     "./components.tokens.json": "./components.tokens.json",
     "./accordion.css": "./css/accordion.css",
     "./affix.css": "./css/affix.css",
@@ -56,9 +61,11 @@
     "./calendar-range-picker.css": "./css/calendar-range-picker.css",
     "./card.css": "./css/card.css",
     "./carousel.css": "./css/carousel.css",
+    "./cartesian-chart.css": "./css/cartesian-chart.css",
     "./cascader.css": "./css/cascader.css",
     "./checkbox-group.css": "./css/checkbox-group.css",
     "./checkbox.css": "./css/checkbox.css",
+    "./citation.css": "./css/citation.css",
     "./clipboard.css": "./css/clipboard.css",
     "./code-view.css": "./css/code-view.css",
     "./collapsible.css": "./css/collapsible.css",
@@ -91,12 +98,14 @@
     "./floating-panel.css": "./css/floating-panel.css",
     "./forced-colors.css": "./css/forced-colors.css",
     "./form.css": "./css/form.css",
-    "./gradient-text.css": "./css/gradient-text.css",
+    "./funnel-chart.css": "./css/funnel-chart.css",
+    "./graph-chart.css": "./css/graph-chart.css",
     "./grid.css": "./css/grid.css",
+    "./grid-list.css": "./css/grid-list.css",
     "./heatmap.css": "./css/heatmap.css",
+    "./hierarchy-chart.css": "./css/hierarchy-chart.css",
     "./highlight.css": "./css/highlight.css",
     "./hover-card.css": "./css/hover-card.css",
-    "./icon-wrapper.css": "./css/icon-wrapper.css",
     "./icon.css": "./css/icon.css",
     "./kbd.css": "./css/kbd.css",
     "./image-cropper.css": "./css/image-cropper.css",
@@ -130,6 +139,7 @@
     "./page-header.css": "./css/page-header.css",
     "./pagination.css": "./css/pagination.css",
     "./password-input.css": "./css/password-input.css",
+    "./pie-chart.css": "./css/pie-chart.css",
     "./pin-input.css": "./css/pin-input.css",
     "./pointer.css": "./css/pointer.css",
     "./popconfirm.css": "./css/popconfirm.css",
@@ -137,20 +147,22 @@
     "./progress.css": "./css/progress.css",
     "./prompt-input.css": "./css/prompt-input.css",
     "./question-flow.css": "./css/question-flow.css",
+    "./radar-chart.css": "./css/radar-chart.css",
     "./radio-group.css": "./css/radio-group.css",
     "./rating.css": "./css/rating.css",
     "./reset.css": "./css/reset.css",
     "./reasoning.css": "./css/reasoning.css",
     "./resizable.css": "./css/resizable.css",
+    "./sankey-chart.css": "./css/sankey-chart.css",
     "./scroll-area.css": "./css/scroll-area.css",
     "./scrollbar.css": "./css/scrollbar.css",
-    "./segmented.css": "./css/segmented.css",
     "./select.css": "./css/select.css",
     "./separator.css": "./css/separator.css",
     "./side-nav.css": "./css/side-nav.css",
     "./signature-pad.css": "./css/signature-pad.css",
     "./skeleton.css": "./css/skeleton.css",
     "./slider.css": "./css/slider.css",
+    "./sparkline.css": "./css/sparkline.css",
     "./spinner.css": "./css/spinner.css",
     "./sortable.css": "./css/sortable.css",
     "./splitter.css": "./css/splitter.css",
@@ -169,10 +181,10 @@
     "./timeline.css": "./css/timeline.css",
     "./timer.css": "./css/timer.css",
     "./timestamp.css": "./css/timestamp.css",
-    "./toast.css": "./css/toast.css",
     "./toggle-group.css": "./css/toggle-group.css",
     "./toggle.css": "./css/toggle.css",
     "./tone.css": "./css/tone.css",
+    "./liquid.css": "./css/liquid.css",
     "./tool-call.css": "./css/tool-call.css",
     "./toolbar.css": "./css/toolbar.css",
     "./tooltip.css": "./css/tooltip.css",
@@ -205,10 +217,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@xihan-ui/tokens": "^2.1.0"
+    "@xihan-ui/tokens": "^3.1.0"
   },
   "scripts": {
-    "gen": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs",
-    "build": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs"
+    "gen": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/chart-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs",
+    "build": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/chart-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs"
   }
 }

package/css/gradient-text.css

@@ -1,91 +0,0 @@
-/*
- * Copyright (c) 2021-Present XiHanFun and contributors.
- * Licensed under the MIT License. See LICENSE in the project root for license information.
- */
-
-/* 定义 gradient text 样式。 */
-
-@layer xihan.components {
-  /* 轴边界只路由简单前景值，渐变本身仍在组件根用本地 direction/from/to 计算。
-     这样内层 default/more 能双向重置，也不会把未解析的组件变量冻结在祖先上。 */
-  :where(:root, [data-contrast='default']) {
-    --xh-_gradient-text-fg: transparent;
-  }
-
-  :where([data-contrast='more']) {
-    --xh-_gradient-text-fg: var(--xh-fg-default);
-  }
-
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='gradient-text'] {
-    --xh-gradient-text-skin: 1;
-  }
-
-  /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
-     两条 background-clip 都写：WebKit 只认带前缀那条。
-     -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，也要一并透明。 */
-  [data-scope='gradient-text'][data-part='root'] {
-    /* 走向由 data-direction 换掉这一个槽，背景那条声明只写一遍 */
-    --xh-_gradient-text-dir: to right;
-    /* 两端颜色各收一个私有槽：语气档换的是这两支，使用者槽仍排在它们前面 */
-    --xh-_gradient-text-from: var(--xh-gradient-brand-from);
-    --xh-_gradient-text-to: var(--xh-gradient-brand-to);
-
-    background-image: linear-gradient(
-      var(--xh-_gradient-text-dir),
-      var(--xh-gradient-text-from, var(--xh-_gradient-text-from)),
-      var(--xh-gradient-text-to, var(--xh-_gradient-text-to))
-    );
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: var(--xh-_gradient-text-fg);
-    -webkit-text-fill-color: currentColor;
-  }
-
-  /* —— 走向 —— */
-  /* 逐档换算成 CSS 的 to <边或角>，四条边加四个角 */
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-left'] {
-    --xh-_gradient-text-dir: to left;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom'] {
-    --xh-_gradient-text-dir: to bottom;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-top'] {
-    --xh-_gradient-text-dir: to top;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom-right'] {
-    --xh-_gradient-text-dir: to bottom right;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom-left'] {
-    --xh-_gradient-text-dir: to bottom left;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-top-right'] {
-    --xh-_gradient-text-dir: to top right;
-  }
-
-  [data-scope='gradient-text'][data-part='root'][data-direction='to-top-left'] {
-    --xh-_gradient-text-dir: to top left;
-  }
-
-  /* —— 语气 —— */
-  /* 两端取该族主色与它压深一档的取值，深浅两态自动跟随。
-     排在使用者槽之后：作者写了 from / to，六族语气一并让位 */
-  [data-scope='gradient-text'][data-part='root'][data-tone] {
-    --xh-_gradient-text-from: var(--xh-_tone);
-    --xh-_gradient-text-to: var(--xh-_tone-active);
-  }
-
-  /* 无 JS 时的系统高对比、强制色与打印统一退回单色；显式局部轴由上面的最近作用域标记负责。 */
-  @media (prefers-contrast: more), (forced-colors: active), print {
-    [data-scope='gradient-text'][data-part='root'] {
-      background-image: none;
-      color: inherit;
-      -webkit-text-fill-color: currentColor;
-    }
-  }
-}

package/css/icon-wrapper.css

@@ -1,81 +0,0 @@
-/*
- * Copyright (c) 2021-Present XiHanFun and contributors.
- * Licensed under the MIT License. See LICENSE in the project root for license information.
- */
-
-/* 定义 icon wrapper 样式。 */
-
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='icon-wrapper'] {
-    --xh-icon-wrapper-skin: 1;
-  }
-
-  /* 定直径的图标底座：图元在正中，底色、描边与形状由三轴决定。
-     直径与图元直径分两个槽位，底座换档时里面的图元跟着一起换 */
-  [data-scope='icon-wrapper'][data-part='root'] {
-    /* 私有槽位：底座直径与图元直径，换档只改这两个 */
-    --xh-_icon-wrapper-size: var(--xh-icon-wrapper-size, var(--xh-control-h-md));
-
-    /* 流给里面的图元——包括自己写了档位的那一枚，它的档位取值也读这个槽，
-       图元直径因此始终跟着底座换档 */
-    --xh-icon-size: var(--xh-icon-wrapper-glyph-size, var(--xh-glyph-size-md));
-
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-_icon-wrapper-size);
-    block-size: var(--xh-_icon-wrapper-size);
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-icon-wrapper-radius, var(--xh-shape-circle));
-    background: var(--xh-icon-wrapper-bg, var(--xh-bg-subtle));
-    color: var(--xh-icon-wrapper-fg, var(--xh-fg-default));
-    line-height: var(--xh-leading-none);
-  }
-
-  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
-     不补的话作者给节点加 hidden 后它照样显示 */
-  [data-scope='icon-wrapper'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* —— 形态 —— */
-  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的品牌/中性配色。
-     实心档还在顶边画一条极浅的内高光，把这块底座衬出厚度；另外三档面上没有实心底，不画 */
-  [data-scope='icon-wrapper'][data-part='root'][data-variant='solid'] {
-    --xh-_icon-wrapper-highlight: var(--xh-_highlight-tone);
-
-    background: var(--xh-_tone, var(--xh-bg-brand));
-    color: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    box-shadow: var(--xh-icon-wrapper-shadow, var(--xh-_icon-wrapper-highlight));
-  }
-
-  [data-scope='icon-wrapper'][data-part='root'][data-variant='subtle'] {
-    background: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    color: var(--xh-_tone-fg, var(--xh-fg-default));
-  }
-
-  [data-scope='icon-wrapper'][data-part='root'][data-variant='outline'] {
-    border-color: var(--xh-_tone-border, var(--xh-border-default));
-    background: transparent;
-    color: var(--xh-_tone-fg, var(--xh-fg-default));
-  }
-
-  [data-scope='icon-wrapper'][data-part='root'][data-variant='ghost'] {
-    background: transparent;
-    color: var(--xh-_tone-fg, var(--xh-fg-default));
-  }
-
-  /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里 */
-  [data-scope='icon-wrapper'][data-part='root'][data-size='sm'] {
-    --xh-_icon-wrapper-size: var(--xh-icon-wrapper-size, var(--xh-control-h-sm));
-    --xh-icon-size: var(--xh-icon-wrapper-glyph-size, var(--xh-glyph-size-sm));
-  }
-
-  [data-scope='icon-wrapper'][data-part='root'][data-size='lg'] {
-    --xh-_icon-wrapper-size: var(--xh-icon-wrapper-size, var(--xh-control-h-lg));
-    --xh-icon-size: var(--xh-icon-wrapper-glyph-size, var(--xh-glyph-size-lg));
-  }
-}

package/css/segmented.css

@@ -1,280 +0,0 @@
-/*
- * 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'] {
-    --xh-segmented-skin: 1;
-  }
-
-  /* 一条轨道装着若干段，指示器在轨道里滑。指示器是绝对定位的，
-     root 必须是它的定位参照系；段与段之间不留缝，所以不设 gap */
-  [data-scope='segmented'][data-part='root'] {
-    /* 尺寸档只换这四个私有槽，段与文字从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_segmented-h: var(--xh-control-h-md);
-    --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-raised);
-    --xh-_segmented-fg-selected: 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);
-
-    /* 一行排不下就折行：每个选项都必须看得见、点得到，硬撑一行会把末尾几段顶出容器。
-       段各自带圆角，折行不会切角；不改成横向滚动是因为段离轨道内沿只有一格衬距，
-       轨道一旦成为滚动容器，段的焦点环（画在段外侧 2px 处）会被裁掉。
-       轨道是一块淡底面：--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, 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 撑满轨道内侧，与同行控件齐平。
-     写下限而非定值：排得下时两者逐值相同，排不下折了行才让轨道往下长 */
-  [data-scope='segmented'][data-part='root'][data-orientation='horizontal'] {
-    flex-direction: row;
-    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;
-  }
-
-  /* 撑满行宽：各段等分剩余空间，长短不一的文字也排得齐 */
-  [data-scope='segmented'][data-part='root'][data-block] {
-    display: flex;
-    inline-size: 100%;
-  }
-
-  /* 等分只在横排成立：竖排的主轴是块轴，flex-basis: 0 会顶掉段自己的高度档，
-     段高改由「等分容器高度」决定，三档控件高度从此对它没有作用。
-     竖排下段本来就靠上面那条 inline-size: 100% 与 align-items: stretch 撑满宽度 */
-  [data-scope='segmented'][data-part='root'][data-block][data-orientation='horizontal']
-    > [data-scope='segmented'][data-part='item'] {
-    flex: 1 1 0;
-  }
-
-  /* root 会短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给段，
-     在它身上画环只会闪一下就跳走，高亮要长在段上 */
-  [data-scope='segmented'][data-part='root']:focus-visible {
-    outline: none;
-  }
-
-  [data-scope='segmented'][data-part='root'][data-invalid] {
-    border-color: var(--xh-segmented-border-invalid, var(--xh-border-invalid));
-  }
-
-  [data-scope='segmented'][data-part='root'][data-disabled] {
-    background: var(--xh-segmented-bg-disabled, var(--xh-bg-muted));
-  }
-
-  /* 整组禁用时指示器落回轨道平面（不再浮起），但底色一点不兑淡：
-     它上面压着选中段的文字，往 muted 兑哪怕一成，brand 的对比度就从 5.08 掉到 4.24 */
-  [data-scope='segmented'][data-part='root'][data-disabled]
-    [data-scope='segmented'][data-part='indicator'] {
-    box-shadow: var(--xh-segmented-indicator-shadow-disabled, none);
-  }
-
-  /* —— 语气 —— */
-  /* 选择器带 [data-tone] 限定：不限定的话，放在语气容器里的分段控件会跟着改色 */
-  [data-scope='segmented'][data-part='root'][data-tone] {
-    --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'] {
-    --xh-_segmented-h: var(--xh-control-h-sm);
-    --xh-_segmented-px: var(--xh-control-px-sm);
-    --xh-_segmented-gap: var(--xh-control-gap-sm);
-    --xh-_segmented-font-size: var(--xh-control-font-sm);
-  }
-
-  [data-scope='segmented'][data-part='root'][data-size='lg'] {
-    --xh-_segmented-h: var(--xh-control-h-lg);
-    --xh-_segmented-px: var(--xh-control-px-lg);
-    --xh-_segmented-gap: var(--xh-control-gap-lg);
-    --xh-_segmented-font-size: var(--xh-control-font-lg);
-  }
-
-  /* 段自己也定位，于是与绝对定位的指示器按文档序比高低：
-     指示器写在段之前，段与它的焦点环便压在指示器上面，不必动层号 */
-  [data-scope='segmented'][data-part='item'] {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-segmented-item-gap, var(--xh-_segmented-gap));
-    block-size: var(--xh-segmented-item-h, var(--xh-_segmented-h));
-    padding-inline: var(--xh-segmented-item-px, var(--xh-_segmented-px));
-    border: 0;
-    border-radius: var(--xh-segmented-item-radius, var(--xh-shape-inset));
-    background: transparent;
-    color: var(--xh-segmented-item-fg, var(--xh-fg-muted));
-    /* 按钮不继承宿主字体，尺寸档在 root 上，两者都要显式接过来 */
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: var(--xh-segmented-item-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    /* 段是轨道里铺开的一段（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);
-  }
-
-  /* 选中态：单选是 role=radio + aria-checked，样式一律读 data-state，不读 ARIA。
-     文字色也要跟着变——指示器是可选部件，作者不渲染它时"当前是哪一段"仍然要看得出来 */
-  [data-scope='segmented'][data-part='item'][data-state='checked'] {
-    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 */
-  [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));
-  }
-
-  /* 按下去要有回应：未选中段换到按下面（淡底承载 300），几何不动；只读段不压。
-     选中段不叠按下面：它压着的白色滑块本身就是选中身份（有滑块开关无叠加态） */
-  [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]:not([data-disabled]) {
-    cursor: default;
-  }
-
-  /* 集合条目一律 aria-disabled 而非原生 disabled（禁用段仍要能当方向键的起点），
-     所以这里读 data-disabled，写 :disabled 永远不命中。
-     用了 fg-disabled 就不再叠 opacity：半透明会把底下的指示器透出来 */
-  [data-scope='segmented'][data-part='item'][data-disabled] {
-    color: var(--xh-fg-disabled);
-  }
-
-  /* 禁用且选中的那一段不换文字色：它压着的是指示器的实心底，换成 fg-disabled 后
-     六族语气实测只剩 1.04–3.01 的对比度，「当前选的是哪一段」当场看不见。
-     禁用由轨道底色、未选中段的文字色与光标表达，选中段保持可读 */
-  [data-scope='segmented'][data-part='item'][data-disabled][data-state='checked'] {
-    color: var(--xh-segmented-item-fg-checked-disabled, var(--xh-_segmented-fg-selected));
-  }
-
-  [data-scope='segmented'][data-part='item-text'] {
-    color: inherit;
-    user-select: none;
-  }
-
-  [data-scope='segmented'][data-part='indicator'] {
-    /* 位置与尺寸由连接层量好写成内联样式（它量得到，样式表量不到）；
-       这四个是还没量到时的落点，量到即被内联样式盖过 */
-    --xh-_segmented-indicator-x: 0;
-    --xh-_segmented-indicator-y: 0;
-    --xh-_segmented-indicator-w: 0;
-    --xh-_segmented-indicator-h: 0;
-
-    position: absolute;
-    display: block;
-    inset-inline-start: var(--xh-_segmented-indicator-x);
-    inset-block-start: var(--xh-_segmented-indicator-y);
-    inline-size: var(--xh-_segmented-indicator-w);
-    block-size: var(--xh-_segmented-indicator-h);
-    /* 白色抬起面三件（有滑块开关）：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-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}，
-     不补的话作者给节点加 hidden 后它照样显示 */
-  [data-scope='segmented'][data-part='root'][hidden],
-  [data-scope='segmented'][data-part='item'][hidden],
-  [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;
-    }
-  }
-}