@scalewing/react 1.9.0 → 1.10.1

package/dist/components/date-field/use-calendar-popup.d.ts

@@ -0,0 +1,36 @@
+import { type RefObject } from 'react';
+export type CalendarPopupOptions = {
+    value: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    /** Runs before a chosen date closes the calendar, such as a text reset. */
+    beforeSelect?: () => void;
+};
+export type CalendarPopup = {
+    /** The button that toggles the calendar and takes focus back. */
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    shown: boolean;
+    toggle: () => void;
+    /** ARIA for the toggling button, as the WAI-ARIA date picker asks. */
+    trigger: {
+        'aria-controls': string | undefined;
+        'aria-expanded': boolean;
+        'aria-haspopup': 'dialog';
+    };
+    /**
+     * CalendarDialog props that belong to the open and close cycle; pass
+     * `buttonRef` beside them.
+     */
+    dialog: {
+        id: string;
+        onClose: (restoreFocus: boolean) => void;
+        onSelect: (value: string) => void;
+        today: string;
+    };
+};
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export declare function useCalendarPopup({ value, disabled, onChange, beforeSelect, }: CalendarPopupOptions): CalendarPopup;

package/dist/components/date-field/use-calendar-popup.js

@@ -0,0 +1,43 @@
+import { useId, useRef, useState } from 'react';
+import { todayDateOnly } from '../../date-only.js';
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export function useCalendarPopup({ value, disabled, onChange, beforeSelect, }) {
+    const buttonRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Disabling closes the calendar for good, not just while disabled.
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    const id = useId();
+    function close(restoreFocus) {
+        setOpen(false);
+        if (restoreFocus)
+            buttonRef.current?.focus();
+    }
+    function select(next) {
+        beforeSelect?.();
+        close(true);
+        if (next !== value)
+            onChange(next);
+    }
+    return {
+        buttonRef,
+        shown,
+        toggle: () => (shown ? close(true) : setOpen(true)),
+        trigger: {
+            'aria-controls': shown ? id : undefined,
+            'aria-expanded': shown,
+            'aria-haspopup': 'dialog',
+        },
+        dialog: {
+            id,
+            onClose: close,
+            onSelect: select,
+            today: todayDateOnly(),
+        },
+    };
+}

package/dist/components/use-anchored-popover.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+export type AnchoredPopoverPlacement = {
+    /** Line up with the anchor's end when the start-aligned popover overflows. */
+    flipInline?: boolean;
+};
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll, window resize, and a change in its own
+ * or the anchor's size, a `space-1` gap from it and a
+ * `space-2` inset from the viewport edges, and calls `onDismiss` for a press
+ * outside it and outside `ignoreRef` (the button that toggles it).
+ * Browsers without the popover API get the same fixed placement.
+ */
+export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void, { flipInline }?: AnchoredPopoverPlacement): void;

package/dist/components/{date-field/use-anchored-popover.js → use-anchored-popover.js}

@@ -1,22 +1,37 @@
 import { spacingScale } from '@scalewing/tokens';
 import { useLayoutEffect, useRef } from 'react';
-import { anchoredPosition } from '../../anchored-position.js';
-function placePopover(node, anchor) {
-    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, {
+import { anchoredPosition } from '../anchored-position.js';
+/**
+ * The viewport a fixed popover can use: the root's client box, which leaves
+ * out a classic scrollbar (`innerWidth` and `100vw` include it). Falls back
+ * to the window size where nothing is laid out, as in jsdom.
+ */
+function layoutViewport() {
+    const root = document.documentElement;
+    return {
+        width: root.clientWidth || window.innerWidth,
+        height: root.clientHeight || window.innerHeight,
+    };
+}
+function placePopover(node, anchor, { flipInline = false }) {
+    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],
         rtl: getComputedStyle(anchor).direction === 'rtl',
+        flipInline,
     });
     node.style.left = `${position.left}px`;
     node.style.top = `${position.top}px`;
 }
 /**
  * Shows a mounted element on the top layer as a manual popover, keeps it
- * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
- * press outside it and outside `ignoreRef` (the button that toggles it).
+ * beside `anchorRef` through scroll, window resize, and a change in its own
+ * or the anchor's size, a `space-1` gap from it and a
+ * `space-2` inset from the viewport edges, and calls `onDismiss` for a press
+ * outside it and outside `ignoreRef` (the button that toggles it).
  * Browsers without the popover API get the same fixed placement.
  */
-export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss) {
+export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { flipInline = false } = {}) {
     const dismissRef = useRef(onDismiss);
     useLayoutEffect(() => {
         dismissRef.current = onDismiss;
@@ -34,7 +49,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss)
             if (!node.matches(':popover-open'))
                 node.showPopover();
         }
-        placePopover(node, anchor);
+        placePopover(node, anchor, { flipInline });
         function onPointerDown(event) {
             const target = event.target;
             if (!(target instanceof Node))
@@ -45,17 +60,24 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss)
         }
         function onMove() {
             if (node && anchor)
-                placePopover(node, anchor);
+                placePopover(node, anchor, { flipInline });
         }
+        // A popover or anchor that changes size while open (new commands, a
+        // month with another row of weeks, a relabelled trigger) moves too.
+        // ResizeObserver is missing in some runtimes, such as jsdom.
+        const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(onMove) : null;
+        resizes?.observe(node);
+        resizes?.observe(anchor);
         document.addEventListener('pointerdown', onPointerDown);
         window.addEventListener('resize', onMove);
         window.addEventListener('scroll', onMove, true);
         return () => {
+            resizes?.disconnect();
             document.removeEventListener('pointerdown', onPointerDown);
             window.removeEventListener('resize', onMove);
             window.removeEventListener('scroll', onMove, true);
             if (supportsPopover && node.matches(':popover-open'))
                 node.hidePopover();
         };
-    }, [anchorRef, ignoreRef, popoverRef]);
+    }, [anchorRef, flipInline, ignoreRef, popoverRef]);
 }

package/dist/css/css-action-menu.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -39,20 +40,22 @@ export function cssActionMenuClasses() {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   box-sizing: border-box;
   color: var(--sw-color-text);
+  /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
+  inset: auto;
   margin: 0;
   max-height: var(--sw-select-max);
-  max-width: calc(100vw - var(--sw-space-2));
-  min-width: max-content;
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  /* Never narrower than a touch target. */
+  min-width: var(--sw-control-md-min-height);
   overflow: auto;
   padding: var(--sw-space-1);
   position: fixed;
+  /* As wide as its longest command, until max-width wraps it. */
+  width: max-content;
   ${zIndex('popup')}
 }
 
-.sw-action-menu-list[hidden] {
-  display: none;
-}
-
 .sw-action-menu-item {
   align-items: center;
   appearance: none;
@@ -65,7 +68,11 @@ export function cssActionMenuClasses() {
   font-family: var(--sw-font-sans);
   font-size: ${label.fontSize}px;
   gap: var(--sw-space-2);
+  line-height: ${label.lineHeight}px;
   min-height: var(--sw-control-xs-min-height);
+  /* A long command wraps inside the capped menu, a word at a time if it must. */
+  overflow-wrap: anywhere;
+  padding-block: var(--sw-space-1);
   padding-inline: var(--sw-control-xs-padding-inline);
   text-align: start;
   width: 100%;
@@ -83,6 +90,18 @@ export function cssActionMenuClasses() {
 
 .sw-action-menu-item-danger {
   color: var(--sw-color-danger);
+}
+
+/* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
+@media ${coarsePointerQuery} {
+  .sw-action-menu-trigger {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+
+  .sw-action-menu-item {
+    min-height: ${touchTarget};
+  }
 }`;
 }
 export function actionMenuClassCatalog() {

package/dist/css/css-calendar-button.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCalendarButtonClasses(): string;
+export declare function calendarButtonClassCatalog(): string[];

package/dist/css/css-calendar-button.js

@@ -0,0 +1,32 @@
+import { buttonSizes } from '@scalewing/tokens';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/* Square at every Button size: as wide as the size's control height. */
+function squareRules() {
+    return buttonSizes
+        .map((size) => `.sw-button-${size}.sw-calendar-button { min-width: var(--sw-control-${size}-min-height); }`)
+        .join('\n');
+}
+export function cssCalendarButtonClasses() {
+    return `.sw-button.sw-calendar-button {
+  flex: none;
+  padding-inline: 0;
+}
+
+${squareRules()}
+
+.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+/* A coarse pointer gets the full touch target at the smaller sizes too. */
+@media ${coarsePointerQuery} {
+  .sw-button.sw-calendar-button {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}`;
+}
+export function calendarButtonClassCatalog() {
+    return ['sw-calendar-button'];
+}

package/dist/css/css-components.js

@@ -1,9 +1,8 @@
-import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
-import { breakpointQuery } from './breakpoints.js';
 import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
+import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssChartClasses } from './css-chart.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
@@ -14,6 +13,7 @@ import { cssDialogClasses } from './css-dialog.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
+import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssTooltipClasses } from './css-tooltip.js';
@@ -57,22 +57,6 @@ function reducedTransparencyRules() {
   }
 }`;
 }
-function textVariantRules() {
-    return Object.entries(typographyVariants)
-        .map(([name, variant]) => {
-        const tabular = 'tabularNums' in variant && variant.tabularNums
-            ? ' font-variant-numeric: tabular-nums;'
-            : '';
-        return `.sw-text-${name} { font-family: var(--sw-font-sans); font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; font-weight: ${variant.fontWeight}; letter-spacing: ${variant.letterSpacing}px;${tabular} }`;
-    })
-        .join('\n');
-}
-function compactTextVariantRules() {
-    const rules = Object.entries(compactTypographyVariants)
-        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
-        .join('\n');
-    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
-}
 export function cssComponentClasses() {
     return `.sw-card {
   border-radius: var(--sw-radius-lg);
@@ -105,10 +89,6 @@ ${cssPopupHostRules()}
   background: var(--sw-color-subtle);
 }
 
-.sw-text-align-start { text-align: start; }
-.sw-text-align-center { text-align: center; }
-.sw-text-align-end { text-align: end; }
-
 .sw-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -119,9 +99,7 @@ ${cssPopupHostRules()}
   font-variant-numeric: tabular-nums;
 }
 
-${textVariantRules()}
-
-${compactTextVariantRules()}
+${cssTextClasses()}
 
 ${cssButtonClasses()}
 
@@ -133,6 +111,8 @@ ${cssDataClasses()}
 
 ${cssDateFieldClasses()}
 
+${cssCalendarButtonClasses()}
+
 ${cssChartClasses()}
 
 ${cssChromeClasses()}

package/dist/css/css-date-field.js

@@ -142,7 +142,8 @@ function calendarRules() {
   height: auto;
   inset: auto;
   margin: 0;
-  max-width: calc(100vw - var(--sw-space-2) - var(--sw-space-2));
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
   overflow: visible;
   padding: var(--sw-space-3);
   position: fixed;

package/dist/css/css-palettes.js

@@ -1,10 +1,20 @@
 import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
+/**
+ * A palette sets the colours it overlays, plus the accent tint whenever it
+ * moves the accent or surface the tint is mixed from.
+ */
+function overlaidColorKey(key, overlay) {
+    if (key === 'accentSubtle') {
+        return Boolean(overlay.accentSubtle || overlay.accent || overlay.surface);
+    }
+    return Boolean(overlay[key]);
+}
 function paletteCustomProperties(id, scheme) {
     const overlay = colorsForPalette(id, scheme);
     const theme = createTheme({ colorScheme: scheme, palette: id });
     const lines = [];
     for (const key of semanticColorKeys) {
-        if (overlay[key]) {
+        if (overlaidColorKey(key, overlay)) {
             lines.push(`  --sw-color-${key}: ${theme.colors[key]};`);
         }
     }

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

@@ -0,0 +1 @@
+export declare function cssTextClasses(): string;

package/dist/css/css-text.js

@@ -0,0 +1,42 @@
+import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+function textClassNames() {
+    return Object.keys(typographyVariants).map((name) => `.sw-text-${name}`);
+}
+/*
+ * Text renders `p` and `h1`–`h4` by default. The browser gives those a
+ * block margin, which a flex Stack or Inline does not collapse, so it would
+ * add to every gap. `:where()` keeps the reset at zero specificity: it beats
+ * the browser's margins (author styles win over the user agent's) and loses
+ * to any authored margin, such as `sw-sr-only` or a consumer's class.
+ */
+function textMarginReset() {
+    return `:where(${textClassNames().join(', ')}) { margin: 0; }`;
+}
+function textVariantRules() {
+    return Object.entries(typographyVariants)
+        .map(([name, variant]) => {
+        const tabular = 'tabularNums' in variant && variant.tabularNums
+            ? ' font-variant-numeric: tabular-nums;'
+            : '';
+        return `.sw-text-${name} { font-family: var(--sw-font-sans); font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; font-weight: ${variant.fontWeight}; letter-spacing: ${variant.letterSpacing}px;${tabular} }`;
+    })
+        .join('\n');
+}
+function compactTextVariantRules() {
+    const rules = Object.entries(compactTypographyVariants)
+        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
+        .join('\n');
+    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
+}
+export function cssTextClasses() {
+    return `.sw-text-align-start { text-align: start; }
+.sw-text-align-center { text-align: center; }
+.sw-text-align-end { text-align: end; }
+
+${textMarginReset()}
+
+${textVariantRules()}
+
+${compactTextVariantRules()}`;
+}

package/dist/css/stacking.js

@@ -13,7 +13,8 @@
  * 4. `topChrome`: the sticky AppHeader, over a lifted surface that scrolls up
  *    under it (the header is the page's way back, and a popup opens downward).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, Tooltip, DateField calendar) over everything in the page.
+ *    list, Tooltip, the DateField and CalendarButton calendar) over
+ *    everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
  */
@@ -29,9 +30,11 @@ export function zIndex(layer) {
 }
 const openPopups = [
     '.sw-select-list',
-    '.sw-action-menu-list:not([hidden])',
-    '.sw-tooltip:not([hidden])',
     // Rendered only while open; on the top layer where the popover API exists.
+    '.sw-action-menu-list',
+    '.sw-tooltip:not([hidden])',
+    // DateField and CalendarButton share it. Rendered only while open; on the
+    // top layer where the popover API exists.
     '.sw-date-field-calendar',
 ].join(', ');
 const popupHosts = ['.sw-card-glass', '.sw-accordion'];

package/dist/css/stylesheet.js

@@ -4,6 +4,7 @@ import { actionMenuClassCatalog } from './css-action-menu.js';
 import { accordionClassCatalog } from './css-accordion.js';
 import { switchClassCatalog } from './css-switch.js';
 import { dateFieldClassCatalog } from './css-date-field.js';
+import { calendarButtonClassCatalog } from './css-calendar-button.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
@@ -57,6 +58,7 @@ export function utilityClassCatalog() {
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
+        ...calendarButtonClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),

package/dist/css/touch-target.d.ts

@@ -0,0 +1,2 @@
+export declare const touchTarget = "var(--sw-control-md-min-height)";
+export declare const coarsePointerQuery = "(pointer: coarse)";

package/dist/css/touch-target.js

@@ -0,0 +1,7 @@
+/*
+ * The comfortable touch target on a coarse pointer: the md control height,
+ * 44 px, both ways. Controls drawn smaller for a fine pointer (CalendarButton
+ * at sm and xs, the ActionMenu trigger and commands) grow to it on touch.
+ */
+export const touchTarget = 'var(--sw-control-md-min-height)';
+export const coarsePointerQuery = '(pointer: coarse)';

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
+export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export { ActionBar } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
 export { DateField, } from './components/DateField.js';
+export { CalendarButton, } from './components/CalendarButton.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Progress, } from './components/Progress.js';

package/dist/palette/amber.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #B45309;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #FAF3EE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #FCD34D;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #322E23;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 61, 38, 0.72);

package/dist/palette/capri.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #0077B6;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #F2F8FB;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #48CAE4;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #202D32;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(36, 59, 66, 0.72);

package/dist/palette/cerulean.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #0066CC;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #E6F0FA;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #5AC8FA;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #222D34;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(39, 59, 70, 0.72);

package/dist/palette/cornflower.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #4F6BED;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #FFFFFF;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #93A4FF;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #282A35;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(49, 52, 71, 0.72);

package/dist/palette/fuchsia.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #C026D3;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #FEFBFE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #E879F9;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #302534;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(65, 45, 69, 0.72);

package/dist/palette/harvest.css

@@ -7,6 +7,7 @@
   --sw-color-muted: #5C5346;
   --sw-color-accent: #3E3E24;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #DAD5C4;
   --sw-color-border: #C9C2AE;
   --sw-button-secondary-border: #C9C2AE;
   --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
   --sw-color-muted: #B8B090;
   --sw-color-accent: #CEA453;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #2F4A2C;
   --sw-color-border: #3D5238;
   --sw-button-secondary-border: #3D5238;
   --sw-glass-blur: 24px;

package/dist/palette/ink.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #1D1D1F;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #E8E8E9;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #F5F5F7;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #323234;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(67, 67, 69, 0.72);

package/dist/palette/mocha.css

@@ -7,6 +7,7 @@
   --sw-color-muted: #6B5348;
   --sw-color-accent: #473333;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #E6DBCF;
   --sw-color-border: #E0CBA8;
   --sw-button-secondary-border: #E0CBA8;
   --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
   --sw-color-muted: #D4C4A8;
   --sw-color-accent: #E8C69F;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #684F4B;
   --sw-color-border: #6B5353;
   --sw-button-secondary-border: #6B5353;
   --sw-glass-blur: 24px;

package/dist/palette/navy.css

@@ -3,6 +3,7 @@
 [data-theme='light'] {
   --sw-color-accent: #0A2540;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-accentSubtle: #E7E9EC;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
 [data-theme='dark'] {
   --sw-color-accent: #7EB8FF;
   --sw-color-onAccent: #101214;
+  --sw-color-accentSubtle: #262C35;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(46, 56, 71, 0.72);