@scalewing/react 1.47.0 → 1.48.0

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

@@ -0,0 +1,152 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/** The font declarations of a typography variant, weight included or not. */
+function type(variant, weight = variant.fontWeight) {
+    return `font-size: ${variant.fontSize}px;
+  font-weight: ${weight};
+  letter-spacing: ${variant.letterSpacing}px;
+  line-height: ${variant.lineHeight}px;`;
+}
+/*
+ * The footer sits on the inverse band (`Band tone="inverse"`), which
+ * re-scopes the theme's words, muted words and hairline, so these rules
+ * read the ordinary variables. Group labels are the band's words at label
+ * weight; links are its muted words in label size, no underline (a list
+ * of links in a named `nav`), the band's words with an underline on hover
+ * and focus, and the current page in the band's words at label weight. The
+ * link rules match the band's running-text link rule's specificity and
+ * win by coming after it (`cssSiteFooterClasses` follows `cssBandClasses`;
+ * a test holds the order).
+ * Below `md` the brand spans two columns of groups; from `md` the brand
+ * and the groups share one wrapping row, spread apart.
+ */
+export function cssSiteFooterClasses() {
+    return `.sw-site-footer-top {
+  display: grid;
+  gap: var(--sw-space-6) var(--sw-space-5);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.sw-site-footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  grid-column: 1 / -1;
+  max-width: 20rem;
+}
+
+.sw-site-footer-brand > :first-child {
+  align-self: flex-start;
+}
+
+.sw-site-footer-tagline {
+  color: var(--sw-color-muted);
+  margin: 0;
+  ${type(label, 400)}
+}
+
+.sw-site-footer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-site-footer-label {
+  color: var(--sw-color-text);
+  margin: 0;
+  ${type(caption, 600)}
+}
+
+.sw-site-footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link {
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  ${type(label, 400)}
+  overflow-wrap: anywhere;
+  text-decoration-color: transparent;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link:is(:hover, :focus-visible) {
+  color: var(--sw-color-text);
+  text-decoration-color: currentColor;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link[aria-current='page'] {
+  color: var(--sw-color-text);
+  font-weight: ${label.fontWeight};
+}
+
+.sw-site-footer-bottom {
+  align-items: center;
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-top: var(--sw-space-6);
+  padding-top: var(--sw-space-4);
+  ${type(caption)}
+}
+
+.sw-site-footer-end {
+  margin-inline-start: auto;
+}
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-site-footer-top {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sw-space-6) var(--sw-space-8);
+    justify-content: space-between;
+  }
+}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    align-items: center;
+    min-height: ${touchTarget};
+  }
+
+  .sw-site-footer-links {
+    gap: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    color: LinkText;
+  }
+
+  .sw-site-footer-bottom {
+    border-top-color: CanvasText;
+  }
+}`;
+}
+export function siteFooterClassCatalog() {
+    return [
+        'sw-site-footer',
+        'sw-site-footer-top',
+        'sw-site-footer-brand',
+        'sw-site-footer-tagline',
+        'sw-site-footer-group',
+        'sw-site-footer-label',
+        'sw-site-footer-links',
+        'sw-site-footer-link',
+        'sw-site-footer-bottom',
+        'sw-site-footer-legal',
+        'sw-site-footer-end',
+    ];
+}

package/dist/css/css-site-header.d.ts

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

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/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,13 @@ 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 { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
@@ -22,6 +26,9 @@ 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 { 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 +46,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 +89,7 @@ export function utilityClassCatalog() {
         'sw-tabular',
         ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
         ...buttonClassCatalog(),
+        ...buttonLinkClassCatalog(),
         ...dataClassCatalog(),
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
@@ -103,6 +112,8 @@ export function utilityClassCatalog() {
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...contextSwitcherClassCatalog(),
+        ...commandPaletteClassCatalog(),
         ...multiSelectClassCatalog(),
         ...comboboxClassCatalog(),
         ...actionBarClassCatalog(),
@@ -111,6 +122,7 @@ export function utilityClassCatalog() {
         ...calendarButtonClassCatalog(),
         ...dateRangeClassCatalog(),
         ...listClassCatalog(),
+        ...fixtureClassCatalog(),
         ...fileFieldClassCatalog(),
         ...articleClassCatalog(),
         ...documentViewerClassCatalog(),
@@ -119,12 +131,16 @@ export function utilityClassCatalog() {
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),
+        ...skeletonClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
         ...glyphTileClassCatalog(),
         ...tooltipClassCatalog(),
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
+        ...bandClassCatalog(),
+        ...siteFooterClassCatalog(),
+        ...siteHeaderClassCatalog(),
         ...statTileClassCatalog(),
         ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),

package/dist/index.d.ts

@@ -16,6 +16,7 @@ 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 { 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 +32,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 +54,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,6 +75,12 @@ 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 { 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';