@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/dialog.css

@@ -0,0 +1,470 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 dialog 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-dialog {
+    --xh-dialog-skin: 1;
+  }
+
+  /*
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
+   * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
+   */
+  .xh-scope-dialog[data-part='trigger'] {
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 家族配方给了 display，作者手写 hidden 时得把 UA 的 [hidden]{display:none} 还回去 */
+  .xh-scope-dialog[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-dialog[data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-dialog-backdrop-layer, var(--xh-_layer, var(--xh-layer-modal)));
+    background: var(--xh-dialog-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  /* 同一层 dim 之上再做一层短半径采样。默认 opaque 的语义不变；只有作者显式选 blur
+     才会启用。保留既有 blur 槽，新的完整 filter 槽可覆盖整个表达。 */
+  .xh-scope-dialog[data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: var(--xh-dialog-backdrop-filter, blur(var(--xh-dialog-backdrop-blur, var(--xh-overlay-backdrop-blur))));
+    backdrop-filter: var(--xh-dialog-backdrop-filter, blur(var(--xh-dialog-backdrop-blur, var(--xh-overlay-backdrop-blur))));
+  }
+
+  /* 去掉底色，只留下这一层吃指针：交互外关闭与滚动锁定照旧 */
+  .xh-scope-dialog[data-part='backdrop'][data-variant='transparent'] {
+    background: transparent;
+  }
+
+  .xh-scope-dialog[data-part='backdrop'][data-state='open']:not([data-instant]) {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场补 forwards：动画播完到宿主真正卸载之间还有一帧，不定住终态遮罩会闪回全黑 */
+  .xh-scope-dialog[data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  .xh-scope-dialog[data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-dialog-layer, var(--xh-_layer, var(--xh-layer-modal)));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* 全屏定位层只负责排版，不截获页面指针；模态拦截由 backdrop 承担。 */
+    pointer-events: none;
+    /* 这段内衬是面板与视口边之间的全部距离，与安全区取大的一头：
+       刘海、圆角与底部横条压住的那一段由系统给出，内衬比它窄时面板的一角会被切掉。
+       桌面上 env() 恒为 0，取值与内衬槽完全一致。安全区只有物理方向的四个名字，
+       行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
+    padding-block-start: max(var(--xh-dialog-positioner-padding, var(--xh-space-4)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-dialog-positioner-padding, var(--xh-space-4)), env(safe-area-inset-bottom));
+    padding-inline: max(
+      var(--xh-dialog-positioner-padding, var(--xh-space-4)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+  }
+
+  .xh-scope-dialog[data-part='content'] {
+    /* 作者塞进面板里的图标按控件档取；语气徽记与关闭钮另有各自的尺 */
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-md));
+
+    /* 尺寸档只换这一个私有槽。它声明在 content 而不是别处：dialog 的解剖里没有 root，
+       positioner 又不是必需部件，content 才是这层浮层恒在的最外层，且它会被 portal 到 body，
+       选择器只认得它自己身上那一份 data-size。 */
+    --xh-_dialog-max-w: var(--xh-overlay-sheet-w-md);
+
+    /* 头部带：标题首行与角上的关闭钮都落在这条带的中线上。分三段时它就是 header，
+       不分三段时它是面板顶上那一截——两种写法的标题行与叉落在同一处。
+       带的上沿就是面板内沿（安全区由 positioner 让出），与抽屉同一组槽，抽屉在这里补安全区 */
+    --xh-_dialog-header-top: var(--xh-space-0);
+    /* 关闭钮行向让出的安全区：对话框不贴屏幕边（安全区同样由 positioner 让出），与抽屉同一组槽，抽屉在这里补安全区 */
+    --xh-_dialog-safe-inline: var(--xh-space-0);
+    --xh-_dialog-header-h: var(--xh-overlay-header-h);
+    /* 标题首行在带里居中要让出的上内衬：带高减标题行高再对半 */
+    --xh-_dialog-header-pt: calc((var(--xh-_dialog-header-h) - var(--xh-text-heading-3-size) * var(--xh-leading-normal)) / 2);
+    /* 分三段时头的下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高 */
+    --xh-_dialog-header-pb: calc(var(--xh-_dialog-header-pt) - var(--xh-stroke-thin));
+
+    /* positioner 不吃指针，面板自身恢复交互。 */
+    pointer-events: auto;
+
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: var(--xh-dialog-max-w, var(--xh-_dialog-max-w));
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-dialog-gap, var(--xh-stack-gap-md));
+    /* 不分三段时内衬由面板一层给：上沿让标题行落在头部带中线，横向与三段同一档 */
+    padding-block-start: var(--xh-dialog-py, var(--xh-_dialog-header-pt));
+    padding-block-end: var(--xh-dialog-py, var(--xh-overlay-sheet-body-py));
+    padding-inline: var(--xh-dialog-px, var(--xh-overlay-sheet-px));
+    border: var(--xh-stroke-thin) solid var(--xh-dialog-border, var(--xh-material-elevated-border));
+    border-radius: var(--xh-dialog-radius, var(--xh-shape-overlay));
+    /* sheet 实体面：1px 描边 + 不透明底 + 单层投影，不叠渐变与顶光 */
+    background: var(--xh-dialog-bg, var(--xh-material-elevated-bg));
+    color: var(--xh-dialog-fg, var(--xh-material-elevated-fg));
+    box-shadow: var(--xh-dialog-shadow, var(--xh-material-elevated-shadow));
+    -webkit-backdrop-filter: var(--xh-dialog-content-backdrop-filter, var(--xh-dialog-backdrop-filter, var(--xh-material-elevated-backdrop)));
+    backdrop-filter: var(--xh-dialog-content-backdrop-filter, var(--xh-dialog-backdrop-filter, var(--xh-material-elevated-backdrop)));
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 drawer 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display: flex 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
+     读到才申领租约、等 animationend 才卸载；一旦 display: none，元素不生成盒子、
+     动画根本不启动，探测器直接放弃租约，退场动画一帧都播不出来。
+     真正的收起由适配器兜住：Vue 卸载整棵，WC 写内联 style.display。
+     其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
+
+  /* —— 尺寸 —— */
+  /* 只有最大宽度分档；中间档不写规则，缺省即中档。
+     宽度上限之外的一切（内边距、字号、圆角）都不随档位动：弹层的语气归里面的内容表达。 */
+  .xh-scope-dialog[data-part='content'][data-size='sm'] {
+    --xh-_dialog-max-w: var(--xh-overlay-sheet-w-sm);
+  }
+
+  .xh-scope-dialog[data-part='content'][data-size='lg'] {
+    --xh-_dialog-max-w: var(--xh-overlay-sheet-w-lg);
+  }
+
+  .xh-scope-dialog[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  .xh-scope-dialog[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-sheet-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-dialog[data-part='content'][data-state='closed'] {
+    animation: xh-sheet-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* —— 拖动 ——
+     位移由连接层写进两个私有槽，是屏幕坐标：跟着指针与方向键走，RTL 下不翻。
+     进出场关键帧占着 translate 与 scale 两个独立属性，位移只能走 transform：它排在独立属性之后合成，
+     与进出场叠在一起。写进 translate 的话，拖过的面板一收起就先被关键帧拽回居中再退场。
+     位移跟手，不挂过渡 */
+  .xh-scope-dialog[data-part='content'][data-draggable] {
+    transform: translate(var(--xh-_dialog-drag-x, 0px), var(--xh-_dialog-drag-y, 0px));
+  }
+
+  /* 跟手期间才备合成层；拖动中不选中文字 */
+  .xh-scope-dialog[data-part='content'][data-dragging] {
+    will-change: transform;
+    user-select: none;
+  }
+
+  /* 标题栏是拖动区（没写 header 时是标题）：指针按下即跟手，触屏不让浏览器抢走这段手势 */
+  .xh-scope-dialog[data-part='header'][data-draggable],
+  .xh-scope-dialog[data-part='title'][data-draggable] {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .xh-scope-dialog[data-part='content'][data-dragging] .xh-scope-dialog[data-part='header'],
+  .xh-scope-dialog[data-part='content'][data-dragging] .xh-scope-dialog[data-part='title'] {
+    cursor: grabbing;
+  }
+
+  /* 拖动把手：一块透明的命中区，给键盘一个挪动面板的落脚点。放在标题栏里时铺满标题栏，
+     焦点环沿标题栏画；单独摆放时是一条满宽的细条 */
+  .xh-scope-dialog[data-part='drag-trigger'] {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--xh-dialog-drag-trigger-min-h, var(--xh-space-6));
+    border: 0;
+    border-radius: var(--xh-dialog-drag-trigger-radius, var(--xh-shape-control));
+    padding: 0;
+    background: transparent;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .xh-scope-dialog[data-part='header']:has(> .xh-scope-dialog[data-part='drag-trigger']) {
+    position: relative;
+  }
+
+  .xh-scope-dialog[data-part='header'] > .xh-scope-dialog[data-part='drag-trigger'] {
+    position: absolute;
+    inset: 0;
+    min-block-size: 0;
+  }
+
+  .xh-scope-dialog[data-part='drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  .xh-scope-dialog[data-part='drag-trigger'][data-disabled] {
+    cursor: default;
+  }
+
+  .xh-scope-dialog[data-part='drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* —— 面板三段 —— */
+  /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
+     与抽屉、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
+     分三段时内衬由三段各自给，面板一层归零：头下、尾上的分隔线才能贴着面板两侧的边。
+     安全区由 positioner 让出，面板自己不碰视口边，三段不用各算一遍。
+     写了正文段的这一档同时封顶：不封顶正文永远没有可滚的余量，滚动条出不来。 */
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='body']) {
+    max-block-size: 100%;
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  /* 头段：标题与说明纵向堆叠；不参与压缩，正文再长也压不扁它 */
+  .xh-scope-dialog[data-part='header'] {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-dialog-header-gap, var(--xh-stack-gap-sm));
+    padding-block-end: var(--xh-dialog-header-pb, var(--xh-space-2));
+  }
+
+  /* 三段结构的头：一条 48px 的头部带，标题首行落在带的中线上（说明在下面接着排，带随之长高），
+     横向内衬 20px；下沿一条 1px 的内部分隔线走 sheet 分隔令牌，贴着面板两侧的边。
+     下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高。无 body 的轻量对话框不会凭空多一条线 */
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='body'])
+    .xh-scope-dialog[data-part='header'] {
+    justify-content: center;
+    min-block-size: var(--xh-_dialog-header-h);
+    padding-block-start: var(--xh-dialog-header-pt, var(--xh-_dialog-header-pt));
+    padding-block-end: var(--xh-dialog-header-pb, var(--xh-_dialog-header-pb));
+    padding-inline: var(--xh-dialog-header-px, var(--xh-overlay-sheet-px));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
+  }
+
+  /* 语气徽记：圆底与字形两层。圆底是这个节点自己（底色、直径、圆角），字形走下面那条
+     :empty::before；作者往里塞了节点，兜底那几条即不命中，整枚换成他的图形。
+     底与前景取语气层派生好的槽，不在这儿另兑一遍——兑法差一档，字形压上去的对比度
+     就跟着差一档。节点自己带 data-tone 时那一族的槽就声明在它身上。 */
+  .xh-scope-dialog[data-part='indicator'] {
+    /* 圆底里的图形四边各收一个 space-1，不顶到圆边上；
+       这把尺同时给作者塞进来的图标，换成 XhIcon 也不会撑破圆底 */
+    --xh-icon-size: var(--xh-dialog-indicator-mark-size, calc(var(--xh-dialog-indicator-size, var(--xh-glyph-size-md)) - 2 * var(--xh-space-1)));
+
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--xh-dialog-indicator-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-dialog-indicator-size, var(--xh-glyph-size-md));
+    border-radius: var(--xh-dialog-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-dialog-indicator-bg, var(--xh-_tone-subtle, var(--xh-bg-muted)));
+    color: var(--xh-dialog-indicator-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+  }
+
+  .xh-scope-dialog[data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+  }
+
+  /* 画哪枚字形跟着语气走，与命令式服务弹出来的那一枚同一套映射 */
+  .xh-scope-dialog[data-part='indicator'][data-tone='success']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  .xh-scope-dialog[data-part='indicator'][data-tone='warning']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  .xh-scope-dialog[data-part='indicator'][data-tone='danger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* 正文段：面板里唯一会滚的一段。最小高度归零，
+     否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
+     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走。
+     内衬纵 24 横 20 */
+  .xh-scope-dialog[data-part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding-block: var(--xh-dialog-body-py, var(--xh-overlay-sheet-body-py));
+    padding-inline: var(--xh-dialog-body-px, var(--xh-overlay-sheet-px));
+  }
+
+  /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
+     滚动条出现与消失时不推动文字。带 data-xh-scrollbar 的容器已经把原生条藏成零宽，排除掉 */
+  .xh-scope-dialog[data-part='body']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  /* 尾段：动作按钮排一行靠尾；同样不参与压缩 */
+  .xh-scope-dialog[data-part='footer'] {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--xh-dialog-footer-gap, var(--xh-control-gap-md));
+    padding-block-start: var(--xh-dialog-footer-pt, var(--xh-space-2));
+  }
+
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='footer'])
+    .xh-scope-dialog[data-part='footer'] {
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
+  }
+
+  /* 三段结构的尾：纵 16 横 20，上沿的分隔线随尾段铺满面板宽 */
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='body'])
+    .xh-scope-dialog[data-part='footer'] {
+    padding-block: var(--xh-dialog-footer-py, var(--xh-overlay-sheet-footer-py));
+    padding-inline: var(--xh-dialog-footer-px, var(--xh-overlay-sheet-px));
+  }
+
+  /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-dialog[data-part='header'][hidden],
+  .xh-scope-dialog[data-part='body'][hidden],
+  .xh-scope-dialog[data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 面板标题：页面级面板标题档、正文色；行高钉在 normal，头部带按它算标题行居中 */
+  .xh-scope-dialog[data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-dialog-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-dialog-title-font-weight, var(--xh-text-heading-3-weight));
+    line-height: var(--xh-leading-normal);
+    color: var(--xh-dialog-title-fg, var(--xh-fg-default));
+  }
+
+  /* 说明文字走说明档：13px + fg-muted */
+  .xh-scope-dialog[data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-dialog-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-dialog-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出右上角那块，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='close-trigger'])
+    .xh-scope-dialog[data-part='title'] {
+    padding-inline-end: calc(var(--xh-dialog-close-size, var(--xh-control-h-sm)) + var(--xh-space-4));
+  }
+
+  /*
+   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、按压换底与粗指针命中区
+   * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
+   * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
+   * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面，缺省仍是透明底与悬停字色；
+   * 静息前景取 muted 字色，悬停 / 按下回到 fg-default。
+   * 叉取 12px（--xh-glyph-size-xs），比钮的随档字形低一档；钮距右 16px，竖向落在头部带的中线上。
+   */
+  .xh-scope-dialog[data-part='close-trigger'] {
+    --xh-action-visual-size: var(--xh-dialog-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-dialog-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-dialog-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-dialog-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-dialog-close-bg-focus, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-dialog-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-dialog-close-fg-focus, var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-focus-visible)));
+    /* 作者塞进按钮的图标与皮肤画的兜底叉同一把尺 */
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-xs));
+
+    position: absolute;
+    /* 钮的视觉盒在头部带里竖向居中：按钮自己的边长从带高里扣掉再对半 */
+    inset-block-start: calc(var(--xh-_dialog-header-top) + (var(--xh-_dialog-header-h) - var(--xh-dialog-close-size, var(--xh-_action-profile-visual-size))) / 2);
+    inset-inline-end: calc(var(--xh-_dialog-safe-inline) + var(--xh-space-4));
+  }
+
+  .xh-scope-dialog[data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-dialog[data-part='close-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-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-dialog[data-part='positioner'][hidden],
+  .xh-scope-dialog[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 光学效果只在常规档存在：高对比、显式/系统减少透明度与强制色均把 blur 的遮罩原位实体化。 */
+  :where([data-contrast='more']) .xh-scope-dialog[data-part='backdrop'][data-variant='blur'],
+  :where([data-transparency='reduce']) .xh-scope-dialog[data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  @media (prefers-contrast: more), (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    .xh-scope-dialog[data-part='backdrop'][data-variant='blur'] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-dialog[data-part='backdrop'],
+    .xh-scope-dialog[data-part='positioner'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-dialog[data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-dialog[data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-dialog[data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-dialog[data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}