@xihan-ui/styles 1.0.0 → 2.0.0

package/css/floating-panel.css

@@ -1,3 +1,14 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 floating panel 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='floating-panel'] {
@@ -10,8 +21,8 @@
      皮肤只管层级、配色、圆角、阴影、把手的摆放与状态表现。 */
 
   [data-scope='floating-panel'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-text));
+    /* 作者塞进面板里的图标按控件档取（§6.5）；标题栏上的按钮另由家族配方按各自的档下发字形尺 */
+    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-md));
 
     /* 面板本身是 fixed 定位，root 只是作者那棵树里的容器，不参与排布 */
     display: contents;
@@ -20,34 +31,41 @@
   /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
      关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
   [data-scope='floating-panel'][data-part='content'] {
-    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-text));
+    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-md));
   }
 
   [data-scope='floating-panel'][data-part='root'][hidden] {
     display: none;
   }
 
+  /*
+   * 开合触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出（此前只缩放不换底）。这里只把公开槽桥接到
+   * 矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+   */
   [data-scope='floating-panel'][data-part='trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-floating-panel-trigger-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-floating-panel-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-floating-panel-trigger-border, var(--xh-border-control));
-    border-radius: var(--xh-floating-panel-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-floating-panel-trigger-bg, var(--xh-bg-surface));
-    color: var(--xh-floating-panel-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-text-label-size);
-    cursor: pointer;
+    --xh-action-bg-rest: var(--xh-floating-panel-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-focus-visible: var(--xh-floating-panel-trigger-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-floating-panel-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-floating-panel-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-floating-panel-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-floating-panel-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-border-rest: var(--xh-floating-panel-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-focus-visible: var(--xh-floating-panel-trigger-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-radius: var(--xh-floating-panel-trigger-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-floating-panel-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-floating-panel-trigger-px, var(--xh-_action-profile-padding-inline));
+    /* 作者塞进按钮的图标随档取字形尺（md = 20px） */
+    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-_action-profile-glyph-size));
   }
 
   [data-scope='floating-panel'][data-part='trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='floating-panel'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色 */
+  [data-scope='floating-panel'][data-part='trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
   /* 把手的粗细：八个把手共用这两档，声明在这里往下继承。 */
@@ -61,8 +79,21 @@
     display: block;
   }
 
-  [data-scope='floating-panel'][data-part='positioner'][hidden] {
-    display: none;
+  /* 这里刻意没有 [data-part='positioner'][hidden] { display: none }：收起态连接层会给
+     positioner 打 hidden，而上面那条 display 正是要盖掉 UA 的 [hidden]{display:none}——
+     面板整棵子树都在 positioner 底下，它一收就不生成盒子，退场动画一帧都播不出来。
+     真正的收起由宿主在退场结束后落成内联 display:none。 */
+
+  /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
+  [data-scope='floating-panel'][data-part='positioner'][data-state='open'] {
+    will-change: opacity, scale;
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  [data-scope='floating-panel'][data-part='positioner'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='floating-panel'][data-part='content'] {
@@ -71,13 +102,32 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    /* 面板底下没有遮罩，压着的是任意页面内容：这条描边是它与背景之间唯一的边界，
-       取 border-default 与同样无遮罩的气泡卡片一档，别退到更淡的 border-subtle */
-    border: var(--xh-stroke-thin) solid var(--xh-floating-panel-border, var(--xh-border-default));
-    border-radius: var(--xh-floating-panel-radius, var(--xh-shape-surface));
-    background: var(--xh-floating-panel-bg, var(--xh-bg-surface));
-    color: var(--xh-floating-panel-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-floating-panel-shadow, var(--xh-elevation-sheet));
+    /* 默认态是 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);
+  }
+
+  /* 最大化时几何层把面板写成铺满视口（left/top 归零、宽高 100%），四条边全贴着视口：
+     圆角会在四角把底下的页面露出来，描边缩成一圈贴边的多余框线，投影整块落在视口之外。
+     三样一起撤，与抽屉贴住视口的那条边不圆角是同一回事。 */
+  [data-scope='floating-panel'][data-part='content'][data-window-state='maximized'] {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
   }
 
   [data-scope='floating-panel'][data-part='content'][hidden] {
@@ -101,24 +151,25 @@
     gap: var(--xh-floating-panel-header-gap, var(--xh-control-gap-sm));
     padding-block: var(--xh-floating-panel-header-py, var(--xh-space-2));
     padding-inline: var(--xh-floating-panel-header-px, var(--xh-space-3));
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-floating-panel-header-border, var(--xh-border-subtle));
-    background: var(--xh-floating-panel-header-bg, var(--xh-bg-subtle));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-floating-panel-header-border, var(--xh-material-frosted-separator));
+    background: var(--xh-floating-panel-header-bg, var(--xh-material-frosted-bg));
   }
 
   [data-scope='floating-panel'][data-part='header'][hidden] {
     display: none;
   }
 
+  /* 浮层内标题（§6.4）：14 / 600 */
   [data-scope='floating-panel'][data-part='title'] {
     margin: 0;
     flex: 1 1 auto;
     overflow: hidden;
     font-size: var(--xh-floating-panel-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-text-label-weight));
+    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-font-weight-semibold));
     line-height: var(--xh-leading-tight);
     white-space: nowrap;
     text-overflow: ellipsis;
-    color: var(--xh-floating-panel-title-fg, var(--xh-fg-default));
+    color: var(--xh-floating-panel-title-fg, var(--xh-material-frosted-fg));
   }
 
   /* 拖拽把手铺满标题栏剩下的横向空间：只给一小块纹理的话很难抓住 */
@@ -140,11 +191,6 @@
     cursor: default;
   }
 
-  [data-scope='floating-panel'][data-part='drag-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-offset));
-  }
-
   /* —— 改尺把手 ——
      这一段刻意用物理的 inset / width / height：面板的坐标是屏幕坐标（连接层写的是
      left/top），指针位移与方向键推动的也是屏幕方向。改成逻辑属性后，RTL 下 inset-inline-start
@@ -163,31 +209,30 @@
     cursor: default;
   }
 
-  [data-scope='floating-panel'][data-part='resize-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-offset));
-  }
-
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='n'] {
     inset: 0 0 auto 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 面板的落位与尺寸由连接层写成物理 left / top / width / height，data-edge 的 n/s/e/w 是屏幕方向，把手的厚度沿同一根物理轴 */
     height: var(--xh-_floating-panel-handle);
     cursor: ns-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='s'] {
     inset: auto 0 0 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     height: var(--xh-_floating-panel-handle);
     cursor: ns-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='w'] {
     inset: 0 auto 0 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-handle);
     cursor: ew-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='e'] {
     inset: 0 0 0 auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-handle);
     cursor: ew-resize;
   }
@@ -195,104 +240,103 @@
   /* 四个角排在四条边之后，命中区大一圈：角上要同时抓住两条边 */
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='nw'] {
     inset: 0 auto auto 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-corner);
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     height: var(--xh-_floating-panel-corner);
     cursor: nwse-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='ne'] {
     inset: 0 0 auto auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-corner);
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     height: var(--xh-_floating-panel-corner);
     cursor: nesw-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='se'] {
     inset: auto 0 0 auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-corner);
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     height: var(--xh-_floating-panel-corner);
     cursor: nwse-resize;
   }
 
   [data-scope='floating-panel'][data-part='resize-trigger'][data-edge='sw'] {
     inset: auto auto 0 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     width: var(--xh-_floating-panel-corner);
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
     height: var(--xh-_floating-panel-corner);
     cursor: nesw-resize;
   }
 
-  /* —— 标题栏上的按钮 —— */
-  [data-scope='floating-panel'][data-part='stage-trigger'],
+  /*
+   * —— 标题栏上的按钮 ——
+   * 形态钮与关闭钮是标题栏上的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针
+   * 命中区由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
+   * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）；
+   * 静息前景取磨砂面的 muted 字色，悬停 / 按下回到 fg-default。
+   */
+  [data-scope='floating-panel'][data-part='window-state-trigger'],
   [data-scope='floating-panel'][data-part='close-trigger'] {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background: transparent;
-    color: var(--xh-floating-panel-action-fg, var(--xh-fg-muted));
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-action-bg-hover: var(--xh-floating-panel-action-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-floating-panel-action-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-floating-panel-action-fg, var(--xh-material-frosted-fg-muted));
+    --xh-action-fg-hover: var(--xh-floating-panel-action-fg-hover, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-floating-panel-action-fg-active, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-floating-panel-action-fg-hover, var(--xh-_action-variant-fg-focus-visible));
+    /* 作者塞进按钮的图标随档取字形尺（sm = 16px），与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-_action-profile-glyph-size));
   }
 
-  /* 两颗钮同高同圆角，尺寸与圆角槽按各自角色命名 */
-  [data-scope='floating-panel'][data-part='stage-trigger'] {
-    inline-size: var(--xh-floating-panel-action-size, var(--xh-control-h-sm));
-    block-size: var(--xh-floating-panel-action-size, var(--xh-control-h-sm));
-    border-radius: var(--xh-floating-panel-action-radius, var(--xh-shape-control));
+  /* 两颗钮同高同圆角，尺寸与圆角槽按各自角色命名，映到家族正方盒 */
+  [data-scope='floating-panel'][data-part='window-state-trigger'] {
+    --xh-action-visual-size: var(--xh-floating-panel-action-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-floating-panel-action-radius, var(--xh-shape-control));
   }
 
   [data-scope='floating-panel'][data-part='close-trigger'] {
-    inline-size: var(--xh-floating-panel-close-size, var(--xh-control-h-sm));
-    block-size: var(--xh-floating-panel-close-size, var(--xh-control-h-sm));
-    border-radius: var(--xh-floating-panel-close-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-floating-panel-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-floating-panel-close-radius, var(--xh-shape-control));
   }
 
-  [data-scope='floating-panel'][data-part='stage-trigger'][hidden],
+  [data-scope='floating-panel'][data-part='window-state-trigger'][hidden],
   [data-scope='floating-panel'][data-part='close-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='floating-panel'][data-part='stage-trigger']:hover,
-  [data-scope='floating-panel'][data-part='close-trigger']:hover {
-    background: var(--xh-floating-panel-action-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-floating-panel-action-fg-hover, var(--xh-fg-default));
-  }
-
-  [data-scope='floating-panel'][data-part='stage-trigger']:active,
-  [data-scope='floating-panel'][data-part='close-trigger']:active {
-    background: var(--xh-floating-panel-action-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
+  /* 当前形态的那颗钮是按下的开关（aria-pressed），无滑块开关的 on 态取品牌淡底（§7.3）：
+     rest 12% → hover 20% → pressed 28%，前景一律 --xh-fg-on-brand-subtle（对比度由该令牌承担）；
+     淡底不是实心面，焦点吃库环 */
+  [data-scope='floating-panel'][data-part='window-state-trigger'][data-state='on'] {
+    --xh-action-bg-rest: var(--xh-floating-panel-action-bg-on, var(--xh-bg-brand-subtle));
+    --xh-action-bg-hover: var(--xh-floating-panel-action-bg-on-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-action-bg-pressed: var(--xh-floating-panel-action-bg-on-active, var(--xh-bg-brand-subtle-active));
+    --xh-action-bg-focus-visible: var(--xh-floating-panel-action-bg-on, var(--xh-bg-brand-subtle));
+    --xh-action-fg-rest: var(--xh-floating-panel-action-fg-on, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-hover: var(--xh-floating-panel-action-fg-on, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-pressed: var(--xh-floating-panel-action-fg-on, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-focus-visible: var(--xh-floating-panel-action-fg-on, var(--xh-fg-on-brand-subtle));
   }
 
-  /* 当前形态的那个按钮压着不放，用户一眼看得出面板正处于哪一档。
-     按下态的前景取 fg-default 而不是品牌色：品牌色压在这块底上只有 3.4:1（深色皮肤 2.9:1），
-     按钮里通常就一个字形，够不着文字该有的对比度。 */
-  [data-scope='floating-panel'][data-part='stage-trigger'][data-state='on'] {
-    background: var(--xh-floating-panel-action-bg-active, var(--xh-bg-subtle-active));
-    color: var(--xh-floating-panel-action-fg-active, var(--xh-fg-default));
-  }
-
-  /* 只换前景不叠 opacity：叠了之后禁用文字的对比度会掉到读不出来 */
-  [data-scope='floating-panel'][data-part='stage-trigger'][data-disabled] {
-    background: transparent;
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  [data-scope='floating-panel'][data-part='stage-trigger']:focus-visible,
-  [data-scope='floating-panel'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  @media (forced-colors: active) {
+    /* 强制色不会绘制背景图层；直接撤掉顶边装饰，边界与文字改由 frosted 的系统色令牌接手。 */
+    [data-scope='floating-panel'][data-part='content'] {
+      background-image: none;
+    }
   }
 
+  /* 正文是浮在页面之上的 Overlay 滚动面（§6.6）：原生细条由 reset 层统一给，滚到头不把页面一起带走；
+     内容高度不动态变化，不写 scrollbar-gutter */
   [data-scope='floating-panel'][data-part='body'] {
     flex: 1 1 auto;
     display: block;
     overflow: auto;
+    overscroll-behavior: contain;
     padding-block: var(--xh-floating-panel-body-py, var(--xh-surface-py-sm));
     padding-inline: var(--xh-floating-panel-body-px, var(--xh-surface-px-sm));
   }
@@ -313,4 +357,41 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /* 形态钮是同一个部件的三副面孔，字形按它「按下去切到哪一档」分：
+     还原是四角朝内、铺满是四角朝外、收拢是一条横线。不分档的话标题栏上排着的
+     两三颗钮长得一模一样，按哪颗全靠猜。
+     这条打底画「还原」，另两档在下面换掉 mask-image。
+     选的是 data-target-window-state 而不是面板身上的 data-window-state：后者说的是面板此刻在哪一档，
+     用它会让排在一起的几颗钮同时换成同一枚字形。
+     字形也不随 data-state='on' 翻面：可访问名由连接层按 target 定死（按下的仍念「铺满面板」），
+     字形跟着按下态改就与念出来的名字对不上了 */
+  [data-scope='floating-panel'][data-part='window-state-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-restore) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-restore) center / contain no-repeat;
+  }
+
+  [data-scope='floating-panel'][data-part='window-state-trigger'][data-target-window-state='maximized']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-maximize);
+    mask-image: var(--xh-glyph-mark-maximize);
+  }
+
+  [data-scope='floating-panel'][data-part='window-state-trigger'][data-target-window-state='minimized']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-minus);
+    mask-image: var(--xh-glyph-mark-minus);
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='floating-panel'][data-part='positioner'] {
+      display: none;
+    }
+  }
 }

package/css/focus.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 聚焦环的公共层：全库共用一份。
+ *
+ * 解剖给每个部件打上 data-scope 与 data-part，键盘焦点落在哪个部件上，环就由这里画：
+ * 粗细取 --xh-ring-width，颜色取 --xh-_ring-color（默认 --xh-ring-focus），
+ * 偏移取 --xh-ring-offset——这个令牌是负的一个环宽，环的外沿与元素边框外沿重合，
+ * 元素聚焦前后占的地方一样大。全库只有这一种偏移，要另画的组件把整条环重写。
+ *
+ * 环往内收之后，内侧紧挨着的是环压着的那块面。面是实心的那几档，环色与面同族、贴上去就
+ * 看不出来；那几档在各自皮肤的 :focus-visible 规则里把 --xh-_ring-color 灌成 currentColor，
+ * 环随之取这块面配对的前景色——那一支色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+ * 取的是「面配对的前景色」，不是语气色：环仍然不随 data-tone 走，没有实心面的那些档
+ * 一律是 --xh-ring-focus 这一支。
+ *
+ * 灌 currentColor 的档要同时成立三件事：
+ *   一、面画在谁身上——画在祖先上（标签里那颗透空的关闭钮坐在标签那块实心底上）时
+ *       规则写成后代选择器，槽仍然灌在拿焦点的那个节点上；
+ *   二、部件得有 color——圆点、滑块这类没有字的部件先补一支与面配对的墨色，
+ *       不补则 currentColor 取到继承下来的正文色或原生控件的 UA 前景色；
+ *       只有一档要换的（开关选中的轨道）把那支色直接写进槽，不绕 currentColor；
+ *   三、面被换走的档要退出——失效档把面换成置灰底、前景换成置灰色或透明，
+ *       中性轻档把实心底换成灰底，currentColor 在这些档上会把环跟着糊掉甚至整条画成透明。
+ *       靠收窄选择器退回本份的默认值，或把槽显式写回 var(--xh-ring-focus)。
+ *
+ * 槽在这里只留一个默认值，名单不收在本份里——谁的面是实心的由那份皮肤自己知道，
+ * 也只有引了那份皮肤的人该为它付字节。
+ * :focus-visible 只匹配拿着焦点的那一个节点，祖先不匹配，所以这个槽不会被后代读到。
+ *
+ * 选择器停在两个属性加一个伪类（0,3,0）：与组件皮肤里
+ * [data-scope='x'][data-part='y']:focus-visible 同级，组件皮肤排在本份之后，
+ * 要另画的组件照写即可压过；同时压过 forced-colors.css 里 (0,2,0) 的状态环，
+ * 高对比档里键盘焦点仍然压在选中、展开这类状态之上。
+ *
+ * 排在全部组件皮肤之前：组件不必为了换个环色把整条环重写一遍。
+ */
+@layer xihan.components {
+  [data-scope][data-part]:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_ring-color, var(--xh-ring-focus));
+    outline-offset: var(--xh-ring-offset);
+  }
+}

package/css/forced-colors.css

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 高对比档（forced-colors: active）的公共补救层。
+ *
+ * 这一档里系统接管配色：作者写的每一个颜色取值都被换成系统调色板里的对应角色，
+ * box-shadow 与 background-image 直接丢弃。于是「只靠底色差表达的状态」全部塌成同一个样子——
+ * 列表的悬停档与展开路径档、勾选与未勾选、当前页与别的页，看上去一模一样。
+ *
+ * 这份文件按状态词汇表逐个把通道补回来：outline 在这一档里不被丢弃，用它画两档可分的环。
+ * 逐组件写不动的东西收在这里，组件自己特有的（画的就是颜色、或者靠背景图承载信息）
+ * 在各自皮肤里另有 forced-colors 块。
+ *
+ * 取值只用 system color keyword：这一档里 --xh-* 令牌已经不生效，写了是误导。
+ * 排在全部组件皮肤之后：同特指度靠源序取胜，组件皮肤里任何与这里同特指度的 outline 声明
+ * 都压不掉这里的状态环。选择器一律停在两个属性（0,2,0），组件的 :focus-visible 规则
+ * 特指度更高，聚焦环恒压在状态环之上。
+ */
+@layer xihan.components {
+  @media (forced-colors: active) {
+    /* 轻档：方向键锚定的那一条（焦点仍在宿主上）。虚线环，与强档一眼分得开。 */
+    [data-scope][data-highlighted] {
+      outline: var(--xh-stroke-thin) dashed CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    /*
+     * 强档：选中、当前项、展开路径、勾选、激活、按下、走到的步骤、区间内的日期。
+     * 实线环加系统高亮色，比轻档粗一档。
+     *
+     * data-state=open 那条要摘掉三个部件：定位层与遮罩都铺满视口，画上环就是绕着整块屏幕
+     * 描一圈；content 面的边由下面那条浮层规则统一给，不走状态环。
+     * 摘除写在 :where() 里，它不计特指度，整条选择器仍停在 (0,2,0)。
+     */
+    [data-scope][data-selected],
+    [data-scope][data-current],
+    [data-scope][data-in-path],
+    [data-scope][data-in-range],
+    [data-scope][data-indeterminate],
+    [data-scope][data-passed],
+    [data-scope][data-state='checked'],
+    [data-scope][data-state='indeterminate'],
+    [data-scope][data-state='active'],
+    [data-scope][data-state='on'],
+    [data-scope][data-state='current'],
+    [data-scope][data-state='completed'],
+    [data-scope][data-state='open']:where(:not([data-part='positioner'], [data-part='content'], [data-part='backdrop'])) {
+      outline: var(--xh-stroke-thick) solid Highlight;
+      outline-offset: calc(-1 * var(--xh-stroke-thick));
+    }
+
+    /*
+     * 禁用：常态靠淡化的前景色表达，这一档里前景被统一换成 CanvasText，淡化那一层没了。
+     * GrayText 是系统给「不可用」留的那个角色。
+     */
+    [data-scope][data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    /*
+     * 只读：常态是压低一档底色，这一档里底色被统一换掉，与能改的控件一模一样。
+     * 改画虚线边——只读仍要照读，字色一动不动，改不动这件事写在框上。
+     */
+    [data-scope][data-readonly] {
+      border-style: dashed;
+    }
+
+    /*
+     * 浮层面：三档海拔角色都写在 box-shadow 上，这一档里整层丢弃，浮层与页面之间零分界。
+     * 定位层里的那张面补一圈实边把它框出来。
+     */
+    [data-scope][data-part='positioner'] [data-scope][data-part='content'] {
+      border: var(--xh-stroke-thin) solid CanvasText;
+    }
+
+    /*
+     * 正在编辑的那一段：日期与时间的分段框里，当前段常态靠反白表达，这一档里底色被统一换掉，
+     * 整行数字看上去一模一样，而这类框本来就没有光标那道线。改画一圈实边把它框出来。
+     *
+     * 这一条走三个属性而不是上面那些的两个：分段框的皮肤在同一档上写了 outline: none
+     * （常态下环画在外层的 control 上），那条规则本身就是三个属性，两个属性压不过它。
+     * data-focus 只长在日期段与时间段上，这条选到的正是它们。
+     */
+    [data-scope][data-part='segment'][data-focus] {
+      outline: var(--xh-stroke-thick) solid Highlight;
+      outline-offset: calc(-1 * var(--xh-stroke-thick));
+    }
+  }
+}