@xihan-ui/styles 1.0.0 → 2.0.0

package/css/composer.css

@@ -1,134 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='composer'] {
-    --xh-composer-skin: 1;
-  }
-
-  /* 边框画在 root 上，内部 textarea 无边框；align-items: flex-end 让按钮随输入框长高贴着底边 */
-  [data-scope='composer'][data-part='root'] {
-    /* 输入与发送按钮共用的控件高度 */
-    --xh-_composer-control-h: var(--xh-composer-submit-h, var(--xh-control-h-md));
-
-    display: flex;
-    align-items: flex-end;
-    gap: var(--xh-composer-gap, var(--xh-control-gap-md));
-    /* 整框的内衬走控件内边距尺的小档，密度收紧时随之收窄 */
-    padding: var(--xh-composer-p, var(--xh-control-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-composer-border, var(--xh-border-control));
-    border-radius: var(--xh-composer-radius, var(--xh-shape-surface));
-    background: var(--xh-composer-bg, var(--xh-bg-surface));
-  }
-
-  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
-  [data-scope='composer'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* 焦点环画在整个框上；用 focus-within 使焦点落在发送按钮时同样点亮 */
-  [data-scope='composer'][data-part='root']:focus-within {
-    border-color: var(--xh-composer-root-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 禁用态只换光标与底色；文字由 textarea 与按钮各自走 fg-disabled，整框不再压 opacity，两者叠起来会压到读不出 */
-  [data-scope='composer'][data-part='root'][data-disabled] {
-    cursor: not-allowed;
-    background: var(--xh-composer-bg-disabled, var(--xh-bg-subtle));
-  }
-
-  /* 无边框透明底，融进 root 的框里；min-inline-size: 0 防止长内容把弹性子项撑出容器 */
-  [data-scope='composer'][data-part='input'] {
-    flex: 1;
-    min-inline-size: 0;
-    /* 上下留白把单行文本盒撑到控件高度，文字中线与按钮中线对齐 */
-    padding-block: calc((var(--xh-_composer-control-h) - 1lh) / 2);
-    padding-inline: 0;
-    border: 0;
-    background: transparent;
-    color: var(--xh-composer-input-fg, var(--xh-fg-default));
-    /* 表单控件默认不继承页面字族，显式继承 */
-    font-family: inherit;
-    font-size: var(--xh-composer-input-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-leading-normal);
-    /* 高度由 field-sizing 随内容变，不支持的引擎退化为 rows 定下的固定行数；
-       配套禁用 resize，避免拖拽写死的高度盖掉它。 */
-    field-sizing: content;
-    resize: none;
-  }
-
-  /* 焦点环已画在 root 上，这里去掉自身的环 */
-  [data-scope='composer'][data-part='input']:focus-visible {
-    outline: none;
-  }
-
-  [data-scope='composer'][data-part='input']::placeholder {
-    color: var(--xh-composer-placeholder-fg, var(--xh-fg-subtle));
-  }
-
-  /* textarea 是单体表单控件，禁用走原生 disabled */
-  [data-scope='composer'][data-part='input']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  /* 私有变量槽位，send 与 stop 两个模式只换这几个配色值 */
-  [data-scope='composer'][data-part='submit-trigger'] {
-    --xh-_bg: var(--xh-composer-send-bg, var(--xh-bg-brand));
-    --xh-_bg-hover: var(--xh-composer-send-bg-hover, var(--xh-bg-brand-hover));
-    --xh-_bg-active: var(--xh-composer-send-bg-active, var(--xh-bg-brand-active));
-    --xh-_fg: var(--xh-composer-send-fg, var(--xh-fg-on-brand));
-
-    display: inline-flex;
-    /* 按钮不参与弹性伸缩 */
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    min-inline-size: var(--xh-_composer-control-h);
-    block-size: var(--xh-_composer-control-h);
-    padding-inline: var(--xh-composer-submit-px, var(--xh-control-px-md));
-    border: 0;
-    border-radius: var(--xh-composer-submit-radius, var(--xh-shape-control));
-    background: var(--xh-_bg);
-    color: var(--xh-_fg);
-    font-family: inherit;
-    font-size: var(--xh-composer-submit-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-composer-submit-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='composer'][data-part='submit-trigger'][hidden] {
-    display: none;
-  }
-
-  [data-scope='composer'][data-part='submit-trigger']:hover:not(:disabled) {
-    background: var(--xh-_bg-hover);
-  }
-
-  [data-scope='composer'][data-part='submit-trigger']:active:not(:disabled) {
-    background: var(--xh-_bg-active);
-  }
-
-  [data-scope='composer'][data-part='submit-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 停止模式只换配色，从主色降到中性；文案与可访问名由连接层切换 */
-  [data-scope='composer'][data-part='submit-trigger'][data-mode='stop'] {
-    --xh-_bg: var(--xh-composer-stop-bg, var(--xh-bg-subtle));
-    --xh-_bg-hover: var(--xh-composer-stop-bg-hover, var(--xh-bg-subtle-hover));
-    --xh-_bg-active: var(--xh-composer-stop-bg-active, var(--xh-bg-subtle-active));
-    --xh-_fg: var(--xh-composer-stop-fg, var(--xh-fg-default));
-  }
-
-  /* 禁用走原生 disabled，输入为空时按钮转灰但不收起 */
-  [data-scope='composer'][data-part='submit-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-}

package/css/countdown.css

@@ -1,26 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='countdown'] {
-    --xh-countdown-skin: 1;
-  }
-
-  [data-scope='countdown'][data-part='root'] {
-    display: inline-block;
-    color: var(--xh-countdown-fg, var(--xh-fg-default));
-    /* 不自带字号：倒计时多半嵌在一句话里或摆在别人的数值槽里，跟着上下文走 */
-    /* 等宽数字：逐位宽度一致，秒数换位时冒号不会左右挪动 */
-    font-variant-numeric: tabular-nums;
-    line-height: var(--xh-leading-tight);
-  }
-
-  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
-  [data-scope='countdown'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* 到点之后这串 00:00:00 不再是活的信息，退一档；它与"暂停在 30 秒上"是两回事，
-     后者仍然是要盯着看的数，所以退档只认 data-finished，不认 data-state */
-  [data-scope='countdown'][data-part='root'][data-finished] {
-    color: var(--xh-countdown-finished-fg, var(--xh-fg-muted));
-  }
-}

package/css/dynamic-input.css

@@ -1,220 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='dynamic-input'] {
-    --xh-dynamic-input-skin: 1;
-  }
-
-  /* 一行一条，纵向堆叠；新增把手跟在最后一行下面 */
-  [data-scope='dynamic-input'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-dynamic-input-icon-size, var(--xh-glyph-size-text));
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--xh-dynamic-input-gap, var(--xh-space-2));
-  }
-
-  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
-  [data-scope='dynamic-input'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* 内容在左、把手在右，把手那一列不随内容伸缩 */
-  [data-scope='dynamic-input'][data-part='item'] {
-    display: flex;
-    align-items: center;
-    gap: var(--xh-dynamic-input-item-gap, var(--xh-space-2));
-    padding: var(--xh-dynamic-input-item-padding, var(--xh-space-0));
-    border-radius: var(--xh-dynamic-input-item-radius, var(--xh-shape-surface));
-  }
-
-  [data-scope='dynamic-input'][data-part='item'][hidden] {
-    display: none;
-  }
-
-  /* 行里放什么控件归作者，这里只给它一条能撑开也能收窄的轨道。
-     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破 */
-  [data-scope='dynamic-input'][data-part='item-content'] {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: var(--xh-dynamic-input-content-gap, var(--xh-space-2));
-    min-inline-size: 0;
-  }
-
-  [data-scope='dynamic-input'][data-part='item-action'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
-  }
-
-  /* —— 行内三个把手 —— */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger'],
-  [data-scope='dynamic-input'][data-part='move-up-trigger'],
-  [data-scope='dynamic-input'][data-part='move-down-trigger'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 0;
-    background: var(--xh-dynamic-input-trigger-bg, transparent);
-    color: var(--xh-dynamic-input-trigger-fg, var(--xh-fg-muted));
-    font-family: inherit;
-    font-size: var(--xh-dynamic-input-trigger-font-size, var(--xh-text-secondary-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  /* 行级删除把手：命中区取行内动作按钮尺寸，圆角取控件圆角 */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger'] {
-    inline-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
-    block-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
-    border-radius: var(--xh-dynamic-input-trigger-radius, var(--xh-shape-control));
-  }
-
-  [data-scope='dynamic-input'][data-part='move-up-trigger'],
-  [data-scope='dynamic-input'][data-part='move-down-trigger'] {
-    inline-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
-    block-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
-    border-radius: var(--xh-dynamic-input-trigger-radius, var(--xh-shape-control));
-  }
-
-  /* 不换序时连接层给换序把手写 hidden；上面那条 display 会把 UA 的 [hidden]{display:none}
-     盖掉，少了这条把手还留在原地。删除把手同样声明了 display，作者自己收起它时要的是同一条 */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger'][hidden],
-  [data-scope='dynamic-input'][data-part='move-up-trigger'][hidden],
-  [data-scope='dynamic-input'][data-part='move-down-trigger'][hidden] {
-    display: none;
-  }
-
-  /* 按不动的把手不给悬停与按下反馈：它仍然可聚焦、可点，反馈会让人以为点得动 */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger']:hover:not([aria-disabled='true']),
-  [data-scope='dynamic-input'][data-part='move-up-trigger']:hover:not([aria-disabled='true']),
-  [data-scope='dynamic-input'][data-part='move-down-trigger']:hover:not([aria-disabled='true']) {
-    background: var(--xh-dynamic-input-trigger-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-dynamic-input-trigger-fg-hover, var(--xh-fg-default));
-  }
-
-  [data-scope='dynamic-input'][data-part='item-delete-trigger']:not([aria-disabled='true']):active,
-  [data-scope='dynamic-input'][data-part='move-up-trigger']:not([aria-disabled='true']):active,
-  [data-scope='dynamic-input'][data-part='move-down-trigger']:not([aria-disabled='true']):active {
-    background: var(--xh-dynamic-input-trigger-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-  }
-
-  /* 删除把手悬停转危险色：它是这一行里唯一不可撤销的动作 */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger']:hover:not([aria-disabled='true']) {
-    color: var(--xh-dynamic-input-item-delete-fg-hover, var(--xh-fg-danger-hover));
-  }
-
-  [data-scope='dynamic-input'][data-part='item-delete-trigger']:focus-visible,
-  [data-scope='dynamic-input'][data-part='move-up-trigger']:focus-visible,
-  [data-scope='dynamic-input'][data-part='move-down-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 到上下限、或整份禁用时用 aria-disabled 表达（原生 disabled 不派 click，禁用守卫走不到），
-     所以样式也得认这个属性，写 :disabled 永远不命中 */
-  [data-scope='dynamic-input'][data-part='item-delete-trigger'][aria-disabled='true'],
-  [data-scope='dynamic-input'][data-part='move-up-trigger'][aria-disabled='true'],
-  [data-scope='dynamic-input'][data-part='move-down-trigger'][aria-disabled='true'] {
-    background: transparent;
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  /* —— 新增把手 —— */
-  /* 虚线描边把它和行里的实心控件区分开：它加的是行，不是行里的值 */
-  [data-scope='dynamic-input'][data-part='add-trigger'] {
-    display: inline-flex;
-    align-self: flex-start;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
-    block-size: var(--xh-dynamic-input-add-height, var(--xh-control-h-md));
-    padding-inline: var(--xh-dynamic-input-add-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-control));
-    border-radius: var(--xh-dynamic-input-add-radius, var(--xh-shape-control));
-    background: var(--xh-dynamic-input-add-bg, transparent);
-    color: var(--xh-dynamic-input-add-fg, var(--xh-fg-brand));
-    font-family: inherit;
-    font-size: var(--xh-dynamic-input-add-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='dynamic-input'][data-part='add-trigger'][hidden] {
-    display: none;
-  }
-
-  [data-scope='dynamic-input'][data-part='add-trigger']:hover:not([aria-disabled='true']) {
-    border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-dynamic-input-add-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
-  [data-scope='dynamic-input'][data-part='add-trigger']:not([aria-disabled='true']):active {
-    background: var(--xh-dynamic-input-add-bg-active, var(--xh-bg-subtle-active));
-  }
-
-  [data-scope='dynamic-input'][data-part='add-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='dynamic-input'][data-part='add-trigger'][aria-disabled='true'] {
-    border-color: var(--xh-dynamic-input-add-border-disabled, var(--xh-border-subtle));
-    background: transparent;
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='dynamic-input'][data-part='move-up-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-chevron-up) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
-  }
-
-  [data-scope='dynamic-input'][data-part='move-down-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-chevron-down) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
-  }
-
-  [data-scope='dynamic-input'][data-part='item-delete-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 声明之后 */
-  [data-scope='dynamic-input'][data-part='item-content'][hidden],
-  [data-scope='dynamic-input'][data-part='item-action'][hidden] {
-    display: none;
-  }
-}

package/css/ellipsis.css

@@ -1,52 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='ellipsis'] {
-    --xh-ellipsis-skin: 1;
-  }
-
-  /* 单行：一行装不下就收成省略号。
-     行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
-  [data-scope='ellipsis'][data-part='root'] {
-    --xh-_ellipsis-lines: 1;
-
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  /* 多行：按行数裁，裁掉的那一行末尾收省略号 */
-  [data-scope='ellipsis'][data-part='root'][data-multiline] {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--xh-_ellipsis-lines);
-    white-space: normal;
-    /* 一长串没有断点的字符（网址、编号）也得断开，否则它一路撑出去，裁不住 */
-    overflow-wrap: break-word;
-  }
-
-  /* 铺开：裁剪整个撤掉。写在两档之后，压得住上面同权重的那两条 */
-  [data-scope='ellipsis'][data-part='root'][data-state='open'] {
-    display: block;
-    overflow: visible;
-    white-space: normal;
-  }
-
-  /* 可展开时整块文字就是那颗按钮 */
-  [data-scope='ellipsis'][data-part='root'][data-expandable] {
-    cursor: pointer;
-  }
-
-  /* 聚焦环恒是 --xh-ring-focus，不随语气走 */
-  [data-scope='ellipsis'][data-part='root'][data-expandable]:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
-     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='ellipsis'][data-part='root'][hidden] {
-    display: none;
-  }
-}

package/css/hotkeys.css

@@ -1,90 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='hotkeys'] {
-    --xh-hotkeys-skin: 1;
-  }
-
-  /* 一排键帽连着连接符。整块不换行：一组组合被折成两行就读不出是一组了 */
-  [data-scope='hotkeys'][data-part='root'] {
-    /* 尺寸档只换这两个私有槽，键帽从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_hotkeys-font-size: var(--xh-control-caption-md);
-    --xh-_hotkeys-key-px: var(--xh-space-1);
-
-    display: inline-flex;
-    align-items: center;
-    gap: var(--xh-hotkeys-gap, var(--xh-space-0_5));
-    color: var(--xh-hotkeys-fg, var(--xh-fg-muted));
-    font-size: var(--xh-hotkeys-font-size, var(--xh-_hotkeys-font-size));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-  }
-
-  /* 一枚键帽：等宽字，带描边与一层薄阴影凑出按键的样子。
-     min-inline-size 保证单个字母的键帽不至于窄成一条 */
-  [data-scope='hotkeys'][data-part='key'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-inline-size: var(--xh-hotkeys-key-min-w, var(--xh-control-indicator-size));
-    padding-block: var(--xh-hotkeys-key-py, var(--xh-space-0_5));
-    padding-inline: var(--xh-hotkeys-key-px, var(--xh-_hotkeys-key-px));
-    border: var(--xh-stroke-thin) solid var(--xh-hotkeys-key-border, var(--xh-border-subtle));
-    border-radius: var(--xh-hotkeys-key-radius, var(--xh-shape-inset));
-    background: var(--xh-hotkeys-key-bg, var(--xh-bg-surface));
-    box-shadow: var(--xh-hotkeys-key-shadow, var(--xh-elevation-raised));
-    color: var(--xh-hotkeys-key-fg, var(--xh-fg-default));
-    /* kbd 的 UA 字体是等宽，但字号会被压小；两者都显式接过来，档位才归尺寸轴管 */
-    font-family: var(--xh-hotkeys-key-font, var(--xh-font-family-mono));
-    font-size: inherit;
-    font-weight: var(--xh-hotkeys-key-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-none);
-  }
-
-  /* 修饰键多是符号，与主键的字母混排时字宽差得远，单独留一档给使用者调 */
-  [data-scope='hotkeys'][data-part='key'][data-modifier] {
-    color: var(--xh-hotkeys-key-fg-modifier, var(--xh-fg-muted));
-  }
-
-  /* 连接符是排版符号，不参与键帽的盒子 */
-  [data-scope='hotkeys'][data-part='separator'] {
-    color: var(--xh-hotkeys-separator-fg, var(--xh-fg-subtle));
-    user-select: none;
-  }
-
-  /* 监听关掉时组合按不出来，整块转成不可用的样子：键帽换成暗底、去掉阴影，前景压到 fg-subtle。
-     这块是 role=img 的说明性文字而不是失效控件，读者仍要认出按的是哪几枚键，
-     所以前景不用 fg-disabled（那一档压在 muted 底上只有 2.36:1 / 1.94:1），也不叠 opacity */
-  [data-scope='hotkeys'][data-part='root'][data-disabled] {
-    color: var(--xh-fg-subtle);
-  }
-
-  [data-scope='hotkeys'][data-part='root'][data-disabled] [data-scope='hotkeys'][data-part='key'] {
-    background: var(--xh-hotkeys-key-bg-disabled, var(--xh-bg-muted));
-    box-shadow: none;
-    color: var(--xh-fg-subtle);
-  }
-
-  [data-scope='hotkeys'][data-part='root'][data-disabled] [data-scope='hotkeys'][data-part='separator'] {
-    color: var(--xh-fg-subtle);
-  }
-
-  /* —— 尺寸 —— */
-  /* 缺省的 md 档写在上面的基础规则里 */
-  [data-scope='hotkeys'][data-part='root'][data-size='sm'] {
-    --xh-_hotkeys-font-size: var(--xh-control-caption-sm);
-    --xh-_hotkeys-key-px: var(--xh-space-0_5);
-  }
-
-  [data-scope='hotkeys'][data-part='root'][data-size='lg'] {
-    --xh-_hotkeys-font-size: var(--xh-control-caption-lg);
-    --xh-_hotkeys-key-px: var(--xh-space-1_5);
-  }
-
-  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
-     不补的话作者给节点加 hidden 后它照样显示。Mac 写法下连接符恒带 hidden，靠这条收起 */
-  [data-scope='hotkeys'][data-part='root'][hidden],
-  [data-scope='hotkeys'][data-part='key'][hidden],
-  [data-scope='hotkeys'][data-part='separator'][hidden] {
-    display: none;
-  }
-}