@scalewing/react 1.10.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @scalewing/react
 
+## 1.10.1
+
+### Patch Changes
+
+- 7c27935: `ActionMenu` places its menu with the shared anchored-popover code that the `DateField` and `CalendarButton` calendar use (`docs/requests/teisoro-action-menu.md`, 2026-09-28 follow-up). The menu now opens a `space-1` (4 px) gap below its trigger, or above it when it only fits there, keeps at least `space-2` (8 px) from every viewport edge, and aligns to the trigger's inline start (its right edge in right-to-left), or to the trigger's other edge when the trigger ends a row and the menu would not fit from its start. Before, it sat directly on the trigger and was pushed flush against the screen edge.
+
+  - The menu element is rendered only while it is open, like the calendar; it was a `hidden` element before. `aria-controls` already pointed at it only while open. A test that looked for the closed menu with `{ hidden: true }` now finds nothing.
+  - `.sw-action-menu-list` is as wide as its longest command (`width: max-content`, at least the 44 px control height) up to the viewport less both insets, so a long command wraps inside the screen instead of running off it. It resets the popover layer's `inset`, so the placed position holds in right-to-left documents too. Commands take the label line height with a `space-1` block padding, still 28 px tall on one line.
+  - The unused `.sw-action-menu-list[hidden]` rule is gone.
+
+  No API change and no new dependencies.
+
+- ab61ca6: `ActionMenu` gives a coarse pointer the 44 px touch target (`docs/requests/teisoro-action-menu.md`, 2026-09-28 touch-target follow-up). Under `@media (pointer: coarse)` the trigger is at least `--sw-control-md-min-height` (44 px) tall and wide, and each command at least 44 px tall; a fine pointer keeps the compact xs height. This follows `CalendarButton`'s coarse-pointer rule, and both now read the target from one internal module.
+
+  Visual change on touch screens only. No API change and no new dependencies.
+
+- df1fa80: The `ActionMenu` menu and the `DateField` and `CalendarButton` calendar are placed again when the popover or its anchor changes size while open, such as commands that change while the menu is open or a month with another row of weeks (`docs/requests/teisoro-action-menu.md`, 2026-09-28 placement follow-up). Before, their shared placement ran only on opening, scroll and window resize. It uses `ResizeObserver` where the runtime has it.
+
+  No API change and no new dependencies.
+
+- 91665ce: The `DateField` and `CalendarButton` calendar and the `ActionMenu` menu now fit the viewport a classic scrollbar leaves (`docs/requests/teisoro-action-menu.md`, 2026-09-28 placement follow-up). Their shared placement measured `window.innerWidth` and `innerHeight`, which include a classic scrollbar, so a popover clamped to the right edge could sit under the scrollbar instead of `space-2` from it. It now measures the root element's client box. The calendar's `max-width` is `100%` of the top layer less both insets instead of `100vw`, as the menu's is.
+
+  Only pages with classic (non-overlay) scrollbars change. No API change and no new dependencies.
+
+- 7b4058e: `Text` drops the browser's paragraph and heading margins (`docs/requests/teisoro-text.md`). Its `p` and `h1`–`h4` elements kept about 1em of margin above and below, which a flex `Stack` or `Inline` adds to its `gap`. A generated `:where(.sw-text-*) { margin: 0; }` rule removes it at zero specificity, so an authored margin (`sw-sr-only`, a consumer class) still wins.
+
+  Visual change: text in a `Stack` or `Inline` sits at the `gap` the page asked for, so dialog titles, section headings and card text are tighter. A page that needs more space raises its `gap`. No API change and no new dependencies.
+
 ## 1.10.0
 
 ### Minor Changes

package/README.md

@@ -94,7 +94,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 </Stack>
 ```
 
-`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.
+`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. 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.
 
@@ -114,8 +114,12 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Card` defaults to `glass`; `outlined` and `elevated` are solid surfaces, and `filled` is a quiet `--sw-color-subtle` fill with no border for plain information apart from pressable rows.
 
+`--sw-color-accentSubtle` is the accent tint from `@scalewing/tokens`: a quiet fill behind accent text or glyphs that keeps 4.5:1. The stylesheet and every palette file set it, and a palette that moves the accent or surface retints it.
+
 `Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
 
+`Text` has no margin of its own. Its default `p` and `h1`–`h4` elements drop the browser's block margins, so the `gap` of the `Stack` or `Inline` around it alone sets the spacing; put more space in that `gap`, not in a margin. The reset has zero specificity (`:where(.sw-text-*)`), so an authored margin, such as `sw-sr-only` or a consumer class, still applies.
+
 `Text` takes an optional `align` (`start`, `center`, `end`) mapped to generated `sw-text-align-*` classes, for a heading that must stay centered when it wraps.
 
 `Grid` places children in one to four (or six) equal-width columns with a token `gap` step. `columnsBelow={{ md: 2 }}` drops to fewer columns below the `md` breakpoint so tiles and stat cards stay readable on a phone. It accepts every `Box` prop.

package/dist/anchored-position.d.ts

@@ -16,13 +16,25 @@ export type AnchoredPosition = {
     left: number;
     top: number;
 };
+export type AnchoredPositionOptions = {
+    /** Space between the anchor and the popover, in px. */
+    gap?: number;
+    /** Space the popover keeps from every viewport edge, in px. */
+    inset?: number;
+    /** Right-to-left text: the anchor's inline start is its right edge. */
+    rtl?: boolean;
+    /**
+     * When the popover would cross the viewport's inline end aligned to the
+     * anchor's start, align it to the anchor's end instead (a menu opened from
+     * a trigger at the end of a row), as long as that fits.
+     */
+    flipInline?: boolean;
+};
 /**
  * Where a fixed popover goes beside its anchor: below and aligned to the
  * anchor's inline start (its end in right-to-left), above when it does not
  * fit below but does above, and always kept inside the viewport by `inset`.
+ * With `flipInline`, a popover that does not fit start-aligned lines up with
+ * the anchor's end instead.
  */
-export declare function anchoredPosition(anchor: AnchorRect, size: PopoverSize, viewport: Viewport, { gap, inset, rtl }?: {
-    gap?: number | undefined;
-    inset?: number | undefined;
-    rtl?: boolean | undefined;
-}): AnchoredPosition;
+export declare function anchoredPosition(anchor: AnchorRect, size: PopoverSize, viewport: Viewport, options?: AnchoredPositionOptions): AnchoredPosition;

package/dist/anchored-position.js

@@ -1,12 +1,27 @@
+function fitsInline(left, width, viewport, inset) {
+    return left >= inset && left + width <= viewport.width - inset;
+}
+function inlineLeft(anchor, size, viewport, { inset = 0, rtl = false, flipInline = false }) {
+    const startAligned = rtl ? anchor.right - size.width : anchor.left;
+    const endAligned = rtl ? anchor.left : anchor.right - size.width;
+    const preferred = flipInline &&
+        !fitsInline(startAligned, size.width, viewport, inset) &&
+        fitsInline(endAligned, size.width, viewport, inset)
+        ? endAligned
+        : startAligned;
+    const maxLeft = viewport.width - inset - size.width;
+    return Math.max(inset, Math.min(preferred, maxLeft));
+}
 /**
  * Where a fixed popover goes beside its anchor: below and aligned to the
  * anchor's inline start (its end in right-to-left), above when it does not
  * fit below but does above, and always kept inside the viewport by `inset`.
+ * With `flipInline`, a popover that does not fit start-aligned lines up with
+ * the anchor's end instead.
  */
-export function anchoredPosition(anchor, size, viewport, { gap = 0, inset = 0, rtl = false } = {}) {
-    const preferredLeft = rtl ? anchor.right - size.width : anchor.left;
-    const maxLeft = viewport.width - inset - size.width;
-    const left = Math.max(inset, Math.min(preferredLeft, maxLeft));
+export function anchoredPosition(anchor, size, viewport, options = {}) {
+    const { gap = 0, inset = 0 } = options;
+    const left = inlineLeft(anchor, size, viewport, options);
     const below = anchor.bottom + gap;
     const above = anchor.top - gap - size.height;
     const fitsBelow = below + size.height <= viewport.height - inset;

package/dist/components/ActionMenu.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState, } from 'react';
-import { cx } from '../class-names.js';
+import { ActionMenuList } from './action-menu/ActionMenuList.js';
 function nextEnabled(items, current, direction) {
     if (items.length === 0)
         return -1;
@@ -14,9 +14,7 @@ function nextEnabled(items, current, direction) {
 }
 export function ActionMenu({ label, items, trigger, disabled = false, }) {
     const menuId = useId();
-    const rootRef = useRef(null);
     const triggerRef = useRef(null);
-    const menuRef = useRef(null);
     const openRef = useRef(false);
     const [open, setOpen] = useState(false);
     const [focusIndex, setFocusIndex] = useState(-1);
@@ -41,55 +39,6 @@ export function ActionMenu({ label, items, trigger, disabled = false, }) {
         setFocusIndex(index);
         setOpen(true);
     }
-    function positionMenu() {
-        const triggerNode = triggerRef.current;
-        const menuNode = menuRef.current;
-        if (!triggerNode || !menuNode)
-            return;
-        const rect = triggerNode.getBoundingClientRect();
-        const width = menuNode.offsetWidth;
-        const height = menuNode.offsetHeight;
-        menuNode.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - width))}px`;
-        menuNode.style.top = `${Math.max(0, rect.bottom + height <= window.innerHeight ? rect.bottom : rect.top - height)}px`;
-    }
-    useLayoutEffect(() => {
-        const menuNode = menuRef.current;
-        if (!menuNode)
-            return;
-        const supportsPopover = typeof menuNode.showPopover === 'function';
-        if (supportsPopover)
-            menuNode.setAttribute('popover', 'manual');
-        if (!open) {
-            if (supportsPopover && menuNode.matches(':popover-open'))
-                menuNode.hidePopover();
-            return;
-        }
-        if (supportsPopover && !menuNode.matches(':popover-open'))
-            menuNode.showPopover();
-        positionMenu();
-        const commands = menuNode.querySelectorAll('[role="menuitem"]');
-        commands[focusIndex]?.focus();
-    }, [focusIndex, open]);
-    useLayoutEffect(() => {
-        if (!open)
-            return;
-        function onPointerDown(event) {
-            const target = event.target;
-            if (target instanceof Node && !rootRef.current?.contains(target))
-                close();
-        }
-        function onMove() {
-            positionMenu();
-        }
-        document.addEventListener('pointerdown', onPointerDown);
-        window.addEventListener('resize', onMove);
-        window.addEventListener('scroll', onMove, true);
-        return () => {
-            document.removeEventListener('pointerdown', onPointerDown);
-            window.removeEventListener('resize', onMove);
-            window.removeEventListener('scroll', onMove, true);
-        };
-    }, [open]);
     function onTriggerKeyDown(event) {
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
@@ -135,10 +84,5 @@ export function ActionMenu({ label, items, trigger, disabled = false, }) {
         close(true);
         item.onSelect();
     }
-    return (_jsxs("div", { className: "sw-action-menu", ref: rootRef, children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: "sw-action-menu-trigger", disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: trigger ?? label }), _jsx("div", { "aria-label": label, className: "sw-action-menu-list", hidden: !open, id: menuId, onKeyDown: onMenuKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => select(item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            select(item);
-                        }
-                    }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) })] }));
+    return (_jsxs("div", { className: "sw-action-menu", children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: "sw-action-menu-trigger", disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: trigger ?? label }), open ? (_jsx(ActionMenuList, { focusIndex: focusIndex, id: menuId, items: items, label: label, onDismiss: () => close(), onFocusIndex: setFocusIndex, onKeyDown: onMenuKeyDown, onSelect: select, triggerRef: triggerRef })) : null] }));
 }

package/dist/components/action-menu/ActionMenuList.d.ts

@@ -0,0 +1,21 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { ActionMenuItem } from '../ActionMenu.js';
+type ActionMenuListProps = {
+    id: string;
+    label: string;
+    items: readonly ActionMenuItem[];
+    focusIndex: number;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    onDismiss: () => void;
+    onFocusIndex: (index: number) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    onSelect: (item: ActionMenuItem) => void;
+};
+/**
+ * The open menu: on the popover layer beside the trigger (a gap below or
+ * above it, inset from the viewport edges, and lined up with the trigger's
+ * end when it would not fit from its start), with the focused command
+ * holding DOM focus.
+ */
+export declare function ActionMenuList({ id, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
+export {};

package/dist/components/action-menu/ActionMenuList.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+/**
+ * The open menu: on the popover layer beside the trigger (a gap below or
+ * above it, inset from the viewport edges, and lined up with the trigger's
+ * end when it would not fit from its start), with the focused command
+ * holding DOM focus.
+ */
+export function ActionMenuList({ id, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
+    const menuRef = useRef(null);
+    useAnchoredPopover(menuRef, triggerRef, triggerRef, onDismiss, {
+        flipInline: true,
+    });
+    useLayoutEffect(() => {
+        const commands = menuRef.current?.querySelectorAll('[role="menuitem"]');
+        commands?.[focusIndex]?.focus();
+    }, [focusIndex]);
+    return (_jsx("div", { "aria-label": label, className: "sw-action-menu-list", id: id, onKeyDown: onKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onSelect(item);
+                }
+            }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) }));
+}

package/dist/components/date-field/CalendarDialog.js

@@ -5,7 +5,7 @@ import { clampDateOnly, daysInMonth, formatDateOnly, isOutsideDateRange, parseDa
 import { Button } from '../Button.js';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
-import { useAnchoredPopover } from './use-anchored-popover.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
 /** The dialog's tab stops: enabled buttons and the grid's roving day. */
 function isTabStop(node) {
     if (node instanceof HTMLButtonElement)

package/dist/components/use-anchored-popover.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+export type AnchoredPopoverPlacement = {
+    /** Line up with the anchor's end when the start-aligned popover overflows. */
+    flipInline?: boolean;
+};
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll, window resize, and a change in its own
+ * or the anchor's size, a `space-1` gap from it and a
+ * `space-2` inset from the viewport edges, and calls `onDismiss` for a press
+ * outside it and outside `ignoreRef` (the button that toggles it).
+ * Browsers without the popover API get the same fixed placement.
+ */
+export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void, { flipInline }?: AnchoredPopoverPlacement): void;

package/dist/components/{date-field/use-anchored-popover.js → use-anchored-popover.js}

@@ -1,22 +1,37 @@
 import { spacingScale } from '@scalewing/tokens';
 import { useLayoutEffect, useRef } from 'react';
-import { anchoredPosition } from '../../anchored-position.js';
-function placePopover(node, anchor) {
-    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, {
+import { anchoredPosition } from '../anchored-position.js';
+/**
+ * The viewport a fixed popover can use: the root's client box, which leaves
+ * out a classic scrollbar (`innerWidth` and `100vw` include it). Falls back
+ * to the window size where nothing is laid out, as in jsdom.
+ */
+function layoutViewport() {
+    const root = document.documentElement;
+    return {
+        width: root.clientWidth || window.innerWidth,
+        height: root.clientHeight || window.innerHeight,
+    };
+}
+function placePopover(node, anchor, { flipInline = false }) {
+    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],
         rtl: getComputedStyle(anchor).direction === 'rtl',
+        flipInline,
     });
     node.style.left = `${position.left}px`;
     node.style.top = `${position.top}px`;
 }
 /**
  * Shows a mounted element on the top layer as a manual popover, keeps it
- * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
- * press outside it and outside `ignoreRef` (the button that toggles it).
+ * beside `anchorRef` through scroll, window resize, and a change in its own
+ * or the anchor's size, a `space-1` gap from it and a
+ * `space-2` inset from the viewport edges, and calls `onDismiss` for a press
+ * outside it and outside `ignoreRef` (the button that toggles it).
  * Browsers without the popover API get the same fixed placement.
  */
-export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss) {
+export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { flipInline = false } = {}) {
     const dismissRef = useRef(onDismiss);
     useLayoutEffect(() => {
         dismissRef.current = onDismiss;
@@ -34,7 +49,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss)
             if (!node.matches(':popover-open'))
                 node.showPopover();
         }
-        placePopover(node, anchor);
+        placePopover(node, anchor, { flipInline });
         function onPointerDown(event) {
             const target = event.target;
             if (!(target instanceof Node))
@@ -45,17 +60,24 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss)
         }
         function onMove() {
             if (node && anchor)
-                placePopover(node, anchor);
+                placePopover(node, anchor, { flipInline });
         }
+        // A popover or anchor that changes size while open (new commands, a
+        // month with another row of weeks, a relabelled trigger) moves too.
+        // ResizeObserver is missing in some runtimes, such as jsdom.
+        const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(onMove) : null;
+        resizes?.observe(node);
+        resizes?.observe(anchor);
         document.addEventListener('pointerdown', onPointerDown);
         window.addEventListener('resize', onMove);
         window.addEventListener('scroll', onMove, true);
         return () => {
+            resizes?.disconnect();
             document.removeEventListener('pointerdown', onPointerDown);
             window.removeEventListener('resize', onMove);
             window.removeEventListener('scroll', onMove, true);
             if (supportsPopover && node.matches(':popover-open'))
                 node.hidePopover();
         };
-    }, [anchorRef, ignoreRef, popoverRef]);
+    }, [anchorRef, flipInline, ignoreRef, popoverRef]);
 }

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

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -39,20 +40,22 @@ export function cssActionMenuClasses() {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   box-sizing: border-box;
   color: var(--sw-color-text);
+  /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
+  inset: auto;
   margin: 0;
   max-height: var(--sw-select-max);
-  max-width: calc(100vw - var(--sw-space-2));
-  min-width: max-content;
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  /* Never narrower than a touch target. */
+  min-width: var(--sw-control-md-min-height);
   overflow: auto;
   padding: var(--sw-space-1);
   position: fixed;
+  /* As wide as its longest command, until max-width wraps it. */
+  width: max-content;
   ${zIndex('popup')}
 }
 
-.sw-action-menu-list[hidden] {
-  display: none;
-}
-
 .sw-action-menu-item {
   align-items: center;
   appearance: none;
@@ -65,7 +68,11 @@ export function cssActionMenuClasses() {
   font-family: var(--sw-font-sans);
   font-size: ${label.fontSize}px;
   gap: var(--sw-space-2);
+  line-height: ${label.lineHeight}px;
   min-height: var(--sw-control-xs-min-height);
+  /* A long command wraps inside the capped menu, a word at a time if it must. */
+  overflow-wrap: anywhere;
+  padding-block: var(--sw-space-1);
   padding-inline: var(--sw-control-xs-padding-inline);
   text-align: start;
   width: 100%;
@@ -83,6 +90,18 @@ export function cssActionMenuClasses() {
 
 .sw-action-menu-item-danger {
   color: var(--sw-color-danger);
+}
+
+/* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
+@media ${coarsePointerQuery} {
+  .sw-action-menu-trigger {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+
+  .sw-action-menu-item {
+    min-height: ${touchTarget};
+  }
 }`;
 }
 export function actionMenuClassCatalog() {

package/dist/css/css-calendar-button.js

@@ -1,6 +1,5 @@
 import { buttonSizes } from '@scalewing/tokens';
-/* The comfortable touch target: the md control height, 44 px, both ways. */
-const touchTarget = 'var(--sw-control-md-min-height)';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 /* Square at every Button size: as wide as the size's control height. */
 function squareRules() {
     return buttonSizes
@@ -21,7 +20,7 @@ ${squareRules()}
 }
 
 /* A coarse pointer gets the full touch target at the smaller sizes too. */
-@media (pointer: coarse) {
+@media ${coarsePointerQuery} {
   .sw-button.sw-calendar-button {
     min-height: ${touchTarget};
     min-width: ${touchTarget};

package/dist/css/css-components.js

@@ -1,5 +1,3 @@
-import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
-import { breakpointQuery } from './breakpoints.js';
 import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
@@ -15,6 +13,7 @@ import { cssDialogClasses } from './css-dialog.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
+import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssTooltipClasses } from './css-tooltip.js';
@@ -58,22 +57,6 @@ function reducedTransparencyRules() {
   }
 }`;
 }
-function textVariantRules() {
-    return Object.entries(typographyVariants)
-        .map(([name, variant]) => {
-        const tabular = 'tabularNums' in variant && variant.tabularNums
-            ? ' font-variant-numeric: tabular-nums;'
-            : '';
-        return `.sw-text-${name} { font-family: var(--sw-font-sans); font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; font-weight: ${variant.fontWeight}; letter-spacing: ${variant.letterSpacing}px;${tabular} }`;
-    })
-        .join('\n');
-}
-function compactTextVariantRules() {
-    const rules = Object.entries(compactTypographyVariants)
-        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
-        .join('\n');
-    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
-}
 export function cssComponentClasses() {
     return `.sw-card {
   border-radius: var(--sw-radius-lg);
@@ -106,10 +89,6 @@ ${cssPopupHostRules()}
   background: var(--sw-color-subtle);
 }
 
-.sw-text-align-start { text-align: start; }
-.sw-text-align-center { text-align: center; }
-.sw-text-align-end { text-align: end; }
-
 .sw-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,9 +99,7 @@ ${cssPopupHostRules()}
   font-variant-numeric: tabular-nums;
 }
 
-${textVariantRules()}
-
-${compactTextVariantRules()}
+${cssTextClasses()}
 
 ${cssButtonClasses()}
 

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

@@ -142,7 +142,8 @@ function calendarRules() {
   height: auto;
   inset: auto;
   margin: 0;
-  max-width: calc(100vw - var(--sw-space-2) - var(--sw-space-2));
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
   overflow: visible;
   padding: var(--sw-space-3);
   position: fixed;

package/dist/css/css-palettes.js

@@ -1,10 +1,20 @@
 import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
+/**
+ * A palette sets the colours it overlays, plus the accent tint whenever it
+ * moves the accent or surface the tint is mixed from.
+ */
+function overlaidColorKey(key, overlay) {
+    if (key === 'accentSubtle') {
+        return Boolean(overlay.accentSubtle || overlay.accent || overlay.surface);
+    }
+    return Boolean(overlay[key]);
+}
 function paletteCustomProperties(id, scheme) {
     const overlay = colorsForPalette(id, scheme);
     const theme = createTheme({ colorScheme: scheme, palette: id });
     const lines = [];
     for (const key of semanticColorKeys) {
-        if (overlay[key]) {
+        if (overlaidColorKey(key, overlay)) {
             lines.push(`  --sw-color-${key}: ${theme.colors[key]};`);
         }
     }

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

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

package/dist/css/css-text.js

@@ -0,0 +1,42 @@
+import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+function textClassNames() {
+    return Object.keys(typographyVariants).map((name) => `.sw-text-${name}`);
+}
+/*
+ * Text renders `p` and `h1`–`h4` by default. The browser gives those a
+ * block margin, which a flex Stack or Inline does not collapse, so it would
+ * add to every gap. `:where()` keeps the reset at zero specificity: it beats
+ * the browser's margins (author styles win over the user agent's) and loses
+ * to any authored margin, such as `sw-sr-only` or a consumer's class.
+ */
+function textMarginReset() {
+    return `:where(${textClassNames().join(', ')}) { margin: 0; }`;
+}
+function textVariantRules() {
+    return Object.entries(typographyVariants)
+        .map(([name, variant]) => {
+        const tabular = 'tabularNums' in variant && variant.tabularNums
+            ? ' font-variant-numeric: tabular-nums;'
+            : '';
+        return `.sw-text-${name} { font-family: var(--sw-font-sans); font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; font-weight: ${variant.fontWeight}; letter-spacing: ${variant.letterSpacing}px;${tabular} }`;
+    })
+        .join('\n');
+}
+function compactTextVariantRules() {
+    const rules = Object.entries(compactTypographyVariants)
+        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
+        .join('\n');
+    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
+}
+export function cssTextClasses() {
+    return `.sw-text-align-start { text-align: start; }
+.sw-text-align-center { text-align: center; }
+.sw-text-align-end { text-align: end; }
+
+${textMarginReset()}
+
+${textVariantRules()}
+
+${compactTextVariantRules()}`;
+}

package/dist/css/stacking.js

@@ -30,7 +30,8 @@ export function zIndex(layer) {
 }
 const openPopups = [
     '.sw-select-list',
-    '.sw-action-menu-list:not([hidden])',
+    // Rendered only while open; on the top layer where the popover API exists.
+    '.sw-action-menu-list',
     '.sw-tooltip:not([hidden])',
     // DateField and CalendarButton share it. Rendered only while open; on the
     // top layer where the popover API exists.

package/dist/css/touch-target.d.ts

@@ -0,0 +1,2 @@
+export declare const touchTarget = "var(--sw-control-md-min-height)";
+export declare const coarsePointerQuery = "(pointer: coarse)";

package/dist/css/touch-target.js

@@ -0,0 +1,7 @@
+/*
+ * The comfortable touch target on a coarse pointer: the md control height,
+ * 44 px, both ways. Controls drawn smaller for a fine pointer (CalendarButton
+ * at sm and xs, the ActionMenu trigger and commands) grow to it on touch.
+ */
+export const touchTarget = 'var(--sw-control-md-min-height)';
+export const coarsePointerQuery = '(pointer: coarse)';

package/dist/palette/amber.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #B45309;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #FAF3EE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #FCD34D;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #322E23;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 61, 38, 0.72);