@scalewing/react 1.59.1 → 1.59.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalewing/react
 
+## 1.59.3
+
+### Patch Changes
+
+- f929c5c: A `Dialog` unmounted while open (a consumer that renders it only while it is open) now closes first, while it is still in the document, so the browser hands focus back to the element that had it when the dialog opened, as a dialog closed by `open={false}` does; removed while open, a modal dialog left focus on the body (WCAG 2.4.3). `onClose` is not asked. A `ContextSwitcher` trigger's muted words read as the text colour while it is open or hovered, on its quiet fill (4.14:1 before), as rows already do. No API change.
+
+## 1.59.2
+
+### Patch Changes
+
+- ed35abb: `GlyphTile` letters are readable text: a tile holding letters mixes its categorical fill 25 % toward black, so white letters keep 4.5:1 (WCAG 1.4.3) on every fill in both schemes (neutral 3.26:1 before, 5.35:1 after; orange, the lightest, 5.08:1). A glyph keeps the fill as it is (3:1, WCAG 1.4.11). `Stepper`'s − and + grow to the 44 px touch target both ways on a coarse pointer (32 px wide before). No API change.
+
 ## 1.59.1
 
 ### Patch Changes

package/dist/components/dialog-close-requests.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 /**
  * A press on the backdrop: the target is the dialog element itself (not a
  * child, a nested dialog's backdrop, or a popover that overflows the box)
@@ -77,6 +77,21 @@ export function useDialogCloseRequests({ open, onClose, onCancel, onKeyDown, onP
         if (!open && node.open)
             node.close();
     }, [open, browserCloses]);
+    // A consumer that renders the dialog only while it is open unmounts it
+    // instead of passing `open={false}`. Closing it first, while it is still
+    // in the document (a layout cleanup runs before React removes the node),
+    // lets the browser hand focus back to the element that had it when the
+    // dialog opened, as a dialog closed by its prop does. Removed while open,
+    // a modal dialog leaves focus on the body (WCAG 2.4.3).
+    useLayoutEffect(() => {
+        const node = nodeRef.current;
+        return () => {
+            if (!node?.open)
+                return;
+            openRef.current = false;
+            node.close();
+        };
+    }, []);
     function handleKeyDown(event) {
         onKeyDown?.(event);
         // A nested control (a menu, a listbox, a tooltip, an inner dialog) or the

package/dist/css/css-context-switcher-trigger.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
-import { quietFill } from './quiet-fill.js';
+import { mutedReadsAsText, quietFill } from './quiet-fill.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 export const contextSwitcherTriggerAppearances = [
@@ -91,6 +91,13 @@ ${trigger}[aria-expanded='true'] {
   }
 }
 
+/* The consumer's muted words on the quiet fill read as the text colour (4.14:1 before). */
+${mutedReadsAsText([`${trigger}[aria-expanded='true'] *`])}
+
+@media (hover: hover) {
+  ${mutedReadsAsText([`${trigger}:hover *`])}
+}
+
 ${trigger}:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);

package/dist/css/css-glyph-tile.d.ts

@@ -3,5 +3,13 @@ export declare const glyphTileSizes: readonly ["sm", "md", "lg"];
 export type GlyphTileSize = (typeof glyphTileSizes)[number];
 /** The most letters a tile holds, such as a three-letter crest ("NSL"). */
 export declare const glyphTileLetterLimit = 3;
+/**
+ * How far a tile holding letters mixes its fill toward black. Letters are
+ * text (WCAG 1.4.3, 4.5:1), and the categorical fills keep a white glyph at
+ * only 3:1 (neutral 3.26:1, orange 3.06:1): a 25 % mix keeps white letters
+ * at 5:1 or more on every fill in both schemes (orange, the lightest after
+ * the mix, 5.08:1). A glyph keeps the fill as it is.
+ */
+export declare const glyphTileLetterDarken = 0.25;
 export declare function cssGlyphTileClasses(): string;
 export declare function glyphTileClassCatalog(): string[];

package/dist/css/css-glyph-tile.js

@@ -2,6 +2,14 @@ import { categoricalColorKeys } from '@scalewing/tokens';
 export const glyphTileSizes = ['sm', 'md', 'lg'];
 /** The most letters a tile holds, such as a three-letter crest ("NSL"). */
 export const glyphTileLetterLimit = 3;
+/**
+ * How far a tile holding letters mixes its fill toward black. Letters are
+ * text (WCAG 1.4.3, 4.5:1), and the categorical fills keep a white glyph at
+ * only 3:1 (neutral 3.26:1, orange 3.06:1): a 25 % mix keeps white letters
+ * at 5:1 or more on every fill in both schemes (orange, the lightest after
+ * the mix, 5.08:1). A glyph keeps the fill as it is.
+ */
+export const glyphTileLetterDarken = 0.25;
 const tileSide = {
     sm: 'var(--sw-space-5)',
     md: 'var(--sw-control-xs-min-height)',
@@ -20,7 +28,8 @@ function sizeRules() {
 /*
  * A rounded square in a categorical fill with the consumer's glyph centred
  * in white, sized to spacing step 4 whatever the glyph's own size. It is
- * decoration: the words beside it carry the meaning. Forced colors drop the
+ * decoration: the words beside it carry the meaning. Letters still have to
+ * be readable text, so a tile holding them takes a deeper fill. Forced colors drop the
  * fill, so a border keeps the tile's shape and the glyph takes the text
  * color.
  */
@@ -66,6 +75,11 @@ export function cssGlyphTileClasses() {
 
 ${hueRules()}
 
+/* Letters are text: the fill darkens just enough for 4.5:1 (glyphTileLetterDarken). */
+.sw-glyph-tile:has(> .sw-glyph-tile-text) {
+  background: color-mix(in srgb, var(--sw-glyph-tile-fill), black ${glyphTileLetterDarken * 100}%);
+}
+
 ${sizeRules()}
 
 @media (forced-colors: active) {

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

@@ -3,8 +3,8 @@
  * digits wide by default, the track at its own width even under a wider label
  * or message (`5ch` plus its padding, so its width never follows
  * its value), or fills its container with `sw-stepper-full`. The buttons are
- * spacing step 6 wide on the subtle fill and every part is the `md` control
- * height.
+ * spacing step 6 wide on the subtle fill (the 44 px touch target on a coarse
+ * pointer) and every part is the `md` control height.
  */
 export declare function cssStepperClasses(): string;
 export declare function stepperClassCatalog(): string[];

package/dist/css/css-stepper.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { changedTintLayer } from './css-field-changed.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 import { cssStepperUnitClasses, stepperUnitClassCatalog, } from './css-stepper-unit.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
@@ -47,8 +48,8 @@ function stateRules() {
  * digits wide by default, the track at its own width even under a wider label
  * or message (`5ch` plus its padding, so its width never follows
  * its value), or fills its container with `sw-stepper-full`. The buttons are
- * spacing step 6 wide on the subtle fill and every part is the `md` control
- * height.
+ * spacing step 6 wide on the subtle fill (the 44 px touch target on a coarse
+ * pointer) and every part is the `md` control height.
  */
 export function cssStepperClasses() {
     return `.sw-stepper {
@@ -117,6 +118,17 @@ ${input} {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
+/* A coarse pointer gets the full touch target: − and + as wide as they are tall. */
+@media ${coarsePointerQuery} {
+  .sw-stepper-track {
+    grid-template-columns: ${touchTarget} auto ${touchTarget};
+  }
+
+  .sw-stepper-full .sw-stepper-track {
+    grid-template-columns: ${touchTarget} minmax(0, 1fr) ${touchTarget};
+  }
+}
+
 ${stateRules()}
 
 ${cssStepperUnitClasses()}`;

package/dist/styles.css

@@ -7128,6 +7128,17 @@ html:has(.sw-site-header-sticky) {
   }
 }
 
+/* The consumer's muted words on the quiet fill read as the text colour (4.14:1 before). */
+.sw-context-switcher-trigger[aria-expanded='true'] * {
+  --sw-color-muted: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  .sw-context-switcher-trigger:hover * {
+  --sw-color-muted: var(--sw-color-text);
+}
+}
+
 .sw-context-switcher-trigger:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -8433,6 +8444,11 @@ html:has(.sw-site-header-sticky) {
 .sw-glyph-tile-rose { --sw-glyph-tile-fill: var(--sw-categorical-rose); }
 .sw-glyph-tile-neutral { --sw-glyph-tile-fill: var(--sw-categorical-neutral); }
 
+/* Letters are text: the fill darkens just enough for 4.5:1 (glyphTileLetterDarken). */
+.sw-glyph-tile:has(> .sw-glyph-tile-text) {
+  background: color-mix(in srgb, var(--sw-glyph-tile-fill), black 25%);
+}
+
 .sw-glyph-tile-sm { --sw-glyph-tile-side: var(--sw-space-5); height: var(--sw-space-5); width: var(--sw-space-5); }
 .sw-glyph-tile-md { --sw-glyph-tile-side: var(--sw-control-xs-min-height); height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
 .sw-glyph-tile-lg { --sw-glyph-tile-side: var(--sw-space-6); height: var(--sw-space-6); width: var(--sw-space-6); }
@@ -9996,6 +10012,17 @@ html:has(.sw-site-header-sticky) {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
+/* A coarse pointer gets the full touch target: − and + as wide as they are tall. */
+@media (pointer: coarse) {
+  .sw-stepper-track {
+    grid-template-columns: var(--sw-control-md-min-height) auto var(--sw-control-md-min-height);
+  }
+
+  .sw-stepper-full .sw-stepper-track {
+    grid-template-columns: var(--sw-control-md-min-height) minmax(0, 1fr) var(--sw-control-md-min-height);
+  }
+}
+
 [data-theme] .sw-stepper-invalid input.sw-stepper-input {
   border-color: var(--sw-color-danger);
 }

package/package.json

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