@scalewing/react 1.33.0 → 1.34.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @scalewing/react
 
+## 1.34.0
+
+### Minor Changes
+
+- 7e4cbb2: A whole-row press for a table row's one action, such as a search result that is picked (`docs/requests/teisoro-table-row-press.md`, Teisoro F-011 task 2185):
+
+  - `TableRow pressable` (opt-in): a plain primary pointer press anywhere on the row activates the row's first link or button. A press with a modifier key, on another control in the row, already handled, or ending a text selection is left alone, as is a row whose action is disabled. The row is not a control (no role, no tab stop): keyboard and screen reader users use the action itself. The row takes the pointer cursor and the quiet fill while hovered, pressed, or while its action has keyboard focus (an outline in `Highlight` under forced colours), and underlines its action on hover.
+  - `TableCell onPress` (a body cell or a row header): the cell's children become a button in the cell's own text style at weight 600, underlined on hover and focus, for the row's action. A non-function value or one on a sortable header throws a `TypeError`.
+
+  New generated classes `sw-table-row-press` and `sw-table-action`. No new tokens, no new dependency.
+
+## 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

package/README.md

@@ -403,6 +403,15 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 `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.
 
+`TableRow pressable` (opt-in) makes the whole row the pointer target of its one action, such as a search result that is picked: a plain primary press anywhere on it calls `click()` on the row's first link or button, so the action's own handler runs. Left alone: a modifier key or non-primary button, a press already handled, a press on another control, a press that ends a text selection (text stays selectable), and a disabled or missing action. Keep one control in the row: a control placed before the action (an icon button, say) would take the row's press. The row is not a control (no role, no tab stop), so keyboard and screen reader users use the action itself. It takes the pointer cursor and the quiet fill while hovered, pressed (a brief flash on touch) or while its action has keyboard focus (a `Highlight` outline in forced colours), and underlines its action on hover (`sw-table-row-press`). A consumer `onClick` runs once per press. Each click of a double click presses the action, as a native button's would, so keep it safe to repeat. `TableCell onPress` (a body cell or a row header in `TableBody`) makes the cell's children that action: a button in the cell's own text style at weight 600, underlined on hover and focus, with the accent focus ring (`sw-table-action`); a non-function value or one on a sortable header throws a `TypeError`.
+
+```tsx
+<TableRow pressable>
+  <TableCell onPress={() => pick('Red fox')}>Red fox</TableCell>
+  <TableCell>Forest</TableCell>
+</TableRow>
+```
+
 A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `'none'`) and `onSort` is its column's sort control: its children become a button in the header's own style with a chevron (before the name in a `numeric` or end-aligned column), and the cell carries `aria-sort` only while it is the sorted column. `sort` on a data cell, or one of the two without the other, throws a `TypeError`. `Table` `layout="fixed"` (default `auto`) sizes the columns from the header row alone, so a filter that hides a row moves no column, and `verticalAlign="top"` (default `middle`) starts every cell of a tall row on its first line. `TableCell` `width` is `min` (an auto table's column takes the least room its content allows, on one line; set it on each cell of the column) or a size, `xs` to `xl` (4, 6, 8, 12 and 16 rem); in a fixed table a column without a width shares what is left, so leave one column, such as a description, unsized. The HTML `width` attribute is not accepted. Unknown values throw a `RangeError`.
 
 A ledger read across as well as down takes `Table` `columnRules` (a hairline at the inline start of every cell after a row's first, mirrored right to left) and `TableCell` `tone` (`success`, `danger`, `muted` or `accent`: the cell's text in the theme colour, as `Text color` uses it; never the only signal, so keep the sign or the words). `TableRow` `variant="sub"` (default `"default"`) sets a row under the one above, as a batch's items: its row header, a `TableCell as="th" scope="row"`, is indented a `space-6` step with a guide bar at the indent (a sub row without a row header is not indented). `TableRow` `struck` keeps a voided row on the record: the subtle fill and the text muted and struck through, toned cells included; it works with either variant. A line-through is not read aloud, so say why in the row, such as a `Badge` "Voided": a Badge in a line of text is not struck, but one that is itself a flex item (a direct child of `Inline`) is, so put it in the title's line. A row header in the body or footer (`th scope="row"`) reads as body text. An unknown `tone` or `variant` throws a `RangeError`.

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/table/TableCell.d.ts

@@ -46,5 +46,14 @@ export type TableCellProps = ((Omit<TdHTMLAttributes<HTMLTableCellElement>, 'wid
      * is never the only signal: keep the sign or the words.
      */
     tone?: TableCellTone;
+    /**
+     * Makes the cell's children a button in the cell's own text style at
+     * weight 600, underlined while hovered or focused: a row's one action,
+     * such as the name of a search result that picks it. Pair it with
+     * `TableRow pressable` so a press anywhere on the row does the same. A
+     * body cell's (`td`, or a row header `th` in `TableBody`; not for a
+     * column header in `TableHeader`), never with `sort`.
+     */
+    onPress?: () => void;
 };
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/TableCell.js

@@ -4,6 +4,15 @@ import { cx } from '../../class-names.js';
 import { assertTableCellTone, } from '../../css/css-table-ledger.js';
 import { assertTableColumnWidth, tableColumnWidthClass, } from './table-layout.js';
 const tableSorts = ['ascending', 'descending', 'none'];
+/** A cell's press is a function, and never on a sortable header. */
+function assertPress(onPress, sort) {
+    if (onPress === undefined)
+        return;
+    if (typeof onPress !== 'function')
+        throw new TypeError('TableCell onPress is a function');
+    if (sort !== undefined)
+        throw new TypeError('TableCell onPress is not for a sortable header');
+}
 /** `sort` and `onSort` come together, on a header cell, with a known value. */
 function assertSort(as, sort, onSort) {
     if (sort === undefined && onSort === undefined)
@@ -15,8 +24,9 @@ function assertSort(as, sort, onSort) {
     if (!tableSorts.includes(sort))
         throw new RangeError(`Unknown TableCell sort: ${String(sort)}`);
 }
-export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', children, className, numeric = false, onSort, sort, tone, truncate = false, width, ...rest }, ref) {
+export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', children, className, numeric = false, onPress, onSort, sort, tone, truncate = false, width, ...rest }, ref) {
     assertSort(as, sort, onSort);
+    assertPress(onPress, sort);
     assertTableColumnWidth(width);
     assertTableCellTone(tone);
     const Component = as;
@@ -25,5 +35,5 @@ export const TableCell = forwardRef(function TableCell({ align = 'start', as = '
         : align === 'end'
             ? 'sw-table-end'
             : undefined;
-    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : (children) }));
+    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : onPress ? (_jsx("button", { className: "sw-table-action", onClick: onPress, type: "button", children: children })) : (children) }));
 });

package/dist/components/table/TableRow.d.ts

@@ -18,6 +18,21 @@ export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
      * flex item, a direct child of `Inline`, is). Works with either variant.
      */
     struck?: boolean;
+    /**
+     * Makes the whole row a press target for its one action, such as a
+     * search result that is picked: the row's first link or button (a
+     * `TableCell onPress`, or a `Box as="a"`), so keep one control in the
+     * row. A plain pointer press anywhere else on the row activates that
+     * control, unless it is disabled; a press with a modifier key, on another
+     * control, or one that ends a text selection is left alone. The row takes
+     * the pointer cursor and the quiet fill while hovered, pressed, or while
+     * its action has keyboard focus. Keyboard and assistive technology use
+     * the action itself: the row is not a control and adds no tab stop.
+     * A consumer `onClick` runs once per press, not again for the click the
+     * row hands its action. Each click of a double click presses the action,
+     * as a native button's would, so keep the action safe to repeat.
+     */
+    pressable?: boolean;
 };
 export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
@@ -36,4 +51,19 @@ export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAtt
      * flex item, a direct child of `Inline`, is). Works with either variant.
      */
     struck?: boolean;
+    /**
+     * Makes the whole row a press target for its one action, such as a
+     * search result that is picked: the row's first link or button (a
+     * `TableCell onPress`, or a `Box as="a"`), so keep one control in the
+     * row. A plain pointer press anywhere else on the row activates that
+     * control, unless it is disabled; a press with a modifier key, on another
+     * control, or one that ends a text selection is left alone. The row takes
+     * the pointer cursor and the quiet fill while hovered, pressed, or while
+     * its action has keyboard focus. Keyboard and assistive technology use
+     * the action itself: the row is not a control and adds no tab stop.
+     * A consumer `onClick` runs once per press, not again for the click the
+     * row hands its action. Each click of a double click presses the action,
+     * as a native button's would, so keep the action safe to repeat.
+     */
+    pressable?: boolean;
 } & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/table/TableRow.js

@@ -1,8 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { assertTableRowVariant, } from '../../css/css-table-ledger.js';
-export const TableRow = forwardRef(function TableRow({ className, selected = false, struck = false, variant = 'default', ...rest }, ref) {
+import { rowPressAction } from './row-press.js';
+export const TableRow = forwardRef(function TableRow({ className, onClick, pressable = false, selected = false, struck = false, variant = 'default', ...rest }, ref) {
     assertTableRowVariant(variant);
-    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', struck && 'sw-table-row-struck', className), ...rest }));
+    // The click the row hands its action bubbles back to the row; it is
+    // the action's, so neither the row nor a consumer onClick takes it.
+    const forwarding = useRef(false);
+    const press = (event) => {
+        if (forwarding.current)
+            return;
+        onClick?.(event);
+        if (!pressable)
+            return;
+        const action = rowPressAction(event.currentTarget, event);
+        if (action === null)
+            return;
+        forwarding.current = true;
+        try {
+            action.click();
+        }
+        finally {
+            forwarding.current = false;
+        }
+    };
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', struck && 'sw-table-row-struck', pressable && 'sw-table-row-press', className), onClick: pressable || onClick ? press : undefined, ...rest }));
 });

package/dist/components/table/row-press.d.ts

@@ -0,0 +1,17 @@
+/** What `rowPressAction` reads of a click. */
+export type RowPress = {
+    button: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    defaultPrevented: boolean;
+    target: EventTarget | null;
+};
+/**
+ * The control a press on a pressable row activates, or none: a plain
+ * primary press (no modifier key, not already handled) that lands on the
+ * row but not on a control in it, and does not end a text selection, goes
+ * to the row's first link or button, unless that is disabled.
+ */
+export declare function rowPressAction(row: HTMLElement, press: RowPress): HTMLElement | null;

package/dist/components/table/row-press.js

@@ -0,0 +1,60 @@
+/**
+ * The controls a press on a pressable row leaves alone: a press on one of
+ * them is that control's own, never the row's.
+ */
+const controlSelector = [
+    'a[href]',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="switch"]',
+    '[role="menuitem"]',
+    '[role="option"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+/** The row's action: its first link or button. */
+const actionSelector = 'a[href], button';
+function isDisabled(action) {
+    return ((action instanceof HTMLButtonElement && action.disabled) ||
+        action.getAttribute('aria-disabled') === 'true');
+}
+/** A selection the press ended, such as text dragged over in the row. */
+function endsSelection(row) {
+    const selection = row.ownerDocument.getSelection();
+    if (selection === null || selection.isCollapsed)
+        return false;
+    for (let index = 0; index < selection.rangeCount; index += 1)
+        if (selection.getRangeAt(index).intersectsNode(row))
+            return true;
+    return false;
+}
+/**
+ * The control a press on a pressable row activates, or none: a plain
+ * primary press (no modifier key, not already handled) that lands on the
+ * row but not on a control in it, and does not end a text selection, goes
+ * to the row's first link or button, unless that is disabled.
+ */
+export function rowPressAction(row, press) {
+    if (press.defaultPrevented || press.button !== 0)
+        return null;
+    if (press.altKey || press.ctrlKey || press.metaKey || press.shiftKey)
+        return null;
+    if (!(press.target instanceof Element) || !row.contains(press.target))
+        return null;
+    const control = press.target.closest(controlSelector);
+    if (control !== null && control !== row && row.contains(control))
+        return null;
+    if (endsSelection(row))
+        return null;
+    const action = row.querySelector(actionSelector);
+    if (action === null || isDisabled(action))
+        return null;
+    return action;
+}

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-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/css-table-press.d.ts

@@ -0,0 +1,2 @@
+export declare function cssTablePressClasses(): string;
+export declare function tablePressClassCatalog(): string[];

package/dist/css/css-table-press.js

@@ -0,0 +1,87 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { quietFill } from './quiet-fill.js';
+const row = '.sw-table-row-press';
+const action = '.sw-table-action';
+/*
+ * A pressable row: the pointer cursor over all of it, and the quiet fill
+ * on its cells while it is hovered (on a pointer that hovers), pressed, or
+ * while its action has keyboard focus, so a keyboard user sees the row the
+ * focused name belongs to. The fill sits under the cells' text, so text,
+ * muted text and toned figures keep their contrast as on any quiet-filled
+ * row (an open menu's). Its action is underlined with it, so the row reads
+ * as that one action. Forced colours drop fills, so the row is outlined in
+ * the system highlight instead.
+ */
+function pressableRowRules() {
+    return `${row} {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  ${row}:hover > :is(td, th) {
+    background: ${quietFill};
+  }
+
+  ${row}:hover ${action} {
+    text-decoration-line: underline;
+  }
+}
+
+${row}:active > :is(td, th),
+${row}:has(:focus-visible) > :is(td, th) {
+  background: ${quietFill};
+}
+
+@media (forced-colors: active) {
+  ${row}:hover,
+  ${row}:has(:focus-visible) {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+}`;
+}
+/*
+ * A cell's action keeps the cell's own text (its colour, size and
+ * alignment) at weight 600, the label weight, as a quiet link does: the
+ * weight, not a colour, sets the name apart from the row's other text.
+ * Hover and keyboard focus underline it; focus draws the accent ring.
+ * Forced colours paint it as any button's text.
+ */
+function actionRules() {
+    return `${action} {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: ${typographyVariants.label.fontWeight};
+  letter-spacing: inherit;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+
+${action}:hover,
+${action}:focus-visible {
+  text-decoration-line: underline;
+}
+
+${action}:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+@media (forced-colors: active) {
+  ${action} { color: ButtonText; }
+}`;
+}
+export function cssTablePressClasses() {
+    return `${pressableRowRules()}
+
+${actionRules()}`;
+}
+export function tablePressClassCatalog() {
+    return ['sw-table-row-press', 'sw-table-action'];
+}

package/dist/css/css-table.js

@@ -3,6 +3,7 @@ import { scrollRegionRules } from './css-scroll-region.js';
 import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-layout.js';
 import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
+import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
@@ -95,6 +96,8 @@ ${cssTableLedgerClasses()}
 
 ${cssTableFooterClasses()}
 
+${cssTablePressClasses()}
+
 ${selectedRowRules()}`;
 }
 export function tableClassCatalog() {
@@ -111,5 +114,6 @@ export function tableClassCatalog() {
         ...tableSortClassCatalog(),
         ...tableLedgerClassCatalog(),
         ...tableFooterClassCatalog(),
+        ...tablePressClassCatalog(),
     ];
 }

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

@@ -1841,6 +1841,62 @@ body {
   .sw-table-sticky thead th { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
+.sw-table-row-press {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .sw-table-row-press:hover > :is(td, th) {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  }
+
+  .sw-table-row-press:hover .sw-table-action {
+    text-decoration-line: underline;
+  }
+}
+
+.sw-table-row-press:active > :is(td, th),
+.sw-table-row-press:has(:focus-visible) > :is(td, th) {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+@media (forced-colors: active) {
+  .sw-table-row-press:hover,
+  .sw-table-row-press:has(:focus-visible) {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+}
+
+.sw-table-action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 600;
+  letter-spacing: inherit;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+
+.sw-table-action:hover,
+.sw-table-action:focus-visible {
+  text-decoration-line: underline;
+}
+
+.sw-table-action:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+@media (forced-colors: active) {
+  .sw-table-action { color: ButtonText; }
+}
+
 .sw-table-row-selected > :first-child {
   position: relative;
 }
@@ -5321,6 +5377,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.33.0",
+  "version": "1.34.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",