@scalewing/react 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalewing/react
 
+## 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/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/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/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%;
 }
 

package/package.json

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