@xihan-ui/styles 1.1.0 → 2.1.0

package/family/collection-item.css

@@ -0,0 +1,770 @@
+/*
+ * 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/collection-item-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-collection-item] {
+    --xh-_collection-block-padding: var(--xh-list-option-py-md);
+    --xh-_collection-inline-padding: var(--xh-control-px-md);
+    --xh-_collection-gap: var(--xh-control-gap-md);
+    --xh-_collection-font-size: var(--xh-control-font-md);
+    --xh-_collection-glyph-size: var(--xh-glyph-size-md);
+    --xh-_collection-bg: var(--xh-collection-bg-rest, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-rest, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-rest, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-rest, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-rest, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-rest, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-rest, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-rest, 1);
+
+    --xh-icon-size: var(--xh-collection-glyph-size, var(--xh-_collection-glyph-size));
+
+    display: grid;
+    grid-template-columns:
+      [prefix] max-content
+      [text] minmax(0, 1fr)
+      [shortcut] max-content
+      [suffix] max-content
+      [indicator] max-content;
+    /* 第 2 行是说明行。各皮肤为了省略号给 text 槽写了 overflow: hidden，它因此成为滚动容器、自动最小尺寸
+       归 0；轨道尺寸算法里第 1 行的 base size 只有 0，处理跨两行的 prefix / indicator 等图标时会把图标高度
+       平均分给两行，没有说明的条目也长出半个图标高的第 2 行，图标随之整体下沉。minmax(0, max-content)
+       把第 2 行的最小尺寸钉在 0，它不再参与跨行项的最小高度分配，只在真有说明时按说明长；上限取 max-content
+       而不是 auto，皮肤给条目定死 block-size 时多余空间也不会被说明行分走。 */
+    grid-template-rows: auto minmax(0, max-content);
+    align-items: center;
+    min-inline-size: 0;
+    padding-block: var(--xh-collection-block-padding, var(--xh-_collection-block-padding));
+    padding-inline: var(--xh-collection-inline-padding, var(--xh-_collection-inline-padding));
+    border-radius: var(--xh-collection-radius, var(--xh-shape-control));
+    outline: var(--xh-ring-width) solid var(--xh-_collection-outline);
+    outline-offset: var(--xh-ring-offset);
+    background-color: var(--xh-_collection-bg);
+    color: var(--xh-_collection-fg);
+    font-size: var(--xh-collection-font-size, var(--xh-_collection-font-size));
+    font-weight: var(--xh-_collection-font-weight);
+    line-height: var(--xh-leading-normal);
+    cursor: var(--xh-_collection-cursor);
+    opacity: var(--xh-_collection-opacity);
+    /* 描边色不进过渡，与 focus.css 的公共环同一节奏（即时出现、即时消失）：
+       描边在这里常驻 solid、静息透明，靠颜色表达键盘高亮。宿主页面常见的
+       button:focus:not(:focus-visible) { outline: none } 复位（VitePress 等）是无层规则，压过本份；
+       指针落焦时它把简写复位成 none，outline-color 同时落到 currentColor；焦点离开、规则失效的那一刻
+       solid 立即回来，颜色若还在过渡就画成一圈实心边（上一条目闪边）。颜色即时切换后这条路径没有中间帧 */
+    transition:
+      background-color var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-xh-collection-item][data-xh-collection-size='sm'] {
+    --xh-_collection-block-padding: var(--xh-list-option-py-sm);
+    --xh-_collection-inline-padding: var(--xh-control-px-sm);
+    --xh-_collection-gap: var(--xh-control-gap-sm);
+    --xh-_collection-font-size: var(--xh-control-font-sm);
+    --xh-_collection-glyph-size: var(--xh-glyph-size-sm);
+  }
+
+  [data-xh-collection-item][data-xh-collection-size='md'] {
+    --xh-_collection-block-padding: var(--xh-list-option-py-md);
+    --xh-_collection-inline-padding: var(--xh-control-px-md);
+    --xh-_collection-gap: var(--xh-control-gap-md);
+    --xh-_collection-font-size: var(--xh-control-font-md);
+    --xh-_collection-glyph-size: var(--xh-glyph-size-md);
+  }
+
+  [data-xh-collection-item][data-xh-collection-size='lg'] {
+    --xh-_collection-block-padding: var(--xh-list-option-py-lg);
+    --xh-_collection-inline-padding: var(--xh-control-px-lg);
+    --xh-_collection-gap: var(--xh-control-gap-lg);
+    --xh-_collection-font-size: var(--xh-control-font-lg);
+    --xh-_collection-glyph-size: var(--xh-glyph-size-lg);
+  }
+
+  [data-xh-collection-slot='prefix'] {
+    grid-column: prefix;
+    grid-row: 1 / span 2;
+    margin-inline-end: var(--xh-collection-gap, var(--xh-_collection-gap));
+  }
+
+  [data-xh-collection-slot='text'] {
+    grid-column: text;
+    grid-row: 1;
+    min-inline-size: 0;
+  }
+
+  [data-xh-collection-slot='description'] {
+    grid-column: text;
+    grid-row: 2;
+    min-inline-size: 0;
+    color: var(--xh-_collection-description-fg);
+    font-size: var(--xh-collection-description-font-size, var(--xh-control-caption-md));
+  }
+
+  /* 快捷键提示：与说明同档同色的次级文字，只是落位在行尾而不是第 2 行。
+     不换行——它是一串按键记号，折行会被读成两个组合。跟着 description 那支前景走，因此也不跟语气。 */
+  [data-xh-collection-slot='shortcut'] {
+    grid-column: shortcut;
+    color: var(--xh-_collection-description-fg);
+    font-size: var(--xh-collection-shortcut-font-size, var(--xh-control-caption-md));
+    white-space: nowrap;
+  }
+
+  [data-xh-collection-slot='suffix'] {
+    grid-column: suffix;
+  }
+
+  [data-xh-collection-slot='indicator'] {
+    grid-column: indicator;
+    color: var(--xh-_collection-indicator-fg);
+    visibility: hidden;
+  }
+
+  [data-xh-collection-slot='shortcut'],
+  [data-xh-collection-slot='suffix'],
+  [data-xh-collection-slot='indicator'] {
+    grid-row: 1 / span 2;
+    margin-inline-start: var(--xh-collection-gap, var(--xh-_collection-gap));
+  }
+
+  /* page 上下文：对号与 overlay 同在行尾的 indicator 列（trailing）；当前项的起始侧指示条按配方开关（none），none 即只由行面与字色表达。 */
+  [data-xh-collection-item][data-xh-collection-context='page'] {
+    position: relative;
+  }
+
+  [data-xh-collection-item][data-in-path] {
+    --xh-_collection-bg: var(--xh-collection-bg-open-path, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-open-path, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-open-path, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-open-path, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-open-path, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-open-path, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-open-path, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-open-path, 1);
+  }
+
+  [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-hover, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-hover, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-hover, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-hover, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-hover, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-hover, 1);
+  }
+
+  [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-keyboard-highlight, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-keyboard-highlight, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-keyboard-highlight, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-keyboard-highlight, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-keyboard-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-keyboard-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-keyboard-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-keyboard-highlight, 1);
+  }
+
+  /* 按下段：pressed 面与按下时长、曲线一起给出；排在 hover 与高亮之后，同特指度才不会被它们盖掉。 */
+  [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-pressed, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-pressed, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-pressed, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-pressed, 1);
+
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 语气段：条目自身动作的性质，静息只换字、hover / 高亮 / 按下换语气淡底，节奏与中性行一致。
+     必须排在上下文段之前：语气与 selected / current 同特指度，靠源序让选中与当前压过语气。 */
+  [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+    --xh-_collection-bg: transparent;
+    --xh-_collection-fg: var(--xh-tone-fg);
+  }
+
+  [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-tone-subtle);
+    --xh-_collection-fg: var(--xh-tone-fg);
+  }
+
+  [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-tone-subtle);
+    --xh-_collection-fg: var(--xh-tone-fg);
+  }
+
+  [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-tone-subtle-hover);
+    --xh-_collection-fg: var(--xh-tone-fg);
+
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-selected, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-selected, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-hover, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-hover, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-hover, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-hover, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-hover, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-hover, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-highlight, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-highlight, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-highlight, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-highlight, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-highlight, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-pressed, var(--xh-bg-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-pressed, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-pressed, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-pressed, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-pressed, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-selected, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-hover, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-hover, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-hover, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-hover, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-hover, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-highlight, var(--xh-bg-brand-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-highlight, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-highlight, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-highlight, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-highlight, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-selected-pressed, var(--xh-bg-brand-subtle-active));
+    --xh-_collection-fg: var(--xh-collection-fg-selected-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-pressed, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-selected-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-selected-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-selected-pressed, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current, var(--xh-bg-brand-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-current, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-current, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-current-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-current-hover, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-hover, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-hover, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-current-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-hover, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-hover, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current-highlight, var(--xh-bg-brand-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-current-highlight, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-highlight, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-highlight, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-current-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-highlight, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current-pressed, var(--xh-bg-brand-subtle-active));
+    --xh-_collection-fg: var(--xh-collection-fg-current-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-pressed, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-pressed, var(--xh-fg-on-brand-subtle));
+    --xh-_collection-outline: var(--xh-collection-outline-current-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-pressed, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'] {
+    --xh-_collection-bg: var(--xh-collection-bg-rest, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-rest, var(--xh-fg-muted));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-rest, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-rest, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-rest, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-rest, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-rest, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-rest, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-hover, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-hover, var(--xh-fg-default));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-hover, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-hover, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-hover, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-hover, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-keyboard-highlight, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-keyboard-highlight, var(--xh-fg-default));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-keyboard-highlight, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-keyboard-highlight, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-keyboard-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-keyboard-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-keyboard-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-keyboard-highlight, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-pressed, var(--xh-fg-default));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-pressed, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-pressed, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-pressed, 1);
+
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-in-path] {
+    --xh-_collection-bg: var(--xh-collection-bg-open-path, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-open-path, var(--xh-fg-default));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-open-path, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-open-path, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-open-path, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-open-path, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-open-path, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-open-path, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-current, var(--xh-fg-brand-strong));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-current, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current, var(--xh-font-weight-medium));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+    --xh-_collection-bg: var(--xh-collection-bg-current-hover, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-current-hover, var(--xh-fg-brand-strong));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-hover, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-hover, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-current-hover, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-hover, var(--xh-font-weight-medium));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-hover, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-hover, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current-highlight, var(--xh-bg-subtle));
+    --xh-_collection-fg: var(--xh-collection-fg-current-highlight, var(--xh-fg-brand-strong));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-highlight, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-highlight, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-current-highlight, var(--xh-ring-focus));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-highlight, var(--xh-font-weight-medium));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-highlight, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-highlight, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+    --xh-_collection-bg: var(--xh-collection-bg-current-pressed, var(--xh-bg-subtle-hover));
+    --xh-_collection-fg: var(--xh-collection-fg-current-pressed, var(--xh-fg-brand-strong));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-current-pressed, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-pressed, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-current-pressed, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-current-pressed, var(--xh-font-weight-medium));
+    --xh-_collection-cursor: var(--xh-collection-cursor-current-pressed, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-current-pressed, 1);
+  }
+
+  [data-xh-collection-item][data-xh-collection-context='nav'][data-current][data-xh-collection-terminal] {
+    --xh-_collection-bg: var(--xh-collection-bg-terminal, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-terminal, var(--xh-fg-default));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-terminal, var(--xh-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-terminal, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-terminal, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-terminal, var(--xh-font-weight-medium));
+    --xh-_collection-cursor: var(--xh-collection-cursor-terminal, default);
+    --xh-_collection-opacity: var(--xh-collection-opacity-terminal, 1);
+
+    cursor: var(--xh-_collection-cursor);
+  }
+
+  [data-xh-collection-item]:is([aria-selected='true'], [data-state='checked']) [data-xh-collection-slot='indicator'] {
+    visibility: visible;
+  }
+
+  [data-xh-collection-item][data-state='checked'] {
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-checked, var(--xh-fg-brand));
+  }
+
+  [data-xh-collection-item][aria-disabled='true'] {
+    --xh-_collection-bg: var(--xh-collection-bg-disabled, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-disabled, var(--xh-fg-disabled));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-disabled, var(--xh-fg-disabled));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-disabled, var(--xh-fg-disabled));
+    --xh-_collection-outline: var(--xh-collection-outline-disabled, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-disabled, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-disabled, not-allowed);
+    --xh-_collection-opacity: var(--xh-collection-opacity-disabled, 1);
+  }
+
+  [data-xh-collection-item][aria-busy='true'] {
+    --xh-_collection-bg: var(--xh-collection-bg-loading, transparent);
+    --xh-_collection-fg: var(--xh-collection-fg-loading, var(--xh-material-frosted-fg));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-loading, var(--xh-material-frosted-fg-muted));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-loading, var(--xh-fg-brand));
+    --xh-_collection-outline: var(--xh-collection-outline-loading, transparent);
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-loading, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-loading, progress);
+    --xh-_collection-opacity: var(--xh-collection-opacity-loading, 1);
+  }
+
+  [data-xh-collection-item][data-error] {
+    --xh-_collection-bg: var(--xh-collection-bg-error, color-mix(in oklab, var(--xh-fg-danger) 10%, transparent));
+    --xh-_collection-fg: var(--xh-collection-fg-error, var(--xh-fg-danger));
+    --xh-_collection-description-fg: var(--xh-collection-description-fg-error, var(--xh-fg-danger));
+    --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-error, var(--xh-fg-danger));
+    --xh-_collection-outline: var(--xh-collection-outline-error, var(--xh-fg-danger));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-error, var(--xh-font-weight-regular));
+    --xh-_collection-cursor: var(--xh-collection-cursor-error, pointer);
+    --xh-_collection-opacity: var(--xh-collection-opacity-error, 1);
+  }
+
+  [data-xh-collection-separator] {
+    block-size: var(--xh-stroke-thin);
+    margin-block: var(--xh-collection-separator-block-margin, var(--xh-space-1));
+    margin-inline: var(--xh-collection-separator-inline-margin, var(--xh-control-px-md));
+    border: 0;
+    background-color: var(--xh-collection-separator-color, var(--xh-material-frosted-separator));
+  }
+
+  [data-xh-collection-item][hidden],
+  [data-xh-collection-separator][hidden] {
+    display: none;
+  }
+
+  :where([data-motion='reduce']) [data-xh-collection-item] {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-xh-collection-item] {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-collection-item] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: ButtonText;
+    }
+
+    [data-xh-collection-item][data-in-path] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    /* 语气在强制颜色下退出：逐态用系统色盖回家族缺省，只留图标与文案通道。
+       语气段在媒体查询外的特指度比这里的基础态各高一级，必须逐条同形盖回，不能只写一条。 */
+    [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: ButtonText;
+    }
+
+    [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: HighlightText;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: HighlightText;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='page'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: ButtonText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-in-path] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: ButtonText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
+      --xh-_collection-bg: Highlight;
+      --xh-_collection-fg: HighlightText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: HighlightText;
+    }
+
+    [data-xh-collection-item][data-xh-collection-context='nav'][data-current][data-xh-collection-terminal] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: ButtonText;
+    }
+
+    [data-xh-collection-item][data-state='checked'] {
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][aria-disabled='true'] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: GrayText;
+      --xh-_collection-outline: transparent;
+      --xh-_collection-indicator-fg: GrayText;
+    }
+
+    [data-xh-collection-item][aria-busy='true'] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-item][data-error] {
+      --xh-_collection-bg: Canvas;
+      --xh-_collection-fg: CanvasText;
+      --xh-_collection-outline: Highlight;
+      --xh-_collection-indicator-fg: Highlight;
+    }
+
+    [data-xh-collection-separator] {
+      background-color: CanvasText;
+    }
+  }
+}