@scalewing/react 1.29.0 → 1.31.0

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from 'react';
+import { type TableRowVariant } from '../../css/css-table-ledger.js';
+export type { TableRowVariant };
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `sub` sets the row under the one above it, as an item of a batch: its
+     * row header (`TableCell as="th" scope="row"`) is indented with a guide
+     * bar at the indent; a sub row without a row header is not indented.
+     * `default` is a row of its own.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+};
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `sub` sets the row under the one above it, as an item of a batch: its
+     * row header (`TableCell as="th" scope="row"`) is indented with a guide
+     * bar at the indent; a sub row without a row header is not indented.
+     * `default` is a row of its own.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+} & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/table/TableRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../class-names.js';
+import { assertTableRowVariant, } from '../../css/css-table-ledger.js';
+export const TableRow = forwardRef(function TableRow({ className, selected = false, struck = false, variant = 'default', ...rest }, ref) {
+    assertTableRowVariant(variant);
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', struck && 'sw-table-row-struck', className), ...rest }));
+});

package/dist/components/use-scroll-overflow.d.ts

@@ -1,9 +1,14 @@
 import { type RefObject } from 'react';
 import { type ScrollOverflow } from '../scroll-overflow.js';
+/** A box's overflow, and whether it has been measured yet. */
+export type MeasuredScrollOverflow = ScrollOverflow & {
+    measured: boolean;
+};
 /**
  * Follows which inline edges of a scroll box have more content past them:
  * on mount, on every scroll, and whenever the box or its content changes
- * size. Before mount (and on the server) it reports no overflow, so the
- * box renders as it always has until it is measured.
+ * size. Before mount (and on the server) it reports no overflow and
+ * `measured: false`, so the box renders as it always has until it is
+ * measured; a measured box with neither edge set fits its content.
  */
-export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): ScrollOverflow;
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): MeasuredScrollOverflow;

package/dist/components/use-scroll-overflow.js

@@ -1,23 +1,34 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { noScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
+const unmeasured = {
+    ...noScrollOverflow,
+    measured: false,
+};
 /**
  * Follows which inline edges of a scroll box have more content past them:
  * on mount, on every scroll, and whenever the box or its content changes
- * size. Before mount (and on the server) it reports no overflow, so the
- * box renders as it always has until it is measured.
+ * size. Before mount (and on the server) it reports no overflow and
+ * `measured: false`, so the box renders as it always has until it is
+ * measured; a measured box with neither edge set fits its content.
  */
 export function useScrollOverflow(ref) {
-    const [overflow, setOverflow] = useState(noScrollOverflow);
+    const [overflow, setOverflow] = useState(unmeasured);
     useEffect(() => {
         const box = ref.current;
         if (!box)
             return;
+        // The metrics hold on a box that does not scroll (a fitting table
+        // region set to overflow: visible): scrollWidth still reports content
+        // past its edge, so the box turns back into a scroll box as it widens.
+        // Keep it that way; a scroll-container-only check would pin it open.
         function measure() {
             if (!box)
                 return;
             const next = scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth);
-            setOverflow((current) => sameScrollOverflow(current, next) ? current : next);
+            setOverflow((current) => current.measured && sameScrollOverflow(current, next)
+                ? current
+                : { ...next, measured: true });
         }
         measure();
         box.addEventListener('scroll', measure, { passive: true });

package/dist/css/css-action-menu.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -114,6 +115,43 @@ export function cssActionMenuClasses() {
   color: var(--sw-color-danger);
 }
 
+/*
+ * A command's detail: its current value at the inline end in the muted
+ * colour, then a chevron pointing to the inline end (mirrored right to
+ * left). A long value wraps between words, never inside one (the command
+ * itself may break anywhere), and the chevron stays last.
+ */
+.sw-action-menu-detail {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+  overflow-wrap: normal;
+  padding-inline-start: var(--sw-space-3);
+  text-align: end;
+}
+
+.sw-action-menu-chevron {
+  ${chevronStroke}
+  flex: none;
+  transform: rotate(-45deg);
+}
+
+.sw-action-menu-chevron:dir(rtl) {
+  transform: rotate(135deg);
+}
+
+/* A hairline that sets a command apart from the ones above. */
+.sw-action-menu-separator {
+  border-top: 1px solid var(--sw-color-border);
+  margin-block: var(--sw-space-1);
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-chevron { border-color: CanvasText; }
+}
+
 /* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
 @media ${coarsePointerQuery} {
   .sw-action-menu-trigger {
@@ -135,5 +173,8 @@ export function actionMenuClassCatalog() {
         'sw-action-menu-items',
         'sw-action-menu-item',
         'sw-action-menu-item-danger',
+        'sw-action-menu-detail',
+        'sw-action-menu-chevron',
+        'sw-action-menu-separator',
     ];
 }

package/dist/css/css-button-group-attached.d.ts

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

package/dist/css/css-button-group-attached.js

@@ -0,0 +1,70 @@
+import { breakpointQuery } from './breakpoints.js';
+import { joinedZIndex } from './stacking.js';
+/*
+ * An attached ButtonGroup is one joined control, such as Previous, Today
+ * and Next: its direct Button children side by side with no gap and one
+ * height, their borders overlapping into single dividers, the inner
+ * corners square and the outer ones the sm radius. It keeps its row on a
+ * phone (it never stacks) and sizes to its buttons, even in a Stack that
+ * would stretch it, so `justify` does not apply.
+ *
+ * A borderless variant (primary, tertiary, ghost, danger) draws its
+ * divider in its own text colour at low strength, so a joined row of them
+ * still reads as separate buttons; forced colours draw every border.
+ *
+ * The group is its own stacking context: a pressed button's ring paints
+ * over its neighbours and the focused button's standard outer ring over
+ * both, so neither is covered by the next button.
+ */
+export function cssButtonGroupAttachedClasses() {
+    const group = '.sw-button-group.sw-button-group-attached';
+    return `${group} {
+  align-items: stretch;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  isolation: isolate;
+  max-width: 100%;
+  width: fit-content;
+}
+
+${group} > .sw-button {
+  border-radius: 0;
+}
+
+${group} > .sw-button + .sw-button {
+  margin-inline-start: -1px;
+}
+
+${group} > .sw-button:first-child {
+  border-end-start-radius: var(--sw-radius-sm);
+  border-start-start-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button:last-child {
+  border-end-end-radius: var(--sw-radius-sm);
+  border-start-end-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+  border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+${group} > .sw-button[aria-pressed='true'] {
+  position: relative;
+  ${joinedZIndex('pressed')}
+}
+
+${group} > .sw-button:focus-visible {
+  position: relative;
+  ${joinedZIndex('focused')}
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${group} { align-items: stretch; flex-direction: row; }
+  ${group} > * { width: auto; }
+}`;
+}
+export function buttonGroupAttachedClassCatalog() {
+    return ['sw-button-group-attached'];
+}

package/dist/css/css-button.js

@@ -1,5 +1,6 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
+import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
 const label = typographyVariants.label;
 export function buttonClassNames(options) {
     return [
@@ -93,7 +94,9 @@ export function cssButtonClasses() {
 ${variantRules()}
 ${pressedRules()}
 ${sizeRules()}
-${groupRules()}`;
+${groupRules()}
+
+${cssButtonGroupAttachedClasses()}`;
 }
 export const buttonGroupJustifies = ['start', 'end', 'between'];
 /** The action row: one line from md up, full-width stacked buttons below it. */
@@ -119,5 +122,6 @@ export function buttonClassCatalog() {
         ...buttonSizes.map((size) => `sw-button-${size}`),
         'sw-button-group',
         ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
+        ...buttonGroupAttachedClassCatalog(),
     ];
 }

package/dist/css/css-combobox.d.ts

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

package/dist/css/css-combobox.js

@@ -0,0 +1,135 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/*
+ * The combobox input is a Field's input. Its list is a glass popover on
+ * the popup layer (as Select's list), at least as wide as the input: a
+ * caption heading per group, then options at the md control height with
+ * the label, a badge and a muted description on one wrapping line. The
+ * active option (the one aria-activedescendant names) takes the soft
+ * muted fill; a hairline parts each option from the one before it, as
+ * the boards draw it; a disabled option is muted and not pressable; the action
+ * ends the list in the accent colour over a hairline. The empty text and
+ * the note are muted captions under the list.
+ */
+export function cssComboboxClasses() {
+    return `.sw-combobox {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-combobox-popup {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  inset: auto;
+  margin: 0;
+  max-height: min(var(--sw-select-max), calc(100% - var(--sw-space-2) - var(--sw-space-2)));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  ${zIndex('popup')}
+}
+
+.sw-combobox-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: var(--sw-space-2) var(--sw-space-3) var(--sw-space-1);
+}
+
+.sw-combobox-option {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-3);
+}
+
+.sw-combobox-option + .sw-combobox-option {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-combobox-label {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-combobox-description {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-combobox-option[aria-selected='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-combobox-option[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.sw-combobox-option[aria-disabled='true'] .sw-combobox-label {
+  color: var(--sw-color-muted);
+}
+
+.sw-combobox-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}
+
+.sw-combobox-empty,
+.sw-combobox-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+@media (forced-colors: active) {
+  .sw-combobox-popup { border-color: CanvasText; }
+  .sw-combobox-option[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-combobox-option[aria-selected='true'] .sw-combobox-description { color: HighlightText; }
+  .sw-combobox-option[aria-selected='true'] .sw-badge { forced-color-adjust: auto; }
+  .sw-combobox-option[aria-disabled='true'] .sw-combobox-label { color: GrayText; }
+  .sw-combobox-option[aria-selected='true'][aria-disabled='true'] .sw-combobox-label { color: HighlightText; }
+  .sw-combobox-option + .sw-combobox-option { border-color: CanvasText; }
+  .sw-combobox-action { border-color: CanvasText; }
+}`;
+}
+export function comboboxClassCatalog() {
+    return [
+        'sw-combobox',
+        'sw-combobox-popup',
+        'sw-combobox-list',
+        'sw-combobox-heading',
+        'sw-combobox-option',
+        'sw-combobox-label',
+        'sw-combobox-description',
+        'sw-combobox-action',
+        'sw-combobox-empty',
+        'sw-combobox-note',
+    ];
+}

package/dist/css/css-components.js

@@ -14,6 +14,7 @@ import { cssTableClasses } from './css-table.js';
 import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
+import { cssComboboxClasses } from './css-combobox.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
@@ -55,6 +56,7 @@ function reducedTransparencyRules() {
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
+  .sw-table .sw-table-footer-sticky :is(th, td),
   .sw-denomination-strip .sw-denomination-label,
   .sw-denomination-strip thead .sw-denomination-corner:first-child,
   .sw-bar-chart-track,
@@ -63,6 +65,7 @@ function reducedTransparencyRules() {
   .sw-select-list,
   .sw-action-menu-list,
   .sw-multi-select-panel,
+  .sw-combobox-popup,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
@@ -147,6 +150,7 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssComboboxClasses()}
 ${cssMultiSelectClasses()}
 
 ${cssActionBarClasses()}

package/dist/css/css-field-search.d.ts

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

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

@@ -0,0 +1,118 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * A search field is the adorned frame (the control surface, its focus
+ * ring, its danger and disabled looks) with the consumer's glyph in the
+ * muted colour at its start, a space-2 gap, and a clear button at its end:
+ * a muted disc with a cross in the surface colour, centred in an xs control
+ * square (the 44 px target on a coarse pointer) that reaches the frame's
+ * edge. The browser's own clear button and search glyph are hidden, so the
+ * field shows one of each.
+ */
+export function cssFieldSearchClasses() {
+    return `.sw-field-adorned.sw-field-search {
+  gap: var(--sw-space-2);
+  padding-inline-end: 0;
+}
+
+.sw-field-search-leading {
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+}
+
+[data-theme] .sw-field-search > input[type='search'] {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.sw-field-search > input[type='search']::-webkit-search-cancel-button,
+.sw-field-search > input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+.sw-field-search > input:last-child {
+  margin-inline-end: var(--sw-control-md-padding-inline);
+}
+
+.sw-field-search-clear {
+  align-items: center;
+  align-self: stretch;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  margin: 0;
+  min-width: var(--sw-control-xs-min-height);
+  padding: 0 var(--sw-space-2);
+}
+
+.sw-field-search-clear:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+/* One ring at a time: the clear button's own while it has focus. */
+.sw-field-search:has(.sw-field-search-clear:focus-visible) {
+  outline: none;
+}
+
+.sw-field-search-clear:hover .sw-field-search-cross {
+  background: var(--sw-color-text);
+}
+
+.sw-field-xs .sw-field-search > input:last-child {
+  margin-inline-end: var(--sw-control-xs-padding-inline);
+}
+
+.sw-field-search-cross {
+  background: var(--sw-color-muted);
+  border-radius: var(--sw-radius-pill);
+  display: inline-block;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-field-search-cross::before,
+.sw-field-search-cross::after {
+  background: var(--sw-color-surface);
+  border-radius: 1px;
+  content: '';
+  height: 2px;
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  width: calc(var(--sw-space-2) + 2px);
+}
+
+.sw-field-search-cross::before { transform: rotate(45deg); }
+.sw-field-search-cross::after { transform: rotate(-45deg); }
+
+@media ${coarsePointerQuery} {
+  .sw-field-search-clear { min-width: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-field-search-leading { color: FieldText; }
+  /* Backgrounds are forced in this mode; the disc keeps its own system colours. */
+  .sw-field-search-cross { background: ButtonText; forced-color-adjust: none; }
+  .sw-field-search-cross::before,
+  .sw-field-search-cross::after { background: ButtonFace; }
+}`;
+}
+export function fieldSearchClassCatalog() {
+    return [
+        'sw-field-search-field',
+        'sw-field-search',
+        'sw-field-search-leading',
+        'sw-field-search-clear',
+        'sw-field-search-cross',
+    ];
+}

package/dist/css/css-field.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { cssFieldChangedClasses } from './css-field-changed.js';
+import { cssFieldSearchClasses, fieldSearchClassCatalog, } from './css-field-search.js';
 const caption = typographyVariants.caption;
 /*
  * A prefix or suffix sits inside the control frame: the wrapper draws the
@@ -83,6 +84,8 @@ export function cssFieldClasses() {
 
 ${adornmentRules()}
 
+${cssFieldSearchClasses()}
+
 ${cssFieldChangedClasses()}
 
 @media (forced-colors: active) {
@@ -106,5 +109,6 @@ export function fieldClassCatalog() {
         'sw-field-adorned',
         'sw-field-prefix',
         'sw-field-suffix',
+        ...fieldSearchClassCatalog(),
     ];
 }

package/dist/css/css-filter-chips.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
+const caption = typographyVariants.caption;
 export function cssFilterChipsClasses() {
     return `.sw-filter-chips {
   border: 0;
@@ -101,11 +102,35 @@ export function cssFilterChipsClasses() {
   opacity: var(--sw-disabled-opacity);
 }
 
+/*
+ * An error: the message under the chips in the danger colour (a polite live
+ * region, out of the layout while empty) and every chip's edge in danger,
+ * the chosen one too (it keeps its accent fill), in normal and forced
+ * colours alike.
+ */
+.sw-filter-chips-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  padding-top: var(--sw-space-2);
+}
+
+.sw-filter-chips-error:empty { position: absolute; }
+
+.sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face {
+  border-color: var(--sw-color-danger);
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .sw-filter-chips-error { color: Mark; }
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
   .sw-filter-chip-count { color: inherit; }
+  /* After the checked rule, so every chip, the chosen one too, takes the edge. */
+  .sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face { border-color: Mark; }
 }`;
 }
 export function filterChipsClassCatalog() {
@@ -118,5 +143,6 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-face',
         'sw-filter-chip-count',
         'sw-filter-chip-quiet',
+        'sw-filter-chips-error',
     ];
 }

package/dist/css/css-section-nav-filled.d.ts

@@ -0,0 +1,6 @@
+/** How a section navigation marks its current item. */
+export declare const sectionNavAppearances: readonly ["underline", "filled"];
+export type SectionNavAppearance = (typeof sectionNavAppearances)[number];
+export declare function assertSectionNavAppearance(appearance: unknown): void;
+export declare function cssSectionNavFilledClasses(): string;
+export declare function sectionNavFilledClassCatalog(): string[];