@xihan-ui/styles 2.1.0 → 3.1.0

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 探一次，取不到就说明这份皮肤没被引入。 */
@@ -65,6 +66,104 @@
     inset-inline-end: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
+  /* —— 位置 ——
+     拖到别处、或作者给了位置时，角落那两条贴边里有一条换掉：data-placement 由连接层按位置推出
+     （离触发器最近的恒是视口的那条边、展开组朝页面中间长），这里只换沿边的那一条。
+     百分比按固定定位的包含块（视口去掉滚动条）量，与连接层量的视口同一块；
+     夹取的上下界与四角同样和安全区取大的一头，比例再怎么写，钮也不会压进刘海与横条。
+     触发器边长取它自己那一档（使用者槽在前）：沿边的比例量的是触发器中心 */
+  [data-scope='float-button'][data-part='root'] {
+    --xh-_float-button-span: var(--xh-float-button-size, var(--xh-_float-button-size));
+  }
+
+  /* 贴左右边：上下按比例，锚在离触发器近的那一头 */
+  [data-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)))
+    );
+  }
+
+  [data-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)))
+    );
+  }
+
+  /* 贴上下边：行内方向按比例，从行首量起 */
+  [data-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)))
+    );
+  }
+
+  [data-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)))
+    );
+  }
+
+  /* 停在一点、或正跟着指针走：坐标是触发器左上角的物理像素，横向一律从左边量，不随书写方向翻。
+     竖向锚在离触发器近的那一头：朝下长的锚上沿，朝上长的锚下沿，展开组冒出来时触发器不挪窝。
+     停着的点仍夹在视口里（视口变小时不跑出去）；跟手的坐标由连接层夹好，这里原样用 */
+  [data-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)))
+    );
+  }
+
+  [data-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)))
+    );
+  }
+
+  [data-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)))
+    );
+  }
+
+  /* 跟手排在贴边与停点之后：拖动与落定途中压过提交了的位置 */
+  [data-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);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='top'] {
+    top: var(--xh-_float-button-y);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='bottom'] {
+    bottom: calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span));
+  }
+
+  /* 能拖时触屏手指在触发器上的移动归拖动，不让浏览器拿去滚页面；光标提示能抓、正抓着 */
+  [data-scope='float-button'][data-part='root'][data-draggable] [data-scope='float-button'][data-part='trigger'] {
+    touch-action: none;
+    cursor: grab;
+  }
+
+  [data-scope='float-button'][data-part='root'][data-dragging] [data-scope='float-button'][data-part='trigger'] {
+    cursor: grabbing;
+  }
+
   /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
   [data-scope='float-button'][data-part='root'][data-size='sm'] {
     --xh-_float-button-size: var(--xh-control-box-md);
@@ -97,10 +196,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 +209,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 +258,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 +399,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 +459,7 @@
     cursor: not-allowed;
   }
 
-  /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，
+  /* 交错的间隔：第二条起逐级往后推，第五条起统一钉在第四级——与收起、与列表动效同一个封顶，
      动作再多也不会拖出一条越来越慢的尾巴 */
   [data-scope='float-button'][data-part='list'] > *:nth-child(2) {
     animation-delay: var(--xh-motion-stagger-step);
@@ -292,12 +473,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 +511,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 +532,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;
+    }
+  }
 }

package/css/floating-panel.css

@@ -8,6 +8,7 @@
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -84,7 +85,8 @@
      面板整棵子树都在 positioner 底下，它一收就不生成盒子，退场动画一帧都播不出来。
      真正的收起由宿主在退场结束后落成内联 display:none。 */
 
-  [data-scope='floating-panel'][data-part='positioner'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='floating-panel'][data-part='positioner'][data-state='open']:not([data-instant]) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -95,39 +97,52 @@
   }
 
   [data-scope='floating-panel'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-floating-panel-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-floating-panel-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-floating-panel-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-floating-panel-shadow, var(--xh-_material-shadow));
+
     position: relative;
     block-size: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    /* 默认态是 M2 磨砂面：背景、边缘、高光、投影与光学采样同出一张配方。
-       作者既有的面板槽仍排在外层；没有覆写时才落进这套磨砂令牌。 */
-    border: var(--xh-stroke-thin) solid var(--xh-floating-panel-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-floating-panel-radius, var(--xh-shape-overlay));
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-floating-panel-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-floating-panel-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-floating-panel-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
-    /* 铺满那一档要把投影整个撤掉，海拔的这一跳跟着过渡走 */
-    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 铺满那一档要把投影与描边色整个撤掉，海拔的这一跳跟着过渡走 */
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 最大化时几何层把面板写成铺满视口（left/top 归零、宽高 100%），四条边全贴着视口：
      圆角会在四角把底下的页面露出来，描边缩成一圈贴边的多余框线，投影整块落在视口之外。
-     三样一起撤，与抽屉贴住视口的那条边不圆角是同一回事。 */
+     三样一起撤，与抽屉贴住视口的那条边不圆角是同一回事。描边只撤颜色、不撤宽度，
+     进出最大化时盒子不因描边一收一放跳一像素 */
   [data-scope='floating-panel'][data-part='content'][data-window-state='maximized'] {
-    border: 0;
+    border-color: transparent;
     border-radius: 0;
     box-shadow: none;
   }
 
+  /* 进出最大化：位置与尺寸按指示档补过去，圆角同步收放，不再瞬切。只在这一段挂——
+     拖动与改尺寸要跟手，平时的定位层不带过渡；减弱动效下即刻到位 */
+  [data-scope='floating-panel'][data-part='positioner'][data-animating] {
+    transition:
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      width var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      height var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='floating-panel'][data-part='positioner'][data-animating] [data-scope='floating-panel'][data-part='content'] {
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-radius var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
   [data-scope='floating-panel'][data-part='content'][hidden] {
     display: none;
   }
@@ -392,4 +407,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/form.css

@@ -5,8 +5,11 @@
 
 /* 定义 form 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* Form 独立皮肤同时传递引入提交 / 重置钮的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -41,6 +44,14 @@
     flex-flow: row wrap;
     align-items: start;
     column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
+    --xh-_form-inline-control-w: var(--xh-control-w);
+  }
+
+  /* 字段会把里面的控件铺满字段宽，而一行流的字段宽正是由控件撑出来的，两者互相指望就塌成内容宽；
+     这一档的字段还原成表单根上的缺省宽 */
+  [data-scope='form'][data-part='root'][data-layout='inline'] [data-scope='field'][data-part='root'] {
+    --xh-control-w: var(--xh-_form-inline-control-w);
   }
 
   /* 一列是网格档的缺省，这里从两列起逐档写 */
@@ -204,11 +215,16 @@
   /* 从收起翻成显出的那一下给一小段入场：读屏靠 role=alert 播报，
      视觉这边也得有个"它是刚冒出来的"的交代，否则像一直杵在那儿 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid'] {
-    animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 错误全改完或重置时淡出，播完连接层才写 hidden。收起态常挂 hidden，这条只在退场途中命中 */
+  [data-scope='form'][data-part='error-summary'][data-state='idle'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* 摘要里的每一条是一个真链接，指向对应字段容器。铺满一行的集合行：悬停 / 按下只换面不缩放，
-     底面坐在摘要的 surface 白底上，走白底承载阶梯 100 → 200；换面走按压时间线，释放回 release 档 */
+     底面坐在摘要的 surface 白底上，走白底承载阶梯 100 → 200；换面按下走 press，其余走 micro */
   [data-scope='form'][data-part='error-summary-item'] {
     display: block;
     padding-inline: var(--xh-form-summary-item-px, var(--xh-space-1));
@@ -220,7 +236,7 @@
     text-underline-offset: var(--xh-form-summary-item-underline-offset, var(--xh-space-0_5));
     cursor: pointer;
     transition:
-      background-color var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -232,7 +248,7 @@
   /* 摘要显出时条目逐条入场，越靠后起步越晚。
      backwards 让还没轮到的条目停在首帧，不是先显出再重播 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item'] {
-    animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
   /* 排序按"前面有几条露面的"数，不按 nth-child：作者一次把所有字段的条目都写上，
@@ -360,20 +376,18 @@
     --xh-action-shadow-pressed: var(--xh-form-submit-shadow, var(--xh-_highlight-brand));
     --xh-action-ring-color-focus-visible: currentColor;
   }
-}
 
-@layer xihan.motion {
-  /* 关键帧写在自己文件里、名字带组件前缀：motion.css 是公共的，
-     往那儿加一条只服务本组件的动画会让所有组件都得跟着重下载 */
-  @keyframes xh-form-summary-enter {
-    from {
-      opacity: 0;
-      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
-    }
+  /* 提交回调在途：环由加载环配方压在提交钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     提交文案随前景淡到透明留位：进入在途等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  [data-scope='form'][data-part='submit-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-form-loading-duration, var(--xh-motion-loop-spin));
+  }
 
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
+  [data-scope='form'][data-part='submit-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
   }
 }