@scalewing/react 1.47.0 → 1.49.0

package/dist/css/css-site-header.js

@@ -0,0 +1,262 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { quietFill } from './quiet-fill.js';
+import { zIndex } from './stacking.js';
+const label = typographyVariants.label;
+const title = typographyVariants.title;
+/** The bar's height: 56 px on a phone, 72 px from `lg`. */
+const compactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
+const wideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
+const wide = breakpointQuery('from', 'lg');
+/*
+ * The bar: the solid surface with a hairline under it, its content in the
+ * page container with the page gutter. Below `lg` it holds the brand, the
+ * compact actions and the menu button; from `lg` the brand, the
+ * destinations (the current one at label weight over a bar in the words'
+ * colour, as tall as the bar) and the actions, spread apart.
+ */
+function barRules() {
+    return `.sw-site-header {
+  --sw-site-header-height: ${compactHeight};
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  position: relative;
+}
+
+.sw-site-header-sticky {
+  position: sticky;
+  top: 0;
+  ${zIndex('topChrome')}
+}
+
+.sw-site-header-bar {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--sw-space-5);
+  justify-content: space-between;
+  margin-inline: auto;
+  max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5));
+  min-height: var(--sw-site-header-height);
+  padding-inline: var(--sw-space-4);
+}
+
+.sw-site-header-brand {
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+.sw-site-header-nav,
+.sw-site-header-actions {
+  display: none;
+}
+
+.sw-site-header-compact {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-1);
+}
+
+.sw-site-header-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-site-header-nav .sw-site-header-list {
+  display: flex;
+  gap: var(--sw-space-5);
+}
+
+[data-theme] .sw-site-header-nav .sw-site-header-link {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-size: ${label.fontSize}px;
+  font-weight: 400;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-site-header-height);
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-nav .sw-site-header-link:hover {
+  box-shadow: inset 0 -2px 0 var(--sw-color-border);
+}
+
+[data-theme] .sw-site-header-nav .sw-site-header-link[aria-current] {
+  box-shadow: inset 0 -2px 0 currentColor;
+  font-weight: ${label.fontWeight};
+}
+
+[data-theme] .sw-site-header-nav .sw-site-header-link:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-actions {
+  align-items: center;
+  gap: var(--sw-space-4);
+}
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-site-header-bar { padding-inline: var(--sw-space-5); }
+}
+
+@media ${wide} {
+  .sw-site-header { --sw-site-header-height: ${wideHeight}; }
+  .sw-site-header-nav { display: block; }
+  .sw-site-header-actions { display: flex; }
+  .sw-site-header-compact { display: none; }
+}`;
+}
+/*
+ * The menu is a native \`details\`: its \`summary\` is the button (the menu
+ * glyph and its name while closed, the close glyph and its name while
+ * open, the other pair hidden so only one is read), and its panel lies
+ * under the bar over the rest of the window, the destinations as large
+ * rows with hairlines and the menu's actions at the panel's foot. It
+ * scrolls on its own when the window is short.
+ */
+function menuRules() {
+    return `.sw-site-header-menu > summary {
+  list-style: none;
+}
+
+.sw-site-header-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.sw-site-header-menu-button {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  height: var(--sw-control-md-min-height);
+  justify-content: center;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-site-header-menu-button:hover {
+  background: ${quietFill};
+}
+
+.sw-site-header-menu-button:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-menu-open,
+.sw-site-header-menu-close,
+.sw-site-header-glyph {
+  align-items: center;
+  display: inline-flex;
+}
+
+.sw-site-header-menu[open] .sw-site-header-menu-open,
+.sw-site-header-menu:not([open]) .sw-site-header-menu-close {
+  display: none;
+}
+
+.sw-site-header-panel {
+  background: var(--sw-color-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--sw-site-header-height) - 1px);
+  inset-inline: 0;
+  overflow-y: auto;
+  padding: var(--sw-space-2) var(--sw-space-4) var(--sw-space-6);
+  position: absolute;
+  top: calc(100% + 1px);
+}
+
+.sw-site-header-menu-nav .sw-site-header-list {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link {
+  align-items: center;
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-text);
+  display: flex;
+  font-size: ${title.fontSize}px;
+  font-weight: ${title.fontWeight};
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+  min-height: ${compactHeight};
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link[aria-current] {
+  color: var(--sw-color-accent);
+}
+
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-menu-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  margin-top: auto;
+  padding-top: var(--sw-space-5);
+}`;
+}
+export function cssSiteHeaderClasses() {
+    return `${barRules()}
+
+${menuRules()}
+
+/*
+ * Forced colours drop box shadows, so the current destination's bar is a
+ * thick underline there.
+ */
+@media (forced-colors: active) {
+  .sw-site-header,
+  [data-theme] .sw-site-header-menu-nav .sw-site-header-link {
+    border-color: CanvasText;
+  }
+
+  [data-theme] .sw-site-header-link[aria-current] {
+    color: Highlight;
+  }
+
+  [data-theme] .sw-site-header-nav .sw-site-header-link[aria-current] {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: var(--sw-space-2);
+  }
+
+  .sw-site-header-menu-button {
+    border: 1px solid ButtonText;
+  }
+}`;
+}
+export function siteHeaderClassCatalog() {
+    return [
+        'sw-site-header',
+        'sw-site-header-sticky',
+        'sw-site-header-bar',
+        'sw-site-header-brand',
+        'sw-site-header-nav',
+        'sw-site-header-actions',
+        'sw-site-header-compact',
+        'sw-site-header-list',
+        'sw-site-header-link',
+        'sw-site-header-menu',
+        'sw-site-header-menu-button',
+        'sw-site-header-menu-open',
+        'sw-site-header-menu-close',
+        'sw-site-header-glyph',
+        'sw-site-header-panel',
+        'sw-site-header-menu-nav',
+        'sw-site-header-menu-actions',
+    ];
+}

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

@@ -0,0 +1,10 @@
+export declare const skeletonVariants: readonly ["lines", "rows"];
+/** `lines` is bars of text in a column; `rows` is list rows with hairlines. */
+export type SkeletonVariant = (typeof skeletonVariants)[number];
+/** How many bars or rows a Skeleton draws. */
+export declare const skeletonLineRange: {
+    readonly min: 1;
+    readonly max: 6;
+};
+export declare function cssSkeletonClasses(): string;
+export declare function skeletonClassCatalog(): string[];

package/dist/css/css-skeleton.js

@@ -0,0 +1,110 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+export const skeletonVariants = ['lines', 'rows'];
+/** How many bars or rows a Skeleton draws. */
+export const skeletonLineRange = { min: 1, max: 6 };
+/*
+ * The widths the bars take in turn, so a column reads as text with ragged
+ * ends rather than a grid; the last bar of `lines` is shorter still.
+ */
+const barWidths = ['100%', '92%', '84%', '96%', '88%', '80%'];
+function barWidthRules(parent) {
+    return barWidths
+        .map((width, index) => `${parent} > .sw-skeleton-bar:nth-of-type(${index + 1}) { width: ${width}; }`)
+        .join('\n');
+}
+/*
+ * Skeleton: grey placeholder bars in the quiet fill, rounded, a text
+ * line's height apart. `rows` draws each as a list row: a mark (space-6,
+ * the small radius) and a bar at the control height (44 px on a coarse
+ * pointer, as a pressable row there), hairlines between. The bars pulse
+ * between full and 60 % opacity over the travel duration, and stay still
+ * under reduced motion. Forced colours, which drop fills, draw each bar's
+ * edge in GrayText so the shape stays.
+ */
+export function cssSkeletonClasses() {
+    return `.sw-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  width: 100%;
+}
+
+.sw-skeleton-bar,
+.sw-skeleton-mark {
+  animation: sw-skeleton-pulse calc(2 * var(--sw-motion-travel)) var(--sw-motion-travel-easing) infinite alternate;
+  background: ${quietFill};
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  display: block;
+  flex: none;
+}
+
+.sw-skeleton-bar {
+  height: calc(${body.fontSize}px * 0.8);
+}
+
+${barWidthRules('.sw-skeleton-lines')}
+.sw-skeleton-lines > .sw-skeleton-bar:last-of-type:not(:first-of-type) { width: 60%; }
+
+.sw-skeleton-rows {
+  gap: 0;
+}
+
+.sw-skeleton-row {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--sw-space-3);
+  min-height: var(--sw-control-md-min-height);
+  padding-block: var(--sw-space-2);
+}
+
+.sw-skeleton-row + .sw-skeleton-row {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-skeleton-row .sw-skeleton-bar {
+  flex: 0 1 60%;
+}
+
+.sw-skeleton-row:nth-of-type(even) .sw-skeleton-bar {
+  flex-basis: 45%;
+}
+
+.sw-skeleton-mark {
+  height: var(--sw-space-6);
+  width: var(--sw-space-6);
+}
+
+@keyframes sw-skeleton-pulse {
+  from { opacity: 1; }
+  to { opacity: 0.6; }
+}
+
+@media ${coarsePointerQuery} {
+  .sw-skeleton-row { min-height: ${touchTarget}; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-skeleton-bar,
+  .sw-skeleton-mark { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-skeleton-bar,
+  .sw-skeleton-mark { border: 1px solid GrayText; }
+  .sw-skeleton-row + .sw-skeleton-row { border-color: GrayText; }
+}`;
+}
+export function skeletonClassCatalog() {
+    return [
+        'sw-skeleton',
+        ...skeletonVariants.map((variant) => `sw-skeleton-${variant}`),
+        'sw-skeleton-bar',
+        'sw-skeleton-row',
+        'sw-skeleton-mark',
+    ];
+}

package/dist/css/css-stepper-unit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export declare function cssStepperUnitClasses(): string;
+export declare function stepperUnitClassCatalog(): string[];

package/dist/css/css-stepper-unit.js

@@ -0,0 +1,102 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
+import { changedTintLayer } from './css-field-changed.js';
+const body = typographyVariants.body;
+/*
+ * Outranks the stepper's own input rules and state rules (the invalid
+ * border, the changed shadow and tint), which the frame draws instead.
+ */
+const framedInput = '[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input';
+const tintedFrame = '.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown))';
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export function cssStepperUnitClasses() {
+    return `.sw-stepper-count {
+  ${controlSurface}
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-stepper-full .sw-stepper-count { display: flex; }
+
+${framedInput} {
+  align-self: stretch;
+  background: transparent;
+  background-image: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 5ch;
+  min-height: 0;
+  padding-inline: 0;
+  text-align: end;
+}
+
+${framedInput}:focus-visible { outline: none; }
+
+.sw-stepper-count:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-stepper-unit {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: ${body.fontSize}px;
+  line-height: ${body.lineHeight}px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-stepper-invalid .sw-stepper-count { border-color: var(--sw-color-danger); }
+
+.sw-stepper-changed .sw-stepper-count {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+${tintedFrame} { background-image: ${changedTintLayer}; }
+
+${tintedFrame} > .sw-stepper-unit { color: var(--sw-color-text); }
+
+/*
+ * The frame draws the surface, so it carries the disabled look for its count,
+ * and only that look: a locked count drops the invalid and changed edges and
+ * tint, which name nothing a person can act on.
+ */
+.sw-stepper .sw-stepper-count:has(> input:disabled) {
+  ${disabledControlSurface}
+  background-image: none;
+  border-color: var(--sw-color-border);
+  box-shadow: none;
+}
+
+.sw-stepper .sw-stepper-count:has(> input:disabled) > .sw-stepper-unit {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-stepper-unit { color: CanvasText; }
+  .sw-stepper-invalid .sw-stepper-count { border-color: Mark; }
+  .sw-stepper-changed .sw-stepper-count { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+  .sw-stepper .sw-stepper-count:has(> input:disabled) {
+    ${disabledControlForcedColors}
+    box-shadow: none;
+  }
+}`;
+}
+export function stepperUnitClassCatalog() {
+    return ['sw-stepper-count', 'sw-stepper-unit'];
+}

package/dist/css/css-stepper.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { changedTintLayer } from './css-field-changed.js';
+import { cssStepperUnitClasses, stepperUnitClassCatalog, } from './css-stepper-unit.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const title = typographyVariants.title;
@@ -116,7 +117,9 @@ ${input} {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
-${stateRules()}`;
+${stateRules()}
+
+${cssStepperUnitClasses()}`;
 }
 export function stepperClassCatalog() {
     return [
@@ -129,5 +132,6 @@ export function stepperClassCatalog() {
         'sw-stepper-changed',
         'sw-stepper-readonly',
         'sw-stepper-limit-plain',
+        ...stepperUnitClassCatalog(),
     ];
 }

package/dist/css/stacking.js

@@ -13,15 +13,15 @@
  *    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 (and a banded
- *    Dialog's title band, inside its dialog), over a lifted
+ * 5. `topChrome`: the sticky AppHeader, sticky Tabs strip or AppShell page
+ *    bar (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. `sheetGrabber`: a bottom sheet's grabber, inside its dialog, over the
  *    banded title band that sticks under it.
  * 7. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, MultiSelect panel, Combobox list, Tooltip, the DateField and CalendarButton
- *    calendar) over everything in the page.
+ *    list, ContextSwitcher popup, MultiSelect panel, Combobox list, 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.
  */
@@ -60,6 +60,9 @@ const openPopups = [
     // Combobox's list. Rendered only while open; on the top layer where the
     // popover API exists.
     '.sw-combobox-popup',
+    // ContextSwitcher's popup. Rendered only while open; on the top layer
+    // where the popover API exists.
+    '.sw-context-switcher-popup',
     '.sw-tooltip:not([hidden])',
     // DateField, CalendarButton and DateRangeButton share it. Rendered only
     // while open; on the top layer where the popover API exists.

package/dist/css/stylesheet.js

@@ -2,6 +2,8 @@ import { cardVariants, darkTheme, lightTheme, typographyVariants, } from '@scale
 import { chartToneClassCatalog } from './chart-tones.js';
 import { actionBarClassCatalog } from './css-action-bar.js';
 import { actionMenuClassCatalog } from './css-action-menu.js';
+import { commandPaletteClassCatalog } from './css-command-palette.js';
+import { contextSwitcherClassCatalog } from './css-context-switcher.js';
 import { accordionClassCatalog } from './css-accordion.js';
 import { switchClassCatalog } from './css-switch.js';
 import { dateFieldClassCatalog } from './css-date-field.js';
@@ -10,11 +12,14 @@ import { dateRangeClassCatalog } from './css-date-range.js';
 import { fileFieldClassCatalog } from './css-file-field.js';
 import { articleClassCatalog } from './css-article.js';
 import { documentViewerClassCatalog } from './css-document-viewer.js';
+import { fixtureClassCatalog } from './css-fixture.js';
 import { listClassCatalog } from './css-list.js';
 import { markdownClassCatalog } from './css-markdown.js';
 import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
+import { skeletonClassCatalog } from './css-skeleton.js';
+import { emptyStateClassCatalog } from './css-empty-state.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
@@ -22,6 +27,10 @@ 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';
+import { bandClassCatalog } from './css-band.js';
+import { heroClassCatalog } from './css-hero.js';
+import { siteFooterClassCatalog } from './css-site-footer.js';
+import { siteHeaderClassCatalog } from './css-site-header.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
 import { descriptionListClassCatalog } from './css-description-list.js';
 import { tabsClassCatalog } from './css-tabs.js';
@@ -39,6 +48,7 @@ import { boxBorderClassCatalog } from './css-box-border.js';
 import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
+import { buttonLinkClassCatalog } from './css-button-link.js';
 import { barChartClassCatalog } from './css-bar-chart.js';
 import { chartLegendClassCatalog } from './css-chart-legend.js';
 import { chartPlotClassCatalog } from './css-chart-plot.js';
@@ -81,6 +91,7 @@ export function utilityClassCatalog() {
         'sw-tabular',
         ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
         ...buttonClassCatalog(),
+        ...buttonLinkClassCatalog(),
         ...dataClassCatalog(),
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
@@ -103,6 +114,8 @@ export function utilityClassCatalog() {
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...contextSwitcherClassCatalog(),
+        ...commandPaletteClassCatalog(),
         ...multiSelectClassCatalog(),
         ...comboboxClassCatalog(),
         ...actionBarClassCatalog(),
@@ -111,6 +124,7 @@ export function utilityClassCatalog() {
         ...calendarButtonClassCatalog(),
         ...dateRangeClassCatalog(),
         ...listClassCatalog(),
+        ...fixtureClassCatalog(),
         ...fileFieldClassCatalog(),
         ...articleClassCatalog(),
         ...documentViewerClassCatalog(),
@@ -119,12 +133,18 @@ export function utilityClassCatalog() {
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),
+        ...skeletonClassCatalog(),
+        ...emptyStateClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
         ...glyphTileClassCatalog(),
         ...tooltipClassCatalog(),
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
+        ...bandClassCatalog(),
+        ...heroClassCatalog(),
+        ...siteFooterClassCatalog(),
+        ...siteHeaderClassCatalog(),
         ...statTileClassCatalog(),
         ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueT
 export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
+export { Skeleton, skeletonVariants, type SkeletonProps, type SkeletonVariant, } from './components/Skeleton.js';
+export { EmptyState, emptyStateTitleElements, type EmptyStateProps, type EmptyStateTitleElement, } from './components/EmptyState.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';
@@ -31,6 +33,7 @@ export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPer
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, } from './components/Button.js';
+export { ButtonLink, type ButtonLinkProps } from './components/ButtonLink.js';
 export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
@@ -52,6 +55,11 @@ export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
 export { NavCount, navCountTones, type NavCountProps, type NavCountTone, } from './components/NavCount.js';
+export { FixtureGroup, type FixtureGroupProps, } from './components/FixtureGroup.js';
+export { FixtureRow, type FixtureRowProps, type FixtureSide, type FixtureStatus, } from './components/FixtureRow.js';
+export { CommandPalette, commandPaletteShortcuts, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcut, } from './components/CommandPalette.js';
+export { CommandPaletteTrigger, type CommandPaletteTriggerProps, } from './components/CommandPaletteTrigger.js';
+export { ContextSwitcher, contextSwitcherTriggerAppearances, contextSwitcherWidths, type ContextSwitcherAction, type ContextSwitcherBadge, type ContextSwitcherFilter, type ContextSwitcherGroup, type ContextSwitcherOption, type ContextSwitcherProps, type ContextSwitcherTriggerAppearance, type ContextSwitcherWidth, } from './components/ContextSwitcher.js';
 export { AppShell, type AppShellLabels, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, } from './components/AppShell.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, segmentedSizes, type SegmentedSize, type SegmentedItem, } from './components/SegmentedControl.js';
@@ -68,12 +76,20 @@ export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
 export { breakpointQuery } from './css/breakpoints.js';
+export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
+export type { BandElement, BandProps, BandTone, BandWidth, } from './components/Band.js';
+export { SiteHeader } from './components/SiteHeader.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './components/SiteHeader.js';
+export { Hero } from './components/Hero.js';
+export type { HeroProps } from './components/Hero.js';
+export { SiteFooter } from './components/SiteFooter.js';
+export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
 export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, } from './components/DescriptionList.js';
-export { Grid } from './components/Grid.js';
-export type { GridColumns, GridProps } from './components/Grid.js';
+export { Grid, gridFits } from './components/Grid.js';
+export type { GridColumns, GridFit, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';