@scalewing/react 1.46.0 → 1.48.0

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

@@ -0,0 +1,155 @@
+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
+ * internal media query of the component, not a public breakpoint (the
+ * `md` and `lg` tokens stay the only ones products use).
+ */
+const wideShellWidth = 75;
+/** From this width up AppShell draws its full sidebar; script reads it too. */
+export const appShellWideQuery = `(min-width: ${wideShellWidth}rem)`;
+/* The full sidebar's width, a named geometry of this frame. */
+const sidebarWidth = '15rem';
+/* The rail: the 44 px target with a space-3 gutter each side, and its hairline. */
+const railWidth = 'calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 1px)';
+const fromLg = breakpointQuery('from', 'lg');
+/*
+ * Below `lg`: the page under a sticky top bar (an AppHeader `bar`: the menu
+ * button, the title, the end controls), no sidebar. The frame never makes
+ * `main` a scroll box: the page scrolls with the document.
+ */
+function barRules() {
+    return `.sw-app-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.sw-app-shell-bar {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-app-shell-bar-title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-app-shell-bar-end {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--sw-space-2);
+}
+
+${iconButtonRules('sw-app-shell-menu')}
+
+.sw-app-shell-main {
+  display: block;
+  min-width: 0;
+}
+
+.sw-app-shell-sidebar,
+.sw-app-shell-sidebar .sw-app-shell-rail-slot {
+  display: none;
+}`;
+}
+/*
+ * From \`lg\`: no bar; the sidebar is a column of the frame's grid, sticky at
+ * the top at the viewport's height on the solid surface with a hairline at
+ * its inline end. Its header and footer keep their height and only the nav
+ * between them scrolls, when it is taller than the window. A rail to 75rem,
+ * full from there.
+ */
+function sidebarRules() {
+    return `@media ${fromLg} {
+  .sw-app-shell {
+    align-items: start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .sw-app-shell-bar {
+    display: none;
+  }
+
+  .sw-app-shell-sidebar {
+    background: var(--sw-color-surface);
+    border-inline-end: 1px solid var(--sw-color-border);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+    position: sticky;
+    top: 0;
+    width: ${railWidth};
+  }
+
+  @media not all and ${appShellWideQuery} {
+    .sw-app-shell-sidebar .sw-app-shell-slot {
+      display: none;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-rail-slot {
+      display: block;
+    }
+
+${cssAppShellRailNavRules('    ')}
+  }
+}
+
+@media ${appShellWideQuery} {
+  .sw-app-shell-sidebar {
+    width: ${sidebarWidth};
+  }
+}`;
+}
+/*
+ * 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 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()}
+
+.sw-app-shell-header,
+.sw-app-shell-footer {
+  flex: none;
+  padding: var(--sw-space-3);
+}
+
+.sw-app-shell-footer {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+${cssAppShellNavClasses()}
+
+${cssAppShellPageBarClasses()}
+
+${sidebarRules()}
+
+${cssAppShellDrawerClasses()}`;
+}
+export function appShellClassCatalog() {
+    return [
+        'sw-app-shell',
+        'sw-app-shell-bar',
+        'sw-app-shell-menu',
+        'sw-app-shell-bar-title',
+        'sw-app-shell-bar-end',
+        'sw-app-shell-main',
+        'sw-app-shell-sidebar',
+        'sw-app-shell-slot',
+        'sw-app-shell-rail-slot',
+        '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',
+    ];
+}