@scalewing/react 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @scalewing/react
 
+## 1.23.0
+
+### Minor Changes
+
+- f51d196: A `Button` inside `Nav` is at least 44 × 44 px on a coarse pointer (`docs/requests/teisoro-nav.md`, Teisoro F-006-S11, UX-16), whatever its `size`, as `SectionNav` links, `CalendarButton` and the `ActionMenu` trigger already are; a fine pointer is unchanged. Only the minimum height and width grow, so a label beside its glyph keeps its line. No new classes, tokens or dependencies.
+- f51d196: `hideBelow` and `hideFrom` take `lg` (64rem) (`docs/requests/teisoro-responsive-visibility.md`, 2026-10-09 follow-up, Teisoro F-006-S11, SET-3 and UX-16), for content that fits only from a laptop up, such as a row of labelled destinations a tablet shows as glyphs. New generated classes `sw-hide-below-lg` and `sw-hide-from-lg`; new exported types `VisibilityBreakpoint` (`'md' | 'lg'`) and `BreakpointDirection` (`'from' | 'below'`). The layout props keep the one layout breakpoint, `md`. `breakpointQuery(direction, breakpoint)` is now exported: the media query a hide class uses, so an app's `matchMedia` follows the same width; an unknown direction or breakpoint throws a `RangeError`. An unknown `hideBelow` or `hideFrom` now throws a `RangeError` (it produced a class with no rule). No new tokens and no new dependencies.
+
 ## 1.22.0
 
 ### Minor Changes

package/README.md

@@ -49,7 +49,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Box` `border` draws a hairline in the `border` color token: `border` (or `border={true}`) is solid, and `border="dashed"` is dashed (the generated `sw-border` and `sw-border-dashed` classes; a `style` you pass still wins), for a space to fill in by hand such as a blank on a printed form. It does not make the box look or act like an input. Every `Box`-based component takes it.
 
-`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. 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. `Select` is a labeled listbox menu when the open list must match the canvas.
+`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. `Select` is a labeled listbox menu when the open list must match the canvas.
 
 `Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby` and appends a stable ID for the hint, or for the error, which replaces the hint on screen while it is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The error sits in a polite live region (`aria-live="polite"`) that is always rendered, empty while there is no error, so an error that appears while the person types, or after a submit, is announced once, politely, when its text is swapped in; it is never `role="alert"`, so a submit that finds several errors does not fire several assertive alerts at once. Empty, the region takes no room in the layout. The consumer owns validation and localized messages, and after a refused submit it moves focus to the first invalid control (or to one form-level summary). `Checkbox`, `RadioGroup` and `DateField` expose their `error` the same way. `invalid` marks the control invalid the same way (`aria-invalid` and the danger border, `Mark` in forced colors) without a message of its own, for fields whose one error is shown elsewhere, such as a count that adds up to nothing under a group of count fields: point each control's `aria-describedby` at that message so it is read with the field. The field's own polite region stays empty and its `description` stays on screen; `error` implies `invalid`. Passing `invalid`, even `invalid={false}` but not `invalid={undefined}`, needs one native control child and throws a `TypeError` on the first render otherwise, so a form learns it while the fields are valid, not on its first failed submit. `error` keeps its rule: it needs the native control only while it holds a message. `invalid` is `Field`'s only: `DateField`, `Select` and the other controls with `error` do not have it yet.
 
@@ -244,6 +244,8 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 `Tabs` is the strip for the sections of one page (`role="tablist"`, one `role="tab"` button per item; arrow keys, Home and End move and select), and `TabPanel` is each section's content, hidden while another tab is current. `sticky` (default `false`) keeps the strip at the top of the viewport, under `env(safe-area-inset-top)`, while a long panel scrolls under it, on the same layer as a sticky `AppHeader` (so a page uses one or the other at the top edge). The stuck strip is a full-bleed band of the page canvas, not a glass card: the canvas color at nine parts in ten over the glass blur, with the strip's hairline under it, solid canvas under Reduce Transparency and in forced colors. A sticky element only sticks within its parent: make the strip a direct child of the long page container that also holds the panels, not of a padded `Box` round the strip alone, and keep `overflow` visible on its ancestors. Put the page's side gutter on the title and the panels instead: each tab's inline padding is the md control's 16 px (spacing step 4), so the first label lines up with a `space-4` gutter when the strip runs edge to edge. A strip whose labels do not fit scrolls sideways, and while labels are scrolled out past an inline edge that edge draws the same inset shade as a wide `Table` (none in forced colors), so a phone shows there are more tabs.
 
+`Nav` is a labelled `nav` of a workspace's destinations, links or buttons one token gap apart. A `Button` inside it is at least 44 × 44 px on a coarse pointer, whatever its `size`, so a compact row of destinations is still a touch target on a phone or a tablet.
+
 `SectionNav` is the navigation between the sections of one area, such as a portal's pages: a labelled `nav` (`aria-label` or `aria-labelledby`) of links from `items` (`{ id, label, href, current?, icon? }`), quieter than a workspace's `Nav`. `current` is `'page'`, `'location'` (a page inside that section, such as a detail page under its list) or a boolean, written as `aria-current`; the current item is in the text color over an accent underline, or, from `verticalFrom` (a breakpoint) up, where the items stack as a side list, a bar at its start. `icon` is a decorative glyph before the label. `onNavigate` takes a plain press after preventing the browser's navigation, for a client router; a press with a modifier key or the middle button keeps the browser's behavior, and without `onNavigate` the links carry no handler, so a server component can render the nav. A coarse pointer gets 44 px targets. Empty or duplicate ids, empty labels and an unknown `verticalFrom` throw a `RangeError`. Use `Tabs` for panels on one page.
 
 ```tsx

package/dist/css/breakpoints.d.ts

@@ -1,8 +1,29 @@
+/** The layout breakpoint: a phone below it, a wider screen from it. */
 export declare const breakpointScale: {
     readonly md: 48;
 };
 export type Breakpoint = keyof typeof breakpointScale;
 export declare const breakpoints: Breakpoint[];
-export type HideDirection = 'from' | 'below';
-export declare function hideClass(direction: HideDirection, breakpoint: Breakpoint): string;
-export declare function breakpointQuery(direction: HideDirection, breakpoint: Breakpoint): string;
+/**
+ * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
+ * for content that fits only from a laptop up, such as a row of labelled
+ * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
+ */
+export declare const visibilityBreakpointScale: {
+    readonly lg: 64;
+    readonly md: 48;
+};
+export type VisibilityBreakpoint = keyof typeof visibilityBreakpointScale;
+export declare const visibilityBreakpoints: VisibilityBreakpoint[];
+/** Which side of a breakpoint: `from` it and wider, or `below` it. */
+export type BreakpointDirection = 'from' | 'below';
+export declare const breakpointDirections: readonly BreakpointDirection[];
+export declare function hideClass(direction: BreakpointDirection, breakpoint: VisibilityBreakpoint): string;
+/**
+ * The media query `hideBelow` (`'below'`) or `hideFrom` (`'from'`) uses at a
+ * breakpoint, such as `not all and (min-width: 64rem)` below `lg`, for an app
+ * that must follow the same width in script (a tooltip that names a glyph
+ * only while its label is hidden).
+ */
+export declare function breakpointQuery(direction: BreakpointDirection, breakpoint: VisibilityBreakpoint): string;

package/dist/css/breakpoints.js

@@ -1,11 +1,37 @@
+/** The layout breakpoint: a phone below it, a wider screen from it. */
 export const breakpointScale = {
     md: 48,
 };
 export const breakpoints = Object.keys(breakpointScale);
+/**
+ * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
+ * for content that fits only from a laptop up, such as a row of labelled
+ * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
+ */
+export const visibilityBreakpointScale = {
+    ...breakpointScale,
+    lg: 64,
+};
+export const visibilityBreakpoints = Object.keys(visibilityBreakpointScale);
+export const breakpointDirections = [
+    'from',
+    'below',
+];
 export function hideClass(direction, breakpoint) {
     return `sw-hide-${direction}-${breakpoint}`;
 }
+/**
+ * The media query `hideBelow` (`'below'`) or `hideFrom` (`'from'`) uses at a
+ * breakpoint, such as `not all and (min-width: 64rem)` below `lg`, for an app
+ * that must follow the same width in script (a tooltip that names a glyph
+ * only while its label is hidden).
+ */
 export function breakpointQuery(direction, breakpoint) {
-    const minWidth = `(min-width: ${breakpointScale[breakpoint]}rem)`;
+    if (!breakpointDirections.includes(direction))
+        throw new RangeError(`direction must be one of ${breakpointDirections.join(', ')}`);
+    if (!visibilityBreakpoints.includes(breakpoint))
+        throw new RangeError(`breakpoint must be one of ${visibilityBreakpoints.join(', ')}`);
+    const minWidth = `(min-width: ${visibilityBreakpointScale[breakpoint]}rem)`;
     return direction === 'from' ? minWidth : `not all and ${minWidth}`;
 }

package/dist/css/css-chrome.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssChromeClasses() {
@@ -36,6 +37,18 @@ export function cssChromeClasses() {
   color: var(--sw-color-text);
 }
 
+/*
+ * A button in a navigation is a destination: on a coarse pointer it grows to
+ * the 44 px touch target both ways, whatever its size, as a section link
+ * and a calendar button do. A label beside its glyph keeps its line.
+ */
+@media ${coarsePointerQuery} {
+  .sw-nav .sw-button {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: ${caption.fontSize}px;
   letter-spacing: ${caption.letterSpacing}px;

package/dist/css/css-responsive.js

@@ -1,12 +1,11 @@
-import { breakpointQuery, breakpoints, hideClass, } from './breakpoints.js';
-const directions = ['from', 'below'];
+import { breakpointDirections, breakpointQuery, hideClass, visibilityBreakpoints, } from './breakpoints.js';
 export function cssResponsiveClasses() {
-    return breakpoints
-        .flatMap((breakpoint) => directions.map((direction) => `@media ${breakpointQuery(direction, breakpoint)} {
+    return visibilityBreakpoints
+        .flatMap((breakpoint) => breakpointDirections.map((direction) => `@media ${breakpointQuery(direction, breakpoint)} {
   .${hideClass(direction, breakpoint)} { display: none; }
 }`))
         .join('\n\n');
 }
 export function responsiveClassCatalog() {
-    return breakpoints.flatMap((breakpoint) => directions.map((direction) => hideClass(direction, breakpoint)));
+    return visibilityBreakpoints.flatMap((breakpoint) => breakpointDirections.map((direction) => hideClass(direction, breakpoint)));
 }

package/dist/index.d.ts

@@ -37,7 +37,8 @@ export { Text, type TextAlign, type TextElement, type TextProps, } from './compo
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
-export type { Breakpoint } from './css/breakpoints.js';
+export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
+export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { Grid } from './components/Grid.js';

package/dist/index.js

@@ -32,6 +32,7 @@ export { Table, TableBody, TableCell, TableHeader, TableRow, } from './component
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
+export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { Grid } from './components/Grid.js';
 export { DenominationGrid } from './components/DenominationGrid.js';

package/dist/styles.css

@@ -2041,6 +2041,18 @@ body {
   color: var(--sw-color-text);
 }
 
+/*
+ * A button in a navigation is a destination: on a coarse pointer it grows to
+ * the 44 px touch target both ways, whatever its size, as a section link
+ * and a calendar button do. A label beside its glyph keeps its line.
+ */
+@media (pointer: coarse) {
+  .sw-nav .sw-button {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: 13px;
   letter-spacing: -0.08px;
@@ -3873,6 +3885,14 @@ body {
   .sw-hide-below-md { display: none; }
 }
 
+@media (min-width: 64rem) {
+  .sw-hide-from-lg { display: none; }
+}
+
+@media not all and (min-width: 64rem) {
+  .sw-hide-below-lg { display: none; }
+}
+
 .sw-border { border: 1px solid var(--sw-color-border); }
 .sw-border-dashed { border: 1px dashed var(--sw-color-border); }
 

package/dist/visibility-classes.d.ts

@@ -1,6 +1,6 @@
-import { type Breakpoint } from './css/breakpoints.js';
+import { type VisibilityBreakpoint } from './css/breakpoints.js';
 export type VisibilityProps = {
-    hideBelow?: Breakpoint;
-    hideFrom?: Breakpoint;
+    hideBelow?: VisibilityBreakpoint;
+    hideFrom?: VisibilityBreakpoint;
 };
 export declare function visibilityClassNames({ hideBelow, hideFrom, }: VisibilityProps): string[];

package/dist/visibility-classes.js

@@ -1,5 +1,11 @@
-import { hideClass } from './css/breakpoints.js';
+import { hideClass, visibilityBreakpoints, } from './css/breakpoints.js';
+function assertBreakpoint(prop, breakpoint) {
+    if (breakpoint && !visibilityBreakpoints.includes(breakpoint))
+        throw new RangeError(`${prop} must be one of ${visibilityBreakpoints.join(', ')}`);
+}
 export function visibilityClassNames({ hideBelow, hideFrom, }) {
+    assertBreakpoint('hideBelow', hideBelow);
+    assertBreakpoint('hideFrom', hideFrom);
     return [
         ...(hideBelow ? [hideClass('below', hideBelow)] : []),
         ...(hideFrom ? [hideClass('from', hideFrom)] : []),

package/package.json

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