@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/family/field-chrome.css

@@ -0,0 +1,296 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/field-chrome-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-field-chrome] {
+    display: inline-flex;
+    box-sizing: border-box;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--xh-field-control-gap, var(--xh-_field-size-gap));
+    min-inline-size: min(var(--xh-field-control-min-inline-size, var(--xh-control-min-w)), 100%);
+    block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-inline: var(--xh-field-control-padding-inline, var(--xh-_field-size-padding-inline));
+    padding-block: 0;
+    --xh-icon-size: var(--xh-field-glyph-size, var(--xh-_field-size-glyph-size));
+    --xh-_field-variant-bg-rest: var(--xh-bg-field);
+    --xh-_field-variant-border-rest: var(--xh-border-control);
+    --xh-_field-variant-bg-hover: var(--xh-bg-field);
+    --xh-_field-variant-border-hover: var(--xh-border-strong);
+    --xh-_field-variant-bg-focus: var(--xh-bg-surface);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+    border: var(--xh-stroke-thin) solid var(--xh-field-border-rest, var(--xh-_field-variant-border-rest));
+    border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
+    background-color: var(--xh-field-bg-rest, var(--xh-_field-variant-bg-rest));
+    color: var(--xh-field-fg-rest, var(--xh-fg-default));
+    box-shadow: var(--xh-field-shadow-rest, none);
+    cursor: var(--xh-field-cursor-rest, text);
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-xh-field-chrome][data-variant='outline'] {
+    --xh-_field-variant-bg-rest: var(--xh-bg-field);
+    --xh-_field-variant-border-rest: var(--xh-border-control);
+    --xh-_field-variant-bg-hover: var(--xh-bg-field);
+    --xh-_field-variant-border-hover: var(--xh-border-strong);
+    --xh-_field-variant-bg-focus: var(--xh-bg-surface);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-variant='subtle'] {
+    --xh-_field-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_field-variant-border-rest: transparent;
+    --xh-_field-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-bg-focus: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-variant='ghost'] {
+    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-border-rest: transparent;
+    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-bg-focus: transparent;
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='sm'] {
+    --xh-_field-size-control-height: var(--xh-control-h-sm);
+    --xh-_field-size-padding-inline: var(--xh-control-px-sm);
+    --xh-_field-size-gap: var(--xh-control-gap-sm);
+    --xh-_field-size-font-size: var(--xh-control-font-sm);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-sm);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='md'] {
+    --xh-_field-size-control-height: var(--xh-control-h-md);
+    --xh-_field-size-padding-inline: var(--xh-control-px-md);
+    --xh-_field-size-gap: var(--xh-control-gap-md);
+    --xh-_field-size-font-size: var(--xh-control-font-md);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-md);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='lg'] {
+    --xh-_field-size-control-height: var(--xh-control-h-lg);
+    --xh-_field-size-padding-inline: var(--xh-control-px-lg);
+    --xh-_field-size-gap: var(--xh-control-gap-lg);
+    --xh-_field-size-font-size: var(--xh-control-font-lg);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-lg);
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='single-line'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='single-line']) {
+    align-items: center;
+    flex-wrap: nowrap;
+    block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: 0;
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='textarea'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='textarea']) {
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    block-size: auto;
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: 0;
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='multi-tag'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='multi-tag']) {
+    align-items: center;
+    flex-wrap: wrap;
+    block-size: auto;
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: var(--xh-space-0_5);
+  }
+
+  [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):not(:focus-within):hover {
+    background-color: var(--xh-field-bg-hover, var(--xh-_field-variant-bg-hover));
+    border-color: var(--xh-field-border-hover, var(--xh-_field-variant-border-hover));
+  }
+
+  [data-xh-field-chrome]:focus-within:not([data-disabled]) {
+    background-color: var(--xh-field-bg-focus, var(--xh-_field-variant-bg-focus));
+    border-color: var(--xh-field-border-focus, var(--xh-_field-variant-border-focus));
+    outline: none;
+  }
+
+  [data-xh-field-chrome][data-readonly] {
+    background-color: var(--xh-field-bg-read-only, var(--xh-_field-variant-bg-read-only));
+    cursor: var(--xh-field-cursor-read-only, default);
+  }
+
+  [data-xh-field-chrome][data-loading] {
+    color: var(--xh-field-fg-loading, var(--xh-fg-muted));
+    cursor: var(--xh-field-cursor-loading, progress);
+  }
+
+  [data-xh-field-chrome][data-invalid] {
+    background-color: var(--xh-field-bg-invalid, var(--xh-_field-variant-bg-invalid));
+    border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
+  }
+
+  [data-xh-field-chrome][data-disabled] {
+    background-color: var(--xh-field-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    color: var(--xh-field-fg-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-field-border-disabled, var(--xh-_field-variant-border-disabled));
+    cursor: var(--xh-field-cursor-disabled, not-allowed);
+  }
+
+  [data-xh-field-chrome]:not([data-variant='ghost']):not(:focus-within) {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+  }
+
+  [data-xh-field-affix] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--xh-field-affix-fg, var(--xh-fg-muted));
+    font-size: var(--xh-field-affix-font-size, var(--xh-_field-size-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  [data-xh-field-affix][data-disabled] {
+    color: var(--xh-field-affix-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  [data-xh-field-input] {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    block-size: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    appearance: none;
+    background: transparent;
+    box-shadow: none;
+    color: var(--xh-field-input-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-field-input-font-size, var(--xh-_field-size-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: start;
+  }
+
+  [data-xh-field-chrome] [data-xh-field-input]:focus-visible {
+    outline: none;
+  }
+
+  [data-xh-field-chrome] [data-xh-action-profile='field-inset']:focus-visible {
+    outline: none;
+  }
+
+  [data-xh-field-input][data-disabled] {
+    color: var(--xh-field-input-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  [data-xh-field-input]::placeholder {
+    color: var(--xh-field-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  [data-xh-field-input][data-xh-field-layout='textarea'] {
+    block-size: auto;
+    max-inline-size: 100%;
+    padding-block: var(--xh-field-textarea-padding-block, var(--xh-space-1));
+    overflow: auto;
+    resize: vertical;
+  }
+
+  [data-xh-field-input][data-xh-field-layout='textarea'][data-xh-field-auto-size] {
+    overflow: hidden;
+    resize: none;
+  }
+
+  [data-xh-field-input]:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-field-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-field-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-xh-field-input]:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-field-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-field-autofill-fg, var(--xh-fg-default));
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-field-chrome] {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: ButtonText;
+      box-shadow: none;
+      opacity: 1;
+    }
+
+    [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):not(:focus-within):hover {
+      border-color: Highlight;
+    }
+
+    [data-xh-field-chrome]:focus-within:not([data-disabled]) {
+      border-color: Highlight;
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
+    [data-xh-field-chrome][data-readonly] {
+      border-color: GrayText;
+    }
+
+    [data-xh-field-chrome][data-loading] {
+      border-style: dashed;
+    }
+
+    [data-xh-field-chrome][data-invalid] {
+      border-color: Highlight;
+    }
+
+    [data-xh-field-chrome][data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    [data-xh-field-input]::placeholder {
+      color: GrayText;
+    }
+
+    [data-xh-field-input]:autofill {
+      box-shadow: inset 0 0 0 100vmax Canvas;
+      -webkit-text-fill-color: CanvasText;
+    }
+
+    [data-xh-field-input]:-webkit-autofill {
+      box-shadow: inset 0 0 0 100vmax Canvas;
+      -webkit-text-fill-color: CanvasText;
+    }
+  }
+}

package/dist/family/loading-ring.css

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 加载环家族配方：「这里正在等」的那枚圆环，与 Spinner 环档同一副画法——一段 270° 的弧，
+ * 不画轨道，起始边留空，绕中心匀速转，缺口转起来就看得出方向。
+ *
+ * 连接层在承载者上投影 data-xh-loading-ring，并用共享的 data-loading 说此刻在不在等。
+ * 环画在承载者的 ::before 上：伪元素有没有、多大、摆在哪由皮肤决定（皮肤写 content 与尺寸），
+ * 配方只负责把它画成环、随 data-loading 淡入淡出并转停。收起时环停在当前角度淡出，
+ * 与皮肤里接替它的那枚字形交叉淡变；不在等时不转。
+ *
+ * 环粗取 --xh-stroke-thick；弧色走私有槽 --xh-_loading-ring-fg，皮肤按自己的语气与公开槽给，
+ * 没给时取品牌色（与 Spinner 同一枚）；压在动作钮上的那一档没给时随钮的字色。转一圈的时长走私有槽 --xh-_loading-ring-duration，
+ * 皮肤把自己的公开时长槽接进来，没给时取 --xh-motion-loop-spin。
+ *
+ * 进行中的动作钮投影 data-xh-loading-ring="overlay"：环居中压在钮上、不占排布，钮宽不变，直径取钮的图标档。
+ * 进入在途要等一个 micro 才起淡，不到一个 micro 就结束的短请求什么都不闪；退出在途不等，按 micro 淡出。
+ * 钮里原有的内容由皮肤按同一段等待淡出留位，与环交叉。
+ *
+ * 转圈与淡变的关键帧与时长走 motion.css：引入本配方的皮肤同时 @import 它；家族文件之间不互相引入，
+ * 全量入口里每份家族只内联一次。
+ */
+@layer xihan.components {
+  [data-xh-loading-ring]::before {
+    --xh-_loading-ring-color: var(--xh-_loading-ring-fg, var(--xh-fg-brand));
+
+    /* 环粗算进直径，换厚度不会把环撑大 */
+    box-sizing: border-box;
+    border: var(--xh-stroke-thick) solid var(--xh-_loading-ring-color);
+    border-block-start-color: transparent;
+    border-radius: var(--xh-shape-circle);
+    /* 承载者的这枚伪元素在别的状态下可能画着字形：环不带底、不带遮罩 */
+    background: none;
+    -webkit-mask: none;
+    mask: none;
+    opacity: 0;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 不在等时停在当前角度，淡出途中不先跳回零度 */
+    animation: xh-spin var(--xh-_loading-ring-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite paused;
+  }
+
+  [data-xh-loading-ring][data-loading]::before {
+    opacity: 1;
+    animation-play-state: running;
+  }
+
+  /* 压在动作钮上的环：钮是定位盒（Action Control 给 position: relative），环在钮正中、不进排布；
+     弧色没给时随钮的字色（实心钮上是钮面的前景色，不是品牌色） */
+  [data-xh-loading-ring='overlay']::before {
+    --xh-_loading-ring-color: var(--xh-_loading-ring-fg, currentColor);
+
+    content: '';
+    position: absolute;
+    inset: 0;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    margin: auto;
+    pointer-events: none;
+  }
+
+  /* 只在进入在途时等：退出那一刻撤掉这一档，淡出不延迟 */
+  [data-xh-loading-ring='overlay'][data-loading]::before {
+    transition-delay: var(--xh-motion-duration-micro);
+  }
+
+  /* 减弱动效与打印：环停下并整圈换成点线，静止的形状仍读得出「还没好」；淡入淡出照常。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-xh-loading-ring]::before {
+      border-style: dotted;
+      border-color: var(--xh-_loading-ring-color);
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-xh-loading-ring]::before {
+    border-style: dotted;
+    border-color: var(--xh-_loading-ring-color);
+    animation: none;
+  }
+
+  @media print {
+    [data-xh-loading-ring]::before {
+      border-style: dotted;
+      border-color: var(--xh-_loading-ring-color);
+      animation: none;
+    }
+  }
+
+  /* 强制色：弧取高亮色，缺口取画布色（不画轨道，缺口就是转向的读法）；
+     退出强制换色，系统色直接写，缺口不被换成别的颜色 */
+  @media (forced-colors: active) {
+    [data-xh-loading-ring]::before {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      border-block-start-color: Canvas;
+    }
+  }
+}

package/dist/family/material.css

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 材质家族配方：frosted 面，以及它在 liquid 档的替身。
+ *
+ * 连接层在部件上投影 data-xh-material="frosted"：锚定瞬态浮层的内容面（菜单、选择、气泡、浮动面板……）
+ * 与浮在内容之上的圆钮（回到顶部、浮动钮、轮播控制、回到底部）。配方在部件上声明一组私有槽
+ * --xh-_material-*，一种材质一套取值：底、交互阶梯（悬停 / 按下 / 键盘聚焦面）、前景、描边、投影、
+ * 背景滤镜与 1px 内侧顶光。
+ *
+ *   面      配方直接画描边、背景（1px 顶光叠在底色之上，随面本身不随内容滚动）、前景、投影与背景滤镜，
+ *           读桥接槽 --xh-frosted-*；皮肤只把使用者槽接进来：--xh-frosted-bg: var(使用者槽, var(--xh-_material-bg))
+ *   圆钮    面由 Action Control 家族画，皮肤把 --xh-action-* 桥接槽指向这组私有槽；配方只补背景滤镜
+ *
+ * data-material="liquid" 下，同时投影了 data-xh-liquid 的部件把这组私有槽换成液态面的取值（液态层
+ * liquid.css 在同一部件上声明 --xh-_liquid-*），皮肤不必为液态档再写一遍；可按的圆钮挂上按住形变。
+ * 减少透明、高对比、强制色与打印由材质令牌在令牌层降级，这里不另写。
+ */
+@layer xihan.components {
+  [data-xh-material='frosted'] {
+    --xh-_material-bg: var(--xh-material-frosted-bg);
+    /* 圆钮的交互阶梯：磨砂面半透明，悬停 / 按下换成不透明的淡底一档、二档，不叠在透景上发灰 */
+    --xh-_material-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque));
+    --xh-_material-bg-pressed: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover-opaque));
+    --xh-_material-bg-focus: var(--xh-material-frosted-focus-surface);
+    --xh-_material-fg: var(--xh-material-frosted-fg);
+    --xh-_material-border: var(--xh-material-frosted-border);
+    --xh-_material-shadow: var(--xh-material-frosted-shadow);
+    --xh-_material-backdrop: var(--xh-material-frosted-backdrop);
+    --xh-_material-highlight: var(--xh-material-frosted-highlight);
+
+    -webkit-backdrop-filter: var(--xh-frosted-backdrop, var(--xh-_material-backdrop));
+    backdrop-filter: var(--xh-frosted-backdrop, var(--xh-_material-backdrop));
+  }
+
+  /* 面：四件套加 1px 顶光。顶光是背景的最上一层，只占内侧一像素、画在面本身上，滚动的内容面也钉在顶上；
+     高对比与强制色下令牌把它归零，四边描边照常完整 */
+  [data-xh-material='frosted']:not([data-xh-action-control]) {
+    border: var(--xh-stroke-thin) solid var(--xh-frosted-border, var(--xh-_material-border));
+    background:
+      linear-gradient(
+        to bottom,
+        var(--xh-frosted-highlight, var(--xh-_material-highlight)) 0 var(--xh-stroke-thin),
+        transparent var(--xh-stroke-thin)
+      ),
+      var(--xh-frosted-bg, var(--xh-_material-bg));
+    color: var(--xh-frosted-fg, var(--xh-_material-fg));
+    box-shadow: var(--xh-frosted-shadow, var(--xh-_material-shadow));
+  }
+
+  /* liquid 档：浮在内容之上的导航层部件换成液态面。同一组私有槽换值，皮肤的桥接照旧；面内不加顶光，
+     亮边已由液态层画在朝光源的一侧 */
+  :where([data-material='liquid']) [data-xh-material][data-xh-liquid] {
+    --xh-_material-bg: var(--xh-_liquid-bg);
+    --xh-_material-bg-hover: var(--xh-_liquid-bg-hover);
+    --xh-_material-bg-pressed: var(--xh-_liquid-bg-pressed);
+    --xh-_material-bg-focus: var(--xh-material-liquid-focus-surface);
+    --xh-_material-fg: var(--xh-material-liquid-fg);
+    --xh-_material-border: var(--xh-material-liquid-border);
+    --xh-_material-shadow: var(--xh-_liquid-shadow);
+    --xh-_material-backdrop: var(--xh-material-liquid-backdrop);
+    --xh-_material-highlight: transparent;
+  }
+
+  /* 按住液态圆钮时的黏滞形变由液态面逐帧写进来，松手弹回。只挂在可按的面上 */
+  :where([data-material='liquid']) [data-xh-action-control][data-xh-material][data-xh-liquid] {
+    transform: var(--xh-_liquid-deform);
+  }
+}

package/dist/family/menu-choice.css

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* Menu / ContextMenu / Menubar 的 checkbox 与 radio 共用标记语言。 */
+
+@layer xihan.components {
+  [data-xh-menu-choice-indicator] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-xh-menu-choice-indicator][data-state='checked'] {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [data-xh-menu-choice-indicator='checkbox']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-icon-size, var(--xh-control-indicator-size));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  [data-xh-menu-choice-indicator='radio']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-space-2);
+    block-size: var(--xh-space-2);
+    border-radius: var(--xh-shape-circle);
+    background-color: currentColor;
+  }
+
+  /* 强制色：勾与圆点都是伪元素上的一块底色，这一档里会被换成 Canvas 而消失；退出强制换色、直接写系统前景。
+     标记坐在菜单条目里，按下与没被高亮时的悬停，家族把条目涂成 Highlight，标记跟着换 HighlightText；禁用取 GrayText */
+  @media (forced-colors: active) {
+    [data-xh-menu-choice-indicator]:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))
+      [data-xh-menu-choice-indicator]:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-xh-menu-choice-indicator][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}