@scalewing/react 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalewing/react
 
+## 1.18.0
+
+### Minor Changes
+
+- ea2fdf0: `ActionBar` `status` takes a node (`docs/requests/fantasy-football-action-bar-status.md`, the fantasy-football companion's trade verdict): `status?: ReactNode`, widened from `string`, so a `Badge` and a short line can share the status. The status element is now a `div` (was a `p`) that keeps `className="sw-action-bar-status"` and `role="status"`, is still rendered while empty, and still takes no room when empty. It lays its children on one wrapping row a `space-2` gap apart (`space-1` between wrapped rows), so a line that does not fit beside its badge wraps under it at phone width. A string status renders as before; a phrase that mixes text and elements belongs in one `span`. Consumers whose tests looked for a `P` status element need to update that query. No new classes, tokens or dependencies.
+- d02521e: `Dialog` `sheetBelow` and `closeLabel` (`docs/requests/fantasy-football-dialog-sheet.md`, the fantasy-football companion's phone review dialogs). `sheetBelow?: Breakpoint` (`'md'`): below that breakpoint the dialog is a bottom sheet, docked to the bottom edge at the full viewport width, top corners at `--sw-radius-lg` and bottom corners square, a `space-8` strip of backdrop left above it (the same dvh-aware cap), and bottom padding that clears `env(safe-area-inset-bottom)`; it slides up on open with `--sw-motion-default`, not under `prefers-reduced-motion`, and draws no grabber. From the breakpoint up it is the centered dialog at its `size`. `closeLabel?: string`: an icon-only ghost close `Button` ends the title row, named by the label, and calls `onClose`; the title still names the dialog and `titleLevel` still applies. The button is the first control, so it takes the focus on open unless content has `autoFocus`. Its X is private control chrome drawn in CSS (no icon dependency). Without `closeLabel` the markup is unchanged. New generated classes `sw-dialog-sheet-below-md`, `sw-dialog-header`, `sw-dialog-close`, `sw-dialog-close-glyph`. No new tokens and no new dependencies.
+- c5fd0a9: `Tabs` `sticky` (`docs/requests/fantasy-football-tabs-sticky.md`, the fantasy-football companion's section tabs): `sticky?: boolean`, default `false`, keeps the strip at the top of the viewport (`top: env(safe-area-inset-top, 0px)`) while a long panel scrolls under it, on the sticky `AppHeader`'s `topChrome` layer. The stuck strip is a full-bleed band of the page canvas, not a glass card: `--sw-color-background` at 90 % over the glass blur and saturate tokens, with the strip's existing hairline, solid canvas under `prefers-reduced-transparency` and `Canvas` in forced colors. A sticky element only sticks within its parent, so make the strip a direct child of the page container that holds the panels; each tab's md inline padding (16 px, spacing step 4) lines the first label up with a `space-4` page gutter. New generated class `sw-tabs-sticky`. No new tokens and no new dependencies.
+
 ## 1.17.0
 
 ### Minor Changes

package/README.md

@@ -126,7 +126,7 @@ A disabled native text control (`<input>`, `<select>` or `<textarea>` on the can
 </Accordion>
 ```
 
-`ActionBar` keeps the actions of a long page on a glass bar stuck to the bottom of the viewport, with an optional one-line `status` (such as when the work was last saved). Put it last in the content it acts on: it stays stuck while that content scrolls by and then rests in its own place at the end. `stickyBelow="md"` sticks only on a phone and leaves the bar in page flow from `md` up. The bar clears `env(safe-area-inset-bottom)` (set `viewport-fit=cover` in the page's viewport meta for the inset to apply). Its children are the actions: on a phone they share one row under the status. The status is a polite live region (`role="status"`, kept in the page even while empty), so a new status such as "Draft saved at 5:00 PM" is announced; do not announce the same save a second time with your own notice. An open `Select`, `ActionMenu` or `Tooltip` paints over the bar, including inside a glass `Card` or `Accordion`.
+`ActionBar` keeps the actions of a long page on a glass bar stuck to the bottom of the viewport, with an optional short `status` (such as when the work was last saved): a string, or a node such as a `Badge` and then a short line. Put it last in the content it acts on: it stays stuck while that content scrolls by and then rests in its own place at the end. `stickyBelow="md"` sticks only on a phone and leaves the bar in page flow from `md` up. The bar clears `env(safe-area-inset-bottom)` (set `viewport-fit=cover` in the page's viewport meta for the inset to apply). Its children are the actions: on a phone they share one row under the status. The status is a polite live region (`role="status"`, kept in the page even while empty), so a new status such as "Draft saved at 5:00 PM" is announced; do not announce the same save a second time with your own notice. The status is a `div` whose children sit on one row a `space-2` gap apart and wrap under one another when the row is full, so a line that does not fit beside its badge drops under it on a phone; put a phrase that mixes text and elements in one `span` so it wraps as a sentence. `undefined`, `null` or `false` leaves the status empty. An open `Select`, `ActionMenu` or `Tooltip` paints over the bar, including inside a glass `Card` or `Accordion`.
 
 ```tsx
 <Stack gap={4}>
@@ -155,7 +155,7 @@ A `Button` that toggles something passes `aria-pressed`. The pressed button gets
 
 `ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu. The open menu sits on the popover layer a `space-1` gap below its trigger (above it when it only fits there), at least `space-2` from every viewport edge (a classic scrollbar is not part of the viewport), and aligned to the trigger's inline start (its right edge in right-to-left), or to its other edge when the trigger ends a row and the menu would not fit from its start. `align="end"` (default `"start"`) lines the menu up with the trigger's inline end even where the start would fit, for a trigger that ends a card or a list row, so the menu stays over that card instead of hanging past it; it takes the start when the end would leave the screen. The menu is as wide as its longest command up to the viewport less both insets, and a longer command wraps. The menu follows its trigger through scroll, window resize, and a change in the menu's or the trigger's size. The menu is in the DOM only while it is open. The trigger and its commands use the compact xs control height for a fine pointer; on a coarse pointer the trigger is at least 44 × 44 px (the md control height, as on `CalendarButton`) and every command is at least 44 px tall.
 
-`Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true. The `title` is an `h3` in the title style by default; `titleLevel={2}` renders it as an `h2` in the same style, for a dialog whose own section labels are `h3` headings, so they read as parts of the dialog and not as its peers. The default stays `3` so existing dialogs keep their outline; any value other than `2` renders an `h3`.
+`Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true. The `title` is an `h3` in the title style by default; `titleLevel={2}` renders it as an `h2` in the same style, for a dialog whose own section labels are `h3` headings, so they read as parts of the dialog and not as its peers. The default stays `3` so existing dialogs keep their outline; any value other than `2` renders an `h3`. `sheetBelow="md"` makes the dialog a bottom sheet below `md`: docked to the bottom edge at the full viewport width, top corners rounded and bottom corners square, a `space-8` strip of backdrop above it, and bottom padding that clears `env(safe-area-inset-bottom)` (with `viewport-fit=cover`); it slides up on open unless reduced motion is asked for, and has no grabber, since there is no drag. From `md` up it is the centered dialog at its `size`. `closeLabel` (such as "Close") adds an icon-only ghost close button at the end of the title row, named by the label, which calls `onClose` like Escape; the title still names the dialog. The button is the dialog's first control, so the browser focuses it on open; give a field `autoFocus` to start there instead. Without `closeLabel` the dialog has no close button and its markup is unchanged.
 
 `Toast` is an auto-dismiss confirmation on the popover layer, controlled by `open` and `onOpenChange`; it does not trap focus and closes after `timeoutMs` (default 800, or 6000 for a `warning` or `danger` toast, which must be read). `anchor` and `target` send it from a press to a destination. `tone` (`neutral` by default, `success`, `warning`, `danger`) tints its border and an optional consumer `icon` (a Lucide glyph, hidden from assistive technology); the message keeps the text color, so its words carry the meaning. A `danger` toast is announced as `role="alert"`, the others as `role="status"`, so do not wrap the message in another live region. A toast still dismisses itself: an error the person must act on belongs in the page. A toast is as wide as its message, up to the page's gutter (spacing step 4) on each side, so on a phone a long message wraps inside the gutter instead of running to the screen's edges.
 
@@ -218,6 +218,29 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 />
 ```
 
+`Tabs` is the strip for the sections of one page (`role="tablist"`, one `role="tab"` button per item; arrow keys, Home and End move and select), and `TabPanel` is each section's content, hidden while another tab is current. `sticky` (default `false`) keeps the strip at the top of the viewport, under `env(safe-area-inset-top)`, while a long panel scrolls under it, on the same layer as a sticky `AppHeader` (so a page uses one or the other at the top edge). The stuck strip is a full-bleed band of the page canvas, not a glass card: the canvas color at nine parts in ten over the glass blur, with the strip's hairline under it, solid canvas under Reduce Transparency and in forced colors. A sticky element only sticks within its parent: make the strip a direct child of the long page container that also holds the panels, not of a padded `Box` round the strip alone, and keep `overflow` visible on its ancestors. Put the page's side gutter on the title and the panels instead: each tab's inline padding is the md control's 16 px (spacing step 4), so the first label lines up with a `space-4` gutter when the strip runs edge to edge.
+
+```tsx
+<Stack gap={3}>
+  <Box paddingX={4}>
+    <Text variant="title">Wetland reserve</Text>
+  </Box>
+  <Tabs
+    aria-label="Reserve log"
+    id="reserve"
+    items={groups}
+    onChange={setGroup}
+    sticky
+    value={group}
+  />
+  <Box paddingX={4}>
+    <TabPanel id="birds" tabsId="reserve" value={group}>
+      {birdLog}
+    </TabPanel>
+  </Box>
+</Stack>
+```
+
 `Table` aligns data in rows inside its own keyboard-reachable scroll region, named after the table. While the table is wider than the region, each inline edge with columns scrolled out past it draws a soft inset shade (`sw-scroll-more-start`, `sw-scroll-more-end`, mirrored right to left), so a phone, whose scrollbars stay hidden, still shows that the table goes on; a table that fits draws none, and in forced colors the system scrollbar is the cue. `TableCell` takes `numeric` (tabular numerals, end aligned), `align` and `truncate`; `density="compact"` densifies cells. `TableRow selected` sets `aria-selected` and marks the row with a 4 px accent bar at its inline start (3:1 or more against the surface and the page), the right edge in a right-to-left table. The bar is drawn inside the first cell's padding and takes no layout space, so no column moves when a row is picked, and the row takes no fill, so text, muted and accent text keep their contrast; forced colors keep the bar in the system highlight.
 
 `Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.

package/dist/components/ActionBar.d.ts

@@ -4,10 +4,15 @@ export type ActionBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
     /** The actions, usually two or three `Button`s. */
     children: ReactNode;
     /**
-     * One short line about the work, such as when it was last saved. It is a
-     * polite live region, so a new status is announced without moving focus.
+     * One short line about the work, such as when it was last saved, or a
+     * `Badge` and then a short line ("Ready" and what is ready). It is a
+     * polite live region, so a new status is announced without moving focus;
+     * nothing (`undefined`, `null`, `false`) leaves it empty and taking no
+     * room. Its direct children sit on one row a small gap apart and wrap
+     * under one another when the row is full, so put a phrase that mixes text
+     * and elements in one `span` to keep it wrapping as a sentence.
      */
-    status?: string;
+    status?: ReactNode;
     /** Sticky only below this breakpoint; from it up the bar sits in page flow. */
     stickyBelow?: Breakpoint;
 };
@@ -21,10 +26,15 @@ export declare const ActionBar: import("react").ForwardRefExoticComponent<Omit<H
     /** The actions, usually two or three `Button`s. */
     children: ReactNode;
     /**
-     * One short line about the work, such as when it was last saved. It is a
-     * polite live region, so a new status is announced without moving focus.
+     * One short line about the work, such as when it was last saved, or a
+     * `Badge` and then a short line ("Ready" and what is ready). It is a
+     * polite live region, so a new status is announced without moving focus;
+     * nothing (`undefined`, `null`, `false`) leaves it empty and taking no
+     * room. Its direct children sit on one row a small gap apart and wrap
+     * under one another when the row is full, so put a phrase that mixes text
+     * and elements in one `span` to keep it wrapping as a sentence.
      */
-    status?: string;
+    status?: ReactNode;
     /** Sticky only below this breakpoint; from it up the bar sits in page flow. */
     stickyBelow?: Breakpoint;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ActionBar.js

@@ -9,5 +9,5 @@ import { actionBarStickyClass } from '../css/css-action-bar.js';
  * in its own place at the end.
  */
 export const ActionBar = forwardRef(function ActionBar({ children, className, status, stickyBelow, ...rest }, ref) {
-    return (_jsxs("div", { ref: ref, className: cx('sw-action-bar', actionBarStickyClass(stickyBelow), className), ...rest, children: [_jsx("p", { className: "sw-action-bar-status", role: "status", children: status }), _jsx("div", { className: "sw-action-bar-actions", children: children })] }));
+    return (_jsxs("div", { ref: ref, className: cx('sw-action-bar', actionBarStickyClass(stickyBelow), className), ...rest, children: [_jsx("div", { className: "sw-action-bar-status", role: "status", children: status }), _jsx("div", { className: "sw-action-bar-actions", children: children })] }));
 });

package/dist/components/Dialog.d.ts

@@ -1,4 +1,5 @@
 import { type DialogHTMLAttributes, type ReactNode } from 'react';
+import { type Breakpoint } from '../css/breakpoints.js';
 /**
  * `md` is the reading width (32rem) for a message or a short form; `lg`
  * (56rem) holds a row of six fields or a data grid without folding it.
@@ -31,6 +32,24 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
      * Any value other than 2 (from an untyped caller) renders an `h3`.
      */
     titleLevel?: DialogTitleLevel;
+    /**
+     * Below this breakpoint the dialog is a bottom sheet: docked to the
+     * bottom edge at the full viewport width, its top corners rounded and its
+     * bottom corners square, a strip of backdrop left in view above it, and
+     * its bottom padding clearing `env(safe-area-inset-bottom)`. It slides up
+     * on open unless reduced motion is asked for. There is no drag grabber
+     * (and no drag): it closes as any dialog does. From the breakpoint up it
+     * is the centered dialog, at its `size`.
+     */
+    sheetBelow?: Breakpoint;
+    /**
+     * The accessible name of a close button, such as "Close". When given, an
+     * icon-only ghost button ends the title row and asks `onClose`, like
+     * Escape. It is the first control in the dialog, so it takes the focus on
+     * open unless a control in the content has `autoFocus`. Left out, the
+     * dialog has no close button and its markup is unchanged.
+     */
+    closeLabel?: string;
     children: ReactNode;
 };
-export declare function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ children, className, closeLabel, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, size, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import { cx } from '../class-names.js';
+import { dialogSheetClass } from '../css/css-dialog.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { useDialogCloseRequests } from './dialog-close-requests.js';
+import { DialogTitle } from './dialog/DialogTitle.js';
 import { Stack } from './Stack.js';
-import { Text } from './Text.js';
-export function Dialog({ children, className, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, size = 'md', title, titleLevel = 3, ...rest }) {
+export function Dialog({ children, className, closeLabel, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, size = 'md', title, titleLevel = 3, ...rest }) {
     const titleId = useId();
     const { nodeRef, handlers } = useDialogCloseRequests({
         open,
@@ -16,5 +17,5 @@ export function Dialog({ children, className, onCancel, onClose, onKeyDown, onPo
         onPointerDown,
         onSubmit,
     });
-    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', size === 'lg' && 'sw-dialog-lg', ...spacingClassNames({ padding: 5 }), className), ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { as: titleLevel === 2 ? 'h2' : 'h3', id: titleId, variant: "title", children: title }), children] }) }));
+    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', size === 'lg' && 'sw-dialog-lg', sheetBelow && dialogSheetClass(sheetBelow), ...spacingClassNames({ padding: 5 }), className), ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { closeLabel: closeLabel, id: titleId, level: titleLevel === 2 ? 2 : 3, onClose: onClose, title: title }), children] }) }));
 }

package/dist/components/Tabs.d.ts

@@ -16,15 +16,35 @@ export type TabsProps = TabsLabel & {
     items: readonly TabItem[];
     value: string;
     onChange: (id: string) => void;
+    /**
+     * Keep the strip at the top of the viewport, under the top safe area,
+     * while a long panel scrolls under it. Off by default. The stuck strip is
+     * a full-bleed band of the page canvas, not a glass card: the canvas
+     * color, a little see-through over the glass blur, with its hairline
+     * underneath; solid under Reduce Transparency and in forced colors. It
+     * shares the sticky `AppHeader`'s layer, so a page uses one or the other
+     * at the top edge.
+     *
+     * A sticky element only sticks within its parent. Make the strip a direct
+     * child of the long page container that also holds the panels, not of a
+     * padded `Box` round the strip alone; an ancestor whose `overflow` is not
+     * `visible` becomes the box it sticks to. Put the page's side gutter on
+     * the title and the panels rather than on that container: each tab
+     * already has the md control's inline padding (16 px, spacing step 4), so
+     * the first label lines up with a `space-4` page gutter when the strip
+     * runs edge to edge.
+     */
+    sticky?: boolean;
 };
 export declare function tabId(tabsId: string, id: string): string;
 export declare function tabPanelId(tabsId: string, id: string): string;
 /**
  * A tab strip with `tablist` semantics for the sections of one page. Arrow
  * keys, Home and End move the focus and select at once; the strip scrolls
- * sideways when it overflows. Pair each item with a `TabPanel`.
+ * sideways when it overflows. Pair each item with a `TabPanel`. `sticky`
+ * keeps it at the top of the viewport over a long panel.
  */
-export declare function Tabs({ id, items, onChange, value, ...labelProps }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ id, items, onChange, sticky, value, ...labelProps }: TabsProps): import("react").JSX.Element;
 export type TabPanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
     /** The `id` of the `Tabs` this panel belongs to. */
     tabsId: string;

package/dist/components/Tabs.js

@@ -10,9 +10,10 @@ export function tabPanelId(tabsId, id) {
 /**
  * A tab strip with `tablist` semantics for the sections of one page. Arrow
  * keys, Home and End move the focus and select at once; the strip scrolls
- * sideways when it overflows. Pair each item with a `TabPanel`.
+ * sideways when it overflows. Pair each item with a `TabPanel`. `sticky`
+ * keeps it at the top of the viewport over a long panel.
  */
-export function Tabs({ id, items, onChange, value, ...labelProps }) {
+export function Tabs({ id, items, onChange, sticky = false, value, ...labelProps }) {
     const tabs = useRef(new Map());
     function select(next) {
         if (!next || next.id === value) {
@@ -42,7 +43,7 @@ export function Tabs({ id, items, onChange, value, ...labelProps }) {
         event.preventDefault();
         select(target);
     }
-    return (_jsx("div", { className: "sw-tabs", onKeyDown: onKeyDown, role: "tablist", ...labelProps, children: items.map((item) => {
+    return (_jsx("div", { className: cx('sw-tabs', sticky && 'sw-tabs-sticky'), onKeyDown: onKeyDown, role: "tablist", ...labelProps, children: items.map((item) => {
             const selected = item.id === value;
             return (_jsx("button", { "aria-controls": tabPanelId(id, item.id), "aria-selected": selected, className: cx('sw-tab', selected && 'sw-tab-selected'), id: tabId(id, item.id), onClick: () => select(item), ref: (node) => {
                     if (node) {

package/dist/components/dialog/DialogTitle.d.ts

@@ -0,0 +1,15 @@
+type DialogTitleProps = {
+    id: string;
+    level: 2 | 3;
+    title: string;
+    /** The close button's accessible name; without it there is no button. */
+    closeLabel?: string;
+    onClose: () => void;
+};
+/**
+ * The dialog's title, which names it through `aria-labelledby`. With a
+ * `closeLabel` it shares a row with an icon-only ghost close button at its
+ * end; without one it is the title alone, as it always was.
+ */
+export declare function DialogTitle({ closeLabel, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export {};

package/dist/components/dialog/DialogTitle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+import { Text } from '../Text.js';
+/**
+ * The dialog's title, which names it through `aria-labelledby`. With a
+ * `closeLabel` it shares a row with an icon-only ghost close button at its
+ * end; without one it is the title alone, as it always was.
+ */
+export function DialogTitle({ closeLabel, id, level, onClose, title, }) {
+    const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
+    if (!closeLabel)
+        return heading;
+    return (_jsxs("div", { className: "sw-dialog-header", children: [heading, _jsxs(Button, { className: "sw-dialog-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" })] })] }));
+}

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

@@ -50,14 +50,21 @@ export function cssActionBarClasses() {
   padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
 }
 
+/* A Badge and a short line sit on one row a small gap apart; a line that
+   does not fit beside the badge wraps under it. */
 .sw-action-bar-status {
+  align-items: center;
   color: var(--sw-color-muted);
+  column-gap: var(--sw-space-2);
+  display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
   font-family: var(--sw-font-sans);
   font-size: ${caption.fontSize}px;
   line-height: ${caption.lineHeight}px;
   margin: 0;
   min-width: 0;
+  row-gap: var(--sw-space-1);
 }
 
 /* With no status the live region stays in the page, so a first status is

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

@@ -1,2 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function dialogSheetClass(sheetBelow: Breakpoint): string;
 export declare function cssDialogClasses(): string;
 export declare function dialogClassCatalog(): string[];

package/dist/css/css-dialog.js

@@ -1,3 +1,112 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const title = typographyVariants.title;
+/* The modal's height cap: a space-8 strip of backdrop stays in view. */
+const maxHeight = 'min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8))';
+export function dialogSheetClass(sheetBelow) {
+    return `sw-dialog-sheet-below-${sheetBelow}`;
+}
+/*
+ * Below the breakpoint the dialog is a bottom sheet: docked to the bottom
+ * edge at the full viewport width, the top corners rounded and the bottom
+ * ones square, the same height cap (so the whole space-8 strip of backdrop
+ * shows above it), and padding that clears the safe areas. Emitted after
+ * `sw-dialog-lg` so it wins at equal specificity. No grabber: there is no
+ * drag gesture.
+ */
+function sheetRules() {
+    return breakpoints
+        .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+  .${dialogSheetClass(breakpoint)} {
+    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
+    border-width: 1px 0 0;
+    margin: auto 0 0;
+    max-height: ${maxHeight};
+    max-width: none;
+    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+    width: 100%;
+  }
+
+  .${dialogSheetClass(breakpoint)}[open] {
+    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
+  }
+}`)
+        .join('\n\n');
+}
+function sheetMotionRules() {
+    const still = breakpoints
+        .map((breakpoint) => `  .${dialogSheetClass(breakpoint)}[open] { animation: none; }`)
+        .join('\n');
+    return `@keyframes sw-dialog-sheet-in {
+  from { translate: 0 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+${still}
+}`;
+}
+/*
+ * The title row when the dialog has a close button: the title takes the
+ * row and the button ends it. The button's negative margins keep the row
+ * as tall as one title line and put the glyph's end on the padding edge,
+ * at the sm control size and at the 44 px touch target alike.
+ */
+function closeButtonRules() {
+    const square = (size) => `min-width: ${size};
+    margin-block: calc((${title.lineHeight}px - ${size}) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - ${size}) / 2);`;
+    return `.sw-dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-dialog-header > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-button.sw-dialog-close {
+  flex: none;
+  padding-inline: 0;
+  ${square('var(--sw-control-sm-min-height)')}
+}
+
+@media ${coarsePointerQuery} {
+  .sw-button.sw-dialog-close {
+    min-height: ${touchTarget};
+    ${square(touchTarget)}
+  }
+}
+
+/* Private control chrome: two strokes crossed in a space-4 square, in the
+   button's color; borders, so forced colors keep them. */
+.sw-dialog-close-glyph {
+  flex: none;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-dialog-close-glyph::before,
+.sw-dialog-close-glyph::after {
+  border-top: 2px solid currentColor;
+  border-radius: 1px;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
+.sw-dialog-close-glyph::before { transform: rotate(45deg); }
+.sw-dialog-close-glyph::after { transform: rotate(-45deg); }`;
+}
 export function cssDialogClasses() {
     return `.sw-dialog {
   background: var(--sw-glass-fill);
@@ -9,7 +118,7 @@ export function cssDialogClasses() {
   box-sizing: border-box;
   color: var(--sw-color-text);
   margin: auto;
-  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+  max-height: ${maxHeight};
   max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
   overflow: auto;
   width: calc(100% - var(--sw-space-8));
@@ -19,6 +128,10 @@ export function cssDialogClasses() {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+${sheetRules()}
+
+${sheetMotionRules()}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -26,8 +139,17 @@ export function cssDialogClasses() {
 .sw-dialog:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
-}`;
+}
+
+${closeButtonRules()}`;
 }
 export function dialogClassCatalog() {
-    return ['sw-dialog', 'sw-dialog-lg'];
+    return [
+        'sw-dialog',
+        'sw-dialog-lg',
+        ...breakpoints.map((breakpoint) => dialogSheetClass(breakpoint)),
+        'sw-dialog-header',
+        'sw-dialog-close',
+        'sw-dialog-close-glyph',
+    ];
 }

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

@@ -1,3 +1,4 @@
+export declare const stuckCanvasShare = 0.9;
 /** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
 export declare function cssTabsClasses(): string;
 export declare function tabsClassCatalog(): string[];

package/dist/css/css-tabs.js

@@ -1,5 +1,37 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
+/*
+ * The stuck strip is a full-bleed band of the page canvas, not a glass card:
+ * nine parts canvas color to one part see-through, with the glass blur
+ * behind it, so a panel scrolling under it shows as a faint smear, never as
+ * words beside the labels. At nine parts the muted labels keep at least
+ * 4.1:1, and the accent label 3.6:1, in every palette even over a solid
+ * block of the text, accent or danger color; over the canvas and ordinary
+ * type, which the blur spreads, they keep their canvas contrast. The first
+ * tab's own inline padding (the md control's, spacing step 4) lines its
+ * label up with a space-4 page gutter, so the strip adds no padding of its
+ * own. It rides the AppHeader's layer.
+ */
+export const stuckCanvasShare = 0.9;
+function stickyRules() {
+    return `.sw-tabs-sticky {
+  background: color-mix(in srgb, var(--sw-color-background) ${stuckCanvasShare * 100}%, transparent);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  position: sticky;
+  top: env(safe-area-inset-top, 0px);
+  ${zIndex('topChrome')}
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-tabs-sticky {
+    background: var(--sw-color-background);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}`;
+}
 /** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
 export function cssTabsClasses() {
     return `.sw-tabs {
@@ -55,10 +87,19 @@ export function cssTabsClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+${stickyRules()}
+
 @media (forced-colors: active) {
   .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+  .sw-tabs-sticky { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }`;
 }
 export function tabsClassCatalog() {
-    return ['sw-tabs', 'sw-tab', 'sw-tab-selected', 'sw-tab-panel'];
+    return [
+        'sw-tabs',
+        'sw-tabs-sticky',
+        'sw-tab',
+        'sw-tab-selected',
+        'sw-tab-panel',
+    ];
 }

package/dist/css/stacking.js

@@ -10,8 +10,9 @@
  *    its popup can only paint as high as the surface does; lifting the surface
  *    over the ActionBar keeps an open list tappable where the bar would cover
  *    it, and over the next surface in the flow.
- * 4. `topChrome`: the sticky AppHeader, over a lifted surface that scrolls up
- *    under it (the header is the page's way back, and a popup opens downward).
+ * 4. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
+ *    surface that scrolls up under it (the header is the page's way back, the
+ *    strip its way between sections, and a popup opens downward).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
  *    list, Tooltip, the DateField and CalendarButton calendar) over
  *    everything in the page.

package/dist/styles.css

@@ -1890,6 +1890,32 @@ body {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md {
+    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
+    border-width: 1px 0 0;
+    margin: auto 0 0;
+    max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+    max-width: none;
+    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+    width: 100%;
+  }
+
+  .sw-dialog-sheet-below-md[open] {
+    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
+  }
+}
+
+@keyframes sw-dialog-sheet-in {
+  from { translate: 0 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-dialog-sheet-below-md[open] { animation: none; }
+}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -1899,6 +1925,59 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+.sw-dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-dialog-header > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-button.sw-dialog-close {
+  flex: none;
+  padding-inline: 0;
+  min-width: var(--sw-control-sm-min-height);
+    margin-block: calc((28px - var(--sw-control-sm-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-sm-min-height)) / 2);
+}
+
+@media (pointer: coarse) {
+  .sw-button.sw-dialog-close {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+    margin-block: calc((28px - var(--sw-control-md-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-md-min-height)) / 2);
+  }
+}
+
+/* Private control chrome: two strokes crossed in a space-4 square, in the
+   button's color; borders, so forced colors keep them. */
+.sw-dialog-close-glyph {
+  flex: none;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-dialog-close-glyph::before,
+.sw-dialog-close-glyph::after {
+  border-top: 2px solid currentColor;
+  border-radius: 1px;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
+.sw-dialog-close-glyph::before { transform: rotate(45deg); }
+.sw-dialog-close-glyph::after { transform: rotate(-45deg); }
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2272,14 +2351,21 @@ body {
   padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
 }
 
+/* A Badge and a short line sit on one row a small gap apart; a line that
+   does not fit beside the badge wraps under it. */
 .sw-action-bar-status {
+  align-items: center;
   color: var(--sw-color-muted);
+  column-gap: var(--sw-space-2);
+  display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
   font-family: var(--sw-font-sans);
   font-size: 13px;
   line-height: 18px;
   margin: 0;
   min-width: 0;
+  row-gap: var(--sw-space-1);
 }
 
 /* With no status the live region stays in the page, so a first status is
@@ -2674,8 +2760,26 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+.sw-tabs-sticky {
+  background: color-mix(in srgb, var(--sw-color-background) 90%, transparent);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  position: sticky;
+  top: env(safe-area-inset-top, 0px);
+  z-index: 4;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-tabs-sticky {
+    background: var(--sw-color-background);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 @media (forced-colors: active) {
   .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+  .sw-tabs-sticky { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
 .sw-filter-chips {

package/package.json

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