@scalewing/react 1.40.0 → 1.41.0

package/dist/styles.css

@@ -614,6 +614,18 @@ body {
   color-scheme: dark;
 }
 
+[data-theme] {
+  --sw-canvas-grouped: color-mix(in srgb, var(--sw-color-muted) 7%, var(--sw-color-background));
+}
+
+[data-theme='dark'] {
+  --sw-canvas-grouped: var(--sw-color-background);
+}
+
+[data-theme][data-canvas='grouped'] {
+  background-color: var(--sw-canvas-grouped);
+}
+
 [data-theme] a {
   color: var(--sw-color-accent);
   text-decoration: none;
@@ -1003,6 +1015,12 @@ body {
   .sw-button-group.sw-button-group-attached > * { width: auto; }
 }
 
+/* Its own block, after the phone row's, so a group that does not fill is unchanged. */
+@media not all and (min-width: 48rem) {
+  .sw-button-group.sw-button-group-attached.sw-button-group-full-below-md { width: 100%; }
+  .sw-button-group.sw-button-group-attached.sw-button-group-full-below-md > .sw-button { flex: 1 1 0; min-width: 0; }
+}
+
 .sw-button-group.sw-button-group-attached.sw-button-group-track {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
   border-radius: var(--sw-radius-sm);
@@ -1545,6 +1563,37 @@ body {
   .sw-segmented.sw-segmented-raised[aria-invalid='true'] { border-color: Mark; }
 }
 
+@media not all and (min-width: 48rem) {
+  .sw-segmented-field.sw-segmented-field-full-below-md {
+    align-self: stretch;
+    display: flex;
+    width: 100%;
+  }
+  .sw-segmented-field.sw-segmented-field-full-below-md > .sw-segmented {
+    align-self: stretch;
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+  }
+}
+
+.sw-segmented.sw-segmented-sm .sw-segmented-item {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sw-segmented.sw-segmented-sm:not(.sw-segmented-with-icons) .sw-segmented-item {
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-segmented-sm .sw-segmented-item-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -2191,6 +2240,36 @@ body {
 .sw-date-field-error { color: var(--sw-color-danger); }
 .sw-date-field-error:empty { position: absolute; }
 
+.sw-button.sw-date-field-calendar-entry {
+  align-self: flex-start;
+  border-radius: var(--sw-radius-sm);
+  flex: none;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-align: start;
+  white-space: nowrap;
+}
+
+/* A long day or word in a narrow column ends in an ellipsis; the name keeps it whole. */
+.sw-date-field-calendar-entry-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sw-button.sw-date-field-calendar-entry .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+.sw-button.sw-date-field-calendar-entry.sw-date-field-calendar-entry-invalid {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-button.sw-date-field-calendar-entry.sw-date-field-calendar-entry-invalid { border-color: Mark; }
+}
+
 .sw-date-field-calendar {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2829,6 +2908,7 @@ body {
 .sw-list-row-value-danger { color: var(--sw-color-danger); }
 .sw-list-row-value-muted { color: var(--sw-color-muted); }
 .sw-list-row-value-accent { color: var(--sw-color-accent); }
+.sw-list-row-value-warning { color: color-mix(in srgb, var(--sw-color-warning) 50%, var(--sw-color-text)); }
 
 .sw-list-row-chevron {
   border-bottom: 2px solid var(--sw-color-muted);
@@ -2958,6 +3038,7 @@ body {
 .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-fill-neutral { background: var(--sw-color-muted); }
 
 .sw-bar-chart-value {
   color: var(--sw-color-text);
@@ -3016,6 +3097,16 @@ body {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }
 
+.sw-bar-chart-bare .sw-bar-chart-track {
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Forced colours replace a transparent edge; the canvas colour hides it. */
+@media (forced-colors: active) {
+  .sw-bar-chart-bare .sw-bar-chart-track { border-color: Canvas; }
+}
+
 @media (forced-colors: active) {
   .sw-bar-chart-fill { background: CanvasText; }
 }
@@ -3698,13 +3789,27 @@ body {
 
 .sw-dialog-footer-status {
   align-items: center;
+  column-gap: var(--sw-space-2);
   display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
   min-width: 0;
 }
 
-/* With no summary the live region stays in the dialog, so a first figure
-   is still announced, but it takes no room in the footer. */
+/* The status line: muted caption words beside the actions. Its children
+   sit on one row and wrap as one phrase. */
+.sw-dialog-footer-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* With no figure and no status line the live region stays in the
+   dialog, so a first figure is still announced, but it takes no room in
+   the footer. */
 .sw-dialog-footer-status:empty {
   clip-path: inset(50%);
   height: 1px;
@@ -3772,6 +3877,36 @@ body {
   .sw-dialog-banded .sw-dialog-header { border-bottom-color: CanvasText; }
 }
 
+.sw-dialog.sw-dialog-canvas-grouped {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-canvas-grouped);
+}
+
+.sw-dialog-grabber { display: none; }
+
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md .sw-dialog-grabber {
+    background: color-mix(in srgb, var(--sw-color-muted) 40%, transparent);
+    border-radius: var(--sw-radius-pill);
+    display: block;
+    height: var(--sw-space-1);
+    margin: calc(var(--sw-space-2) - var(--sw-space-5)) auto var(--sw-space-3);
+    position: sticky;
+    top: calc(var(--sw-space-2) - var(--sw-space-5));
+    width: var(--sw-space-6);
+    z-index: 6;
+  }
+
+  .sw-dialog-sheet-below-md.sw-dialog-banded.sw-dialog-has-grabber .sw-dialog-header {
+    padding-top: var(--sw-space-5);
+  }
+
+  @media (forced-colors: active) {
+    .sw-dialog-sheet-below-md .sw-dialog-grabber { background: CanvasText; forced-color-adjust: none; }
+  }
+}
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -4660,6 +4795,29 @@ body {
   line-height: 18px;
 }
 
+.sw-switch-trailing {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sw-switch-trailing .sw-switch-copy {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-block: calc((var(--sw-control-md-min-height) - 20px) / 2);
+}
+
+.sw-switch-success .sw-switch-input:checked + .sw-switch-track {
+  background: var(--sw-color-success);
+  border-color: var(--sw-color-success);
+}
+
+@media (forced-colors: active) {
+  .sw-switch-success .sw-switch-input:checked + .sw-switch-track { background: Highlight; border-color: Highlight; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sw-switch-thumb { transition: none; }
 }
@@ -5288,6 +5446,28 @@ body {
   border-color: var(--sw-color-danger);
 }
 
+.sw-filter-chip-count-inline {
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-filter-chips-scroll .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: calc(-1 * calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset)));
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset));
+  scrollbar-width: thin;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip-face {
+  white-space: nowrap;
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -5865,6 +6045,146 @@ body {
   .sw-denomination-strip .sw-denomination-value-row .sw-denomination-value { color: CanvasText; }
 }
 
+.sw-denomination-transposed {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-denomination-transposed th,
+.sw-denomination-transposed td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+.sw-denomination-transposed tbody tr,
+.sw-denomination-transposed tfoot tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-transposed .sw-denomination-transposed-head {
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed .sw-denomination-label-line {
+  justify-content: flex-end;
+}
+
+.sw-denomination-transposed-label {
+  color: var(--sw-color-text);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-head,
+.sw-denomination-transposed-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-label-line {
+  justify-content: center;
+}
+
+.sw-denomination-transposed-value {
+  background: var(--sw-color-subtle);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-total {
+  color: var(--sw-denomination-tone);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-total {
+  text-align: center;
+}
+
+/* The denomination column and its corner stay in view, as the strip's labels do. */
+.sw-denomination-transposed .sw-denomination-transposed-label,
+.sw-denomination-transposed :is(thead, tfoot) .sw-denomination-corner:first-child {
+  background: var(--sw-glass-fill);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  inset-inline-start: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+.sw-denomination-scroll-transposed.sw-scroll-more-start .sw-denomination-transposed-label::after {
+  background: linear-gradient(to right, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+.sw-denomination-scroll-transposed.sw-scroll-more-start:dir(rtl) .sw-denomination-transposed-label::after {
+  background: linear-gradient(to left, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-scroll-transposed.sw-scroll-more-start .sw-denomination-transposed-label::after { display: none; }
+}
+
+.sw-denomination-transposed-quiet {
+  background: var(--sw-color-subtle);
+}
+
+/* Over a toned count's full strength (three classes, emitted later). */
+.sw-denomination-grid.sw-denomination-transposed .sw-denomination-transposed-disabled:is(.sw-denomination-cell, .sw-denomination-transposed-value, .sw-denomination-transposed-total, .sw-denomination-transposed-head) {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-quiet { background: Canvas; }
+  .sw-denomination-transposed-label,
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-total { color: CanvasText; }
+}
+
+.sw-denomination-cell-signed.sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative.sw-denomination-cell-plain {
+  color: var(--sw-color-text);
+}
+
+.sw-denomination-count-digits .sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  grid-template-columns: var(--sw-space-6) minmax(calc(var(--sw-denomination-count-digits) * 1ch + 2 * var(--sw-space-1) + 2px), 1fr) var(--sw-space-6);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-cell-signed.sw-denomination-cell-positive,
+  .sw-denomination-cell-negative.sw-denomination-cell-plain { color: CanvasText; }
+}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -6093,6 +6413,27 @@ body {
     linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%); }
 }
 
+.sw-field-width-xs { --sw-field-width: 4rem; }
+.sw-field-width-sm { --sw-field-width: 6rem; }
+.sw-field-width-md { --sw-field-width: 8rem; }
+.sw-field-width-lg { --sw-field-width: 12rem; }
+.sw-field-width-xl { --sw-field-width: 16rem; }
+
+.sw-field-sized > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea, select, .sw-field-adorned, .sw-field-search) {
+  align-self: flex-start;
+  box-sizing: border-box;
+  inline-size: min(100%, var(--sw-field-width));
+  max-inline-size: 100%;
+}
+
+[data-theme] .sw-field-sized > select {
+  height: var(--sw-control-md-min-height);
+}
+
+[data-theme] .sw-field-xs.sw-field-sized > select {
+  height: var(--sw-control-xs-min-height);
+}
+
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }

package/dist/theme/ThemeProvider.d.ts

@@ -1,10 +1,20 @@
 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';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
     palette?: PaletteId;
     colors?: ThemeColors;
+    /**
+     * The page's tone: `default` is the theme's background; `grouped` (opt-in)
+     * is a quiet grey in the light scheme (the background in the dark one,
+     * already darker than its surface), so white cards stand apart from the
+     * page. Put links and accent words in the cards: on the grouped grey the
+     * accent falls under 4.5:1 in some palettes, while the text and muted
+     * colours keep it. An unknown value throws a `RangeError`.
+     */
+    canvas?: ThemeCanvas;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, palette, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, canvas, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -1,6 +1,7 @@
 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';
 const ThemeContext = createContext(null);
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
@@ -24,7 +25,8 @@ function themeCssVars(theme) {
     vars['--sw-glass-specular'] = theme.glass.specular;
     return vars;
 }
-export function ThemeProvider({ colorScheme = 'system', palette, colors, children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', children, }) {
+    assertThemeCanvas(canvas);
     const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
     useEffect(() => {
         if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
@@ -40,7 +42,7 @@ export function ThemeProvider({ colorScheme = 'system', palette, colors, childre
     }, [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-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "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.40.0",
+  "version": "1.41.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",