@scalewing/react 1.28.0 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @scalewing/react
 
+## 1.29.0
+
+### Minor Changes
+
+- 98f6f89: `GlyphTile` (with `GlyphTileProps`, `GlyphTileHue`, `GlyphTileSize` and `glyphTileSizes`): a small rounded square in a categorical colour holding the consumer's glyph in white, the mark of a kind beside its name (`docs/requests/teisoro-glyph-tile.md`, Teisoro F-011 release R3).
+
+  - `hue` (`green`, `blue`, `orange`, `purple`, `teal`, `rose` or `neutral`, from `@scalewing/tokens` categorical colours), `size` (`sm` 24, `md` 28 by default, `lg` 32), `children` (the glyph, drawn at spacing step 4).
+  - Always `aria-hidden`; forced colors draw its edge. An unknown `hue` or `size` throws a `RangeError`.
+  - New generated custom properties `--sw-categorical-<colour>` and `--sw-categorical-on` in both schemes, and classes `sw-glyph-tile`, `sw-glyph-tile-<hue>` and `sw-glyph-tile-<size>`. Needs `@scalewing/tokens` 1.5.0. No new dependencies.
+
+- b8fe06f: `MultiSelect` (with `MultiSelectProps`, `MultiSelectOption` and `MultiSelectAlign`): several choices from a short list behind one trigger (`docs/requests/teisoro-multi-select.md`, Teisoro F-011 release R3).
+
+  - `label`, `options` (`{ value, label, icon?, separatorBefore? }`), `value`, `onChange` (checked values in the options' order), `allLabel`, `clearLabel`, `summary` (the trigger's words), `disabled`, `align`.
+  - A disclosure: a button with `aria-expanded` showing a group of native checkboxes, with All and Clear, on the popover layer beside the trigger; focus moves to the first checkbox, Escape returns it to the trigger, and focus or a press outside closes the panel.
+  - Blank words, no or duplicate options, an unknown value or `align` throw a `RangeError`.
+  - New generated `sw-multi-select-*` classes; the panel joins the popup layer in `css/stacking.ts`. No new tokens or dependencies.
+
+- 4a648a9: `SegmentedControl` item `icon` (`docs/requests/teisoro-segmented-control-icon.md`, Teisoro F-011 release R3): a consumer mark (such as a `GlyphTile`) before an item's label, `aria-hidden`. A track with icons takes the `md` control height and label type, a subtle track fill and a raised selected item; a track without icons is unchanged. New generated classes `sw-segmented-with-icons` and `sw-segmented-item-icon`. No new tokens or dependencies.
+
 ## 1.28.0
 
 ### Minor Changes

package/README.md

@@ -327,7 +327,7 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 />
 ```
 
-`SegmentedControl` is one exclusive choice shown as a track of segments (`role="radiogroup"`), named by `aria-label` or `aria-labelledby`, with a controlled `value` and `onChange`; `variant="filled"` gives every segment the same width and fills the selection with the accent, and `disabled` keeps the choice visible but inert. `error` puts a message under the track (`sw-field-error`), links it to the group by `aria-describedby` and sets `aria-invalid` and a danger outline on the group (`Mark` in forced colors); as `Field`'s it is announced politely from a live region that is always there, never as an alert, and an empty string is no error. `required` sets `aria-required` on the group; since the control has no label of its own, the element that labels it shows the mark. The track sits in a `.sw-segmented-field` wrapper that holds the message and takes the track's place in the layout, so a `ref` still reaches the `radiogroup`. `error` is for a control in a `Stack` or block layout, where the track keeps its width and the message wraps under it. While it shows a message the field is at least 24ch wide, capped at its container, so a short compact track does not squeeze the message into a column. In an `Inline` the field therefore grows and the rest of the row moves, while the track keeps its labels' width.
+`SegmentedControl` is one exclusive choice shown as a track of segments (`role="radiogroup"`), named by `aria-label` or `aria-labelledby`, with a controlled `value` and `onChange`; `variant="filled"` gives every segment the same width and fills the selection with the accent, and `disabled` keeps the choice visible but inert. `error` puts a message under the track (`sw-field-error`), links it to the group by `aria-describedby` and sets `aria-invalid` and a danger outline on the group (`Mark` in forced colors); as `Field`'s it is announced politely from a live region that is always there, never as an alert, and an empty string is no error. `required` sets `aria-required` on the group; since the control has no label of its own, the element that labels it shows the mark. The track sits in a `.sw-segmented-field` wrapper that holds the message and takes the track's place in the layout, so a `ref` still reaches the `radiogroup`. `error` is for a control in a `Stack` or block layout, where the track keeps its width and the message wraps under it. While it shows a message the field is at least 24ch wide, capped at its container, so a short compact track does not squeeze the message into a column. In an `Inline` the field therefore grows and the rest of the row moves, while the track keeps its labels' width. An item's `icon` (such as a small `GlyphTile`) sits before its label, hidden from assistive technology, so the label names the segment; when any item has one, a compact track takes the `md` control height and label type on a subtle fill, with the selected item raised, and a filled track keeps its look and only gains the marks.
 
 ```tsx
 <SegmentedControl
@@ -391,6 +391,44 @@ A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `
 
 `Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.
 
+`GlyphTile` is a small rounded square in a categorical colour with the consumer's glyph in white: the mark of a kind beside its name, such as a service in a list. `hue` is one of the `@scalewing/tokens` categorical colours (`green`, `blue`, `orange`, `purple`, `teal`, `rose`, or `neutral`); which kind takes which hue is yours. `size` is `sm` (24), `md` (28, the default) or `lg` (32); the glyph is drawn at spacing step 4 in white, which keeps 3:1 on every fill; pass the SVG (a Lucide component) as the tile's direct child, since only a direct-child SVG is sized. It is always `aria-hidden`, so put the kind's name in visible text beside it. An unknown `hue` or `size` throws a `RangeError`.
+
+```tsx
+<Inline gap={2} align="center">
+  <GlyphTile hue="teal">
+    <Waves />
+  </GlyphTile>
+  <Text>Reef</Text>
+</Inline>
+```
+
+`MultiSelect` is several choices from a short list behind one trigger, such as which kinds a list shows. The trigger reads the muted `label` and then `summary` (your words for what is chosen, such as "All entries" or "2 services") with a chevron; it opens a panel named by the label with `allLabel` and `clearLabel` commands over one checkbox per option, each with an optional `icon` (use a small `GlyphTile`, never a bare dot) and a hairline before an option with `separatorBefore`. `onChange` reports the checked values in the options' order. It is a disclosure of native checkboxes, not a listbox: the first checkbox takes focus as it opens, Escape closes it and returns focus to the trigger, focus or a press outside closes it, and disabling it while open closes it. Blank words, no or duplicate options, a value that is not an option, or an unknown `align` throw a `RangeError`.
+
+```tsx
+<MultiSelect
+  label="Show"
+  summary={
+    shown.length === options.length ? 'All sightings' : `${shown.length} kinds`
+  }
+  options={[
+    {
+      value: 'forest',
+      label: 'Forest',
+      icon: (
+        <GlyphTile hue="green" size="sm">
+          <Trees />
+        </GlyphTile>
+      ),
+    },
+    { value: 'station', label: 'Station moves', separatorBefore: true },
+  ]}
+  value={shown}
+  onChange={setShown}
+  allLabel="All"
+  clearLabel="Clear"
+/>
+```
+
 `Notice` is a tinted note in the page's flow (`tone`: `info`, `success`, `warning` or `danger`). The fill is the tone mixed into the surface (the accent tint for `info`) and the words are the tone moved toward the text color, so they keep 4.5:1 on the fill in every palette (only where a palette's own `danger` is under 4.5:1 on its surface does the note stay at least as readable as that). `title` is a bold lead; a text message (values interpolated in it included) shares its row while it fits and wraps under it otherwise, and a message with any element (a `span`, or a sentence and a `Checkbox` or `Field` in a `Stack`) is stacked under it. Write the message as plain text or a `span`, not a `Text`, which brings its own color. A control inside keeps its own colors; its muted description takes the notice's ink so it stays readable on the fill. `action` is one link or small `Button` at the end of the row; `icon` is a consumer glyph before the text, hidden from assistive technology. `danger` is `role="alert"` and the other tones `role="status"`; `role="none"` is for a note that is part of the page from the start (no live region). Screen readers announce an `alert` that appears, but not reliably a `status` mounted with its words: to have a status heard, keep the Notice mounted and change its words, or move focus to it. It never dismisses itself. Pass `tabIndex={-1}` and a `ref` to move focus to it. `variant="band"` makes it a full-width square strip of page chrome in caption type with its words centered, at least the `xs` control height, such as an environment strip first on the page (`<Notice tone="warning" variant="band" title="Field station">Records here stay out of the census.</Notice>`). It is as wide as its container, so put it outside any padded column, as the page's first child. A glyph or an action stays on the words' row and the words wrap. A band has no live region unless you pass `role`. An unknown `tone`, `role` or `variant`, a blank `title`, or a note with neither a title nor a message throws a `RangeError`.
 
 ```tsx

package/dist/components/Checkbox.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { CheckboxControl } from './checkbox/CheckboxControl.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 export function Checkbox({ label, checked, onCheckedChange, disabled = false, required = false, description, error, }) {
     const descriptionId = useId();
@@ -11,8 +12,8 @@ export function Checkbox({ label, checked, onCheckedChange, disabled = false, re
     ]
         .filter((id) => id !== null)
         .join(' ');
-    return (_jsxs("div", { className: "sw-checkbox", children: [_jsxs("label", { className: "sw-checkbox-label", children: [_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), checked: checked, className: "sw-checkbox-input", disabled: disabled, onChange: (event) => {
-                                    if (!disabled)
-                                        onCheckedChange(event.currentTarget.checked);
-                                }, required: required, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }), _jsx("span", { className: "sw-checkbox-text", children: label })] }), description ? (_jsx("span", { className: "sw-checkbox-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-checkbox-error", id: errorId, message: error })] }));
+    return (_jsxs("div", { className: "sw-checkbox", children: [_jsxs("label", { className: "sw-checkbox-label", children: [_jsx(CheckboxControl, { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), checked: checked, disabled: disabled, onChange: (event) => {
+                            if (!disabled)
+                                onCheckedChange(event.currentTarget.checked);
+                        }, required: required }), _jsx("span", { className: "sw-checkbox-text", children: label })] }), description ? (_jsx("span", { className: "sw-checkbox-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-checkbox-error", id: errorId, message: error })] }));
 }

package/dist/components/GlyphTile.d.ts

@@ -0,0 +1,21 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type GlyphTileSize, glyphTileSizes } from '../css/css-glyph-tile.js';
+export { glyphTileSizes };
+export type { GlyphTileSize };
+/** A categorical hue (`green`, `blue`, `orange`, `purple`, `teal`, `rose`) or `neutral`. */
+export type GlyphTileHue = CategoricalColor;
+export type GlyphTileProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-hidden'> & {
+    /** The categorical fill: a hue that tells a kind apart, or `neutral`. */
+    hue: GlyphTileHue;
+    /** `sm` 24, `md` 28 (default), `lg` 32. */
+    size?: GlyphTileSize;
+    /** The consumer's glyph (Lucide), drawn in white at spacing step 4. */
+    children: ReactNode;
+};
+/**
+ * A small rounded square in a categorical colour holding a white glyph: a
+ * kind's mark beside its name, such as a service in a list. Decorative
+ * (`aria-hidden`): the visible label beside it carries the meaning.
+ */
+export declare function GlyphTile({ children, className, hue, size, ...rest }: GlyphTileProps): import("react").JSX.Element;

package/dist/components/GlyphTile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isCategoricalColor } from '@scalewing/tokens';
+import { cx } from '../class-names.js';
+import { glyphTileSizes } from '../css/css-glyph-tile.js';
+export { glyphTileSizes };
+/**
+ * A small rounded square in a categorical colour holding a white glyph: a
+ * kind's mark beside its name, such as a service in a list. Decorative
+ * (`aria-hidden`): the visible label beside it carries the meaning.
+ */
+export function GlyphTile({ children, className, hue, size = 'md', ...rest }) {
+    if (!isCategoricalColor(hue))
+        throw new RangeError(`Unknown GlyphTile hue: ${String(hue)}`);
+    if (!glyphTileSizes.includes(size))
+        throw new RangeError(`Unknown GlyphTile size: ${String(size)}`);
+    return (_jsx("span", { ...rest, "aria-hidden": "true", className: cx('sw-glyph-tile', `sw-glyph-tile-${hue}`, `sw-glyph-tile-${size}`, className), children: children }));
+}

package/dist/components/MultiSelect.d.ts

@@ -0,0 +1,10 @@
+import { type MultiSelectProps } from './multi-select/types.js';
+export type { MultiSelectAlign, MultiSelectOption, MultiSelectProps, } from './multi-select/types.js';
+/**
+ * Several choices from a short list behind one trigger: "Show All entries ▾"
+ * opens a panel with All, Clear and a checkbox per option. A disclosure (a
+ * button that shows a group of native checkboxes), not a listbox, so each
+ * option is an ordinary checkbox to every user. The consumer owns the
+ * checked values and the trigger's summary words.
+ */
+export declare function MultiSelect({ align, allLabel, clearLabel, disabled, label, onChange, options, summary, value, }: MultiSelectProps): import("react").JSX.Element;

package/dist/components/MultiSelect.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { MultiSelectPanel } from './multi-select/MultiSelectPanel.js';
+import { assertMultiSelect } from './multi-select/validate.js';
+/**
+ * Several choices from a short list behind one trigger: "Show All entries ▾"
+ * opens a panel with All, Clear and a checkbox per option. A disclosure (a
+ * button that shows a group of native checkboxes), not a listbox, so each
+ * option is an ordinary checkbox to every user. The consumer owns the
+ * checked values and the trigger's summary words.
+ */
+export function MultiSelect({ align = 'start', allLabel, clearLabel, disabled = false, label, onChange, options, summary, value, }) {
+    assertMultiSelect({
+        allLabel,
+        align,
+        clearLabel,
+        label,
+        options,
+        summary,
+        value,
+    });
+    const panelId = useId();
+    const triggerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const checked = new Set(value);
+    const shown = open && !disabled;
+    // Disabling while open closes the panel for good (state adjusted during
+    // render), so enabling it again never reopens it, or pulls focus into it,
+    // on its own.
+    if (disabled && open)
+        setOpen(false);
+    function close(restoreFocus) {
+        setOpen(false);
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    }
+    function report(next) {
+        onChange(options
+            .filter((option) => next.has(option.value))
+            .map((option) => option.value));
+    }
+    function onToggle(changed, isChecked) {
+        const next = new Set(checked);
+        if (isChecked)
+            next.add(changed);
+        else
+            next.delete(changed);
+        report(next);
+    }
+    function onTriggerKeyDown(event) {
+        if (event.key === 'ArrowDown' && !shown) {
+            event.preventDefault();
+            setOpen(true);
+        }
+        else if (event.key === 'Escape' && shown) {
+            event.preventDefault();
+            close(true);
+        }
+    }
+    return (_jsxs("div", { className: "sw-multi-select", children: [_jsxs("button", { "aria-controls": shown ? panelId : undefined, "aria-expanded": shown, className: "sw-multi-select-trigger", disabled: disabled, onClick: () => (shown ? close(true) : setOpen(true)), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: [_jsx("span", { className: "sw-multi-select-label", children: label }), ' ', _jsx("span", { className: "sw-multi-select-summary", children: summary })] }), shown ? (_jsx(MultiSelectPanel, { align: align, allLabel: allLabel, checked: checked, clearLabel: clearLabel, id: panelId, label: label, onAll: () => report(new Set(options.map((option) => option.value))), onClear: () => report(new Set()), onClose: close, onToggle: onToggle, options: options, triggerRef: triggerRef })) : null] }));
+}

package/dist/components/SegmentedControl.d.ts

@@ -2,6 +2,14 @@ import { type ReactNode } from 'react';
 export type SegmentedItem = {
     id: string;
     label: ReactNode;
+    /**
+     * A consumer mark before the label, such as a `GlyphTile` or a Lucide
+     * glyph, hidden from assistive technology (the label names the item).
+     * When any item has one, every item of a compact track takes the `md`
+     * control height and label type on a subtle track; a filled track keeps
+     * its look and gains the marks. A falsy value (`0`, `''`) is no icon.
+     */
+    icon?: ReactNode;
 };
 type SegmentedLabel = {
     'aria-label': string;

package/dist/components/SegmentedControl.js

@@ -5,6 +5,7 @@ import { cx } from '../class-names.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
+    const withIcons = items.some((item) => item.icon);
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
             return;
@@ -22,12 +23,12 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
     }
     // The wrapper is always rendered, so an error that appears later swaps
     // text into a live region that already exists and the group keeps focus.
-    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
                     const selected = item.id === value;
-                    return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
+                    return (_jsxs("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                             if (!selected) {
                                 onChange?.(item.id);
                             }
-                        }, role: "radio", type: "button", children: item.label }, item.id));
+                        }, role: "radio", type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/checkbox/CheckboxControl.d.ts

@@ -0,0 +1,9 @@
+import { type InputHTMLAttributes } from 'react';
+type CheckboxControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+/**
+ * The native checkbox and its drawn mark, the one markup Checkbox's
+ * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
+ * and MultiSelect's rows so the two cannot drift apart.
+ */
+export declare function CheckboxControl(props: CheckboxControlProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox/CheckboxControl.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The native checkbox and its drawn mark, the one markup Checkbox's
+ * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
+ * and MultiSelect's rows so the two cannot drift apart.
+ */
+export function CheckboxControl(props) {
+    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
+}

package/dist/components/multi-select/MultiSelectPanel.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import { type MultiSelectAlign, type MultiSelectOption } from './types.js';
+type MultiSelectPanelProps = {
+    id: string;
+    label: string;
+    align: MultiSelectAlign;
+    options: readonly MultiSelectOption[];
+    checked: ReadonlySet<string>;
+    allLabel: string;
+    clearLabel: string;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    onToggle: (value: string, checked: boolean) => void;
+    onAll: () => void;
+    onClear: () => void;
+    /** Closes the panel, returning focus to the trigger when asked. */
+    onClose: (restoreFocus: boolean) => void;
+};
+/**
+ * The open panel: a group named by the label on the popover layer beside
+ * the trigger, with All and Clear over one checkbox per option. The first
+ * checkbox takes focus as it opens; Escape closes it and returns focus to
+ * the trigger; focus or a press moving outside it closes it.
+ */
+export declare function MultiSelectPanel({ align, allLabel, checked, clearLabel, id, label, onAll, onClear, onClose, onToggle, options, triggerRef, }: MultiSelectPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/multi-select/MultiSelectPanel.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from 'react';
+import { Button } from '../Button.js';
+import { CheckboxControl } from '../checkbox/CheckboxControl.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+/**
+ * The open panel: a group named by the label on the popover layer beside
+ * the trigger, with All and Clear over one checkbox per option. The first
+ * checkbox takes focus as it opens; Escape closes it and returns focus to
+ * the trigger; focus or a press moving outside it closes it.
+ */
+export function MultiSelectPanel({ align, allLabel, checked, clearLabel, id, label, onAll, onClear, onClose, onToggle, options, triggerRef, }) {
+    const panelRef = useRef(null);
+    useAnchoredPopover(panelRef, triggerRef, triggerRef, () => onClose(false), {
+        align,
+        flipInline: true,
+    });
+    useLayoutEffect(() => {
+        panelRef.current
+            ?.querySelector('.sw-multi-select-option input')
+            ?.focus();
+    }, []);
+    function onKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        onClose(true);
+    }
+    function onBlur(event) {
+        const next = event.relatedTarget;
+        if (!(next instanceof Node))
+            return;
+        if (panelRef.current?.contains(next) || triggerRef.current?.contains(next))
+            return;
+        onClose(false);
+    }
+    return (_jsxs("div", { "aria-label": label, className: "sw-multi-select-panel", id: id, onBlur: onBlur, onKeyDown: onKeyDown, ref: panelRef, role: "group", children: [_jsxs("div", { className: "sw-multi-select-commands", children: [_jsx(Button, { onPress: onAll, size: "sm", variant: "ghost", children: allLabel }), _jsx(Button, { onPress: onClear, size: "sm", variant: "ghost", children: clearLabel })] }), options.map((option) => (_jsx("div", { className: option.separatorBefore
+                    ? 'sw-multi-select-row sw-multi-select-row-separated'
+                    : 'sw-multi-select-row', children: _jsxs("label", { className: "sw-checkbox-label sw-multi-select-option", children: [_jsx(CheckboxControl, { checked: checked.has(option.value), onChange: (event) => onToggle(option.value, event.currentTarget.checked) }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-multi-select-icon", children: option.icon })) : null, _jsx("span", { className: "sw-multi-select-text", children: option.label })] }) }, option.value)))] }));
+}

package/dist/components/multi-select/types.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type InlineAlign } from '../../anchored-position.js';
+/** One choice in a MultiSelect. */
+export type MultiSelectOption = {
+    value: string;
+    label: string;
+    /** A consumer mark before the label, such as a `GlyphTile`; hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Draws a hairline before this option, to set a group of options apart. */
+    separatorBefore?: boolean;
+};
+export type MultiSelectAlign = InlineAlign;
+export type MultiSelectProps = {
+    /**
+     * What is chosen, such as "Show": the muted lead of the trigger and the
+     * name of the panel of checkboxes.
+     */
+    label: string;
+    options: readonly MultiSelectOption[];
+    /** The checked values; `onChange` reports them in the options' order. */
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+    /** The command that checks every option, such as "All". */
+    allLabel: string;
+    /** The command that clears every option, such as "Clear". */
+    clearLabel: string;
+    /**
+     * The trigger's words after the label, naming what is chosen, such as
+     * "All entries" or "2 services". The consumer writes it.
+     */
+    summary: string;
+    disabled?: boolean;
+    /** The trigger edge the panel lines up with (default start). */
+    align?: MultiSelectAlign;
+};

package/dist/components/multi-select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/multi-select/validate.d.ts

@@ -0,0 +1,3 @@
+import { type MultiSelectProps } from './types.js';
+/** Fails closed on words or options a MultiSelect cannot show. */
+export declare function assertMultiSelect({ allLabel, align, clearLabel, label, options, summary, value, }: Pick<MultiSelectProps, 'allLabel' | 'align' | 'clearLabel' | 'label' | 'options' | 'summary' | 'value'>): void;

package/dist/components/multi-select/validate.js

@@ -0,0 +1,25 @@
+function isBlank(text) {
+    return typeof text !== 'string' || !text.trim();
+}
+/** Fails closed on words or options a MultiSelect cannot show. */
+export function assertMultiSelect({ allLabel, align, clearLabel, label, options, summary, value, }) {
+    if (isBlank(label) || isBlank(summary))
+        throw new RangeError('MultiSelect needs a label and a summary');
+    if (isBlank(allLabel) || isBlank(clearLabel))
+        throw new RangeError('MultiSelect needs an allLabel and a clearLabel');
+    if (options.length === 0)
+        throw new RangeError('MultiSelect needs at least one option');
+    const values = new Set();
+    for (const option of options) {
+        if (isBlank(option.value) || isBlank(option.label))
+            throw new RangeError('MultiSelect options need a value and a label');
+        if (values.has(option.value))
+            throw new RangeError(`Duplicate MultiSelect value: ${option.value}`);
+        values.add(option.value);
+    }
+    for (const checked of value)
+        if (!values.has(checked))
+            throw new RangeError(`Unknown MultiSelect value: ${checked}`);
+    if (align !== undefined && align !== 'start' && align !== 'end')
+        throw new RangeError(`Unknown MultiSelect align: ${String(align)}`);
+}

package/dist/css/css-components.js

@@ -15,12 +15,14 @@ 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';
@@ -60,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);
@@ -144,6 +147,8 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssMultiSelectClasses()}
+
 ${cssActionBarClasses()}
 
 ${cssSwitchClasses()}
@@ -154,6 +159,8 @@ ${cssProgressClasses()}
 
 ${cssNoticeClasses()}
 
+${cssGlyphTileClasses()}
+
 ${cssTooltipClasses()}
 
 ${cssInfoTipClasses()}

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',
+    ];
+}

package/dist/css/css-segmented.js

@@ -1,6 +1,60 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
+const label = typographyVariants.label;
+/*
+ * Items with a mark (a glyph tile before the label) centre the mark and
+ * the label a space-2 gap apart; the mark keeps its size. On the compact
+ * track every item also takes the md control height and label type, so
+ * the row stays even; the track is the subtle fill (two classes, so
+ * reduced transparency keeps it) and the selected item is the surface
+ * raised by the small elevation, so the choice shows on a white canvas
+ * too. A filled track keeps its own look and only gains the marks. The
+ * error outline is restated after these rules so an icon track keeps it.
+ * In forced colours the selected item is outlined in Highlight; a focused
+ * selected item keeps that outline, offset by the focus ring's offset.
+ */
+function iconRules() {
+    const compact = '.sw-segmented-with-icons:not(.sw-segmented-filled)';
+    return `.sw-segmented${compact} {
+  background: var(--sw-color-subtle);
+  border-color: transparent;
+}
+
+${compact} .sw-segmented-item-selected {
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-segmented-with-icons .sw-segmented-item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  justify-content: center;
+}
+
+${compact} .sw-segmented-item {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented-item-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-segmented.sw-segmented-with-icons[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented${compact} { border-color: CanvasText; }
+  ${compact} .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
+}`;
+}
 /*
  * The control and its error message. The wrapper takes the track's place in
  * the layout: inline beside text and stretched in a Stack (compact), block
@@ -106,6 +160,8 @@ export function cssSegmentedClasses() {
   color: var(--sw-color-onAccent);
 }
 
+${iconRules()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -122,6 +178,8 @@ export function segmentedClassCatalog() {
         'sw-segmented-item',
         'sw-segmented-item-selected',
         'sw-segmented-filled',
+        'sw-segmented-with-icons',
+        'sw-segmented-item-icon',
         'sw-segmented-disabled',
     ];
 }

package/dist/css/css-variables.js

@@ -1,10 +1,18 @@
-import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+import { categoricalColorKeys, categoricalColors, onCategorical, controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
 function colorDeclarations(theme) {
     return [
         ...semanticColorKeys.map((key) => `  --sw-color-${key}: ${theme.colors[key]};`),
         `  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`,
     ].join('\n');
 }
+/* The categorical fills of the theme's scheme and the glyph drawn on them. */
+function categoricalDeclarations(theme) {
+    const fills = categoricalColors[theme.colorScheme];
+    return [
+        ...categoricalColorKeys.map((key) => `  --sw-categorical-${key}: ${fills[key]};`),
+        `  --sw-categorical-on: ${onCategorical};`,
+    ].join('\n');
+}
 function glassDeclarations(theme) {
     return `  --sw-glass-blur: ${theme.glass.blur}px;
   --sw-glass-saturate: ${theme.glass.saturate};
@@ -54,11 +62,13 @@ export function cssVariables(light, dark) {
     return `:root,
 [data-theme='light'] {
 ${colorDeclarations(light)}
+${categoricalDeclarations(light)}
 ${sharedDeclarations(light)}
 }
 
 [data-theme='dark'] {
 ${colorDeclarations(dark)}
+${categoricalDeclarations(dark)}
 ${sharedDeclarations(dark)}
 }`;
 }

package/dist/css/stacking.js

@@ -14,8 +14,8 @@
  *    surface that scrolls up under it (the header is the page's way back, the
  *    strip its way between sections, and a popup opens downward).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, Tooltip, the DateField and CalendarButton calendar) over
- *    everything in the page.
+ *    list, MultiSelect panel, Tooltip, the DateField and CalendarButton
+ *    calendar) over everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
  */
@@ -33,6 +33,9 @@ const openPopups = [
     '.sw-select-list',
     // Rendered only while open; on the top layer where the popover API exists.
     '.sw-action-menu-list',
+    // MultiSelect's panel. Rendered only while open; on the top layer where
+    // the popover API exists.
+    '.sw-multi-select-panel',
     '.sw-tooltip:not([hidden])',
     // DateField and CalendarButton share it. Rendered only while open; on the
     // top layer where the popover API exists.

package/dist/css/stylesheet.js

@@ -10,6 +10,7 @@ import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
+import { glyphTileClassCatalog } from './css-glyph-tile.js';
 import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
@@ -37,6 +38,7 @@ import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { selectClassCatalog } from './css-select.js';
+import { multiSelectClassCatalog } from './css-multi-select.js';
 import { splitClassCatalog } from './css-split.js';
 import { toastClassCatalog } from './css-toast.js';
 import { toastCardClassCatalog } from './css-toast-card.js';
@@ -71,6 +73,7 @@ export function utilityClassCatalog() {
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...multiSelectClassCatalog(),
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
@@ -80,6 +83,7 @@ export function utilityClassCatalog() {
         ...spinnerClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
+        ...glyphTileClassCatalog(),
         ...tooltipClassCatalog(),
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, }
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
+export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, type NoticeProps, type NoticeRole, type NoticeTone, type NoticeVariant, } from './components/Notice.js';
 export { Progress, progressTones, type ProgressProps, type ProgressTone, } from './components/Progress.js';
 export { Tooltip, type TooltipProps, type TooltipRelationship, } from './components/Tooltip.js';
@@ -35,6 +36,7 @@ export { SectionNav, type SectionNavItem, type SectionNavProps, } from './compon
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
+export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableColumnWidth, type TableDensity, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableSort, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';

package/dist/index.js

@@ -6,6 +6,7 @@ export { DateField, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
+export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, } from './components/Notice.js';
 export { Progress, progressTones, } from './components/Progress.js';
 export { Tooltip, } from './components/Tooltip.js';
@@ -31,6 +32,7 @@ export { Nav } from './components/Nav.js';
 export { SectionNav, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
+export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
 export { Text, } from './components/Text.js';

package/dist/styles.css

@@ -19,6 +19,14 @@
   --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
   --sw-button-secondary-border: #D2D2D7;
+  --sw-categorical-green: #2E8F47;
+  --sw-categorical-blue: #0A7AFF;
+  --sw-categorical-orange: #D57F00;
+  --sw-categorical-purple: #8E5CD9;
+  --sw-categorical-teal: #1A96AD;
+  --sw-categorical-rose: #C2415D;
+  --sw-categorical-neutral: #8E8E93;
+  --sw-categorical-on: #FFFFFF;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -84,6 +92,14 @@
   --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
   --sw-button-secondary-border: #3A3A3C;
+  --sw-categorical-green: #2E8F47;
+  --sw-categorical-blue: #0A7AFF;
+  --sw-categorical-orange: #D57F00;
+  --sw-categorical-purple: #8E5CD9;
+  --sw-categorical-teal: #1A96AD;
+  --sw-categorical-rose: #C2415D;
+  --sw-categorical-neutral: #8E8E93;
+  --sw-categorical-on: #FFFFFF;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -812,8 +828,8 @@ body {
 }
 
 /* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
-.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
-.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
+.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
+.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
   position: relative;
   z-index: 3;
 }
@@ -1348,6 +1364,45 @@ body {
   color: var(--sw-color-onAccent);
 }
 
+.sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled) {
+  background: var(--sw-color-subtle);
+  border-color: transparent;
+}
+
+.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item-selected {
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-segmented-with-icons .sw-segmented-item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  justify-content: center;
+}
+
+.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item {
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented-item-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-segmented.sw-segmented-with-icons[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled) { border-color: CanvasText; }
+  .sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
+}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -2717,6 +2772,138 @@ body {
   }
 }
 
+.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: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  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 {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  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;
+  z-index: 10;
+}
+
+.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: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  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; }
+}
+
 .sw-action-bar {
   align-items: center;
   background: var(--sw-glass-fill);
@@ -3126,6 +3313,39 @@ body {
   .sw-notice-band { border-width: 0 0 1px; }
 }
 
+.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);
+}
+
+.sw-glyph-tile-green { --sw-glyph-tile-fill: var(--sw-categorical-green); }
+.sw-glyph-tile-blue { --sw-glyph-tile-fill: var(--sw-categorical-blue); }
+.sw-glyph-tile-orange { --sw-glyph-tile-fill: var(--sw-categorical-orange); }
+.sw-glyph-tile-purple { --sw-glyph-tile-fill: var(--sw-categorical-purple); }
+.sw-glyph-tile-teal { --sw-glyph-tile-fill: var(--sw-categorical-teal); }
+.sw-glyph-tile-rose { --sw-glyph-tile-fill: var(--sw-categorical-rose); }
+.sw-glyph-tile-neutral { --sw-glyph-tile-fill: var(--sw-categorical-neutral); }
+
+.sw-glyph-tile-sm { height: var(--sw-space-5); width: var(--sw-space-5); }
+.sw-glyph-tile-md { height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
+.sw-glyph-tile-lg { height: var(--sw-space-6); width: var(--sw-space-6); }
+
+@media (forced-colors: active) {
+  .sw-glyph-tile { border: 1px solid CanvasText; color: CanvasText; }
+}
+
 .sw-tooltip-anchor {
   display: inline-flex;
   position: relative;
@@ -4624,6 +4844,7 @@ body {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-multi-select-panel,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "^1.4.0"
+    "@scalewing/tokens": "^1.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",