@scalewing/react 1.22.0 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalewing/react
 
+## 1.24.0
+
+### Minor Changes
+
+- e6ed0d6: `Field` `changed` now also tints the control's fill (`docs/requests/teisoro-field-validation.md`, 2026-10-09 follow-up, Teisoro F-006-S11 task 1890), so a changed field no longer reads as the focused one: beside the accent border it keeps, the native control or the adorned frame takes the accent at 12 % as a background image over its own fill, which focus never draws. The value keeps 4.5:1 or more on the tint in every palette and scheme (6.74:1 at the lowest); the tint is on the text controls and select only (not a range, color or file input); while a placeholder shows the fill stays plain; on the tint an adorned field's prefix and suffix take the text color; a select keeps its chevron above it, placed for its size (`xs` included) by a private `--sw-select-chevron-inset` the select rule sets; and forced colors drop it and keep the `Highlight` border. No API change: same prop, same `sw-field-changed` class, no new tokens or dependencies. A consumer that layered its own background image on a changed control (none should: Scalewing owns the canvas) would now see it replaced.
+
+  `BarChartItem` takes an optional `tone` (`docs/requests/teisoro-bar-chart.md`, 2026-10-09 follow-up, Teisoro F-006-S11 task 1890): `'accent'`, `'success'`, `'warning'` or `'danger'` (new exported type `BarChartTone` and list `barChartTones`) colors a bar by what it means in place of its sign's default, such as a diverging chart's overage in warning and shortage in danger. New generated classes `sw-bar-chart-fill-accent`, `sw-bar-chart-fill-success`, `sw-bar-chart-fill-warning` and `sw-bar-chart-fill-danger`; a toned negative bar keeps `sw-bar-chart-fill-negative` and its diverging shape. Without a tone a chart is unchanged. An unknown tone throws a `RangeError`. Forced colors now draw every bar in `CanvasText`: a token fill was painted as the canvas there, so bars were invisible on their tracks. No new tokens and no new dependencies.
+
+## 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,11 +49,11 @@ 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.
 
-`Field` `changed` marks a value the person changed from a saved one, such as a field in a correction: the control's border, or an adorned field's frame, takes the accent color a hairline thicker (an inset shadow, so nothing moves; `Highlight` in forced colors). It is a cue beside the words, so say what the value was in `description`; it sets no ARIA state, and `invalid` and `error` win over it. Like `invalid`, passing it, even `false` but not `undefined`, needs one native control child from the first render (a `TypeError` otherwise).
+`Field` `changed` marks a value the person changed from a saved one, such as a field in a correction: the control's border, or an adorned field's frame, takes the accent color a hairline thicker (an inset shadow, so nothing moves; `Highlight` in forced colors), and its fill takes a 12 % accent tint over its own background, so a changed field reads apart from the focused one, whose ring never tints. The value keeps 4.5:1 or more on the tint in every palette; the tint is on text controls and selects (not a range, color or file input), a select's chevron stays where its size puts it, while a placeholder shows the fill stays plain, on the tint an adorned field's prefix and suffix take the text color, and forced colors drop the tint. It is a cue beside the words, so say what the value was in `description`; it sets no ARIA state, and `invalid` and `error` win over it. Like `invalid`, passing it, even `false` but not `undefined`, needs one native control child from the first render (a `TypeError` otherwise).
 
 ```tsx
 <Field invalid={countIsZero} label="$1 bills">
@@ -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
@@ -283,7 +285,7 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 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`.
 
-`BarChart` `formatValue` writes the axis's values and each value without its own `valueLabel`, such as a currency. `diverging` puts zero in the middle of each track behind a hairline: a positive bar grows toward the inline end and a negative one toward the start, on one scale, and the axis reads minus the maximum, zero and the maximum. Without it every bar grows from the start.
+`BarChart` `formatValue` writes the axis's values and each value without its own `valueLabel`, such as a currency. `diverging` puts zero in the middle of each track behind a hairline: a positive bar grows toward the inline end and a negative one toward the start, on one scale, and the axis reads minus the maximum, zero and the maximum. Without it every bar grows from the start. An item's `tone` (`BarChartTone`: `'accent'`, `'success'`, `'warning'` or `'danger'`, listed in the exported `barChartTones`) colors its bar by what it means in place of its sign's default (the accent, or danger for a negative value), such as a diverging chart's overage in `'warning'` and shortage in `'danger'`; a toned bar keeps its sign's place, every tone keeps 3:1 against the track, and an unknown tone throws a `RangeError`. Forced colors draw every bar in the system text color, so the value and its side of zero carry the meaning there.
 
 `Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.
 

package/dist/components/BarChart.d.ts

@@ -1,8 +1,19 @@
 import { type HTMLAttributes } from 'react';
+import { type BarChartTone, barChartTones } from '../css/css-chart.js';
+export type { BarChartTone };
+export { barChartTones };
 export type BarChartItem = {
     label: string;
     value: number;
     valueLabel?: string;
+    /**
+     * Colors the bar by what it means, in place of its sign's default (the
+     * accent, or danger for a negative value): such as `'warning'` for an
+     * overage and `'danger'` for a shortage. The color is a cue beside the
+     * value and its label, never the only sign of the meaning. An unknown tone
+     * throws a `RangeError`.
+     */
+    tone?: BarChartTone;
 };
 export type BarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     'aria-label': string;

package/dist/components/BarChart.js

@@ -2,12 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { barChartFillRatio, barChartScaleMax, formatBarChartValue, } from '@scalewing/tokens';
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
+import { barChartTones } from '../css/css-chart.js';
+export { barChartTones };
+/** The fill's classes: the sign's (which also shapes a diverging bar) and the tone's. */
+function barChartFillClassName(item) {
+    if (item.tone !== undefined && !barChartTones.includes(item.tone))
+        throw new RangeError(`BarChart item tone must be one of ${barChartTones.join(', ')}; received ${String(item.tone)}`);
+    return cx('sw-bar-chart-fill', item.value < 0 && 'sw-bar-chart-fill-negative', item.tone && `sw-bar-chart-fill-${item.tone}`);
+}
 export const BarChart = forwardRef(function BarChart({ 'aria-label': ariaLabel, className, diverging = false, formatValue = formatBarChartValue, items, max, style, ...rest }, ref) {
     const scaleMax = barChartScaleMax(items.map((item) => item.value), max);
     const axis = diverging ? [-scaleMax, 0, scaleMax] : [0, scaleMax];
     return (_jsxs("div", { ref: ref, className: cx('sw-bar-chart', diverging && 'sw-bar-chart-diverging', className), style: style, ...rest, children: [_jsx("ul", { "aria-label": ariaLabel, className: "sw-bar-chart-plot", children: items.map((item, index) => {
                     const ratio = barChartFillRatio(item.value, scaleMax);
-                    return (_jsxs("li", { className: "sw-bar-chart-row", children: [_jsx("span", { className: "sw-bar-chart-label", children: item.label }), _jsx("span", { className: "sw-bar-chart-track", children: _jsx("span", { className: cx('sw-bar-chart-fill', item.value < 0 && 'sw-bar-chart-fill-negative'), style: {
+                    return (_jsxs("li", { className: "sw-bar-chart-row", children: [_jsx("span", { className: "sw-bar-chart-label", children: item.label }), _jsx("span", { className: "sw-bar-chart-track", children: _jsx("span", { className: barChartFillClassName(item), style: {
                                         '--sw-bar-fill': ratio,
                                     } }) }), _jsx("span", { className: "sw-bar-chart-value", children: item.valueLabel ?? formatValue(item.value) })] }, `${item.label}-${index}`));
                 }) }), _jsxs("div", { "aria-hidden": "true", className: "sw-bar-chart-axis", children: [_jsx("span", {}), _jsx("span", { className: "sw-bar-chart-axis-track", children: axis.map((value) => (_jsx("span", { children: formatValue(value) }, value))) }), _jsx("span", {})] })] }));

package/dist/components/Field.d.ts

@@ -21,7 +21,10 @@ export type FieldProps = {
     /**
      * Marks a value the person changed from a saved one, such as a field in a
      * correction: the control's border (or an adorned frame's) in the accent
-     * color, thicker than the plain hairline. It is a cue, not the record:
+     * color, thicker than the plain hairline, and its fill tinted with 12 % of
+     * the accent, so a changed field reads apart from the focused one (focus
+     * draws a ring and never tints). The value keeps 4.5:1 on the tint; while
+     * a placeholder shows, the fill stays plain. It is a cue, not the record:
      * say what it was in `description` ("Was 25"). `invalid` and `error`
      * win. Like `invalid`, passing it, even `false` but not `undefined`,
      * requires one native control child from the first render.

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-chart.d.ts

@@ -1,2 +1,9 @@
+/**
+ * The meanings a bar's fill can take in place of its sign's default (the
+ * accent, or danger for a negative value), such as a diverging chart whose
+ * overage is a warning and whose shortage is danger.
+ */
+export declare const barChartTones: readonly ["accent", "success", "warning", "danger"];
+export type BarChartTone = (typeof barChartTones)[number];
 export declare function cssChartClasses(): string;
 export declare function chartClassCatalog(): string[];

package/dist/css/css-chart.js

@@ -1,6 +1,30 @@
 import { typographyVariants } from '@scalewing/tokens';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
+/**
+ * The meanings a bar's fill can take in place of its sign's default (the
+ * accent, or danger for a negative value), such as a diverging chart whose
+ * overage is a warning and whose shortage is danger.
+ */
+export const barChartTones = [
+    'accent',
+    'success',
+    'warning',
+    'danger',
+];
+/*
+ * A tone's rule follows the negative fill's, at the same specificity, so a
+ * toned negative bar keeps its diverging geometry and takes the tone's
+ * color. Each tone keeps 3:1 against the track in every palette and scheme
+ * (`chart.test.tsx`). Forced colors would paint a token fill as the
+ * canvas, so every fill, toned or not, is drawn in the system text color
+ * after the tones: the value and its sign carry the meaning there.
+ */
+function toneRules() {
+    return barChartTones
+        .map((tone) => `.sw-bar-chart-fill-${tone} { background: var(--sw-color-${tone}); }`)
+        .join('\n');
+}
 /*
  * A diverging chart puts zero in the middle of each track, marked by a
  * hairline: a positive bar starts there and grows toward the inline end, a
@@ -98,6 +122,8 @@ export function cssChartClasses() {
   background: var(--sw-color-danger);
 }
 
+${toneRules()}
+
 .sw-bar-chart-value {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
@@ -123,7 +149,11 @@ export function cssChartClasses() {
   justify-content: space-between;
 }
 
-${divergingRules()}`;
+${divergingRules()}
+
+@media (forced-colors: active) {
+  .sw-bar-chart-fill { background: CanvasText; }
+}`;
 }
 export function chartClassCatalog() {
     return [
@@ -135,6 +165,7 @@ export function chartClassCatalog() {
         'sw-bar-chart-track',
         'sw-bar-chart-fill',
         'sw-bar-chart-fill-negative',
+        ...barChartTones.map((tone) => `sw-bar-chart-fill-${tone}`),
         'sw-bar-chart-value',
         'sw-bar-chart-axis-track',
         'sw-bar-chart-diverging',

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;
@@ -44,10 +57,9 @@ export function cssChromeClasses() {
   padding-inline: var(--sw-control-xs-padding-inline);
 }
 
+/* The chevron's layers place themselves from this inset (selectChevronLayers). */
 .sw-field-xs select {
-  background-position:
-    calc(100% - var(--sw-space-3)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
+  --sw-select-chevron-inset: var(--sw-space-3);
   height: calc(var(--sw-control-xs-min-height) - 1px - 1px);
   min-height: 0;
   padding-inline-end: calc(

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

@@ -1,7 +1,21 @@
+/** The native controls that take typed text: the canvas's text controls. */
+export declare const typedInputs: string;
 /** The frame every native text control draws: fill, hairline border, radius. */
 export declare const controlSurface = "background-color: var(--sw-glass-fill);\n  border: 1px solid var(--sw-color-border);\n  border-radius: var(--sw-radius-sm);\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  padding-inline: var(--sw-control-md-padding-inline);";
 export declare const disabledControlSurface = "background-color: var(--sw-color-subtle);\n  border-style: dashed;\n  cursor: not-allowed;\n  opacity: 1;\n  -webkit-text-fill-color: currentColor;";
 export declare const disabledControlForcedColors = "border-color: GrayText;\n  color: GrayText;\n  -webkit-text-fill-color: GrayText;";
+/**
+ * A select's chevron: two muted triangles drawn as background layers, so a
+ * rule that adds a layer (a changed field's tint) lists them with it. Their
+ * distance from the end is `--sw-select-chevron-inset`, which the select
+ * rule sets per size (space 4, and space 3 in an `xs` field), so every rule
+ * that lists the layers places them for the size it is in.
+ */
+export declare const selectChevronLayers: {
+    readonly image: "linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),\n    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%)";
+    readonly position: "calc(100% - var(--sw-select-chevron-inset)) calc(50% - 1px),\n    calc(100% - calc(var(--sw-select-chevron-inset) - var(--sw-space-1))) calc(50% - 1px)";
+    readonly size: "var(--sw-space-1) var(--sw-space-1),\n    var(--sw-space-1) var(--sw-space-1)";
+};
 /** A script-only focus target in the canvas, at zero specificity. */
 export declare const focusTargetSelector = ":where([data-theme] [tabindex='-1']:focus-visible)";
 export declare function cssDocumentCanvas(): string;

package/dist/css/css-document.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 const body = typographyVariants.body;
-const typedInputs = [
+/** The native controls that take typed text: the canvas's text controls. */
+export const typedInputs = [
     "input[type='text']",
     "input[type='email']",
     "input[type='number']",
@@ -34,6 +35,21 @@ export const disabledControlSurface = `background-color: var(--sw-color-subtle);
 export const disabledControlForcedColors = `border-color: GrayText;
   color: GrayText;
   -webkit-text-fill-color: GrayText;`;
+/**
+ * A select's chevron: two muted triangles drawn as background layers, so a
+ * rule that adds a layer (a changed field's tint) lists them with it. Their
+ * distance from the end is `--sw-select-chevron-inset`, which the select
+ * rule sets per size (space 4, and space 3 in an `xs` field), so every rule
+ * that lists the layers places them for the size it is in.
+ */
+export const selectChevronLayers = {
+    image: `linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%)`,
+    position: `calc(100% - var(--sw-select-chevron-inset)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-select-chevron-inset) - var(--sw-space-1))) calc(50% - 1px)`,
+    size: `var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1)`,
+};
 /** A script-only focus target in the canvas, at zero specificity. */
 export const focusTargetSelector = ":where([data-theme] [tabindex='-1']:focus-visible)";
 export function cssDocumentCanvas() {
@@ -103,16 +119,14 @@ ${focusTargetSelector} {
 
 [data-theme] select {
   ${controlSurface}
+  --sw-select-chevron-inset: var(--sw-space-4);
   appearance: none;
   background-image:
-    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
-    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
+    ${selectChevronLayers.image};
   background-position:
-    calc(100% - var(--sw-space-4)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
+    ${selectChevronLayers.position};
   background-repeat: no-repeat;
-  background-size: var(--sw-space-1) var(--sw-space-1),
-    var(--sw-space-1) var(--sw-space-1);
+  background-size: ${selectChevronLayers.size};
   box-sizing: content-box;
   height: calc(var(--sw-control-md-min-height) - 1px - 1px);
   min-height: 0;

package/dist/css/css-field-changed.d.ts

@@ -0,0 +1,13 @@
+/**
+ * How much accent a changed control's fill takes: the share of the accent
+ * layered over the control's own background (the glass fill, or the subtle
+ * fill of a disabled control). The value keeps 4.5:1 or more on it in every
+ * palette and scheme (`field-changed.test.tsx`).
+ */
+export declare const changedTintStrength = 0.12;
+/**
+ * The tint as one background image, so it lies over the control's background
+ * color instead of replacing it.
+ */
+export declare const changedTintLayer = "linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent))";
+export declare function cssFieldChangedClasses(): string;

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

@@ -0,0 +1,64 @@
+import { selectChevronLayers, typedInputs } from './css-document.js';
+/**
+ * How much accent a changed control's fill takes: the share of the accent
+ * layered over the control's own background (the glass fill, or the subtle
+ * fill of a disabled control). The value keeps 4.5:1 or more on it in every
+ * palette and scheme (`field-changed.test.tsx`).
+ */
+export const changedTintStrength = 0.12;
+const tintColor = `color-mix(in srgb, var(--sw-color-accent) ${changedTintStrength * 100}%, transparent)`;
+/**
+ * The tint as one background image, so it lies over the control's background
+ * color instead of replacing it.
+ */
+export const changedTintLayer = `linear-gradient(${tintColor}, ${tintColor})`;
+/** An adorned frame that holds a value (no placeholder showing). */
+const tintedFrame = '.sw-field-changed .sw-field-adorned:not(:has(> input:placeholder-shown))';
+/*
+ * A changed value: the accent border, a hairline thicker through an inset
+ * shadow so nothing moves, and the accent tint over the fill, on the control
+ * or on an adorned frame (whose input is transparent and draws no border, so
+ * the tint shows once). Focus draws a ring and never tints, so "changed" and
+ * "where I am" read apart. While a placeholder shows there is no value to
+ * mark and the fill stays plain, so the muted placeholder keeps its contrast;
+ * on the tint, an adorned frame's prefix and suffix take the text color. The
+ * tint is for the text controls and select (not a range, color or file
+ * input). A select lists its chevron above the tint, placed for its size by
+ * `--sw-select-chevron-inset`. Forced colors drop the tint and the shadow
+ * and keep the Highlight border.
+ */
+export function cssFieldChangedClasses() {
+    return `[data-theme] .sw-field-changed > :is(input, select, textarea),
+.sw-field-changed .sw-field-adorned {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+[data-theme] .sw-field-changed > :is(${typedInputs}):not(:placeholder-shown),
+${tintedFrame} {
+  background-image: ${changedTintLayer};
+}
+
+[data-theme] .sw-field-changed > select {
+  background-image:
+    ${selectChevronLayers.image},
+    ${changedTintLayer};
+  background-position:
+    ${selectChevronLayers.position},
+    0 0;
+  background-size: ${selectChevronLayers.size},
+    100% 100%;
+}
+
+${tintedFrame} > :is(.sw-field-prefix, .sw-field-suffix) {
+  color: var(--sw-color-text);
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-field-changed > :is(input, select, textarea),
+  .sw-field-changed .sw-field-adorned { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  [data-theme] .sw-field-changed > :is(${typedInputs}):not(:placeholder-shown),
+  ${tintedFrame} { background-image: none; }
+  [data-theme] .sw-field-changed > select { background-image: ${selectChevronLayers.image}; }
+}`;
+}

package/dist/css/css-field.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
+import { cssFieldChangedClasses } from './css-field-changed.js';
 const caption = typographyVariants.caption;
 /*
  * A prefix or suffix sits inside the control frame: the wrapper draws the
@@ -80,24 +81,13 @@ export function cssFieldClasses() {
   border-color: var(--sw-color-danger);
 }
 
-/*
- * A changed value: the accent border, a hairline thicker through an inset
- * shadow so nothing moves, on the control or on an adorned frame (whose
- * input draws no border of its own).
- */
-[data-theme] .sw-field-changed > :is(input, select, textarea),
-.sw-field-changed .sw-field-adorned {
-  border-color: var(--sw-color-accent);
-  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
-}
-
 ${adornmentRules()}
 
+${cssFieldChangedClasses()}
+
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
-  [data-theme] .sw-field-changed > :is(input, select, textarea),
-  .sw-field-changed .sw-field-adorned { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
   .sw-field-adorned:has(> input:disabled) {
     ${disabledControlForcedColors}

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

@@ -12,7 +12,7 @@ export { Tooltip, type TooltipProps, type TooltipRelationship, } from './compone
 export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
 export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
-export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
+export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
 export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
@@ -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

@@ -11,7 +11,7 @@ export { Tooltip, } from './components/Tooltip.js';
 export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
-export { BarChart, } from './components/BarChart.js';
+export { BarChart, barChartTones, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box, } from './components/Box.js';
 export { ButtonGroup, } from './components/ButtonGroup.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

@@ -644,13 +644,14 @@ body {
   font-family: inherit;
   font-size: inherit;
   padding-inline: var(--sw-control-md-padding-inline);
+  --sw-select-chevron-inset: var(--sw-space-4);
   appearance: none;
   background-image:
     linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
     linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
   background-position:
-    calc(100% - var(--sw-space-4)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
+    calc(100% - var(--sw-select-chevron-inset)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-select-chevron-inset) - var(--sw-space-1))) calc(50% - 1px);
   background-repeat: no-repeat;
   background-size: var(--sw-space-1) var(--sw-space-1),
     var(--sw-space-1) var(--sw-space-1);
@@ -1951,6 +1952,11 @@ body {
   background: var(--sw-color-danger);
 }
 
+.sw-bar-chart-fill-accent { background: var(--sw-color-accent); }
+.sw-bar-chart-fill-success { background: var(--sw-color-success); }
+.sw-bar-chart-fill-warning { background: var(--sw-color-warning); }
+.sw-bar-chart-fill-danger { background: var(--sw-color-danger); }
+
 .sw-bar-chart-value {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
@@ -2008,6 +2014,10 @@ body {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }
 
+@media (forced-colors: active) {
+  .sw-bar-chart-fill { background: CanvasText; }
+}
+
 .sw-app-header {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2041,6 +2051,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;
@@ -2049,10 +2071,9 @@ body {
   padding-inline: var(--sw-control-xs-padding-inline);
 }
 
+/* The chevron's layers place themselves from this inset (selectChevronLayers). */
 .sw-field-xs select {
-  background-position:
-    calc(100% - var(--sw-space-3)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
+  --sw-select-chevron-inset: var(--sw-space-3);
   height: calc(var(--sw-control-xs-min-height) - 1px - 1px);
   min-height: 0;
   padding-inline-end: calc(
@@ -3599,17 +3620,6 @@ body {
   border-color: var(--sw-color-danger);
 }
 
-/*
- * A changed value: the accent border, a hairline thicker through an inset
- * shadow so nothing moves, on the control or on an adorned frame (whose
- * input draws no border of its own).
- */
-[data-theme] .sw-field-changed > :is(input, select, textarea),
-.sw-field-changed .sw-field-adorned {
-  border-color: var(--sw-color-accent);
-  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
-}
-
 .sw-field-adorned {
   background-color: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
@@ -3673,11 +3683,47 @@ body {
 
 [data-theme] .sw-field-adorned > input:disabled { background: transparent; }
 
+[data-theme] .sw-field-changed > :is(input, select, textarea),
+.sw-field-changed .sw-field-adorned {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+[data-theme] .sw-field-changed > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):not(:placeholder-shown),
+.sw-field-changed .sw-field-adorned:not(:has(> input:placeholder-shown)) {
+  background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent));
+}
+
+[data-theme] .sw-field-changed > select {
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%),
+    linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent));
+  background-position:
+    calc(100% - var(--sw-select-chevron-inset)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-select-chevron-inset) - var(--sw-space-1))) calc(50% - 1px),
+    0 0;
+  background-size: var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1),
+    100% 100%;
+}
+
+.sw-field-changed .sw-field-adorned:not(:has(> input:placeholder-shown)) > :is(.sw-field-prefix, .sw-field-suffix) {
+  color: var(--sw-color-text);
+}
+
 @media (forced-colors: active) {
-  [data-theme] .sw-field-invalid :is(input, select, textarea),
-  .sw-field-invalid .sw-field-adorned { border-color: Mark; }
   [data-theme] .sw-field-changed > :is(input, select, textarea),
   .sw-field-changed .sw-field-adorned { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  [data-theme] .sw-field-changed > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):not(:placeholder-shown),
+  .sw-field-changed .sw-field-adorned:not(:has(> input:placeholder-shown)) { background-image: none; }
+  [data-theme] .sw-field-changed > select { background-image: linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%); }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-field-invalid :is(input, select, textarea),
+  .sw-field-invalid .sw-field-adorned { border-color: Mark; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
   .sw-field-adorned:has(> input:disabled) {
     border-color: GrayText;
@@ -3873,6 +3919,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.24.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",