@scalewing/react 1.23.0 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @scalewing/react
 
+## 1.25.0
+
+### Minor Changes
+
+- 34131f3: `InfoTip` and `InfoTipProps`: a toggletip, a ghost icon-only `Button` whose only job is to show its tip (`docs/requests/teisoro-tooltip.md`, 2026-10-09 follow-up, Teisoro F-006-S11). Since 1.22.0 a tap on a `Button` presses it and never opens its `Tooltip`, so an ⓘ beside a figure could not show its help on a touch screen.
+
+  - `label` (the button's name), `content` (the tip, plain text), `children` (the decorative glyph), `size` (a Button size; `md` by default, and 44 px on a coarse pointer at every size).
+  - Hover and a visible focus show the tip as `Tooltip` does. A press (a tap, a click, Enter or Space) shows it and keeps it shown when the pointer leaves; the next press, Escape, blur or a press outside hides it.
+  - The tip is the button's description (`aria-describedby`). A press also puts it in a visually hidden polite live region (`role="status"`), so a screen reader user who presses the button hears it. Every InfoTip renders that `role="status"` element, empty until a press, and while a press holds the tip open its text is in the page twice (the bubble and the region): a test that finds a `status` or the tip's text should scope its query.
+  - `type="button"`: it never submits a form. An empty `label` or `content` throws a `RangeError`.
+  - New generated class `sw-info-tip` (the square icon button, shared with `sw-calendar-button`, whose rules are equivalent: same declarations and specificity, one block reordered).
+
+  `Tooltip`'s behavior is unchanged for every other trigger: a tap on a control still does what the control does and leaves its tooltip closed. No new tokens or dependencies.
+
+## 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

package/README.md

@@ -20,6 +20,7 @@ import {
   Spinner,
   Progress,
   Tooltip,
+  InfoTip,
   Separator,
   DenominationGrid,
   FilterChips,
@@ -53,7 +54,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `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">
@@ -285,13 +286,27 @@ 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.
 
 `Progress` shows a known value between zero and a positive maximum. It uses native progressbar semantics and displays the value and maximum beside the localized label. Invalid bounds throw instead of silently clamping. Optional `tone` is `accent`, `success`, or `danger`. `showCount={false}` hides the visible `value / max` count when the page shows its own count caption, so the count appears once; the progress bar still exposes its value and maximum.
 
-`Tooltip` adds supplementary plain-text help to one labelled, focusable trigger, or names an icon-only one (`relationship="label"`, below). Supply localized `content` and an existing trigger element; by default it has its own accessible name. It opens on hover or on a visible focus (`:focus-visible`: the keyboard, not the focus a click or a tap gives), closes on pointer leave, blur, Escape, or outside touch, and a tap toggles it only on a trigger that does nothing else on a tap, such as a focusable badge; a tap on a control (a button, a link, a form control or its label, an editable region, an element with a widget role, or anything inside one) does what the control does. The bubble is placed beside its trigger on the top layer while it shows and stays a `space-2` inset inside the screen. Keep required instructions visible outside the tooltip. `disabled` turns the tooltip off, not its trigger: the trigger stays mounted, enabled and focusable, and there is no tooltip, no `aria-describedby` from it, and Escape is left to the page. Use it when what the tooltip says is visible at some widths, such as text shown only from `md` up, instead of rendering the trigger with and without a `Tooltip`, which mounts a new trigger and drops its focus. Focus, hover and touch are still followed, so a trigger that still has focus, the pointer or an open touch toggle shows the tooltip as soon as it is enabled again (Escape pressed while disabled reaches the page and does not stop that). `disabled` must be the same in the server render and the first client render, or hydration mismatches; read a breakpoint through a hydration-safe store, such as `useSyncExternalStore` with a server snapshot. `relationship="label"` makes the tooltip its trigger's name instead of its description, for an icon-only control whose tooltip says what it is: the trigger gets `aria-labelledby` (after its own, if any) and no `aria-describedby` from the tooltip, so the text is read once. The tooltip stays in the page, hidden, so it names the trigger while it is not shown, and it wins over an `aria-label`. While `disabled` there is no tooltip to name the trigger, so give the trigger its own name for that state: visible text, such as a label shown only from `md` up, or an `aria-label`. Do not use `relationship="label"` while the trigger shows visible text that differs from `content`: the tooltip would replace that visible label as the name (WCAG 2.5.3, label in name). The default, `relationship="description"`, is the supplementary help above. `relationship` must also be the same in the server render and the first client render.
+`Tooltip` adds supplementary plain-text help to one labelled, focusable trigger, or names an icon-only one (`relationship="label"`, below). Supply localized `content` and an existing trigger element; by default it has its own accessible name. It opens on hover or on a visible focus (`:focus-visible`: the keyboard, not the focus a click or a tap gives), closes on pointer leave, blur, Escape, or outside touch, and a tap on a control (a button, a link, a form control or its label, an editable region, an element with a widget role, or anything inside one) does what the control does and leaves the tooltip closed, so on a touch screen a `Tooltip` on a `Button` is never shown. For an icon-only hint whose button does nothing but show it, such as an ⓘ beside a figure, use `InfoTip` (below), which a tap, a click, Enter or Space opens; do not make a non-control focusable to get a tap. A tap still toggles a `Tooltip` whose trigger does nothing else on a tap, such as an existing focusable badge. The bubble is placed beside its trigger on the top layer while it shows and stays a `space-2` inset inside the screen. Keep required instructions visible outside the tooltip. `disabled` turns the tooltip off, not its trigger: the trigger stays mounted, enabled and focusable, and there is no tooltip, no `aria-describedby` from it, and Escape is left to the page. Use it when what the tooltip says is visible at some widths, such as text shown only from `md` up, instead of rendering the trigger with and without a `Tooltip`, which mounts a new trigger and drops its focus. Focus, hover and touch are still followed, so a trigger that still has focus, the pointer or an open touch toggle shows the tooltip as soon as it is enabled again (Escape pressed while disabled reaches the page and does not stop that). `disabled` must be the same in the server render and the first client render, or hydration mismatches; read a breakpoint through a hydration-safe store, such as `useSyncExternalStore` with a server snapshot. `relationship="label"` makes the tooltip its trigger's name instead of its description, for an icon-only control whose tooltip says what it is: the trigger gets `aria-labelledby` (after its own, if any) and no `aria-describedby` from the tooltip, so the text is read once. The tooltip stays in the page, hidden, so it names the trigger while it is not shown, and it wins over an `aria-label`. While `disabled` there is no tooltip to name the trigger, so give the trigger its own name for that state: visible text, such as a label shown only from `md` up, or an `aria-label`. Do not use `relationship="label"` while the trigger shows visible text that differs from `content`: the tooltip would replace that visible label as the name (WCAG 2.5.3, label in name). The default, `relationship="description"`, is the supplementary help above. `relationship` must also be the same in the server render and the first client render.
+
+`InfoTip` is a toggletip: a ghost icon-only `Button` whose only job is to show its tip, built on `Tooltip`'s bubble and placement. `label` is the button's accessible name and `content` its tip, plain text as `Tooltip`'s, both localized by the consumer; `children` is the decorative glyph (a Lucide `Info` with `aria-hidden`); `size` is a Button size, and the default `md` and every size on a coarse pointer are a square 44 px target. Hover and a visible focus show the tip as `Tooltip` does. A press of the button (a tap, a click, Enter or Space) shows it and keeps it shown when the pointer leaves, and the next press hides it; Escape (taken only while the tip shows), blur and a press outside also hide it. The tip is the button's description (`aria-describedby`), read once on focus; a press also puts it in a visually hidden polite live region (`role="status"`, empty until a press opens the tip and emptied when it closes), so a screen reader user who presses the button hears it even with descriptions or hints turned off. The button is `type="button"` and never submits a form, and the ref reaches it. An empty `label` or `content` throws a `RangeError`. There is no `disabled`: where the tip is shown as text instead, render no `InfoTip`.
+
+```tsx
+<Inline gap={1}>
+  <Text>Expected waders: 128</Text>
+  <InfoTip
+    content="Counted at the last high tide, before the hides opened"
+    label="About the expected waders"
+  >
+    <Info aria-hidden size={16} />
+  </InfoTip>
+</Inline>
+```
 
 `Separator` divides sections with a token-colored line. It is horizontal by default; use `orientation="vertical"` in a flex row. Set `decorative` when the line only supports layout so assistive technology ignores it.
 

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/components/InfoTip.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import { type ButtonSize } from './Button.js';
+export type InfoTipProps = {
+    /**
+     * The button's accessible name, such as "About the expected balance".
+     * Localized by the consumer.
+     */
+    label: string;
+    /**
+     * The tip: plain text, as `Tooltip`'s `content`. It is the button's
+     * description, and a press also says it once in a polite live region.
+     */
+    content: string;
+    /** The glyph, such as a Lucide `Info`; decorative, the label names it. */
+    children: ReactNode;
+    /** A Button size; md (default) is 44 px, and a coarse pointer always gets 44 px. */
+    size?: ButtonSize;
+};
+/**
+ * A toggletip: a ghost icon-only button whose only job is to show its tip.
+ * Hover and a visible focus show it as `Tooltip` does; a press (a tap, a
+ * click, Enter or Space) shows it and keeps it shown until the next press,
+ * Escape, blur or a press outside. The button never submits a form. The ref
+ * reaches the `<button>`.
+ */
+export declare const InfoTip: import("react").ForwardRefExoticComponent<InfoTipProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/InfoTip.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button } from './Button.js';
+import { TooltipAnchor } from './tooltip/TooltipAnchor.js';
+/** The press is the anchor's: it toggles the tip on the button's click. */
+function pressShowsTheTip() { }
+/**
+ * A toggletip: a ghost icon-only button whose only job is to show its tip.
+ * Hover and a visible focus show it as `Tooltip` does; a press (a tap, a
+ * click, Enter or Space) shows it and keeps it shown until the next press,
+ * Escape, blur or a press outside. The button never submits a form. The ref
+ * reaches the `<button>`.
+ */
+export const InfoTip = forwardRef(function InfoTip({ children, content, label, size = 'md' }, ref) {
+    if (typeof label !== 'string' || label.trim() === '')
+        throw new RangeError('label must be non-empty text');
+    return (_jsx(TooltipAnchor, { content: content, pressToggles: true, trigger: _jsx(Button, { "aria-label": label, className: "sw-info-tip", onPress: pressShowsTheTip, ref: ref, size: size, type: "button", variant: "ghost", children: children }) }));
+});

package/dist/components/Tooltip.d.ts

@@ -28,4 +28,9 @@ export type TooltipProps = {
     relationship?: TooltipRelationship;
     trigger: ReactElement<TooltipTriggerAria>;
 };
+/**
+ * Supplementary help for a trigger that has its own name, or the name of an
+ * icon-only trigger (`relationship="label"`). For a glyph whose only job is
+ * to show its help, use `InfoTip`, which a press opens.
+ */
 export declare function Tooltip({ content, disabled, relationship, trigger, }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,62 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useEffect, useId, useRef, useState, } from 'react';
-import { focusIsVisible, tapActs } from './tooltip/tooltip-open.js';
-import { useTooltipPlacement } from './tooltip/use-tooltip-placement.js';
-import { tooltipTriggerAria, } from './tooltip-trigger-aria.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipAnchor } from './tooltip/TooltipAnchor.js';
+/**
+ * Supplementary help for a trigger that has its own name, or the name of an
+ * icon-only trigger (`relationship="label"`). For a glyph whose only job is
+ * to show its help, use `InfoTip`, which a press opens.
+ */
 export function Tooltip({ content, disabled = false, relationship = 'description', trigger, }) {
-    if (!content.trim())
-        throw new RangeError('content must not be empty');
-    // `open` follows focus, hover and touch even while disabled; `shown` is
-    // what the page gets.
-    const [open, setOpen] = useState(false);
-    const shown = open && !disabled;
-    const id = useId();
-    const wrapperRef = useRef(null);
-    const tooltipRef = useRef(null);
-    useTooltipPlacement(shown, tooltipRef, wrapperRef);
-    const triggerAria = tooltipTriggerAria(trigger.props, disabled ? undefined : id, relationship);
-    useEffect(() => {
-        if (!open)
-            return;
-        function dismissOutside(event) {
-            if (event.target instanceof Node &&
-                !wrapperRef.current?.contains(event.target))
-                setOpen(false);
-        }
-        document.addEventListener('pointerdown', dismissOutside);
-        return () => document.removeEventListener('pointerdown', dismissOutside);
-    }, [open]);
-    return (_jsxs("span", { className: "sw-tooltip-anchor", onBlurCapture: (event) => {
-            if (!event.currentTarget.contains(event.relatedTarget))
-                setOpen(false);
-        }, onFocusCapture: (event) => {
-            // A click or a tap focuses the trigger too; only a visible focus
-            // (the keyboard) opens the tooltip, so a clicked control does not
-            // keep its help shown until the focus moves.
-            if (focusIsVisible(event.target))
-                setOpen(true);
-        }, onKeyDownCapture: (event) => {
-            // Escape hides a visible tooltip and nothing else, so a surrounding
-            // Dialog does not also close. A hidden tooltip leaves Escape alone.
-            if (event.key !== 'Escape' || !shown)
-                return;
-            event.preventDefault();
-            setOpen(false);
-        }, onPointerEnter: (event) => {
-            if (event.pointerType === 'mouse' || event.pointerType === 'pen')
-                setOpen(true);
-        }, onPointerLeave: (event) => {
-            if (event.pointerType === 'mouse' || event.pointerType === 'pen')
-                setOpen(false);
-        }, onPointerDownCapture: (event) => {
-            if (event.pointerType !== 'touch')
-                return;
-            // A tap on a control does what the control does; only a trigger
-            // that does nothing else on a tap toggles its help.
-            if (tapActs(event.target, event.currentTarget))
-                setOpen(false);
-            else
-                setOpen((current) => !current);
-        }, ref: wrapperRef, children: [cloneElement(trigger, triggerAria), disabled ? null : (_jsx("span", { className: "sw-tooltip", hidden: !shown, id: id, ref: tooltipRef, role: "tooltip", children: content }))] }));
+    return (_jsx(TooltipAnchor, { content: content, disabled: disabled, relationship: relationship, trigger: trigger }));
 }

package/dist/components/tooltip/TooltipAnchor.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+import { type TooltipRelationship, type TooltipTriggerAria } from '../tooltip-trigger-aria.js';
+export type TooltipAnchorProps = {
+    content: string;
+    disabled?: boolean;
+    /**
+     * Internal, for `InfoTip`: a press of the trigger toggles the tooltip, and
+     * the tooltip a press opens is also said once in a polite live region.
+     */
+    pressToggles?: boolean;
+    relationship?: TooltipRelationship;
+    trigger: ReactElement<TooltipTriggerAria>;
+};
+/**
+ * The anchor `span` around a trigger and its tooltip: the bubble, its
+ * reference from the trigger, and what opens and closes it. `Tooltip` and
+ * `InfoTip` are this anchor; only `InfoTip` turns `pressToggles` on.
+ */
+export declare function TooltipAnchor({ content, disabled, pressToggles, relationship, trigger, }: TooltipAnchorProps): import("react").JSX.Element;

package/dist/components/tooltip/TooltipAnchor.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useId, useRef } from 'react';
+import { tooltipTriggerAria, } from '../tooltip-trigger-aria.js';
+import { useTooltipOpen } from './use-tooltip-open.js';
+import { useTooltipPlacement } from './use-tooltip-placement.js';
+/**
+ * The anchor `span` around a trigger and its tooltip: the bubble, its
+ * reference from the trigger, and what opens and closes it. `Tooltip` and
+ * `InfoTip` are this anchor; only `InfoTip` turns `pressToggles` on.
+ */
+export function TooltipAnchor({ content, disabled = false, pressToggles = false, relationship = 'description', trigger, }) {
+    if (!content.trim())
+        throw new RangeError('content must not be empty');
+    const id = useId();
+    const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const { handlers, pressed, shown } = useTooltipOpen({
+        disabled,
+        pressToggles,
+        tooltipRef,
+        wrapperRef,
+    });
+    useTooltipPlacement(shown, tooltipRef, wrapperRef);
+    const triggerAria = tooltipTriggerAria(trigger.props, disabled ? undefined : id, relationship);
+    return (_jsxs("span", { className: "sw-tooltip-anchor", ref: wrapperRef, ...handlers, children: [cloneElement(trigger, triggerAria), disabled ? null : (_jsx("span", { className: "sw-tooltip", hidden: !shown, id: id, ref: tooltipRef, role: "tooltip", children: content })), pressToggles ? (_jsx("span", { className: "sw-sr-only", role: "status", children: pressed && shown ? content : null })) : null] }));
+}

package/dist/components/tooltip/use-tooltip-open.d.ts

@@ -0,0 +1,33 @@
+import { type FocusEvent, type KeyboardEvent, type MouseEvent, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
+export type TooltipOpenOptions = {
+    /** Whether the tooltip is enabled: only a shown tooltip takes Escape. */
+    disabled: boolean;
+    /**
+     * The toggletip: a press of the trigger (a tap, a click, Enter or Space)
+     * shows the tooltip and keeps it shown, and the next press hides it.
+     * Without it, a tap toggles only a trigger that does nothing else.
+     */
+    pressToggles: boolean;
+    tooltipRef: RefObject<HTMLElement | null>;
+    wrapperRef: RefObject<HTMLElement | null>;
+};
+/**
+ * Whether a tooltip is open, and the anchor's handlers that open and close
+ * it. `open` follows focus, hover, touch and presses even while disabled;
+ * `shown` is what the page gets. `pressed` is a tooltip a press opened: it
+ * stays open when the pointer leaves, until the next press, Escape, blur or
+ * a press outside the anchor.
+ */
+export declare function useTooltipOpen({ disabled, pressToggles, tooltipRef, wrapperRef, }: TooltipOpenOptions): {
+    handlers: {
+        onBlurCapture(event: FocusEvent<HTMLElement>): void;
+        onFocusCapture(event: FocusEvent<HTMLElement>): void;
+        onKeyDownCapture(event: KeyboardEvent<HTMLElement>): void;
+        onPointerEnter(event: ReactPointerEvent<HTMLElement>): void;
+        onPointerLeave(event: ReactPointerEvent<HTMLElement>): void;
+        onPointerDownCapture(event: ReactPointerEvent<HTMLElement>): void;
+        onClick: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    };
+    pressed: boolean;
+    shown: boolean;
+};

package/dist/components/tooltip/use-tooltip-open.js

@@ -0,0 +1,90 @@
+'use client';
+import { useEffect, useState, } from 'react';
+import { focusIsVisible, tapActs } from './tooltip-open.js';
+function isHover(event) {
+    return event.pointerType === 'mouse' || event.pointerType === 'pen';
+}
+/**
+ * Whether a tooltip is open, and the anchor's handlers that open and close
+ * it. `open` follows focus, hover, touch and presses even while disabled;
+ * `shown` is what the page gets. `pressed` is a tooltip a press opened: it
+ * stays open when the pointer leaves, until the next press, Escape, blur or
+ * a press outside the anchor.
+ */
+export function useTooltipOpen({ disabled, pressToggles, tooltipRef, wrapperRef, }) {
+    const [open, setOpen] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const shown = open && !disabled;
+    function close() {
+        setOpen(false);
+        setPressed(false);
+    }
+    useEffect(() => {
+        if (!open)
+            return;
+        function dismissOutside(event) {
+            if (event.target instanceof Node &&
+                !wrapperRef.current?.contains(event.target)) {
+                setOpen(false);
+                setPressed(false);
+            }
+        }
+        document.addEventListener('pointerdown', dismissOutside);
+        return () => document.removeEventListener('pointerdown', dismissOutside);
+    }, [open, wrapperRef]);
+    const handlers = {
+        onBlurCapture(event) {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                close();
+        },
+        onFocusCapture(event) {
+            // A click or a tap focuses the trigger too; only a visible focus
+            // (the keyboard) opens the tooltip, so a clicked control does not
+            // keep its help shown until the focus moves.
+            if (focusIsVisible(event.target))
+                setOpen(true);
+        },
+        onKeyDownCapture(event) {
+            // Escape hides a visible tooltip and nothing else, so a surrounding
+            // Dialog does not also close. A hidden tooltip leaves Escape alone.
+            if (event.key !== 'Escape' || !shown)
+                return;
+            event.preventDefault();
+            close();
+        },
+        onPointerEnter(event) {
+            if (isHover(event))
+                setOpen(true);
+        },
+        onPointerLeave(event) {
+            if (isHover(event) && !pressed)
+                setOpen(false);
+        },
+        onPointerDownCapture(event) {
+            // A toggletip's tap is a press, which its click handles.
+            if (event.pointerType !== 'touch' || pressToggles)
+                return;
+            // A tap on a control does what the control does; only a trigger
+            // that does nothing else on a tap toggles its help.
+            if (tapActs(event.target, event.currentTarget))
+                setOpen(false);
+            else
+                setOpen((current) => !current);
+        },
+        onClick: pressToggles
+            ? (event) => {
+                // A press inside the bubble is not a press of the trigger.
+                if (event.target instanceof Node &&
+                    tooltipRef.current?.contains(event.target))
+                    return;
+                if (pressed)
+                    close();
+                else {
+                    setOpen(true);
+                    setPressed(true);
+                }
+            }
+            : undefined,
+    };
+    return { handlers, pressed, shown };
+}

package/dist/css/css-calendar-button.js

@@ -1,30 +1,10 @@
-import { buttonSizes } from '@scalewing/tokens';
-import { coarsePointerQuery, touchTarget } from './touch-target.js';
-/* Square at every Button size: as wide as the size's control height. */
-function squareRules() {
-    return buttonSizes
-        .map((size) => `.sw-button-${size}.sw-calendar-button { min-width: var(--sw-control-${size}-min-height); }`)
-        .join('\n');
-}
+import { iconButtonRules } from './css-icon-button.js';
 export function cssCalendarButtonClasses() {
-    return `.sw-button.sw-calendar-button {
-  flex: none;
-  padding-inline: 0;
-}
-
-${squareRules()}
+    return `${iconButtonRules('sw-calendar-button')}
 
 .sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
   height: var(--sw-space-4);
   width: var(--sw-space-4);
-}
-
-/* A coarse pointer gets the full touch target at the smaller sizes too. */
-@media ${coarsePointerQuery} {
-  .sw-button.sw-calendar-button {
-    min-height: ${touchTarget};
-    min-width: ${touchTarget};
-  }
 }`;
 }
 export function calendarButtonClassCatalog() {

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

@@ -57,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-components.js

@@ -20,6 +20,7 @@ import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssTooltipClasses } from './css-tooltip.js';
+import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
 import { cssTabsClasses } from './css-tabs.js';
@@ -144,6 +145,8 @@ ${cssProgressClasses()}
 
 ${cssTooltipClasses()}
 
+${cssInfoTipClasses()}
+
 ${cssSeparatorClasses()}
 
 ${cssStatTileClasses()}

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-icon-button.d.ts

@@ -0,0 +1 @@
+export declare function iconButtonRules(className: string): string;

package/dist/css/css-icon-button.js

@@ -0,0 +1,26 @@
+import { buttonSizes } from '@scalewing/tokens';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * An icon-only Button drawn by `className` (CalendarButton, InfoTip): square
+ * at every Button size, as wide as the size's control height, and the full
+ * touch target on a coarse pointer at the smaller sizes too. The coarse
+ * pointer's rule follows the squares, which it outranks only by order.
+ */
+export function iconButtonRules(className) {
+    const squares = buttonSizes
+        .map((size) => `.sw-button-${size}.${className} { min-width: var(--sw-control-${size}-min-height); }`)
+        .join('\n');
+    return `.sw-button.${className} {
+  flex: none;
+  padding-inline: 0;
+}
+
+${squares}
+
+@media ${coarsePointerQuery} {
+  .sw-button.${className} {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}`;
+}

package/dist/css/css-info-tip.d.ts

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

package/dist/css/css-info-tip.js

@@ -0,0 +1,8 @@
+import { iconButtonRules } from './css-icon-button.js';
+/* InfoTip's glyph button; its bubble is the generated `.sw-tooltip`. */
+export function cssInfoTipClasses() {
+    return iconButtonRules('sw-info-tip');
+}
+export function infoTipClassCatalog() {
+    return ['sw-info-tip'];
+}

package/dist/css/stylesheet.js

@@ -10,6 +10,7 @@ import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { tooltipClassCatalog } from './css-tooltip.js';
+import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
 import { tabsClassCatalog } from './css-tabs.js';
@@ -72,6 +73,7 @@ export function utilityClassCatalog() {
         ...spinnerClassCatalog(),
         ...progressClassCatalog(),
         ...tooltipClassCatalog(),
+        ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
         ...statTileClassCatalog(),
         ...tabsClassCatalog(),

package/dist/index.d.ts

@@ -9,10 +9,11 @@ export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';
 export { Tooltip, type TooltipProps, type TooltipRelationship, } from './components/Tooltip.js';
+export { InfoTip, type InfoTipProps } from './components/InfoTip.js';
 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';

package/dist/index.js

@@ -8,10 +8,11 @@ export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Progress, } from './components/Progress.js';
 export { Tooltip, } from './components/Tooltip.js';
+export { InfoTip } from './components/InfoTip.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';

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);
@@ -1883,12 +1884,6 @@ body {
 .sw-button-sm.sw-calendar-button { min-width: var(--sw-control-sm-min-height); }
 .sw-button-md.sw-calendar-button { min-width: var(--sw-control-md-min-height); }
 
-.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
-  height: var(--sw-space-4);
-  width: var(--sw-space-4);
-}
-
-/* A coarse pointer gets the full touch target at the smaller sizes too. */
 @media (pointer: coarse) {
   .sw-button.sw-calendar-button {
     min-height: var(--sw-control-md-min-height);
@@ -1896,6 +1891,11 @@ body {
   }
 }
 
+.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
 .sw-bar-chart {
   display: grid;
   gap: var(--sw-space-2);
@@ -1951,6 +1951,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 +2013,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);
@@ -2061,10 +2070,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(
@@ -2940,6 +2948,22 @@ body {
   .sw-tooltip { border-color: CanvasText; box-shadow: none; }
 }
 
+.sw-button.sw-info-tip {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-info-tip { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-info-tip { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-info-tip { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-info-tip {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-separator {
   background: var(--sw-color-border);
   border: 0;
@@ -3611,17 +3635,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);
@@ -3685,11 +3698,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;

package/package.json

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