@scalewing/react 1.59.0 → 1.59.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalewing/react
 
+## 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
+
+- 3f78164: An xs `Field`'s own text input (`input` of a typed kind, or `textarea`) now draws at the xs size: the document canvas's `[data-theme]` typed-input rule outranked `.sw-field-xs`, so the control kept the md min-height (44 px) and the inherited font size beside a 28 px xs `Select`. The xs rule now matches it under `[data-theme]` (caption type, xs min-height and padding), and on a coarse pointer the control is the 44 px touch target. Adorned and search inputs keep their frames' rules. No API change.
+
 ## 1.59.0
 
 ### Minor Changes

package/dist/css/css-chrome.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { appHeaderBarClassCatalog, cssAppHeaderBarClasses, } from './css-app-header-bar.js';
+import { typedInputs } from './css-document.js';
 import { cssNavWordsClasses, navWordsClassCatalog } from './css-nav-words.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
@@ -71,6 +72,26 @@ ${cssNavWordsClasses()}
   padding-inline-end: calc(
     var(--sw-control-xs-padding-inline) + var(--sw-space-5)
   );
+}
+
+/*
+ * The document canvas sizes every typed input under [data-theme] (0,2,1),
+ * which outranks the xs rule above, so an xs field's own text control
+ * matches it there. Adorned and search inputs sit one level deeper and keep
+ * their frames' rules. On a coarse pointer it is the 44 px touch target.
+ */
+[data-theme] .sw-field-xs > :is(${typedInputs}) {
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-field-xs > :is(${typedInputs}) {
+    min-height: ${touchTarget};
+  }
 }`;
 }
 export function chromeClassCatalog() {

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

@@ -5045,6 +5045,26 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   );
 }
 
+/*
+ * The document canvas sizes every typed input under [data-theme] (0,2,1),
+ * which outranks the xs rule above, so an xs field's own text control
+ * matches it there. Adorned and search inputs sit one level deeper and keep
+ * their frames' rules. On a coarse pointer it is the 44 px touch target.
+ */
+[data-theme] .sw-field-xs > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-field-xs > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
+    min-height: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-section-nav-list {
   border-bottom: 1px solid var(--sw-color-border);
   display: flex;
@@ -8413,6 +8433,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); }
@@ -9976,6 +10001,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.0",
+  "version": "1.59.2",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",