@scalewing/react 1.51.0 → 1.53.0

package/dist/components/paste-rows/parse-pasted-rows.js

@@ -0,0 +1,123 @@
+export const pastedRowsDelimiters = [
+    'auto',
+    'tab',
+    'comma',
+];
+function resolveDelimiter(text, delimiter) {
+    if (!pastedRowsDelimiters.includes(delimiter))
+        throw new RangeError(`Unknown PasteRows delimiter: ${String(delimiter)}`);
+    if (delimiter !== 'auto')
+        return delimiter;
+    return text.includes('\t') ? 'tab' : 'comma';
+}
+/**
+ * Reads one quoted cell starting at the opening quote `start`: `""` is
+ * one quote, and delimiters and line breaks inside it are its words.
+ * Returns the words and the index after the closing quote, or `null` when
+ * no lone closing quote follows (the opening quote is then a character).
+ */
+function readQuoted(text, start) {
+    let words = '';
+    let index = start + 1;
+    while (index < text.length) {
+        const char = text[index];
+        if (char === '"') {
+            if (text[index + 1] === '"') {
+                words += '"';
+                index += 2;
+                continue;
+            }
+            return [words, index + 1];
+        }
+        words += char;
+        index += 1;
+    }
+    return null;
+}
+/**
+ * For each index, where a quoted cell's scan starting there would find its
+ * lone closing quote (`""` being one escaped quote), or -1 when none
+ * follows; one extra entry for the end. Built backwards in one pass, so
+ * each opening quote is checked in constant time and the parse stays
+ * linear: a run of quotes from i of odd length closes on its last quote,
+ * an even run is all escapes and the scan carries on after it.
+ */
+function closingQuoteTable(text) {
+    const closesFrom = new Int32Array(text.length + 1).fill(-1);
+    const runFrom = new Int32Array(text.length + 1);
+    for (let index = text.length - 1; index >= 0; index -= 1) {
+        if (text[index] !== '"') {
+            closesFrom[index] = closesFrom[index + 1];
+            continue;
+        }
+        const run = 1 + runFrom[index + 1];
+        runFrom[index] = run;
+        closesFrom[index] =
+            run % 2 === 1 ? index + run - 1 : closesFrom[index + run];
+    }
+    return closesFrom;
+}
+/**
+ * Splits pasted text into rows of trimmed cells: rows on line breaks
+ * (CR, LF or CRLF), cells on the delimiter. A cell that starts with a
+ * double quote and has a closing one later is quoted, as spreadsheets and
+ * CSV write a cell holding the delimiter, a line break or a quote; any
+ * other quote is a plain character. Rows whose cells are all blank are
+ * left out. It knows nothing of what the columns mean: the consumer maps
+ * and checks them. Linear in the text's length.
+ */
+export function parsePastedRows(text, delimiter = 'auto') {
+    const used = resolveDelimiter(text, delimiter);
+    const separator = used === 'tab' ? '\t' : ',';
+    const closesFrom = closingQuoteTable(text);
+    const rows = [];
+    let row = [];
+    let cell = '';
+    let cellStart = true;
+    const endCell = () => {
+        row.push(cell.trim());
+        cell = '';
+        cellStart = true;
+    };
+    const endRow = () => {
+        endCell();
+        if (row.some((value) => value !== ''))
+            rows.push(row);
+        row = [];
+    };
+    let index = 0;
+    while (index < text.length) {
+        const char = text[index];
+        const quoted = cellStart && char === '"' && closesFrom[index + 1] >= 0
+            ? readQuoted(text, index)
+            : null;
+        if (quoted) {
+            cell += quoted[0];
+            index = quoted[1];
+            cellStart = false;
+        }
+        else if (char === separator) {
+            endCell();
+            index += 1;
+        }
+        else if (char === '\r' || char === '\n') {
+            endRow();
+            index += char === '\r' && text[index + 1] === '\n' ? 2 : 1;
+        }
+        else {
+            // Spaces before a quoted cell's opening quote do not unquote it.
+            if (!(cellStart && char === ' ')) {
+                cell += char;
+                cellStart = false;
+            }
+            index += 1;
+        }
+    }
+    if (cell !== '' || row.length > 0)
+        endRow();
+    const columnCount = rows.reduce((most, cells) => Math.max(most, cells.length), 0);
+    for (const cells of rows)
+        while (cells.length < columnCount)
+            cells.push('');
+    return { rows, columnCount, delimiter: used };
+}

package/dist/components/site-header/types.d.ts

@@ -15,6 +15,16 @@ export type SiteHeaderLabels = {
     /** The open menu button's name, such as "Close the menu". */
     closeMenu: string;
 };
+/**
+ * A "skip to content" link, the header's first focusable element: hidden
+ * until it has focus, then shown at the bar's start.
+ */
+export type SiteHeaderSkipLink = {
+    /** The link's words, such as "Skip to content". */
+    label: string;
+    /** The main content's fragment, such as `#main`. */
+    href: string;
+};
 export type SiteHeaderProps = {
     /** The site's mark at the start, such as a logo linked to the home page. */
     brand: ReactNode;
@@ -24,7 +34,10 @@ export type SiteHeaderProps = {
     items: readonly SiteHeaderItem[];
     /** The bar's end from `lg`, such as a language switch, Sign in and a ButtonLink. */
     actions?: ReactNode;
-    /** Beside the menu button below `lg`, such as the language switch. */
+    /**
+     * Beside the menu button below `lg`, such as the language switch. They
+     * step aside while the menu is open, which holds its own `menuActions`.
+     */
     compactActions?: ReactNode;
     /** In the open menu under its links, such as full-width ButtonLinks. */
     menuActions?: ReactNode;
@@ -35,4 +48,6 @@ export type SiteHeaderProps = {
     closeIcon: ReactNode;
     /** Whether the bar sticks to the window's top as the page scrolls (default `true`). */
     sticky?: boolean;
+    /** A "skip to content" link before everything else in the header. */
+    skipLink?: SiteHeaderSkipLink;
 };

package/dist/components/site-header/validate.d.ts

@@ -1,7 +1,8 @@
 import { type SiteHeaderProps } from './types.js';
 /**
  * Fails closed on the header's words and destinations: no items, blank or
- * repeated ids, blank labels or hrefs, and a blank navigation name or menu
- * button name.
+ * repeated ids, blank labels or hrefs, a blank navigation name or menu
+ * button name, and a skip link with blank words or an address that is not
+ * a fragment on the page.
  */
-export declare function assertSiteHeaderProps({ items, labels, navLabel, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel'>): void;
+export declare function assertSiteHeaderProps({ items, labels, navLabel, skipLink, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel' | 'skipLink'>): void;

package/dist/components/site-header/validate.js

@@ -1,10 +1,11 @@
 import { assertNavItems } from '../nav-items.js';
 /**
  * Fails closed on the header's words and destinations: no items, blank or
- * repeated ids, blank labels or hrefs, and a blank navigation name or menu
- * button name.
+ * repeated ids, blank labels or hrefs, a blank navigation name or menu
+ * button name, and a skip link with blank words or an address that is not
+ * a fragment on the page.
  */
-export function assertSiteHeaderProps({ items, labels, navLabel, }) {
+export function assertSiteHeaderProps({ items, labels, navLabel, skipLink, }) {
     if (items.length === 0)
         throw new RangeError('SiteHeader needs at least one item');
     assertNavItems('SiteHeader', items);
@@ -14,4 +15,12 @@ export function assertSiteHeaderProps({ items, labels, navLabel, }) {
         throw new RangeError('SiteHeader needs a nonempty navLabel');
     if (!labels.openMenu.trim() || !labels.closeMenu.trim())
         throw new RangeError('SiteHeader labels need nonempty openMenu and closeMenu');
+    if (skipLink)
+        assertSkipLink(skipLink);
+}
+function assertSkipLink({ href, label }) {
+    if (!label.trim())
+        throw new RangeError('SiteHeader skipLink needs a nonempty label');
+    if (!/^#\S+$/.test(href))
+        throw new RangeError('SiteHeader skipLink href must be a fragment such as #main');
 }

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

@@ -0,0 +1,26 @@
+export type TableSelectCellProps = {
+    /**
+     * The checkbox's name, not drawn: "Select Mallard" in a row, "Select
+     * all" in the header. Name the row by the words the row shows.
+     */
+    label: string;
+    checked: boolean;
+    /** The mixed state, for a header's "Select all" while some rows are chosen. */
+    indeterminate?: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /**
+     * `th` in a `TableHeader` row (the column's header cell, `scope="col"`),
+     * `td` (the default) in a body row. A fixed table sizes its columns from
+     * the header row, so put one in the header too.
+     */
+    as?: 'td' | 'th';
+};
+/**
+ * A table's select column: a cell holding one `Checkbox` whose label is
+ * visually hidden. The column is as narrow as the box, which is its own
+ * target, at least 44 × 44 px on a coarse pointer. Pair a chosen row with
+ * `TableRow selected`; a press on the box is left alone by a
+ * `TableRow pressable`.
+ */
+export declare const TableSelectCell: import("react").ForwardRefExoticComponent<TableSelectCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/TableSelectCell.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tableSelectCellClass } from '../../css/css-table-select.js';
+import { Checkbox } from '../Checkbox.js';
+/**
+ * A table's select column: a cell holding one `Checkbox` whose label is
+ * visually hidden. The column is as narrow as the box, which is its own
+ * target, at least 44 × 44 px on a coarse pointer. Pair a chosen row with
+ * `TableRow selected`; a press on the box is left alone by a
+ * `TableRow pressable`.
+ */
+export const TableSelectCell = forwardRef(function TableSelectCell({ as = 'td', checked, disabled = false, indeterminate = false, label, onCheckedChange, }, ref) {
+    if (typeof label !== 'string' || !label.trim())
+        throw new RangeError('TableSelectCell label must not be empty');
+    if (as !== 'td' && as !== 'th')
+        throw new RangeError(`Unknown TableSelectCell as: ${String(as)}`);
+    const Component = as;
+    return (_jsx(Component, { ref: ref, className: tableSelectCellClass, scope: as === 'th' ? 'col' : undefined, children: _jsx(Checkbox, { checked: checked, disabled: disabled, indeterminate: indeterminate, label: label, labelVisuallyHidden: true, onCheckedChange: onCheckedChange }) }));
+});

package/dist/css/css-checkbox.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn } from './chevron.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssCheckboxClasses() {
@@ -68,6 +69,38 @@ export function cssCheckboxClasses() {
 
 .sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
 
+/* The mixed state: the accent fill with a dash in place of the check. */
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark::after {
+  border-right: 0;
+  display: block;
+  height: 0;
+  inset-block-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - var(--sw-space-3) / 2);
+  transform: none;
+  width: var(--sw-space-3);
+}
+
+/* A visually hidden label: the box alone is the target, its own size on a
+   fine pointer (so a compact table row keeps its height), the 44 px touch
+   target both ways on a coarse one. */
+.sw-checkbox-label-hidden {
+  justify-content: center;
+  min-height: 0;
+  position: relative;
+}
+
+@media ${coarsePointerQuery} {
+  .sw-checkbox-label-hidden {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
 .sw-checkbox-input:focus-visible + .sw-checkbox-mark {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -104,13 +137,13 @@ export function cssCheckboxClasses() {
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: var(--sw-color-accent); }
 }
 
 @media (forced-colors: active) {
   .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark::after { border-color: HighlightText; }
   .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
 }`;
 }
@@ -118,6 +151,7 @@ export function checkboxClassCatalog() {
     return [
         'sw-checkbox',
         'sw-checkbox-label',
+        'sw-checkbox-label-hidden',
         'sw-checkbox-control',
         'sw-checkbox-input',
         'sw-checkbox-mark',

package/dist/css/css-components.js

@@ -35,6 +35,7 @@ import { cssDialogBandedClasses } from './css-dialog-banded.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
 import { cssDialogCanvasClasses } from './css-dialog-canvas.js';
 import { cssDialogGrabberClasses } from './css-dialog-grabber.js';
+import { cssDialogEndClasses } from './css-dialog-end.js';
 import { cssComboboxClasses } from './css-combobox.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssMultiSelectClasses } from './css-multi-select.js';
@@ -224,6 +225,8 @@ ${cssDialogCanvasClasses()}
 
 ${cssDialogGrabberClasses()}
 
+${cssDialogEndClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}

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

@@ -0,0 +1,13 @@
+import { type Breakpoint } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export declare const dialogPlacements: readonly ["center", "end"];
+export type DialogPlacement = (typeof dialogPlacements)[number];
+export declare const dialogEndClass = "sw-dialog-end";
+/** The side panel takes its place from this breakpoint up. */
+export declare const dialogEndFrom: Breakpoint;
+export declare function cssDialogEndClasses(): string;
+export declare function dialogEndClassCatalog(): string[];

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

@@ -0,0 +1,75 @@
+import { breakpointQuery } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export const dialogPlacements = ['center', 'end'];
+export const dialogEndClass = 'sw-dialog-end';
+/** The side panel takes its place from this breakpoint up. */
+export const dialogEndFrom = 'md';
+const end = `.${dialogEndClass}`;
+/*
+ * From md up, `placement="end"` is a side panel: the window's full height
+ * at the inline end, square corners, one hairline on its inline-start
+ * edge, the size's width (md 32rem, lg 56rem, xl 65rem) with a space-8
+ * strip of backdrop always in view. Its column grows to the full height so
+ * the pinned footer sits on the bottom edge even when the content is short;
+ * longer content scrolls inside the panel under the sticky footer, as in
+ * the centred dialog. It slides in from its edge unless reduced motion is
+ * asked for. Below md the class draws nothing: the dialog is centred, or a
+ * bottom sheet with `sheetBelow`. Emitted after the banded and grabber
+ * rules so its edges win at equal specificity.
+ */
+export function cssDialogEndClasses() {
+    return `@media ${breakpointQuery('from', dialogEndFrom)} {
+  ${end} {
+    border-color: var(--sw-color-border);
+    border-radius: 0;
+    border-width: 0;
+    border-inline-start-width: 1px;
+    height: 100%;
+    inset-block: 0;
+    margin: 0;
+    margin-inline-start: auto;
+    max-height: none;
+  }
+
+  ${end}[open] {
+    animation: sw-dialog-end-in var(--sw-motion-default) var(--sw-motion-easing);
+    display: flex;
+    flex-direction: column;
+  }
+
+  ${end}[open]:dir(rtl) {
+    animation-name: sw-dialog-end-in-rtl;
+  }
+
+  ${end} > .sw-stack {
+    flex: 1 0 auto;
+  }
+
+  ${end} .sw-dialog-footer {
+    margin-top: auto;
+  }
+}
+
+@keyframes sw-dialog-end-in {
+  from { translate: 100% 0; }
+}
+
+@keyframes sw-dialog-end-in-rtl {
+  from { translate: -100% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ${end}[open] { animation: none; }
+}
+
+@media (forced-colors: active) {
+  ${end} { border-inline-start-color: CanvasText; }
+}`;
+}
+export function dialogEndClassCatalog() {
+    return [dialogEndClass];
+}

package/dist/css/css-select.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssSelectClasses() {
@@ -186,6 +187,15 @@ export function cssSelectClasses() {
   border-top: 1px solid var(--sw-color-border);
   color: var(--sw-color-accent);
   margin-top: var(--sw-space-1);
+}
+
+/* The comfortable touch target on a coarse pointer, at every size: the
+   trigger and each option are at least 44 px high (the md control height),
+   as every Button is. Type and padding keep the size's; the rule follows
+   the size rules, which it outranks only by order. */
+@media ${coarsePointerQuery} {
+  .sw-select .sw-select-trigger,
+  .sw-select .sw-select-option { min-height: ${touchTarget}; }
 }`;
 }
 export function selectClassCatalog() {

package/dist/css/css-site-footer.js

@@ -21,7 +21,10 @@ function type(variant, weight = variant.fontWeight) {
  * win by coming after it (`cssSiteFooterClasses` follows `cssBandClasses`;
  * a test holds the order).
  * Below `md` the brand spans two columns of groups; from `md` the brand
- * and the groups share one wrapping row, spread apart.
+ * and the groups share one wrapping row, spread apart. On a coarse pointer
+ * the group links and a link that is all of a bottom-row slot (`legal` or
+ * `end`, such as a language switch) are the 44 px touch target; a link
+ * inside running legal words stays inline.
  */
 export function cssSiteFooterClasses() {
     return `.sw-site-footer-top {
@@ -120,6 +123,13 @@ export function cssSiteFooterClasses() {
     min-height: ${touchTarget};
   }
 
+  [data-theme] .sw-band-inverse :is(.sw-site-footer-legal, .sw-site-footer-end) > a:not(.sw-button) {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-height: ${touchTarget};
+  }
+
   .sw-site-footer-links {
     gap: 0;
   }

package/dist/css/css-site-header-anchors.d.ts

@@ -0,0 +1 @@
+export declare function cssSiteHeaderAnchorRules(): string;

package/dist/css/css-site-header-anchors.js

@@ -0,0 +1,22 @@
+import { siteHeaderCompactHeight, siteHeaderWideHeight, siteHeaderWideQuery, } from './site-header-geometry.js';
+/** The room an in-page jump leaves above its target: the bar, its hairline and a gap. */
+function scrollPadding(barHeight) {
+    return `calc(${barHeight} + 1px + var(--sw-space-3))`;
+}
+/*
+ * While a sticky SiteHeader is on the page, the document's scroll padding
+ * clears the bar (its height at each width, its hairline) and a small gap,
+ * so a #fragment link, :target and scrollIntoView land below the bar
+ * instead of under it. A header in the page flow changes nothing.
+ */
+export function cssSiteHeaderAnchorRules() {
+    return `html:has(.sw-site-header-sticky) {
+  scroll-padding-top: ${scrollPadding(siteHeaderCompactHeight)};
+}
+
+@media ${siteHeaderWideQuery} {
+  html:has(.sw-site-header-sticky) {
+    scroll-padding-top: ${scrollPadding(siteHeaderWideHeight)};
+  }
+}`;
+}

package/dist/css/css-site-header-skip-link.d.ts

@@ -0,0 +1 @@
+export declare function cssSiteHeaderSkipLinkRules(): string;

package/dist/css/css-site-header-skip-link.js

@@ -0,0 +1,49 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { visuallyHiddenDeclarations } from './css-utilities.js';
+import { siteHeaderContentStart, siteHeaderGutter, siteHeaderGutterQuery, } from './site-header-geometry.js';
+const label = typographyVariants.label;
+/*
+ * The header's skip link, its first focusable element: visually hidden
+ * until it has focus, then a pill on the surface in the text colour with
+ * the accent ring, laid over the bar's start (centred in its height and
+ * lined up with the brand), the control height tall only then. Positioned,
+ * it paints over the bar's content, which is not, so it needs no layer of
+ * its own.
+ */
+export function cssSiteHeaderSkipLinkRules() {
+    return `.sw-site-header-skip-link {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  inset-block-start: 50%;
+  inset-inline-start: ${siteHeaderContentStart(siteHeaderGutter.compact)};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  padding-inline: var(--sw-space-4);
+  position: absolute;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+[data-theme] .sw-site-header-skip-link {
+  color: var(--sw-color-text);
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-skip-link:focus {
+  min-height: var(--sw-control-md-min-height);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-skip-link:not(:focus) { ${visuallyHiddenDeclarations} }
+
+@media ${siteHeaderGutterQuery} {
+  .sw-site-header-skip-link { inset-inline-start: ${siteHeaderContentStart(siteHeaderGutter.wide)}; }
+}`;
+}

package/dist/css/css-site-header.js

@@ -1,19 +1,18 @@
 import { typographyVariants } from '@scalewing/tokens';
-import { breakpointQuery } from './breakpoints.js';
+import { cssSiteHeaderAnchorRules } from './css-site-header-anchors.js';
+import { cssSiteHeaderSkipLinkRules } from './css-site-header-skip-link.js';
 import { quietFill } from './quiet-fill.js';
+import { siteHeaderBarMaxWidth, siteHeaderCompactHeight as compactHeight, siteHeaderGutter, siteHeaderGutterQuery, siteHeaderWideHeight as wideHeight, siteHeaderWideQuery as wide, } from './site-header-geometry.js';
 import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
 const title = typographyVariants.title;
-/** The bar's height: 56 px on a phone, 72 px from `lg`. */
-const compactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
-const wideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
-const wide = breakpointQuery('from', 'lg');
 /*
  * The bar: the solid surface with a hairline under it, its content in the
  * page container with the page gutter. Below `lg` it holds the brand, the
  * compact actions and the menu button; from `lg` the brand, the
  * destinations (the current one at label weight over a bar in the words'
- * colour, as tall as the bar) and the actions, spread apart.
+ * colour, as tall as the bar) and the actions, spread apart. The compact
+ * actions' box adds no layout of its own (`display: contents`).
  */
 function barRules() {
     return `.sw-site-header {
@@ -38,9 +37,9 @@ function barRules() {
   gap: var(--sw-space-5);
   justify-content: space-between;
   margin-inline: auto;
-  max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5));
+  max-width: ${siteHeaderBarMaxWidth};
   min-height: var(--sw-site-header-height);
-  padding-inline: var(--sw-space-4);
+  padding-inline: ${siteHeaderGutter.compact};
 }
 
 .sw-site-header-brand {
@@ -60,6 +59,10 @@ function barRules() {
   gap: var(--sw-space-1);
 }
 
+.sw-site-header-compact-actions {
+  display: contents;
+}
+
 .sw-site-header-list {
   list-style: none;
   margin: 0;
@@ -101,8 +104,8 @@ function barRules() {
   gap: var(--sw-space-4);
 }
 
-@media ${breakpointQuery('from', 'md')} {
-  .sw-site-header-bar { padding-inline: var(--sw-space-5); }
+@media ${siteHeaderGutterQuery} {
+  .sw-site-header-bar { padding-inline: ${siteHeaderGutter.wide}; }
 }
 
 @media ${wide} {
@@ -118,13 +121,19 @@ function barRules() {
  * open, the other pair hidden so only one is read), and its panel lies
  * under the bar over the rest of the window, the destinations as large
  * rows with hairlines and the menu's actions at the panel's foot. It
- * scrolls on its own when the window is short.
+ * scrolls on its own when the window is short. While it is open the bar's
+ * compact actions step aside, since the menu holds its own actions, so the
+ * bar shows only the brand and the close button.
  */
 function menuRules() {
     return `.sw-site-header-menu > summary {
   list-style: none;
 }
 
+.sw-site-header-compact:has(> .sw-site-header-menu[open]) > .sw-site-header-compact-actions {
+  display: none;
+}
+
 .sw-site-header-menu > summary::-webkit-details-marker {
   display: none;
 }
@@ -214,6 +223,10 @@ export function cssSiteHeaderClasses() {
 
 ${menuRules()}
 
+${cssSiteHeaderSkipLinkRules()}
+
+${cssSiteHeaderAnchorRules()}
+
 /*
  * Forced colours drop box shadows, so the current destination's bar is a
  * thick underline there.
@@ -248,6 +261,8 @@ export function siteHeaderClassCatalog() {
         'sw-site-header-nav',
         'sw-site-header-actions',
         'sw-site-header-compact',
+        'sw-site-header-compact-actions',
+        'sw-site-header-skip-link',
         'sw-site-header-list',
         'sw-site-header-link',
         'sw-site-header-menu',

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

@@ -0,0 +1,3 @@
+export declare const tableSelectCellClass = "sw-table-select";
+export declare function cssTableSelectClasses(): string;
+export declare function tableSelectClassCatalog(): string[];