@scalewing/react 1.46.0 → 1.48.0

package/dist/components/NavCount.d.ts

@@ -1,5 +1,8 @@
-/** The pill's colours: `danger` for work waiting, `accent` for news. */
-export declare const navCountTones: readonly ["danger", "accent"];
+/**
+ * The pill's colours: `danger` for work waiting, `accent` for news,
+ * `warning` for work that needs the person but is not urgent.
+ */
+export declare const navCountTones: readonly ["danger", "accent", "warning"];
 export type NavCountTone = (typeof navCountTones)[number];
 export type NavCountProps = {
     /**
@@ -17,8 +20,11 @@ export type NavCountProps = {
     /**
      * The pill's colour. `danger` (the default) is work waiting there, such
      * as tasks to do; `accent` is news, such as what was added since the
-     * person last looked, where nothing is overdue. Give an accent count a
-     * `countLabel` ("3 new"), so its words, not its colour, say it is news.
+     * person last looked, where nothing is overdue; `warning` is amber, work
+     * that needs the person but is not urgent ("needs you"): the warning
+     * tint with the warning ink (4.5:1 in every palette) inside a warning
+     * edge. Give an accent or warning count a `countLabel` ("3 new", "2 to
+     * confirm"), so its words, not its colour, say what it is.
      * Place either tone on a neutral or ghost destination: a filled one of
      * the same colour would hide it.
      */
@@ -29,6 +35,7 @@ export type NavCountProps = {
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
  * accessible name, as there. `tone="accent"` draws it in the accent colour,
- * for news rather than work.
+ * for news rather than work; `tone="warning"` in amber, for work that needs
+ * the person but is not urgent.
  */
 export declare function NavCount({ count, countLabel, tone, }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
+import { countToneClass } from '../css/css-count-pill.js';
 import { isOneOf } from '../is-one-of.js';
-/** The pill's colours: `danger` for work waiting, `accent` for news. */
-export const navCountTones = ['danger', 'accent'];
+/**
+ * The pill's colours: `danger` for work waiting, `accent` for news,
+ * `warning` for work that needs the person but is not urgent.
+ */
+export const navCountTones = ['danger', 'accent', 'warning'];
 /**
  * Fails closed on a count that is not a whole number, an empty label or an
  * unknown tone.
@@ -21,7 +25,8 @@ function assertNavCount({ count, countLabel, tone }) {
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
  * accessible name, as there. `tone="accent"` draws it in the accent colour,
- * for news rather than work.
+ * for news rather than work; `tone="warning"` in amber, for work that needs
+ * the person but is not urgent.
  */
 export function NavCount({ count, countLabel, tone = 'danger', }) {
     assertNavCount({ count, countLabel, tone });
@@ -29,5 +34,5 @@ export function NavCount({ count, countLabel, tone = 'danger', }) {
         return null;
     // The space is its own text node, so every browser and the name's
     // computation keep it between the words and the count.
-    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-nav-count', tone === 'accent' && 'sw-nav-count-accent'), children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-nav-count', tone !== 'danger' && countToneClass('sw-nav-count', tone)), children: count })] }));
 }

package/dist/components/SectionNav.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { type AccessibleName } from '../accessible-name.js';
 import { type Breakpoint } from '../css/breakpoints.js';
 import { type SectionNavAppearance } from '../css/css-section-nav-filled.js';
+import { type NavItemCurrent } from './nav-items.js';
 export type { SectionNavAppearance };
 export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
 export type SectionNavItem = {
@@ -12,7 +13,7 @@ export type SectionNavItem = {
      * `page` when the item is this page, `location` (or `true`) when the page
      * is inside the item's section, such as a detail page under its list.
      */
-    current?: 'page' | 'location' | boolean;
+    current?: NavItemCurrent;
     /** A decorative glyph before the label. */
     icon?: ReactNode;
     /**

package/dist/components/SectionNav.js

@@ -5,24 +5,8 @@ import { sectionNavVerticalClass } from '../css/css-section-nav.js';
 import { assertSectionNavAppearance, } from '../css/css-section-nav-filled.js';
 import { tabStop } from '../tab-stop.js';
 import { plainPress } from './link-press.js';
+import { assertNavItems, navItemAriaCurrent, } from './nav-items.js';
 export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
-function ariaCurrent(current) {
-    if (current === true)
-        return 'true';
-    return current || undefined;
-}
-function assertItems(items) {
-    if (items.some((item) => !item.id.trim() || !item.label.trim()))
-        throw new RangeError('SectionNav items need nonempty ids and labels');
-    if (new Set(items.map((item) => item.id)).size !== items.length)
-        throw new RangeError('SectionNav items need unique ids');
-    if (items.some((item) => item.count !== undefined &&
-        (!Number.isInteger(item.count) || item.count < 0)))
-        throw new RangeError('SectionNav item counts are whole numbers from 0');
-    if (items.some((item) => item.countLabel !== undefined &&
-        (!item.countLabel.trim() || item.count === undefined)))
-        throw new RangeError('SectionNav item countLabel is nonempty and comes with a count');
-}
 function assertBreakpoint(verticalFrom) {
     if (verticalFrom !== undefined && !breakpoints.includes(verticalFrom))
         throw new RangeError(`SectionNav verticalFrom must be one of ${breakpoints.join(', ')}`);
@@ -34,10 +18,10 @@ function assertBreakpoint(verticalFrom) {
  * a side list. The current item carries `aria-current`.
  */
 export function SectionNav({ appearance = 'underline', items, onNavigate, verticalFrom, ...label }) {
-    assertItems(items);
+    assertNavItems('SectionNav', items);
     assertBreakpoint(verticalFrom);
     assertSectionNavAppearance(appearance);
-    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom), appearance === 'filled' && 'sw-section-nav-filled'), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": ariaCurrent(item.current), className: "sw-section-nav-link", href: item.href, tabIndex: tabStop, 
+    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom), appearance === 'filled' && 'sw-section-nav-filled'), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": navItemAriaCurrent(item.current), className: "sw-section-nav-link", href: item.href, tabIndex: tabStop, 
                     // Only a given onNavigate attaches a handler, so the links
                     // render from a server component without one.
                     onClick: onNavigate

package/dist/components/SiteFooter.d.ts

@@ -0,0 +1,12 @@
+import { type SiteFooterProps } from './site-footer/types.js';
+export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './site-footer/types.js';
+/**
+ * A public site's footer on the dark inverse band: the brand and a tagline,
+ * groups of links (each a `nav` named by its label, its label shown above
+ * its links), and a bottom row past a hairline with the legal line at its
+ * start and, say, a language switch at its end. Below `md` the brand takes
+ * the full width and the groups two columns; from `md` the brand and the
+ * groups share one row. A brand moves the band with a theme overlay of
+ * `inverse`. Invalid groups or links throw a `RangeError`.
+ */
+export declare function SiteFooter({ brand, end, groups, legal, tagline, }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/SiteFooter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Band } from './Band.js';
+import { assertSiteFooterGroups } from './site-footer/validate.js';
+import { tabStop } from '../tab-stop.js';
+/** Whether an optional slot draws anything: not left out, empty or `false`. */
+function shown(node) {
+    return node !== undefined && node !== null && node !== false && node !== '';
+}
+/**
+ * A public site's footer on the dark inverse band: the brand and a tagline,
+ * groups of links (each a `nav` named by its label, its label shown above
+ * its links), and a bottom row past a hairline with the legal line at its
+ * start and, say, a language switch at its end. Below `md` the brand takes
+ * the full width and the groups two columns; from `md` the brand and the
+ * groups share one row. A brand moves the band with a theme overlay of
+ * `inverse`. Invalid groups or links throw a `RangeError`.
+ */
+export function SiteFooter({ brand, end, groups, legal, tagline, }) {
+    assertSiteFooterGroups(groups);
+    const hasLegal = shown(legal);
+    const hasEnd = shown(end);
+    return (_jsxs(Band, { as: "footer", className: "sw-site-footer", paddingBottom: 6, tone: "inverse", children: [_jsxs("div", { className: "sw-site-footer-top", children: [_jsxs("div", { className: "sw-site-footer-brand", children: [brand, tagline ? _jsx("p", { className: "sw-site-footer-tagline", children: tagline }) : null] }), groups.map((group) => (_jsxs("nav", { "aria-label": group.label, className: "sw-site-footer-group", children: [_jsx("p", { "aria-hidden": "true", className: "sw-site-footer-label", children: group.label }), _jsx("ul", { className: "sw-site-footer-links", children: group.links.map((link) => (_jsx("li", { children: _jsx("a", { "aria-current": link.current ? 'page' : undefined, className: "sw-site-footer-link", href: link.href, hrefLang: link.hrefLang, lang: link.lang, tabIndex: tabStop, children: link.label }) }, link.id))) })] }, group.id)))] }), hasLegal || hasEnd ? (_jsxs("div", { className: "sw-site-footer-bottom", children: [hasLegal ? (_jsx("div", { className: "sw-site-footer-legal", children: legal })) : null, hasEnd ? _jsx("div", { className: "sw-site-footer-end", children: end }) : null] })) : null] }));
+}

package/dist/components/SiteHeader.d.ts

@@ -0,0 +1,14 @@
+import { type SiteHeaderProps } from './site-header/types.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } 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
+ * bar under it) and the bar's actions at the end; below `lg` the compact
+ * actions and a menu button that opens the destinations and the menu's
+ * actions over the page under the bar. 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; 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`.
+ */
+export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky, }: SiteHeaderProps): import("react").JSX.Element;

package/dist/components/SiteHeader.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cx } from '../class-names.js';
+import { SiteHeaderLinks } from './site-header/SiteHeaderLinks.js';
+import { useMenuDismiss } from './site-header/use-menu-dismiss.js';
+import { assertSiteHeaderProps } from './site-header/validate.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
+ * bar under it) and the bar's actions at the end; below `lg` the compact
+ * actions and a menu button that opens the destinations and the menu's
+ * actions over the page under the bar. 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; 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`.
+ */
+export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky = true, }) {
+    assertSiteHeaderProps({ items, labels, navLabel });
+    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] })] })] })] }) }));
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,22 @@
+import { skeletonVariants, type SkeletonVariant } from '../css/css-skeleton.js';
+export { skeletonVariants, type SkeletonVariant };
+export type SkeletonProps = {
+    /**
+     * What is loading, in the consumer's words ("Loading this week's
+     * games"): the status's words, read once politely; the bars are hidden.
+     */
+    label: string;
+    /** How many bars (`lines`) or rows (`rows`), 1 to 6; 3 by default. */
+    lines?: number;
+    /**
+     * `lines` (default) is bars of text in a column, the last one shorter;
+     * `rows` is list rows (a mark and a bar) with hairlines between them.
+     */
+    variant?: SkeletonVariant;
+};
+/**
+ * Grey placeholder bars where content is loading, in place of a spinner:
+ * a polite status named by `label`, the bars decorative. They pulse
+ * gently, and stay still when reduced motion is asked for.
+ */
+export declare function Skeleton({ label, lines, variant, }: SkeletonProps): import("react").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { skeletonLineRange, skeletonVariants, } from '../css/css-skeleton.js';
+import { isOneOf } from '../is-one-of.js';
+export { skeletonVariants };
+/** Fails closed on blank words, a count outside 1–6 or an unknown variant. */
+function assertSkeleton({ label, lines, variant }) {
+    if (typeof label !== 'string' || !label.trim())
+        throw new RangeError('Skeleton label must be nonempty');
+    if (!Number.isInteger(lines) ||
+        lines < skeletonLineRange.min ||
+        lines > skeletonLineRange.max)
+        throw new RangeError(`Skeleton lines must be a whole number from ${skeletonLineRange.min} to ${skeletonLineRange.max}: ${String(lines)}`);
+    if (!isOneOf(skeletonVariants, variant))
+        throw new RangeError(`Skeleton variant must be one of ${skeletonVariants.join(', ')}`);
+}
+/**
+ * Grey placeholder bars where content is loading, in place of a spinner:
+ * a polite status named by `label`, the bars decorative. They pulse
+ * gently, and stay still when reduced motion is asked for.
+ */
+export function Skeleton({ label, lines = 3, variant = 'lines', }) {
+    assertSkeleton({ label, lines, variant });
+    const labelId = useId();
+    // The bars and rows are divs and the words a span, so the generated
+    // :nth-of-type widths count bars only.
+    const places = Array.from({ length: lines }, (_, index) => index);
+    return (_jsxs("div", { "aria-labelledby": labelId, className: cx('sw-skeleton', `sw-skeleton-${variant}`), role: "status", children: [_jsx("span", { className: "sw-sr-only", id: labelId, children: label }), places.map((place) => variant === 'rows' ? (_jsxs("div", { "aria-hidden": "true", className: "sw-skeleton-row", children: [_jsx("div", { className: "sw-skeleton-mark" }), _jsx("div", { className: "sw-skeleton-bar" })] }, place)) : (_jsx("div", { "aria-hidden": "true", className: "sw-skeleton-bar" }, place)))] }));
+}

package/dist/components/app-shell/AppShellBar.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type Ref } from 'react';
+import { type AppShellProps } from './types.js';
+export type AppShellBarProps = Pick<AppShellProps, 'barEnd' | 'barTitle' | 'menuCount' | 'menuCountLabel' | 'menuCountTone'> & {
+    /** The bar itself, measured so a page bar can stick under it. */
+    barRef: Ref<HTMLElement>;
+    menuRef: Ref<HTMLButtonElement>;
+    menuIcon: ReactNode;
+    openMenuLabel: string;
+    menuOpen: boolean;
+    onOpenMenu: () => void;
+};
+/**
+ * The menu button's name: its label, then the count's words (or the bare
+ * number) after a comma while there is a count to read.
+ */
+export declare function menuButtonName(openMenu: string, menuCount: number | undefined, menuCountLabel: string | undefined): string;
+/**
+ * The compact top bar below `lg` (an AppHeader `bar`): the icon-only menu
+ * button, which may carry the shared count pill on its top end corner, the
+ * title and the end controls. The pill is hidden from assistive technology
+ * because the button's name already reads it.
+ */
+export declare function AppShellBar({ barEnd, barRef, barTitle, menuCount, menuCountLabel, menuCountTone, menuIcon, menuOpen, menuRef, onOpenMenu, openMenuLabel, }: AppShellBarProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellBar.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { countToneClass } from '../../css/css-count-pill.js';
+import { AppHeader } from '../AppHeader.js';
+import { Button } from '../Button.js';
+/**
+ * The menu button's name: its label, then the count's words (or the bare
+ * number) after a comma while there is a count to read.
+ */
+export function menuButtonName(openMenu, menuCount, menuCountLabel) {
+    if (!menuCount)
+        return openMenu;
+    return `${openMenu}, ${menuCountLabel ?? String(menuCount)}`;
+}
+/**
+ * The compact top bar below `lg` (an AppHeader `bar`): the icon-only menu
+ * button, which may carry the shared count pill on its top end corner, the
+ * title and the end controls. The pill is hidden from assistive technology
+ * because the button's name already reads it.
+ */
+export function AppShellBar({ barEnd, barRef, barTitle, menuCount, menuCountLabel, menuCountTone = 'danger', menuIcon, menuOpen, menuRef, onOpenMenu, openMenuLabel, }) {
+    return (_jsxs(AppHeader, { ref: barRef, appearance: "bar", className: "sw-app-shell-bar", padding: 2, children: [_jsxs(Button, { ref: menuRef, "aria-expanded": menuOpen, "aria-haspopup": "dialog", "aria-label": menuButtonName(openMenuLabel, menuCount, menuCountLabel), className: "sw-app-shell-menu", onPress: onOpenMenu, size: "sm", variant: "ghost", children: [_jsx("span", { "aria-hidden": "true", className: "sw-app-shell-icon", children: menuIcon }), menuCount ? (_jsx("span", { "aria-hidden": "true", className: cx('sw-app-shell-count', menuCountTone !== 'danger' &&
+                            countToneClass('sw-app-shell-count', menuCountTone)), children: menuCount })) : null] }), _jsx("div", { className: "sw-app-shell-bar-title", children: barTitle }), barEnd ? _jsx("div", { className: "sw-app-shell-bar-end", children: barEnd }) : null] }));
+}

package/dist/components/app-shell/AppShellDrawer.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type AppShellNavGroup, type AppShellNavItem } from './types.js';
+export type AppShellDrawerProps = {
+    open: boolean;
+    /** Asked on every close request: Escape, a press outside, the close button. */
+    onClose: () => void;
+    /** Asked after a plain press on a destination, which also closes it. */
+    onChoose: () => void;
+    closeLabel: string;
+    navLabel: string;
+    groups: readonly AppShellNavGroup[];
+    onNavigate?: (item: AppShellNavItem) => void;
+    header?: ReactNode;
+    footer?: ReactNode;
+};
+/**
+ * The menu below `lg`: a modal `dialog` on the top layer, full height at
+ * the inline start, named by the navigation's label. Dialog's close-request
+ * mechanics make Escape, a backdrop press and a platform close request one
+ * `onClose`, after which focus returns to the menu button. Its close button
+ * sits where the menu button was, so it is the first control. The content
+ * is drawn only while open, so the page holds one navigation at a time.
+ */
+export declare function AppShellDrawer({ closeLabel, footer, groups, header, navLabel, onChoose, onClose, onNavigate, open, }: AppShellDrawerProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellDrawer.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+import { useDialogCloseRequests } from '../dialog-close-requests.js';
+import { AppShellNav } from './AppShellNav.js';
+/**
+ * The menu below `lg`: a modal `dialog` on the top layer, full height at
+ * the inline start, named by the navigation's label. Dialog's close-request
+ * mechanics make Escape, a backdrop press and a platform close request one
+ * `onClose`, after which focus returns to the menu button. Its close button
+ * sits where the menu button was, so it is the first control. The content
+ * is drawn only while open, so the page holds one navigation at a time.
+ */
+export function AppShellDrawer({ closeLabel, footer, groups, header, navLabel, onChoose, onClose, onNavigate, open, }) {
+    const { nodeRef, handlers } = useDialogCloseRequests({ open, onClose });
+    return (_jsx("dialog", { ref: nodeRef, "aria-label": navLabel, className: "sw-app-shell-drawer", ...handlers, children: open ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sw-app-shell-drawer-top", children: [_jsxs(Button, { className: "sw-app-shell-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] }), header ? (_jsx("div", { className: "sw-app-shell-header", children: header })) : null] }), _jsx(AppShellNav, { groups: groups, navLabel: navLabel, onChoose: onChoose, onNavigate: onNavigate }), footer ? _jsx("div", { className: "sw-app-shell-footer", children: footer }) : null] })) : null }));
+}

package/dist/components/app-shell/AppShellLink.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent } from 'react';
+import { type AppShellNavItem } from './types.js';
+export type AppShellLinkProps = {
+    item: AppShellNavItem;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * The sidebar's links sit in a Tooltip with their label, shown only while
+     * `tooltip` is true (the rail, where the label is hidden). Left out (the
+     * drawer) there is no Tooltip at all.
+     */
+    tooltip?: boolean;
+};
+/** One destination in its list item: the glyph, the label and the count. */
+export declare function AppShellLink({ item, onClick, tooltip }: AppShellLinkProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellLink.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { countToneClass } from '../../css/css-count-pill.js';
+import { tabStop } from '../../tab-stop.js';
+import { navItemAriaCurrent } from '../nav-items.js';
+import { Tooltip } from '../Tooltip.js';
+/*
+ * The destination's link. A Tooltip around it passes its references in;
+ * only `aria-labelledby` is kept. Its `aria-describedby` is left out on
+ * purpose: the tooltip's words are the label the link is already named by,
+ * so they would be read twice.
+ */
+function AppShellAnchor({ 'aria-labelledby': labelledBy, children, item, onClick, }) {
+    return (_jsx("a", { "aria-current": navItemAriaCurrent(item.current), "aria-labelledby": labelledBy, className: "sw-app-shell-link", href: item.href, onClick: onClick, tabIndex: tabStop, children: children }));
+}
+/** The count after the label, read in the link's name as SectionNav's is. */
+function AppShellCount({ count, countLabel, countTone = 'danger', }) {
+    if (!count)
+        return null;
+    return (_jsxs(_Fragment, { children: [countLabel ? (_jsx("span", { className: "sw-sr-only", children: ` ${countLabel}` })) : (' '), _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-app-shell-count', countTone !== 'danger' &&
+                    countToneClass('sw-app-shell-count', countTone)), children: count })] }));
+}
+/** One destination in its list item: the glyph, the label and the count. */
+export function AppShellLink({ item, onClick, tooltip }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sw-app-shell-icon", children: item.icon }), _jsx("span", { className: "sw-app-shell-label", children: item.label }), _jsx(AppShellCount, { count: item.count, countLabel: item.countLabel, countTone: item.countTone })] }));
+    return (_jsx("li", { className: "sw-app-shell-item", children: tooltip === undefined ? (_jsx(AppShellAnchor, { item: item, onClick: onClick, children: content })) : (_jsx(Tooltip, { content: item.label, disabled: !tooltip, trigger: _jsx(AppShellAnchor, { item: item, onClick: onClick, children: content }) })) }));
+}

package/dist/components/app-shell/AppShellNav.d.ts

@@ -0,0 +1,15 @@
+import { type AppShellNavGroup, type AppShellNavItem } from './types.js';
+export type AppShellNavProps = {
+    navLabel: string;
+    groups: readonly AppShellNavGroup[];
+    onNavigate?: (item: AppShellNavItem) => void;
+    /** The drawer's: a plain press on a destination also closes it. */
+    onChoose?: () => void;
+    /** The sidebar's: whether the rail's tooltips show (see AppShellLink). */
+    tooltip?: boolean;
+};
+/**
+ * The shell's navigation landmark: each group a list named by its label,
+ * the same in the sidebar and the drawer.
+ */
+export declare function AppShellNav({ groups, navLabel, onChoose, onNavigate, tooltip, }: AppShellNavProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellNav.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { plainPress } from '../link-press.js';
+import { AppShellLink } from './AppShellLink.js';
+/**
+ * The shell's navigation landmark: each group a list named by its label,
+ * the same in the sidebar and the drawer.
+ */
+export function AppShellNav({ groups, navLabel, onChoose, onNavigate, tooltip, }) {
+    const idPrefix = useId();
+    // Only a given onNavigate or onChoose attaches a handler.
+    function pressHandler(item) {
+        if (!onNavigate && !onChoose)
+            return undefined;
+        return (event) => {
+            if (!plainPress(event))
+                return;
+            if (onNavigate) {
+                event.preventDefault();
+                onNavigate(item);
+            }
+            onChoose?.();
+        };
+    }
+    return (_jsx("nav", { "aria-label": navLabel, className: "sw-app-shell-nav", children: groups.map((group, index) => {
+            const labelId = `${idPrefix}-group-${index}`;
+            return (_jsxs("div", { className: "sw-app-shell-group", children: [group.label ? (_jsx("p", { className: "sw-app-shell-group-label", id: labelId, children: group.label })) : null, _jsx("ul", { "aria-labelledby": group.label ? labelId : undefined, className: "sw-app-shell-list", children: group.items.map((item) => (_jsx(AppShellLink, { item: item, onClick: pressHandler(item), tooltip: tooltip }, item.id))) })] }, group.id));
+        }) }));
+}

package/dist/components/app-shell/AppShellSidebar.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type AppShellNavGroup, type AppShellNavItem } from './types.js';
+export type AppShellSidebarProps = {
+    navLabel: string;
+    groups: readonly AppShellNavGroup[];
+    onNavigate?: (item: AppShellNavItem) => void;
+    header?: ReactNode;
+    footer?: ReactNode;
+    railHeader?: ReactNode;
+    railFooter?: ReactNode;
+    /** Whether the window is in the rail's range, where tooltips show. */
+    rail: boolean;
+};
+/**
+ * The pinned column from `lg` up: a rail to 75rem, the full sidebar from
+ * there. Hidden below `lg`, where the drawer holds the same parts.
+ */
+export declare function AppShellSidebar({ footer, groups, header, navLabel, onNavigate, rail, railFooter, railHeader, }: AppShellSidebarProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellSidebar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppShellNav } from './AppShellNav.js';
+/*
+ * A slot drawn in the full sidebar (`sw-app-shell-slot`) or only in the
+ * rail (`sw-app-shell-rail-slot`); the generated media queries pick one.
+ */
+function Slot({ children, part, rail, }) {
+    if (!children)
+        return null;
+    return (_jsx("div", { className: `sw-app-shell-${part} ${rail ? 'sw-app-shell-rail-slot' : 'sw-app-shell-slot'}`, children: children }));
+}
+/**
+ * The pinned column from `lg` up: a rail to 75rem, the full sidebar from
+ * there. Hidden below `lg`, where the drawer holds the same parts.
+ */
+export function AppShellSidebar({ footer, groups, header, navLabel, onNavigate, rail, railFooter, railHeader, }) {
+    return (_jsxs("div", { className: "sw-app-shell-sidebar", children: [_jsx(Slot, { part: "header", rail: false, children: header }), _jsx(Slot, { part: "header", rail: true, children: railHeader }), _jsx(AppShellNav, { groups: groups, navLabel: navLabel, onNavigate: onNavigate, tooltip: rail }), _jsx(Slot, { part: "footer", rail: false, children: footer }), _jsx(Slot, { part: "footer", rail: true, children: railFooter })] }));
+}

package/dist/components/app-shell/types.d.ts

@@ -0,0 +1,122 @@
+import { type ReactNode } from 'react';
+import { type NavCountTone } from '../NavCount.js';
+import { type NavItemCurrent } from '../nav-items.js';
+export type AppShellNavItem = {
+    id: string;
+    label: string;
+    href: string;
+    /**
+     * The destination's glyph (a consumer Lucide icon or mark), hidden from
+     * assistive technology. Required: in the rail it is all the item shows.
+     */
+    icon: ReactNode;
+    /**
+     * How many things wait there, such as work to do: the shared count pill
+     * (danger) after the label, or on the glyph in the rail, read in the
+     * link's name. A whole number; 0 (or none) shows no pill.
+     */
+    count?: number;
+    /**
+     * What the count means, in the consumer's words ("3 to confirm"): read in
+     * the name in place of the bare number, the pill then hidden from
+     * assistive technology. Needs `count`.
+     */
+    countLabel?: string;
+    /**
+     * The pill's colour, as NavCount's `tone`: `danger` (the default) for
+     * work waiting, `warning` (amber) for work that needs the person but is
+     * not urgent, `accent` for news. Needs `count`; say what it is in a
+     * `countLabel`, never by its colour alone.
+     */
+    countTone?: NavCountTone;
+    /**
+     * `page` when the item is this page, `location` (or `true`) when the page
+     * is inside the item's area, such as a detail page under its list.
+     */
+    current?: NavItemCurrent;
+};
+export type AppShellNavGroup = {
+    id: string;
+    /**
+     * A small muted caption over the group's destinations that names their
+     * list. In the rail it is hidden (still naming the list) and the group
+     * starts under a hairline.
+     */
+    label?: string;
+    items: readonly AppShellNavItem[];
+};
+/** The shell's own words: the menu button's name and the drawer's close. */
+export type AppShellLabels = {
+    openMenu: string;
+    closeMenu: string;
+};
+export type AppShellProps = {
+    /** The navigation landmark's name, also the drawer's. */
+    navLabel: string;
+    groups: readonly AppShellNavGroup[];
+    /**
+     * Called for a plain press on a destination (the main button, no
+     * modifier key), after the browser's own navigation is prevented, so a
+     * client router moves instead. A press with a modifier key, or a middle
+     * press, keeps the browser's behaviour. Without it the links navigate.
+     */
+    onNavigate?: (item: AppShellNavItem) => void;
+    /**
+     * The sidebar's top, such as a workspace switcher; also the drawer's.
+     * It may hold an interactive trigger (an `ActionMenu`, a `ContextSwitcher`):
+     * its popup opens on the top layer, so the sidebar and the drawer never
+     * clip it.
+     * While the drawer is open it is mounted twice (the sidebar's copy is
+     * hidden), so each copy keeps its own state: put no fixed DOM `id` in it
+     * (use `useId`), and keep state that must be shared in the consumer.
+     * The same holds for `footer`, `railHeader` and `railFooter`.
+     */
+    header?: ReactNode;
+    /** The sidebar's bottom, such as the account menu; also the drawer's (see `header`). */
+    footer?: ReactNode;
+    /**
+     * A compact `header` for the rail, such as a workspace switcher drawn as
+     * its glyph alone (an icon trigger named by its label). Left out, the
+     * rail shows none.
+     */
+    railHeader?: ReactNode;
+    /** A compact `footer` for the rail. Left out, the rail shows none. */
+    railFooter?: ReactNode;
+    /** The compact top bar's title, below `lg`. */
+    barTitle: ReactNode;
+    /** Controls at the top bar's end, below `lg`. */
+    barEnd?: ReactNode;
+    /** The consumer's glyph for the menu button (Scalewing has no icon catalog). */
+    menuIcon: ReactNode;
+    /**
+     * How many things wait behind the menu, such as an inbox: the shared
+     * count pill on the menu button's top end corner, below `lg`, read in
+     * its name after `labels.openMenu` and a comma ("Open menu, 6"). A whole
+     * number; 0 (or none) shows no pill.
+     */
+    menuCount?: number;
+    /**
+     * What the menu's count means, in the consumer's words ("6 need you"):
+     * read in the name in place of the bare number ("Open menu, 6 need you").
+     * Needs `menuCount`.
+     */
+    menuCountLabel?: string;
+    /**
+     * The menu pill's colour, NavCount's tones: `danger` (the default),
+     * `warning` (amber) for work that needs the person but is not urgent,
+     * `accent` for news. Needs `menuCount`.
+     */
+    menuCountTone?: NavCountTone;
+    /**
+     * A band at the top of `main` on every layout, such as the page's
+     * context pickers and search: the solid surface with a hairline under it
+     * and the page's inline padding (space-4 below `lg`, space-6 from it),
+     * its children laid out in a wrapping row with space between them. It is
+     * sticky: under the compact top bar below `lg`, at the window's top
+     * from `lg` up. It scrolls with nothing else; keep it to one row.
+     */
+    pageBar?: ReactNode;
+    labels: AppShellLabels;
+    /** The page, rendered in `main`. */
+    children: ReactNode;
+};

package/dist/components/app-shell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/app-shell/validate.d.ts

@@ -0,0 +1,7 @@
+import { type AppShellProps } from './types.js';
+/**
+ * Fails closed on the shell's words, the menu's count, its groups and
+ * their items (ids unique across every group, each with an icon, which is
+ * all the rail shows).
+ */
+export declare function assertAppShellProps({ groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, }: Pick<AppShellProps, 'groups' | 'labels' | 'menuCount' | 'menuCountLabel' | 'menuCountTone' | 'navLabel'>): void;