@scalewing/react 1.27.0 → 1.29.0

package/dist/components/toast/ToastContent.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+/**
+ * What the toast says. Children alone render as they always have; with a
+ * title, an icon or an action they go in a row: the icon, the bold title
+ * over the children as a muted detail, and the action at the end.
+ */
+export function ToastContent({ action, children, icon, onAction, title, }) {
+    if (!icon && !title && !action)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: "sw-toast-row", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-toast-icon", children: icon })) : null, _jsxs("div", { className: "sw-toast-body", children: [title ? _jsx("strong", { className: "sw-toast-title", children: title }) : null, title ? _jsx("div", { className: "sw-toast-detail", children: children }) : children] }), action ? (_jsx(Button, { className: "sw-toast-action", onPress: onAction, size: "sm", variant: "ghost", children: action.label })) : null] }));
+}
+export function assertToastContent(title, action) {
+    if (title !== undefined && (typeof title !== 'string' || !title.trim()))
+        throw new RangeError('Toast title must not be empty');
+    if (action !== undefined &&
+        (typeof action.label !== 'string' ||
+            !action.label.trim() ||
+            typeof action.onPress !== 'function'))
+        throw new RangeError('Toast action needs a label and an onPress');
+}

package/dist/components/toast/use-toast-hold.d.ts

@@ -0,0 +1,28 @@
+import { type FocusEvent, type PointerEvent, type FocusEventHandler, type PointerEventHandler } from 'react';
+type ToastHoldOptions = {
+    open: boolean;
+    /** Only a toast that takes the pointer (an action or the line) holds. */
+    enabled: boolean;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+};
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export declare function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }: ToastHoldOptions): {
+    paused: boolean;
+    returnFocus: (node: HTMLElement) => void;
+    handlers: {
+        onBlur: (event: FocusEvent<HTMLDivElement>) => void;
+        onFocus: (event: FocusEvent<HTMLDivElement>) => void;
+        onPointerEnter: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/toast/use-toast-hold.js

@@ -0,0 +1,53 @@
+import { useCallback, useRef, useState, } from 'react';
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [wasOpen, setWasOpen] = useState(open);
+    const cameFromRef = useRef(null);
+    if (wasOpen !== open) {
+        setWasOpen(open);
+        setHovered(false);
+        setFocused(false);
+    }
+    const returnFocus = useCallback((node) => {
+        const cameFrom = cameFromRef.current;
+        cameFromRef.current = null;
+        if (!node.contains(node.ownerDocument.activeElement))
+            return;
+        if (cameFrom?.isConnected)
+            cameFrom.focus();
+    }, []);
+    return {
+        paused: enabled && (hovered || focused),
+        returnFocus,
+        handlers: {
+            onBlur: (event) => {
+                onBlur?.(event);
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    setFocused(false);
+            },
+            onFocus: (event) => {
+                onFocus?.(event);
+                const from = event.relatedTarget;
+                if (from instanceof HTMLElement && !event.currentTarget.contains(from))
+                    cameFromRef.current = from;
+                setFocused(true);
+            },
+            onPointerEnter: (event) => {
+                onPointerEnter?.(event);
+                setHovered(true);
+            },
+            onPointerLeave: (event) => {
+                onPointerLeave?.(event);
+                setHovered(false);
+            },
+        },
+    };
+}

package/dist/components/toast/use-toast-timer.d.ts

@@ -0,0 +1,15 @@
+type ToastTimerOptions = {
+    /** The timer runs only while the toast is open and does not travel. */
+    running: boolean;
+    /** While true, the time left is held, as on hover or focus. */
+    paused: boolean;
+    /** The whole time the toast stays, in ms. */
+    duration: number;
+    onExpire: () => void;
+};
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export declare function useToastTimer({ duration, onExpire, paused, running, }: ToastTimerOptions): void;
+export {};

package/dist/components/toast/use-toast-timer.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export function useToastTimer({ duration, onExpire, paused, running, }) {
+    const leftRef = useRef(duration);
+    const expireRef = useRef(onExpire);
+    useEffect(() => {
+        expireRef.current = onExpire;
+    }, [onExpire]);
+    // A fresh count each time the toast opens or its duration changes.
+    useEffect(() => {
+        leftRef.current = duration;
+    }, [duration, running]);
+    useEffect(() => {
+        if (!running || paused)
+            return;
+        const started = Date.now();
+        let fired = false;
+        const timer = window.setTimeout(() => {
+            fired = true;
+            leftRef.current = duration;
+            expireRef.current();
+        }, leftRef.current);
+        return () => {
+            window.clearTimeout(timer);
+            // After it fired the count is whole again (a consumer that keeps the
+            // toast open gets the full time on its next run, not none).
+            if (!fired)
+                leftRef.current = Math.max(0, leftRef.current - (Date.now() - started));
+        };
+    }, [duration, paused, running]);
+}

package/dist/css/css-components.js

@@ -13,12 +13,16 @@ import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
 import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
+import { cssDialogFrameClasses } from './css-dialog-frame.js';
 import { cssSelectClasses } from './css-select.js';
+import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
+import { cssNoticeClasses } from './css-notice.js';
+import { cssGlyphTileClasses } from './css-glyph-tile.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
@@ -34,6 +38,7 @@ import { cssFieldClasses } from './css-field.js';
 import { cssStepperClasses } from './css-stepper.js';
 import { cssStepsClasses } from './css-steps.js';
 import { cssToastClasses } from './css-toast.js';
+import { cssToastCardClasses } from './css-toast-card.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
 import { cssPopupHostRules } from './stacking.js';
 /*
@@ -57,6 +62,7 @@ function reducedTransparencyRules() {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-multi-select-panel,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
@@ -133,12 +139,16 @@ ${cssSectionNavClasses()}
 
 ${cssDialogClasses()}
 
+${cssDialogFrameClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssMultiSelectClasses()}
+
 ${cssActionBarClasses()}
 
 ${cssSwitchClasses()}
@@ -147,6 +157,10 @@ ${cssSpinnerClasses()}
 
 ${cssProgressClasses()}
 
+${cssNoticeClasses()}
+
+${cssGlyphTileClasses()}
+
 ${cssTooltipClasses()}
 
 ${cssInfoTipClasses()}
@@ -175,6 +189,8 @@ ${cssSplitClasses()}
 
 ${cssToastClasses()}
 
+${cssToastCardClasses()}
+
 ${cssResponsiveClasses()}
 
 ${cssBoxBorderClasses()}

package/dist/css/css-denomination-grid.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './css-denomination-label.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
@@ -254,6 +255,8 @@ ${cssDenominationEntryClasses()}
 
 ${cssDenominationAlignedClasses()}
 
+${cssDenominationLabelClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -295,5 +298,6 @@ export function denominationGridClassCatalog() {
         ...denominationCellToneClassCatalog(),
         ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
+        ...denominationLabelClassCatalog(),
     ];
 }

package/dist/css/css-denomination-label.d.ts

@@ -0,0 +1,10 @@
+export declare const denominationLabelAppearances: readonly ["tone", "plain"];
+/**
+ * How a grid's row labels look: `tone` (the default) marks each label with
+ * its row's tone, a stripe at its start and the words in the tone; `plain`
+ * sets the words in the text color at label weight, with no stripe.
+ */
+export type DenominationLabelAppearance = (typeof denominationLabelAppearances)[number];
+export declare const denominationLabelsPlainClass = "sw-denomination-labels-plain";
+export declare function cssDenominationLabelClasses(): string;
+export declare function denominationLabelClassCatalog(): string[];

package/dist/css/css-denomination-label.js

@@ -0,0 +1,36 @@
+import { breakpointQuery } from './breakpoints.js';
+export const denominationLabelAppearances = ['tone', 'plain'];
+export const denominationLabelsPlainClass = 'sw-denomination-labels-plain';
+const plain = `.${denominationLabelsPlainClass}`;
+/*
+ * Plain row labels: the text color, no stripe, and the strip's label cell
+ * back to its column's own padding. The row's tone still colors its total.
+ * Emitted after the grid's rules (and its narrow-screen padding), and one
+ * class more specific, so it wins at every width.
+ */
+export function cssDenominationLabelClasses() {
+    return `${plain} .sw-denomination-label {
+  border-inline-start: 0;
+  color: var(--sw-color-text);
+}
+
+/* The total under a phone's label keeps its row's tone. */
+${plain} .sw-denomination-total-inline { color: var(--sw-denomination-tone); }
+
+.sw-denomination-strip${plain} .sw-denomination-label {
+  padding-inline-start: var(--sw-space-2);
+}
+
+.sw-denomination-strip${plain} .sw-denomination-label::before { content: none; }
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-denomination-strip${plain} .sw-denomination-label { padding-inline-start: var(--sw-space-1); }
+}
+
+@media (forced-colors: active) {
+  ${plain} .sw-denomination-label { color: CanvasText; }
+}`;
+}
+export function denominationLabelClassCatalog() {
+    return [denominationLabelsPlainClass];
+}

package/dist/css/css-dialog-frame.d.ts

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

package/dist/css/css-dialog-frame.js

@@ -0,0 +1,83 @@
+/*
+ * The dialog's frame beyond its title: a consumer icon before the title, a
+ * muted description under it, and a footer pinned to the bottom edge.
+ *
+ * With an icon or a description the header row centers its parts (the
+ * icon, the title over the description, the close button). The footer is
+ * sticky to the bottom of the dialog's own scrollport, bleeds to its
+ * edges under a hairline, and sits on the solid surface so content
+ * scrolling under it never shows through: the summary figure first, the
+ * actions at the end, wrapping under one another on a narrow sheet. In a
+ * bottom sheet its surface reaches the sheet's bottom edge and its own
+ * padding clears the home indicator (see the sheet rules in css-dialog.ts).
+ */
+export function cssDialogFrameClasses() {
+    return `.sw-dialog-header-framed {
+  align-items: center;
+  gap: var(--sw-space-3);
+}
+
+.sw-dialog-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-dialog-description { margin: 0; }
+
+.sw-dialog-footer {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-top: 1px solid var(--sw-color-border);
+  /* Sticky insets count from the scrollport's padding edge: step past the
+     dialog's own padding to sit on its bottom edge. */
+  bottom: calc(-1 * var(--sw-space-5));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
+  padding: var(--sw-space-3) var(--sw-space-5);
+  position: sticky;
+}
+
+.sw-dialog-footer-status {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* With no summary the live region stays in the dialog, so a first figure
+   is still announced, but it takes no room in the footer. */
+.sw-dialog-footer-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-dialog-footer-actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-footer { border-top-color: CanvasText; }
+}`;
+}
+export function dialogFrameClassCatalog() {
+    return [
+        'sw-dialog-header-framed',
+        'sw-dialog-icon',
+        'sw-dialog-titles',
+        'sw-dialog-description',
+        'sw-dialog-footer',
+        'sw-dialog-footer-status',
+        'sw-dialog-footer-actions',
+    ];
+}

package/dist/css/css-dialog.js

@@ -4,6 +4,8 @@ import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const title = typographyVariants.title;
 /* The modal's height cap: a space-8 strip of backdrop stays in view. */
 const maxHeight = 'min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8))';
+/* How far a sheet's pinned footer steps past the sheet's bottom padding. */
+const sheetFooterOffset = 'calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)))';
 export function dialogSheetClass(sheetBelow) {
     return `sw-dialog-sheet-below-${sheetBelow}`;
 }
@@ -11,9 +13,11 @@ export function dialogSheetClass(sheetBelow) {
  * Below the breakpoint the dialog is a bottom sheet: docked to the bottom
  * edge at the full viewport width, the top corners rounded and the bottom
  * ones square, the same height cap (so the whole space-8 strip of backdrop
- * shows above it), and padding that clears the safe areas. Emitted after
- * `sw-dialog-lg` so it wins at equal specificity. No grabber: there is no
- * drag gesture.
+ * shows above it), and padding that clears the safe areas. A pinned
+ * footer steps past that padding so its surface reaches the bottom edge,
+ * and pads itself clear of the home indicator. Emitted after
+ * `sw-dialog-lg` and `sw-dialog-xl` so it wins at equal specificity. No
+ * grabber: there is no drag gesture.
  */
 function sheetRules() {
     return breakpoints
@@ -33,6 +37,12 @@ function sheetRules() {
   .${dialogSheetClass(breakpoint)}[open] {
     animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
   }
+
+  .${dialogSheetClass(breakpoint)} .sw-dialog-footer {
+    bottom: ${sheetFooterOffset};
+    margin-bottom: ${sheetFooterOffset};
+    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
+  }
 }`)
         .join('\n\n');
 }
@@ -64,7 +74,8 @@ function closeButtonRules() {
   gap: var(--sw-space-2);
 }
 
-.sw-dialog-header > :first-child {
+.sw-dialog-header > :is(h2, h3),
+.sw-dialog-titles {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -128,6 +139,10 @@ export function cssDialogClasses() {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+.sw-dialog-xl {
+  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+}
+
 ${sheetRules()}
 
 ${sheetMotionRules()}
@@ -147,6 +162,7 @@ export function dialogClassCatalog() {
     return [
         'sw-dialog',
         'sw-dialog-lg',
+        'sw-dialog-xl',
         ...breakpoints.map((breakpoint) => dialogSheetClass(breakpoint)),
         'sw-dialog-header',
         'sw-dialog-close',

package/dist/css/css-glyph-tile.d.ts

@@ -0,0 +1,5 @@
+export declare const glyphTileSizes: readonly ["sm", "md", "lg"];
+/** `sm` 24, `md` 28 (the xs control height), `lg` 32. */
+export type GlyphTileSize = (typeof glyphTileSizes)[number];
+export declare function cssGlyphTileClasses(): string;
+export declare function glyphTileClassCatalog(): string[];

package/dist/css/css-glyph-tile.js

@@ -0,0 +1,57 @@
+import { categoricalColorKeys } from '@scalewing/tokens';
+export const glyphTileSizes = ['sm', 'md', 'lg'];
+const tileSide = {
+    sm: 'var(--sw-space-5)',
+    md: 'var(--sw-control-xs-min-height)',
+    lg: 'var(--sw-space-6)',
+};
+function hueRules() {
+    return categoricalColorKeys
+        .map((key) => `.sw-glyph-tile-${key} { --sw-glyph-tile-fill: var(--sw-categorical-${key}); }`)
+        .join('\n');
+}
+function sizeRules() {
+    return Object.entries(tileSide)
+        .map(([size, side]) => `.sw-glyph-tile-${size} { height: ${side}; width: ${side}; }`)
+        .join('\n');
+}
+/*
+ * A rounded square in a categorical fill with the consumer's glyph centred
+ * in white, sized to spacing step 4 whatever the glyph's own size. It is
+ * decoration: the words beside it carry the meaning. Forced colors drop the
+ * fill, so a border keeps the tile's shape and the glyph takes the text
+ * color.
+ */
+export function cssGlyphTileClasses() {
+    return `.sw-glyph-tile {
+  align-items: center;
+  background: var(--sw-glyph-tile-fill);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-categorical-on);
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+}
+
+.sw-glyph-tile > svg {
+  flex: none;
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+${hueRules()}
+
+${sizeRules()}
+
+@media (forced-colors: active) {
+  .sw-glyph-tile { border: 1px solid CanvasText; color: CanvasText; }
+}`;
+}
+export function glyphTileClassCatalog() {
+    return [
+        'sw-glyph-tile',
+        ...categoricalColorKeys.map((key) => `sw-glyph-tile-${key}`),
+        ...glyphTileSizes.map((size) => `sw-glyph-tile-${size}`),
+    ];
+}

package/dist/css/css-multi-select.d.ts

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

package/dist/css/css-multi-select.js

@@ -0,0 +1,156 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
+import { zIndex } from './stacking.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+/*
+ * The trigger: a glass control at the md height with the muted label, the
+ * summary and Select's chevron. The panel: a glass popover beside it (as
+ * ActionMenu's list), All and Clear over a hairline, then one checkbox row
+ * per option at the md height, the whole row its label; a separated row
+ * starts after a hairline. Checkboxes reuse Checkbox's generated control.
+ */
+export function cssMultiSelectClasses() {
+    return `.sw-multi-select {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.sw-multi-select-trigger {
+  align-items: center;
+  appearance: none;
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
+}
+
+.sw-multi-select-trigger::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  margin-inline-start: var(--sw-space-2);
+  transform: translateY(-25%) rotate(45deg);
+}
+
+.sw-multi-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-multi-select-trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-multi-select-label {
+  color: var(--sw-color-muted);
+  font-weight: 500;
+}
+
+.sw-multi-select-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-multi-select-panel {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  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);
+  display: flex;
+  flex-direction: column;
+  inset: auto;
+  margin: 0;
+  /* The viewport, not --sw-select-max: the list is short and should show
+     whole rather than scroll inside a 22rem cap. */
+  max-height: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  min-width: var(--sw-select-max);
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  width: max-content;
+  ${zIndex('popup')}
+}
+
+.sw-multi-select-commands {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--sw-space-1);
+  padding-bottom: var(--sw-space-1);
+}
+
+.sw-multi-select-row-separated {
+  border-top: 1px solid var(--sw-color-border);
+  margin-top: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-checkbox-label.sw-multi-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  padding-inline: var(--sw-space-2);
+  width: 100%;
+}
+
+.sw-multi-select-option:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-multi-select-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-multi-select-text {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-multi-select-trigger::after { border-color: CanvasText; }
+  .sw-multi-select-panel { border-color: CanvasText; }
+  .sw-multi-select-commands,
+  .sw-multi-select-row-separated { border-color: CanvasText; }
+}`;
+}
+export function multiSelectClassCatalog() {
+    return [
+        'sw-multi-select',
+        'sw-multi-select-trigger',
+        'sw-multi-select-label',
+        'sw-multi-select-summary',
+        'sw-multi-select-panel',
+        'sw-multi-select-commands',
+        'sw-multi-select-row',
+        'sw-multi-select-row-separated',
+        'sw-multi-select-option',
+        'sw-multi-select-icon',
+        'sw-multi-select-text',
+    ];
+}