@scalewing/react 1.47.0 → 1.49.0

package/dist/context-switcher.test-support.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ContextSwitcher, } from './components/ContextSwitcher.js';
+/** Field stations: a bare group, then a labelled one with badges and counts. */
+export const stations = [
+    {
+        id: 'home',
+        options: [
+            {
+                id: 'all',
+                label: 'All stations',
+                icon: _jsx("svg", { "data-glyph": "all" }),
+                count: 7,
+                countLabel: '7 need you',
+                countTone: 'warning',
+            },
+        ],
+    },
+    {
+        id: 'mine',
+        label: 'Stations you run',
+        options: [
+            {
+                id: 'heron',
+                label: 'Heron Marsh',
+                detail: 'Warden',
+                badge: { label: 'Live', tone: 'success' },
+            },
+            { id: 'pine', label: 'Pine Ridge', detail: 'Ranger' },
+            { id: 'bittern', label: 'Bittern Fen', count: 2 },
+            { id: 'bay', label: 'Bayside Dunes', detail: 'Árbol team' },
+        ],
+    },
+];
+/** The switcher with its required props, and any prop overridden. */
+export function renderSwitcher(props = {}) {
+    const onSelect = vi.fn();
+    const view = render(_jsx(ContextSwitcher, { currentId: "heron", groups: stations, label: "Station", onSelect: onSelect, trigger: "Heron Marsh", ...props }));
+    return { ...view, onSelect };
+}

package/dist/css/css-app-shell-page-bar.d.ts

@@ -0,0 +1,3 @@
+export declare const appShellBarHeightVariable = "--sw-app-shell-bar-height";
+export declare function cssAppShellPageBarClasses(): string;
+export declare function appShellPageBarClassCatalog(): string[];

package/dist/css/css-app-shell-page-bar.js

@@ -0,0 +1,81 @@
+import { breakpointQuery } from './breakpoints.js';
+import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * The compact bar's measured height, set on `.sw-app-shell` by the
+ * component while it draws a page bar, so the page bar sticks right under
+ * the bar whatever its end controls make it.
+ */
+export const appShellBarHeightVariable = '--sw-app-shell-bar-height';
+/*
+ * The bar's usual height before it is measured (and without script): the
+ * sm menu button, or the touch target on a coarse pointer, inside the
+ * bar's space-2 padding, and its hairline.
+ */
+function barHeightFallback(control) {
+    return `calc(${control} + 2 * var(--sw-space-2) + 1px)`;
+}
+const fromLg = breakpointQuery('from', 'lg');
+/*
+ * `pageBar`: a band at the top of `main` on every layout, the solid
+ * surface with a hairline under it and the page's inline padding (space-4,
+ * space-6 from `lg`), its children a wrapping row with space between them.
+ * Sticky on the top chrome's layer: under the compact bar below `lg`, at
+ * the window's top from `lg`, where the bar is gone. Reduce Transparency
+ * needs nothing (it is already solid); forced colours keep the hairline.
+ */
+function pageBarRules() {
+    return `.sw-app-shell-page-bar {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  justify-content: space-between;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  position: sticky;
+  top: var(${appShellBarHeightVariable}, ${barHeightFallback('var(--sw-control-sm-min-height)')});
+  ${zIndex('topChrome')}
+}
+
+@media ${coarsePointerQuery} {
+  .sw-app-shell-page-bar {
+    top: var(${appShellBarHeightVariable}, ${barHeightFallback(touchTarget)});
+  }
+}
+
+@media ${fromLg} {
+  .sw-app-shell-page-bar {
+    padding-inline: var(--sw-space-6);
+    top: 0;
+  }
+}`;
+}
+/*
+ * `menuCount`: the shared count pill (`sw-app-shell-count`, its tones
+ * included) on the menu button's top end corner, over the glyph's edge as
+ * on a rail glyph, mirrored in right-to-left.
+ */
+function menuCountRules() {
+    return `.sw-app-shell-menu {
+  position: relative;
+}
+
+.sw-app-shell-menu .sw-app-shell-count {
+  inset-block-start: calc(-1 * var(--sw-space-1));
+  inset-inline-end: calc(-1 * var(--sw-space-1));
+  pointer-events: none;
+  position: absolute;
+}`;
+}
+/* AppShell's page bar and the menu button's count (see components/AppShell.tsx). */
+export function cssAppShellPageBarClasses() {
+    return `${pageBarRules()}
+
+${menuCountRules()}`;
+}
+export function appShellPageBarClassCatalog() {
+    return ['sw-app-shell-page-bar'];
+}

package/dist/css/css-app-shell.js

@@ -1,6 +1,7 @@
 import { breakpointQuery } from './breakpoints.js';
 import { appShellDrawerClassCatalog, cssAppShellDrawerClasses, } from './css-app-shell-drawer.js';
 import { appShellNavClassCatalog, cssAppShellNavClasses, cssAppShellRailNavRules, } from './css-app-shell-nav.js';
+import { appShellPageBarClassCatalog, cssAppShellPageBarClasses, } from './css-app-shell-page-bar.js';
 import { iconButtonRules } from './css-icon-button.js';
 /*
  * The width from which AppShell's sidebar is full rather than a rail: an
@@ -110,7 +111,8 @@ ${cssAppShellRailNavRules('    ')}
 /*
  * AppShell: a workspace frame with a pinned side navigation (see
  * components/AppShell.tsx). The links, groups and the rail's nav are
- * `css-app-shell-nav.ts`; the menu drawer is `css-app-shell-drawer.ts`.
+ * `css-app-shell-nav.ts`; the page bar and the menu's count are
+ * `css-app-shell-page-bar.ts`; the menu drawer is `css-app-shell-drawer.ts`.
  */
 export function cssAppShellClasses() {
     return `${barRules()}
@@ -127,6 +129,8 @@ export function cssAppShellClasses() {
 
 ${cssAppShellNavClasses()}
 
+${cssAppShellPageBarClasses()}
+
 ${sidebarRules()}
 
 ${cssAppShellDrawerClasses()}`;
@@ -145,6 +149,7 @@ export function appShellClassCatalog() {
         'sw-app-shell-header',
         'sw-app-shell-footer',
         ...appShellNavClassCatalog(),
+        ...appShellPageBarClassCatalog(),
         ...appShellDrawerClassCatalog(),
     ];
 }

package/dist/css/css-band.d.ts

@@ -0,0 +1,10 @@
+/** A band's fill: the page's surface, the quiet subtle fill, or the dark inverse band. */
+export declare const bandTones: readonly ["surface", "subtle", "inverse"];
+export type BandTone = (typeof bandTones)[number];
+/** How wide a band's content column runs: the page container or the reading width. */
+export declare const bandWidths: readonly ["container", "reading"];
+export type BandWidth = (typeof bandWidths)[number];
+export declare function bandToneClass(tone: BandTone): string;
+export declare function bandWidthClass(width: BandWidth): string;
+export declare function cssBandClasses(): string;
+export declare function bandClassCatalog(): string[];

package/dist/css/css-band.js

@@ -0,0 +1,101 @@
+import { breakpointQuery } from './breakpoints.js';
+/** A band's fill: the page's surface, the quiet subtle fill, or the dark inverse band. */
+export const bandTones = ['surface', 'subtle', 'inverse'];
+/** How wide a band's content column runs: the page container or the reading width. */
+export const bandWidths = ['container', 'reading'];
+export function bandToneClass(tone) {
+    return `sw-band-${tone}`;
+}
+export function bandWidthClass(width) {
+    return `sw-band-inner-${width}`;
+}
+/*
+ * The inverse band re-scopes the theme's colours for everything inside it:
+ * words, muted words, hairlines, the quiet subtle fill, links and the
+ * accent (a primary button, the focus ring) read on the dark fill, so
+ * Text, links and Buttons need no band-aware variant. Every plain link,
+ * a quiet one included, takes the band's words with a half-strength
+ * underline, since its colour is the words' own (WCAG 1.4.1). The muted
+ * words, hairline and subtle fill are mixes of the two band colours, so a
+ * brand overlay of `inverse` moves them too; the muted mix keeps 7:1 on
+ * the default bands and on a navy one.
+ */
+function inverseScope() {
+    return `.sw-band-inverse {
+  --sw-color-background: var(--sw-color-inverse);
+  --sw-color-surface: var(--sw-color-inverse);
+  --sw-color-text: var(--sw-color-onInverse);
+  --sw-color-muted: color-mix(in srgb, var(--sw-color-onInverse) 78%, var(--sw-color-inverse));
+  --sw-color-border: color-mix(in srgb, var(--sw-color-onInverse) 18%, var(--sw-color-inverse));
+  --sw-color-subtle: color-mix(in srgb, var(--sw-color-onInverse) 10%, var(--sw-color-inverse));
+  --sw-color-accent: var(--sw-color-onInverse);
+  --sw-color-onAccent: var(--sw-color-inverse);
+  background: var(--sw-color-inverse);
+  color: var(--sw-color-onInverse);
+}
+
+[data-theme] .sw-band-inverse a:not(.sw-button) {
+  color: var(--sw-color-onInverse);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+  text-underline-offset: 0.2em;
+}
+
+[data-theme] .sw-band-inverse a:not(.sw-button):hover {
+  text-decoration-color: currentColor;
+}`;
+}
+/*
+ * The surface band is the cards' fill (white in light, a step above the
+ * black page in dark), so it stands apart from a grouped or dark page; the
+ * subtle band is the quiet grey.
+ *
+ * A band is a full-width stretch of the page in one fill with its content
+ * in a centred column, the page gutter at its sides (the 16 px phone
+ * gutter, 24 px from md).
+ */
+export function cssBandClasses() {
+    return `.sw-band {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.sw-band-surface {
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+}
+
+.sw-band-subtle {
+  background: var(--sw-color-subtle);
+  color: var(--sw-color-text);
+}
+
+${inverseScope()}
+
+.sw-band-inner {
+  box-sizing: border-box;
+  margin-inline: auto;
+  padding-inline: var(--sw-space-4);
+  width: 100%;
+}
+
+.${bandWidthClass('container')} { max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5)); }
+
+.${bandWidthClass('reading')} { max-width: calc(var(--sw-reading-max) + 2 * var(--sw-space-5)); }
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-band-inner { padding-inline: var(--sw-space-5); }
+}
+
+@media (forced-colors: active) {
+  .sw-band-inverse { border-block: 1px solid CanvasText; }
+}`;
+}
+export function bandClassCatalog() {
+    return [
+        'sw-band',
+        'sw-band-inner',
+        ...bandTones.map(bandToneClass),
+        ...bandWidths.map(bandWidthClass),
+    ];
+}

package/dist/css/css-button-link.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonLinkClass = "sw-button-link";
+export declare function cssButtonLinkClasses(): string;
+export declare function buttonLinkClassCatalog(): string[];

package/dist/css/css-button-link.js

@@ -0,0 +1,48 @@
+import { pressedRingGap, pressedRingWidth, webButtonVariants, } from './css-button.js';
+/*
+ * A link drawn as a Button (`ButtonLink`) wears the Button's own classes.
+ * The canvas paints every link in the accent, with no underline, and in the
+ * text colour on hover, from `[data-theme] a`; these rules restore each
+ * variant's words over that, hover included, at one class more. A link
+ * that is the current page (`aria-current="page"`, such as a site's
+ * Contact us on Contact) takes the pressed button's accent ring past a gap
+ * in the page background, so the mark keeps the accent's contrast whatever
+ * the fill; forced colours drop box shadows, so there the same ring is a
+ * Highlight border on an out-of-flow ::after, as a pressed Button's is.
+ */
+const variantWords = {
+    primary: 'var(--sw-color-onAccent)',
+    secondary: 'var(--sw-color-onSecondary)',
+    tertiary: 'var(--sw-color-onTertiary)',
+    ghost: 'var(--sw-color-accent)',
+    danger: 'var(--sw-color-onDanger)',
+    neutral: 'var(--sw-color-text)',
+};
+export const buttonLinkClass = 'sw-button-link';
+export function cssButtonLinkClasses() {
+    const words = webButtonVariants
+        .map((variant) => `[data-theme] a.${buttonLinkClass}.sw-button-${variant},\n[data-theme] a.${buttonLinkClass}.sw-button-${variant}:hover { color: ${variantWords[variant]}; }`)
+        .join('\n');
+    return `[data-theme] a.${buttonLinkClass} {
+  text-decoration: none;
+}
+
+${words}
+
+[data-theme] a.${buttonLinkClass}[aria-current='page'] {
+  box-shadow: 0 0 0 ${pressedRingGap}px var(--sw-color-background), 0 0 0 ${pressedRingWidth}px var(--sw-color-accent);
+}
+
+[data-theme] a.${buttonLinkClass}[aria-current='page']:focus-visible {
+  outline-offset: calc(var(--sw-focus-ring-offset) + ${pressedRingWidth}px);
+}
+
+@media (forced-colors: active) {
+  [data-theme] a.${buttonLinkClass} { color: LinkText; }
+  [data-theme] a.${buttonLinkClass}[aria-current='page'] { border-color: Highlight; position: relative; }
+  [data-theme] a.${buttonLinkClass}[aria-current='page']::after { border: ${pressedRingWidth - pressedRingGap}px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - ${pressedRingWidth}px); pointer-events: none; position: absolute; }
+}`;
+}
+export function buttonLinkClassCatalog() {
+    return [buttonLinkClass];
+}

package/dist/css/css-command-palette-key.d.ts

@@ -0,0 +1 @@
+export declare function cssCommandPaletteKeyClasses(): string;

package/dist/css/css-command-palette-key.js

@@ -0,0 +1,33 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/*
+ * A key cap: a key's name or glyph ("⌘K", "↵") in a small rounded hairline
+ * box in the muted colour, caption size at weight 500 with tabular figures.
+ * CommandPaletteTrigger's shortcut hint and the palette's Enter hint share
+ * it. Forced colours keep its edge.
+ */
+export function cssCommandPaletteKeyClasses() {
+    return `.sw-command-palette-key {
+  align-items: center;
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  justify-content: center;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: var(--sw-space-5);
+  padding-inline: var(--sw-space-1);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .sw-command-palette-key { border-color: CanvasText; color: CanvasText; }
+}`;
+}

package/dist/css/css-command-palette-trigger.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCommandPaletteTriggerClasses(): string;
+export declare function commandPaletteTriggerClassCatalog(): string[];

package/dist/css/css-command-palette-trigger.js

@@ -0,0 +1,88 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+/* The full trigger's least width, a named geometry of this control. */
+const triggerMinWidth = '12rem';
+const trigger = '.sw-command-palette-trigger';
+const compact = `${trigger}.sw-command-palette-trigger-compact`;
+/*
+ * The trigger: a search-looking pill (the surface inside the border
+ * hairline, fully rounded) holding the glyph, the placeholder words in the
+ * muted colour taking the free space, and the key hint at the end; the sm
+ * control height, the 44 px target on a coarse pointer. `compact` is the
+ * glyph alone in a round quiet button. Hover takes the quiet fill.
+ */
+export function cssCommandPaletteTriggerClasses() {
+    return `${trigger} {
+  align-items: center;
+  appearance: none;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: 400;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: min(${triggerMinWidth}, 100%);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-command-palette-trigger-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-command-palette-trigger-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+  ${trigger}:hover { background: ${quietFill}; color: var(--sw-color-text); }
+}
+
+${trigger}:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+${compact} {
+  background: transparent;
+  border-color: transparent;
+  justify-content: center;
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+@media ${coarsePointerQuery} {
+  ${trigger} { min-height: ${touchTarget}; }
+  ${compact} { min-width: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  ${trigger} { color: ButtonText; }
+}`;
+}
+export function commandPaletteTriggerClassCatalog() {
+    return [
+        'sw-command-palette-trigger',
+        'sw-command-palette-trigger-compact',
+        'sw-command-palette-trigger-icon',
+        'sw-command-palette-trigger-text',
+        'sw-command-palette-key',
+    ];
+}

package/dist/css/css-command-palette.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCommandPaletteClasses(): string;
+export declare function commandPaletteClassCatalog(): string[];

package/dist/css/css-command-palette.js

@@ -0,0 +1,209 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { cssCommandPaletteKeyClasses } from './css-command-palette-key.js';
+import { commandPaletteTriggerClassCatalog, cssCommandPaletteTriggerClasses, } from './css-command-palette-trigger.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/* The palette's width, a named geometry of this control. */
+const paletteWidth = '40rem';
+/* Its distance from the window's top: a tenth of the height, at least space-2. */
+const paletteTop = 'max(var(--sw-space-2), 10vh)';
+const fromMd = breakpointQuery('from', 'md');
+/*
+ * The palette: a modal dialog on the top layer near the window's top (not
+ * centred, so results grow downward), glass like Dialog, 40rem wide (the
+ * window less space-2 each side on a phone). Its body is a column: the
+ * field, the listbox (the only part that scrolls), the message, the hint.
+ */
+function frameRules() {
+    return `.sw-command-palette {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  margin: var(--sw-space-2) auto auto;
+  max-height: calc(100dvh - 2 * var(--sw-space-2));
+  max-width: calc(100% - 2 * var(--sw-space-2));
+  overflow: hidden;
+  padding: 0;
+  width: ${paletteWidth};
+}
+
+@media ${fromMd} {
+  .sw-command-palette {
+    margin-top: ${paletteTop};
+    max-height: calc(100dvh - ${paletteTop} - var(--sw-space-8));
+  }
+}
+
+.sw-command-palette::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-command-palette-body {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+
+[data-theme] input.sw-command-palette-field {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--sw-color-border);
+  border-radius: 0;
+  box-sizing: border-box;
+  flex: none;
+  font-size: ${body.fontSize}px;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  min-height: ${touchTarget};
+  padding: var(--sw-space-3) var(--sw-space-4);
+  width: 100%;
+}
+
+[data-theme] input.sw-command-palette-field:focus,
+[data-theme] input.sw-command-palette-field:focus-visible {
+  border-bottom-color: var(--sw-color-accent);
+  box-shadow: inset 0 -1px 0 var(--sw-color-accent);
+  outline: none;
+}
+
+.sw-command-palette-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-command-palette-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-command-palette-message,
+.sw-command-palette-hint {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
+}
+
+.sw-command-palette-hint {
+  border-top: 1px solid var(--sw-color-border);
+  flex: none;
+}`;
+}
+/*
+ * A result: its mark, its label over its muted detail, and on the active
+ * row (`aria-selected`, the arrow keys' or the pointer's) the quiet fill
+ * and the Enter key cap at the end. The sm control height, 44 px on a
+ * coarse pointer. On the fill the detail moves toward the text colour to
+ * keep 4.5:1. Forced colours draw the active row in Highlight.
+ */
+function itemRules() {
+    return `.sw-command-palette-item {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-3);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-sm-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-command-palette-item[aria-selected='true'] {
+  background: ${quietFill};
+}
+
+.sw-command-palette-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-command-palette-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-command-palette-label {
+  font-weight: 500;
+}
+
+.sw-command-palette-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
+}
+
+@media ${coarsePointerQuery} {
+  .sw-command-palette-item { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-command-palette { border-color: CanvasText; }
+  .sw-command-palette-item[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail,
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-key { border-color: HighlightText; color: HighlightText; }
+  [data-theme] input.sw-command-palette-field:focus-visible { border-bottom-color: Highlight; box-shadow: inset 0 -1px 0 Highlight; }
+}`;
+}
+/*
+ * CommandPalette and CommandPaletteTrigger (see components/CommandPalette.tsx):
+ * the trigger is `css-command-palette-trigger.ts`, the shared key cap
+ * `css-command-palette-key.ts`.
+ */
+export function cssCommandPaletteClasses() {
+    return `${cssCommandPaletteKeyClasses()}
+
+${cssCommandPaletteTriggerClasses()}
+
+${frameRules()}
+
+${itemRules()}`;
+}
+export function commandPaletteClassCatalog() {
+    return [
+        ...commandPaletteTriggerClassCatalog(),
+        'sw-command-palette',
+        'sw-command-palette-body',
+        'sw-command-palette-field',
+        'sw-command-palette-list',
+        'sw-command-palette-heading',
+        'sw-command-palette-item',
+        'sw-command-palette-icon',
+        'sw-command-palette-words',
+        'sw-command-palette-label',
+        'sw-command-palette-detail',
+        'sw-command-palette-message',
+        'sw-command-palette-hint',
+    ];
+}