@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/toolbar.css

@@ -0,0 +1,366 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 toolbar 样式。 */
+
+/* 独立皮肤传递引入条目的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-toolbar {
+    --xh-toolbar-skin: 1;
+  }
+
+  /* 一条控件带：条目之间留固定间距，分隔线再把它们切成语义上的几段。
+     排布只能读 data-orientation——它与 aria-orientation 同源，但样式不该去读 ARIA */
+  .xh-scope-toolbar[data-part='root'] {
+    /* 尺寸档同时约束工具条排布与默认条目。 */
+    --xh-_toolbar-gap: var(--xh-space-2);
+    --xh-_toolbar-p: var(--xh-space-1);
+    --xh-_toolbar-item-h: var(--xh-control-h-md);
+    --xh-_toolbar-separator-size: calc(var(--xh-_toolbar-item-h) / 2);
+    --xh-icon-size: var(--xh-toolbar-icon-size, var(--xh-glyph-size-md));
+
+    /* 缺省 ghost：工具条只组织控件，不额外画外框；条目按画布承载走 hover 100 → pressed 200。 */
+    --xh-_toolbar-root-p: 0;
+    --xh-_toolbar-root-border-width: 0;
+    --xh-_toolbar-root-border: transparent;
+    --xh-_toolbar-root-bg: transparent;
+    --xh-_toolbar-root-bg-disabled: transparent;
+
+    /* 一行排不下就折行：条目宽度由各自的控件决定，硬撑一行会把整条顶出容器。
+       放了「更多」钮时改为收纳，见下方收纳一节 */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-toolbar-gap, var(--xh-_toolbar-gap));
+    padding-block: var(--xh-toolbar-py, var(--xh-_toolbar-root-p));
+    padding-inline: var(--xh-toolbar-px, var(--xh-_toolbar-root-p));
+    border: var(--xh-_toolbar-root-border-width) solid var(--xh-toolbar-border, var(--xh-_toolbar-root-border));
+    border-radius: var(--xh-toolbar-radius, var(--xh-shape-surface));
+    background: var(--xh-toolbar-bg, var(--xh-_toolbar-root-bg));
+    color: var(--xh-toolbar-fg, var(--xh-fg-default));
+    /* 整条置灰与恢复是一次状态切换，底色与字色淡着换，不硬切 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-toolbar[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* 竖排时交叉轴改为拉伸：竖着的一条里每个条目该一样宽，居中会让它们参差不齐 */
+  .xh-scope-toolbar[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: nowrap;
+  }
+
+  /* —— 变体 —— */
+  .xh-scope-toolbar[data-part='root'][data-variant='ghost'] {
+    --xh-_toolbar-root-p: 0;
+    --xh-_toolbar-root-border-width: 0;
+    --xh-_toolbar-root-border: transparent;
+    --xh-_toolbar-root-bg: transparent;
+    --xh-_toolbar-root-bg-disabled: transparent;
+  }
+
+  /* 淡底档：带内距、换成 subtle 底，描边让位给底色但留住 1px 边位（与 outline 几何一致），无影；
+     淡底承载面向条目下发 hover 200 → pressed 300 */
+  .xh-scope-toolbar[data-part='root'][data-variant='subtle'] {
+    --xh-_toolbar-root-p: var(--xh-_toolbar-p);
+    --xh-_toolbar-root-border-width: var(--xh-stroke-thin);
+    --xh-_toolbar-root-bg: var(--xh-bg-subtle);
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+  }
+
+  /* 附着式工具面：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）。 */
+  .xh-scope-toolbar[data-part='root'][data-variant='outline'] {
+    --xh-_toolbar-root-p: var(--xh-_toolbar-p);
+    --xh-_toolbar-root-border-width: var(--xh-stroke-thin);
+    --xh-_toolbar-root-border: var(--xh-border-default);
+    --xh-_toolbar-root-bg: var(--xh-bg-surface);
+    --xh-_toolbar-root-bg-disabled: var(--xh-bg-muted);
+
+    border-radius: var(--xh-toolbar-radius, var(--xh-shape-surface));
+    box-shadow: var(--xh-toolbar-shadow, none);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。工具条自己不定条目的高度与字号（那归条目的皮肤），
+     这里只换排布尺寸；缺省的 --xh-space-1 已经是控件间距那把尺的小档，容不下三档，故一律取空间尺 */
+  .xh-scope-toolbar[data-part='root'][data-size='sm'] {
+    --xh-_toolbar-gap: var(--xh-space-0_5);
+    --xh-_toolbar-p: var(--xh-space-0_5);
+    --xh-_toolbar-item-h: var(--xh-control-h-sm);
+    --xh-icon-size: var(--xh-toolbar-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-toolbar[data-part='root'][data-size='lg'] {
+    --xh-_toolbar-gap: var(--xh-space-3);
+    --xh-_toolbar-p: var(--xh-space-2);
+    --xh-_toolbar-item-h: var(--xh-control-h-lg);
+    --xh-icon-size: var(--xh-toolbar-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  /* root 会在焦点进条前短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给条目，
+     在它身上画环只会闪一下就跳走，高亮要长在条目上 */
+  .xh-scope-toolbar[data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-toolbar[data-part='root'][data-disabled] {
+    background: var(--xh-toolbar-bg-disabled, var(--xh-_toolbar-root-bg-disabled));
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-toolbar[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 分组只负责把相关操作连成一条，表面与交互状态由每个分段自己绘制。 */
+  .xh-scope-toolbar[data-part='group'] {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    gap: var(--xh-toolbar-group-gap, var(--xh-space-0));
+    background: transparent;
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: nowrap;
+  }
+
+  .xh-scope-toolbar[data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 默认条目是一枚无描边工具按钮：盒型、三档几何、悬停 / 按下 / 禁用面与按压缩放由 Action Control 的
+     text 档给（ghost 形态：ghost 根按画布承载 hover 100 → pressed 200，subtle 根与分组由 host 槽下发
+     200 → 300）；这里只把使用者槽映射到桥接槽（-gap / -h / -px / -radius / -bg / -bg-hover /
+     -bg-active / -bg-disabled / -fg / -font-size 保留为第一参数）。作者仍可用类名或内联样式完整覆盖。 */
+  .xh-scope-toolbar[data-part='item'] {
+    --xh-action-gap: var(--xh-toolbar-item-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-toolbar-item-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-toolbar-item-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-toolbar-item-radius, var(--xh-_action-profile-radius));
+    --xh-action-bg-rest: var(--xh-toolbar-item-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-toolbar-item-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-toolbar-item-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: var(--xh-toolbar-item-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-toolbar-item-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-toolbar-item-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-toolbar-item-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-font-size: var(--xh-toolbar-item-font-size, var(--xh-_action-profile-font-size));
+
+    font-weight: var(--xh-toolbar-item-font-weight, var(--xh-text-label-weight));
+    touch-action: manipulation;
+  }
+
+  /* 无滑块开关的按下态：品牌淡底 + 淡底前景，hover / 按下沿 12% → 20% → 28% 三档走；
+     三态都经桥接槽交给家族画，禁用面仍由家族按 data-disabled 给 */
+  .xh-scope-toolbar[data-part='item'][aria-pressed='true'] {
+    --xh-action-bg-rest: var(--xh-toolbar-item-bg-pressed, var(--xh-bg-brand-subtle));
+    --xh-action-bg-hover: var(--xh-toolbar-item-bg-pressed-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-action-bg-pressed: var(--xh-toolbar-item-bg-pressed-active, var(--xh-bg-brand-subtle-active));
+    --xh-action-fg-rest: var(--xh-toolbar-item-fg-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-hover: var(--xh-toolbar-item-fg-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-pressed: var(--xh-toolbar-item-fg-pressed, var(--xh-fg-on-brand-subtle));
+  }
+
+  .xh-scope-toolbar[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 组内分段使用同一块中性操作面（淡底承载：hover 200 → pressed 300 由 host 槽下发）；
+     中间段保持直角，只给整组两端补回控件圆角。按下态 / 禁用面与散落条目同一套规则。
+     分段零间距直角相接，按下只换面不缩放：缩放任一段都会把两侧接缝撕开 */
+  .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='item'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+    --xh-action-radius: 0;
+    --xh-action-scale-pressed: none;
+    --xh-action-bg-disabled: var(--xh-toolbar-item-bg-disabled, var(--xh-bg-subtle));
+    /* 组末端补回的控件圆角：尾部几段收进「更多」菜单后，由留下的最后一段接过去 */
+    --xh-_toolbar-segment-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+
+    position: relative;
+  }
+
+  /* 组内未选中的段才铺中性面：选中段的品牌淡底由上面 aria-pressed 那条给，这条比它更特定，不守卫会把它盖掉 */
+  .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='item']:not([aria-pressed='true']) {
+    --xh-action-bg-rest: var(--xh-toolbar-item-bg, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='horizontal']
+    > .xh-scope-toolbar[data-part='item']:first-of-type {
+    border-start-start-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='horizontal']
+    > .xh-scope-toolbar[data-part='item']:last-of-type {
+    border-start-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='vertical']
+    > .xh-scope-toolbar[data-part='item']:first-of-type {
+    border-start-start-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='vertical']
+    > .xh-scope-toolbar[data-part='item']:last-of-type {
+    border-end-start-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
+  }
+
+  /* 分隔线取控件高度的一半；横排工具条里画竖线，竖排工具条里画横线。 */
+  .xh-scope-toolbar[data-part='separator'] {
+    flex: none;
+    align-self: center;
+    border-radius: var(--xh-toolbar-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-toolbar-separator-color, var(--xh-border-default));
+  }
+
+  .xh-scope-toolbar[data-part='separator'][data-orientation='vertical'] {
+    inline-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
+    block-size: var(--xh-_toolbar-separator-size);
+    margin-block: var(--xh-toolbar-separator-inset, var(--xh-space-0));
+    /* 散落的分隔线两侧各让出 12px，与工具条间距叠起来把前后两组分开 */
+    margin-inline: var(--xh-toolbar-separator-gap, var(--xh-space-3));
+  }
+
+  .xh-scope-toolbar[data-part='separator'][data-orientation='horizontal'] {
+    block-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
+    inline-size: var(--xh-_toolbar-separator-size);
+    margin-block: var(--xh-toolbar-separator-gap, var(--xh-space-3));
+    margin-inline: var(--xh-toolbar-separator-inset, var(--xh-space-0));
+  }
+
+  /* 组内分隔线覆盖在相邻分段的接缝上，不占额外宽度；半高弱线保留整体连续感。 */
+  .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='separator'] {
+    background: var(--xh-toolbar-separator-color, var(--xh-fg-default));
+    opacity: var(--xh-toolbar-separator-opacity, var(--xh-control-separator-opacity));
+    pointer-events: none;
+  }
+
+  .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='separator'][data-orientation='vertical'] {
+    margin-inline: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin))) 0;
+  }
+
+  .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='separator'][data-orientation='horizontal'] {
+    margin-block: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin))) 0;
+  }
+
+  /* —— 收纳 —— */
+  /* 放了「更多」钮就不折行：放不下的条目按次序收进它弹出的菜单。条目与分组不压缩——压缩了，
+     量到的就不是自然长度；root 在 flex 父容器里可以被压到比内容窄，可用长度由外面给 */
+  .xh-scope-toolbar[data-part='root']:has(> .xh-scope-toolbar[data-part='overflow-trigger']) {
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  .xh-scope-toolbar[data-part='root']:has(> .xh-scope-toolbar[data-part='overflow-trigger'])
+    > :is(.xh-scope-toolbar[data-part='item'], .xh-scope-toolbar[data-part='group']) {
+    flex-shrink: 0;
+  }
+
+  /* 收起的条目之前的分隔线与整组收空的分组一并让开：它们分隔的那一侧已经没有露着的条目，
+     留着会在「更多」钮前多出一道线、多出一截间距 */
+  .xh-scope-toolbar[data-part='root']:has(> .xh-scope-toolbar[data-part='overflow-trigger']:not([hidden]))
+    > .xh-scope-toolbar[data-part='separator']:not(
+      :has(
+        ~ .xh-scope-toolbar[data-part='item']:not([hidden]),
+        ~ .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='item']:not([hidden])
+      )
+    ),
+  .xh-scope-toolbar[data-part='root']:has(> .xh-scope-toolbar[data-part='overflow-trigger']:not([hidden]))
+    > .xh-scope-toolbar[data-part='group']:not(:has(> .xh-scope-toolbar[data-part='item']:not([hidden]))),
+  .xh-scope-toolbar[data-part='root']:has(> .xh-scope-toolbar[data-part='overflow-trigger']:not([hidden]))
+    > .xh-scope-toolbar[data-part='group']
+    > .xh-scope-toolbar[data-part='separator']:not(:has(~ .xh-scope-toolbar[data-part='item']:not([hidden]))) {
+    display: none;
+  }
+
+  /* 组的尾部几段收进菜单后，留下的最后一段补回末端圆角 */
+  .xh-scope-toolbar[data-part='group'][data-orientation='horizontal']
+    > .xh-scope-toolbar[data-part='item']:not([hidden]):not(:has(~ .xh-scope-toolbar[data-part='item']:not([hidden]))) {
+    border-start-end-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  .xh-scope-toolbar[data-part='group'][data-orientation='vertical']
+    > .xh-scope-toolbar[data-part='item']:not([hidden]):not(:has(~ .xh-scope-toolbar[data-part='item']:not([hidden]))) {
+    border-end-start-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  /* 「更多」钮：行尾一枚单图标钮，接 Action Control icon 档 ghost 面，与条目同档（连接层投影 profile /
+     variant / size）。盒取条目同高的正方形，四态面、0.97 按压、焦点环与粗指针 44px 命中区由家族配方给；
+     承载面的阶梯随根的 variant 经 host 槽下发（ghost 根白底 100 → 200，subtle 根淡底 200 → 300） */
+  .xh-scope-toolbar[data-part='overflow-trigger'] {
+    touch-action: manipulation;
+  }
+
+  /* 菜单开着：与悬停同档的中性面，不用品牌色、不另画环；收起的是哪几条由菜单本身说明 */
+  .xh-scope-toolbar[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-icon-size） */
+  .xh-scope-toolbar[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;
+  }
+
+  /* 全部放得下时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  .xh-scope-toolbar[data-part='overflow-trigger'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 分段之间那条线画的是一块纯底色，这一档里底色被统一换成 Canvas，线整条消失，
+       几段控件就连成了一长串。换成前景色画回来 */
+    .xh-scope-toolbar[data-part='separator'] {
+      background: CanvasText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-toolbar[data-part='overflow-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-toolbar[data-part='overflow-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-toolbar[data-part='overflow-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/tooltip.css

@@ -0,0 +1,217 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tooltip 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-tooltip {
+    --xh-tooltip-skin: 1;
+  }
+
+  .xh-scope-tooltip[data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-tooltip-trigger-gap, var(--xh-control-gap-sm));
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+  }
+
+  /* 这里的 data-disabled 关掉的是提示，不是宿主控件：光标仍旧交给宿主 */
+  .xh-scope-tooltip[data-part='trigger'][data-disabled] {
+    cursor: inherit;
+  }
+
+  /* 坐标由定位引擎写在行内 style 上，这里只兜底 SSR 首帧 */
+  .xh-scope-tooltip[data-part='positioner'] {
+    /* 先截断祖先浮层的方向，再按本次实际 placement 只启用一侧。 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
+
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: var(--xh-tooltip-layer, var(--xh-_layer, var(--xh-layer-tooltip)));
+    /* 浮层不承载交互：指针必须能穿过去点到底下的东西 */
+    pointer-events: none;
+  }
+
+  /* 锚点滚出可视区时连浮层一起隐藏 */
+  .xh-scope-tooltip[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 进退位移按落定的那一侧给。placement 与 translate 都是物理方向，不随书写方向翻。 */
+  .xh-scope-tooltip[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-tooltip[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-tooltip[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-tooltip[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
+  .xh-scope-tooltip[data-part='content'] {
+    /* 尺寸档只换这三个私有槽。tooltip 没有 root 部件，两轴都落在浮层树最外层的 content 上，
+       箭头是它的后代，语气槽一并继承。缺省档纵 8 横 12、正文 14px */
+    --xh-_tooltip-py: var(--xh-space-2);
+    --xh-_tooltip-px: var(--xh-space-3);
+    --xh-_tooltip-font-size: var(--xh-text-body-size);
+    /* Tooltip 保留反白身份（登记的反白 compact frosted）：短提示要与可交互的普通主题浮层一眼分开。
+       底取正文色、字取承载面色：浅色主题下是深底白字，深色主题下整块翻成浅底深字，两头都是同一对反色。
+       compact 档的透明度缺省不透明，底是实底；主题要透景时再由材质令牌给。
+       边不取 --xh-material-frosted-border：那是中性描边色，压在反白深底上看不见，
+       浮层要的 1px 可见边界由 on 色 20% 拼色承担；浮层不用玻璃高光，顶光缺省不画 */
+    --xh-_tooltip-solid: var(--xh-_tone, var(--xh-fg-default));
+    --xh-_tooltip-on: var(--xh-_tone-on, var(--xh-bg-surface));
+    --xh-_tooltip-border: color-mix(in oklab, var(--xh-_tooltip-on) 20%, transparent);
+
+    /* 与 positioner 相反：浮层本体要能接指针，指针停在提示上就不该收起
+       （长文案需要停留细看）。positioner 仍是 none，空白区域照样点得穿。 */
+    /* 显式声明 display 是为了盖掉 UA 的 [hidden]{display:none}：收起那一帧 content 仍带 hidden，
+       盒子得先在,退场动画才播得出来。真正的收起由宿主在退场结束后落成内联 display */
+    display: block;
+    position: relative;
+    isolation: isolate;
+    pointer-events: auto;
+    max-inline-size: var(--xh-tooltip-max-w, var(--xh-overlay-max-w));
+    padding-block: var(--xh-tooltip-py, var(--xh-_tooltip-py));
+    padding-inline: var(--xh-tooltip-px, var(--xh-_tooltip-px));
+    /* 这里刻意用 control 而不是浮层那档 overlay：提示气泡通常只有一行字、高度接近控件，
+       与控件同一形状身份。档位定义里为此单列了一条 */
+    border-radius: var(--xh-tooltip-radius, var(--xh-shape-control));
+    border: var(--xh-stroke-thin) solid var(--xh-tooltip-border, var(--xh-_tooltip-border));
+    background: transparent;
+    color: var(--xh-tooltip-fg, var(--xh-_tooltip-on));
+    font-size: var(--xh-tooltip-font-size, var(--xh-_tooltip-font-size));
+    line-height: var(--xh-leading-normal);
+    overflow-wrap: anywhere;
+    text-wrap: pretty;
+    --xh-_tooltip-elevation-shadow: var(--xh-tooltip-shadow, var(--xh-material-frosted-compact-shadow));
+
+    /* 顶光槽缺省透明（不用顶部高光），使用者要加自行灌色 */
+    box-shadow:
+      inset 0 var(--xh-stroke-thin) 0 var(--xh-tooltip-highlight, transparent),
+      var(--xh-_tooltip-elevation-shadow);
+    -webkit-backdrop-filter: var(--xh-tooltip-backdrop, var(--xh-material-frosted-compact-backdrop));
+    backdrop-filter: var(--xh-tooltip-backdrop, var(--xh-material-frosted-compact-backdrop));
+  }
+
+  /* 跟随鼠标的提示压在指针旁边、随指针挪：它接了指针就会挡住 trigger 上的移动，指针一滑进去便算离开了 trigger。
+     这一档浮层本体同样让指针穿过去，停留细看交给 trigger 本身 */
+  .xh-scope-tooltip[data-part='positioner'][data-follow-cursor] .xh-scope-tooltip[data-part='content'] {
+    pointer-events: none;
+  }
+
+  /* 反白面是一块彩色面（连接层打 data-xh-ink-surface）：面内的作者内容按这块底取墨色。
+     底色取自被墨色域改写的令牌，所以域只落在面内的子元素上，这里的取值仍按外层主题解析 */
+  .xh-scope-tooltip[data-part='content'][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-tooltip-bg, var(--xh-_tooltip-solid));
+  }
+
+  /* 光学层单独承载 tint 与透明度；backdrop-filter 只采样元素背后，不处理正文。 */
+  .xh-scope-tooltip[data-part='content']::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--xh-tooltip-bg, var(--xh-_tooltip-solid));
+    opacity: var(--xh-material-frosted-compact-alpha);
+    pointer-events: none;
+  }
+
+  /* 入场走 enter 档（锚定列表族的 tooltip 入场 --xh-motion-duration-enter），退场仍是 exit。
+     接替上一个提示打开的（data-instant）直接呈现：横扫一排钮时提示一个个跟上，不再一个个滑入 */
+  .xh-scope-tooltip[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  .xh-scope-tooltip[data-part='content'][data-state='closed'] {
+    will-change: opacity, translate;
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里。提示的内边距与字号不在 control-* 那把尺上
+     （它是浮层不是控件）：三档字号都是正文 14px，一行字的提示不缩字，档位只换内距——
+     小号档只收纵向（纵 4 横 12），大号档纵横各放一档（纵 12 横 16） */
+  .xh-scope-tooltip[data-part='content'][data-size='sm'] {
+    --xh-_tooltip-py: var(--xh-space-1);
+  }
+
+  .xh-scope-tooltip[data-part='content'][data-size='lg'] {
+    --xh-_tooltip-py: var(--xh-space-3);
+    --xh-_tooltip-px: var(--xh-space-4);
+  }
+
+  /* 箭头的底色与描边色，几何在 overlay-arrow.css。
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
+  .xh-scope-tooltip[data-part='arrow'] {
+    --xh-_tooltip-arrow-x: 50%;
+    --xh-_tooltip-arrow-y: 50%;
+    --xh-_overlay-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_overlay-arrow-x: var(--xh-_tooltip-arrow-x);
+    --xh-_overlay-arrow-y: var(--xh-_tooltip-arrow-y);
+
+    background: var(--xh-tooltip-bg, var(--xh-_tooltip-solid));
+    border: var(--xh-stroke-thin) solid var(--xh-tooltip-border, var(--xh-_tooltip-border));
+    opacity: var(--xh-material-frosted-compact-alpha);
+  }
+
+  /* 高对比仍保持反白语义：compact 配方已把 tint / blur / shadow 换成实体档，此处只加强同色边界。 */
+  :is([data-contrast='more'] :where(.xh-scope-tooltip), [data-contrast='more']).xh-scope-tooltip[data-part='content'] {
+    --xh-_tooltip-border: var(--xh-_tooltip-on);
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-tooltip[data-part='content'],
+    .xh-scope-tooltip[data-part='arrow'] {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+
+    .xh-scope-tooltip[data-part='content']::before {
+      background: Canvas;
+      opacity: 1;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-tooltip[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-tooltip[data-part='positioner'] {
+      display: none;
+    }
+  }
+}