@scalewing/react 1.31.0 → 1.32.0

package/dist/css/css-denomination-cell-tones.js

@@ -1,4 +1,7 @@
 import { badgeTones } from './css-data.js';
+import { toneTintFill, toneTintInk } from './tone-tint.js';
+export const denominationCellToneAppearances = ['text', 'pill'];
+export const denominationCellTonesPillClass = 'sw-denomination-cell-tones-pill';
 /**
  * The tones a single count can take. `neutral` is the cell's own look, so it
  * adds no class: a cell is toned only by a tone that says something.
@@ -21,11 +24,15 @@ export function denominationCellToneClassNames(tone) {
  * carries meaning alone: the consumer's words say why a count is toned.
  * Forced colors replace the tone with the system text color, and a toned
  * zero keeps the zero's GrayText there, so it does not read as a count.
+ * Under the `pill` appearance a strip's read-only count sits on a rounded
+ * tint of its tone in the tone's ink (the Notice's fill and words); forced
+ * colors outline the pill instead, so the mark survives without its fill.
  */
 export function cssDenominationCellToneClasses() {
     const toneRules = cellTones
-        .map((tone) => `.sw-denomination-cell-tone-${tone} { --sw-denomination-cell-tone: var(--sw-color-${tone}); }`)
+        .map((tone) => `.sw-denomination-cell-tone-${tone} { --sw-denomination-cell-tone: var(--sw-color-${tone}); --sw-denomination-cell-fill: ${toneTintFill(tone)}; --sw-denomination-cell-ink: ${toneTintInk(tone)}; }`)
         .join('\n');
+    const pill = `.${denominationCellTonesPillClass} .sw-denomination-cell-toned .sw-denomination-cell-value:not(:empty)`;
     return `${toneRules}
 
 .sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
@@ -39,13 +46,25 @@ export function cssDenominationCellToneClasses() {
   box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
 }
 
+/* A pill: the count on its tone's tint, in the tone's ink (a Notice's words: 4.5:1 on the tint unless the palette's own tone is under it). */
+${pill} {
+  background: var(--sw-denomination-cell-fill);
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-denomination-cell-ink);
+  display: inline-block;
+  padding: calc(var(--sw-space-1) / 2) var(--sw-space-2);
+}
+
 @media (forced-colors: active) {
   .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
   .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+  ${pill} { color: inherit; outline: 1px solid CanvasText; }
 }`;
 }
 export function denominationCellToneClassCatalog() {
     return [
+        'sw-denomination-cell-value',
+        denominationCellTonesPillClass,
         'sw-denomination-cell-toned',
         ...cellTones.map((tone) => `sw-denomination-cell-tone-${tone}`),
     ];

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

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationAppearanceClasses, denominationAppearanceClassCatalog, } from './css-denomination-appearance.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';
@@ -257,6 +258,8 @@ ${cssDenominationAlignedClasses()}
 
 ${cssDenominationLabelClasses()}
 
+${cssDenominationAppearanceClasses()}
+
 @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; }
@@ -299,5 +302,6 @@ export function denominationGridClassCatalog() {
         ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
         ...denominationLabelClassCatalog(),
+        ...denominationAppearanceClassCatalog(),
     ];
 }

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

@@ -0,0 +1,11 @@
+export declare const dialogAppearances: readonly ["glass", "banded"];
+/**
+ * How the dialog's surface reads: `glass` (the default) is one frosted
+ * panel; `banded` is a solid surface whose title row and footer are bands
+ * across its full width, ruled off from the content by hairlines, with the
+ * close button on a quiet round fill.
+ */
+export type DialogAppearance = (typeof dialogAppearances)[number];
+export declare const dialogBandedClass = "sw-dialog-banded";
+export declare function cssDialogBandedClasses(): string;
+export declare function dialogBandedClassCatalog(): string[];

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

@@ -0,0 +1,84 @@
+import { breakpointQuery, breakpoints } from './breakpoints.js';
+import { dialogSheetClass } from './css-dialog.js';
+import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
+export const dialogAppearances = ['glass', 'banded'];
+export const dialogBandedClass = 'sw-dialog-banded';
+const banded = `.${dialogBandedClass}`;
+/* The dialog's own padding, which a band steps past to reach its edges. */
+const bleed = 'calc(-1 * var(--sw-space-5))';
+/* A bottom sheet's side padding, which clears a wide safe area. */
+const sheetSide = (side) => `max(var(--sw-space-5), env(safe-area-inset-${side}, 0px))`;
+/*
+ * In a bottom sheet the dialog's side padding clears the safe areas, so
+ * the band steps past that padding instead of space-5, and pads itself
+ * the same, so its hairline still meets both edges.
+ */
+function sheetBandRules() {
+    return breakpoints
+        .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+  .${dialogSheetClass(breakpoint)}${banded} .sw-dialog-header {
+    margin-left: calc(-1 * ${sheetSide('left')});
+    margin-right: calc(-1 * ${sheetSide('right')});
+    padding-left: ${sheetSide('left')};
+    padding-right: ${sheetSide('right')};
+  }
+}`)
+        .join('\n\n');
+}
+/*
+ * A banded dialog: the solid surface (no blur) with the medium elevation in
+ * place of the glass border, so it reads as a sheet over the page. The
+ * title row bleeds to the top and side edges as a band, a space-4 step
+ * down and the dialog's space-5 across, over a hairline, and stays at the
+ * top while the content scrolls under it (the top-chrome layer, under any
+ * popup the content opens); the pinned footer is already such a band at
+ * the bottom. The close button sits on the muted 16 % fill as a circle
+ * inside the band's padding, in the text color, and keeps its square size
+ * and touch target; a hover darkens the fill where the pointer can hover.
+ * Forced colors keep the hairline and outline the dialog, since its shadow
+ * is not drawn there.
+ */
+export function cssDialogBandedClasses() {
+    return `${banded} {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+  border-color: transparent;
+  box-shadow: var(--sw-elevation-md);
+}
+
+${banded} .sw-dialog-header {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  margin: ${bleed} ${bleed} 0;
+  padding: var(--sw-space-4) var(--sw-space-5);
+  position: sticky;
+  top: ${bleed};
+  ${zIndex('topChrome')}
+}
+
+${sheetBandRules()}
+
+${banded} .sw-button.sw-dialog-close {
+  background: ${quietFill};
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  margin: 0;
+}
+
+@media (hover: hover) {
+  ${banded} .sw-button.sw-dialog-close:hover {
+    background: color-mix(in srgb, var(--sw-color-muted) 24%, transparent);
+  }
+}
+
+@media (forced-colors: active) {
+  ${banded} { border-color: CanvasText; }
+  ${banded} .sw-dialog-header { border-bottom-color: CanvasText; }
+}`;
+}
+export function dialogBandedClassCatalog() {
+    return [dialogBandedClass];
+}

package/dist/css/css-multi-select.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
 const label = typographyVariants.label;
 const body = typographyVariants.body;
 /*
@@ -120,7 +121,7 @@ export function cssMultiSelectClasses() {
 }
 
 .sw-multi-select-option:hover {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-multi-select-icon {

package/dist/css/css-nav-words.d.ts

@@ -0,0 +1,13 @@
+export declare const navAppearances: readonly ["default", "words"];
+/**
+ * How a Nav draws its destinations: `default` keeps each link or Button's
+ * own look; `words` sets every destination as plain words, the others in
+ * the muted color at medium weight and the current one (`aria-current`)
+ * in the text color at label weight, with no fill, visible border or
+ * underline. The words must be visible: a glyph-only destination keeps
+ * `default`.
+ */
+export type NavAppearance = (typeof navAppearances)[number];
+export declare const navWordsClass = "sw-nav-words";
+export declare function cssNavWordsClasses(): string;
+export declare function navWordsClassCatalog(): string[];

package/dist/css/css-nav-words.js

@@ -0,0 +1,51 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+export const navAppearances = ['default', 'words'];
+export const navWordsClass = 'sw-nav-words';
+const words = `.sw-nav.${navWordsClass}`;
+const destinations = `:is(a, .sw-button)`;
+const current = `[aria-current]:not([aria-current='false'])`;
+/*
+ * Words-only destinations. A Button keeps its size, padding, touch target
+ * and focus ring; only its fill, border color and color go, so a primary
+ * or ghost Button in the Nav reads the same. Links lose the canvas's accent
+ * and underline, and take a transparent hairline border like a Button's.
+ * `:is()` counts as its most specific argument, so the selector is three
+ * classes (0,3,0): it outranks a Button's variant and the canvas's link
+ * rules. The current destination differs by color and weight, so the
+ * words must be visible: a glyph-only destination has no weight to change
+ * (keep `default` for those). Hover lifts the color only where the pointer
+ * hovers, and never on a disabled destination. Forced colors draw the
+ * current one's border in Highlight and underline its words, since color
+ * and weight may not show there.
+ */
+export function cssNavWordsClasses() {
+    return `${words} ${destinations} {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  font-weight: 500;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  ${words} ${destinations}:hover:not(:disabled, [aria-disabled='true']) {
+    color: var(--sw-color-text);
+  }
+}
+
+${words} ${destinations}${current} {
+  color: var(--sw-color-text);
+  font-weight: ${label.fontWeight};
+}
+
+@media (forced-colors: active) {
+  ${words} ${destinations}${current} { border-color: Highlight; text-decoration: underline; }
+}`;
+}
+export function navWordsClassCatalog() {
+    return [navWordsClass];
+}

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

@@ -1,22 +1,15 @@
+import { type TintColor } from './tone-tint.js';
 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.
- */
+/** How much of a tone's color the notice's fill mixes into the surface. */
 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`).
- */
+/** How far the notice's words move from the tone's color toward the text color. */
 export declare const noticeInkTextShare = 0.3;
 /** The semantic color a tone is drawn from. */
-export declare function noticeToneColor(tone: NoticeTone): string;
+export declare function noticeToneColor(tone: NoticeTone): TintColor;
 export declare function cssNoticeClasses(): string;
 export declare function noticeClassCatalog(): string[];

package/dist/css/css-notice.js

@@ -1,34 +1,18 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { toneInkTextShare, toneTintFill, toneTintInk, toneTintShare, } from './tone-tint.js';
 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;
+/** How much of a tone's color the notice's fill mixes into the surface. */
+export const noticeTintShare = toneTintShare;
+/** How far the notice's words move from the tone's color toward the text color. */
+export const noticeInkTextShare = toneInkTextShare;
 /** 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)}; }`)
+        .map((tone) => `.sw-notice-${tone} { --sw-notice-fill: ${toneTintFill(noticeToneColor(tone))}; --sw-notice-ink: ${toneTintInk(noticeToneColor(tone))}; }`)
         .join('\n');
 }
 const label = typographyVariants.label;

package/dist/css/css-segmented-raised.d.ts

@@ -0,0 +1,3 @@
+export declare const segmentedRaisedClass = "sw-segmented-raised";
+export declare function cssSegmentedRaisedClasses(): string;
+export declare function segmentedRaisedClassCatalog(): string[];

package/dist/css/css-segmented-raised.js

@@ -0,0 +1,72 @@
+import { trackInset, typographyVariants } from '@scalewing/tokens';
+import { quietFill } from './quiet-fill.js';
+const label = typographyVariants.label;
+export const segmentedRaisedClass = 'sw-segmented-raised';
+const raised = `.sw-segmented.${segmentedRaisedClass}`;
+/*
+ * The raised track: the quiet grey fill (no border) with corners one track
+ * inset rounder than the segments' small radius, so the two curves stay
+ * concentric, sized to its segments even in a Stack (unlike compact).
+ * Every segment is the md control height in label type with its words in
+ * the text color at medium weight; with marks, a segment pads a step less
+ * before its mark. The selected one is the surface raised by the small
+ * elevation, its words at label weight. In the dark scheme a shadow does
+ * not show and the surface is about the track's grey, so the selected
+ * segment draws a hairline ring in the muted color instead (3:1 or more
+ * against the track in every dark palette, on the canvas or a card). Two classes,
+ * so these win over the compact track's rules and the reduced-transparency
+ * surface; the track's transparent border would also win over the error
+ * outline (`.sw-segmented[aria-invalid='true']`, the same specificity,
+ * earlier), so the danger border, and Mark in forced colors, is restated
+ * last. Forced colors outline the track and the selected segment.
+ */
+export function cssSegmentedRaisedClasses() {
+    return `${raised} {
+  background: ${quietFill};
+  border-color: transparent;
+  border-radius: calc(var(--sw-radius-sm) + ${trackInset}px);
+}
+
+/* Sized to its segments even where the field is stretched (a Stack). */
+.sw-segmented-field > ${raised} {
+  align-self: flex-start;
+}
+
+${raised} .sw-segmented-item {
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  font-size: ${label.fontSize}px;
+  font-weight: 500;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-4);
+}
+
+${raised}.sw-segmented-with-icons .sw-segmented-item {
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+${raised} .sw-segmented-item-selected {
+  background: var(--sw-color-surface);
+  box-shadow: var(--sw-elevation-sm);
+  font-weight: ${label.fontWeight};
+}
+
+[data-theme='dark'] ${raised} .sw-segmented-item-selected {
+  box-shadow: inset 0 0 0 1px var(--sw-color-muted);
+}
+
+${raised}[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  ${raised} { border-color: CanvasText; }
+  ${raised} .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  ${raised}[aria-invalid='true'] { border-color: Mark; }
+}`;
+}
+export function segmentedRaisedClassCatalog() {
+    return [segmentedRaisedClass];
+}

package/dist/css/css-segmented.js

@@ -1,4 +1,5 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
+import { cssSegmentedRaisedClasses, segmentedRaisedClassCatalog, } from './css-segmented-raised.js';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
 const label = typographyVariants.label;
@@ -9,13 +10,15 @@ const label = typographyVariants.label;
  * the row stays even; the track is the subtle fill (two classes, so
  * reduced transparency keeps it) and the selected item is the surface
  * raised by the small elevation, so the choice shows on a white canvas
- * too. A filled track keeps its own look and only gains the marks. The
- * error outline is restated after these rules so an icon track keeps it.
+ * too. A filled or raised track keeps its own look and only gains the
+ * marks (one `:not()` of both, so the compact rules keep their
+ * specificity). The error outline is restated after these rules so an
+ * icon track keeps it.
  * In forced colours the selected item is outlined in Highlight; a focused
  * selected item keeps that outline, offset by the focus ring's offset.
  */
 function iconRules() {
-    const compact = '.sw-segmented-with-icons:not(.sw-segmented-filled)';
+    const compact = '.sw-segmented-with-icons:not(.sw-segmented-filled, .sw-segmented-raised)';
     return `.sw-segmented${compact} {
   background: var(--sw-color-subtle);
   border-color: transparent;
@@ -162,6 +165,8 @@ export function cssSegmentedClasses() {
 
 ${iconRules()}
 
+${cssSegmentedRaisedClasses()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -181,5 +186,6 @@ export function segmentedClassCatalog() {
         'sw-segmented-with-icons',
         'sw-segmented-item-icon',
         'sw-segmented-disabled',
+        ...segmentedRaisedClassCatalog(),
     ];
 }

package/dist/css/css-select.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssSelectClasses() {
@@ -172,7 +173,7 @@ export function cssSelectClasses() {
 }
 
 .sw-select-option[data-active='true'] {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-select-xs .sw-select-option {

package/dist/css/css-split.js

@@ -1,3 +1,4 @@
+import { quietFill } from './quiet-fill.js';
 export function cssSplitClasses() {
     return `.sw-split {
   align-items: stretch;
@@ -39,7 +40,7 @@ export function cssSplitClasses() {
 
 .sw-split-handle:hover,
 .sw-split-handle:focus-visible {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-split-handle:focus-visible {

package/dist/css/css-stepper.js

@@ -25,6 +25,12 @@ function stateRules() {
   background-image: ${changedTintLayer};
 }
 
+/* A plain limit: − at min and + at max keep their look, still disabled. */
+.sw-stepper-limit-plain .sw-stepper-button:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
 /* Read-only: the buttons keep their room, so the count lines up with an editable one. */
 .sw-stepper-readonly .sw-stepper-button { visibility: hidden; }
 
@@ -122,5 +128,6 @@ export function stepperClassCatalog() {
         'sw-stepper-invalid',
         'sw-stepper-changed',
         'sw-stepper-readonly',
+        'sw-stepper-limit-plain',
     ];
 }

package/dist/css/quiet-fill.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The quiet grey fill: the muted color at 16 % over whatever is beneath
+ * (about #E8E8E9 on white). An open menu or list row, a held separator,
+ * today's calendar ring fill, a neutral button and a banded dialog's close
+ * button all take it, so they read as one grey.
+ */
+export declare const quietFill = "color-mix(in srgb, var(--sw-color-muted) 16%, transparent)";

package/dist/css/quiet-fill.js

@@ -0,0 +1,7 @@
+/**
+ * The quiet grey fill: the muted color at 16 % over whatever is beneath
+ * (about #E8E8E9 on white). An open menu or list row, a held separator,
+ * today's calendar ring fill, a neutral button and a banded dialog's close
+ * button all take it, so they read as one grey.
+ */
+export const quietFill = 'color-mix(in srgb, var(--sw-color-muted) 16%, transparent)';

package/dist/css/stacking.js

@@ -13,7 +13,8 @@
  *    its popup can only paint as high as the surface does; lifting the surface
  *    over the ActionBar keeps an open list tappable where the bar would cover
  *    it, and over the next surface in the flow.
- * 5. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
+ * 5. `topChrome`: the sticky AppHeader or sticky Tabs strip (and a banded
+ *    Dialog's title band, inside its dialog), over a lifted
  *    surface that scrolls up under it (the header is the page's way back, the
  *    strip its way between sections, and a popup opens downward).
  * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu

package/dist/css/stylesheet.js

@@ -36,6 +36,7 @@ import { tableClassCatalog } from './css-table.js';
 import { chromeClassCatalog } from './css-chrome.js';
 import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
+import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
@@ -71,6 +72,7 @@ export function utilityClassCatalog() {
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
+        ...dialogBandedClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),

package/dist/css/tone-tint.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The semantic colors a tinted mark can be drawn from: a note's tone or a
+ * single count's.
+ */
+export type TintColor = 'accent' | 'success' | 'warning' | 'danger';
+/**
+ * How much of a tone's color a tint mixes into the surface. The accent uses
+ * the derived accent tint instead (ADR 0011), which already keeps the accent
+ * readable on every palette.
+ */
+export declare const toneTintShare = 0.1;
+/**
+ * How far a tint'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 toneInkTextShare = 0.3;
+/** A tone's quiet fill: the tone mixed into the surface. */
+export declare function toneTintFill(color: TintColor): string;
+/** The words on that fill: the tone moved toward the text color. */
+export declare function toneTintInk(color: TintColor): string;

package/dist/css/tone-tint.js

@@ -0,0 +1,23 @@
+/**
+ * How much of a tone's color a tint mixes into the surface. The accent uses
+ * the derived accent tint instead (ADR 0011), which already keeps the accent
+ * readable on every palette.
+ */
+export const toneTintShare = 0.1;
+/**
+ * How far a tint'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 toneInkTextShare = 0.3;
+/** A tone's quiet fill: the tone mixed into the surface. */
+export function toneTintFill(color) {
+    if (color === 'accent')
+        return 'var(--sw-color-accentSubtle)';
+    return `color-mix(in srgb, var(--sw-color-${color}) ${toneTintShare * 100}%, var(--sw-color-surface))`;
+}
+/** The words on that fill: the tone moved toward the text color. */
+export function toneTintInk(color) {
+    const toneShare = Math.round((1 - toneInkTextShare) * 100);
+    return `color-mix(in srgb, var(--sw-color-${color}) ${toneShare}%, var(--sw-color-text))`;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
+export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, actionMenuTriggerAppearances, type ActionMenuTriggerAppearance, } from './components/ActionMenu.js';
 export { ActionBar, type ActionBarProps, type ActionBarSummary, type ActionBarSummaryTone, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
@@ -13,25 +13,27 @@ export { Progress, progressTones, type ProgressProps, type ProgressTone, } from
 export { Tooltip, type TooltipProps, type TooltipRelationship, } from './components/Tooltip.js';
 export { InfoTip, type InfoTipProps } from './components/InfoTip.js';
 export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
-export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
+export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
-export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
+export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, dialogSizes, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
+export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
-export { Stepper, type StepperProps, type StepperWidth, } from './components/Stepper.js';
+export { Stepper, stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './components/Stepper.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
-export { Nav, type NavProps } from './components/Nav.js';
+export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
@@ -54,7 +56,7 @@ export { Grid } from './components/Grid.js';
 export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
-export { DenominationGrid, denominationLabelAppearances, } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridEntry, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelAppearance, DenominationLabelWidth, } from './components/DenominationGrid.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';