@scalewing/react 1.32.0 → 1.33.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @scalewing/react
 
+## 1.33.1
+
+### Patch Changes
+
+- 2a52f01: `Split` no longer widens the page in a narrow container. The split is now at most its container's width less the split minimum (`max-width: calc(100% - var(--sw-split-min))`), so the next column keeps 14rem and the start pane shrinks below its 22rem default instead of running past the container. Before, at 390 px the pane kept 22rem, the next column got no width and its words pushed the page out sideways (the gallery measured 481 px; found by Teisoro F-011). The drag and keyboard range follows the same room: the pane's maximum is the container less the handle and the next column's minimum (as before), and when that room is under the minimum the range narrows to it, so a gesture starts from the width on screen, a move to the end never collapses or jumps the pane, and one step to the start collapses it. The pane keeps the width the reader chose (a collapse never overwrites it) and shows it held to the container's range, so a pane expanded after the container widens shows at least its minimum. The separator's `aria-valuenow` reports the width that shows (100 when the container leaves no range) and follows container resizes. No API, class or token changes.
+
+## 1.33.0
+
+### Minor Changes
+
+- 3a3dbf6: A quiet link look for a title that opens something, such as a table row's title (`docs/requests/teisoro-box-link-quiet.md`, Teisoro F-011 task 2145):
+
+  - `Box` `link` (`BoxLink`, `boxLinkAppearances`): `'accent'` (default, unchanged: the canvas link) or `'quiet'`, which keeps the surrounding text's colour at weight 600 and underlines on hover and keyboard focus. Its weight is the non-colour cue (WCAG 1.4.1), so it is for text lighter than 600; axe's `link-in-text-block` passes it on colour (the same colour and background as its text) or on its weight, and an accent link in body text that falls under 3:1 fails it. Only for `as="a"` (otherwise a `TypeError`); an unknown value throws a `RangeError`.
+
+  New generated class `sw-link-quiet`. No new tokens. The gallery adds `axe-core` (4.13.0, already in the lockfile through `eslint-plugin-jsx-a11y`) as an exact-pinned dev dependency for its accessibility check (pinned to the version the lockfile already holds, so nothing new is fetched); no production dependency.
+
+### Patch Changes
+
+- f3f318e: A scroll region (`Table`'s wrapper, the `DenominationGrid` strip) is now `position: relative`, so it is the containing block of anything absolutely placed inside it that no nearer box holds, such as a visually hidden label (`sw-sr-only`) or a field's hidden name in a cell past the region's edge. Before, such a label was placed against the page and widened it on a phone while the table scrolled sideways (reported by Teisoro F-011, an inline edit in a table row at 390 px). Anything absolutely placed in a table with no positioned box in between now anchors to the table's region and scrolls with it, rather than to a positioned box outside the table (or the page). No API, class or token changes.
+
 ## 1.32.0
 
 ### Minor Changes

package/README.md

@@ -57,7 +57,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `AppHeader` is the page's top chrome, sticky by default (`sticky={false}` leaves it in flow). Its default `appearance="glass"` is a rounded frosted card. `appearance="bar"` (`AppHeaderAppearance`, `appHeaderAppearances`) is a full-width band of the solid surface with the border hairline under it: no blur, no rounding, no side or top border, the same under Reduce Transparency, and the hairline kept in forced colors. Set it against the page's edges (no side gutter round it) and put the gutter inside it. An unknown `appearance` throws a `RangeError`.
 
-`Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words). When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
+`Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Box as="a" link="quiet"` (opt-in; `link="accent"`, the default, is the canvas link) is a title that opens something, such as a table row's title: it keeps the surrounding text's colour at weight 600 (`sw-link-quiet`) and is underlined on hover and keyboard focus. Its weight is the non-colour cue WCAG 1.4.1 asks for (axe's `link-in-text-block` passes it on colour, the same colour and background as its text, or on its weight; the weight is what keeps it visibly a link), so use it in text lighter than 600. In text already at 600 the quiet look has no cue: an accent link there needs at least 3:1 contrast against the text. `link` on a box that is not `as="a"` throws a `TypeError`, an unknown value a `RangeError`. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words). When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
 
 ```tsx
 <Steps aria-label="Heron survey">

package/dist/components/Box.d.ts

@@ -1,6 +1,7 @@
 import { type RadiusStep, type SemanticColorKey } from '@scalewing/tokens';
 import { type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
 import { type BoxBorderValue } from '../css/css-box-border.js';
+import { type BoxLinkAppearance } from '../css/css-box-link.js';
 import { type ColumnSpanProps } from '../column-span-classes.js';
 import { type SpacingProps } from '../spacing-classes.js';
 import { type VisibilityProps } from '../visibility-classes.js';
@@ -15,8 +16,17 @@ export type BoxProps = SpacingProps & VisibilityProps & ColumnSpanProps & HTMLAt
      * full-width bar, such as a section's sub-navigation).
      */
     border?: BoxBorder;
+    /**
+     * How a `Box as="a"` reads: `accent` (default) is the canvas link;
+     * `quiet` keeps the surrounding text's colour at weight 600 and
+     * underlines on hover and focus, for a title that opens something,
+     * such as a table row's. Weight is its non-colour cue, so use it in
+     * text lighter than 600. Only for `as="a"`; an unknown value throws.
+     */
+    link?: BoxLink;
 };
 export type BoxBorder = BoxBorderValue;
+export type BoxLink = BoxLinkAppearance;
 export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & VisibilityProps & ColumnSpanProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "download" | "href" | "target"> & {
     as?: BoxElement;
     background?: Extract<SemanticColorKey, "background" | "surface">;
@@ -27,4 +37,12 @@ export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps
      * full-width bar, such as a section's sub-navigation).
      */
     border?: BoxBorder;
+    /**
+     * How a `Box as="a"` reads: `accent` (default) is the canvas link;
+     * `quiet` keeps the surrounding text's colour at weight 600 and
+     * underlines on hover and focus, for a title that opens something,
+     * such as a table row's. Weight is its non-colour cue, so use it in
+     * text lighter than 600. Only for `as="a"`; an unknown value throws.
+     */
+    link?: BoxLink;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Box.js

@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
 import { boxBorderClass } from '../css/css-box-border.js';
+import { assertBoxLink, boxLinkClass, } from '../css/css-box-link.js';
 import { columnSpanClassNames, } from '../column-span-classes.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { visibilityClassNames, } from '../visibility-classes.js';
-export const Box = forwardRef(function Box({ as = 'div', background, border, className, columnSpan, hideBelow, hideFrom, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, ...rest }, ref) {
+export const Box = forwardRef(function Box({ as = 'div', background, border, className, columnSpan, hideBelow, hideFrom, link, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, ...rest }, ref) {
+    assertBoxLink(link, as);
     const Component = as;
     return (_jsx(Component, { ref: ref, className: cx(...spacingClassNames({
             padding,
@@ -15,7 +17,7 @@ export const Box = forwardRef(function Box({ as = 'div', background, border, cla
             paddingTop,
             paddingX,
             paddingY,
-        }), ...visibilityClassNames({ hideBelow, hideFrom }), ...columnSpanClassNames({ columnSpan }), boxBorderClass(border), className), style: {
+        }), ...visibilityClassNames({ hideBelow, hideFrom }), ...columnSpanClassNames({ columnSpan }), boxBorderClass(border), boxLinkClass(link), className), style: {
             backgroundColor: background
                 ? `var(--sw-color-${background})`
                 : undefined,

package/dist/components/Split.js

@@ -1,21 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { spacingScale } from '@scalewing/tokens';
-import { useCallback, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useId, useRef, useState, } from 'react';
 import { cx } from '../class-names.js';
-import { applySplitDrag, applySplitKey, cssLengthToPx, effectiveSplitMax, readSplitMetrics, splitPercent, } from '../split-size.js';
-function metricsFrom(node) {
-    const styles = getComputedStyle(node);
-    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
-    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
-}
+import { applySplitDrag, applySplitKey, clampSplitSize, splitPercent, } from '../split-size.js';
+import { useSplitRange } from './use-split-range.js';
 export function Split({ children, className, collapsed: collapsedProp, label, onCollapsedChange, ...rest }) {
     const paneId = useId();
     const splitRef = useRef(null);
     const handleRef = useRef(null);
     const dragRef = useRef(null);
     const [width, setWidth] = useState(null);
-    const [range, setRange] = useState(null);
     const [collapsedUncontrolled, setCollapsedUncontrolled] = useState(false);
     const collapsed = collapsedProp ?? collapsedUncontrolled;
     const setCollapsed = useCallback((next) => {
@@ -24,38 +19,25 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
             setCollapsedUncontrolled(next);
         }
     }, [collapsedProp, onCollapsedChange]);
-    useLayoutEffect(() => {
-        const node = splitRef.current;
-        if (!node) {
-            return;
-        }
-        const measured = metricsFrom(node);
-        setRange({ min: measured.min, max: measured.max });
-        setWidth((current) => current ?? measured.defaultWidth);
-    }, []);
-    function dragMetrics() {
-        const split = splitRef.current;
-        const handle = handleRef.current;
-        if (!split) {
-            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
-        }
-        const measured = metricsFrom(split);
-        const parentWidth = split.parentElement?.getBoundingClientRect().width ?? 0;
-        const handleWidth = handle?.getBoundingClientRect().width ?? 0;
-        return {
-            ...measured,
-            max: effectiveSplitMax(measured.max, parentWidth, handleWidth, measured.min),
-        };
-    }
-    function currentSnapshot() {
-        const measured = dragMetrics();
+    const { range, measure } = useSplitRange(splitRef, handleRef);
+    /**
+     * `width` is the reader's chosen width; what shows is it held to the range
+     * the container leaves, so an expansion never shows a pane under its
+     * minimum or past the room, and a gesture starts from what shows.
+     */
+    function currentSnapshot(metrics) {
         return {
             collapsed,
-            width: width ?? measured.defaultWidth,
+            width: clampSplitSize(width ?? metrics.defaultWidth, metrics.min, metrics.max),
         };
     }
-    function applySnapshot(next) {
-        setWidth(next.width);
+    function applySnapshot(next, start) {
+        // Only a gesture that moves the pane chooses a width: a collapse, or a
+        // move held at the end of a narrow container's range, keeps the chosen
+        // one, so it shows again when the container widens.
+        if (!next.collapsed && next.width !== start.width) {
+            setWidth(next.width);
+        }
         if (next.collapsed !== collapsed) {
             setCollapsed(next.collapsed);
         }
@@ -67,11 +49,12 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         event.preventDefault();
         event.currentTarget.focus();
         event.currentTarget.setPointerCapture?.(event.pointerId);
+        const metrics = measure();
         dragRef.current = {
             pointerId: event.pointerId,
             startX: event.clientX,
-            snapshot: currentSnapshot(),
-            metrics: dragMetrics(),
+            snapshot: currentSnapshot(metrics),
+            metrics,
             moved: false,
         };
     }
@@ -84,7 +67,7 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         if (Math.abs(delta) >= spacingScale[1]) {
             drag.moved = true;
         }
-        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics));
+        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics), drag.snapshot);
     }
     function endDrag(event) {
         const drag = dragRef.current;
@@ -101,17 +84,21 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         if (!splitRef.current) {
             return;
         }
-        const next = applySplitKey(event.key, currentSnapshot(), dragMetrics());
+        const metrics = measure();
+        const start = currentSnapshot(metrics);
+        const next = applySplitKey(event.key, start, metrics);
         if (!next) {
             return;
         }
         event.preventDefault();
-        applySnapshot(next);
+        applySnapshot(next, start);
     }
-    const valueNow = collapsed
+    // What shows: the chosen width held to the container's range.
+    const shownWidth = range
+        ? clampSplitSize(width ?? range.defaultWidth, range.min, range.max)
+        : null;
+    const valueNow = collapsed || !range || shownWidth === null
         ? 0
-        : range && width !== null
-            ? splitPercent(width, range.min, range.max)
-            : 0;
-    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: width === null ? undefined : { width: `${width}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
+        : splitPercent(shownWidth, range.min, range.max);
+    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: shownWidth === null ? undefined : { width: `${shownWidth}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
 }

package/dist/components/use-split-range.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import { type SplitMetrics } from '../split-size.js';
+export type SplitRange = Pick<SplitMetrics, 'min' | 'max'> & {
+    defaultWidth: number;
+};
+/**
+ * The range a Split's pane can take in its container, measured on layout and
+ * whenever the container resizes, and `measure` for a gesture, which also
+ * brings the shown range up to date. An unchanged range keeps its state, so
+ * a resize that changes nothing does not render again.
+ */
+export declare function useSplitRange(splitRef: RefObject<HTMLDivElement | null>, handleRef: RefObject<HTMLDivElement | null>): {
+    range: SplitRange | null;
+    measure: () => SplitMetrics & {
+        defaultWidth: number;
+    };
+};

package/dist/components/use-split-range.js

@@ -0,0 +1,49 @@
+'use client';
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { containerContentWidth, splitTokenMetrics } from '../split-measure.js';
+import { effectiveSplitRange } from '../split-size.js';
+function sameRange(a, b) {
+    return (a !== null &&
+        a.min === b.min &&
+        a.max === b.max &&
+        a.defaultWidth === b.defaultWidth);
+}
+/**
+ * The range a Split's pane can take in its container, measured on layout and
+ * whenever the container resizes, and `measure` for a gesture, which also
+ * brings the shown range up to date. An unchanged range keeps its state, so
+ * a resize that changes nothing does not render again.
+ */
+export function useSplitRange(splitRef, handleRef) {
+    const [range, setRange] = useState(null);
+    const measure = useCallback(() => {
+        const split = splitRef.current;
+        if (!split) {
+            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
+        }
+        const tokens = splitTokenMetrics(split);
+        const handleWidth = handleRef.current?.getBoundingClientRect().width ?? 0;
+        const measured = {
+            ...tokens,
+            ...effectiveSplitRange(tokens, containerContentWidth(split), handleWidth),
+        };
+        const next = {
+            min: measured.min,
+            max: measured.max,
+            defaultWidth: measured.defaultWidth,
+        };
+        setRange((current) => (sameRange(current, next) ? current : next));
+        return measured;
+    }, [splitRef, handleRef]);
+    useLayoutEffect(() => {
+        const parent = splitRef.current?.parentElement;
+        measure();
+        if (!parent || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [measure, splitRef]);
+    return { range, measure };
+}

package/dist/css/css-box-link.d.ts

@@ -0,0 +1,13 @@
+/**
+ * How a `Box as="a"` reads as a link. `accent` (the default) is the
+ * canvas link: the accent colour, no underline. `quiet` is a title that
+ * opens something, such as the title of a table row: the surrounding
+ * text's colour at weight 600, underlined while hovered or focused.
+ */
+export declare const boxLinkAppearances: readonly ["accent", "quiet"];
+export type BoxLinkAppearance = (typeof boxLinkAppearances)[number];
+export declare function assertBoxLink(link: unknown, as: string): void;
+/** The generated class for a Box `link` prop, or none for the canvas link. */
+export declare function boxLinkClass(link: BoxLinkAppearance | undefined): string | undefined;
+export declare function cssBoxLinkClasses(): string;
+export declare function boxLinkClassCatalog(): string[];

package/dist/css/css-box-link.js

@@ -0,0 +1,50 @@
+import { typographyVariants } from '@scalewing/tokens';
+/**
+ * How a `Box as="a"` reads as a link. `accent` (the default) is the
+ * canvas link: the accent colour, no underline. `quiet` is a title that
+ * opens something, such as the title of a table row: the surrounding
+ * text's colour at weight 600, underlined while hovered or focused.
+ */
+export const boxLinkAppearances = ['accent', 'quiet'];
+const quietLinkClass = 'sw-link-quiet';
+export function assertBoxLink(link, as) {
+    if (link === undefined)
+        return;
+    if (!boxLinkAppearances.includes(link))
+        throw new RangeError(`Unknown Box link: ${String(link)}`);
+    if (as !== 'a')
+        throw new TypeError('Box link is for a link (as="a")');
+}
+/** The generated class for a Box `link` prop, or none for the canvas link. */
+export function boxLinkClass(link) {
+    return link === 'quiet' ? quietLinkClass : undefined;
+}
+/*
+ * A quiet link keeps the colour of the text around it, so colour cannot
+ * tell it apart. Its weight does: 600, the label weight, in body-weight
+ * text, the non-colour cue WCAG 1.4.1 asks for, and one that forced colours
+ * keep. (axe's link-in-text-block passes it on colour, the same colour
+ * and background as its text, or on its weight; the weight is what keeps it
+ * a visible link.) Use it in text lighter
+ * than 600, such as a body row's title. In text already at 600 the quiet
+ * look has no cue; an accent link there needs at least 3:1 against the text.
+ * Hover and keyboard focus underline it; focus keeps the canvas focus ring.
+ * The rules outrank the canvas `[data-theme] a` rules, hover included.
+ * Forced colours paint it in the system link colour, as any link.
+ */
+export function cssBoxLinkClasses() {
+    const quiet = `[data-theme] a.${quietLinkClass}`;
+    return `${quiet} {
+  color: inherit;
+  font-weight: ${typographyVariants.label.fontWeight};
+}
+
+${quiet}:hover,
+${quiet}:focus-visible {
+  color: inherit;
+  text-decoration-line: underline;
+}`;
+}
+export function boxLinkClassCatalog() {
+    return [quietLinkClass];
+}

package/dist/css/css-document.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { cssBoxLinkClasses } from './css-box-link.js';
 const body = typographyVariants.body;
 /** The native controls that take typed text: the canvas's text controls. */
 export const typedInputs = [
@@ -97,6 +98,8 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+${cssBoxLinkClasses()}
+
 /*
  * A programmatic focus target (tabindex="-1": a notice, a card or a heading
  * that a script focuses after a save) takes the accent ring past the ring

package/dist/css/css-scroll-region.d.ts

@@ -9,9 +9,13 @@ export declare function scrollShadeRules(selector: string): string;
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
- * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. While its content is scrolled
- * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * page. It is positioned, so it is the containing block of anything
+ * absolutely placed inside it that no nearer box holds, such as a visually
+ * hidden label (`sw-sr-only`) in a cell past its edge: that stays inside the
+ * scroll, not placed against the page, where it would widen it. It is a
+ * keyboard stop, so its focus ring is drawn inside its edge where an
+ * ancestor's clipping cannot hide it. While its content is scrolled out past
+ * an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
  * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
  * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
  * colors the shade is not drawn and the system's scrollbar is the cue. Table

package/dist/css/css-scroll-region.js

@@ -34,9 +34,13 @@ export function scrollShadeRules(selector) {
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
- * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. While its content is scrolled
- * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * page. It is positioned, so it is the containing block of anything
+ * absolutely placed inside it that no nearer box holds, such as a visually
+ * hidden label (`sw-sr-only`) in a cell past its edge: that stays inside the
+ * scroll, not placed against the page, where it would widen it. It is a
+ * keyboard stop, so its focus ring is drawn inside its edge where an
+ * ancestor's clipping cannot hide it. While its content is scrolled out past
+ * an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
  * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
  * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
  * colors the shade is not drawn and the system's scrollbar is the cue. Table
@@ -45,6 +49,7 @@ export function scrollShadeRules(selector) {
 export function scrollRegionRules(selector) {
     return `${selector} {
   overflow: auto;
+  position: relative;
   width: 100%;
 }
 

package/dist/css/css-split.js

@@ -6,6 +6,7 @@ export function cssSplitClasses() {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
+  max-width: calc(100% - var(--sw-split-min));
   min-width: 0;
 }
 

package/dist/css/stylesheet.js

@@ -27,6 +27,7 @@ import { fieldClassCatalog } from './css-field.js';
 import { stepperClassCatalog } from './css-stepper.js';
 import { stepsClassCatalog } from './css-steps.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
+import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
 import { chartClassCatalog } from './css-chart.js';
@@ -106,6 +107,7 @@ export function utilityClassCatalog() {
         ...toastCardClassCatalog(),
         ...responsiveClassCatalog(),
         ...boxBorderClassCatalog(),
+        ...boxLinkClassCatalog(),
     ];
 }
 export { generatePaletteStylesheet, paletteStylesheetIds, } from './css-palettes.js';

package/dist/index.d.ts

@@ -18,7 +18,8 @@ export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, bad
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
-export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
+export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
+export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';

package/dist/index.js

@@ -18,6 +18,7 @@ export { BarChart, barChartTones, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';
+export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';

package/dist/split-measure.d.ts

@@ -0,0 +1,7 @@
+import { type SplitMetrics } from './split-size.js';
+/** The container's content width, which the split's percentage cap uses. */
+export declare function containerContentWidth(node: HTMLElement): number;
+/** The split's token range, step and default width, in px. */
+export declare function splitTokenMetrics(node: HTMLElement): SplitMetrics & {
+    defaultWidth: number;
+};

package/dist/split-measure.js

@@ -0,0 +1,21 @@
+// DOM reads for Split: the split's token metrics from its computed custom
+// properties, and its container's content width (what the stylesheet's
+// percentage cap resolves against). The range math stays pure in
+// `split-size.ts`.
+import { cssLengthToPx, readSplitMetrics, } from './split-size.js';
+/** The container's content width, which the split's percentage cap uses. */
+export function containerContentWidth(node) {
+    const parent = node.parentElement;
+    if (!parent) {
+        return 0;
+    }
+    const styles = getComputedStyle(parent);
+    const padding = cssLengthToPx(styles.paddingLeft) + cssLengthToPx(styles.paddingRight);
+    return Math.max(0, parent.clientWidth - padding);
+}
+/** The split's token range, step and default width, in px. */
+export function splitTokenMetrics(node) {
+    const styles = getComputedStyle(node);
+    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
+    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
+}

package/dist/split-size.d.ts

@@ -12,7 +12,21 @@ export declare function readSplitMetrics(read: (name: string) => string, remPx?:
     defaultWidth: number;
 };
 export declare function clampSplitSize(size: number, min: number, max: number): number;
+/**
+ * The pane's place between its minimum and maximum as 0–100. When the
+ * container leaves no range (min equals max), the pane is as wide as it can
+ * be: 100.
+ */
 export declare function splitPercent(width: number, min: number, max: number): number;
-export declare function effectiveSplitMax(tokenMax: number, parentWidth: number, handleWidth: number, min: number): number;
+/**
+ * The range a pane can take in its container. The stylesheet keeps the split
+ * at most its container less the split minimum, so the next column keeps that
+ * minimum and the pane gets the room left after the handle. In a narrow
+ * container that room is under the token minimum, so the range narrows to it:
+ * a pane never grows past what shows, and only a move narrower than the room
+ * collapses it. A container that is not laid out (zero width) keeps the
+ * token range.
+ */
+export declare function effectiveSplitRange(tokens: Pick<SplitMetrics, 'min' | 'max'>, containerWidth: number, handleWidth: number): Pick<SplitMetrics, 'min' | 'max'>;
 export declare function applySplitDrag(start: SplitSnapshot, deltaX: number, metrics: SplitMetrics): SplitSnapshot;
 export declare function applySplitKey(key: string, start: SplitSnapshot, metrics: SplitMetrics): SplitSnapshot | null;

package/dist/split-size.js

@@ -23,21 +23,33 @@ export function readSplitMetrics(read, remPx = 16) {
 export function clampSplitSize(size, min, max) {
     return Math.min(max, Math.max(min, size));
 }
+/**
+ * The pane's place between its minimum and maximum as 0–100. When the
+ * container leaves no range (min equals max), the pane is as wide as it can
+ * be: 100.
+ */
 export function splitPercent(width, min, max) {
     if (max <= min) {
-        return 0;
+        return 100;
     }
     return Math.round(((clampSplitSize(width, min, max) - min) / (max - min)) * 100);
 }
-export function effectiveSplitMax(tokenMax, parentWidth, handleWidth, min) {
-    if (parentWidth <= 0) {
-        return tokenMax;
+/**
+ * The range a pane can take in its container. The stylesheet keeps the split
+ * at most its container less the split minimum, so the next column keeps that
+ * minimum and the pane gets the room left after the handle. In a narrow
+ * container that room is under the token minimum, so the range narrows to it:
+ * a pane never grows past what shows, and only a move narrower than the room
+ * collapses it. A container that is not laid out (zero width) keeps the
+ * token range.
+ */
+export function effectiveSplitRange(tokens, containerWidth, handleWidth) {
+    if (containerWidth <= 0) {
+        return { min: tokens.min, max: tokens.max };
     }
-    const room = parentWidth - handleWidth - min;
-    if (room < min) {
-        return min;
-    }
-    return Math.min(tokenMax, room);
+    const room = Math.max(0, containerWidth - handleWidth - tokens.min);
+    const max = Math.min(tokens.max, room);
+    return { min: Math.min(tokens.min, max), max };
 }
 export function applySplitDrag(start, deltaX, metrics) {
     if (start.collapsed) {

package/dist/styles.css

@@ -628,6 +628,17 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+[data-theme] a.sw-link-quiet {
+  color: inherit;
+  font-weight: 600;
+}
+
+[data-theme] a.sw-link-quiet:hover,
+[data-theme] a.sw-link-quiet:focus-visible {
+  color: inherit;
+  text-decoration-line: underline;
+}
+
 /*
  * A programmatic focus target (tabindex="-1": a notice, a card or a heading
  * that a script focuses after a save) takes the accent ring past the ring
@@ -1537,6 +1548,7 @@ body {
 
 .sw-table-wrap {
   overflow: auto;
+  position: relative;
   width: 100%;
 }
 
@@ -4348,6 +4360,7 @@ body {
 
 .sw-denomination-scroll {
   overflow: auto;
+  position: relative;
   width: 100%;
 }
 
@@ -5308,6 +5321,7 @@ body {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
+  max-width: calc(100% - var(--sw-split-min));
   min-width: 0;
 }
 

package/package.json

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