@scalewing/react 1.26.0 → 1.28.0

package/dist/components/toast/use-toast-timer.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export function useToastTimer({ duration, onExpire, paused, running, }) {
+    const leftRef = useRef(duration);
+    const expireRef = useRef(onExpire);
+    useEffect(() => {
+        expireRef.current = onExpire;
+    }, [onExpire]);
+    // A fresh count each time the toast opens or its duration changes.
+    useEffect(() => {
+        leftRef.current = duration;
+    }, [duration, running]);
+    useEffect(() => {
+        if (!running || paused)
+            return;
+        const started = Date.now();
+        let fired = false;
+        const timer = window.setTimeout(() => {
+            fired = true;
+            leftRef.current = duration;
+            expireRef.current();
+        }, leftRef.current);
+        return () => {
+            window.clearTimeout(timer);
+            // After it fired the count is whole again (a consumer that keeps the
+            // toast open gets the full time on its next run, not none).
+            if (!fired)
+                leftRef.current = Math.max(0, leftRef.current - (Date.now() - started));
+        };
+    }, [duration, paused, running]);
+}

package/dist/css/css-action-bar-summary.d.ts

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

package/dist/css/css-action-bar-summary.js

@@ -0,0 +1,48 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+/*
+ * The bar's figure: label, value and detail on one baseline, a small gap
+ * apart, wrapping as one phrase. The value takes the heading variant and
+ * tabular figures from the text classes it carries (so it steps down below
+ * md with every heading); the label and detail are muted label-size words
+ * at regular weight. A tone colors the value only. Forced colors keep the
+ * system text color.
+ */
+export function cssActionBarSummaryClasses() {
+    return `.sw-action-bar-summary {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: inline-flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-action-bar-summary-label,
+.sw-action-bar-summary-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-action-bar-summary-value {
+  color: var(--sw-color-text);
+}
+
+.sw-action-bar-summary-danger .sw-action-bar-summary-value { color: var(--sw-color-danger); }
+.sw-action-bar-summary-success .sw-action-bar-summary-value { color: var(--sw-color-success); }
+
+@media (forced-colors: active) {
+  .sw-action-bar-summary-value { color: CanvasText; }
+}`;
+}
+export function actionBarSummaryClassCatalog() {
+    return [
+        'sw-action-bar-summary',
+        'sw-action-bar-summary-label',
+        'sw-action-bar-summary-value',
+        'sw-action-bar-summary-detail',
+        'sw-action-bar-summary-danger',
+        'sw-action-bar-summary-success',
+    ];
+}

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

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { actionBarSummaryClassCatalog, cssActionBarSummaryClasses, } from './css-action-bar-summary.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 /* The bar floats a step above the bottom edge and clears the home indicator. */
@@ -93,6 +94,8 @@ export function cssActionBarClasses() {
   .sw-action-bar-actions > * { flex: 1 1 auto; }
 }
 
+${cssActionBarSummaryClasses()}
+
 ${stickyRules()}`;
 }
 export function actionBarClassCatalog() {
@@ -101,6 +104,7 @@ export function actionBarClassCatalog() {
         'sw-action-bar-status',
         'sw-action-bar-actions',
         'sw-action-bar-sticky',
+        ...actionBarSummaryClassCatalog(),
         ...breakpoints.map((breakpoint) => actionBarStickyClass(breakpoint)),
     ];
 }

package/dist/css/css-components.js

@@ -13,12 +13,14 @@ 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 { cssDialogFrameClasses } from './css-dialog-frame.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 { cssNoticeClasses } from './css-notice.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
@@ -31,7 +33,10 @@ import { cssGridClasses } from './css-grid.js';
 import { cssGridSpanClasses } from './css-grid-span.js';
 import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
+import { cssStepperClasses } from './css-stepper.js';
+import { cssStepsClasses } from './css-steps.js';
 import { cssToastClasses } from './css-toast.js';
+import { cssToastCardClasses } from './css-toast-card.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
 import { cssPopupHostRules } from './stacking.js';
 /*
@@ -44,6 +49,7 @@ function reducedTransparencyRules() {
   .sw-card-glass,
   .sw-app-header,
   .sw-action-bar,
+  .sw-steps-item,
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
@@ -130,6 +136,8 @@ ${cssSectionNavClasses()}
 
 ${cssDialogClasses()}
 
+${cssDialogFrameClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}
@@ -144,6 +152,8 @@ ${cssSpinnerClasses()}
 
 ${cssProgressClasses()}
 
+${cssNoticeClasses()}
+
 ${cssTooltipClasses()}
 
 ${cssInfoTipClasses()}
@@ -164,10 +174,16 @@ ${cssDenominationGridClasses()}
 
 ${cssFieldClasses()}
 
+${cssStepperClasses()}
+
+${cssStepsClasses()}
+
 ${cssSplitClasses()}
 
 ${cssToastClasses()}
 
+${cssToastCardClasses()}
+
 ${cssResponsiveClasses()}
 
 ${cssBoxBorderClasses()}

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

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

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

@@ -0,0 +1,78 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/** An enabled entry count, unless its Stepper shows an error (whose danger border wins). */
+const tonedEntryInput = '[data-theme] .sw-denomination-cell-toned .sw-stepper:not(.sw-stepper-invalid) input.sw-stepper-input:not(:disabled)';
+/*
+ * Count entry and the labels around it. An entry cell holds a full-width
+ * Stepper; its count keeps spacing step 8 (room for three digits), so a narrow strip scrolls
+ * in its region instead of crushing the counts. A cell tone draws the
+ * count's border in the tone, a hairline thicker through an inset shadow so
+ * nothing moves. A caption is a muted caption-size line: under a row label,
+ * or after a column label. A quiet row sits on the subtle fill, its pinned
+ * label too. A disabled row fades its label, counts and total (its entry is
+ * disabled by its Stepper); a pinned label fades its contents, not its
+ * fill, so counts never show through it.
+ */
+export function cssDenominationEntryClasses() {
+    return `.sw-denomination-strip td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  grid-template-columns: var(--sw-space-6) minmax(var(--sw-space-8), 1fr) var(--sw-space-6);
+}
+
+/* A strip with entry rows centres its heads and read-only counts over the steppers. */
+.sw-denomination-strip-entry .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+${tonedEntryInput} {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+.sw-denomination-label-words {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-denomination-label-caption,
+.sw-denomination-head-caption {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${caption.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-denomination-row-quiet,
+.sw-denomination-strip .sw-denomination-row-quiet .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-label-body,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-cell,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-total {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  ${tonedEntryInput} { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  .sw-denomination-label-caption,
+  .sw-denomination-head-caption { color: CanvasText; }
+}`;
+}
+export function denominationEntryClassCatalog() {
+    return [
+        'sw-denomination-entry',
+        'sw-denomination-strip-entry',
+        'sw-denomination-label-words',
+        'sw-denomination-label-caption',
+        'sw-denomination-head-caption',
+        'sw-denomination-row-quiet',
+        'sw-denomination-row-disabled',
+    ];
+}

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

@@ -1,7 +1,9 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './css-denomination-label.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
+import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -249,8 +251,12 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 
 ${cssDenominationCellToneClasses()}
 
+${cssDenominationEntryClasses()}
+
 ${cssDenominationAlignedClasses()}
 
+${cssDenominationLabelClasses()}
+
 @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; }
@@ -290,6 +296,8 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile',
         'sw-denomination-subtotal',
         ...denominationCellToneClassCatalog(),
+        ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
+        ...denominationLabelClassCatalog(),
     ];
 }

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

@@ -0,0 +1,10 @@
+export declare const denominationLabelAppearances: readonly ["tone", "plain"];
+/**
+ * How a grid's row labels look: `tone` (the default) marks each label with
+ * its row's tone, a stripe at its start and the words in the tone; `plain`
+ * sets the words in the text color at label weight, with no stripe.
+ */
+export type DenominationLabelAppearance = (typeof denominationLabelAppearances)[number];
+export declare const denominationLabelsPlainClass = "sw-denomination-labels-plain";
+export declare function cssDenominationLabelClasses(): string;
+export declare function denominationLabelClassCatalog(): string[];

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

@@ -0,0 +1,36 @@
+import { breakpointQuery } from './breakpoints.js';
+export const denominationLabelAppearances = ['tone', 'plain'];
+export const denominationLabelsPlainClass = 'sw-denomination-labels-plain';
+const plain = `.${denominationLabelsPlainClass}`;
+/*
+ * Plain row labels: the text color, no stripe, and the strip's label cell
+ * back to its column's own padding. The row's tone still colors its total.
+ * Emitted after the grid's rules (and its narrow-screen padding), and one
+ * class more specific, so it wins at every width.
+ */
+export function cssDenominationLabelClasses() {
+    return `${plain} .sw-denomination-label {
+  border-inline-start: 0;
+  color: var(--sw-color-text);
+}
+
+/* The total under a phone's label keeps its row's tone. */
+${plain} .sw-denomination-total-inline { color: var(--sw-denomination-tone); }
+
+.sw-denomination-strip${plain} .sw-denomination-label {
+  padding-inline-start: var(--sw-space-2);
+}
+
+.sw-denomination-strip${plain} .sw-denomination-label::before { content: none; }
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-denomination-strip${plain} .sw-denomination-label { padding-inline-start: var(--sw-space-1); }
+}
+
+@media (forced-colors: active) {
+  ${plain} .sw-denomination-label { color: CanvasText; }
+}`;
+}
+export function denominationLabelClassCatalog() {
+    return [denominationLabelsPlainClass];
+}

package/dist/css/css-dialog-frame.d.ts

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

package/dist/css/css-dialog-frame.js

@@ -0,0 +1,83 @@
+/*
+ * The dialog's frame beyond its title: a consumer icon before the title, a
+ * muted description under it, and a footer pinned to the bottom edge.
+ *
+ * With an icon or a description the header row centers its parts (the
+ * icon, the title over the description, the close button). The footer is
+ * sticky to the bottom of the dialog's own scrollport, bleeds to its
+ * edges under a hairline, and sits on the solid surface so content
+ * scrolling under it never shows through: the summary figure first, the
+ * actions at the end, wrapping under one another on a narrow sheet. In a
+ * bottom sheet its surface reaches the sheet's bottom edge and its own
+ * padding clears the home indicator (see the sheet rules in css-dialog.ts).
+ */
+export function cssDialogFrameClasses() {
+    return `.sw-dialog-header-framed {
+  align-items: center;
+  gap: var(--sw-space-3);
+}
+
+.sw-dialog-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-dialog-description { margin: 0; }
+
+.sw-dialog-footer {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-top: 1px solid var(--sw-color-border);
+  /* Sticky insets count from the scrollport's padding edge: step past the
+     dialog's own padding to sit on its bottom edge. */
+  bottom: calc(-1 * var(--sw-space-5));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
+  padding: var(--sw-space-3) var(--sw-space-5);
+  position: sticky;
+}
+
+.sw-dialog-footer-status {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  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. */
+.sw-dialog-footer-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-dialog-footer-actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-footer { border-top-color: CanvasText; }
+}`;
+}
+export function dialogFrameClassCatalog() {
+    return [
+        'sw-dialog-header-framed',
+        'sw-dialog-icon',
+        'sw-dialog-titles',
+        'sw-dialog-description',
+        'sw-dialog-footer',
+        'sw-dialog-footer-status',
+        'sw-dialog-footer-actions',
+    ];
+}

package/dist/css/css-dialog.js

@@ -4,6 +4,8 @@ import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const title = typographyVariants.title;
 /* The modal's height cap: a space-8 strip of backdrop stays in view. */
 const maxHeight = 'min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8))';
+/* How far a sheet's pinned footer steps past the sheet's bottom padding. */
+const sheetFooterOffset = 'calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)))';
 export function dialogSheetClass(sheetBelow) {
     return `sw-dialog-sheet-below-${sheetBelow}`;
 }
@@ -11,9 +13,11 @@ export function dialogSheetClass(sheetBelow) {
  * Below the breakpoint the dialog is a bottom sheet: docked to the bottom
  * edge at the full viewport width, the top corners rounded and the bottom
  * ones square, the same height cap (so the whole space-8 strip of backdrop
- * shows above it), and padding that clears the safe areas. Emitted after
- * `sw-dialog-lg` so it wins at equal specificity. No grabber: there is no
- * drag gesture.
+ * shows above it), and padding that clears the safe areas. A pinned
+ * footer steps past that padding so its surface reaches the bottom edge,
+ * and pads itself clear of the home indicator. Emitted after
+ * `sw-dialog-lg` and `sw-dialog-xl` so it wins at equal specificity. No
+ * grabber: there is no drag gesture.
  */
 function sheetRules() {
     return breakpoints
@@ -33,6 +37,12 @@ function sheetRules() {
   .${dialogSheetClass(breakpoint)}[open] {
     animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
   }
+
+  .${dialogSheetClass(breakpoint)} .sw-dialog-footer {
+    bottom: ${sheetFooterOffset};
+    margin-bottom: ${sheetFooterOffset};
+    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
+  }
 }`)
         .join('\n\n');
 }
@@ -64,7 +74,8 @@ function closeButtonRules() {
   gap: var(--sw-space-2);
 }
 
-.sw-dialog-header > :first-child {
+.sw-dialog-header > :is(h2, h3),
+.sw-dialog-titles {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -128,6 +139,10 @@ export function cssDialogClasses() {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+.sw-dialog-xl {
+  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+}
+
 ${sheetRules()}
 
 ${sheetMotionRules()}
@@ -147,6 +162,7 @@ export function dialogClassCatalog() {
     return [
         'sw-dialog',
         'sw-dialog-lg',
+        'sw-dialog-xl',
         ...breakpoints.map((breakpoint) => dialogSheetClass(breakpoint)),
         'sw-dialog-header',
         'sw-dialog-close',

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

@@ -0,0 +1,22 @@
+export declare const noticeTones: readonly ["info", "success", "warning", "danger"];
+export declare const noticeVariants: readonly ["default", "band"];
+/** `default` is a rounded note in the flow; `band` a full-width strip of page chrome. */
+export type NoticeVariant = (typeof noticeVariants)[number];
+/** The notice's meaning: information, a good outcome, a caution, a refusal. */
+export type NoticeTone = (typeof noticeTones)[number];
+/**
+ * How much of a tone's color the notice's fill mixes into the surface. Info
+ * uses the derived accent tint instead (ADR 0011), which already keeps the
+ * accent readable on every palette.
+ */
+export declare const noticeTintShare = 0.1;
+/**
+ * How far the notice's words move from the tone's color toward the text
+ * color, so they read darker than the tone on a light fill (lighter on a
+ * dark one) and keep 4.5:1 on the tint (`notice.test.tsx`).
+ */
+export declare const noticeInkTextShare = 0.3;
+/** The semantic color a tone is drawn from. */
+export declare function noticeToneColor(tone: NoticeTone): string;
+export declare function cssNoticeClasses(): string;
+export declare function noticeClassCatalog(): string[];

package/dist/css/css-notice.js

@@ -0,0 +1,168 @@
+import { typographyVariants } from '@scalewing/tokens';
+export const noticeTones = ['info', 'success', 'warning', 'danger'];
+export const noticeVariants = ['default', 'band'];
+/**
+ * How much of a tone's color the notice's fill mixes into the surface. Info
+ * uses the derived accent tint instead (ADR 0011), which already keeps the
+ * accent readable on every palette.
+ */
+export const noticeTintShare = 0.1;
+/**
+ * How far the notice's words move from the tone's color toward the text
+ * color, so they read darker than the tone on a light fill (lighter on a
+ * dark one) and keep 4.5:1 on the tint (`notice.test.tsx`).
+ */
+export const noticeInkTextShare = 0.3;
+/** The semantic color a tone is drawn from. */
+export function noticeToneColor(tone) {
+    return tone === 'info' ? 'accent' : tone;
+}
+function toneFill(tone) {
+    if (tone === 'info')
+        return 'var(--sw-color-accentSubtle)';
+    return `color-mix(in srgb, var(--sw-color-${tone}) ${noticeTintShare * 100}%, var(--sw-color-surface))`;
+}
+function toneInk(tone) {
+    const toneShare = Math.round((1 - noticeInkTextShare) * 100);
+    return `color-mix(in srgb, var(--sw-color-${noticeToneColor(tone)}) ${toneShare}%, var(--sw-color-text))`;
+}
+function toneRules() {
+    return noticeTones
+        .map((tone) => `.sw-notice-${tone} { --sw-notice-fill: ${toneFill(tone)}; --sw-notice-ink: ${toneInk(tone)}; }`)
+        .join('\n');
+}
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/*
+ * A tinted block in the page: the tone's fill, its words in the tone's ink,
+ * label-size type. An optional glyph leads; the title (a bold lead) and a
+ * text message share a row while they fit and wrap under one another when
+ * they do not; a message of elements (a field, a checkbox) is stacked under
+ * the title. An action ends the row (a small Button
+ * overhangs the padding rather than growing it) and drops under the text on
+ * a narrow column. Controls inside keep their own colors. Forced
+ * colors draw a border instead of the fill.
+ */
+export function cssNoticeClasses() {
+    return `${toneRules()}
+
+.sw-notice {
+  align-items: flex-start;
+  background: var(--sw-notice-fill);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-notice-ink);
+  column-gap: var(--sw-space-2);
+  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-width: 0;
+  padding: var(--sw-space-2) var(--sw-space-3);
+  row-gap: var(--sw-space-2);
+  /* Muted words of a control inside (a field's or a checkbox's
+     description) take the ink, which keeps 4.5:1 on the fill. */
+  --sw-color-muted: var(--sw-notice-ink);
+}
+
+.sw-notice-icon {
+  display: inline-flex;
+  flex: none;
+  min-height: ${label.lineHeight}px;
+  align-items: center;
+}
+
+.sw-notice-content {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 1 1 16rem;
+  flex-wrap: wrap;
+  min-width: 0;
+  row-gap: var(--sw-space-1);
+}
+
+.sw-notice-stacked {
+  align-items: stretch;
+  flex-direction: column;
+  row-gap: var(--sw-space-2);
+}
+
+.sw-notice-title {
+  font-weight: ${label.fontWeight};
+  min-width: 0;
+}
+
+.sw-notice-body {
+  flex: 1 1 auto;
+  font-weight: ${body.fontWeight};
+  min-width: 0;
+}
+
+.sw-notice-action {
+  align-items: center;
+  align-self: flex-start;
+  display: inline-flex;
+  flex: none;
+  min-height: ${label.lineHeight}px;
+}
+
+/* A small Button keeps the note one text line tall: it overhangs the
+   padding evenly instead of growing the row. */
+.sw-notice-action > .sw-button {
+  margin-block: calc((${label.lineHeight}px - var(--sw-control-sm-min-height)) / 2);
+}
+
+/* A band across the page's full width, such as an environment strip
+   above the app header: square, the xs control height, caption type,
+   its words centered on one line that wraps on a phone. A glyph or an
+   action stays on the words' row (no wrap): the words wrap instead. */
+.sw-notice-band {
+  align-items: center;
+  border-radius: 0;
+  flex-wrap: nowrap;
+  font-size: ${caption.fontSize}px;
+  justify-content: center;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-height: var(--sw-control-xs-min-height);
+  padding: var(--sw-space-1) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-notice-band .sw-notice-content {
+  flex: 0 1 auto;
+  justify-content: center;
+}
+
+.sw-notice-band .sw-notice-icon,
+.sw-notice-band .sw-notice-action { min-height: ${caption.lineHeight}px; }
+
+.sw-notice-band .sw-notice-action { align-self: center; }
+
+.sw-notice-band .sw-notice-action > .sw-button {
+  margin-block: calc((${caption.lineHeight}px - var(--sw-control-sm-min-height)) / 2);
+}
+
+@media (forced-colors: active) {
+  .sw-notice { border: 1px solid CanvasText; }
+  .sw-notice-band { border-width: 0 0 1px; }
+}`;
+}
+export function noticeClassCatalog() {
+    return [
+        'sw-notice',
+        ...noticeTones.map((tone) => `sw-notice-${tone}`),
+        'sw-notice-icon',
+        'sw-notice-content',
+        'sw-notice-stacked',
+        'sw-notice-title',
+        'sw-notice-body',
+        'sw-notice-action',
+        'sw-notice-band',
+    ];
+}