@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/float-button.css

@@ -0,0 +1,569 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 float button 样式。 */
+
+@import '../family/action-control.css';
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-float-button {
+    --xh-float-button-skin: 1;
+  }
+
+  /* 定位壳：钉在视口一角。贴边距离由连接层写进这个盒子的内联 style，
+     样式表这一行只是它缺席时的落点；贴的是哪两条边看 data-placement。
+     另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+     transform / filter / backdrop-filter / contain，包含块就被抢走，整组立刻贴错位置——
+     所以别往覆盖钩子里加这几个属性。 */
+  .xh-scope-float-button[data-part='root'] {
+    --xh-_float-button-offset: var(--xh-space-6);
+    /* 展开列表里原生动作项的身量与字形尺：触发器自己走 Action Control floating 档
+       （sm = box-sm / md = box-md / lg = box-lg，字形 sm / md / lg），
+       原生动作项不是 Headless 部件、配方打不到它，这两支私有槽按同一张表镜像，换档只改这里 */
+    --xh-_float-button-size: var(--xh-control-box-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+    /* 作者塞进指示符槽的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
+
+    position: fixed;
+    /* 展开时消费 LayerRegistry 的实时层序；收起后没有逻辑层，仍回到普通 sticky 槽。 */
+    z-index: var(--xh-float-button-layer, var(--xh-_layer, var(--xh-layer-sticky)));
+    display: flex;
+    /* 摞的方向由落位定，下面四条各自覆盖；这里给的是没写落位时的落点 */
+    flex-direction: column;
+    align-items: center;
+    gap: var(--xh-float-button-gap, var(--xh-space-2));
+  }
+
+  /* —— 四角 ——
+     start / end 用逻辑属性，RTL 下自动换到另一侧。
+     摞的方向按贴的是上沿还是下沿定：离屏幕边最近的恒是触发器，展开的那一组往页面中间长。
+     四条贴边都与安全区取大的一头：刘海、圆角与底部横条压住的那一段由系统给出，
+     贴边比它窄时钮会被切掉一角；桌面上 env() 恒为 0，取值与贴边槽完全一致。
+     安全区只有物理方向的四个名字，行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
+  .xh-scope-float-button[data-part='root'][data-placement^='top'] {
+    inset-block-start: max(var(--xh-_float-button-offset), env(safe-area-inset-top));
+    flex-direction: column;
+  }
+
+  .xh-scope-float-button[data-part='root'][data-placement^='bottom'] {
+    inset-block-end: max(var(--xh-_float-button-offset), env(safe-area-inset-bottom));
+    flex-direction: column-reverse;
+  }
+
+  .xh-scope-float-button[data-part='root'][data-placement$='-start'] {
+    inset-inline-start: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
+  }
+
+  .xh-scope-float-button[data-part='root'][data-placement$='-end'] {
+    inset-inline-end: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
+  }
+
+  /* —— 位置 ——
+     拖到别处、或作者给了位置时，角落那两条贴边里有一条换掉：data-placement 由连接层按位置推出
+     （离触发器最近的恒是视口的那条边、展开组朝页面中间长），这里只换沿边的那一条。
+     百分比按固定定位的包含块（视口去掉滚动条）量，与连接层量的视口同一块；
+     夹取的上下界与四角同样和安全区取大的一头，比例再怎么写，钮也不会压进刘海与横条。
+     触发器边长取它自己那一档（使用者槽在前）：沿边的比例量的是触发器中心 */
+  .xh-scope-float-button[data-part='root'] {
+    --xh-_float-button-span: var(--xh-float-button-size, var(--xh-_float-button-size));
+  }
+
+  /* 贴左右边：上下按比例，锚在离触发器近的那一头 */
+  .xh-scope-float-button[data-part='root'][data-edge^='inline'][data-placement^='top'] {
+    inset-block-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  .xh-scope-float-button[data-part='root'][data-edge^='inline'][data-placement^='bottom'] {
+    inset-block-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 贴上下边：行内方向按比例，从行首量起 */
+  .xh-scope-float-button[data-part='root'][data-edge^='block'][data-placement$='-start'] {
+    inset-inline-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  .xh-scope-float-button[data-part='root'][data-edge^='block'][data-placement$='-end'] {
+    inset-inline-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  /* 停在一点、或正跟着指针走：坐标是触发器左上角的物理像素，横向一律从左边量，不随书写方向翻。
+     竖向锚在离触发器近的那一头：朝下长的锚上沿，朝上长的锚下沿，展开组冒出来时触发器不挪窝。
+     停着的点仍夹在视口里（视口变小时不跑出去）；跟手的坐标由连接层夹好，这里原样用 */
+  .xh-scope-float-button[data-part='root'][data-point][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 停点由连接层按指针的物理坐标写成 x，横向从左边量、不随书写方向翻 */
+    left: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left)),
+      var(--xh-_float-button-x),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-right)))
+    );
+  }
+
+  .xh-scope-float-button[data-part='root'][data-point][data-placement^='top'] {
+    top: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      var(--xh-_float-button-y),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  .xh-scope-float-button[data-part='root'][data-point][data-placement^='bottom'] {
+    bottom: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span)),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 跟手排在贴边与停点之后：拖动与落定途中压过提交了的位置 */
+  .xh-scope-float-button[data-part='root'][data-moving][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上：跟手坐标是指针的物理 x */
+    left: var(--xh-_float-button-x);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-moving][data-placement^='top'] {
+    top: var(--xh-_float-button-y);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-moving][data-placement^='bottom'] {
+    bottom: calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span));
+  }
+
+  /* 能拖时触屏手指在触发器上的移动归拖动，不让浏览器拿去滚页面；光标提示能抓、正抓着 */
+  .xh-scope-float-button[data-part='root'][data-draggable] .xh-scope-float-button[data-part='trigger'] {
+    touch-action: none;
+    cursor: grab;
+  }
+
+  .xh-scope-float-button[data-part='root'][data-dragging] .xh-scope-float-button[data-part='trigger'] {
+    cursor: grabbing;
+  }
+
+  /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
+  .xh-scope-float-button[data-part='root'][data-size='sm'] {
+    --xh-_float-button-size: var(--xh-control-box-sm);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-sm);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-size='md'] {
+    --xh-_float-button-size: var(--xh-control-box-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-size='lg'] {
+    --xh-_float-button-size: var(--xh-control-box-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+  }
+
+  /* —— 形态：给展开列表里原生动作项用的面 ——
+     触发器的面由 Action Control 形态矩阵按 data-xh-action-variant 给（solid / subtle / ghost），
+     原生动作项读不到矩阵，这几块私有槽按矩阵同一张表镜像；ghost 与 outline 的悬停 / 按下走画布承载的
+     阶梯（100 → 200）。缺省 outline（连接层不传 variant 时显式落）是磨砂面：背景、边缘、
+     顶光、投影与磨砂从同一份 M2 配方取，高对比、减少透明度、打印和强制色便能一起降级——钮浮在正文
+     之上，透空的面在任何内容上都读不出边界，所以 outline 这一档面留着 */
+  .xh-scope-float-button[data-part='root'][data-variant='solid'] {
+    --xh-_float-button-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_float-button-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_float-button-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_float-button-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
+  }
+
+  /* 浮动钮钉在内容之上，面要盖得住底下的内容：没写语气时淡底取不透明档（ghost 静息就透景，不在此列） */
+  .xh-scope-float-button[data-part='root'][data-variant='subtle'] {
+    --xh-_float-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque));
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover-opaque));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active-opaque));
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
+  }
+
+  .xh-scope-float-button[data-part='root'][data-variant='outline'] {
+    --xh-_float-button-bg: var(--xh-material-frosted-bg);
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover-opaque));
+    --xh-_float-button-fg: var(--xh-material-frosted-fg);
+    --xh-_float-button-border: var(--xh-material-frosted-border);
+    --xh-_float-button-border-hover: var(--xh-material-frosted-border);
+    --xh-_float-button-shadow: var(--xh-material-frosted-shadow);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-variant='ghost'] {
+    --xh-_float-button-bg: transparent;
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
+  }
+
+  /* —— 触发器 ——
+     浮在内容之上的单图标圆钮，接 Action Control floating 档：盒型（md = box-lg 48px，圆形）、
+     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射 */
+  .xh-scope-float-button[data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-float-button-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-float-button-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-disabled: var(--xh-float-button-bg, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-float-button-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-float-button-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-float-button-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-float-button-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-border-rest: var(--xh-float-button-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-float-button-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_action-variant-border-disabled));
+    /* 矩阵各态无影（淡底与阴影互斥）；outline 那一档的磨砂投影在下面另桥接 */
+    --xh-action-shadow-rest: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-hover: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-disabled: var(--xh-float-button-shadow, none);
+    --xh-action-radius: var(--xh-float-button-radius, var(--xh-_action-profile-radius));
+    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_action-profile-visual-size));
+    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——
+     底、描边、投影、1px 顶光与背景滤镜一份取值，高对比、减少透明度、打印和强制色沿同一令牌通道降级。
+     悬停 / 按下换不透明的淡底一档、二档，边缘与投影不动；键盘聚焦时铺实体 focus surface——透明面上的
+     内收环不能依赖页面底色；置灰只换字色，面仍留着，透空的面在任何内容上都读不出边界 */
+  .xh-scope-float-button[data-part='root'][data-variant='outline']
+    .xh-scope-float-button[data-part='trigger'] {
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-float-button-bg-hover, var(--xh-_material-bg-hover));
+    --xh-action-bg-pressed: var(--xh-float-button-bg-active, var(--xh-_material-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-float-button-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-float-button-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-float-button-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-float-button-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-float-button-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-float-button-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-float-button-border-hover, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-float-button-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-float-button-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-float-button-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-float-button-shadow, var(--xh-_material-shadow));
+    --xh-action-highlight-rest: var(--xh-_material-highlight);
+    --xh-action-highlight-hover: var(--xh-_material-highlight);
+    --xh-action-highlight-pressed: var(--xh-_material-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-_material-highlight);
+    --xh-action-highlight-disabled: var(--xh-_material-highlight);
+    /* M2 顶光走配方的高光通道：实心、淡色与透空形态各有自身表面，不能把磨砂高光误铺上去 */
+  }
+
+  /* 液态组：液态档下触发器与展开的动作结成一组（状态机挂进 core），共用宿主最前面那层色块，
+     靠近时边缘像液体一样连起来。底色、墨色细线、亮边与投影都由色块层沿整组的外形画，块自己的面与细线
+     换成透明、亮边与投影撤掉，只留磨砂；悬停 / 按下改成往前景色兑的一层薄色叠在色块上。
+     只有缺省 outline 的液态面才结组，其余形态的面是实心的，色块层藏起来。强制色下色块层撤掉，块保留原样 */
+  @media (forced-colors: none) {
+    :where([data-material='liquid']) .xh-scope-float-button[data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      .xh-scope-float-button[data-part='trigger'][data-xh-liquid] {
+      --xh-action-bg-rest: var(--xh-float-button-bg, transparent);
+      --xh-action-bg-hover: var(--xh-float-button-bg-hover, color-mix(in oklab, var(--xh-material-liquid-fg) 8%, transparent));
+      --xh-action-bg-pressed: var(--xh-float-button-bg-active, color-mix(in oklab, var(--xh-material-liquid-fg) 14%, transparent));
+      --xh-action-bg-disabled: var(--xh-float-button-bg, transparent);
+      --xh-action-border-rest: var(--xh-float-button-border, transparent);
+      --xh-action-border-hover: var(--xh-float-button-border-hover, transparent);
+      --xh-action-border-pressed: var(--xh-float-button-border-hover, transparent);
+      --xh-action-border-focus-visible: var(--xh-float-button-border, transparent);
+      --xh-action-border-disabled: var(--xh-float-button-border, transparent);
+      --xh-action-shadow-rest: none;
+      --xh-action-shadow-hover: none;
+      --xh-action-shadow-pressed: none;
+      --xh-action-shadow-focus-visible: none;
+      --xh-action-shadow-disabled: none;
+    }
+  }
+
+  .xh-scope-float-button[data-part='root']:not([data-variant='outline']) > [data-xh-liquid-goo-layer] {
+    display: none;
+  }
+
+  /* 整组的投影由色块层沿外形画，使用者的投影槽接到那里。色块层不是部件，只按 scope 选 */
+  .xh-scope-float-button > [data-xh-liquid-goo-layer] {
+    --xh-_liquid-goo-shadow: var(--xh-float-button-shadow, var(--xh-material-liquid-shadow));
+  }
+
+  /* 色块层不设层号、靠排在最前压在各块之下：展开组也得是定位元素才盖得住它（触发器本就是） */
+  .xh-scope-float-button[data-part='root'][data-xh-liquid-goo] .xh-scope-float-button[data-part='list'] {
+    position: relative;
+  }
+
+  /* 展开组里的原生动作项在组里同样是液态面：底色、细线、亮边与投影交给色块层，块上留前景与磨砂 */
+  @media (forced-colors: none) {
+    :where([data-material='liquid']) .xh-scope-float-button[data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      .xh-scope-float-button[data-part='list']
+      > button:not([data-scope]) {
+      border-color: var(--xh-float-button-border, transparent);
+      background-color: var(--xh-float-button-bg, transparent);
+      background-image: none;
+      color: var(--xh-float-button-fg, var(--xh-material-liquid-fg));
+      box-shadow: none;
+      -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+      backdrop-filter: var(--xh-material-liquid-backdrop);
+    }
+  }
+
+  @media (forced-colors: none) and (hover: hover) {
+    :where([data-material='liquid']) .xh-scope-float-button[data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      .xh-scope-float-button[data-part='list']
+      > button:not([data-scope]):not(:disabled):hover {
+      border-color: var(--xh-float-button-border-hover, transparent);
+      background-color: var(--xh-float-button-bg-hover, color-mix(in oklab, var(--xh-material-liquid-fg) 8%, transparent));
+    }
+  }
+
+  @media (forced-colors: none) {
+    :where([data-material='liquid']) .xh-scope-float-button[data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      .xh-scope-float-button[data-part='list']
+      > button:not([data-scope]):not(:disabled):active {
+      background-color: var(--xh-float-button-bg-active, color-mix(in oklab, var(--xh-material-liquid-fg) 14%, transparent));
+    }
+  }
+
+  /* 从触发器里分离、融回的那几块由液态组的弹簧逐帧写姿态，CSS 的逐条冒出不再叠上去 */
+  .xh-scope-float-button[data-part='list'] > [data-xh-liquid-goo-split] {
+    animation: none;
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     置灰后矩阵把面换成中性淡底，公共环压上去足够对比，不再另灌 */
+  .xh-scope-float-button[data-part='trigger'][data-xh-action-variant='solid']:not([data-disabled]):focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* —— 展开的那一组 —— */
+  .xh-scope-float-button[data-part='list'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--xh-float-button-gap, var(--xh-space-2));
+  }
+
+  /* 贴下沿时整组往上长，翻过来摆，第一条动作离触发器最近 */
+  .xh-scope-float-button[data-part='list'][data-placement^='bottom'] {
+    flex-direction: column-reverse;
+  }
+
+  /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+  .xh-scope-float-button[data-part='list'][hidden] {
+    display: none;
+  }
+
+  /* 展开的每一条动作与触发器同一副身量：它们是一排里的同类，作者只管往里放按钮 */
+  .xh-scope-float-button[data-part='list'] > * {
+    flex: none;
+    inline-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    block-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    border-radius: var(--xh-float-button-radius, var(--xh-shape-circle));
+  }
+
+  /* 逐条依次冒出来，离触发器最近的那条先到。backwards 让每条在自己那份延迟里保持起始帧。
+     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。
+     动作项是作者放进来的任意节点，规则主体没有可认的特征：冒出、缩回与交错写成 list 自己的私有槽，
+     动作项只读槽。主体无特征的规则挂在 data-instant / data-state 后面，页面上任何元素翻转这两个属性
+     都会让它整棵子树重算 */
+  .xh-scope-float-button[data-part='list']:where(:not([data-instant])) {
+    --xh-_float-button-item-enter: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  /* 原生按钮直接作为动作项时，沿用触发器的视觉面（同一组公开槽、同一张形态表）；XhButton 保留自己的皮肤。 */
+  .xh-scope-float-button[data-part='list'] > button:not([data-scope]) {
+    padding: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-_float-button-border));
+    background-color: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    color: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    box-shadow: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+  }
+
+  .xh-scope-float-button[data-part='root'][data-variant='outline']
+    .xh-scope-float-button[data-part='list']
+    > button:not([data-scope]) {
+    background-image: linear-gradient(
+      to bottom,
+      var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
+      transparent var(--xh-stroke-thin)
+    );
+    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
+    backdrop-filter: var(--xh-material-frosted-backdrop);
+  }
+
+  .xh-scope-float-button[data-part='list'] > button:not([data-scope]):focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  @media (hover: hover) {
+    .xh-scope-float-button[data-part='list'] > button:not([data-scope]):not(:disabled):hover {
+      border-color: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
+      background-color: var(--xh-float-button-bg-hover, var(--xh-_float-button-bg-hover));
+    }
+  }
+
+  .xh-scope-float-button[data-part='list'] > button:not([data-scope]):not(:disabled):active {
+    background-color: var(--xh-float-button-bg-active, var(--xh-_float-button-bg-active));
+    scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  .xh-scope-float-button[data-part='list'] > button:not([data-scope]):disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 交错的间隔：第二条起逐级往后推，第五条起统一钉在第四级——与收起、与列表动效同一个封顶，
+     动作再多也不会拖出一条越来越慢的尾巴 */
+  .xh-scope-float-button[data-part='list'] > *:nth-child(2) {
+    --xh-_float-button-item-rank: 1;
+  }
+
+  .xh-scope-float-button[data-part='list'] > *:nth-child(3) {
+    --xh-_float-button-item-rank: 2;
+  }
+
+  .xh-scope-float-button[data-part='list'] > *:nth-child(4) {
+    --xh-_float-button-item-rank: 3;
+  }
+
+  .xh-scope-float-button[data-part='list'] > *:nth-child(n + 5) {
+    --xh-_float-button-item-rank: 4;
+  }
+
+  /* 收起：逆着冒出的次序逐条缩回，离触发器最远的先走、最近的最后收，连接层等它们播完才藏起展开组。
+     液态档里从触发器拆出来的那几块由液态组融回，不挂这段 */
+  .xh-scope-float-button[data-part='list'][data-state='closed'] {
+    --xh-_float-button-item-exit: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    --xh-_float-button-item-exiting: 1;
+    pointer-events: none;
+  }
+
+  /* 动作项只读槽：收起档压过进场档；延迟展开按正序名次、收起按倒序名次（收起标记为 1 时取后者） */
+  .xh-scope-float-button[data-part='list'] > :not([data-xh-liquid-goo-split]) {
+    animation: var(--xh-_float-button-item-exit, var(--xh-_float-button-item-enter, none));
+    animation-delay: calc(
+      var(--xh-motion-stagger-step) *
+        (
+          var(--xh-_float-button-item-rank, 0) * (1 - var(--xh-_float-button-item-exiting, 0)) +
+            var(--xh-_float-button-item-rank-back, 0) * var(--xh-_float-button-item-exiting, 0)
+        )
+    );
+  }
+
+  .xh-scope-float-button[data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
+    --xh-_float-button-item-rank-back: 1;
+  }
+
+  .xh-scope-float-button[data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
+    --xh-_float-button-item-rank-back: 2;
+  }
+
+  .xh-scope-float-button[data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
+    --xh-_float-button-item-rank-back: 3;
+  }
+
+  .xh-scope-float-button[data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
+    --xh-_float-button-item-rank-back: 4;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     粗指针的 44px 命中区由配方的 ::after 给，字形占的是 ::before */
+  .xh-scope-float-button[data-part='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-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+    /* 原地的小幅转动：展开后「+」转 45° 成「×」，读得出再按一下就收起；减弱动效下即刻到位 */
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-float-button[data-part='trigger'][data-state='open']:empty::before {
+    rotate: 45deg;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-float-button[data-part='root'][hidden],
+  .xh-scope-float-button[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：悬浮动作钮固定在视口上，纸上没有视口——它会印在页面某处盖住正文，而且按不动。 */
+    .xh-scope-float-button[data-part='root'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-float-button[data-part='trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-float-button[data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-float-button[data-part='trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}