@xihan-ui/styles 2.1.0 → 3.0.0

package/css/flex.css

@@ -12,8 +12,15 @@
   }
 
   [data-scope='flex'][data-part='root'] {
+    /* 交叉轴对齐收在两个私有槽里：缺省那一支跟着当档的方向走，写了 align 的档改的是另一支。
+       分两支是因为逐档切方向时，缺省对齐要跟着换，而作者显式写的对齐不能被换掉。
+       每一层都声明一遍，嵌套时内层不吃外层的值 */
+    --xh-_flex-align-default: center;
+    --xh-_flex-align: var(--xh-_flex-align-default);
+
     display: flex;
     flex-wrap: nowrap;
+    align-items: var(--xh-_flex-align);
     /* 不写 gap 档位就不留间距；使用者槽位排在档位之前，写死一个值即盖过所有档 */
     gap: var(--xh-flex-gap, var(--xh-space-0));
   }
@@ -34,13 +41,13 @@
   /* 横排时按中线对齐：一排里混着文字、按钮、标签，高度本就不齐，居中最不容易看出错位 */
   [data-scope='flex'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
-    align-items: center;
+    --xh-_flex-align-default: center;
   }
 
   /* 竖排时拉伸：一列里的块级子项该占满容器宽度 */
   [data-scope='flex'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
-    align-items: stretch;
+    --xh-_flex-align-default: stretch;
   }
 
   /* —— 折行 —— */
@@ -49,25 +56,25 @@
   }
 
   /* —— 交叉轴对齐 —— */
-  /* 排在方向之后：两者特指度相同，写了 align 就该压过随方向来的那份缺省 */
+  /* 写的是显式那一支：特指度比根上那条缺省高，方向怎么换都盖不掉它 */
   [data-scope='flex'][data-part='root'][data-align='start'] {
-    align-items: flex-start;
+    --xh-_flex-align: flex-start;
   }
 
   [data-scope='flex'][data-part='root'][data-align='center'] {
-    align-items: center;
+    --xh-_flex-align: center;
   }
 
   [data-scope='flex'][data-part='root'][data-align='end'] {
-    align-items: flex-end;
+    --xh-_flex-align: flex-end;
   }
 
   [data-scope='flex'][data-part='root'][data-align='stretch'] {
-    align-items: stretch;
+    --xh-_flex-align: stretch;
   }
 
   [data-scope='flex'][data-part='root'][data-align='baseline'] {
-    align-items: baseline;
+    --xh-_flex-align: baseline;
   }
 
   /* —— 主轴分布 —— */
@@ -117,6 +124,315 @@
     gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
   }
 
+  /* —— 逐档的方向、对齐、分布与间距 —— */
+  /* 移动优先：先按不带档位的那几个属性排定，视口每宽到一档就换成那一档的取值，没写的档沿用比它窄的那一档。
+     四档自窄到宽依次写，只用 min-width：媒体查询不改选择器权重，宽视口上同时命中好几档时由源码序决定谁生效。
+     宽度写字面量：自定义属性在 @media 条件里不参与求值，令牌变量写在这里等于没写条件。
+     方向换档时只换缺省对齐那一支，作者写过的对齐仍由显式那一支说了算 */
+  @media (min-width: 640px) {
+    [data-scope='flex'][data-part='root'][data-orientation-sm='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-orientation-sm='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-sm='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-sm='center'] {
+      --xh-_flex-align: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-sm='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-sm='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-sm='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='start'] {
+      justify-content: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='center'] {
+      justify-content: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='end'] {
+      justify-content: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='between'] {
+      justify-content: space-between;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='around'] {
+      justify-content: space-around;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-sm='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-sm='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-sm='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-sm='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-sm='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-sm='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-scope='flex'][data-part='root'][data-orientation-md='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-orientation-md='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-md='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-md='center'] {
+      --xh-_flex-align: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-md='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-md='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-md='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='start'] {
+      justify-content: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='center'] {
+      justify-content: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='end'] {
+      justify-content: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='between'] {
+      justify-content: space-between;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='around'] {
+      justify-content: space-around;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-md='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-md='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-md='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-md='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-md='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-md='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-scope='flex'][data-part='root'][data-orientation-lg='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-orientation-lg='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-lg='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-lg='center'] {
+      --xh-_flex-align: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-lg='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-lg='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-lg='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='start'] {
+      justify-content: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='center'] {
+      justify-content: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='end'] {
+      justify-content: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='between'] {
+      justify-content: space-between;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='around'] {
+      justify-content: space-around;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-lg='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-lg='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-lg='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-lg='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-lg='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-lg='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-scope='flex'][data-part='root'][data-orientation-xl='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-orientation-xl='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-xl='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-xl='center'] {
+      --xh-_flex-align: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-xl='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-xl='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    [data-scope='flex'][data-part='root'][data-align-xl='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='start'] {
+      justify-content: flex-start;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='center'] {
+      justify-content: center;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='end'] {
+      justify-content: flex-end;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='between'] {
+      justify-content: space-between;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='around'] {
+      justify-content: space-around;
+    }
+
+    [data-scope='flex'][data-part='root'][data-justify-xl='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-xl='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-xl='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-xl='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-xl='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    [data-scope='flex'][data-part='root'][data-gap-xl='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='flex'][data-part='root'][hidden] {

package/css/float-button.css

@@ -9,6 +9,7 @@
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -97,10 +98,11 @@
     --xh-_float-button-shadow: none;
   }
 
+  /* 浮动钮钉在内容之上，面要盖得住底下的内容：没写语气时淡底取不透明档（ghost 静息就透景，不在此列） */
   [data-scope='float-button'][data-part='root'][data-variant='subtle'] {
-    --xh-_float-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_float-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_float-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --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;
@@ -109,8 +111,8 @@
 
   [data-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));
-    --xh-_float-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --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);
@@ -158,38 +160,114 @@
     --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_action-profile-glyph-size));
   }
 
-  /* 缺省 outline 是 M2 磨砂面：背景、边缘、顶光、投影与磨砂从同一份配方取。
-     悬停 / 按下的底走矩阵 outline 列的画布阶梯（100 → 200），边缘与投影不动；
-     键盘聚焦时铺配方的实体 focus surface——透明面上的内收环没有稳定的底可量对比；
-     置灰只换字色（矩阵 disabled 列的前景），面仍留着，透空的面在任何内容上都读不出边界 */
+  /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——
+     底、描边、投影、1px 顶光与背景滤镜一份取值，高对比、减少透明度、打印和强制色沿同一令牌通道降级。
+     悬停 / 按下换不透明的淡底一档、二档，边缘与投影不动；键盘聚焦时铺实体 focus surface——透明面上的
+     内收环不能依赖页面底色；置灰只换字色，面仍留着，透空的面在任何内容上都读不出边界 */
   [data-scope='float-button'][data-part='root'][data-variant='outline']
     [data-scope='float-button'][data-part='trigger'] {
-    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_float-button-bg));
-    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-material-frosted-focus-surface));
-    --xh-action-bg-disabled: var(--xh-float-button-bg, var(--xh-_float-button-bg));
-    --xh-action-fg-rest: var(--xh-float-button-fg, var(--xh-_float-button-fg));
-    --xh-action-fg-hover: var(--xh-float-button-fg, var(--xh-_float-button-fg));
-    --xh-action-fg-pressed: var(--xh-float-button-fg, var(--xh-_float-button-fg));
-    --xh-action-fg-focus-visible: var(--xh-float-button-fg, var(--xh-_float-button-fg));
-    --xh-action-border-rest: var(--xh-float-button-border, var(--xh-_float-button-border));
-    --xh-action-border-hover: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
-    --xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
-    --xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_float-button-border));
-    --xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_float-button-border));
-    --xh-action-shadow-rest: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
-    --xh-action-shadow-hover: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
-    --xh-action-shadow-pressed: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
-    --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
-    --xh-action-shadow-disabled: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    /* 面走材质家族配方（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 顶光走配方的高光通道：实心、淡色与透空形态各有自身表面，不能把磨砂高光误铺上去 */
-    --xh-action-highlight-rest: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-hover: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-pressed: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-focus-visible: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-disabled: var(--xh-material-frosted-highlight);
+  }
 
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
+  /* 液态组：液态档下触发器与展开的动作结成一组（状态机挂进 core），共用宿主最前面那层色块，
+     靠近时边缘像液体一样连起来。底色、墨色细线、亮边与投影都由色块层沿整组的外形画，块自己的面与细线
+     换成透明、亮边与投影撤掉，只留磨砂；悬停 / 按下改成往前景色兑的一层薄色叠在色块上。
+     只有缺省 outline 的液态面才结组，其余形态的面是实心的，色块层藏起来。强制色下色块层撤掉，块保留原样 */
+  @media (forced-colors: none) {
+    :where([data-material='liquid']) [data-scope='float-button'][data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      [data-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;
+    }
+  }
+
+  [data-scope='float-button'][data-part='root']:not([data-variant='outline']) > [data-xh-liquid-goo-layer] {
+    display: none;
+  }
+
+  /* 整组的投影由色块层沿外形画，使用者的投影槽接到那里。色块层不是部件，只按 scope 选 */
+  [data-scope='float-button'] > [data-xh-liquid-goo-layer] {
+    --xh-_liquid-goo-shadow: var(--xh-float-button-shadow, var(--xh-material-liquid-shadow));
+  }
+
+  /* 色块层不设层号、靠排在最前压在各块之下：展开组也得是定位元素才盖得住它（触发器本就是） */
+  [data-scope='float-button'][data-part='root'][data-xh-liquid-goo] [data-scope='float-button'][data-part='list'] {
+    position: relative;
+  }
+
+  /* 展开组里的原生动作项在组里同样是液态面：底色、细线、亮边与投影交给色块层，块上留前景与磨砂 */
+  @media (forced-colors: none) {
+    :where([data-material='liquid']) [data-scope='float-button'][data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      [data-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']) [data-scope='float-button'][data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      [data-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']) [data-scope='float-button'][data-part='root'][data-variant='outline'][data-xh-liquid-goo]
+      [data-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 的逐条冒出不再叠上去 */
+  [data-scope='float-button'][data-part='list'] > [data-xh-liquid-goo-split] {
+    animation: none;
   }
 
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
@@ -223,7 +301,12 @@
     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 让每条在自己那份延迟里保持起始帧 */
+  }
+
+  /* 逐条依次冒出来，离触发器最近的那条先到。backwards 让每条在自己那份延迟里保持起始帧。
+     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。守卫包在 :where 里不加特异性：
+     后面的交错延迟、液态分离块与收起那几条要照旧压得过这一条 */
+  [data-scope='float-button'][data-part='list']:where(:not([data-instant])) > * {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
@@ -278,7 +361,7 @@
     cursor: not-allowed;
   }
 
-  /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，
+  /* 交错的间隔：第二条起逐级往后推，第五条起统一钉在第四级——与收起、与列表动效同一个封顶，
      动作再多也不会拖出一条越来越慢的尾巴 */
   [data-scope='float-button'][data-part='list'] > *:nth-child(2) {
     animation-delay: var(--xh-motion-stagger-step);
@@ -292,12 +375,31 @@
     animation-delay: calc(3 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='float-button'][data-part='list'] > *:nth-child(5) {
+  [data-scope='float-button'][data-part='list'] > *:nth-child(n + 5) {
     animation-delay: calc(4 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='float-button'][data-part='list'] > *:nth-child(n + 6) {
-    animation-delay: calc(5 * var(--xh-motion-stagger-step));
+  /* 收起：逆着冒出的次序逐条缩回，离触发器最远的先走、最近的最后收，连接层等它们播完才藏起展开组。
+     液态档里从触发器拆出来的那几块由液态组融回，不挂这段 */
+  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]) {
+    pointer-events: none;
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
+    animation-delay: var(--xh-motion-stagger-step);
+  }
+
+  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
+    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+  }
+
+  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
+    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+  }
+
+  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
+    animation-delay: calc(4 * var(--xh-motion-stagger-step));
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
@@ -311,6 +413,12 @@
     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);
+  }
+
+  [data-scope='float-button'][data-part='trigger'][data-state='open']:empty::before {
+    rotate: 45deg;
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
@@ -326,4 +434,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='float-button'][data-part='trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='float-button'][data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='float-button'][data-part='trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }