@scalewing/react 1.60.1 → 1.61.0

package/dist/styles.css

@@ -927,7 +927,7 @@ body {
 .sw-text-align-center { text-align: center; }
 .sw-text-align-end { text-align: end; }
 
-:where(.sw-text-hero, .sw-text-display, .sw-text-headline, .sw-text-heading, .sw-text-title, .sw-text-lead, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
+:where(.sw-text-hero, .sw-text-display, .sw-text-headline, .sw-text-heading, .sw-text-title, .sw-text-lead, .sw-text-body, .sw-text-bodySm, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
 
 .sw-text-hero { font-family: var(--sw-font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -1.7px; }
 .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
@@ -936,6 +936,7 @@ body {
 .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
 .sw-text-lead { font-family: var(--sw-font-sans); font-size: 20px; line-height: 29px; font-weight: 400; letter-spacing: -0.3px; }
 .sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
+.sw-text-bodySm { font-family: var(--sw-font-sans); font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: -0.2px; }
 .sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
@@ -948,6 +949,21 @@ body {
   .sw-text-lead { font-size: 17px; line-height: 25px; letter-spacing: -0.2px; }
 }
 
+.sw-text-clamp-2 {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+.sw-text-clamp-3 {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
 [data-theme] .sw-font-mono,
 [data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea).sw-font-mono {
   font-family: ui-monospace, monospace;
@@ -1007,9 +1023,9 @@ body {
   .sw-button[aria-disabled='true'],
   .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
 }
-.sw-button-xs { min-height: 28px; padding-inline: 10px; }
-.sw-button-sm { min-height: 32px; padding-inline: 12px; }
-.sw-button-md { min-height: 44px; padding-inline: 16px; }
+.sw-button-xs { min-height: var(--sw-control-xs-min-height); padding-inline: var(--sw-control-xs-padding-inline); }
+.sw-button-sm { min-height: var(--sw-control-sm-min-height); padding-inline: var(--sw-control-sm-padding-inline); }
+.sw-button-md { min-height: var(--sw-control-md-min-height); padding-inline: var(--sw-control-md-padding-inline); }
 @media (pointer: coarse) {
   .sw-button { min-height: var(--sw-control-md-min-height); min-width: var(--sw-control-md-min-height); }
 }
@@ -2070,7 +2086,8 @@ body {
   --sw-table-cell-pad: var(--sw-space-2);
   --sw-table-head-block: 0px;
   --sw-table-foot-rows: 0;
-  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (25px + 2 * var(--sw-table-cell-pad) + 1px) + var(--sw-table-head-block));
+  --sw-table-row-line: 25px;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (var(--sw-table-row-line) + 2 * var(--sw-table-cell-pad) + 1px) + var(--sw-table-head-block));
 }
 
 .sw-table-bounded:has(> .sw-table-compact) {
@@ -3529,6 +3546,18 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   }
 }
 
+@media (min-width: 48rem) {
+  .sw-fixture-list-sides-fixed {
+    grid-template-columns: auto minmax(0, 16rem) minmax(7rem, auto) minmax(0, 16rem) 1fr auto auto;
+  }
+
+  @supports not (grid-template-columns: subgrid) {
+    .sw-fixture-list-sides-fixed .sw-fixture-row {
+      grid-template-columns: minmax(0, 16rem) minmax(7rem, auto) minmax(0, 16rem) 1fr auto;
+    }
+  }
+}
+
 .sw-fixture-flag {
   align-self: center;
   display: inline-flex;
@@ -5458,6 +5487,76 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   .sw-hero-actions { align-items: stretch; flex-direction: column; }
 }
 
+.sw-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-page-header-row {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3) var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-page-header-words {
+  display: flex;
+  flex: 1 1 min(100%, 20rem);
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-page-header-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-page-header-below {
+  min-width: 0;
+}
+
+.sw-page-header-back {
+  align-items: center;
+  align-self: flex-start;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  max-width: 100%;
+  min-height: var(--sw-control-xs-min-height);
+  overflow-wrap: anywhere;
+}
+
+.sw-page-header-back::before {
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  content: '';
+  flex: none;
+  transform: rotate(135deg);
+}
+
+.sw-page-header-back:dir(rtl)::before { transform: rotate(-45deg); }
+
+@media (pointer: coarse) {
+  .sw-page-header-back { min-height: var(--sw-control-md-min-height); }
+}
+
 .sw-site-footer-top {
   display: grid;
   gap: var(--sw-space-6) var(--sw-space-5);
@@ -6253,6 +6352,10 @@ html:has(.sw-site-header-sticky) {
 
 .sw-app-shell-main:focus { outline: none; }
 
+.sw-app-shell-sidebar-subtle :is(.sw-app-shell-sidebar, .sw-app-shell-drawer) {
+  background: var(--sw-color-subtle);
+}
+
 .sw-dialog {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -8481,7 +8584,7 @@ html:has(.sw-site-header-sticky) {
 }
 
 .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-md { --sw-glyph-tile-side: 28px; height: 28px; width: 28px; }
 .sw-glyph-tile-lg { --sw-glyph-tile-side: var(--sw-space-6); height: var(--sw-space-6); width: var(--sw-space-6); }
 
 @media (forced-colors: active) {
@@ -8671,6 +8774,12 @@ html:has(.sw-site-header-sticky) {
   text-align: end;
 }
 
+@media (min-width: 48rem) {
+  .sw-description-list-term-sm { grid-template-columns: min(8rem, 50%) minmax(0, 1fr); }
+  .sw-description-list-term-md { grid-template-columns: min(12rem, 50%) minmax(0, 1fr); }
+  .sw-description-list-term-lg { grid-template-columns: min(16rem, 50%) minmax(0, 1fr); }
+}
+
 @media (forced-colors: active) {
   .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
 }
@@ -8723,6 +8832,13 @@ html:has(.sw-site-header-sticky) {
   color: var(--sw-color-accent);
 }
 
+/* A tab with a count: its label and the shared pill centred, a space-2 apart. */
+.sw-tab-counted {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+}
+
 .sw-tab-panel:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -8802,13 +8918,14 @@ html:has(.sw-site-header-sticky) {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
   color: var(--sw-color-text);
   display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: 15px;
   gap: var(--sw-space-2);
   line-height: 20px;
-  min-height: var(--sw-control-md-min-height);
+  min-height: var(--sw-filter-chip-min-height, var(--sw-control-md-min-height));
   min-width: 0;
   overflow-wrap: anywhere;
   padding: var(--sw-space-1) var(--sw-space-3);
@@ -8841,6 +8958,12 @@ html:has(.sw-site-header-sticky) {
   color: var(--sw-color-onAccent);
 }
 
+:where(.sw-filter-chips-selected-subtle) .sw-filter-chip-input:checked + .sw-filter-chip-face {
+  background: var(--sw-color-accentSubtle);
+  border-color: var(--sw-color-accent);
+  color: color-mix(in srgb, var(--sw-color-accent) 70%, var(--sw-color-text));
+}
+
 .sw-filter-chip-input:checked + .sw-filter-chip-face .sw-filter-chip-count {
   color: inherit;
 }
@@ -8991,6 +9114,14 @@ html:has(.sw-site-header-sticky) {
 .sw-grid-fit-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
 .sw-grid-fit-medium { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
 .sw-grid-fit-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); }
+.sw-grid-rail-md { grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 48rem) {
+  .sw-grid-rail-md { grid-template-columns: minmax(0, 1fr) 20rem; }
+}
+.sw-grid-rail-lg { grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 64rem) {
+  .sw-grid-rail-lg { grid-template-columns: minmax(0, 1fr) 20rem; }
+}
 .sw-grid-span-1 { grid-column: span 1; }
 .sw-grid-span-2 { grid-column: span 2; }
 .sw-grid-span-3 { grid-column: span 3; }
@@ -9018,6 +9149,14 @@ html:has(.sw-site-header-sticky) {
 :where(.sw-grid-fit-wide) > .sw-grid-span-3 { grid-column: auto; }
 :where(.sw-grid-fit-wide) > .sw-grid-span-4 { grid-column: auto; }
 :where(.sw-grid-fit-wide) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-rail-md) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-rail-md) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-rail-md) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-rail-md) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-rail-lg) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-rail-lg) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-rail-lg) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-rail-lg) > .sw-grid-span-6 { grid-column: auto; }
 @media not all and (min-width: 48rem) {
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-2 { grid-column: span 1; }
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-3 { grid-column: span 1; }
@@ -10787,6 +10926,46 @@ html:has(.sw-site-header-sticky) {
 .sw-border-dashed { border: 1px dashed var(--sw-color-border); }
 .sw-border-bottom { border-width: 0 0 1px; border-style: solid; border-color: var(--sw-color-border); }
 
+@media (pointer: fine) {
+  [data-theme][data-density='compact'] {
+    --sw-control-xs-min-height: 24px;
+    --sw-control-xs-padding-inline: 8px;
+    --sw-control-sm-min-height: 28px;
+    --sw-control-sm-padding-inline: 10px;
+    --sw-control-md-min-height: 36px;
+    --sw-control-md-padding-inline: 14px;
+    --sw-filter-chip-min-height: 32px;
+    font-size: 15px;
+    letter-spacing: -0.2px;
+    line-height: 22px;
+  }
+
+  [data-theme][data-density='compact'] :is(.sw-card, .sw-table, .sw-description-list) .sw-text-body {
+    font-size: 15px;
+    letter-spacing: -0.2px;
+    line-height: 22px;
+  }
+
+  [data-theme][data-density='compact'] :is(.sw-date-field-input, .sw-fixture-score-box, .sw-segmented-filled .sw-segmented-item, .sw-stepper-input, .sw-stepper-unit) {
+    font-size: 15px;
+    letter-spacing: -0.2px;
+    line-height: 22px;
+  }
+
+  [data-theme][data-density='compact'] .sw-table-bounded {
+    --sw-table-row-line: 22px;
+  }
+
+  [data-theme][data-density='compact'] .sw-card {
+    border-radius: var(--sw-radius-md);
+  }
+
+  [data-theme][data-density='compact'] .sw-app-shell-sidebar .sw-app-shell-count {
+    inset-block-start: calc(-1 * var(--sw-space-1));
+    inset-inline-end: calc(-1 * var(--sw-space-2));
+  }
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
   .sw-app-header,

package/dist/theme/ThemeProvider.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { type ColorScheme, type PaletteId, type Theme, type ThemeColors } from '@scalewing/tokens';
 import { type ThemeCanvas } from '../css/css-canvas-grouped.js';
+import { type ThemeDensity } from '../css/css-density.js';
 import { type ThemeFrame } from '../css/css-theme-frame.js';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
@@ -23,7 +24,18 @@ export type ThemeProviderProps = {
      * a `RangeError`.
      */
     frame?: ThemeFrame;
+    /**
+     * `comfortable` (default) draws today's touch-sized controls. `compact`
+     * (opt-in) is a desktop data tool's scale, on a fine pointer only (a touch
+     * screen keeps its 44 px targets): md controls 36 px high with 14 px side
+     * padding, sm 28/10, xs 24/8, FilterChips 32 px, Card corners at the md
+     * radius, and 15/22 reading text in a Card, a Table and a DescriptionList
+     * and for everything that inherits the root's type. It reaches everything
+     * inside: a ThemeProvider nested in a compact one is compact too. An
+     * unknown value throws a `RangeError`.
+     */
+    density?: ThemeDensity;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, palette, colors, canvas, frame, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, canvas, frame, density, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -2,8 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { createTheme, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 import { assertThemeCanvas, } from '../css/css-canvas-grouped.js';
+import { assertThemeDensity } from '../css/css-density.js';
 import { assertThemeFrame } from '../css/css-theme-frame.js';
 const ThemeContext = createContext(null);
+/** The density of the ThemeProvider around this one. */
+const DensityContext = createContext('comfortable');
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
         typeof window.matchMedia !== 'function') {
@@ -26,9 +29,11 @@ function themeCssVars(theme) {
     vars['--sw-glass-specular'] = theme.glass.specular;
     return vars;
 }
-export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', frame = 'none', children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', frame = 'none', density = 'comfortable', children, }) {
     assertThemeCanvas(canvas);
     assertThemeFrame(frame);
+    assertThemeDensity(density);
+    const resolvedDensity = useContext(DensityContext) === 'compact' ? 'compact' : density;
     const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
     useEffect(() => {
         if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
@@ -44,7 +49,7 @@ export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas
     }, [colorScheme]);
     const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
     const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, palette, colors }), [colors, palette, resolvedScheme]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "data-frame": frame === 'none' ? undefined : frame, "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx(DensityContext.Provider, { value: resolvedDensity, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "data-density": resolvedDensity === 'compact' ? 'compact' : undefined, "data-frame": frame === 'none' ? undefined : frame, "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }) }));
 }
 export function useTheme() {
     const theme = useContext(ThemeContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.60.1",
+  "version": "1.61.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
   "dependencies": {
     "markdown-it": "14.3.2",
     "pdfjs-dist": "6.4.299",
-    "@scalewing/tokens": "^1.7.0"
+    "@scalewing/tokens": "^1.8.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",