@scalewing/react 1.29.0 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @scalewing/react
 
+## 1.31.0
+
+### Minor Changes
+
+- ae2d883: `Combobox` (with `ComboboxProps`, `ComboboxGroup`, `ComboboxOption`, `ComboboxBadge`, `ComboboxAction`, `ComboboxSize` and `comboboxSizes`): a text input with a list of suggestions, an ARIA 1.2 combobox with list autocomplete (`docs/requests/teisoro-combobox.md`, Teisoro F-011 release R5).
+
+  - `label`, `inputValue`, `onInputChange`, `groups` (`{ label?, options: { value, label, description?, badge?, disabled? }[] }[]`, filtered by the consumer), `onSelect`, `action?` (`{ label, onPress, badge? }`), `emptyText`, `note?`, `listLabel?`, `countText?` (`(count) => string`), and the Field props `labelVisuallyHidden`, `placeholder`, `description`, `error`, `required`, `disabled`, `size` (`md` | `xs`).
+  - Focus stays in the input; the arrow keys move `aria-activedescendant` and wrap; Enter or a press chooses; a disabled option is never chosen; Escape closes, then empties; Alt+ArrowUp, blur, Tab or a press outside closes; the pointer moves the active option; the active option is held by value across new results; input-method keys are ignored; an always-present polite live region announces the empty text and `countText`.
+  - The list is on the popup layer (`openPopups` gains `.sw-combobox-popup`), solid under reduced transparency, with forced-colours rules. Blank words, duplicate values, an unknown size or badge tone throw a `RangeError`.
+  - New classes `sw-combobox*`. No new tokens or dependencies.
+
+- c79024a: `Field` `variant="search"` (`fieldVariants`, `FieldVariant`), the web twin of the native search field (`docs/requests/teisoro-field-search.md`, Teisoro F-011 release R5): a hidden label that still names a `type="search"` input, a `leading` glyph slot, and, while the input holds text and is enabled and not read-only, a clear button named `clearLabel` that returns focus to the input and calls `onClear` (Escape too). The browser's own clear button is hidden; `enterKeyHint` defaults to `search`. Missing or blank `clearLabel`, missing `onClear`, `prefix`/`suffix`, a non-input or uncontrolled child, or the search props on an outlined field throw. New classes `sw-field-search-field`, `sw-field-search`, `sw-field-search-leading`, `sw-field-search-clear`, `sw-field-search-cross`. No new tokens or dependencies.
+
+## 1.30.0
+
+### Minor Changes
+
+- 63695b5: `ActionMenuItem` `detail`, `detailLang` and `separatorBefore` (`docs/requests/teisoro-action-menu-detail.md`, Teisoro F-011 release R4):
+
+  - `detail`: a short current value at the command's end in the muted colour with a chevron (mirrored right to left, `CanvasText` in forced colours), read in its name; it wraps between words. `detailLang` marks its language. A blank `detail`, a blank `detailLang` or one without `detail` throws a `RangeError`.
+  - `separatorBefore`: a `role="separator"` hairline before the command (never before the first), skipped by the arrow keys.
+  - New classes `sw-action-menu-detail`, `sw-action-menu-chevron`, `sw-action-menu-separator`. No new tokens or dependencies.
+
+- 180e140: `ButtonGroup` `attached` (`docs/requests/teisoro-button-group-attached.md`, Teisoro F-011 release R4): one joined control, such as Previous, Today and Next. Its direct `Button` children at one height with no gap, single dividers (overlapping borders; a borderless variant's in its text colour), square inner and `sm`-radius outer corners; an isolated stacking context raises a pressed toggle and the focused button's outer ring over their neighbours (a new `joinedControlOrder` in `css/stacking.ts`). It keeps its row on a phone and sizes to its buttons. New class `sw-button-group-attached`. No new tokens or dependencies.
+- b64e6ce: `FilterChips` `required`, `error` and `aria-describedby`, and `value: ''` for nothing chosen yet (`docs/requests/teisoro-filter-chips-validation.md`, Teisoro F-011 release R4):
+
+  - `required`: each radio `required` and the required mark after the label.
+  - `error`: a polite message under the chips linked by `aria-describedby`, the group `aria-invalid`, and every chip's edge in danger (`Mark` in forced colors).
+  - `aria-describedby`: consumer description ids, before the error.
+  - `value` may be `''` (nothing chosen); a value that is neither `''` nor an option still throws a `RangeError`.
+  - New class `sw-filter-chips-error`. No new tokens or dependencies.
+
+- a60f130: `SectionNav` item `count` and `appearance="filled"` (`docs/requests/teisoro-section-nav-count.md`, Teisoro F-011 release R4):
+
+  - `SectionNavItem.count?: number`: a 20 px filled pill after the label (danger with its on-colour figures, a `CanvasText` edge in forced colours), part of the link's accessible name; 0 shows none; a count that is not a whole number from 0 throws a `RangeError`.
+  - `SectionNavItem.countLabel?: string`: the count in words, read in place of the bare number (the pill then hidden from assistive technology); blank or without `count` throws.
+  - `appearance?: 'underline' | 'filled'` (`SectionNavAppearance`, `sectionNavAppearances`): `filled` drops the hairline and the underline or start bar, sets every link at the `sm` control (44 px on a coarse pointer) at weight 500 and fills the current one at 600 (a 2 px `Highlight` edge in forced colours), in the row or the side list; an unknown value throws a `RangeError`.
+  - New classes `sw-section-nav-filled` and `sw-section-nav-count`. No new tokens or dependencies.
+
+- 3beef0d: `TableFooter` (with `TableFooterProps`): the table's `tfoot` for a total row, its cells at weight 600 under a 2 px rule (`docs/requests/teisoro-table-footer.md`, Teisoro F-011 release R4).
+
+  - `sticky` pins the footer to the bottom edge on the header's glass, on a new stacking layer `stickyFooter` (2) between sticky table cells (1) and the sticky `ActionBar`. The other layers move up one: `bottomChrome` 3, `popupHost` 4, `topChrome` 5 (`popup` stays 10); update any test or stylesheet that pins those numbers. A sticky `ActionBar` or a `Dialog` footer covers a pinned footer, so do not pair them.
+  - In forced colors pinned footer and header cells are the solid system canvas.
+  - While a table with a sticky footer fits its width, its region stops being a scroll box (`sw-scroll-fits`, now on every measured `Table` region whose content fits, which changes its class list), so the footer and the sticky header pin to the page; a wider table scrolls sideways and pins inside its region.
+  - New classes `sw-table-footer-sticky` and `sw-scroll-fits`. No new tokens or dependencies.
+
+- d08712d: Table ledger extensions (`docs/requests/teisoro-table-ledger.md`, Teisoro F-011 release R4):
+
+  - `TableCell` `tone` (`success`, `danger`, `muted`, `accent`; `TableCellTone`, `tableCellTones`): the cell's text in the theme colour.
+  - `Table` `columnRules`: a hairline between columns, mirrored right to left.
+  - `TableRow` `variant="sub"` (`TableRowVariant`, `tableRowVariants`) indents the row's header (`th scope="row"`) with a guide bar under the row above, and `TableRow` `struck` keeps a voided row on the record: subtle fill, muted, struck through (a Badge in a line of text stays plain).
+  - A body or footer row header (`th scope="row"`) now reads as body text instead of a muted column header.
+  - An unknown `tone` or `variant` throws a `RangeError`. No new tokens or dependencies.
+
 ## 1.29.0
 
 ### Minor Changes

package/README.md

@@ -99,6 +99,8 @@ A disabled native text control (`<input>`, `<select>` or `<textarea>` on the can
 
 `Field` `prefix` and `suffix` put short text such as `$` or `%` inside the frame of one native `<input>` child, before or after the value. The text is not part of the value; the input is named by its label plus the adornment (`"Drop amount $"`), unless it names itself with its own `aria-label` or `aria-labelledby`, in which case the adornment joins its description. A press anywhere on the frame focuses the input. Formatting the value stays with the consumer. Any other child throws a `TypeError`.
 
+`Field` `variant="search"` (default `"outlined"`; `fieldVariants`) is a search box over one native `<input>` child with a `value`: the `label` is not drawn but still names the input, which becomes `type="search"` (a `searchbox`); `leading` is your glyph at the frame's start, such as a magnifier, hidden from assistive technology; and while the input holds text and is enabled and not read-only, a clear button named `clearLabel` ("Clear search") ends the frame, puts focus back in the input and calls `onClear` (set the value to `''`); Escape with text calls `onClear` too. The browser's own clear button is hidden, so there is one. The input gets `enterKeyHint="search"` unless you pass one. The frame is the adorned field's, so focus, `error`, `description`, `invalid` and the disabled look work as on any field; a press on the glyph focuses the input; the clear button is the 44 px target on a coarse pointer. A search field without a nonempty `clearLabel` or `onClear`, with `prefix` or `suffix`, or with a child that is not an `<input>` with a `value` throws; `leading`, `clearLabel` and `onClear` on an outlined field, or an unknown `variant`, throw too.
+
 ```tsx
 <Field label="Drop amount" prefix="$">
   <input inputMode="decimal" name="drop" />
@@ -213,9 +215,11 @@ A `Button`'s own children are laid out in a row one token gap apart (spacing ste
 
 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`.
 
+`ButtonGroup` is the action row of a form or dialog (`role="group"`, named by `aria-label`): one line from `md` up, aligned by `justify`, and full-width stacked buttons below it. `attached` makes it one joined control instead, such as Previous, Today and Next: its direct `Button` children sit side by side at one height with no gap, their borders overlapping into single dividers (a borderless variant draws its divider in its own text color at low strength), with square inner corners and `sm`-radius outer ones, mirrored right to left. It keeps its row on a phone and sizes to its buttons, so `justify` does not apply. The group is its own stacking context: a pressed toggle's ring and the focused button's usual outer ring paint over the neighbours. Give every button the same variant and size, such as `secondary`; a wrapper around a button (a tooltip's span) is not joined.
+
 `Badge` is a non-interactive chicklet with a `tone` (`neutral`, `accent`, `success`, `danger`, `warning`) and a `size` (`md`, or `sm` for a table cell). A badge inside a filled `Button` (every variant but `ghost`) sits on `--sw-color-surface` with its words in the text color and its tone on its border, so it reads at 4.5:1 in every palette whatever the button's fill.
 
-`ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu. The open menu sits on the popover layer a `space-1` gap below its trigger (above it when it only fits there), at least `space-2` from every viewport edge (a classic scrollbar is not part of the viewport), and aligned to the trigger's inline start (its right edge in right-to-left), or to its other edge when the trigger ends a row and the menu would not fit from its start. `align="end"` (default `"start"`) lines the menu up with the trigger's inline end even where the start would fit, for a trigger that ends a card or a list row, so the menu stays over that card instead of hanging past it; it takes the start when the end would leave the screen. The menu is as wide as its longest command up to the viewport less both insets, and a longer command wraps. The menu follows its trigger through scroll, window resize, and a change in the menu's or the trigger's size. The menu is in the DOM only while it is open. The trigger and its commands use the compact xs control height for a fine pointer; on a coarse pointer the trigger is at least 44 × 44 px (the md control height, as on `CalendarButton`) and every command is at least 44 px tall.
+`ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu. The open menu sits on the popover layer a `space-1` gap below its trigger (above it when it only fits there), at least `space-2` from every viewport edge (a classic scrollbar is not part of the viewport), and aligned to the trigger's inline start (its right edge in right-to-left), or to its other edge when the trigger ends a row and the menu would not fit from its start. `align="end"` (default `"start"`) lines the menu up with the trigger's inline end even where the start would fit, for a trigger that ends a card or a list row, so the menu stays over that card instead of hanging past it; it takes the start when the end would leave the screen. The menu is as wide as its longest command up to the viewport less both insets, and a longer command wraps. The menu follows its trigger through scroll, window resize, and a change in the menu's or the trigger's size. The menu is in the DOM only while it is open. The trigger and its commands use the compact xs control height for a fine pointer; on a coarse pointer the trigger is at least 44 × 44 px (the md control height, as on `CalendarButton`) and every command is at least 44 px tall. An item's `detail` is its current value at the command's end, such as "English" on a Language command that opens a choice: muted, before a chevron that points to the inline end (mirrored right to left), and read as part of the command's name ("Language English"); `detailLang` marks its language. It is meant for a short value; a long one wraps between words, never inside one. The command runs like any other and opens no submenu, so a command that opens a dialog or a picker says so in its label. A blank `detail`, or a blank `detailLang` or one without a `detail`, throws a `RangeError`. `separatorBefore` draws a hairline (`role="separator"`) before a command, setting it apart, such as Sign out; the arrow keys skip it, and it is never drawn before the first command.
 
 `ActionMenu` `header` is a non-interactive block above the commands, such as who is signed in: each child a line of its own, in the caption size and the muted color, set off by a hairline. It sits outside the `role="menu"` element and the arrow keys, and is the menu's description (`aria-describedby`), read as the menu opens; `null`, `false` and `''` are no header. An item's `lang` (a BCP 47 tag) marks its label as another language than the page's, such as "English" on a Spanish page (WCAG 3.1.2).
 
@@ -348,7 +352,7 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 `Nav` is a labelled `nav` of a workspace's destinations, links or buttons one token gap apart. A `Button` inside it is at least 44 × 44 px on a coarse pointer, whatever its `size`, so a compact row of destinations is still a touch target on a phone or a tablet.
 
-`SectionNav` is the navigation between the sections of one area, such as a portal's pages: a labelled `nav` (`aria-label` or `aria-labelledby`) of links from `items` (`{ id, label, href, current?, icon? }`), quieter than a workspace's `Nav`. `current` is `'page'`, `'location'` (a page inside that section, such as a detail page under its list) or a boolean, written as `aria-current`; the current item is in the text color over an accent underline, or, from `verticalFrom` (a breakpoint) up, where the items stack as a side list, a bar at its start. `icon` is a decorative glyph before the label. `onNavigate` takes a plain press after preventing the browser's navigation, for a client router; a press with a modifier key or the middle button keeps the browser's behavior, and without `onNavigate` the links carry no handler, so a server component can render the nav. A coarse pointer gets 44 px targets. Empty or duplicate ids, empty labels and an unknown `verticalFrom` throw a `RangeError`. Use `Tabs` for panels on one page.
+`SectionNav` is the navigation between the sections of one area, such as a portal's pages: a labelled `nav` (`aria-label` or `aria-labelledby`) of links from `items` (`{ id, label, href, current?, icon?, count? }`), quieter than a workspace's `Nav`. `current` is `'page'`, `'location'` (a page inside that section, such as a detail page under its list) or a boolean, written as `aria-current`; the current item is in the text color over an accent underline, or, from `verticalFrom` (a breakpoint) up, where the items stack as a side list, a bar at its start. `icon` is a decorative glyph before the label. `onNavigate` takes a plain press after preventing the browser's navigation, for a client router; a press with a modifier key or the middle button keeps the browser's behavior, and without `onNavigate` the links carry no handler, so a server component can render the nav. `count` (a whole number) is how many things wait in a section, such as tasks: a filled pill after the label, in the danger color with its on-color figures, read as part of the link's name ("Tasks 3"); 0 shows none, and there is no cap. `countLabel` says what the count means in your words ("3 tasks to do"): it is read in place of the bare number and the pill is hidden from assistive technology. `appearance="filled"` (default `"underline"`) is a quiet row of page buttons for an area's sub-navigation beside its name: no hairline and no underline or start bar, every link the `sm` control with the small radius at weight 500, the current one on a soft muted fill in the text color at 600 (a 2 px `Highlight` edge in forced colors), in the row or the side list. A coarse pointer gets 44 px targets. Empty or duplicate ids, empty labels, a `count` that is not a whole number from 0, a blank `countLabel` or one without a `count`, and an unknown `verticalFrom` or `appearance` throw a `RangeError`. Use `Tabs` for panels on one page.
 
 ```tsx
 <SectionNav
@@ -387,6 +391,10 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `'none'`) and `onSort` is its column's sort control: its children become a button in the header's own style with a chevron (before the name in a `numeric` or end-aligned column), and the cell carries `aria-sort` only while it is the sorted column. `sort` on a data cell, or one of the two without the other, throws a `TypeError`. `Table` `layout="fixed"` (default `auto`) sizes the columns from the header row alone, so a filter that hides a row moves no column, and `verticalAlign="top"` (default `middle`) starts every cell of a tall row on its first line. `TableCell` `width` is `min` (an auto table's column takes the least room its content allows, on one line; set it on each cell of the column) or a size, `xs` to `xl` (4, 6, 8, 12 and 16 rem); in a fixed table a column without a width shares what is left, so leave one column, such as a description, unsized. The HTML `width` attribute is not accepted. Unknown values throw a `RangeError`.
 
+A ledger read across as well as down takes `Table` `columnRules` (a hairline at the inline start of every cell after a row's first, mirrored right to left) and `TableCell` `tone` (`success`, `danger`, `muted` or `accent`: the cell's text in the theme colour, as `Text color` uses it; never the only signal, so keep the sign or the words). `TableRow` `variant="sub"` (default `"default"`) sets a row under the one above, as a batch's items: its row header, a `TableCell as="th" scope="row"`, is indented a `space-6` step with a guide bar at the indent (a sub row without a row header is not indented). `TableRow` `struck` keeps a voided row on the record: the subtle fill and the text muted and struck through, toned cells included; it works with either variant. A line-through is not read aloud, so say why in the row, such as a `Badge` "Voided": a Badge in a line of text is not struck, but one that is itself a flex item (a direct child of `Inline`) is, so put it in the title's line. A row header in the body or footer (`th scope="row"`) reads as body text. An unknown `tone` or `variant` throws a `RangeError`.
+
+`TableFooter` is the table's `tfoot`, for a total: its cells are set at weight 600 under a 2 px rule across its first row (drawn on each cell's `::before`, so forced colors keep it), and a `TableCell as="th" scope="row"` in it names the total. `sticky` pins the footer to the bottom edge on the header's glass (solid under Reduce Transparency, the system canvas in forced colors), on its own layer over the cells and the pinned header. While the table fits its width, a table with a sticky footer stops being a scroll box, so the footer pins to the page's bottom and the sticky header to its top as the page scrolls; a sticky `AppHeader` covers that header. A table wider than its region scrolls sideways in it and pins to the region instead. A sticky `ActionBar` covers a pinned footer, and so does a `Dialog`'s pinned footer, so do not pair them.
+
 `BarChart` `formatValue` writes the axis's values and each value without its own `valueLabel`, such as a currency. `diverging` puts zero in the middle of each track behind a hairline: a positive bar grows toward the inline end and a negative one toward the start, on one scale, and the axis reads minus the maximum, zero and the maximum. Without it every bar grows from the start. An item's `tone` (`BarChartTone`: `'accent'`, `'success'`, `'warning'` or `'danger'`, listed in the exported `barChartTones`) colors its bar by what it means in place of its sign's default (the accent, or danger for a negative value), such as a diverging chart's overage in `'warning'` and shortage in `'danger'`; a toned bar keeps its sign's place, every tone keeps 3:1 against the track, and an unknown tone throws a `RangeError`. Forced colors draw every bar in the system text color, so the value and its side of zero carry the meaning there.
 
 `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.
@@ -402,6 +410,8 @@ A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `
 </Inline>
 ```
 
+`Combobox` is a text input with a list of suggestions, an ARIA 1.2 combobox with list autocomplete. Pass the `label` (drawn above the input unless `labelVisuallyHidden`), the controlled `inputValue` and `onInputChange`, and `groups` you filter from the text yourself: `{ label?, options }`, each option `{ value, label, description?, badge?: { label, tone? }, disabled? }`. Typing, a press on the input or ArrowDown opens the list on the popover layer under the input, at least as wide; each group with a `label` is a `role="group"` under its heading. ArrowDown and ArrowUp move the active option (named by the input's `aria-activedescendant`; focus stays in the input) and wrap; Enter or a press chooses it and calls `onSelect(value)` (set `inputValue` to its label yourself), and a disabled option is shown and read as unavailable but never chosen. `action` (`{ label, onPress, badge? }`) ends the list as one more option, such as adding a new entry. `emptyText` shows when no group has an option, and a polite live region, always in the page, announces it (and, with `countText: (count) => string`, the number of options); `note` is a muted line under the list that describes the input while open. `listLabel` names the list when it differs from the input's label. The active option is held by its value, so it stays put when your results change under it. Escape closes the list and a second Escape empties the input; Alt+ArrowUp, Tab, a blur or a press outside closes it. The input is a `Field` input, so `description`, `error`, `required`, `disabled`, `placeholder` and `size` (`md` or `xs`; `comboboxSizes`) work as on any field. Blank words, duplicate option values, an unknown `size` or badge tone throw a `RangeError`, and an `action` without `onPress` a `TypeError`.
+
 `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
@@ -551,7 +561,7 @@ A strip row with `entry` makes its counts editable: each column holds a `Stepper
 />
 ```
 
-`FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected: it drops its glass fill and sets its label in the muted color (4.5:1 in every palette), without fading, since it can still be chosen. Native radios provide arrow and Space navigation; disabled options are skipped.
+`FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected: it drops its glass fill and sets its label in the muted color (4.5:1 in every palette), without fading, since it can still be chosen. Native radios provide arrow and Space navigation; disabled options are skipped. A `value` of `''` is nothing chosen yet, for a choice the person must still make, such as a reason. `required` sets `required` on each radio and shows the required mark after the label (hidden from assistive technology). `error` puts a message under the chips, as `Field`'s does (a polite live region kept in the page, out of the layout while empty), links it to the group by `aria-describedby`, sets `aria-invalid` on the group and edges every chip in the danger color (`Mark` in forced colors); an empty string is no error. `aria-describedby` adds your own description ids, such as a hint, before the error. A value that is neither `''` nor an option throws a `RangeError`; a filter set always passes a real option. Inside a `<form>`, the browser checks `required` radios on submit and shows its own message first, so a form that shows `error` itself sets `noValidate`.
 
 `DateField` is a controlled date-only field that draws its own calendar. Supply `value`, `min`, and `max` as valid `YYYY-MM-DD` dates; use an empty `value` for a blank field. Its callback returns a date-only string or an empty string, without timezone conversion. Invalid serialized dates and inverted bounds throw; a value outside the bounds remains visible with invalid styling. `required` marks the label with the same `aria-hidden` asterisk as `Field` and sets the entry's native `required`. Its label is drawn as `Field`'s (the same label words and mark inside a `<label>` that keeps the canvas type), so its label row and its gap to the entry match a `Field` beside it. For a blank required field, supply `error` when form validation runs to show the message and invalid styling.
 

package/dist/components/ActionMenu.d.ts

@@ -13,6 +13,20 @@ export type ActionMenuItem = {
     icon?: ReactNode;
     disabled?: boolean;
     destructive?: boolean;
+    /**
+     * A short current value at the command's end with a chevron, such as
+     * "English" on a Language command that opens a choice: muted, read as
+     * part of the command's name ("Language English"). The chevron is
+     * decorative and points to the inline end. Meant for a short value; a
+     * long one wraps between words. The command still runs like any other:
+     * it opens no submenu, so a command that opens a dialog or a picker
+     * says so in its label or what it opens.
+     */
+    detail?: string;
+    /** The BCP 47 language of `detail` when it is not the page's. */
+    detailLang?: string;
+    /** Draws a hairline before the command, setting it apart from the ones above. */
+    separatorBefore?: boolean;
 };
 export type ActionMenuProps = {
     label: string;

package/dist/components/ActionMenu.js

@@ -18,6 +18,10 @@ export function ActionMenu({ label, items, header, trigger, disabled = false, al
     const openRef = useRef(false);
     const [open, setOpen] = useState(false);
     const [focusIndex, setFocusIndex] = useState(-1);
+    if (items.some((item) => (item.detail !== undefined && !item.detail.trim()) ||
+        (item.detailLang !== undefined &&
+            (!item.detailLang.trim() || item.detail === undefined))))
+        throw new RangeError('ActionMenu item detail and detailLang must not be blank; detailLang needs a detail');
     const enabled = !disabled && items.some((item) => !item.disabled);
     useLayoutEffect(() => {
         if (!enabled && open)

package/dist/components/ButtonGroup.d.ts

@@ -3,6 +3,14 @@ export type ButtonGroupJustify = 'start' | 'end' | 'between';
 export type ButtonGroupProps = BoxProps & {
     /** Where the row sits from the `md` breakpoint up; below it every button stacks full width in source order. */
     justify?: ButtonGroupJustify;
+    /**
+     * One joined control instead of a row of separate buttons, such as
+     * Previous, Today and Next: no gap, single dividers, square inner and
+     * rounded outer corners. It keeps its row on a phone and sizes to its
+     * buttons, so `justify` does not apply. Its children are `Button`s; name
+     * the group with `aria-label`.
+     */
+    attached?: boolean;
 };
 /**
  * The action row of a form or dialog: buttons on one line, wrapping when
@@ -11,4 +19,4 @@ export type ButtonGroupProps = BoxProps & {
  * (put the primary action last, as the row already does). It is a `group`,
  * so an `aria-label` names the row for assistive tech.
  */
-export declare function ButtonGroup({ className, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;
+export declare function ButtonGroup({ attached, className, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -8,6 +8,6 @@ import { Box } from './Box.js';
  * (put the primary action last, as the row already does). It is a `group`,
  * so an `aria-label` names the row for assistive tech.
  */
-export function ButtonGroup({ className, justify = 'end', ...rest }) {
-    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, className), role: "group", ...rest }));
+export function ButtonGroup({ attached = false, className, justify = 'end', ...rest }) {
+    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, attached && 'sw-button-group-attached', className), role: "group", ...rest }));
 }

package/dist/components/Combobox.d.ts

@@ -0,0 +1,14 @@
+import { type ComboboxProps } from './combobox/types.js';
+export { comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './combobox/types.js';
+/**
+ * A text input with a list of suggestions (ARIA 1.2 combobox, list
+ * autocomplete): typing, a press on the input or ArrowDown opens the list
+ * and the consumer filters `groups` from `inputValue`; the arrow keys move
+ * the active option (`aria-activedescendant`) while focus stays in the
+ * input; Enter or a press chooses it (`onSelect`) or runs the `action`;
+ * Escape closes the list, and a second Escape empties the input. A
+ * disabled option is shown and read as unavailable but never chosen. The
+ * active option is held by its value, so it stays the same option (or
+ * none) when the results change under it.
+ */
+export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { ComboboxPopup } from './combobox/ComboboxPopup.js';
+import { comboboxEntries } from './combobox/entries.js';
+import { assertCombobox } from './combobox/validate.js';
+import { Field } from './Field.js';
+export { comboboxSizes, } from './combobox/types.js';
+/** A key typed into an input method (Safari reports it as keyCode 229). */
+function isComposing(event) {
+    return event.nativeEvent.isComposing || event.keyCode === 229;
+}
+/**
+ * A text input with a list of suggestions (ARIA 1.2 combobox, list
+ * autocomplete): typing, a press on the input or ArrowDown opens the list
+ * and the consumer filters `groups` from `inputValue`; the arrow keys move
+ * the active option (`aria-activedescendant`) while focus stays in the
+ * input; Enter or a press chooses it (`onSelect`) or runs the `action`;
+ * Escape closes the list, and a second Escape empties the input. A
+ * disabled option is shown and read as unavailable but never chosen. The
+ * active option is held by its value, so it stays the same option (or
+ * none) when the results change under it.
+ */
+export function Combobox(props) {
+    assertCombobox(props);
+    const { action, countText, description, disabled = false, emptyText, error, groups, inputValue, label, labelVisuallyHidden = false, listLabel, note, onInputChange, onSelect, placeholder, required = false, size = 'md', } = props;
+    const listId = useId();
+    const noteId = useId();
+    const inputRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [activeKey, setActiveKey] = useState(null);
+    // Disabling closes the list for good, so enabling never reopens it.
+    if (disabled && open) {
+        setOpen(false);
+        setActiveKey(null);
+    }
+    const entries = comboboxEntries(listId, groups, action);
+    const shown = open && !disabled;
+    const active = shown
+        ? entries.find((entry) => entry.key === activeKey)
+        : undefined;
+    // An active option that leaves the results is dropped, so it never comes
+    // back active on its own.
+    if (shown && activeKey !== null && !active)
+        setActiveKey(null);
+    const hasList = entries.length > 0;
+    const optionCount = entries.filter((entry) => entry.kind === 'option').length;
+    const announcement = !shown
+        ? ''
+        : optionCount === 0
+            ? emptyText
+            : (countText?.(optionCount) ?? '');
+    function close() {
+        setOpen(false);
+        setActiveKey(null);
+    }
+    function choose(entry) {
+        if (entry.kind === 'option') {
+            if (entry.option.disabled)
+                return;
+            close();
+            onSelect(entry.option.value);
+        }
+        else {
+            close();
+            entry.action.onPress();
+        }
+    }
+    function move(step) {
+        if (entries.length === 0)
+            return;
+        const last = entries.length - 1;
+        if (!shown || !active) {
+            setOpen(true);
+            setActiveKey(entries[step === 1 ? 0 : last].key);
+            return;
+        }
+        const next = (active.index + step + entries.length) % entries.length;
+        setActiveKey(entries[next].key);
+    }
+    function onKeyDown(event) {
+        if (isComposing(event))
+            return;
+        if (event.altKey && event.key === 'ArrowDown') {
+            event.preventDefault();
+            setOpen(true);
+        }
+        else if (event.altKey && event.key === 'ArrowUp') {
+            event.preventDefault();
+            close();
+        }
+        else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            move(event.key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (event.key === 'Enter') {
+            if (active) {
+                event.preventDefault();
+                choose(active);
+            }
+        }
+        else if (event.key === 'Escape') {
+            if (shown) {
+                event.preventDefault();
+                close();
+            }
+            else if (inputValue !== '') {
+                event.preventDefault();
+                onInputChange('');
+            }
+        }
+        // Tab moves focus out, and the blur closes the list.
+    }
+    return (_jsxs("div", { className: "sw-combobox", children: [_jsx(Field, { description: description, error: error, label: label, labelVisuallyHidden: labelVisuallyHidden, required: required, size: size, children: _jsx("input", { "aria-activedescendant": active?.id, "aria-autocomplete": "list", "aria-controls": shown && hasList ? listId : undefined, "aria-describedby": shown && note ? noteId : undefined, "aria-expanded": shown && hasList, autoComplete: "off", disabled: disabled, onBlur: close, onChange: (event) => {
+                        onInputChange(event.currentTarget.value);
+                        setOpen(true);
+                        setActiveKey(null);
+                    }, 
+                    // A press on the input opens the list, as the boards show it
+                    // under an empty field.
+                    onClick: () => {
+                        if (!shown)
+                            setOpen(true);
+                    }, onKeyDown: onKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", spellCheck: false, type: "text", value: inputValue }) }), _jsx("span", { "aria-live": "polite", className: "sw-sr-only", role: "status", children: announcement }), shown ? (_jsx(ComboboxPopup, { activeId: active?.id, emptyText: emptyText, entries: entries, groups: groups, inputRef: inputRef, listId: listId, listLabel: listLabel ?? label, note: note, noteId: noteId, onActivate: (entry) => setActiveKey(entry.key), onChoose: choose, onDismiss: close })) : null] }));
+}

package/dist/components/Field.d.ts

@@ -1,6 +1,8 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type ReactNode } from 'react';
 export type FieldSize = 'xs' | 'md';
+export declare const fieldVariants: readonly ["outlined", "search"];
+export type FieldVariant = (typeof fieldVariants)[number];
 export type FieldProps = {
     children: ReactNode;
     gap?: SpacingStep;
@@ -35,5 +37,20 @@ export type FieldProps = {
     prefix?: string;
     /** Short text inside the control frame after the value, such as a unit. Not part of the value. */
     suffix?: string;
+    /**
+     * `outlined` (default) is the labelled form field. `search` is a search
+     * box: the label is not drawn (it stays the input's name), a `leading`
+     * glyph sits at the frame's start, the input is `type="search"`, and a
+     * clear button named `clearLabel` shows while the input holds text and
+     * is enabled; it calls `onClear` (set the value to `''`) and puts focus
+     * back in the input. Needs one native `input` child with a `value`.
+     */
+    variant?: FieldVariant;
+    /** A search field's glyph at its start, such as a magnifier; hidden from assistive technology. */
+    leading?: ReactNode;
+    /** A search field's clear button name, such as "Clear search". */
+    clearLabel?: string;
+    /** Called by a search field's clear button; the consumer empties the value. */
+    onClear?: () => void;
 };
 export declare function Field(props: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -1,10 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useId } from 'react';
+import { cloneElement, isValidElement, useId, } from 'react';
 import { adornedControlAria, FieldAdornment, } from './FieldAdornment.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+import { SearchFrame } from './field/SearchFrame.js';
 import { Stack } from './Stack.js';
+export const fieldVariants = ['outlined', 'search'];
+function assertSearch(props, child) {
+    const { variant = 'outlined' } = props;
+    if (!fieldVariants.includes(variant))
+        throw new RangeError(`Unknown Field variant: ${String(variant)}`);
+    if (variant !== 'search') {
+        if (props.leading !== undefined ||
+            props.clearLabel !== undefined ||
+            props.onClear !== undefined)
+            throw new TypeError('Field leading, clearLabel and onClear are for variant="search"');
+        return;
+    }
+    if (!props.clearLabel?.trim())
+        throw new RangeError('A search Field needs a nonempty clearLabel');
+    if (typeof props.onClear !== 'function')
+        throw new TypeError('A search Field needs onClear');
+    if (props.prefix || props.suffix)
+        throw new TypeError('A search Field takes leading, not prefix or suffix');
+    if (!isValidElement(child) || child.type !== 'input')
+        throw new TypeError('A search Field needs one native input child');
+    if (child.props.value === undefined)
+        throw new TypeError('A search Field needs a controlled input: pass value (and onChange)');
+}
 /**
  * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
  * forwarding an optional prop passes nothing): such a field needs one native
@@ -17,7 +41,9 @@ function passesInvalid(props) {
     return props.invalid !== undefined || props.changed !== undefined;
 }
 export function Field(props) {
-    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, prefix, suffix, } = props;
+    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, } = props;
+    assertSearch(props, children);
+    const search = variant === 'search';
     const controlId = useId();
     const descriptionId = useId();
     const errorId = useId();
@@ -32,17 +58,20 @@ export function Field(props) {
         'sw-field',
         size === 'xs' && 'sw-field-xs',
         marksInvalid && 'sw-field-invalid',
+        search && 'sw-field-search-field',
         changed && !marksInvalid && 'sw-field-changed',
     ]
         .filter(Boolean)
         .join(' ');
-    const labelText = (_jsx(FieldLabelText, { label: label, required: required, size: size, visuallyHidden: labelVisuallyHidden }));
+    // A search field hides its whole label element instead (see below).
+    const labelHidden = labelVisuallyHidden && !search;
+    const labelText = (_jsx(FieldLabelText, { label: label, required: required, size: size, visuallyHidden: labelHidden }));
     if (!isValidElement(children) ||
         typeof children.type !== 'string' ||
         !['input', 'select', 'textarea'].includes(children.type)) {
         if (needsControl)
             throw new TypeError('Field validation and adornments require one native input, select, or textarea child');
-        return (_jsxs(Stack, { as: "label", className: className, gap: labelVisuallyHidden ? 0 : gap, children: [labelText, children] }));
+        return (_jsxs(Stack, { as: "label", className: className, gap: labelHidden ? 0 : gap, children: [labelText, children] }));
     }
     if (adorned && children.type !== 'input')
         throw new TypeError('Field prefix and suffix require a native input child');
@@ -63,6 +92,26 @@ export function Field(props) {
         'aria-invalid': marksInvalid ? true : children.props['aria-invalid'],
         'aria-labelledby': adornment.labelledBy,
         required: required || children.props.required,
+        ...(search
+            ? {
+                type: 'search',
+                enterKeyHint: children.props.enterKeyHint ?? 'search',
+                // Escape empties the box through onClear, the one clearing path
+                // (WebKit and Blink would otherwise clear it themselves).
+                onKeyDown: (event) => {
+                    children.props.onKeyDown?.(event);
+                    if (event.key === 'Escape' &&
+                        !event.defaultPrevented &&
+                        !event.currentTarget.readOnly &&
+                        event.currentTarget.value !== '') {
+                        event.preventDefault();
+                        onClear?.();
+                    }
+                },
+            }
+            : {}),
     });
-    return (_jsxs(Stack, { as: "div", className: className, gap: labelVisuallyHidden ? 0 : gap, children: [_jsx("label", { htmlFor: children.props.id || controlId, id: labelId, children: labelText }), adorned ? (_jsx(FieldAdornment, { prefix: prefix, prefixId: prefixId, suffix: suffix, suffixId: suffixId, children: control })) : (control), description && !error ? (_jsx("span", { className: "sw-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
+    const value = children.props.value;
+    const hasText = value !== undefined && value !== null && String(value) !== '';
+    return (_jsxs(Stack, { as: "div", className: className, gap: labelHidden ? 0 : gap, children: [_jsx("label", { className: search ? 'sw-sr-only' : undefined, htmlFor: children.props.id || controlId, id: labelId, children: labelText }), search ? (_jsx(SearchFrame, { clearLabel: clearLabel, leading: leading, onClear: onClear, showClear: hasText && !children.props.disabled && !children.props.readOnly, children: control })) : adorned ? (_jsx(FieldAdornment, { prefix: prefix, prefixId: prefixId, suffix: suffix, suffixId: suffixId, children: control })) : (control), description && !error ? (_jsx("span", { className: "sw-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 }

package/dist/components/FilterChips.d.ts

@@ -6,8 +6,24 @@ export type FilterChipOption = {
 };
 export type FilterChipsProps = {
     label: string;
+    /** The chosen option's value, or `''` while nothing is chosen yet. */
     value: string;
     onChange: (value: string) => void;
     options: readonly FilterChipOption[];
+    /**
+     * A choice must be made, such as a reason: each radio is `required` and
+     * the label shows the required mark (hidden from assistive technology,
+     * which reads the radios' own state).
+     */
+    required?: boolean;
+    /**
+     * A message under the chips, such as "Pick a reason": a polite live
+     * region linked to the group by `aria-describedby`; the group is marked
+     * invalid and every chip takes the danger edge. An empty string is no
+     * error.
+     */
+    error?: string;
+    /** More ids that describe the group, such as a hint beside it. */
+    'aria-describedby'?: string;
 };
-export declare function FilterChips({ label, value, onChange, options, }: FilterChipsProps): import("react").JSX.Element;
+export declare function FilterChips({ label, value, onChange, options, required, error, 'aria-describedby': describedByProp, }: FilterChipsProps): import("react").JSX.Element;

package/dist/components/FilterChips.js

@@ -1,12 +1,17 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from 'react';
 import { cx } from '../class-names.js';
+import { FieldErrorRegion } from './FieldErrorRegion.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
-export function FilterChips({ label, value, onChange, options, }) {
+export function FilterChips({ label, value, onChange, options, required = false, error, 'aria-describedby': describedByProp, }) {
     const name = useId();
+    const errorId = useId();
+    const describedBy = [describedByProp?.trim() || null, error ? errorId : null]
+        .filter((id) => id !== null)
+        .join(' ');
     const values = options.map((option) => option.value);
     if (!label.trim())
         throw new RangeError('label must not be empty');
@@ -15,12 +20,12 @@ export function FilterChips({ label, value, onChange, options, }) {
         throw new RangeError('options must have nonempty values and labels');
     if (new Set(values).size !== values.length)
         throw new RangeError('options must have unique values');
-    if (!values.includes(value))
-        throw new RangeError('value must match an option');
+    if (value !== '' && !values.includes(value))
+        throw new RangeError('value must match an option or be empty');
     if (options.some((option) => !isCount(option.count)))
         throw new RangeError('count must be a non-negative integer');
-    return (_jsxs("fieldset", { className: "sw-filter-chips", children: [_jsx("legend", { className: "sw-filter-chips-legend", children: label }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: "sw-filter-chips", children: [_jsxs("legend", { className: "sw-filter-chips-legend", children: [label, required ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
                                 if (event.currentTarget.checked && !option.disabled)
                                     onChange(option.value);
-                            }, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) })] }));
+                            }, required: required, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
 }

package/dist/components/ScrollRegion.d.ts

@@ -4,6 +4,8 @@ type ScrollRegionProps = {
     className: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    /** Adds `sw-scroll-fits` once measured with content that fits its width. */
+    markFits?: boolean;
 };
 /**
  * Private wrapper that scrolls wide content inside its own box (see
@@ -12,7 +14,9 @@ type ScrollRegionProps = {
  * keyboard and is announced as one group. While content is scrolled out past
  * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
  * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
- * the table goes on.
+ * the table goes on. With `markFits`, a measured region whose content fits
+ * its width carries `sw-scroll-fits`, so a table with a sticky footer can
+ * stop being a scroll box and pin its header and footer to the page.
  */
-export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ScrollRegionProps): import("react").JSX.Element;
+export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits, }: ScrollRegionProps): import("react").JSX.Element;
 export {};

package/dist/components/ScrollRegion.js

@@ -10,10 +10,16 @@ import { useScrollOverflow } from './use-scroll-overflow.js';
  * keyboard and is announced as one group. While content is scrolled out past
  * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
  * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
- * the table goes on.
+ * the table goes on. With `markFits`, a measured region whose content fits
+ * its width carries `sw-scroll-fits`, so a table with a sticky footer can
+ * stop being a scroll box and pin its header and footer to the page.
  */
-export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) {
+export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits = false, }) {
     const ref = useRef(null);
     const overflow = useScrollOverflow(ref);
-    return (_jsx("div", { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cx(className, overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end'), role: "group", tabIndex: 0, children: children }));
+    return (_jsx("div", { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cx(className, overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end', markFits &&
+            overflow.measured &&
+            !overflow.start &&
+            !overflow.end &&
+            'sw-scroll-fits'), role: "group", tabIndex: 0, children: children }));
 }