@scalewing/react 1.27.0 → 1.29.0

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',
+    ];
+}

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

@@ -1,2 +1,5 @@
+export declare const progressTones: readonly ["accent", "success", "warning", "danger"];
+/** The bar's color: the accent, or success, warning (time running out) or danger. */
+export type ProgressTone = (typeof progressTones)[number];
 export declare function cssProgressClasses(): string;
 export declare function progressClassCatalog(): string[];

package/dist/css/css-progress.js

@@ -1,4 +1,15 @@
 import { typographyVariants } from '@scalewing/tokens';
+export const progressTones = [
+    'accent',
+    'success',
+    'warning',
+    'danger',
+];
+function toneRules() {
+    return progressTones
+        .map((tone) => `.sw-progress-${tone} { --sw-progress-color: var(--sw-color-${tone}); }`)
+        .join('\n');
+}
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssProgressClasses() {
@@ -11,9 +22,7 @@ export function cssProgressClasses() {
   width: 100%;
 }
 
-.sw-progress-accent { --sw-progress-color: var(--sw-color-accent); }
-.sw-progress-success { --sw-progress-color: var(--sw-color-success); }
-.sw-progress-danger { --sw-progress-color: var(--sw-color-danger); }
+${toneRules()}
 
 .sw-progress-heading {
   align-items: baseline;
@@ -66,9 +75,7 @@ export function cssProgressClasses() {
 export function progressClassCatalog() {
     return [
         'sw-progress',
-        'sw-progress-accent',
-        'sw-progress-success',
-        'sw-progress-danger',
+        ...progressTones.map((tone) => `sw-progress-${tone}`),
         'sw-progress-heading',
         'sw-progress-label',
         'sw-progress-count',

package/dist/css/css-segmented.js

@@ -1,6 +1,60 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
+const label = typographyVariants.label;
+/*
+ * Items with a mark (a glyph tile before the label) centre the mark and
+ * the label a space-2 gap apart; the mark keeps its size. On the compact
+ * track every item also takes the md control height and label type, so
+ * 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.
+ * 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)';
+    return `.sw-segmented${compact} {
+  background: var(--sw-color-subtle);
+  border-color: transparent;
+}
+
+${compact} .sw-segmented-item-selected {
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-segmented-with-icons .sw-segmented-item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  justify-content: center;
+}
+
+${compact} .sw-segmented-item {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented-item-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-segmented.sw-segmented-with-icons[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented${compact} { border-color: CanvasText; }
+  ${compact} .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
+}`;
+}
 /*
  * The control and its error message. The wrapper takes the track's place in
  * the layout: inline beside text and stretched in a Stack (compact), block
@@ -106,6 +160,8 @@ export function cssSegmentedClasses() {
   color: var(--sw-color-onAccent);
 }
 
+${iconRules()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -122,6 +178,8 @@ export function segmentedClassCatalog() {
         'sw-segmented-item',
         'sw-segmented-item-selected',
         'sw-segmented-filled',
+        'sw-segmented-with-icons',
+        'sw-segmented-item-icon',
         'sw-segmented-disabled',
     ];
 }

package/dist/css/css-toast-card.d.ts

@@ -0,0 +1,5 @@
+export declare const toastPlacements: readonly ["bottom", "top-end"];
+/** Where a toast that does not travel shows: centered at the bottom, or the top end corner. */
+export type ToastPlacement = (typeof toastPlacements)[number];
+export declare function cssToastCardClasses(): string;
+export declare function toastCardClassCatalog(): string[];

package/dist/css/css-toast-card.js

@@ -0,0 +1,122 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { toastMaxWidth } from './css-toast.js';
+export const toastPlacements = ['bottom', 'top-end'];
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+/*
+ * The toast as a card: a bold title over a muted detail, an action at the
+ * end of the row, and a thin line that runs down with the time left.
+ *
+ * `top-end` puts it in the top corner at the end of the line, clear of the
+ * safe area, at most a dialog's reading width; it drops in from above. A
+ * toast with an action or the remaining line takes the pointer, so hover
+ * can hold it (and the action can be pressed); the bottom toast stays
+ * click-through. The line is a scale from full to empty over the toast's
+ * duration (`--sw-toast-duration`), held while the toast is paused; it is
+ * a measure of time, not decoration, so it runs under reduced motion too.
+ */
+export function cssToastCardClasses() {
+    return `.sw-toast-title {
+  display: block;
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-toast-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-toast-row:has(.sw-toast-title) { align-items: flex-start; }
+
+.sw-toast-row .sw-toast-body { flex: 1 1 auto; }
+
+.sw-button.sw-toast-action {
+  flex: none;
+  margin-block: calc((${label.lineHeight}px - var(--sw-control-sm-min-height)) / 2);
+}
+
+.sw-toast-interactive { pointer-events: auto; }
+
+.sw-toast-top-end {
+  bottom: auto;
+  left: auto;
+  max-width: min(var(--sw-dialog-max), ${toastMaxWidth});
+  right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
+  top: max(var(--sw-space-4), env(safe-area-inset-top, 0px));
+  translate: none;
+}
+
+.sw-toast-top-end:dir(rtl) {
+  left: max(var(--sw-space-4), env(safe-area-inset-left, 0px));
+  right: auto;
+}
+
+.sw-toast-top-end:popover-open {
+  animation: sw-toast-drop var(--sw-motion-default) var(--sw-motion-easing);
+}
+
+@keyframes sw-toast-drop {
+  from {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--sw-space-3));
+  }
+  to {
+    opacity: 1;
+    translate: none;
+  }
+}
+
+.sw-toast-remaining {
+  background: var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  display: block;
+  height: var(--sw-space-1);
+  margin-top: var(--sw-space-2);
+  overflow: hidden;
+  position: relative;
+}
+
+.sw-toast-remaining::after {
+  animation: sw-toast-remaining var(--sw-toast-duration, 0ms) linear forwards;
+  background: var(--sw-toast-tone, var(--sw-color-accent));
+  content: '';
+  inset: 0;
+  position: absolute;
+  transform-origin: left center;
+}
+
+.sw-toast-remaining:dir(rtl)::after { transform-origin: right center; }
+
+.sw-toast-paused .sw-toast-remaining::after { animation-play-state: paused; }
+
+@keyframes sw-toast-remaining {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-toast-top-end:popover-open { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-toast-remaining { background: Canvas; border: 1px solid CanvasText; }
+  .sw-toast-remaining::after { background: CanvasText; }
+}`;
+}
+export function toastCardClassCatalog() {
+    return [
+        'sw-toast-title',
+        'sw-toast-detail',
+        'sw-toast-action',
+        'sw-toast-interactive',
+        'sw-toast-top-end',
+        'sw-toast-remaining',
+        'sw-toast-paused',
+    ];
+}

package/dist/css/css-variables.js

@@ -1,10 +1,18 @@
-import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+import { categoricalColorKeys, categoricalColors, onCategorical, controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
 function colorDeclarations(theme) {
     return [
         ...semanticColorKeys.map((key) => `  --sw-color-${key}: ${theme.colors[key]};`),
         `  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`,
     ].join('\n');
 }
+/* The categorical fills of the theme's scheme and the glyph drawn on them. */
+function categoricalDeclarations(theme) {
+    const fills = categoricalColors[theme.colorScheme];
+    return [
+        ...categoricalColorKeys.map((key) => `  --sw-categorical-${key}: ${fills[key]};`),
+        `  --sw-categorical-on: ${onCategorical};`,
+    ].join('\n');
+}
 function glassDeclarations(theme) {
     return `  --sw-glass-blur: ${theme.glass.blur}px;
   --sw-glass-saturate: ${theme.glass.saturate};
@@ -38,6 +46,7 @@ ${control}
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
+  --sw-dialog-max-xl: 65rem;
   --sw-select-max: 16rem;
   --sw-split-min: ${splitScale.min}rem;
   --sw-split-size: ${splitScale.size}rem;
@@ -53,11 +62,13 @@ export function cssVariables(light, dark) {
     return `:root,
 [data-theme='light'] {
 ${colorDeclarations(light)}
+${categoricalDeclarations(light)}
 ${sharedDeclarations(light)}
 }
 
 [data-theme='dark'] {
 ${colorDeclarations(dark)}
+${categoricalDeclarations(dark)}
 ${sharedDeclarations(dark)}
 }`;
 }

package/dist/css/stacking.js

@@ -14,8 +14,8 @@
  *    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).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, Tooltip, the DateField and CalendarButton calendar) over
- *    everything in the page.
+ *    list, MultiSelect panel, Tooltip, the DateField and CalendarButton
+ *    calendar) over everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
  */
@@ -33,6 +33,9 @@ const openPopups = [
     '.sw-select-list',
     // Rendered only while open; on the top layer where the popover API exists.
     '.sw-action-menu-list',
+    // MultiSelect's panel. Rendered only while open; on the top layer where
+    // the popover API exists.
+    '.sw-multi-select-panel',
     '.sw-tooltip:not([hidden])',
     // DateField and CalendarButton share it. Rendered only while open; on the
     // top layer where the popover API exists.

package/dist/css/stylesheet.js

@@ -9,6 +9,8 @@ import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
+import { noticeClassCatalog } from './css-notice.js';
+import { glyphTileClassCatalog } from './css-glyph-tile.js';
 import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
@@ -34,9 +36,12 @@ 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 { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { selectClassCatalog } from './css-select.js';
+import { multiSelectClassCatalog } from './css-multi-select.js';
 import { splitClassCatalog } from './css-split.js';
 import { toastClassCatalog } from './css-toast.js';
+import { toastCardClassCatalog } from './css-toast-card.js';
 import { cssDocumentCanvas } from './css-document.js';
 import { cssPaletteAttributes } from './css-palettes.js';
 import { cssUtilities } from './css-utilities.js';
@@ -64,9 +69,11 @@ export function utilityClassCatalog() {
         ...chromeClassCatalog(),
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),
+        ...dialogFrameClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...multiSelectClassCatalog(),
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
@@ -75,6 +82,8 @@ export function utilityClassCatalog() {
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),
         ...progressClassCatalog(),
+        ...noticeClassCatalog(),
+        ...glyphTileClassCatalog(),
         ...tooltipClassCatalog(),
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
@@ -90,6 +99,7 @@ export function utilityClassCatalog() {
         ...stepsClassCatalog(),
         ...splitClassCatalog(),
         ...toastClassCatalog(),
+        ...toastCardClassCatalog(),
         ...responsiveClassCatalog(),
         ...boxBorderClassCatalog(),
     ];

package/dist/index.d.ts

@@ -7,7 +7,9 @@ export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, }
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
-export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';
+export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
+export { Notice, noticeTones, noticeVariants, type NoticeProps, type NoticeRole, type NoticeTone, type NoticeVariant, } from './components/Notice.js';
+export { Progress, progressTones, type ProgressProps, type ProgressTone, } from './components/Progress.js';
 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';
@@ -18,10 +20,10 @@ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from '
 export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
 export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, type DialogProps, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
+export { Dialog, dialogSizes, 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, toastTones } from './components/Toast.js';
+export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, type FieldProps, type FieldSize } from './components/Field.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
@@ -34,6 +36,7 @@ export { SectionNav, type SectionNavItem, type SectionNavProps, } from './compon
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
+export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableColumnWidth, type TableDensity, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableSort, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
@@ -50,7 +53,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 } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridEntry, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelWidth, } from './components/DenominationGrid.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 { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -6,7 +6,9 @@ export { DateField, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
-export { Progress, } from './components/Progress.js';
+export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
+export { Notice, noticeTones, noticeVariants, } from './components/Notice.js';
+export { Progress, progressTones, } from './components/Progress.js';
 export { Tooltip, } from './components/Tooltip.js';
 export { InfoTip } from './components/InfoTip.js';
 export { RadioGroup, } from './components/RadioGroup.js';
@@ -17,10 +19,10 @@ export { Button, } from './components/Button.js';
 export { Box, } from './components/Box.js';
 export { ButtonGroup, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
-export { Dialog, } from './components/Dialog.js';
+export { Dialog, dialogSizes, } from './components/Dialog.js';
 export { StatTile, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
-export { Toast, toastTones } from './components/Toast.js';
+export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field } from './components/Field.js';
 export { Step, Steps, } from './components/Steps.js';
 export { Stepper, } from './components/Stepper.js';
@@ -30,6 +32,7 @@ export { Nav } from './components/Nav.js';
 export { SectionNav, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
+export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
 export { Text, } from './components/Text.js';
@@ -39,5 +42,5 @@ export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
-export { DenominationGrid } from './components/DenominationGrid.js';
+export { DenominationGrid, denominationLabelAppearances, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';