@scalewing/react 1.30.0 → 1.32.0

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

@@ -1,7 +1,9 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
+import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, } from './css-action-menu-trigger.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
+import { quietFill } from './quiet-fill.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
@@ -103,7 +105,7 @@ export function cssActionMenuClasses() {
 
 .sw-action-menu-item:hover,
 .sw-action-menu-item:focus-visible {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-action-menu-item:disabled {
@@ -162,7 +164,9 @@ export function cssActionMenuClasses() {
   .sw-action-menu-item {
     min-height: ${touchTarget};
   }
-}`;
+}
+
+${cssActionMenuTriggerClasses()}`;
 }
 export function actionMenuClassCatalog() {
     return [
@@ -176,5 +180,6 @@ export function actionMenuClassCatalog() {
         'sw-action-menu-detail',
         'sw-action-menu-chevron',
         'sw-action-menu-separator',
+        ...actionMenuTriggerClassCatalog(),
     ];
 }

package/dist/css/css-app-header-bar.d.ts

@@ -0,0 +1,10 @@
+export declare const appHeaderAppearances: readonly ["glass", "bar"];
+/**
+ * How an AppHeader is drawn: `glass` (the default) is a rounded frosted
+ * card; `bar` is a full-width band of the solid surface with a hairline
+ * under it and no rounding, set against the page's edges.
+ */
+export type AppHeaderAppearance = (typeof appHeaderAppearances)[number];
+export declare const appHeaderBarClass = "sw-app-header-bar";
+export declare function cssAppHeaderBarClasses(): string;
+export declare function appHeaderBarClassCatalog(): string[];

package/dist/css/css-app-header-bar.js

@@ -0,0 +1,26 @@
+export const appHeaderAppearances = ['glass', 'bar'];
+export const appHeaderBarClass = 'sw-app-header-bar';
+const bar = `.${appHeaderBarClass}`;
+/*
+ * A bar header: the surface with no blur or specular line, no radius, and
+ * the border hairline under it only. One class, emitted after the glass
+ * header, so it wins by order; the Box border classes are emitted later
+ * still, so a Box `border` prop on the header wins over it, as on any
+ * Box-based frame. Reduce Transparency sets the same surface. Forced
+ * colors keep the hairline.
+ */
+export function cssAppHeaderBarClasses() {
+    return `${bar} {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+  border-color: var(--sw-color-border);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 1px;
+  box-shadow: none;
+}`;
+}
+export function appHeaderBarClassCatalog() {
+    return [appHeaderBarClass];
+}

package/dist/css/css-box-border.d.ts

@@ -1,4 +1,9 @@
-export type BoxBorderValue = boolean | 'dashed';
+/**
+ * `true` (solid) or `'dashed'` draws the hairline all round; `'bottom'`
+ * draws it under the box only, for a full-width bar such as a header or a
+ * section's sub-navigation.
+ */
+export type BoxBorderValue = boolean | 'dashed' | 'bottom';
 /** The generated class for a Box `border` prop, or none for `false`. */
 export declare function boxBorderClass(border: BoxBorderValue | undefined): string | undefined;
 export declare function cssBoxBorderClasses(): string;

package/dist/css/css-box-border.js

@@ -6,8 +6,11 @@ function borderClass(style) {
 export function boxBorderClass(border) {
     if (!border)
         return undefined;
+    if (border === 'bottom')
+        return bottomBorderClass;
     return borderClass(border === 'dashed' ? 'dashed' : 'solid');
 }
+const bottomBorderClass = 'sw-border-bottom';
 /*
  * A Box `border` is a token hairline. These rules are emitted after every
  * component rule so that, at equal specificity, the prop still wins over a
@@ -15,10 +18,11 @@ export function boxBorderClass(border) {
  * forced colors the system border color replaces the token and the style stays.
  */
 export function cssBoxBorderClasses() {
-    return borderStyles
-        .map((style) => `.${borderClass(style)} { border: 1px ${style} var(--sw-color-border); }`)
-        .join('\n');
+    return [
+        ...borderStyles.map((style) => `.${borderClass(style)} { border: 1px ${style} var(--sw-color-border); }`),
+        `.${bottomBorderClass} { border-width: 0 0 1px; border-style: solid; border-color: var(--sw-color-border); }`,
+    ].join('\n');
 }
 export function boxBorderClassCatalog() {
-    return borderStyles.map(borderClass);
+    return [...borderStyles.map(borderClass), bottomBorderClass];
 }

package/dist/css/css-button-group-attached.js

@@ -1,4 +1,5 @@
 import { breakpointQuery } from './breakpoints.js';
+import { buttonGroupTrackClassCatalog, cssButtonGroupTrackClasses, } from './css-button-group-track.js';
 import { joinedZIndex } from './stacking.js';
 /*
  * An attached ButtonGroup is one joined control, such as Previous, Today
@@ -63,8 +64,10 @@ ${group} > .sw-button:focus-visible {
 @media ${breakpointQuery('below', 'md')} {
   ${group} { align-items: stretch; flex-direction: row; }
   ${group} > * { width: auto; }
-}`;
+}
+
+${cssButtonGroupTrackClasses()}`;
 }
 export function buttonGroupAttachedClassCatalog() {
-    return ['sw-button-group-attached'];
+    return ['sw-button-group-attached', ...buttonGroupTrackClassCatalog()];
 }

package/dist/css/css-button-group-track.d.ts

@@ -0,0 +1,11 @@
+export declare const buttonGroupAppearances: readonly ["default", "track"];
+/**
+ * How an attached ButtonGroup is drawn: `default` keeps each button's own
+ * fill and outline, joined; `track` sets the buttons as words on one
+ * quiet grey track, a hairline between them, such as Previous, Today and
+ * Next above a day.
+ */
+export type ButtonGroupAppearance = (typeof buttonGroupAppearances)[number];
+export declare const buttonGroupTrackClass = "sw-button-group-track";
+export declare function cssButtonGroupTrackClasses(): string;
+export declare function buttonGroupTrackClassCatalog(): string[];

package/dist/css/css-button-group-track.js

@@ -0,0 +1,48 @@
+import { quietFill } from './quiet-fill.js';
+export const buttonGroupAppearances = ['default', 'track'];
+export const buttonGroupTrackClass = 'sw-button-group-track';
+const track = `.sw-button-group.sw-button-group-attached.${buttonGroupTrackClass}`;
+/*
+ * The track: the attached group takes the quiet fill and the sm radius
+ * (its buttons' outer corners already are), and every button in it loses
+ * its own fill and outline to take its words in the text color. The
+ * divider between two buttons is a border hairline at full height, after
+ * the attached group's tinted divider (one more class, so it wins at the
+ * same place); it is the second button's start border, so the one before
+ * a disabled button fades with it. The divider is the canvas hairline
+ * (about 1.2:1 on the track, as the board draws it; fainter on a dark
+ * card). A pressed button keeps its ring and a focused one its outline,
+ * over the track. A disabled button fades, `disabledAppearance="neutral"`
+ * included (its muted words would read as enabled ones here). Forced
+ * colors outline the track, keep every border and draw a pressed button's
+ * border in Highlight. A track is for equal-weight navigation: every
+ * variant's meaning goes, so keep a primary or destructive action out of it.
+ */
+export function cssButtonGroupTrackClasses() {
+    return `${track} {
+  background: ${quietFill};
+  border-radius: var(--sw-radius-sm);
+}
+
+${track} > .sw-button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--sw-color-text);
+}
+
+${track} > .sw-button + .sw-button {
+  border-inline-start-color: var(--sw-color-border);
+}
+
+${track} > .sw-button:disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  ${track} { outline: 1px solid CanvasText; }
+  ${track} > .sw-button[aria-pressed='true'] { border-color: Highlight; }
+}`;
+}
+export function buttonGroupTrackClassCatalog() {
+    return [buttonGroupTrackClass];
+}

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

@@ -1,7 +1,24 @@
-import { type ButtonSize, type ButtonVariant } from '@scalewing/tokens';
+import { type ButtonSize } from '@scalewing/tokens';
+/**
+ * The web Button's variants: the shared tiers from `@scalewing/tokens`, plus
+ * `neutral`, a quiet grey fill in the text color for an action beside the
+ * primary that should not draw the eye (a Cancel on a sheet). Native has no
+ * `neutral` yet.
+ */
+export declare const webButtonVariants: readonly ["primary", "secondary", "tertiary", "ghost", "danger", "neutral"];
+export type WebButtonVariant = (typeof webButtonVariants)[number];
+export declare const buttonDisabledAppearances: readonly ["faded", "neutral"];
+/**
+ * How a disabled button looks: `faded` (the default) fades the variant as
+ * any disabled control; `neutral` draws a filled button on the quiet grey
+ * fill with muted words, whatever its variant (a ghost button, which has
+ * no fill, still fades).
+ */
+export type ButtonDisabledAppearance = (typeof buttonDisabledAppearances)[number];
 export declare function buttonClassNames(options: {
     size: ButtonSize;
-    variant: ButtonVariant;
+    variant: WebButtonVariant;
+    disabledAppearance?: ButtonDisabledAppearance;
 }): string[];
 export declare const pressedRingGap = 2;
 export declare const pressedRingWidth = 4;

package/dist/css/css-button.js

@@ -1,12 +1,24 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
+import { quietFill } from './quiet-fill.js';
 const label = typographyVariants.label;
+/**
+ * The web Button's variants: the shared tiers from `@scalewing/tokens`, plus
+ * `neutral`, a quiet grey fill in the text color for an action beside the
+ * primary that should not draw the eye (a Cancel on a sheet). Native has no
+ * `neutral` yet.
+ */
+export const webButtonVariants = [...buttonVariants, 'neutral'];
+export const buttonDisabledAppearances = ['faded', 'neutral'];
 export function buttonClassNames(options) {
     return [
         'sw-button',
         `sw-button-${options.variant}`,
         `sw-button-${options.size}`,
+        ...(options.disabledAppearance === 'neutral'
+            ? ['sw-button-disabled-neutral']
+            : []),
     ];
 }
 function variantRules() {
@@ -16,8 +28,24 @@ function variantRules() {
         `.sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }`,
         `.sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }`,
         `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
+        `.sw-button-neutral { background: ${quietFill}; border-color: transparent; color: var(--sw-color-text); }`,
     ].join('\n');
 }
+/*
+ * A neutral disabled button: the quiet fill with its words in the muted
+ * color at 48 %, about #AEAEAE on the grey (a disabled control needs no
+ * contrast, and the faded words say it cannot be pressed), at full
+ * opacity so no accent shows through.
+ * Forced colors draw it as any disabled button.
+ */
+function disabledNeutralRules() {
+    return `.sw-button-disabled-neutral:disabled:not(.sw-button-ghost) {
+  background: ${quietFill};
+  border-color: transparent;
+  color: color-mix(in srgb, var(--sw-color-muted) 48%, transparent);
+  opacity: 1;
+}`;
+}
 /*
  * A toggle button's pressed state is an accent ring drawn outside the fill,
  * past a 2 px gap in the page background: the ring meets the background on
@@ -92,6 +120,7 @@ export function cssButtonClasses() {
 }
 
 ${variantRules()}
+${disabledNeutralRules()}
 ${pressedRules()}
 ${sizeRules()}
 ${groupRules()}
@@ -118,7 +147,8 @@ function groupRules() {
 export function buttonClassCatalog() {
     return [
         'sw-button',
-        ...buttonVariants.map((variant) => `sw-button-${variant}`),
+        ...webButtonVariants.map((variant) => `sw-button-${variant}`),
+        'sw-button-disabled-neutral',
         ...buttonSizes.map((size) => `sw-button-${size}`),
         'sw-button-group',
         ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),

package/dist/css/css-chrome.js

@@ -1,4 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { appHeaderBarClassCatalog, cssAppHeaderBarClasses, } from './css-app-header-bar.js';
+import { cssNavWordsClasses, navWordsClassCatalog } from './css-nav-words.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -13,6 +15,8 @@ export function cssChromeClasses() {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
 }
 
+${cssAppHeaderBarClasses()}
+
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
@@ -49,6 +53,8 @@ export function cssChromeClasses() {
   }
 }
 
+${cssNavWordsClasses()}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: ${caption.fontSize}px;
   letter-spacing: ${caption.letterSpacing}px;
@@ -68,5 +74,12 @@ export function cssChromeClasses() {
 }`;
 }
 export function chromeClassCatalog() {
-    return ['sw-app-header', 'sw-app-header-sticky', 'sw-nav', 'sw-field-xs'];
+    return [
+        'sw-app-header',
+        'sw-app-header-sticky',
+        ...appHeaderBarClassCatalog(),
+        'sw-nav',
+        ...navWordsClassCatalog(),
+        'sw-field-xs',
+    ];
 }

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

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

package/dist/css/css-combobox.js

@@ -0,0 +1,136 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/*
+ * The combobox input is a Field's input. Its list is a glass popover on
+ * the popup layer (as Select's list), at least as wide as the input: a
+ * caption heading per group, then options at the md control height with
+ * the label, a badge and a muted description on one wrapping line. The
+ * active option (the one aria-activedescendant names) takes the soft
+ * muted fill; a hairline parts each option from the one before it, as
+ * the boards draw it; a disabled option is muted and not pressable; the action
+ * ends the list in the accent colour over a hairline. The empty text and
+ * the note are muted captions under the list.
+ */
+export function cssComboboxClasses() {
+    return `.sw-combobox {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-combobox-popup {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  inset: auto;
+  margin: 0;
+  max-height: min(var(--sw-select-max), calc(100% - var(--sw-space-2) - var(--sw-space-2)));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  ${zIndex('popup')}
+}
+
+.sw-combobox-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: var(--sw-space-2) var(--sw-space-3) var(--sw-space-1);
+}
+
+.sw-combobox-option {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-3);
+}
+
+.sw-combobox-option + .sw-combobox-option {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-combobox-label {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-combobox-description {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-combobox-option[aria-selected='true'] {
+  background: ${quietFill};
+}
+
+.sw-combobox-option[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.sw-combobox-option[aria-disabled='true'] .sw-combobox-label {
+  color: var(--sw-color-muted);
+}
+
+.sw-combobox-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}
+
+.sw-combobox-empty,
+.sw-combobox-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+@media (forced-colors: active) {
+  .sw-combobox-popup { border-color: CanvasText; }
+  .sw-combobox-option[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-combobox-option[aria-selected='true'] .sw-combobox-description { color: HighlightText; }
+  .sw-combobox-option[aria-selected='true'] .sw-badge { forced-color-adjust: auto; }
+  .sw-combobox-option[aria-disabled='true'] .sw-combobox-label { color: GrayText; }
+  .sw-combobox-option[aria-selected='true'][aria-disabled='true'] .sw-combobox-label { color: HighlightText; }
+  .sw-combobox-option + .sw-combobox-option { border-color: CanvasText; }
+  .sw-combobox-action { border-color: CanvasText; }
+}`;
+}
+export function comboboxClassCatalog() {
+    return [
+        'sw-combobox',
+        'sw-combobox-popup',
+        'sw-combobox-list',
+        'sw-combobox-heading',
+        'sw-combobox-option',
+        'sw-combobox-label',
+        'sw-combobox-description',
+        'sw-combobox-action',
+        'sw-combobox-empty',
+        'sw-combobox-note',
+    ];
+}

package/dist/css/css-components.js

@@ -13,7 +13,9 @@ import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
 import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
+import { cssDialogBandedClasses } from './css-dialog-banded.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
+import { cssComboboxClasses } from './css-combobox.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
@@ -64,6 +66,7 @@ function reducedTransparencyRules() {
   .sw-select-list,
   .sw-action-menu-list,
   .sw-multi-select-panel,
+  .sw-combobox-popup,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
@@ -142,12 +145,15 @@ ${cssDialogClasses()}
 
 ${cssDialogFrameClasses()}
 
+${cssDialogBandedClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssComboboxClasses()}
 ${cssMultiSelectClasses()}
 
 ${cssActionBarClasses()}

package/dist/css/css-data.js

@@ -1,4 +1,5 @@
-import { buttonVariants, typographyVariants } from '@scalewing/tokens';
+import { typographyVariants } from '@scalewing/tokens';
+import { webButtonVariants } from './css-button.js';
 export const badgeTones = [
     'neutral',
     'accent',
@@ -20,7 +21,7 @@ export function badgeClassNames(tone, size = 'md') {
  * button has no fill.
  */
 function badgeOnFilledButtonRules() {
-    const filled = buttonVariants
+    const filled = webButtonVariants
         .filter((variant) => variant !== 'ghost')
         .map((variant) => `.sw-button-${variant}`)
         .join(', ');

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

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -226,7 +227,7 @@ function calendarRules() {
 
 .sw-date-field-step:hover:not([aria-disabled='true']),
 .sw-date-field-day:hover:not([aria-disabled='true']) {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 /*

package/dist/css/css-denomination-appearance.d.ts

@@ -0,0 +1,21 @@
+export declare const denominationGridFrames: readonly ["none", "table"];
+/**
+ * How a strip sits on the page: `none` (the default) is open rows on the
+ * page's own surface; `table` is a framed table: the surface inside a
+ * hairline with rounded corners, the heading row on the subtle fill, a
+ * rule between columns, and the counts at label size, centred under
+ * their heads.
+ */
+export type DenominationGridFrame = (typeof denominationGridFrames)[number];
+export declare const denominationTotalEmphases: readonly ["default", "strong"];
+/**
+ * How the row totals read: `default` is data type in the row's tone (a
+ * neutral row's muted); `strong` is label type in bold, a neutral row's in
+ * the text color and a toned row's in its tone.
+ */
+export type DenominationTotalEmphasis = (typeof denominationTotalEmphases)[number];
+export declare const denominationFramedClass = "sw-denomination-framed";
+export declare const denominationScrollFramedClass = "sw-denomination-scroll-framed";
+export declare const denominationTotalsStrongClass = "sw-denomination-totals-strong";
+export declare function cssDenominationAppearanceClasses(): string;
+export declare function denominationAppearanceClassCatalog(): string[];

package/dist/css/css-denomination-appearance.js

@@ -0,0 +1,114 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+const label = typographyVariants.label;
+export const denominationGridFrames = ['none', 'table'];
+export const denominationTotalEmphases = ['default', 'strong'];
+export const denominationFramedClass = 'sw-denomination-framed';
+export const denominationScrollFramedClass = 'sw-denomination-scroll-framed';
+export const denominationTotalsStrongClass = 'sw-denomination-totals-strong';
+const framed = `.sw-denomination-strip.${denominationFramedClass}`;
+const strong = `.${denominationTotalsStrongClass}`;
+/*
+ * A framed strip. The frame is the scroll region's border, so it stays put
+ * while a wide strip scrolls inside it and its shades still draw on the
+ * region's own shadow. The cells pad a space-3 step across (space-2 below
+ * md) and the body cells a space-4 step down, so a read-only row is about
+ * as tall as an entry row; the cell padding is zero-specificity past the
+ * frame class, so an entry cell keeps its own space-1 padding and, below
+ * md, the collapsed total column is collapsed again. The row labels pad
+ * the same step whatever their appearance. The pinned label sits on the
+ * surface at the same low specificity, so a quiet row's label keeps the
+ * subtle fill; the pinned corner takes the heading row's fill. The column
+ * rule is a border on every cell after a row's first, so forced colours
+ * keep it and RTL mirrors it; the collapsed total column draws none.
+ * Emitted after the grid's own rules, its label appearances and its
+ * narrow-screen padding, so it wins at every width.
+ */
+function frameRules() {
+    return `.${denominationScrollFramedClass} {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+}
+
+${framed} :where(th, td) {
+  padding: var(--sw-space-4) var(--sw-space-3);
+}
+
+${framed} thead :where(th, td),
+${framed} thead .sw-denomination-corner:first-child {
+  background: var(--sw-color-subtle);
+  padding-block: var(--sw-space-2);
+}
+
+${framed} :is(th, td) + :is(th, td) {
+  border-inline-start: 1px solid var(--sw-color-border);
+}
+
+${framed} :where(.sw-denomination-label) {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+}
+
+${framed} .sw-denomination-label {
+  padding-inline: var(--sw-space-3);
+}
+
+${framed} .sw-denomination-head:not(.sw-denomination-total-head),
+${framed} .sw-denomination-cell {
+  text-align: center;
+}
+
+${framed} .sw-denomination-cell {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${framed} :where(th, td),
+  ${framed} .sw-denomination-label { padding-inline: var(--sw-space-2); }
+  ${framed} .sw-denomination-total,
+  ${framed} .sw-denomination-total-head { border-inline-start: 0; padding: 0; }
+}
+
+@media (forced-colors: active) {
+  .${denominationScrollFramedClass},
+  ${framed} :is(th, td) + :is(th, td) { border-color: CanvasText; }
+}`;
+}
+/*
+ * Strong totals: label type in bold, a neutral row's in the text color
+ * (its tone is the muted color) and a toned row's left in its tone, under
+ * the label on a phone too. One class more specific than the plain
+ * labels' inline total, so a neutral row's total is the text color there.
+ */
+function totalRules() {
+    return `${strong} .sw-denomination-total {
+  font-size: ${label.fontSize}px;
+  font-weight: 700;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+${strong} .sw-denomination-total-inline { font-weight: 700; }
+
+${strong} .sw-denomination-row-neutral .sw-denomination-total,
+${strong} .sw-denomination-row-neutral .sw-denomination-total-inline {
+  color: var(--sw-color-text);
+}`;
+}
+export function cssDenominationAppearanceClasses() {
+    return `${frameRules()}
+
+${totalRules()}`;
+}
+export function denominationAppearanceClassCatalog() {
+    return [
+        denominationScrollFramedClass,
+        denominationFramedClass,
+        denominationTotalsStrongClass,
+    ];
+}