@scalewing/react 1.51.0 → 1.52.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.52.0
+
+### Minor Changes
+
+- 03f2e78: Site chrome follow-ups from Teisoro's marketing-site UX review. `SiteHeader` takes an optional `skipLink` (`{ label, href }`, exported as `SiteHeaderSkipLink`): a "skip to content" link that is the header's first focusable element, visually hidden until it has focus, then a pill on the surface with the accent ring laid over the bar's start (`sw-site-header-skip-link`); a blank label or an `href` that is not a `#fragment` throws a `RangeError`. While a sticky `SiteHeader` is on the page, the document's `scroll-padding-top` clears the bar (56 px, 72 px from `lg`), its hairline and a small gap, so `#fragment` links, `:target` and `scrollIntoView` land below the bar; a header with `sticky={false}` changes nothing. Below `lg`, the bar's `compactActions` (now in a `sw-site-header-compact-actions` box with `display: contents`) step aside while the menu is open, since the menu holds its own `menuActions`, leaving the brand and the close button. On a coarse pointer, a plain link that is all of a `SiteFooter` bottom-row slot (`legal` or `end`) gets the 44 px touch target, as the group links have. No new tokens or dependencies. Request: `docs/requests/teisoro-site-chrome-follow-ups.md`.
+
 ## 1.51.0
 
 ### Minor Changes

package/README.md

@@ -1079,10 +1079,11 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </Band>
 ```
 
-`SiteHeader` is a public site's header. Supply `brand` (such as a logo linked to the home page), `navLabel` and `items` (`{ id, label, href, current? }`, `current` as SectionNav's: `page`, `location` or `true` sets `aria-current`), `labels` (`openMenu`, `closeMenu`) and the decorative `menuIcon` and `closeIcon` glyphs. From `lg` the bar shows the brand, the destinations as a row of links (the current one at label weight over a bar in the words' colour, a thick underline in forced colours) and `actions` at its end, such as a language switch, Sign in (`Box as="a" link="quiet"`) and a `ButtonLink`. Below `lg` it shows the brand, `compactActions` and a menu button that opens, under the bar over the rest of the window, the destinations as large rows (the current one in the accent) and `menuActions` at the panel's foot, such as full-width `ButtonLink`s. The menu is a native `details`, so it opens and closes by touch, click and keyboard with no script, as a page rendered on the server needs; its `summary` is the button, named `openMenu` or `closeMenu` by its state. Script adds Escape (focus back on the button), and closes it when a link in it is chosen, focus leaves it, a press lands outside it, or the window widens to `lg`; nothing traps focus. A page rendered on the server has the no-script menu until it hydrates; a site that never hydrates keeps it, which still opens and closes. The bar is 56 px tall below `lg` and 72 px from it, on the solid surface with a hairline under it; `sticky` (default `true`) keeps it at the window's top. No items, blank or repeated ids, blank labels or hrefs, or a blank `navLabel` or menu label throw a `RangeError`.
+`SiteHeader` is a public site's header. Supply `brand` (such as a logo linked to the home page), `navLabel` and `items` (`{ id, label, href, current? }`, `current` as SectionNav's: `page`, `location` or `true` sets `aria-current`), `labels` (`openMenu`, `closeMenu`) and the decorative `menuIcon` and `closeIcon` glyphs. From `lg` the bar shows the brand, the destinations as a row of links (the current one at label weight over a bar in the words' colour, a thick underline in forced colours) and `actions` at its end, such as a language switch, Sign in (`Box as="a" link="quiet"`) and a `ButtonLink`. Below `lg` it shows the brand, `compactActions` and a menu button that opens, under the bar over the rest of the window, the destinations as large rows (the current one in the accent) and `menuActions` at the panel's foot, such as full-width `ButtonLink`s. The menu is a native `details`, so it opens and closes by touch, click and keyboard with no script, as a page rendered on the server needs; its `summary` is the button, named `openMenu` or `closeMenu` by its state. Script adds Escape (focus back on the button), and closes it when a link in it is chosen, focus leaves it, a press lands outside it, or the window widens to `lg`; nothing traps focus. A page rendered on the server has the no-script menu until it hydrates; a site that never hydrates keeps it, which still opens and closes. While the menu is open the bar's `compactActions` step aside (the menu holds its own `menuActions`), so the bar shows only the brand and the close button. The bar is 56 px tall below `lg` and 72 px from it, on the solid surface with a hairline under it; `sticky` (default `true`) keeps it at the window's top. While a sticky header is on the page the document's `scroll-padding-top` clears the bar, its hairline and a small gap, so a `#fragment` link, `:target` and `scrollIntoView` land below the bar instead of under it; a header with `sticky={false}` leaves the scroll padding alone. An optional `skipLink` (`{ label, href }`, such as `{ label: 'Skip to content', href: '#main' }`) is the header's first focusable element: visually hidden until it has focus, then a pill on the surface with the focus ring over the bar's start. Give the target (usually `main`) the matching `id`, and `tabIndex={-1}` so every browser moves focus there with the jump. No items, blank or repeated ids, blank labels or hrefs, a blank `navLabel` or menu label, or a skip link with a blank label or an `href` that is not a `#fragment` throw a `RangeError`.
 
 ```tsx
 <SiteHeader
+  skipLink={{ label: 'Skip to content', href: '#main' }}
   brand={<a href="/">Wetland Trust</a>}
   navLabel="Main"
   items={[{ id: 'marsh', label: 'Marsh', href: '/marsh', current: 'page' }]}
@@ -1132,7 +1133,7 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </ScreenPreview>
 ```
 
-`SiteFooter` is a public site's footer on the dark inverse band (`Band tone="inverse"`, so a brand moves it with a theme overlay of `inverse`). Supply `brand` (such as a logo for a dark background), an optional `tagline`, and `groups`: each `{ id, label, links }` is a `nav` named by its label, which shows above its links (hidden from assistive technology, since the `nav` already carries it). Each link is `{ id, label, href, current?, lang?, hrefLang? }`; `lang` and `hrefLang` pass through to the link unchecked; `current` sets `aria-current="page"` and draws it in the band's words at label weight, the others in its muted words, underlined on hover and focus. `legal` and `end` fill the bottom row past a hairline, such as the copyright and a language switch. Below `md` the brand takes the full width and the groups two columns; from `md` the brand and the groups share one spread row. Links get the 44 px target on a coarse pointer. Put it last in the page's `body` (outside a `section` or `article`) so it is the page's `contentinfo` landmark. No groups, a group with no links, blank or repeated ids, blank labels or a blank `href` throw a `RangeError`.
+`SiteFooter` is a public site's footer on the dark inverse band (`Band tone="inverse"`, so a brand moves it with a theme overlay of `inverse`). Supply `brand` (such as a logo for a dark background), an optional `tagline`, and `groups`: each `{ id, label, links }` is a `nav` named by its label, which shows above its links (hidden from assistive technology, since the `nav` already carries it). Each link is `{ id, label, href, current?, lang?, hrefLang? }`; `lang` and `hrefLang` pass through to the link unchecked; `current` sets `aria-current="page"` and draws it in the band's words at label weight, the others in its muted words, underlined on hover and focus. `legal` and `end` fill the bottom row past a hairline, such as the copyright and a language switch; a plain link that is all of `legal` or `end` gets the 44 px target on a coarse pointer too (a link inside running legal words stays inline). Below `md` the brand takes the full width and the groups two columns; from `md` the brand and the groups share one spread row. Links get the 44 px target on a coarse pointer. Put it last in the page's `body` (outside a `section` or `article`) so it is the page's `contentinfo` landmark. No groups, a group with no links, blank or repeated ids, blank labels or a blank `href` throw a `RangeError`.
 
 ```tsx
 <SiteFooter

package/dist/components/SiteHeader.d.ts

@@ -1,5 +1,5 @@
 import { type SiteHeaderProps } from './site-header/types.js';
-export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './site-header/types.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, SiteHeaderSkipLink, } from './site-header/types.js';
 /**
  * A public site's header: the brand at the start; from `lg` the main
  * destinations as a row of links (the current one marked by weight and a
@@ -9,6 +9,9 @@ export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './site-
  * it opens and closes by touch, click and keyboard with no script, as a
  * page rendered on the server needs; script adds Escape (focus back on the
  * button) and closes it when a link is chosen or focus leaves it. It traps
- * no focus. Invalid items or words throw a `RangeError`.
+ * no focus. While the menu is open the compact actions step aside, so the
+ * bar shows only the brand and the close button. An optional skip link
+ * comes first, hidden until it has focus. Invalid items or words throw a
+ * `RangeError`.
  */
-export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky, }: SiteHeaderProps): import("react").JSX.Element;
+export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, skipLink, sticky, }: SiteHeaderProps): import("react").JSX.Element;

package/dist/components/SiteHeader.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
 import { SiteHeaderLinks } from './site-header/SiteHeaderLinks.js';
 import { useMenuDismiss } from './site-header/use-menu-dismiss.js';
 import { assertSiteHeaderProps } from './site-header/validate.js';
@@ -14,11 +15,14 @@ import { assertSiteHeaderProps } from './site-header/validate.js';
  * it opens and closes by touch, click and keyboard with no script, as a
  * page rendered on the server needs; script adds Escape (focus back on the
  * button) and closes it when a link is chosen or focus leaves it. It traps
- * no focus. Invalid items or words throw a `RangeError`.
+ * no focus. While the menu is open the compact actions step aside, so the
+ * bar shows only the brand and the close button. An optional skip link
+ * comes first, hidden until it has focus. Invalid items or words throw a
+ * `RangeError`.
  */
-export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky = true, }) {
-    assertSiteHeaderProps({ items, labels, navLabel });
+export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, skipLink, sticky = true, }) {
+    assertSiteHeaderProps({ items, labels, navLabel, skipLink });
     const menuRef = useRef(null);
     useMenuDismiss(menuRef);
-    return (_jsx("header", { className: cx('sw-site-header', sticky && 'sw-site-header-sticky'), children: _jsxs("div", { className: "sw-site-header-bar", children: [_jsx("div", { className: "sw-site-header-brand", children: brand }), _jsx(SiteHeaderLinks, { className: "sw-site-header-nav", items: items, navLabel: navLabel }), actions ? (_jsx("div", { className: "sw-site-header-actions", children: actions })) : null, _jsxs("div", { className: "sw-site-header-compact", children: [compactActions, _jsxs("details", { className: "sw-site-header-menu", ref: menuRef, children: [_jsxs("summary", { className: "sw-site-header-menu-button", children: [_jsxs("span", { className: "sw-site-header-menu-open", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: menuIcon }), _jsx("span", { className: "sw-sr-only", children: labels.openMenu })] }), _jsxs("span", { className: "sw-site-header-menu-close", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: closeIcon }), _jsx("span", { className: "sw-sr-only", children: labels.closeMenu })] })] }), _jsxs("div", { className: "sw-site-header-panel", children: [_jsx(SiteHeaderLinks, { className: "sw-site-header-menu-nav", items: items, navLabel: navLabel }), menuActions ? (_jsx("div", { className: "sw-site-header-menu-actions", children: menuActions })) : null] })] })] })] }) }));
+    return (_jsxs("header", { className: cx('sw-site-header', sticky && 'sw-site-header-sticky'), children: [skipLink ? (_jsx("a", { className: "sw-site-header-skip-link", href: skipLink.href, tabIndex: tabStop, children: skipLink.label })) : null, _jsxs("div", { className: "sw-site-header-bar", children: [_jsx("div", { className: "sw-site-header-brand", children: brand }), _jsx(SiteHeaderLinks, { className: "sw-site-header-nav", items: items, navLabel: navLabel }), actions ? (_jsx("div", { className: "sw-site-header-actions", children: actions })) : null, _jsxs("div", { className: "sw-site-header-compact", children: [compactActions ? (_jsx("div", { className: "sw-site-header-compact-actions", children: compactActions })) : null, _jsxs("details", { className: "sw-site-header-menu", ref: menuRef, children: [_jsxs("summary", { className: "sw-site-header-menu-button", children: [_jsxs("span", { className: "sw-site-header-menu-open", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: menuIcon }), _jsx("span", { className: "sw-sr-only", children: labels.openMenu })] }), _jsxs("span", { className: "sw-site-header-menu-close", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: closeIcon }), _jsx("span", { className: "sw-sr-only", children: labels.closeMenu })] })] }), _jsxs("div", { className: "sw-site-header-panel", children: [_jsx(SiteHeaderLinks, { className: "sw-site-header-menu-nav", items: items, navLabel: navLabel }), menuActions ? (_jsx("div", { className: "sw-site-header-menu-actions", children: menuActions })) : null] })] })] })] })] }));
 }

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/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/site-header-geometry.d.ts

@@ -0,0 +1,21 @@
+/** The bar's height below `lg`: 56 px. */
+export declare const siteHeaderCompactHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-3))";
+/** The bar's height from `lg`: 72 px. */
+export declare const siteHeaderWideHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))";
+/** The bar's content: the page container plus the page gutter each side. */
+export declare const siteHeaderBarMaxWidth = "calc(var(--sw-container-max) + 2 * var(--sw-space-5))";
+/** From here the bar is the wide one with its row of destinations. */
+export declare const siteHeaderWideQuery: string;
+/** From here the bar's gutter is the wider one. */
+export declare const siteHeaderGutterQuery: string;
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export declare const siteHeaderGutter: {
+    readonly compact: "var(--sw-space-4)";
+    readonly wide: "var(--sw-space-5)";
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export declare function siteHeaderContentStart(gutter: string): string;

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

@@ -0,0 +1,28 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * The site header's measures, shared by the bar, its skip link and the
+ * document's scroll padding so all three agree on where the bar ends.
+ */
+/** The bar's height below `lg`: 56 px. */
+export const siteHeaderCompactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
+/** The bar's height from `lg`: 72 px. */
+export const siteHeaderWideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
+/** The bar's content: the page container plus the page gutter each side. */
+export const siteHeaderBarMaxWidth = 'calc(var(--sw-container-max) + 2 * var(--sw-space-5))';
+/** From here the bar is the wide one with its row of destinations. */
+export const siteHeaderWideQuery = breakpointQuery('from', 'lg');
+/** From here the bar's gutter is the wider one. */
+export const siteHeaderGutterQuery = breakpointQuery('from', 'md');
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export const siteHeaderGutter = {
+    compact: 'var(--sw-space-4)',
+    wide: 'var(--sw-space-5)',
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export function siteHeaderContentStart(gutter) {
+    return `calc(max(0px, (100% - ${siteHeaderBarMaxWidth}) / 2) + ${gutter})`;
+}

package/dist/index.d.ts

@@ -81,7 +81,7 @@ export { breakpointQuery } from './css/breakpoints.js';
 export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
 export type { BandElement, BandProps, BandTone, BandWidth, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
-export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './components/SiteHeader.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, SiteHeaderSkipLink, } from './components/SiteHeader.js';
 export { ScreenPreview, screenPreviewFrames, } from './components/ScreenPreview.js';
 export type { ScreenPreviewFrame, ScreenPreviewProps, } from './components/ScreenPreview.js';
 export { PreviewGroup } from './components/screen-preview/PreviewGroup.js';

package/dist/styles.css

@@ -4939,6 +4939,13 @@ body {
     min-height: var(--sw-control-md-min-height);
   }
 
+  [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: var(--sw-control-md-min-height);
+  }
+
   .sw-site-footer-links {
     gap: 0;
   }
@@ -4998,6 +5005,10 @@ body {
   gap: var(--sw-space-1);
 }
 
+.sw-site-header-compact-actions {
+  display: contents;
+}
+
 .sw-site-header-list {
   list-style: none;
   margin: 0;
@@ -5054,6 +5065,10 @@ body {
   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;
 }
@@ -5138,6 +5153,52 @@ body {
   padding-top: var(--sw-space-5);
 }
 
+.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: 15px;
+  font-weight: 600;
+  inset-block-start: 50%;
+  inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-4));
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  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) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (min-width: 48rem) {
+  .sw-site-header-skip-link { inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-5)); }
+}
+
+html:has(.sw-site-header-sticky) {
+  scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-3)) + 1px + var(--sw-space-3));
+}
+
+@media (min-width: 64rem) {
+  html:has(.sw-site-header-sticky) {
+    scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1)) + 1px + var(--sw-space-3));
+  }
+}
+
 /*
  * Forced colours drop box shadows, so the current destination's bar is a
  * thick underline there.

package/package.json

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