@scalewing/react 1.31.0 → 1.33.0

package/dist/components/denomination-grid/types.d.ts

@@ -1,8 +1,11 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationGridFrame, type DenominationTotalEmphasis } from '../../css/css-denomination-appearance.js';
+import { type DenominationCellToneAppearance } from '../../css/css-denomination-cell-tones.js';
 import { type DenominationLabelAppearance } from '../../css/css-denomination-label.js';
 import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
-export type { DenominationLabelWidth };
+import { type StepperLimitAppearance } from '../Stepper.js';
+export type { DenominationCellToneAppearance, DenominationGridFrame, DenominationLabelWidth, DenominationTotalEmphasis, };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
 /**
@@ -36,6 +39,11 @@ export type DenominationGridEntry = {
     errors?: readonly (string | null)[];
     /** What an empty box shows, such as "0". */
     placeholder?: string;
+    /**
+     * The Steppers' `limitAppearance`: `plain` keeps − at 0 (and + at a cap)
+     * in its usual look instead of faded; it is still disabled.
+     */
+    limitAppearance?: StepperLimitAppearance;
 };
 export type DenominationGridRow = {
     id: string;
@@ -79,6 +87,11 @@ export type DenominationGridProps = {
     rows: readonly DenominationGridRow[];
     layout?: DenominationGridLayout;
     subtotal?: (count: number, column: DenominationGridColumn) => string;
+    /**
+     * What a zero or empty read-only count shows, `—` by default. An empty
+     * string leaves those counts blank, so only the counts that are there
+     * stand out (the column header still names each cell).
+     */
     zeroLabel?: string;
     /**
      * Names the strip's total column, such as "Total": a column header over
@@ -111,4 +124,25 @@ export type DenominationGridProps = {
      * total.
      */
     labelAppearance?: DenominationLabelAppearance;
+    /**
+     * `table` frames the strip: its 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. `none` (the
+     * default) leaves open rows on the page's surface. Only the strip has a
+     * frame.
+     */
+    frame?: DenominationGridFrame;
+    /**
+     * `strong` sets the row totals in bold label type, a neutral row's in the
+     * text color and a toned row's in its tone; `default` keeps them in data
+     * type in the row's tone (a neutral row's muted).
+     */
+    totalEmphasis?: DenominationTotalEmphasis;
+    /**
+     * How a `cellTones` tone shows on a strip's read-only count: `text` (the
+     * default) sets the count in the tone; `pill` sets it on a rounded tint of
+     * the tone in the tone's ink, such as a difference in danger or a
+     * changed count in accent. Entry counts and tiles keep their tone border.
+     */
+    cellToneAppearance?: DenominationCellToneAppearance;
 };

package/dist/components/dialog/DialogTitle.d.ts

@@ -11,12 +11,14 @@ type DialogTitleProps = {
     /** The close button's accessible name; without it there is no button. */
     closeLabel?: string;
     onClose: () => void;
+    /** A banded dialog's title is always a row, which draws the band. */
+    banded: boolean;
 };
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export declare function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogTitle.js

@@ -5,12 +5,12 @@ import { Text } from '../Text.js';
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
+export function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
     const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
-    if (!closeLabel && !icon && !description)
+    if (!banded && !closeLabel && !icon && !description)
         return heading;
     return (_jsxs("div", { className: cx('sw-dialog-header', Boolean(icon || description) && 'sw-dialog-header-framed'), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-dialog-icon", children: icon })) : null, description ? (_jsxs("div", { className: "sw-dialog-titles", children: [heading, _jsx(Text, { as: "p", className: "sw-dialog-description", color: "muted", id: descriptionId, variant: "caption", children: description })] })) : (heading), closeLabel ? (_jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })) : null] }));
 }

package/dist/css/css-action-menu-trigger.d.ts

@@ -0,0 +1,11 @@
+export declare const actionMenuTriggerAppearances: readonly ["framed", "text"];
+/**
+ * How an ActionMenu's trigger looks: `framed` (the default) is a small
+ * outlined control; `text` is its words in the text color with a chevron
+ * after them and no fill or outline until hovered or open, such as a
+ * person's name that opens their account menu in a header.
+ */
+export type ActionMenuTriggerAppearance = (typeof actionMenuTriggerAppearances)[number];
+export declare const actionMenuTriggerTextClass = "sw-action-menu-trigger-text";
+export declare function cssActionMenuTriggerClasses(): string;
+export declare function actionMenuTriggerClassCatalog(): string[];

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

@@ -0,0 +1,66 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+export const actionMenuTriggerAppearances = ['framed', 'text'];
+export const actionMenuTriggerTextClass = 'sw-action-menu-trigger-text';
+const text = `.sw-action-menu-trigger.${actionMenuTriggerTextClass}`;
+/*
+ * A text trigger: no fill and a transparent border (kept, so forced colors
+ * can draw one), its words in label type at medium weight in the text
+ * color, the sm control height (the 44 px target on a coarse pointer), and
+ * the shared muted chevron pointing down after them, a space-2 gap apart.
+ * The quiet fill shows while the menu is open, so the open state is seen
+ * as well as announced, and on hover where the pointer can hover (a tap
+ * leaves no fill behind). Two classes, so it outranks the framed
+ * trigger's rules; the coarse-pointer target is restated after. Forced
+ * colors draw the kept border in the system's border color, the chevron
+ * in CanvasText as every chevron, and the open trigger's border in
+ * Highlight.
+ */
+export function cssActionMenuTriggerClasses() {
+    return `${text} {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+}
+
+${text}::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+${text}[aria-expanded='true'] {
+  background: ${quietFill};
+}
+
+@media (hover: hover) {
+  ${text}:hover:not(:disabled) {
+    background: ${quietFill};
+  }
+}
+
+@media ${coarsePointerQuery} {
+  ${text} { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  ${text}::after { border-color: CanvasText; }
+  ${text}[aria-expanded='true'] { border-color: Highlight; }
+}`;
+}
+export function actionMenuTriggerClassCatalog() {
+    return [actionMenuTriggerTextClass];
+}

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-box-link.d.ts

@@ -0,0 +1,13 @@
+/**
+ * How a `Box as="a"` reads as a link. `accent` (the default) is the
+ * canvas link: the accent colour, no underline. `quiet` is a title that
+ * opens something, such as the title of a table row: the surrounding
+ * text's colour at weight 600, underlined while hovered or focused.
+ */
+export declare const boxLinkAppearances: readonly ["accent", "quiet"];
+export type BoxLinkAppearance = (typeof boxLinkAppearances)[number];
+export declare function assertBoxLink(link: unknown, as: string): void;
+/** The generated class for a Box `link` prop, or none for the canvas link. */
+export declare function boxLinkClass(link: BoxLinkAppearance | undefined): string | undefined;
+export declare function cssBoxLinkClasses(): string;
+export declare function boxLinkClassCatalog(): string[];

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

@@ -0,0 +1,50 @@
+import { typographyVariants } from '@scalewing/tokens';
+/**
+ * How a `Box as="a"` reads as a link. `accent` (the default) is the
+ * canvas link: the accent colour, no underline. `quiet` is a title that
+ * opens something, such as the title of a table row: the surrounding
+ * text's colour at weight 600, underlined while hovered or focused.
+ */
+export const boxLinkAppearances = ['accent', 'quiet'];
+const quietLinkClass = 'sw-link-quiet';
+export function assertBoxLink(link, as) {
+    if (link === undefined)
+        return;
+    if (!boxLinkAppearances.includes(link))
+        throw new RangeError(`Unknown Box link: ${String(link)}`);
+    if (as !== 'a')
+        throw new TypeError('Box link is for a link (as="a")');
+}
+/** The generated class for a Box `link` prop, or none for the canvas link. */
+export function boxLinkClass(link) {
+    return link === 'quiet' ? quietLinkClass : undefined;
+}
+/*
+ * A quiet link keeps the colour of the text around it, so colour cannot
+ * tell it apart. Its weight does: 600, the label weight, in body-weight
+ * text, the non-colour cue WCAG 1.4.1 asks for, and one that forced colours
+ * keep. (axe's link-in-text-block passes it on colour, the same colour
+ * and background as its text, or on its weight; the weight is what keeps it
+ * a visible link.) Use it in text lighter
+ * than 600, such as a body row's title. In text already at 600 the quiet
+ * look has no cue; an accent link there needs at least 3:1 against the text.
+ * Hover and keyboard focus underline it; focus keeps the canvas focus ring.
+ * The rules outrank the canvas `[data-theme] a` rules, hover included.
+ * Forced colours paint it in the system link colour, as any link.
+ */
+export function cssBoxLinkClasses() {
+    const quiet = `[data-theme] a.${quietLinkClass}`;
+    return `${quiet} {
+  color: inherit;
+  font-weight: ${typographyVariants.label.fontWeight};
+}
+
+${quiet}:hover,
+${quiet}:focus-visible {
+  color: inherit;
+  text-decoration-line: underline;
+}`;
+}
+export function boxLinkClassCatalog() {
+    return [quietLinkClass];
+}

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.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 /*
@@ -81,7 +82,7 @@ export function cssComboboxClasses() {
 }
 
 .sw-combobox-option[aria-selected='true'] {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-combobox-option[aria-disabled='true'] {

package/dist/css/css-components.js

@@ -13,6 +13,7 @@ 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';
@@ -144,6 +145,8 @@ ${cssDialogClasses()}
 
 ${cssDialogFrameClasses()}
 
+${cssDialogBandedClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}

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};
 }
 
 /*