@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/tabs.css

@@ -0,0 +1,944 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tabs 样式。 */
+
+/* line 档的页签归 Collection Item 导航当前（nav 语境）：面、字色、字重、光标与按压时间线由家族配方按
+   家族角色（data-xh-collection-item / -size / -context）给，本皮肤只映射桥接槽；card / segment 档不归族，面与字仍写在本皮肤。
+   line 档的 2px 指示线由本皮肤画：标签带里放了 indicator 部件就由部件滑动，没放则选中标签自画一条静态线 */
+@import '../family/collection-item.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-tabs {
+    --xh-tabs-skin: 1;
+  }
+
+  .xh-scope-tabs[data-part='root'] {
+    /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_tabs-trigger-h: var(--xh-control-h-md);
+    --xh-_tabs-trigger-px: var(--xh-control-px-md);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
+
+    /* 缺省是 line 变体：透明标签带，选中项由文字与底部指示条表达。Web Components 升级前还没有
+       data-variant，这组几何基础值也必须画成相同结果，避免定义完成时闪换样式；line 档的面与字色由家族
+       按升级后写入的家族角色给，升级前那一帧只有几何没有面色（与 side-nav / menu 同）。
+       悬停与按下的面按承载面分档：line 档经家族走白底承载 hover 100 → pressed 200；card 坐在
+       画布上 hover 100 → pressed 200；segment 坐在淡底轨道里 hover 200 → pressed 300。card / segment 的
+       六支面槽只在各自形态块里赋值，line 档不消费它们 */
+    --xh-_tabs-list-gap: var(--xh-space-0);
+    --xh-_tabs-list-bg: transparent;
+    --xh-_tabs-list-p: var(--xh-space-0);
+    --xh-_tabs-list-radius: 0;
+    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-trigger-border-width: 0;
+    --xh-_tabs-trigger-border: transparent;
+    --xh-_tabs-trigger-radius: var(--xh-shape-control);
+
+    /* 语气落在选中态：指示条与选中标签的文字。
+       没写 data-tone 时 --xh-_tone 一族没被声明，两个槽都退回原来的取色 */
+    --xh-_tabs-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+
+    /* 翻页钮的盖底：标签带放不下时它浮在两端，挪到它底下的那截标签要被盖住。line / card 档的标签带是透明的，
+       盖底取 surface；坐在别的面上（画布、淡底面板）时由使用者槽换成所在的面。segment 档取轨道的淡底。
+       悬停与按下同样要盖得住：淡底阶梯取不透明档，line / card 在白底上 100 → 200，segment 在轨道上 200 → 300 */
+    --xh-_tabs-scroll-trigger-bg: var(--xh-bg-surface);
+    --xh-_tabs-scroll-trigger-bg-hover: var(--xh-bg-subtle-opaque);
+    --xh-_tabs-scroll-trigger-bg-pressed: var(--xh-bg-subtle-hover-opaque);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+    /* 排在一行弹性 / 网格容器里时也让得开：不写这条，根的最小宽是整条标签带的自然宽，
+       外层再窄它也不缩，标签带永远"放得下"、翻页钮永远不露面，整行反倒被顶出去 */
+    min-inline-size: 0;
+  }
+
+  /* 纵向：list 与 panel 并排 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical'] {
+    flex-direction: row;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-tabs[data-part='root'][data-size='sm'] {
+    --xh-_tabs-trigger-h: var(--xh-control-h-sm);
+    --xh-_tabs-trigger-px: var(--xh-control-px-sm);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-tabs[data-part='root'][data-size='lg'] {
+    --xh-_tabs-trigger-h: var(--xh-control-h-lg);
+    --xh-_tabs-trigger-px: var(--xh-control-px-lg);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-lg);
+  }
+
+  /* —— 变体 —— */
+  /* 主变体的显式写法，与缺省视觉一致：透明标签带与底部基线，选中项由文字和滑动指示条强调。 */
+  .xh-scope-tabs[data-part='root'][data-variant='line'] {
+    --xh-_tabs-list-gap: var(--xh-space-0);
+    --xh-_tabs-list-bg: transparent;
+    --xh-_tabs-list-p: var(--xh-space-0);
+    --xh-_tabs-list-radius: 0;
+    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-trigger-border-width: 0;
+    --xh-_tabs-trigger-border: transparent;
+    --xh-_tabs-trigger-radius: var(--xh-shape-control);
+  }
+
+  /* 卡片式：基线收掉，选中的那张标签自己成为一张有描边有底的卡片，顶边一条指示条。
+     标签坐在画布上，悬停 100 → 按下 200（白底承载） */
+  .xh-scope-tabs[data-part='root'][data-variant='card'] {
+    --xh-_tabs-list-gap: var(--xh-control-gap-md);
+    --xh-_tabs-list-bg: transparent;
+    --xh-_tabs-list-p: var(--xh-space-0);
+    --xh-_tabs-list-radius: 0;
+    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-trigger-border-width: var(--xh-stroke-thin);
+    --xh-_tabs-trigger-radius: var(--xh-shape-control);
+    --xh-_tabs-trigger-bg-hover: var(--xh-bg-subtle);
+    --xh-_tabs-trigger-bg-pressed: var(--xh-bg-subtle-hover);
+    --xh-_tabs-trigger-bg-active: var(--xh-_tone-subtle, var(--xh-bg-surface));
+    --xh-_tabs-trigger-bg-active-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-surface));
+    --xh-_tabs-trigger-border-active: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tabs-trigger-shadow-active: inset 0 var(--xh-stroke-thick) 0 0 var(--xh-_tabs-accent);
+    /* 选中文字不换品牌色：卡片面与顶边条已经表达选中 */
+    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* 分段式（有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
+     未选中标签坐在淡底轨道里，悬停 200 → 按下 300；选中面自己不再叠悬停 / 按下态。
+     选中面的三件（surface-raised 底、border-default 描边、raised 影）写在下面标签自己的规则里 */
+  .xh-scope-tabs[data-part='root'][data-variant='segment'] {
+    --xh-_tabs-list-gap: var(--xh-space-0_5);
+    --xh-_tabs-list-bg: var(--xh-bg-subtle);
+    --xh-_tabs-list-p: var(--xh-space-1);
+    --xh-_tabs-list-radius: var(--xh-shape-surface);
+    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-trigger-border-width: var(--xh-stroke-thin);
+    --xh-_tabs-trigger-border: transparent;
+    --xh-_tabs-trigger-radius: var(--xh-shape-control);
+    --xh-_tabs-trigger-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_tabs-trigger-bg-pressed: var(--xh-bg-subtle-active);
+    --xh-_tabs-trigger-bg-active: var(--xh-_tone-subtle, var(--xh-bg-surface-raised));
+    --xh-_tabs-trigger-bg-active-hover: var(--xh-_tone-subtle, var(--xh-bg-surface-raised));
+    --xh-_tabs-trigger-border-active: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_tabs-scroll-trigger-bg: var(--xh-bg-subtle-opaque);
+    --xh-_tabs-scroll-trigger-bg-hover: var(--xh-bg-subtle-hover-opaque);
+    --xh-_tabs-scroll-trigger-bg-pressed: var(--xh-bg-subtle-active-opaque);
+  }
+
+  /* 一行排不下不折行：标签整条沿主轴位移露出被裁掉的那截，两端的翻页钮与滚轮驱动，位移量由机器写在
+     --xh-_tabs-scroll 上（下面孩子那条规则读它）。只裁主轴（overflow-x: clip），交叉轴仍是 visible：
+     标签的焦点环画在盒内不受影响，粗指针下往块轴两侧外扩的命中区、segment 档抬起面的投影也都不被裁。
+     不做成滚动容器（overflow: hidden 会把两个轴一起裁，粗指针那圈外扩就没了；原生滚动条也不该露在标签带下） */
+  .xh-scope-tabs[data-part='list'] {
+    /* 位移量：放得下时 0，放不下时由机器写成内联样式盖过这条 */
+    --xh-_tabs-scroll: 0;
+
+    position: relative;
+    /* 关起标签带内的层序：segment 档的标签抬一层压在滑动的抬起面上、翻页钮再抬一层压在标签上，两个层号都不漏到外面去 */
+    isolation: isolate;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: clip visible;
+    align-items: center;
+    gap: var(--xh-tabs-list-gap, var(--xh-_tabs-list-gap));
+    padding: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+    border-block-end: var(--xh-_tabs-list-border-width) solid var(--xh-tabs-list-border, var(--xh-border-default));
+    border-radius: var(--xh-tabs-list-radius, var(--xh-_tabs-list-radius));
+    background: var(--xh-tabs-list-bg, var(--xh-_tabs-list-bg));
+  }
+
+  /* 竖排：主轴换成块向，裁块向、行向放开。竖排的标签带高随内容长，只有使用者限了高才会放不下 */
+  .xh-scope-tabs[data-part='list'][aria-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+    overflow: visible clip;
+    border-block-end: 0;
+    border-inline-end: var(--xh-_tabs-list-border-width) solid var(--xh-tabs-list-border, var(--xh-border-default));
+  }
+
+  /* 排在标签带里的孩子——标签、分隔线、指示条——整体沿主轴位移；两端的翻页钮贴边不动，不在这条里。
+     位移量是机器逐帧补间写进来的（屏内的像素级推移走 continuous 档，与指示条同一档），这里不接过渡：
+     各部件各有自己的过渡清单（line 档的标签归家族），往每一份里都加一条 translate 会把家族与皮肤耦在一起 */
+  .xh-scope-tabs[data-part='list']
+    > :not(.xh-scope-tabs[data-part='prev-trigger'], .xh-scope-tabs[data-part='next-trigger']) {
+    translate: var(--xh-_tabs-scroll) 0;
+  }
+
+  .xh-scope-tabs[data-part='list'][aria-orientation='vertical']
+    > :not(.xh-scope-tabs[data-part='prev-trigger'], .xh-scope-tabs[data-part='next-trigger']) {
+    translate: 0 var(--xh-_tabs-scroll);
+  }
+
+  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（三选一）。
+     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯；
+     只写在标签带上不写在 root 上：内容面板里的按钮坐在画布上，不该跟着抬一档 */
+  .xh-scope-tabs[data-part='root'][data-variant='segment'] .xh-scope-tabs[data-part='list'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border: var(--xh-stroke-thin) solid var(--xh-tabs-list-border, transparent);
+  }
+
+  /* 标签的几何三档共用；面、字色、字重与光标不在这里写：line 档由家族按投影的家族角色给，
+     card / segment 档写在下面带形态限定的规则里。本条 (0,2,0) 压过家族基础块 (0,1,0)，写了面就会盖掉家族的换面 */
+  .xh-scope-tabs[data-part='trigger'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-tabs-trigger-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h));
+    padding-inline: var(--xh-tabs-trigger-px, var(--xh-_tabs-trigger-px));
+    border: var(--xh-_tabs-trigger-border-width) solid var(--xh-tabs-trigger-border, var(--xh-_tabs-trigger-border));
+    border-radius: var(--xh-tabs-trigger-radius, var(--xh-_tabs-trigger-radius));
+    font-size: var(--xh-tabs-trigger-font-size, var(--xh-_tabs-trigger-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    /* 家族基础块给条目写了 min-inline-size: 0（菜单条目要能收窄给文字省略号用）；标签不省略号，
+       segment 档又按 flex: 1 1 0 等分带宽，下限归零后排不下的标签会被压到文字之下。
+       收回 auto：下限按文字算，排不下的那截由标签带位移露出 */
+    min-inline-size: auto;
+  }
+
+  /* line 档（导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
+     悬停 100 + default 字，按下 200 只换面；当前页透明面 + 品牌深字（随语气的 --xh-_tabs-accent-text）+
+     medium，叠悬停 100。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
+     没放则由下面的静态线规则画在选中标签自己身上。高度由 block-size 定，块向内边距归零 */
+  .xh-scope-tabs[data-part='root'][data-variant='line'] .xh-scope-tabs[data-part='trigger'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-bg-rest: var(--xh-tabs-trigger-bg, transparent);
+    --xh-collection-fg-rest: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
+    --xh-collection-font-weight-rest: var(--xh-tabs-trigger-font-weight, var(--xh-font-weight-regular));
+    --xh-collection-bg-hover: var(--xh-tabs-trigger-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-tabs-trigger-fg-hover, var(--xh-fg-default));
+    --xh-collection-bg-pressed: var(--xh-tabs-trigger-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-pressed: var(--xh-tabs-trigger-fg-pressed, var(--xh-fg-default));
+    --xh-collection-bg-current: var(--xh-tabs-trigger-bg-active, transparent);
+    --xh-collection-bg-current-hover: var(--xh-tabs-trigger-bg-active-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-current: var(--xh-tabs-trigger-fg-active, var(--xh-_tabs-accent-text));
+    --xh-collection-font-weight-current: var(--xh-tabs-trigger-font-weight-active, var(--xh-font-weight-medium));
+  }
+
+  /* card / segment 档不归族：面、字色、字重、光标与过渡写在标签自己身上 */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger'] {
+    background: var(--xh-tabs-trigger-bg, transparent);
+    color: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
+    font-weight: var(--xh-tabs-trigger-font-weight, var(--xh-text-label-weight));
+    cursor: pointer;
+    /* 标签是铺开的一段（Tabs trigger 归行级），按下只换面不缩放：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),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 横排标签的宽随文字走，不把标签带等分铺满一行：line 与 card 档是一排并列的页签，
+     每一枚只占自己的字宽加内衬，标签带右侧留白；放不下的那截由标签带位移露出 */
+  .xh-scope-tabs[data-part='root'][data-orientation='horizontal']
+    .xh-scope-tabs[data-part='trigger'] {
+    flex: 0 0 auto;
+  }
+
+  /* 竖排标签的高就是控件高，不随标签带压缩：使用者限了高、标签带放不下时，靠位移露出被裁掉的那截（与横排同一套），
+     而不是把每一枚压扁到只剩一行字高 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='trigger'] {
+    flex-shrink: 0;
+  }
+
+  /* segment 档是一条轨道里的格子（与 RadioGroup 的 segmented 形态同构）：格子按可用宽度等分 */
+  .xh-scope-tabs[data-part='root'][data-orientation='horizontal'][data-variant='segment']
+    .xh-scope-tabs[data-part='trigger'] {
+    flex: 1 1 0;
+  }
+
+  /* 禁用项带的是 aria-disabled 而非原生 disabled，:hover 照样命中；
+     不挡掉的话置灰的那一页悬停仍会换底，看着还能点。
+     悬停面按形态分档：card 100、segment 200（见各形态块上的私有槽）；line 档由家族给 */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger']:not([data-disabled]):hover {
+    background: var(--xh-tabs-trigger-bg-hover, var(--xh-_tabs-trigger-bg-hover));
+  }
+
+  /* 按下去要有回应：card / segment 档的未选中标签换到按下面（card 200、segment 300），几何不动。
+     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（有滑块开关无叠加态） */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
+    background: var(--xh-tabs-trigger-bg-pressed, var(--xh-_tabs-trigger-bg-pressed));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* card / segment 档的选中标签：字色收回默认（--xh-_tabs-accent-text 在两档都落 fg-default），
+     由卡片面 / 抬起面表达当前；line 档的当前页由家族按 data-current 给 */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger'][data-state='active'] {
+    border-color: var(--xh-tabs-trigger-border-active, var(--xh-_tabs-trigger-border-active));
+    background: var(--xh-tabs-trigger-bg-active, var(--xh-_tabs-trigger-bg-active));
+    color: var(--xh-tabs-trigger-fg-active, var(--xh-_tabs-accent-text));
+    box-shadow: var(--xh-tabs-trigger-shadow-active, var(--xh-_tabs-trigger-shadow-active));
+    font-weight: var(--xh-tabs-trigger-font-weight-active, var(--xh-font-weight-medium));
+  }
+
+  /* segment 档的选中标签就是那块白色抬起的滑块面（有滑块开关）：surface-raised 底 +
+     border-default 描边 + raised 影三件写在标签自己身上。标签带里放了 indicator 部件时，
+     这块面搬到部件上跟着滑（见下面的 indicator 规则），标签自己透空、只留字 */
+  .xh-scope-tabs[data-part='root'][data-variant='segment']
+    .xh-scope-tabs[data-part='trigger'][data-state='active'] {
+    border-color: var(--xh-tabs-trigger-border-active, var(--xh-_tone-border, var(--xh-border-default)));
+    background: var(--xh-tabs-trigger-bg-active, var(--xh-_tone-subtle, var(--xh-bg-surface-raised)));
+    box-shadow: var(--xh-tabs-trigger-shadow-active, var(--xh-elevation-raised));
+  }
+
+  /* segment 档的标签压在抬起面之上：面是绝对定位的部件，写在标签之后也不许盖住字。
+     层号只在标签带的层叠上下文里比大小（list 上有 isolation: isolate） */
+  .xh-scope-tabs[data-part='root'][data-variant='segment'] .xh-scope-tabs[data-part='trigger'] {
+    z-index: 1;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-variant='segment']
+    .xh-scope-tabs[data-part='list']:has(.xh-scope-tabs[data-part='indicator']:not([hidden]))
+    .xh-scope-tabs[data-part='trigger'][data-state='active'] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* 选中项被悬停：常态 :hover 那条带着禁用守卫，特指度高过上面那条选中档，
+     不单列一条的话指针一压到选中项上，形态档的选中底就被轻档吃掉 */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger']:not([data-disabled])[data-state='active']:hover {
+    background: var(--xh-tabs-trigger-bg-active-hover, var(--xh-_tabs-trigger-bg-active-hover));
+  }
+
+  /* line 档的禁用字色由家族按 aria-disabled 给 */
+  .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    .xh-scope-tabs[data-part='trigger'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  .xh-scope-tabs[data-part='content'] {
+    padding-block: var(--xh-tabs-content-py, var(--xh-stack-gap-md));
+    color: var(--xh-tabs-content-fg, var(--xh-fg-default));
+  }
+
+  /* —— 标签拖拽换位 —— */
+  /* 整张标签都是拖动源，光标换成抓手告诉人这张标签按得动。
+     这条不写 touch-action：整张标签关掉手势，标签带自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  .xh-scope-tabs[data-part='trigger'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 标签拖拽把手：标签里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着标签带滚。整张标签起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的标签也白白让出滚动 */
+  .xh-scope-tabs[data-part='tab-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+    border-radius: var(--xh-tabs-drag-radius, var(--xh-shape-control));
+    color: var(--xh-tabs-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  /* 抓手是两条与排列轴垂直的线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+     标签带横排时标签左右排开，画的是两条竖线；竖排那一档在下面换成横线。
+     基础这一档同时兜住 root 上没写方向的情形。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  .xh-scope-tabs[data-part='tab-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+    block-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+    border-inline: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  /* 竖排的标签上下排开，两条线跟着转九十度：长短对调，描边换到块向两侧，
+     行向那两条得显式清零，否则四边都留着描边，抓手成了一个方框 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='tab-drag-trigger']:empty::after {
+    inline-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+    block-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+    border-inline: 0;
+    border-block: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  .xh-scope-tabs[data-part='tab-drag-trigger']:not([data-disabled]):hover,
+  .xh-scope-tabs[data-part='tab-drag-trigger'][data-dragging] {
+    color: var(--xh-tabs-drag-fg-active, var(--xh-fg-default));
+  }
+
+  .xh-scope-tabs[data-part='tab-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的标签照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着标签内的头一格，藏掉之后同一条标签带里
+     能拖与不能拖的两张标签，文字起点会错开一格 */
+  .xh-scope-tabs[data-part='tab-drag-trigger'][data-disabled] {
+    color: var(--xh-tabs-drag-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 被拖的那张标签压暗，让人看得出正在搬的是它。这里只动 opacity、cursor 与 user-select，
+     一个 transform 都不写：标签原地不动，要落到哪儿全交给落点指示 */
+  .xh-scope-tabs[data-part='trigger'][data-dragging] {
+    opacity: var(--xh-tabs-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 落点指示线：插到哪张标签的哪一侧，线就画在那张标签的那条边上。
+     定位上下文不必在这儿再给：标签的基础规则里已经是 position: relative。
+     线走 ::after：选中态那道指示画的是 box-shadow（card 档的顶边条、segment 档的浮起），
+     line 档放了部件时指示条在 list 上，没放时选中标签的静态线也占 ::after——它带 :not([data-drop]) 守卫，
+     拖动落到当前页上时让给落点线。标签自身不收 overflow，线不会被裁掉；仍整条画在盒内不压着边 */
+  .xh-scope-tabs[data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    content: '';
+    position: absolute;
+    background: var(--xh-tabs-drop-fg, var(--xh-bg-brand));
+  }
+
+  /* 线的方向跟着标签带的排法换：方向写在 root 的 data-orientation 上，从根往下选。
+     横排的标签左右排开，线是一条竖的，贯穿标签的块向、贴在行向的前后沿 */
+  .xh-scope-tabs[data-part='root'][data-orientation='horizontal']
+    .xh-scope-tabs[data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    inset-block: 0;
+    inline-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+  }
+
+  /* 落在前沿还是后沿走逻辑属性：rtl 下 before 自己就换到右边去了。
+     换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+  .xh-scope-tabs[data-part='root'][data-orientation='horizontal']
+    .xh-scope-tabs[data-part='trigger'][data-drop='before']::after {
+    inset-inline-start: 0;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-orientation='horizontal']
+    .xh-scope-tabs[data-part='trigger'][data-drop='after']::after {
+    inset-inline-end: 0;
+  }
+
+  /* 竖排的标签上下排开，线是一条横的，贯穿标签的行向、贴在块向的前后沿 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    inset-inline: 0;
+    block-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+  }
+
+  /* 块向同样走逻辑属性，跟着书写模式走 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='trigger'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='trigger'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  .xh-scope-tabs[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* 选中标签的四个几何量由机器量好写成私有槽 --xh-_tabs-indicator-x / -y / -w / -h（它量得到，样式表量不到）；
+     line 档只取主轴那两支画一条线，这里管交叉轴的贴边与粗细，以及长什么样。它是可选部件——不渲染它时，
+     line 档由选中标签自画一条同规格的静态线（见下），card 档由卡片面表达，segment 档由标签自己的抬起面表达 */
+  .xh-scope-tabs[data-part='indicator'] {
+    /* 还没量到时的落点，量到即被机器写的私有槽盖过 */
+    --xh-_tabs-indicator-x: 0;
+    --xh-_tabs-indicator-y: 0;
+    --xh-_tabs-indicator-w: 0;
+    --xh-_tabs-indicator-h: 0;
+    --xh-_tabs-indicator-stretch: 0;
+
+    /* 摆在行首，落点交给 transform（只走合成），长度跟着标签宽走。标签带挪动时整条孩子
+       共用的 translate 叠在它之上，两者互不覆盖，过渡也只挂在 transform 上 */
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inline-size: var(--xh-_tabs-indicator-w);
+    block-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+    border-radius: var(--xh-tabs-indicator-radius, var(--xh-shape-pill));
+    background: var(--xh-tabs-indicator-color, var(--xh-_tabs-accent));
+    transform: translate(var(--xh-_tabs-indicator-x), 0);
+    transition:
+      transform var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* transform 只认物理方向：RTL 下行首在右边，起始缘量出的距离往左推 */
+  .xh-scope-tabs[data-part='indicator']:dir(rtl) {
+    transform: translate(calc(-1 * var(--xh-_tabs-indicator-x)), 0);
+  }
+
+  /* 卡片变体已经由卡片面表达状态，不再叠一条下划线。 */
+  .xh-scope-tabs[data-part='indicator'][data-variant='card'] {
+    display: none;
+  }
+
+  /* segment 档（有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
+     surface-raised 底 + border-default 描边 + raised 影三件与 RadioGroup segmented 形态的滑块同一套；
+     描边吃进盒里（border-box），面与标签仍是同一块矩形。标签压在它上面，点击一律交给标签。
+     用连续档而不是进场那条：滑块是被推过去的，起步就该有速度；四个几何量同时走，标签宽不等时才不会先变形再挪位 */
+  .xh-scope-tabs[data-part='indicator'][data-variant='segment'] {
+    inset-block-end: auto;
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: var(--xh-_tabs-indicator-w);
+    block-size: var(--xh-_tabs-indicator-h);
+    box-sizing: border-box;
+    border: var(--xh-stroke-thin) solid var(--xh-tabs-trigger-border-active, var(--xh-_tone-border, var(--xh-border-default)));
+    border-radius: var(--xh-tabs-trigger-radius, var(--xh-_tabs-trigger-radius));
+    background: var(--xh-tabs-trigger-bg-active, var(--xh-_tone-subtle, var(--xh-bg-surface-raised)));
+    box-shadow: var(--xh-tabs-trigger-shadow-active, var(--xh-elevation-raised));
+    pointer-events: none;
+    transform: translate(var(--xh-_tabs-indicator-x), var(--xh-_tabs-indicator-y));
+    transition:
+      transform 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);
+  }
+
+  .xh-scope-tabs[data-part='indicator'][data-variant='segment']:dir(rtl) {
+    transform: translate(calc(-1 * var(--xh-_tabs-indicator-x)), var(--xh-_tabs-indicator-y));
+  }
+
+  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（导航当前页）：
+     横向缺省也要像纵向示例那样有一条选中线，作者不必为了这条线多放一个部件。
+     线画在选中标签的 ::after 上，以标签盒为定位参照（基础规则里已是 position: relative），
+     厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。
+     不做动画：它随 data-current 在标签间跳，滑动只有部件做得到。
+     标签带里一旦放了 indicator 部件，这条线就收起、位置交给部件滑动，不重复画两条：
+     由标签带按 :has 探一次，把私有槽写成 none，线的 content 读它；标签自己不必再各带一段 :has。
+     ::after 同时是换位落点线的载体：拖动中标签带着 data-drop 时让给落点线，松手即回来 */
+  .xh-scope-tabs[data-part='list']:has(.xh-scope-tabs[data-part='indicator']) {
+    --xh-_tabs-static-line: none;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-variant='line']
+    .xh-scope-tabs[data-part='trigger'][data-current]:not([data-drop])::after {
+    content: var(--xh-_tabs-static-line, '');
+    position: absolute;
+    pointer-events: none;
+    border-radius: var(--xh-tabs-indicator-radius, var(--xh-shape-pill));
+    background: var(--xh-tabs-indicator-color, var(--xh-_tabs-accent));
+  }
+
+  /* 横排：贴标签的块向末端（底边），横贯整枚标签 */
+  .xh-scope-tabs[data-part='root'][data-variant='line'][data-orientation='horizontal']
+    .xh-scope-tabs[data-part='trigger'][data-current]:not([data-drop])::after {
+    inset-block-end: 0;
+    inset-inline: 0;
+    block-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+  }
+
+  /* 竖排：贴标签的行向末端（与 indicator 部件同一侧，rtl 随逻辑属性镜像），纵贯整枚标签 */
+  .xh-scope-tabs[data-part='root'][data-variant='line'][data-orientation='vertical']
+    .xh-scope-tabs[data-part='trigger'][data-current]:not([data-drop])::after {
+    inset-inline-end: 0;
+    inset-block: 0;
+    inline-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+  }
+
+  /* 竖排 line 档：滑条从基线挪到结束缘那条轨道上，主轴换成块向，取 -y / -h 两支 */
+  .xh-scope-tabs[data-part='indicator'][data-orientation='vertical']:not([data-variant='segment']) {
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    block-size: var(--xh-_tabs-indicator-h);
+    inline-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+    transform: translate(0, var(--xh-_tabs-indicator-y));
+    transition:
+      transform var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 首次落位与同一项的重量（窗口缩放、换上正式字体）直接到位，只有换项才滑：连接层在这一落点投影
+     data-instant。选择器带上排布与形态，压得过上面按它们单写的过渡 */
+  .xh-scope-tabs[data-part='indicator'][data-orientation][data-variant][data-instant] {
+    transition: none;
+  }
+
+  /* 液态档：两沿由弹簧逐帧推着走（连接层每一帧写好盒子），几何量不再补过渡（选择器带上排布与形态，压得过上面按它们单写的过渡）；
+     被拉长时在另一个方向上压扁，表达体积守恒，拉长到目标的两倍时压到 --xh-motion-scale-squash */
+  :where([data-material='liquid']) .xh-scope-tabs[data-part='indicator'][data-orientation][data-variant] {
+    --xh-_tabs-indicator-squash: max(var(--xh-motion-scale-squash), calc(1 - var(--xh-_tabs-indicator-stretch) * (1 - var(--xh-motion-scale-squash))));
+
+    scale: 1 var(--xh-_tabs-indicator-squash);
+    transition: none;
+  }
+
+  :where([data-material='liquid']) .xh-scope-tabs[data-part='indicator'][data-orientation='vertical'][data-variant] {
+    scale: var(--xh-_tabs-indicator-squash) 1;
+  }
+
+  /* 标签之间的细线：横排时是一条竖线，竖排时躺平 */
+  .xh-scope-tabs[data-part='separator'] {
+    flex: none;
+    align-self: center;
+    inline-size: var(--xh-tabs-separator-thickness, var(--xh-stroke-thin));
+    block-size: var(--xh-tabs-separator-size, var(--xh-space-4));
+    border-radius: var(--xh-tabs-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-tabs-separator-color, var(--xh-border-default));
+  }
+
+  .xh-scope-tabs[data-part='separator'][data-orientation='vertical'] {
+    align-self: stretch;
+    inline-size: auto;
+    block-size: var(--xh-tabs-separator-thickness, var(--xh-stroke-thin));
+  }
+
+  /* —— 两端翻页钮 —— */
+  /* 标签带放不下时浮在两端的单图标钮，接 Action Control icon 档 ghost 面（连接层投影 profile / variant / size）：
+     盒取标签同高的正方形，四态面、0.97 按压与粗指针 44px 命中区由家族配方给。绝对定位贴在标签带两端、
+     不随标签位移；挪到它底下的那截标签由静息底盖住（透明 ghost 面盖不住字，静息 / 焦点 / 禁用三列换成盖底槽，
+     悬停与按下换成盖底档的不透明阶梯——line / card 在白底上 100 → 200，segment 在轨道上 200 → 300） */
+  .xh-scope-tabs[data-part='prev-trigger'],
+  .xh-scope-tabs[data-part='next-trigger'] {
+    --xh-action-visual-size: var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h));
+    --xh-action-bg-rest: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
+    --xh-action-bg-hover: var(--xh-_tabs-scroll-trigger-bg-hover);
+    --xh-action-bg-pressed: var(--xh-_tabs-scroll-trigger-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
+    --xh-action-bg-disabled: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
+    --xh-action-fg-rest: var(--xh-tabs-scroll-trigger-fg, var(--xh-fg-muted));
+    /* 作者塞进来的图标跟着 icon 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-tabs-scroll-icon-size, var(--xh-_action-profile-glyph-size));
+
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  /* 贴在标签带内衬盒的两端：segment 档的轨道留着一圈内衬，钮坐在内衬里、不压到轨道边上 */
+  .xh-scope-tabs[data-part='prev-trigger'] {
+    inset-inline-start: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  .xh-scope-tabs[data-part='next-trigger'] {
+    inset-inline-end: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  /* 竖排：两只钮躺平成横贯标签带的一条，各贴块向的首尾 */
+  .xh-scope-tabs[data-part='prev-trigger'][data-orientation='vertical'],
+  .xh-scope-tabs[data-part='next-trigger'][data-orientation='vertical'] {
+    inline-size: auto;
+    inset-inline: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+    inset-block-start: auto;
+    translate: 0 0;
+  }
+
+  .xh-scope-tabs[data-part='prev-trigger'][data-orientation='vertical'] {
+    inset-block-start: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  .xh-scope-tabs[data-part='next-trigger'][data-orientation='vertical'] {
+    inset-block-end: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  /* 挪到头的那一侧是原生 disabled（不可聚焦），连接层同时给 data-disabled：到头即收起——
+     它浮在标签上，留着会盖住边上那枚完整露出的标签；配方 disabled 列给的面被 opacity 0 盖住，两者不冲突 */
+  .xh-scope-tabs[data-part='prev-trigger'][data-disabled],
+  .xh-scope-tabs[data-part='next-trigger'][data-disabled] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排一左一右的 chevron，竖排一上一下；作者塞了自己的图形这几条即不命中 */
+  .xh-scope-tabs[data-part='prev-trigger']:empty::before,
+  .xh-scope-tabs[data-part='next-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+  }
+
+  .xh-scope-tabs[data-part='next-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+    mask-image: var(--xh-glyph-mark-chevron-right);
+  }
+
+  /* rtl 下标签序从右往左走，箭头跟着指向行进方向 */
+  [dir='rtl'] .xh-scope-tabs[data-part='prev-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+    mask-image: var(--xh-glyph-mark-chevron-right);
+  }
+
+  [dir='rtl'] .xh-scope-tabs[data-part='next-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-left);
+    mask-image: var(--xh-glyph-mark-chevron-left);
+  }
+
+  .xh-scope-tabs[data-part='prev-trigger'][data-orientation='vertical']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-up);
+    mask-image: var(--xh-glyph-mark-chevron-up);
+  }
+
+  .xh-scope-tabs[data-part='next-trigger'][data-orientation='vertical']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-down);
+    mask-image: var(--xh-glyph-mark-chevron-down);
+  }
+
+  /* —— 「更多」钮 —— */
+  /* 放了「更多」钮：钮排在标签带之后、同一行（竖排是同一列的列尾）。它不能放进标签带——tablist 只收 tab，
+     所以是 root 的孩子；root 换成两轨网格，标签带占能伸缩的那一轨、钮占按内容的那一轨，面板等其余孩子横跨两轨排在
+     下面（竖排排在右侧）。钮收着（hidden）时那一轨是 0，标签带铺满；钮与标签带之间的间距挂在钮自己身上，
+     收着时一并让开。标签带的可用长度因此随钮的有无变：放不放得下由机器按让回钮那一截算，钮不会自己把自己留住 */
+  .xh-scope-tabs[data-part='root']:has(> .xh-scope-tabs[data-part='overflow-trigger']) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 0;
+    row-gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+  }
+
+  .xh-scope-tabs[data-part='root']:has(> .xh-scope-tabs[data-part='overflow-trigger']) > * {
+    grid-column: 1 / -1;
+  }
+
+  .xh-scope-tabs[data-part='root']:has(> .xh-scope-tabs[data-part='overflow-trigger'])
+    > .xh-scope-tabs[data-part='list'] {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  .xh-scope-tabs[data-part='root']:has(> .xh-scope-tabs[data-part='overflow-trigger'])
+    > .xh-scope-tabs[data-part='overflow-trigger'] {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: center;
+    margin-inline-start: var(--xh-space-1);
+  }
+
+  /* 竖排：标签带与钮上下叠成左侧一列（钮在列尾），面板占右侧那一轨、跨两行 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']:has(> .xh-scope-tabs[data-part='overflow-trigger']) {
+    grid-template-rows: minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+    row-gap: 0;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']:has(> .xh-scope-tabs[data-part='overflow-trigger']) > * {
+    grid-row: 1 / -1;
+    grid-column: 2;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']:has(> .xh-scope-tabs[data-part='overflow-trigger'])
+    > .xh-scope-tabs[data-part='list'] {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical']:has(> .xh-scope-tabs[data-part='overflow-trigger'])
+    > .xh-scope-tabs[data-part='overflow-trigger'] {
+    grid-row: 2;
+    grid-column: 1;
+    align-self: auto;
+    margin-inline-start: 0;
+    margin-block-start: var(--xh-space-1);
+  }
+
+  /* 钮本身：接 Action Control icon 档 ghost 面（连接层投影 profile / variant / size），盒取标签同高的正方形，
+     与两端翻页钮同一身份；四态面、0.97 按压、焦点环与粗指针 44px 命中区由家族配方给。它坐在 root 的面上
+     （不在标签带里），承载面阶梯走家族缺省的白底 100 → 200；字取次要色，与静息的标签、翻页钮同档 */
+  .xh-scope-tabs[data-part='overflow-trigger'] {
+    --xh-action-visual-size: var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h));
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    /* 作者塞进来的图标跟着 icon 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    touch-action: manipulation;
+  }
+
+  /* 竖排：与竖排的翻页钮一样躺平成横贯标签带那一列的一条 */
+  .xh-scope-tabs[data-part='overflow-trigger'][data-orientation='vertical'] {
+    inline-size: auto;
+  }
+
+  /* 下拉开着：与悬停同档的中性面，不用品牌色、不另画环；列的是哪几个标签由下拉本身说明 */
+  .xh-scope-tabs[data-part='overflow-trigger'][data-state='open'] {
+    --xh-action-bg-rest: var(--xh-_action-variant-bg-hover);
+    --xh-action-bg-focus-visible: var(--xh-_action-variant-bg-hover);
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排三点（与工具条的「更多」同一枚）。作者塞了自己的图标这条即不命中 */
+  .xh-scope-tabs[data-part='overflow-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  /* —— 关闭钮 —— */
+  /* 关闭钮与所属标签平级、紧跟其后（不嵌进 role=tab 的按钮里），画面上收进标签面的行尾：标签在行尾让出一格
+     （钮的边长 + 与行尾的留白 + 与文字的间距），钮以负的起始外边距退回这一格，结束外边距补回同样的留白，
+     下一枚标签的起点与没有关闭钮时一致。留白取标签与钮高度差的一半，钮在标签里上下左右都居中对齐。
+     面归 Action Control icon 档 ghost 面、xs 档（连接层投影）：四态面、0.97 按压与粗指针命中区由家族配方给，
+     这里只管落位与字色。悬停落在钮上时标签自己回到静息面，只有钮亮起，按下去关的是哪一个一目了然 */
+  .xh-scope-tabs[data-part='root'] {
+    --xh-_tabs-close-size: var(--xh-control-action-size);
+    --xh-_tabs-close-inset: calc((var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h)) - var(--xh-_tabs-close-size)) / 2);
+    /* 钮退回去的距离：横排退过自己、行尾留白与标签带间距；竖排退过半个标签高、半个钮高与标签带间距 */
+    --xh-_tabs-close-offset: calc(var(--xh-_tabs-close-size) + var(--xh-_tabs-close-inset) + var(--xh-tabs-list-gap, var(--xh-_tabs-list-gap)));
+    --xh-_tabs-close-offset-block: calc((var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h)) + var(--xh-_tabs-close-size)) / 2 + var(--xh-tabs-list-gap, var(--xh-_tabs-list-gap)));
+  }
+
+  .xh-scope-tabs[data-part='trigger']:has(+ .xh-scope-tabs[data-part='close-trigger']:not([hidden])) {
+    padding-inline-end: calc(var(--xh-_tabs-close-size) + var(--xh-_tabs-close-inset) + var(--xh-space-1));
+  }
+
+  .xh-scope-tabs[data-part='close-trigger'] {
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    /* 作者塞进来的图标跟着 xs 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    flex: none;
+    /* segment 档的标签抬了一层压在滑动的抬起面上，钮排在标签之后、同一层即压在标签上 */
+    z-index: 1;
+    margin-inline-start: calc(-1 * var(--xh-_tabs-close-offset));
+    margin-inline-end: var(--xh-_tabs-close-inset);
+  }
+
+  /* 竖排：标签上下排开，钮退回的是上一行——起始外边距改在块向，行向贴到行尾 */
+  .xh-scope-tabs[data-part='root'][data-orientation='vertical'] .xh-scope-tabs[data-part='close-trigger'] {
+    align-self: flex-end;
+    margin-block-start: calc(-1 * var(--xh-_tabs-close-offset-block));
+    margin-block-end: var(--xh-_tabs-close-inset);
+    margin-inline-start: 0;
+  }
+
+  /* 没写内容就由皮肤画一枚叉；作者塞了自己的图形这一条即不命中 */
+  .xh-scope-tabs[data-part='close-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-tabs[data-part='root'][hidden],
+  .xh-scope-tabs[data-part='list'][hidden],
+  .xh-scope-tabs[data-part='trigger'][hidden],
+  .xh-scope-tabs[data-part='close-trigger'][hidden],
+  .xh-scope-tabs[data-part='indicator'][hidden],
+  .xh-scope-tabs[data-part='separator'][hidden],
+  .xh-scope-tabs[data-part='prev-trigger'][hidden],
+  .xh-scope-tabs[data-part='next-trigger'][hidden],
+  .xh-scope-tabs[data-part='overflow-trigger'][hidden],
+  .xh-scope-tabs[data-part='tab-drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 手指落点：命中区由伪元素向块轴两侧外扩，标签的盒与标签带的高度一点不动——
+     加高标签会把基线与滑条一起顶下去。
+     只扩块轴：标签在行内轴上首尾相接（segment 档只留半格缝），往两侧扩会与相邻标签的命中区叠上。
+     取 8px 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕。
+     用 ::before：::after 已经被换位时的落点线占着 */
+  @media (pointer: coarse) {
+    .xh-scope-tabs[data-part='trigger']::before {
+      content: '';
+      position: absolute;
+      inset-block: -8px;
+      inset-inline: 0;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 滑条与分隔线画的都是一块纯底色，这一档里底色被统一换成 Canvas，两者整根消失。
+       滑条换成系统高亮色、分隔线换成前景色画回来 */
+    .xh-scope-tabs[data-part='indicator'] {
+      background: Highlight;
+    }
+
+    /* 没放部件时选中标签自画的那条静态线同样是一块纯底色，同一档换成系统高亮色 */
+    .xh-scope-tabs[data-part='root'][data-variant='line']
+      .xh-scope-tabs[data-part='trigger'][data-current]:not([data-drop])::after {
+      background: Highlight;
+    }
+
+    .xh-scope-tabs[data-part='separator'] {
+      background: CanvasText;
+    }
+
+    /* 按下：常态靠底色深一档表出，这一档里底色被统一换掉；按住那一下用系统高亮反色画回来。
+       line 档的按下反色由家族的 forced-colors 段给 */
+    .xh-scope-tabs[data-part='root']:is([data-variant='card'], [data-variant='segment'])
+      .xh-scope-tabs[data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢背景与投影：三档形态表达选中的三条通道（选中底、card 档的顶边条、
+       segment 档的浮起）在纸上一条都不剩，只有一条比别人深一点的字色。
+       改用下划线与字重表达同一件事，两者都不改盒子的高度 */
+    .xh-scope-tabs[data-part='trigger'][data-state='active'] {
+      font-weight: var(--xh-font-weight-semibold);
+      text-decoration: underline;
+    }
+
+    /* 纸上翻不了页、关不了标签、也弹不出下拉，这几只钮不上纸 */
+    .xh-scope-tabs[data-part='prev-trigger'],
+    .xh-scope-tabs[data-part='next-trigger'],
+    .xh-scope-tabs[data-part='overflow-trigger'],
+    .xh-scope-tabs[data-part='close-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-tabs:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-tabs:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-tabs:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}