@scalewing/react 1.45.0 → 1.46.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @scalewing/react
 
+## 1.46.0
+
+### Minor Changes
+
+- f93ec57: `Button` `width`: `'content'` (the default, as before) or `'full'`, which fills the container's inline size in a `Stack`, a `Grid` cell or a column, and in an `Inline` row takes the space its siblings leave (as a full `Select` does; in a wrapping row it grows from its words and wraps), such as an Edit beside a ••• `ActionMenu` that keeps its own square at the row's end. The words stay centred. An unknown width throws a `RangeError`. New class `sw-button-full`; `ButtonWidth` and `buttonWidths` are exported. No new tokens or dependencies. Request: `docs/requests/teisoro-button-full-width.md`.
+- 58bcede: `FileField` `onRemove` and `removeLabel`: Remove beside a chosen file, a neutral button after the change button in the full field, named by its words and the label ("Remove Cover photo"); the consumer clears `value` and focus moves to the empty field. `FileField` `compact`: the field at a text field's height for a form row; chosen, the thumbnail (or mark) and the name cut to one line are the change button, named by the label and `changeLabel` and described by the name and detail (read, not drawn), with Remove as a quiet button at the row's end. Set `onRemove` and `removeLabel` together (a `RangeError` otherwise, and for blank words). New classes `sw-file-field-compact`, `sw-file-field-pick`, `sw-file-field-remove` and `sw-file-field-actions`; disabled, the compact row and its Remove fade alike. A field without them renders as before. No new tokens or dependencies. Request: `docs/requests/teisoro-file-field-compact.md`.
+- 0441a50: `ListGroup` `variant="tiles"`: the same one list (its name, its items and their count) with its rows laid out as tiles, each row its own bordered panel on the surface and no hairline between them, in `tileColumns` equal columns (2, 3 by default, or 4) a space-3 apart from `md` up, and one a row below it whatever `tileColumns` says, such as a strip of new arrivals. A row's press fill and inset focus ring stay inside its tile. Tiles take no `maxHeight` or `footer`, and `tileColumns` needs `tiles` (a `RangeError`, as for a count other than 2, 3 or 4). New classes `sw-list-group-tiles` and `sw-list-group-tiles-2`, `-3`, `-4`; `listTileColumnCounts` and `ListGroupTileColumns` are exported. No new tokens or dependencies. Request: `docs/requests/teisoro-list-group-tiles.md`.
+- ccc2f79: `Select` `aria-labelledby`: in place of `label`, the id of words the page already draws, such as a label above a choice that is a `SegmentedControl` on a wide screen and a `Select` on a phone. The select then draws no label of its own, so a screen reader meets the words once instead of the page's words followed by the select's hidden copy; the trigger and its open list are named by them. `required` still sets `aria-required` and draws no mark. `label` and `aria-labelledby` are exclusive (a type union, and a `RangeError` for neither, a blank id, both, or `requiredMark` with `aria-labelledby`). A select with `label` renders exactly as before. **Types:** `SelectProps` is now a union (`SelectNaming`), so `label` is optional on the type. Code that reads `props.label` from a `SelectProps` narrows it first, for example a wrapper typed `SelectProps & { label: string }`, or a check `if (props.label !== undefined)`. No new classes, tokens or dependencies. Request: `docs/requests/teisoro-select-labelledby.md`.
+
 ## 1.45.0
 
 ### Minor Changes

package/README.md

@@ -144,6 +144,23 @@ A disabled native text control (`<input>`, `<select>` or `<textarea>` on the can
 
 `FileField` is one file chosen with the system picker or dropped on the field, with `Field`'s `label` (above it, or hidden with `labelVisuallyHidden`), `description` and `error` (a polite live region in place of the hint, the frame's edge in the danger color, `Mark` in forced colors). Empty, it is one wide zone on the subtle fill, a button named by the label and `chooseLabel` ("Field guide Choose a PDF"), with `dropLabel` ("or drop it here") muted after it where the pointer can drag (left out on a coarse pointer). Chosen (`value={{ name, detail? }}`), it shows the consumer's `icon` (hidden from assistive technology), the file's name over the muted `detail` and a neutral button named by the label and `changeLabel`, described by the name and detail. Either button opens the picker (the native input is hidden and out of the Tab order, its `accept` the list the picker offers); `onChange` receives the `File` chosen or dropped, the first of several, and when a choice or a drop swaps the zone and the chosen row while focus is in the field, focus moves to the button now there (focus the person moved elsewhere is never taken back). A file dragged over the field draws the accent edge and tint, its words in the text color. It never reads, checks or uploads the file, and a dropped file is not filtered by `accept`: check what you receive (type, size, its header) and say why in `error`, keeping the earlier `value` or none. `disabled` blocks the picker, refuses a dropped file and dashes the frame. `id` prefixes the ids of the field's parts. An empty `label`, `chooseLabel` or `changeLabel`, a blank `dropLabel`, or a `value` with no name or a blank detail throws a `RangeError`.
 
+`FileField` `onRemove` with `removeLabel` (set both or neither) adds Remove beside a chosen file: a neutral button after the change button in the full field (the two together at the row's end), named by its words and the label ("Remove Cover photo"), so two fields' Removes are told apart. It calls `onRemove`, and the consumer clears `value`; focus then moves to the empty field's button. Nothing is removed while the field is empty, and `disabled` disables it too. A lone `onRemove` or `removeLabel`, or blank `removeLabel` words, throws a `RangeError`.
+
+`FileField` `compact` draws the field at a text field's height (the md control, 44 px) for a form row beside other fields, such as a cover photo beside a title. Empty, the zone holds the choose words at its start. Chosen, the row is one button, the thumbnail (or the mark) and the file's name in the body weight cut to one line with an ellipsis, named by the label and `changeLabel` ("Cover photo Choose another") and described by the name and `detail` (read, not drawn); Remove, a quiet ghost button, ends the row. The label, description and error are as in the full field.
+
+```tsx
+<FileField
+  label="Cover photo"
+  compact
+  chooseLabel="Choose a photo"
+  changeLabel="Choose another"
+  removeLabel="Remove"
+  value={cover}
+  onChange={choose}
+  onRemove={() => setCover(null)}
+/>
+```
+
 A chosen photo can show itself: `value.preview` is the address of a small image of it, such as an object URL the consumer made from the `File` (and revokes when another is chosen), drawn as a 3:2 thumbnail (a space-8 wide, a space-6 tall, cropped to fill, at the small radius) before the name in place of `icon`. It is decorative (`alt=""`): the name beside it says which file it is. A blank `preview` throws a `RangeError`.
 
 ```tsx
@@ -178,6 +195,18 @@ A chosen photo can show itself: `value.preview` is the address of a small image
 
 `Select` is a labeled listbox menu: supply `label`, `options` (`value` and `label`), a controlled `value` and `onChange`; `size="xs"` and `labelVisuallyHidden` are for toolbar chrome, and `action` is a last listbox command that never becomes the value. The closed trigger matches `Field`: its text is centred in the control, it ends in the `Accordion` chevron, and it is as wide as its longest option (as a native select is), so it keeps its width when the value changes; past the available width the label ellipsizes. The option labels that size it are drawn by CSS from `data-label`, so the trigger's text content and accessible value are only the current label. Its label is drawn as `Field`'s (the same label words and mark inside a `<label>` that keeps the canvas type), so a `Select` beside a `Field` lines up at the label and the control.
 
+`Select` `aria-labelledby`, in place of `label`, names the select by words the page already draws, such as a label above a choice that is a `SegmentedControl` on a wide screen and a `Select` on a phone. The select then draws no label of its own, hidden or shown, so a screen reader meets the words once (as the page's text, then as the combobox's name) instead of the page's words followed by the select's hidden copy of them; the open list is named by the same words. `required` still sets `aria-required` but draws no mark, since the page owns the words. `label` and `aria-labelledby` are exclusive: a blank `label` with no `aria-labelledby`, a blank `aria-labelledby`, or `aria-labelledby` with `label`, `labelVisuallyHidden` or `requiredMark` throws a `RangeError`. The id must name an element in the page while the select is shown: a missing one leaves the select unnamed, which neither the types nor the select can check.
+
+```tsx
+<Text as="span" id="den-habitat" variant="label">Den habitat</Text>
+<Select
+  aria-labelledby="den-habitat"
+  value={habitat}
+  onChange={setHabitat}
+  options={habitats}
+/>
+```
+
 `Select` `placeholder` shows in the closed trigger, in the muted color, while `value` matches no option (such as `''`); it is not an option, is never selected in the list and never becomes the value, and it counts toward the trigger's width. `required` marks the label with `Field`'s `aria-hidden` asterisk and sets `aria-required` on the trigger. `error` renders a message under the control (`sw-field-error`), links it by `aria-describedby`, sets `aria-invalid` and the danger border; like `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. A blank `placeholder` throws a `RangeError`.
 
 ```tsx
@@ -269,6 +298,22 @@ A `Button`'s own children are laid out in a row one token gap apart (spacing ste
 
 On the web, `variant="neutral"` is a quiet grey fill (the muted color at 16 %, the fill of an open menu row) with its words in the text color and no border: an action beside the primary that should not draw the eye, such as a sheet's Cancel. It is web only (`webButtonVariants`; the shared `buttonVariants` in `@scalewing/tokens` and React Native do not have it). `disabledAppearance="neutral"` (default `"faded"`) draws a disabled button on that grey with its words in the muted color at 48 % (about #AEAEAE on the grey) and full opacity, whatever its variant, instead of fading its own fill (a disabled accent reads as a paler accent); a `ghost` button, which has no fill, still fades. The button is still a disabled `button`; forced colors draw it as any disabled button. An unknown `disabledAppearance` throws a `RangeError`.
 
+`Button` `width` is `'content'` (the default: as wide as its words) or `'full'`: the button fills its container's inline size in a `Stack`, a `Grid` cell or any column, and in an `Inline` row takes the space its siblings leave, as a full `Select` does, so an Edit beside a ••• `ActionMenu` fills the row and the menu keeps its own square at the end. The row rule holds for a `Button` that is a direct child of the `Inline`; wrapped in another box it fills that box instead. In a wrapping `Inline` (`wrap`) a full button grows from its words' width and moves to a line of its own when the row runs out, rather than shrinking past its words. Inside a `ButtonGroup` it is not needed: the group already stacks its buttons full width below `md`. The words stay centred. An unknown width throws a `RangeError`. The class is `sw-button-full`.
+
+```tsx
+<Inline gap={2}>
+  <Button variant="neutral" width="full" onPress={edit}>
+    Edit
+  </Button>
+  <ActionMenu
+    label="More for Heron log"
+    items={items}
+    trigger={<Dots />}
+    triggerAppearance="icon"
+  />
+</Inline>
+```
+
 A `Button` with `aria-disabled="true"` (not `disabled`) looks disabled, faded or, with `disabledAppearance="neutral"`, on the neutral grey, with `GrayText` in forced colors, yet stays a focusable, pressable `button`: its `onPress` still runs, so a submit pressed while off can take the person to what is missing. Its look alone does not say what is missing: a press while off should show the message of the first thing to fix. Use `disabled` when a press should do nothing.
 
 A `Button` that toggles something passes `aria-pressed`. The pressed button gets a 2 px accent ring outside its fill, past a 2 px gap in `--sw-color-background`, so the ring meets only the page and keeps the accent's contrast on the canvas (4.5:1 or more in every palette, at least the 3:1 a state indicator needs) whatever its `variant` or fill. A focused pressed button moves its focus outline out past the ring. In forced colors, which drop shadows, the pressed button keeps the forced button colors, so its label and any glyph or badge inside it stay readable, and draws the same ring and its own border in the system highlight (`Highlight`); nothing opts out of forced colors. An unpressed button is drawn at full strength, so its label keeps its contrast. To make the choice stand out further, give the pressed button `primary` and the others `secondary`.
@@ -840,7 +885,7 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </Card>
 ```
 
-`ListGroup` is rows in one list with a hairline between each pair, the web twin of react-native's: a `ul` (its list role kept) named by `aria-label` or `aria-labelledby`. `variant="panel"` (the default) is one bordered panel; `plain` draws no panel and a hairline above the first row too, for rows inside a `Card`. Each `ListRow` has a `title` (weight 600, or the body weight with `titleAppearance="plain"`; `tone="danger"` for a row that ends something), an optional muted `detail` line, an optional `value` at its end (weight 600, tabular figures; `valueTone` `success`, `danger`, `muted`, `accent` or `warning`, the warning colour's ink moved halfway to the text colour so it keeps 4.5:1 on the surface in every palette; `valueBadge` draws the value as a `Badge` in that tone instead, such as a status, still read in the row's name, never with `valueTone`; `valueDetail` a muted line under it) and an optional `leading` mark such as a status dot, hidden from assistive technology, so the words say what it means. With `onPress` the whole row is a button, and with `href` a link (`onPress` then takes a plain press for a client router); either adds a chevron, a quiet fill under the pointer and 44 px on a coarse pointer, and the row is named by its title and value and described by its detail lines (`aria-label` replaces the name). `selected` makes a pressable row a choice: a check while true, `aria-pressed` on a button or `aria-current` on a link (on a row with neither `onPress` nor `href` it throws, since nothing could read the state). `accessory="none"` hides the chevron of a row that acts in place; `disabled` blocks presses. A row with neither `onPress` nor `href` only states something. `maxHeight={{ rows }}` bounds the list to that many rows of a title and one detail line, the rest scrolling inside its own named region, which shades an edge with more rows past it; a bounded list must be named. `footer` stays pinned under the rows, outside the scroll, such as a `ListRow` with the count and the total (a row there is not a list item). An empty title or value, an unknown variant, tone or badge tone, a `valueDetail`, `valueTone` or `valueBadge` without a value, a value both toned and a badge, or a bad row count throws a `RangeError`.
+`ListGroup` is rows in one list with a hairline between each pair, the web twin of react-native's: a `ul` (its list role kept) named by `aria-label` or `aria-labelledby`. `variant="panel"` (the default) is one bordered panel; `plain` draws no panel and a hairline above the first row too, for rows inside a `Card`. `variant="tiles"` keeps one list (its name, its list items, a screen reader's count of them) and lays its rows out as tiles: each row its own bordered panel on the surface with no hairline between them, in `tileColumns` equal columns (`2`, `3` the default, or `4`; `listTileColumnCounts`, `ListGroupTileColumns`) a spacing step 3 apart from `md` up, one a row below it, such as a strip of new arrivals under its heading. A row's press fill and inset focus ring stay inside its tile; `truncate` keeps a long title to one line in a narrow tile. Tiles take no `maxHeight` or `footer`, and `tileColumns` needs `tiles`; either throws a `RangeError`, as does a count other than 2, 3 or 4. Each `ListRow` has a `title` (weight 600, or the body weight with `titleAppearance="plain"`; `tone="danger"` for a row that ends something), an optional muted `detail` line, an optional `value` at its end (weight 600, tabular figures; `valueTone` `success`, `danger`, `muted`, `accent` or `warning`, the warning colour's ink moved halfway to the text colour so it keeps 4.5:1 on the surface in every palette; `valueBadge` draws the value as a `Badge` in that tone instead, such as a status, still read in the row's name, never with `valueTone`; `valueDetail` a muted line under it) and an optional `leading` mark such as a status dot, hidden from assistive technology, so the words say what it means. With `onPress` the whole row is a button, and with `href` a link (`onPress` then takes a plain press for a client router); either adds a chevron, a quiet fill under the pointer and 44 px on a coarse pointer, and the row is named by its title and value and described by its detail lines (`aria-label` replaces the name). `selected` makes a pressable row a choice: a check while true, `aria-pressed` on a button or `aria-current` on a link (on a row with neither `onPress` nor `href` it throws, since nothing could read the state). `accessory="none"` hides the chevron of a row that acts in place; `disabled` blocks presses. A row with neither `onPress` nor `href` only states something. `maxHeight={{ rows }}` bounds the list to that many rows of a title and one detail line, the rest scrolling inside its own named region, which shades an edge with more rows past it; a bounded list must be named. `footer` stays pinned under the rows, outside the scroll, such as a `ListRow` with the count and the total (a row there is not a list item). An empty title or value, an unknown variant, tone or badge tone, a `valueDetail`, `valueTone` or `valueBadge` without a value, a value both toned and a badge, or a bad row count throws a `RangeError`.
 
 A row can also carry three trailing parts. `unread` marks it new for the person, such as a document they have not opened: an accent dot after the title's last word (drawn as a border, so forced colors keep it in the text color), hidden from assistive technology, and `unreadLabel` (required while `unread`, such as "New") is read after the title, in a pressable row's name ("Heron calls New"). `tag` is a short status before the row's end, such as a `Badge` ("Only in English"), centred on the row and never wrapped; a pressable row is described by it after its detail lines. `action` is a control after the row and outside its press area, such as an `ActionMenu` of the row's own commands named by the consumer ("More for Heron calls"): it is the row's sibling in the list item, centred on the row, after it in the Tab order, and a press on it never opens the row; it keeps the row's end inset (a space-4 in a panel or outside a ListGroup, none in a plain list), and where `:has` is supported the hover fill spans the row and its control. An empty slot (`undefined`, `null`, `false` or `''`, as conditional JSX gives) draws nothing, for `leading` too. Pair `action` with `accessory="none"` when the row's own chevron would sit beside it. An unread row without `unreadLabel`, or a blank one, throws a `RangeError`. An `aria-label` replaces the whole name, unread words included.
 

package/dist/components/Button.d.ts

@@ -1,9 +1,10 @@
 import { type ButtonSize } from '@scalewing/tokens';
 import { type ButtonDisabledAppearance, type WebButtonVariant } from '../css/css-button.js';
+import { type ButtonWidth } from '../css/css-button-width.js';
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 /** The web variants: the shared tiers plus `neutral`. */
 export type ButtonVariant = WebButtonVariant;
-export type { ButtonDisabledAppearance, ButtonSize };
+export type { ButtonDisabledAppearance, ButtonSize, ButtonWidth };
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type'> & {
     children: ReactNode;
     onPress: () => void;
@@ -21,6 +22,12 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick
      * whatever its variant (a ghost button still fades).
      */
     disabledAppearance?: ButtonDisabledAppearance;
+    /**
+     * `content` (default) is as wide as the words; `full` fills the
+     * container, and in an Inline row the space its siblings leave, such as
+     * an Edit beside a ••• menu.
+     */
+    width?: ButtonWidth;
 };
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type"> & {
     children: ReactNode;
@@ -39,4 +46,10 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<Butt
      * whatever its variant (a ghost button still fades).
      */
     disabledAppearance?: ButtonDisabledAppearance;
+    /**
+     * `content` (default) is as wide as the words; `full` fills the
+     * container, and in an Inline row the space its siblings leave, such as
+     * an Edit beside a ••• menu.
+     */
+    width?: ButtonWidth;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { buttonClassNames, buttonDisabledAppearances, } from '../css/css-button.js';
+import { buttonWidthClass, buttonWidths, } from '../css/css-button-width.js';
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
 import { tabStop } from '../tab-stop.js';
-export const Button = forwardRef(function Button({ children, className, disabled = false, disabledAppearance = 'faded', onPress, size = 'md', tabIndex, type = 'button', variant = 'primary', ...rest }, ref) {
+export const Button = forwardRef(function Button({ children, className, disabled = false, disabledAppearance = 'faded', onPress, size = 'md', tabIndex, type = 'button', variant = 'primary', width = 'content', ...rest }, ref) {
     if (!buttonDisabledAppearances.includes(disabledAppearance))
         throw new RangeError(`Unknown Button disabledAppearance: ${String(disabledAppearance)}`);
-    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant, disabledAppearance }), className), disabled: disabled, tabIndex: tabIndex ?? tabStop, type: type, ...rest, onClick: onPress, children: children }));
+    if (!buttonWidths.includes(width))
+        throw new RangeError(`Unknown Button width: ${String(width)}`);
+    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant, disabledAppearance }), buttonWidthClass(width), className), disabled: disabled, tabIndex: tabIndex ?? tabStop, type: type, ...rest, onClick: onPress, children: children }));
 });

package/dist/components/FileField.d.ts

@@ -42,6 +42,21 @@ export type FileFieldProps = {
      */
     icon?: ReactNode;
     disabled?: boolean;
+    /**
+     * The field at a text field's height, for a form row beside other
+     * fields: empty, one button with `chooseLabel`; chosen, the file's mark
+     * and its name cut to one line, pressed to choose another (named by
+     * `label` and `changeLabel`), the detail read but not drawn. Default
+     * false: the wide zone, and the chosen row with its change button.
+     */
+    compact?: boolean;
+    /**
+     * Called by Remove, drawn beside a chosen file when set with
+     * `removeLabel`: the consumer clears `value`. Set both or neither.
+     */
+    onRemove?: () => void;
+    /** Remove's words, such as "Remove"; named with `label` ("Remove Cover photo"). */
+    removeLabel?: string;
     /** Prefixes the ids the field gives its parts (its button is `${id}-button`). */
     id?: string;
 };
@@ -49,7 +64,8 @@ export type FileFieldProps = {
  * One file chosen by a press or dropped on the field: empty, a wide zone
  * that opens the system picker; chosen, the file's name and detail (after
  * a thumbnail for a photo with a `preview`) with a button to choose
- * another. It hands the `File` to the consumer and shows what the
+ * another, and Remove with `onRemove`. `compact` draws both at a text
+ * field's height. It hands the `File` to the consumer and shows what the
  * consumer passes back as `value`; it never reads or uploads it.
  */
-export declare function FileField({ label, labelVisuallyHidden, description, error, accept, value, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled, id, }: FileFieldProps): import("react").JSX.Element;
+export declare function FileField({ label, labelVisuallyHidden, description, error, accept, value, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled, compact, onRemove, removeLabel, id, }: FileFieldProps): import("react").JSX.Element;

package/dist/components/FileField.js

@@ -1,39 +1,33 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef } from 'react';
 import { cx } from '../class-names.js';
 import { tabStop } from '../tab-stop.js';
-import { Button } from './Button.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+import { ChosenFileCompact, ChosenFileRow } from './file-field/ChosenFile.js';
 import { assertFileField } from './file-field/file-field-checks.js';
 import { useFileDrop } from './file-field/use-file-drop.js';
 import { useSwapFocus } from './file-field/use-swap-focus.js';
 import { Stack } from './Stack.js';
-/** Whether the consumer passed a mark to draw (not empty JSX). */
-function hasMark(icon) {
-    return (icon !== undefined &&
-        icon !== null &&
-        icon !== '' &&
-        typeof icon !== 'boolean');
-}
-/** Before a chosen file's name: its photo's thumbnail, else the consumer's mark. */
-function ChosenMark({ icon, preview }) {
-    if (preview !== undefined)
-        return _jsx("img", { alt: "", className: "sw-file-field-preview", src: preview });
-    if (!hasMark(icon))
-        return null;
-    return (_jsx("span", { "aria-hidden": "true", className: "sw-file-field-icon", children: icon }));
-}
 /**
  * One file chosen by a press or dropped on the field: empty, a wide zone
  * that opens the system picker; chosen, the file's name and detail (after
  * a thumbnail for a photo with a `preview`) with a button to choose
- * another. It hands the `File` to the consumer and shows what the
+ * another, and Remove with `onRemove`. `compact` draws both at a text
+ * field's height. It hands the `File` to the consumer and shows what the
  * consumer passes back as `value`; it never reads or uploads it.
  */
-export function FileField({ label, labelVisuallyHidden = false, description, error, accept, value = null, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled = false, id, }) {
-    assertFileField({ label, chooseLabel, changeLabel, dropLabel, value });
+export function FileField({ label, labelVisuallyHidden = false, description, error, accept, value = null, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled = false, compact = false, onRemove, removeLabel, id, }) {
+    assertFileField({
+        label,
+        chooseLabel,
+        changeLabel,
+        dropLabel,
+        value,
+        onRemove,
+        removeLabel,
+    });
     const ownId = useId();
     const baseId = id ?? ownId;
     const inputRef = useRef(null);
@@ -55,11 +49,17 @@ export function FileField({ label, labelVisuallyHidden = false, description, err
         detail: `${baseId}-detail`,
         hint: `${baseId}-hint`,
         error: `${baseId}-error`,
+        remove: `${baseId}-remove`,
     };
+    const compactChosen = compact && chosen;
     // The error is in the button's description and the polite region; the
     // button role takes no aria-invalid.
+    // Compact and chosen, the button holds the file's name: it is named by
+    // the label and its hidden change words, the name only describing it.
     const naming = {
-        'aria-labelledby': `${ids.label} ${ids.button}`,
+        'aria-labelledby': compactChosen
+            ? `${ids.label} ${ids.button}-words`
+            : `${ids.label} ${ids.button}`,
         'aria-describedby': [
             chosen && ids.name,
             chosen && value.detail && ids.detail,
@@ -71,5 +71,9 @@ export function FileField({ label, labelVisuallyHidden = false, description, err
         id: ids.button,
     };
     const open = () => inputRef.current?.click();
-    return (_jsxs(Stack, { className: cx('sw-field', 'sw-file-field', error && 'sw-field-invalid'), gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("span", { id: ids.label, children: _jsx(FieldLabelText, { label: label, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: cx('sw-file-field-frame', chosen ? 'sw-file-field-chosen' : 'sw-file-field-empty', drop.dragging && 'sw-file-field-dragging', disabled && 'sw-file-field-disabled'), ...drop.handlers, ...focusHandlers, children: [_jsx("input", { accept: accept, "aria-label": label, disabled: disabled, hidden: true, onChange: onInput, ref: inputRef, tabIndex: -1, type: "file" }), chosen ? (_jsxs(_Fragment, { children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsxs("span", { className: "sw-file-field-file", children: [_jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-file-field-detail", id: ids.detail, children: value.detail })) : null] }), _jsx(Button, { ...naming, disabled: disabled, disabledAppearance: "neutral", onPress: open, ref: buttonRef, variant: "neutral", children: changeLabel })] })) : (_jsxs("button", { ...naming, className: "sw-file-field-zone", disabled: disabled, onClick: open, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-file-field-choose", children: chooseLabel }), dropLabel ? ' ' : null, dropLabel ? (_jsx("span", { className: "sw-file-field-drop", children: dropLabel })) : null] }))] }), description && !error ? (_jsx("span", { className: "sw-field-description", id: ids.hint, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: ids.error, message: error })] }));
+    const remove = onRemove !== undefined && removeLabel !== undefined
+        ? { label: removeLabel, onRemove }
+        : null;
+    const ChosenFile = compact ? ChosenFileCompact : ChosenFileRow;
+    return (_jsxs(Stack, { className: cx('sw-field', 'sw-file-field', error && 'sw-field-invalid'), gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("span", { id: ids.label, children: _jsx(FieldLabelText, { label: label, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: cx('sw-file-field-frame', chosen ? 'sw-file-field-chosen' : 'sw-file-field-empty', compact && 'sw-file-field-compact', drop.dragging && 'sw-file-field-dragging', disabled && 'sw-file-field-disabled'), ...drop.handlers, ...focusHandlers, children: [_jsx("input", { accept: accept, "aria-label": label, disabled: disabled, hidden: true, onChange: onInput, ref: inputRef, tabIndex: -1, type: "file" }), chosen ? (_jsx(ChosenFile, { buttonRef: buttonRef, changeLabel: changeLabel, disabled: disabled, icon: icon, ids: ids, naming: naming, onChange: open, remove: remove, value: value })) : (_jsxs("button", { ...naming, className: "sw-file-field-zone", disabled: disabled, onClick: open, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-file-field-choose", children: chooseLabel }), dropLabel ? ' ' : null, dropLabel ? (_jsx("span", { className: "sw-file-field-drop", children: dropLabel })) : null] }))] }), description && !error ? (_jsx("span", { className: "sw-field-description", id: ids.hint, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: ids.error, message: error })] }));
 }

package/dist/components/ListGroup.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type ListGroupTileColumns } from '../css/css-list-tiles.js';
 import { type ListGroupMaxHeight, type ListGroupVariant } from '../list-options.js';
 export type ListGroupProps = {
     /** `ListRow` elements; the group draws a hairline between each pair. */
@@ -8,9 +9,13 @@ export type ListGroupProps = {
     'aria-labelledby'?: string;
     /**
      * `panel` (the default) is one bordered panel; `plain` draws no panel
-     * and a hairline above the first row too, for rows inside a Card.
+     * and a hairline above the first row too, for rows inside a Card;
+     * `tiles` sets each row on a panel of its own, in `tileColumns` equal
+     * columns from `md` up and one a row below it, still one list.
      */
     variant?: ListGroupVariant;
+    /** How many tiles share a row from `md` up (`tiles` only): 2, 3 (default) or 4. */
+    tileColumns?: ListGroupTileColumns;
     /**
      * Bounds the list to a row count of its own region, `{ rows }` rows of a
      * title and one detail line, where the rest scroll; the region is a named
@@ -27,7 +32,7 @@ export type ListGroupProps = {
 };
 /**
  * Rows in one list (`ul`, its list role kept) with hairlines between them:
- * a panel of its own, or plain rows inside a surface. The ref reaches the
- * outer box.
+ * a panel of its own, or plain rows inside a surface; or the same list's
+ * rows as tiles, each a panel. The ref reaches the outer box.
  */
 export declare const ListGroup: import("react").ForwardRefExoticComponent<ListGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ListGroup.js

@@ -2,18 +2,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
+import { listTileColumnsClass, } from '../css/css-list-tiles.js';
 import { assertListGroup, listMaxHeightStyle, } from '../list-options.js';
 import { ListRowContainer } from './list/list-row-container.js';
 import { ScrollRegion } from './ScrollRegion.js';
 /**
  * Rows in one list (`ul`, its list role kept) with hairlines between them:
- * a panel of its own, or plain rows inside a surface. The ref reaches the
- * outer box.
+ * a panel of its own, or plain rows inside a surface; or the same list's
+ * rows as tiles, each a panel. The ref reaches the outer box.
  */
-export const ListGroup = forwardRef(function ListGroup({ children, 'aria-label': label, 'aria-labelledby': labelledBy, variant = 'panel', maxHeight, footer, className, id, }, ref) {
-    assertListGroup({ label, labelledBy, variant, maxHeight });
+export const ListGroup = forwardRef(function ListGroup({ children, 'aria-label': label, 'aria-labelledby': labelledBy, variant = 'panel', tileColumns, maxHeight, footer, className, id, }, ref) {
+    assertListGroup({
+        label,
+        labelledBy,
+        variant,
+        maxHeight,
+        tileColumns,
+        hasFooter: footer !== undefined,
+    });
     const list = (_jsx("ul", { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list", 
         // A list styled without bullets loses its role in Safari.
         role: "list", children: _jsx(ListRowContainer.Provider, { value: "li", children: children }) }));
-    return (_jsxs("div", { className: cx('sw-list-group', `sw-list-group-${variant}`, className), id: id, ref: ref, children: [maxHeight === undefined ? (list) : (_jsx(ScrollRegion, { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list-group-scroll", style: listMaxHeightStyle(maxHeight), children: list })), footer === undefined ? null : (_jsx("div", { className: "sw-list-group-footer", children: _jsx(ListRowContainer.Provider, { value: "div", children: footer }) }))] }));
+    return (_jsxs("div", { className: cx('sw-list-group', `sw-list-group-${variant}`, variant === 'tiles' && listTileColumnsClass(tileColumns ?? 3), className), id: id, ref: ref, children: [maxHeight === undefined ? (list) : (_jsx(ScrollRegion, { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list-group-scroll", style: listMaxHeightStyle(maxHeight), children: list })), footer === undefined ? null : (_jsx("div", { className: "sw-list-group-footer", children: _jsx(ListRowContainer.Provider, { value: "div", children: footer }) }))] }));
 });

package/dist/components/Select.d.ts

@@ -1,6 +1,7 @@
 import { type SelectOption } from '../select-list.js';
 import { type FieldSize } from './Field.js';
 import { type RequiredMark } from './FieldLabelText.js';
+import { type SelectNaming } from './select/select-naming.js';
 export type { SelectOption };
 /**
  * `content` (the default) sizes the field to its longest option, as a native
@@ -12,10 +13,9 @@ export type SelectAction = {
     label: string;
     onPress: () => void;
 };
-export type SelectProps = {
+export type { SelectNaming };
+export type SelectProps = SelectNaming & {
     action?: SelectAction;
-    label: string;
-    labelVisuallyHidden?: boolean;
     onChange: (value: string) => void;
     options: readonly SelectOption[];
     size?: FieldSize;
@@ -25,7 +25,10 @@ export type SelectProps = {
      * (such as ''). It is not an option and never becomes the value.
      */
     placeholder?: string;
-    /** Marks the label as Field does and sets `aria-required`. */
+    /**
+     * Marks the label as Field does and sets `aria-required` (named by
+     * `aria-labelledby`, only `aria-required`: the page draws the words).
+     */
     required?: boolean;
     /**
      * `hidden` leaves out the label's " *" while the control stays required
@@ -43,4 +46,4 @@ export type SelectProps = {
      */
     width?: SelectWidth;
 };
-export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, placeholder, required, requiredMark, error, width, }: SelectProps): import("react").JSX.Element;
+export declare function Select({ action, label, labelVisuallyHidden, 'aria-labelledby': labelledBy, onChange, options, size, value, placeholder, required, requiredMark, error, width, }: SelectProps): import("react").JSX.Element;

package/dist/components/Select.js

@@ -5,16 +5,19 @@ import { cx } from '../class-names.js';
 import { selectedSelectIndex } from '../select-list.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
+import { assertSelectNaming, } from './select/select-naming.js';
 import { SelectListbox } from './select/SelectListbox.js';
 import { SelectValue } from './select/SelectValue.js';
 import { useSelectList } from './select/use-select-list.js';
 import { Stack } from './Stack.js';
 import { tabStop } from '../tab-stop.js';
-export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, placeholder, required = false, requiredMark = 'visible', error, width = 'content', }) {
-    assertRequiredMark(requiredMark);
+export function Select({ action, label, labelVisuallyHidden, 'aria-labelledby': labelledBy, onChange, options, size = 'md', value, placeholder, required = false, requiredMark, error, width = 'content', }) {
+    assertSelectNaming({ label, labelVisuallyHidden, labelledBy, requiredMark });
+    assertRequiredMark(requiredMark ?? 'visible');
     if (placeholder !== undefined && !placeholder.trim())
         throw new RangeError('placeholder must not be empty');
-    const labelId = useId();
+    const ownLabelId = useId();
+    const labelId = labelledBy ?? ownLabelId;
     const triggerId = useId();
     const listId = useId();
     const optionIdPrefix = useId();
@@ -24,7 +27,7 @@ export function Select({ action, label, labelVisuallyHidden = false, onChange, o
     const showsPlaceholder = placeholder !== undefined &&
         !options.some((option) => option.value === value);
     const { commit, highlight, onTriggerKeyDown, open, openList, setHighlight, setOpen, } = useSelectList({ action, onChange, options, rootRef, value });
-    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark, size: size, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
+    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: label === undefined || labelVisuallyHidden ? 0 : 1, children: [label === undefined ? null : (_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark ?? 'visible', size: size, visuallyHidden: labelVisuallyHidden ?? false }) })), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
                                 const next = event.relatedTarget;
                                 if (next instanceof Node && rootRef.current?.contains(next)) {
                                     return;

package/dist/components/file-field/ChosenFile.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode, type Ref } from 'react';
+import type { FileFieldValue } from '../FileField.js';
+/** The ids a chosen file's parts take, from the field's. */
+export type ChosenFileIds = {
+    label: string;
+    button: string;
+    name: string;
+    detail: string;
+    remove: string;
+};
+/** The change button's naming and description, as the field wires them. */
+export type ChosenFileNaming = {
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+    id: string;
+};
+/** Remove beside a chosen file: its words and what it does. */
+export type ChosenFileRemove = {
+    label: string;
+    onRemove: () => void;
+};
+type ChosenFileProps = {
+    value: FileFieldValue;
+    icon: ReactNode;
+    ids: ChosenFileIds;
+    naming: ChosenFileNaming;
+    changeLabel: string;
+    remove: ChosenFileRemove | null;
+    disabled: boolean;
+    onChange: () => void;
+    buttonRef: Ref<HTMLButtonElement>;
+};
+/**
+ * The chosen file in the full field: its mark, its name over its detail,
+ * then the change button (and Remove after it) at the row's end.
+ */
+export declare function ChosenFileRow({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }: ChosenFileProps): import("react").JSX.Element;
+/**
+ * The chosen file in a compact field: one row at a text field's height.
+ * The mark and the name (cut to one line) are the change button, named by
+ * the field's label and the change words, described by the name and the
+ * detail (which is not drawn); Remove, quiet, ends the row.
+ */
+export declare function ChosenFileCompact({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }: ChosenFileProps): import("react").JSX.Element;
+export {};

package/dist/components/file-field/ChosenFile.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { Button } from '../Button.js';
+/** Whether the consumer passed a mark to draw (not empty JSX). */
+function hasMark(icon) {
+    return (icon !== undefined &&
+        icon !== null &&
+        icon !== '' &&
+        typeof icon !== 'boolean');
+}
+/** Before a chosen file's name: its photo's thumbnail, else the consumer's mark. */
+function ChosenMark({ icon, preview }) {
+    if (preview !== undefined)
+        return _jsx("img", { alt: "", className: "sw-file-field-preview", src: preview });
+    if (!hasMark(icon))
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: "sw-file-field-icon", children: icon }));
+}
+/**
+ * Remove: a quiet button named by its words and the field's label
+ * ("Remove Cover photo"), so two fields' Removes are told apart. Disabled,
+ * the neutral one greys as the change button does; the ghost one, which
+ * has no fill, fades as the compact row's pick button does.
+ */
+function RemoveButton({ ids, remove, disabled, variant, }) {
+    return (_jsx(Button
+    // Named by its own words, then the label: the self-reference is
+    // deliberate and needs the id below on the button itself.
+    , { "aria-labelledby": `${ids.remove} ${ids.label}`, className: "sw-file-field-remove", disabled: disabled, disabledAppearance: variant === 'neutral' ? 'neutral' : 'faded', id: ids.remove, onPress: remove.onRemove, size: variant === 'ghost' ? 'sm' : 'md', variant: variant, children: remove.label }));
+}
+/**
+ * The chosen file in the full field: its mark, its name over its detail,
+ * then the change button (and Remove after it) at the row's end.
+ */
+export function ChosenFileRow({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }) {
+    const change = (_jsx(Button, { ...naming, disabled: disabled, disabledAppearance: "neutral", onPress: onChange, ref: buttonRef, variant: "neutral", children: changeLabel }));
+    return (_jsxs(_Fragment, { children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsxs("span", { className: "sw-file-field-file", children: [_jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-file-field-detail", id: ids.detail, children: value.detail })) : null] }), remove === null ? (change) : (_jsxs("span", { className: "sw-file-field-actions", children: [change, _jsx(RemoveButton, { disabled: disabled, ids: ids, remove: remove, variant: "neutral" })] }))] }));
+}
+/**
+ * The chosen file in a compact field: one row at a text field's height.
+ * The mark and the name (cut to one line) are the change button, named by
+ * the field's label and the change words, described by the name and the
+ * detail (which is not drawn); Remove, quiet, ends the row.
+ */
+export function ChosenFileCompact({ value, icon, ids, naming, changeLabel, remove, disabled, onChange, buttonRef, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ...naming, className: "sw-file-field-pick", disabled: disabled, onClick: onChange, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-sr-only", id: ids.detail, children: value.detail })) : null, _jsx("span", { className: "sw-sr-only", id: `${ids.button}-words`, children: changeLabel })] }), remove === null ? null : (_jsx(RemoveButton, { disabled: disabled, ids: ids, remove: remove, variant: "ghost" }))] }));
+}

package/dist/components/file-field/file-field-checks.d.ts

@@ -1,8 +1,9 @@
 import type { FileFieldValue } from '../FileField.js';
 /**
  * Fails closed on a FileField it cannot name or show: an empty label,
- * choose or change words, a blank drop hint, or a chosen file with no name,
- * a blank detail or a blank preview address.
+ * choose or change words, a blank drop hint, `onRemove` without its
+ * words (or words without it), blank Remove words, or a chosen file with
+ * no name, a blank detail or a blank preview address.
  */
 export declare function assertFileField(props: {
     label: string;
@@ -10,4 +11,6 @@ export declare function assertFileField(props: {
     changeLabel: string;
     dropLabel: string | undefined;
     value: FileFieldValue | null;
+    onRemove: (() => void) | undefined;
+    removeLabel: string | undefined;
 }): void;

package/dist/components/file-field/file-field-checks.js

@@ -3,8 +3,9 @@ function isBlank(text) {
 }
 /**
  * Fails closed on a FileField it cannot name or show: an empty label,
- * choose or change words, a blank drop hint, or a chosen file with no name,
- * a blank detail or a blank preview address.
+ * choose or change words, a blank drop hint, `onRemove` without its
+ * words (or words without it), blank Remove words, or a chosen file with
+ * no name, a blank detail or a blank preview address.
  */
 export function assertFileField(props) {
     for (const key of ['label', 'chooseLabel', 'changeLabel'])
@@ -12,6 +13,10 @@ export function assertFileField(props) {
             throw new RangeError(`FileField ${key} must be non-empty text`);
     if (props.dropLabel !== undefined && isBlank(props.dropLabel))
         throw new RangeError('FileField dropLabel must be non-empty text');
+    if ((props.onRemove === undefined) !== (props.removeLabel === undefined))
+        throw new RangeError('FileField onRemove and removeLabel go together');
+    if (props.removeLabel !== undefined && isBlank(props.removeLabel))
+        throw new RangeError('FileField removeLabel must be non-empty text');
     if (props.value === null)
         return;
     if (isBlank(props.value.name))

package/dist/components/select/select-naming.d.ts

@@ -0,0 +1,34 @@
+/**
+ * How a Select is named: by its own `label` (drawn, or visually hidden),
+ * or by words the page already draws, through `aria-labelledby`.
+ */
+export type SelectNaming = {
+    /** The select's own label, drawn above it as Field's. */
+    label: string;
+    /** Keeps the label for assistive technology only, for toolbar chrome. */
+    labelVisuallyHidden?: boolean;
+    'aria-labelledby'?: undefined;
+} | {
+    /**
+     * The id of words the page draws for this choice, such as a heading
+     * or a label beside it: the select draws no label of its own, so
+     * the name is drawn, and read, once.
+     */
+    'aria-labelledby': string;
+    label?: undefined;
+    labelVisuallyHidden?: undefined;
+    /** No mark: the page draws the words, and any mark, itself. */
+    requiredMark?: undefined;
+};
+/**
+ * Fails closed on a Select with no name, or with both: a blank `label`
+ * without `aria-labelledby`, a blank `aria-labelledby`, the two together
+ * (one would silently hide the other), or `requiredMark` with
+ * `aria-labelledby` (there is no label to mark).
+ */
+export declare function assertSelectNaming(naming: {
+    label: unknown;
+    labelVisuallyHidden: unknown;
+    labelledBy: unknown;
+    requiredMark: unknown;
+}): void;

package/dist/components/select/select-naming.js

@@ -0,0 +1,22 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a Select with no name, or with both: a blank `label`
+ * without `aria-labelledby`, a blank `aria-labelledby`, the two together
+ * (one would silently hide the other), or `requiredMark` with
+ * `aria-labelledby` (there is no label to mark).
+ */
+export function assertSelectNaming(naming) {
+    if (naming.labelledBy === undefined) {
+        if (isBlank(naming.label))
+            throw new RangeError('Select needs a label or aria-labelledby');
+        return;
+    }
+    if (isBlank(naming.labelledBy))
+        throw new RangeError('Select aria-labelledby must be a non-empty id');
+    if (naming.label !== undefined || naming.labelVisuallyHidden !== undefined)
+        throw new RangeError('Select takes label (and labelVisuallyHidden) or aria-labelledby, not both');
+    if (naming.requiredMark !== undefined)
+        throw new RangeError('Select requiredMark needs label: with aria-labelledby the page draws the mark');
+}

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

@@ -0,0 +1,11 @@
+/**
+ * How wide a Button is: `content` (the default) is as wide as its words;
+ * `full` fills the container's inline size, and in an Inline row takes
+ * the space its siblings leave, such as an Edit beside a ••• menu.
+ */
+export declare const buttonWidths: readonly ["content", "full"];
+export type ButtonWidth = (typeof buttonWidths)[number];
+/** The class a width adds; `content` adds none (`cx` drops `undefined`). */
+export declare function buttonWidthClass(width: ButtonWidth): string | undefined;
+export declare function cssButtonWidthClasses(): string;
+export declare function buttonWidthClassCatalog(): string[];

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

@@ -0,0 +1,36 @@
+/**
+ * How wide a Button is: `content` (the default) is as wide as its words;
+ * `full` fills the container's inline size, and in an Inline row takes
+ * the space its siblings leave, such as an Edit beside a ••• menu.
+ */
+export const buttonWidths = ['content', 'full'];
+const full = 'sw-button-full';
+/** The class a width adds; `content` adds none (`cx` drops `undefined`). */
+export function buttonWidthClass(width) {
+    return width === 'full' ? full : undefined;
+}
+/*
+ * A full button fills a Stack, a Grid cell or any column. As a direct
+ * child of an Inline row it shares the row with its siblings, which keep
+ * their own width (a ••• or a second button), as a full Select does; in a
+ * wrapping row it grows from its words' width instead, so it moves to a
+ * line of its own rather than shrinking past them. Its words stay centred.
+ */
+export function cssButtonWidthClasses() {
+    return `.${full} {
+  width: 100%;
+}
+
+.sw-inline > .${full} {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-inline.sw-wrap > .${full} {
+  flex: 1 1 auto;
+  width: auto;
+}`;
+}
+export function buttonWidthClassCatalog() {
+    return [full];
+}

package/dist/css/css-button.js

@@ -1,6 +1,7 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
+import { buttonWidthClassCatalog, cssButtonWidthClasses, } from './css-button-width.js';
 import { quietFill } from './quiet-fill.js';
 const label = typographyVariants.label;
 /**
@@ -135,6 +136,7 @@ ${disabledNeutralRules()}
 ${pressedRules()}
 ${ariaDisabledForcedRules()}
 ${sizeRules()}
+${cssButtonWidthClasses()}
 ${groupRules()}
 
 ${cssButtonGroupAttachedClasses()}`;
@@ -162,6 +164,7 @@ export function buttonClassCatalog() {
         ...webButtonVariants.map((variant) => `sw-button-${variant}`),
         'sw-button-disabled-neutral',
         ...buttonSizes.map((size) => `sw-button-${size}`),
+        ...buttonWidthClassCatalog(),
         'sw-button-group',
         ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
         ...buttonGroupAttachedClassCatalog(),

package/dist/css/css-file-field-compact.d.ts

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

package/dist/css/css-file-field-compact.js

@@ -0,0 +1,106 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+/*
+ * Remove beside a chosen file in the full field: the change button and
+ * Remove together at the row's end, a space-2 apart.
+ */
+function actionsRules() {
+    return `.sw-file-field-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}`;
+}
+/*
+ * A compact field is a text field's height (the md control, 44 px), on
+ * one line. Empty, its zone holds the choose words at its start. Chosen,
+ * the row is the change button (the thumbnail or mark a space-1 from the
+ * frame's start, then the name in the body weight cut to one line) and a
+ * quiet Remove at its end. The button's focus ring sits inside the frame.
+ */
+function compactRules() {
+    return `.sw-file-field-compact.sw-file-field-chosen {
+  flex-wrap: nowrap;
+  gap: var(--sw-space-1);
+  min-height: ${touchTarget};
+  padding-block: 0;
+  padding-inline: 0 var(--sw-space-1);
+}
+
+.sw-file-field-compact .sw-file-field-zone {
+  justify-content: flex-start;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  text-align: start;
+}
+
+.sw-file-field-pick {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-3);
+  margin: 0;
+  min-height: ${touchTarget};
+  min-width: 0;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-1) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-file-field-pick:focus { outline: none; }
+
+.sw-file-field-pick:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-file-field-pick:disabled { cursor: not-allowed; }
+
+.sw-file-field-pick .sw-file-field-name {
+  font-weight: ${body.fontWeight};
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* With no thumbnail or mark, the name starts where a text field's words do. */
+.sw-file-field-pick > .sw-file-field-name:first-child { margin-inline-start: var(--sw-space-3); }
+
+.sw-file-field-compact .sw-file-field-preview,
+.sw-file-field-compact .sw-file-field-icon { margin-inline-start: var(--sw-space-1); }
+
+.sw-file-field-remove { flex: none; }
+
+@media (forced-colors: active) {
+  .sw-file-field-pick { color: ButtonText; }
+  .sw-file-field-pick:disabled { color: GrayText; }
+}
+
+/* Disabled, the row fades as its Remove does. */
+.sw-file-field-pick:disabled { opacity: var(--sw-disabled-opacity); }`;
+}
+export function cssFileFieldCompactClasses() {
+    return `${actionsRules()}
+
+${compactRules()}`;
+}
+export function fileFieldCompactClassCatalog() {
+    return [
+        'sw-file-field-actions',
+        'sw-file-field-compact',
+        'sw-file-field-pick',
+        'sw-file-field-remove',
+    ];
+}

package/dist/css/css-file-field.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlSurface } from './css-document.js';
+import { cssFileFieldCompactClasses, fileFieldCompactClassCatalog, } from './css-file-field-compact.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -172,6 +173,8 @@ ${zoneRules()}
 
 ${fileRules()}
 
+${cssFileFieldCompactClasses()}
+
 ${forcedColorRules()}`;
 }
 export function fileFieldClassCatalog() {
@@ -190,5 +193,6 @@ export function fileFieldClassCatalog() {
         'sw-file-field-file',
         'sw-file-field-name',
         'sw-file-field-detail',
+        ...fileFieldCompactClassCatalog(),
     ];
 }

package/dist/css/css-list-tiles.d.ts

@@ -0,0 +1,6 @@
+/** How many tiles share a row from `md` up; one a row below it. */
+export declare const listTileColumnCounts: readonly [2, 3, 4];
+export type ListGroupTileColumns = (typeof listTileColumnCounts)[number];
+export declare function listTileColumnsClass(columns: ListGroupTileColumns): string;
+export declare function cssListTilesClasses(): string;
+export declare function listTilesClassCatalog(): string[];

package/dist/css/css-list-tiles.js

@@ -0,0 +1,50 @@
+import { breakpointQuery } from './breakpoints.js';
+/** How many tiles share a row from `md` up; one a row below it. */
+export const listTileColumnCounts = [2, 3, 4];
+export function listTileColumnsClass(columns) {
+    return `sw-list-group-tiles-${columns}`;
+}
+const tiles = '.sw-list-group-tiles';
+/*
+ * A tiled ListGroup is still one list (`sw-list`), its rows laid out as
+ * tiles: equal columns a space-3 apart from `md` up, one column below it,
+ * each row its own bordered panel on the surface (the panel variant's
+ * look, per row), with no hairlines between them. A row's press fill and
+ * its inset focus ring stay inside its tile.
+ *
+ * Generated after the list's hairline rules (css-list.ts), whose
+ * `.sw-list > .sw-list-item + .sw-list-item` has the same specificity as
+ * the tile rule: being later is what lets a tile's own border replace the
+ * hairline. `list-group-tiles.test.tsx` holds that order.
+ */
+export function cssListTilesClasses() {
+    const columns = listTileColumnCounts.map((count) => `.${listTileColumnsClass(count)} > .sw-list { grid-template-columns: repeat(${count}, minmax(0, 1fr)); }`);
+    return `${tiles} > .sw-list {
+  display: grid;
+  gap: var(--sw-space-3);
+}
+
+${columns.join('\n')}
+
+${tiles} > .sw-list > .sw-list-item {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  min-width: 0;
+  overflow: clip;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${tiles} > .sw-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  ${tiles} > .sw-list > .sw-list-item { border-color: CanvasText; }
+}`;
+}
+export function listTilesClassCatalog() {
+    return [
+        'sw-list-group-tiles',
+        ...listTileColumnCounts.map((count) => listTileColumnsClass(count)),
+    ];
+}

package/dist/css/css-list.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
 import { cssListRowTrailingClasses, listRowTrailingClassCatalog, } from './css-list-row-trailing.js';
 import { cssListRowTruncateClasses, listRowTruncateClassCatalog, } from './css-list-row-truncate.js';
+import { cssListTilesClasses, listTilesClassCatalog, } from './css-list-tiles.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -75,7 +76,9 @@ ${cssListRowClasses()}
 
 ${cssListRowTrailingClasses()}
 
-${cssListRowTruncateClasses()}`;
+${cssListRowTruncateClasses()}
+
+${cssListTilesClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -86,6 +89,7 @@ export function listClassCatalog() {
         'sw-list-group-plain',
         'sw-list-group-scroll',
         'sw-list-group-footer',
+        ...listTilesClassCatalog(),
         ...listRowClassCatalog(),
         ...listRowTrailingClassCatalog(),
         ...listRowTruncateClassCatalog(),

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, type MarkdownHeading, type MarkdownInspection, type MarkdownImage, type MarkdownImageResolver, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind, type MarkdownOptions, type MarkdownViewProps, } from './components/MarkdownView.js';
 export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
+export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.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';
@@ -29,7 +30,8 @@ export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type Column
 export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
-export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export { ListGroup } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, } from './components/MarkdownView.js';
 export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
+export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -29,6 +30,7 @@ export { LineChart, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, dataBarTones, } from './components/DataBar.js';
 export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';

package/dist/list-options.d.ts

@@ -4,9 +4,11 @@ import { listRowValueTones, type ListRowValueTone } from './css/css-list-row.js'
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export declare const listGroupVariants: readonly ["panel", "plain"];
+export declare const listGroupVariants: readonly ["panel", "plain", "tiles"];
 export type ListGroupVariant = (typeof listGroupVariants)[number];
 /**
  * A list's bounded height, counted in rows: as tall as `rows` rows of a
@@ -30,13 +32,18 @@ export type ListGroupInput = {
     labelledBy: string | undefined;
     variant: unknown;
     maxHeight: ListGroupMaxHeight | undefined;
+    tileColumns: unknown;
+    hasFooter: boolean;
 };
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export declare function assertListGroup({ label, labelledBy, variant, maxHeight, }: ListGroupInput): void;
+export declare function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }: ListGroupInput): void;
 /** The row count the generated `sw-list-group-scroll` height reads. */
 export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
 export type ListRowInput = {

package/dist/list-options.js

@@ -1,12 +1,15 @@
 import { badgeTones } from './css/css-data.js';
 import { listRowValueTones, } from './css/css-list-row.js';
+import { listTileColumnCounts } from './css/css-list-tiles.js';
 import { isOneOf } from './is-one-of.js';
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export const listGroupVariants = ['panel', 'plain'];
+export const listGroupVariants = ['panel', 'plain', 'tiles'];
 /** `danger` draws the title in the danger colour, for a row that ends something. */
 export const listRowTones = ['default', 'danger'];
 /** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
@@ -17,12 +20,23 @@ function isBlank(text) {
 }
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export function assertListGroup({ label, labelledBy, variant, maxHeight, }) {
+export function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }) {
     if (!isOneOf(listGroupVariants, variant))
         throw new RangeError(`Unknown ListGroup variant: ${String(variant)}`);
+    if (tileColumns !== undefined) {
+        if (variant !== 'tiles')
+            throw new RangeError('ListGroup tileColumns needs variant="tiles"');
+        if (!listTileColumnCounts.includes(tileColumns))
+            throw new RangeError(`ListGroup tileColumns must be 2, 3 or 4: ${String(tileColumns)}`);
+    }
+    if (variant === 'tiles' && (maxHeight !== undefined || hasFooter))
+        throw new RangeError('A ListGroup of tiles takes no maxHeight or footer');
     if (maxHeight === undefined)
         return;
     const rows = typeof maxHeight === 'object' && maxHeight !== null

package/dist/styles.css

@@ -967,6 +967,19 @@ body {
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
+.sw-button-full {
+  width: 100%;
+}
+
+.sw-inline > .sw-button-full {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-inline.sw-wrap > .sw-button-full {
+  flex: 1 1 auto;
+  width: auto;
+}
 .sw-button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sw-space-2); min-width: 0; }
 .sw-button-group-start { justify-content: flex-start; }
 .sw-button-group-end { justify-content: flex-end; }
@@ -3018,6 +3031,31 @@ body {
   white-space: nowrap;
 }
 
+.sw-list-group-tiles > .sw-list {
+  display: grid;
+  gap: var(--sw-space-3);
+}
+
+.sw-list-group-tiles-2 > .sw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-list-group-tiles-3 > .sw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-list-group-tiles-4 > .sw-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.sw-list-group-tiles > .sw-list > .sw-list-item {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  min-width: 0;
+  overflow: clip;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-list-group-tiles > .sw-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  .sw-list-group-tiles > .sw-list > .sw-list-item { border-color: CanvasText; }
+}
+
 .sw-file-field-frame {
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-md);
@@ -3147,6 +3185,83 @@ body {
   margin-inline-start: auto;
 }
 
+.sw-file-field-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+.sw-file-field-compact.sw-file-field-chosen {
+  flex-wrap: nowrap;
+  gap: var(--sw-space-1);
+  min-height: var(--sw-control-md-min-height);
+  padding-block: 0;
+  padding-inline: 0 var(--sw-space-1);
+}
+
+.sw-file-field-compact .sw-file-field-zone {
+  justify-content: flex-start;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  text-align: start;
+}
+
+.sw-file-field-pick {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-3);
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-1) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-file-field-pick:focus { outline: none; }
+
+.sw-file-field-pick:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-file-field-pick:disabled { cursor: not-allowed; }
+
+.sw-file-field-pick .sw-file-field-name {
+  font-weight: 400;
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* With no thumbnail or mark, the name starts where a text field's words do. */
+.sw-file-field-pick > .sw-file-field-name:first-child { margin-inline-start: var(--sw-space-3); }
+
+.sw-file-field-compact .sw-file-field-preview,
+.sw-file-field-compact .sw-file-field-icon { margin-inline-start: var(--sw-space-1); }
+
+.sw-file-field-remove { flex: none; }
+
+@media (forced-colors: active) {
+  .sw-file-field-pick { color: ButtonText; }
+  .sw-file-field-pick:disabled { color: GrayText; }
+}
+
+/* Disabled, the row fades as its Remove does. */
+.sw-file-field-pick:disabled { opacity: var(--sw-disabled-opacity); }
+
 @media (forced-colors: active) {
   .sw-file-field-frame { border-color: CanvasText; }
   .sw-field-invalid .sw-file-field-frame { border-color: Mark; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",