@xihan-ui/styles 1.0.0 → 2.0.0

package/css/tabs.css

@@ -1,3 +1,15 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tabs'] {
@@ -10,28 +22,36 @@
     --xh-_tabs-trigger-px: var(--xh-control-px-md);
     --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
 
-    /* 形态档只换这几个私有槽：列表的底、内边距、基线，与标签的描边、选中底、选中态那道指示。
-       缺省档（line）是一条基线加一行标签，选中只换文字色——这里的取值即现状 */
-    --xh-_tabs-list-gap: var(--xh-control-gap-md);
+    /* 缺省是 line 变体：透明标签带，选中项由文字与底部指示条表达。Web Components 升级前还没有
+       data-variant，这组几何基础值也必须画成相同结果，避免定义完成时闪换样式；line 档的面与字色由家族
+       按升级后写入的家族角色给，升级前那一帧只有几何没有面色（与 side-nav / menu 同）。
+       悬停与按下的面按承载面分档（§7.2）：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: var(--xh-stroke-thin);
+    --xh-_tabs-list-border-width: 0;
     --xh-_tabs-trigger-border-width: 0;
     --xh-_tabs-trigger-border: transparent;
-    --xh-_tabs-trigger-bg-active: transparent;
-    --xh-_tabs-trigger-bg-active-hover: var(--xh-bg-subtle-hover);
-    --xh-_tabs-trigger-border-active: transparent;
-    --xh-_tabs-trigger-shadow-active: none;
+    --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-default));
+    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+
+    /* 翻页钮的盖底：标签带放不下时它浮在两端，挪到它底下的那截标签要被盖住。line / card 档的标签带是透明的，
+       盖底取 surface；坐在别的面上（画布、淡底面板）时由使用者槽换成所在的面。segment 档取轨道的淡底 */
+    --xh-_tabs-scroll-trigger-bg: var(--xh-bg-surface);
 
     display: flex;
     flex-direction: column;
     gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+    /* 排在一行弹性 / 网格容器里时也让得开：不写这条，根的最小宽是整条标签带的自然宽，
+       外层再窄它也不缩，标签带永远"放得下"、翻页钮永远不露面，整行反倒被顶出去 */
+    min-inline-size: 0;
   }
 
   /* 纵向：list 与 panel 并排 */
@@ -53,35 +73,74 @@
     --xh-_tabs-trigger-font-size: var(--xh-control-font-lg);
   }
 
-  /* —— 形态 —— */
-  /* 形态只决定选中态怎么画；用哪族颜色由 data-tone 决定。
-     line 档不在这儿：它就是上面那套基础取值，写不写 data-variant 都长一个样 */
+  /* —— 变体 —— */
+  /* 主变体的显式写法，与缺省视觉一致：透明标签带与底部基线，选中项由文字和滑动指示条强调。 */
+  [data-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（§7.2 白底承载） */
   [data-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));
   }
 
-  /* 分段控件式：整条列表是一块底，选中的标签是压在这块底上浮起的一片，没有基线也没有指示条 */
+  /* 分段式（§7.3 有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
+     未选中标签坐在淡底轨道里，悬停 200 → 按下 300；选中面自己不再叠悬停 / 按下态。
+     选中面的三件（surface-raised 底、border-default 描边、raised 影）写在下面标签自己的规则里 */
   [data-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-control);
+    --xh-_tabs-list-radius: var(--xh-shape-surface);
     --xh-_tabs-list-border-width: 0;
-    --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-shadow-active: var(--xh-elevation-raised);
+    --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);
   }
 
+  /* 一行排不下不折行：标签整条沿主轴位移露出被裁掉的那截，两端的翻页钮与滚轮驱动，位移量由机器写在
+     --xh-_tabs-scroll 上（下面孩子那条规则读它）。只裁主轴（overflow-x: clip），交叉轴仍是 visible：
+     标签的焦点环画在盒内不受影响，粗指针下往块轴两侧外扩的命中区、segment 档抬起面的投影也都不被裁。
+     不做成滚动容器（overflow: hidden 会把两个轴一起裁，粗指针那圈外扩就没了；原生滚动条也不该露在标签带下） */
   [data-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));
@@ -90,19 +149,40 @@
     background: var(--xh-tabs-list-bg, var(--xh-_tabs-list-bg));
   }
 
+  /* 竖排：主轴换成块向，裁块向、行向放开。竖排的标签带高随内容长，只有使用者限了高才会放不下 */
   [data-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));
   }
 
-  /* 组内无锚点时 list 自己在 Tab 序列里，落焦要看得见 */
-  [data-scope='tabs'][data-part='list']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 排在标签带里的孩子——标签、分隔线、指示条——整体沿主轴位移；两端的翻页钮贴边不动，不在这条里。
+     位移量是机器逐帧补间写进来的（屏内的像素级推移走 continuous 档，与指示条同一档），这里不接过渡：
+     各部件各有自己的过渡清单（line 档的标签归家族），往每一份里都加一条 translate 会把家族与皮肤耦在一起 */
+  [data-scope='tabs'][data-part='list']
+    > :not([data-scope='tabs'][data-part='prev-trigger'], [data-scope='tabs'][data-part='next-trigger']) {
+    translate: var(--xh-_tabs-scroll) 0;
+  }
+
+  [data-scope='tabs'][data-part='list'][aria-orientation='vertical']
+    > :not([data-scope='tabs'][data-part='prev-trigger'], [data-scope='tabs'][data-part='next-trigger']) {
+    translate: 0 var(--xh-_tabs-scroll);
   }
 
+  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（§8.3 三选一）。
+     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯（§7.2）；
+     只写在标签带上不写在 root 上：内容面板里的按钮坐在画布上，不该跟着抬一档 */
+  [data-scope='tabs'][data-part='root'][data-variant='segment'] [data-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)，写了面就会盖掉家族的换面 */
   [data-scope='tabs'][data-part='trigger'] {
     position: relative;
     display: inline-flex;
@@ -112,42 +192,125 @@
     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-shape-control));
-    background: var(--xh-tabs-trigger-bg, transparent);
-    color: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
+    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));
-    font-weight: var(--xh-tabs-trigger-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
+    /* 家族基础块给条目写了 min-inline-size: 0（菜单条目要能收窄给文字省略号用）；标签不省略号，
+       segment 档又按 flex: 1 1 0 等分带宽，下限归零后排不下的标签会被压到文字之下。
+       收回 auto：下限按文字算，排不下的那截由标签带位移露出 */
+    min-inline-size: auto;
+  }
+
+  /* line 档（§7.3 导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
+     悬停 100 + default 字，按下 200 只换面；当前页透明面 + 品牌深字（随语气的 --xh-_tabs-accent-text）+
+     medium，叠悬停 100（§9.3）。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
+     没放则由下面的静态线规则画在选中标签自己身上。高度由 block-size 定，块向内边距归零 */
+  [data-scope='tabs'][data-part='root'][data-variant='line'] [data-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 档不归族：面、字色、字重、光标与过渡写在标签自己身上 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-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;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 标签是铺开的一段（§9.2 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 档是一排并列的页签，
+     每一枚只占自己的字宽加内衬，标签带右侧留白；放不下的那截由标签带位移露出 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger'] {
+    flex: 0 0 auto;
+  }
+
+  /* segment 档是一条轨道里的格子（与 Segmented 同构）：格子按可用宽度等分 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal'][data-variant='segment']
+    [data-scope='tabs'][data-part='trigger'] {
+    flex: 1 1 0;
   }
 
-  [data-scope='tabs'][data-part='trigger']:hover {
-    background: var(--xh-tabs-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  /* 禁用项带的是 aria-disabled 而非原生 disabled，:hover 照样命中；
+     不挡掉的话置灰的那一页悬停仍会换底，看着还能点。
+     悬停面按形态分档：card 100、segment 200（见各形态块上的私有槽）；line 档由家族给 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-scope='tabs'][data-part='trigger']:not([data-disabled]):hover {
+    background: var(--xh-tabs-trigger-bg-hover, var(--xh-_tabs-trigger-bg-hover));
   }
 
-  [data-scope='tabs'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 按下去要有回应：card / segment 档的未选中标签换到按下面（card 200、segment 300），几何不动。
+     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（§7.3 有滑块开关无叠加态） */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-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);
   }
 
-  [data-scope='tabs'][data-part='trigger'][data-state='active'] {
+  /* card / segment 档的选中标签：字色收回默认（--xh-_tabs-accent-text 在两档都落 fg-default），
+     由卡片面 / 抬起面表达当前；line 档的当前页由家族按 data-current 给 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-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));
   }
 
-  /* 选中项被悬停：上面那条与常态 :hover 特异度相同，谁写在后面谁赢，
-     不单列一条的话选中项的悬停底会被形态档的选中底吃掉 */
-  [data-scope='tabs'][data-part='trigger'][data-state='active']:hover {
+  /* segment 档的选中标签就是那块白色抬起的滑块面（§7.3 有滑块开关）：surface-raised 底 +
+     border-default 描边 + raised 影三件写在标签自己身上。标签带里放了 indicator 部件时，
+     这块面搬到部件上跟着滑（见下面的 indicator 规则），标签自己透空、只留字 */
+  [data-scope='tabs'][data-part='root'][data-variant='segment']
+    [data-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） */
+  [data-scope='tabs'][data-part='root'][data-variant='segment'] [data-scope='tabs'][data-part='trigger'] {
+    z-index: 1;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-variant='segment']
+    [data-scope='tabs'][data-part='list']:has([data-scope='tabs'][data-part='indicator']:not([hidden]))
+    [data-scope='tabs'][data-part='trigger'][data-state='active'] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* 选中项被悬停：常态 :hover 那条带着禁用守卫，特指度高过上面那条选中档，
+     不单列一条的话指针一压到选中项上，形态档的选中底就被轻档吃掉 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-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));
   }
 
-  [data-scope='tabs'][data-part='trigger'][data-disabled] {
+  /* line 档的禁用字色由家族按 aria-disabled 给 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+    [data-scope='tabs'][data-part='trigger'][data-disabled] {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   [data-scope='tabs'][data-part='content'] {
@@ -155,16 +318,415 @@
     color: var(--xh-tabs-content-fg, var(--xh-fg-default));
   }
 
-  [data-scope='tabs'][data-part='content']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* —— 标签拖拽换位 —— */
+  /* 整张标签都是拖动源，光标换成抓手告诉人这张标签按得动。
+     这条不写 touch-action：整张标签关掉手势，标签带自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  [data-scope='tabs'][data-part='trigger'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 标签拖拽把手：标签里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着标签带滚。整张标签起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的标签也白白让出滚动 */
+  [data-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 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-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;
+  }
+
+  /* 竖排的标签上下排开，两条线跟着转九十度：长短对调，描边换到块向两侧，
+     行向那两条得显式清零，否则四边都留着描边，抓手成了一个方框 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-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;
+  }
+
+  [data-scope='tabs'][data-part='tab-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+    color: var(--xh-tabs-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的标签照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着标签内的头一格，藏掉之后同一条标签带里
+     能拖与不能拖的两张标签，文字起点会错开一格 */
+  [data-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 都不写：标签原地不动，要落到哪儿全交给落点指示 */
+  [data-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，线不会被裁掉；仍整条画在盒内不压着边 */
+  [data-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 上，从根往下选。
+     横排的标签左右排开，线是一条竖的，贯穿标签的块向、贴在行向的前后沿 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-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 的偏移量则是物理的，写不出逻辑方向 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+    inset-inline-end: 0;
+  }
+
+  /* 竖排的标签上下排开，线是一条横的，贯穿标签的行向、贴在块向的前后沿 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-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));
+  }
+
+  /* 块向同样走逻辑属性，跟着书写模式走 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-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 档由标签自己的抬起面表达 */
+  [data-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;
+
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: var(--xh-_tabs-indicator-x);
+    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));
+    transition:
+      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+  }
+
+  /* 卡片变体已经由卡片面表达状态，不再叠一条下划线。 */
+  [data-scope='tabs'][data-part='indicator'][data-variant='card'] {
+    display: none;
+  }
+
+  /* segment 档（§7.3 有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
+     surface-raised 底 + border-default 描边 + raised 影三件与 Segmented 的滑块同一套；
+     描边吃进盒里（border-box），面与标签仍是同一块矩形。标签压在它上面，点击一律交给标签。
+     用连续档而不是进场那条：滑块是被推过去的，起步就该有速度；四个几何量同时走，标签宽不等时才不会先变形再挪位 */
+  [data-scope='tabs'][data-part='indicator'][data-variant='segment'] {
+    inset-block-end: auto;
+    inset-inline-end: auto;
+    inset-inline-start: var(--xh-_tabs-indicator-x);
+    inset-block-start: var(--xh-_tabs-indicator-y);
+    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;
+    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);
+  }
+
+  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（§7.3 导航当前页）：
+     横向缺省也要像纵向示例那样有一条选中线，作者不必为了这条线多放一个部件。
+     线画在选中标签的 ::after 上，以标签盒为定位参照（基础规则里已是 position: relative），
+     厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。
+     不做动画：它随 data-current 在标签间跳，滑动只有部件做得到。
+     标签带里一旦放了 indicator 部件，这条线就收起、位置交给部件滑动，不重复画两条：
+     由标签带按 :has 探一次，把私有槽写成 none，线的 content 读它；标签自己不必再各带一段 :has。
+     ::after 同时是换位落点线的载体：拖动中标签带着 data-drop 时让给落点线，松手即回来 */
+  [data-scope='tabs'][data-part='list']:has([data-scope='tabs'][data-part='indicator']) {
+    --xh-_tabs-static-line: none;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-variant='line']
+    [data-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));
+  }
+
+  /* 横排：贴标签的块向末端（底边），横贯整枚标签 */
+  [data-scope='tabs'][data-part='root'][data-variant='line'][data-orientation='horizontal']
+    [data-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 随逻辑属性镜像），纵贯整枚标签 */
+  [data-scope='tabs'][data-part='root'][data-variant='line'][data-orientation='vertical']
+    [data-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 两支 */
+  [data-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: var(--xh-_tabs-indicator-y);
+    block-size: var(--xh-_tabs-indicator-h);
+    inline-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+    transition:
+      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+  }
+
+  /* 标签之间的细线：横排时是一条竖线，竖排时躺平 */
+  [data-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));
+  }
+
+  [data-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 面盖不住字，静息 / 焦点 / 禁用三列换成盖底槽，
+     悬停与按下仍走 ghost 的阶梯——line / card 在白底上 100 → 200，segment 由轨道下发 200 → 300） */
+  [data-scope='tabs'][data-part='prev-trigger'],
+  [data-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-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 档的轨道留着一圈内衬，钮坐在内衬里、不压到轨道边上 */
+  [data-scope='tabs'][data-part='prev-trigger'] {
+    inset-inline-start: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  [data-scope='tabs'][data-part='next-trigger'] {
+    inset-inline-end: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  /* 竖排：两只钮躺平成横贯标签带的一条，各贴块向的首尾 */
+  [data-scope='tabs'][data-part='prev-trigger'][data-orientation='vertical'],
+  [data-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;
+  }
+
+  [data-scope='tabs'][data-part='prev-trigger'][data-orientation='vertical'] {
+    inset-block-start: var(--xh-tabs-list-p, var(--xh-_tabs-list-p));
+  }
+
+  [data-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 盖住，两者不冲突 */
+  [data-scope='tabs'][data-part='prev-trigger'][data-disabled],
+  [data-scope='tabs'][data-part='next-trigger'][data-disabled] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排一左一右的 chevron，竖排一上一下；作者塞了自己的图形这几条即不命中 */
+  [data-scope='tabs'][data-part='prev-trigger']:empty::before,
+  [data-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;
+  }
+
+  [data-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'] [data-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'] [data-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);
+  }
+
+  [data-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);
+  }
+
+  [data-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);
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='tabs'][data-part='root'][hidden],
   [data-scope='tabs'][data-part='list'][hidden],
-  [data-scope='tabs'][data-part='trigger'][hidden] {
+  [data-scope='tabs'][data-part='trigger'][hidden],
+  [data-scope='tabs'][data-part='indicator'][hidden],
+  [data-scope='tabs'][data-part='separator'][hidden],
+  [data-scope='tabs'][data-part='prev-trigger'][hidden],
+  [data-scope='tabs'][data-part='next-trigger'][hidden],
+  [data-scope='tabs'][data-part='tab-drag-trigger'][hidden] {
     display: none;
   }
+
+  /* 手指落点：命中区由伪元素向块轴两侧外扩，标签的盒与标签带的高度一点不动——
+     加高标签会把基线与滑条一起顶下去。
+     只扩块轴：标签在行内轴上首尾相接（segment 档只留半格缝），往两侧扩会与相邻标签的命中区叠上。
+     取 8px 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕。
+     用 ::before：::after 已经被换位时的落点线占着 */
+  @media (pointer: coarse) {
+    [data-scope='tabs'][data-part='trigger']::before {
+      content: '';
+      position: absolute;
+      inset-block: -8px;
+      inset-inline: 0;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 滑条与分隔线画的都是一块纯底色，这一档里底色被统一换成 Canvas，两者整根消失。
+       滑条换成系统高亮色、分隔线换成前景色画回来 */
+    [data-scope='tabs'][data-part='indicator'] {
+      background: Highlight;
+    }
+
+    /* 没放部件时选中标签自画的那条静态线同样是一块纯底色，同一档换成系统高亮色 */
+    [data-scope='tabs'][data-part='root'][data-variant='line']
+      [data-scope='tabs'][data-part='trigger'][data-current]:not([data-drop])::after {
+      background: Highlight;
+    }
+
+    [data-scope='tabs'][data-part='separator'] {
+      background: CanvasText;
+    }
+
+    /* 按下：常态靠底色深一档表出，这一档里底色被统一换掉；按住那一下用系统高亮反色画回来。
+       line 档的按下反色由家族的 forced-colors 段给 */
+    [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
+      [data-scope='tabs'][data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢背景与投影：三档形态表达选中的三条通道（选中底、card 档的顶边条、
+       segment 档的浮起）在纸上一条都不剩，只有一条比别人深一点的字色。
+       改用下划线与字重表达同一件事，两者都不改盒子的高度 */
+    [data-scope='tabs'][data-part='trigger'][data-state='active'] {
+      font-weight: var(--xh-font-weight-semibold);
+      text-decoration: underline;
+    }
+
+    /* 纸上翻不了页，两只钮不上纸 */
+    [data-scope='tabs'][data-part='prev-trigger'],
+    [data-scope='tabs'][data-part='next-trigger'] {
+      display: none;
+    }
+  }
 }