@scalewing/react 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/README.md

@@ -53,7 +53,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,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/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-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/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';

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';

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);
@@ -2061,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(
@@ -3611,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);
@@ -3685,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;

package/package.json

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