@scalewing/react 1.60.1 → 1.61.0

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

@@ -1,4 +1,4 @@
-import { type Breakpoint } from './breakpoints.js';
+import { type Breakpoint, type VisibilityBreakpoint } from './breakpoints.js';
 export declare const gridColumnCounts: readonly [1, 2, 3, 4, 6];
 export type GridColumns = (typeof gridColumnCounts)[number];
 /**
@@ -14,6 +14,13 @@ export declare const gridFitWidths: {
 export type GridFit = keyof typeof gridFitWidths;
 export declare const gridFits: GridFit[];
 export declare function gridFitClass(fit: GridFit): string;
+/**
+ * A rail grid's breakpoint: from it up, the first column takes the free
+ * space and a fixed rail sits beside it; below it, one column.
+ */
+export type GridRail = VisibilityBreakpoint;
+export declare const gridRails: ("md" | "lg")[];
+export declare function gridRailClass(rail: GridRail): string;
 export declare function gridColumnsClass(columns: GridColumns): string;
 export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
 export declare function cssGridClasses(): string;

package/dist/css/css-grid.js

@@ -1,4 +1,4 @@
-import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { breakpointQuery, breakpoints, visibilityBreakpoints, } from './breakpoints.js';
 export const gridColumnCounts = [1, 2, 3, 4, 6];
 /**
  * A fitted grid's narrowest column: as many columns as fit the grid's width
@@ -14,6 +14,18 @@ export const gridFits = Object.keys(gridFitWidths);
 export function gridFitClass(fit) {
     return `sw-grid-fit-${fit}`;
 }
+export const gridRails = visibilityBreakpoints;
+/* The side rail's width, a named geometry of this layout. */
+const gridRailWidth = '20rem';
+export function gridRailClass(rail) {
+    return `sw-grid-rail-${rail}`;
+}
+function railRules(rail) {
+    return `.${gridRailClass(rail)} { grid-template-columns: minmax(0, 1fr); }
+@media ${breakpointQuery('from', rail)} {
+  .${gridRailClass(rail)} { grid-template-columns: minmax(0, 1fr) ${gridRailWidth}; }
+}`;
+}
 export function gridColumnsClass(columns) {
     return `sw-grid-cols-${columns}`;
 }
@@ -35,7 +47,13 @@ ${gridColumnCounts
         .join('\n')}
 }`);
     const fitted = gridFits.map((fit) => `.${gridFitClass(fit)} { grid-template-columns: repeat(auto-fit, minmax(min(100%, ${gridFitWidths[fit]}), 1fr)); }`);
-    return [base, ...columns, ...below, ...fitted].join('\n');
+    return [
+        base,
+        ...columns,
+        ...below,
+        ...fitted,
+        ...gridRails.map(railRules),
+    ].join('\n');
 }
 export function gridClassCatalog() {
     return [
@@ -43,5 +61,6 @@ export function gridClassCatalog() {
         ...gridColumnCounts.map((count) => gridColumnsClass(count)),
         ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
         ...gridFits.map(gridFitClass),
+        ...gridRails.map(gridRailClass),
     ];
 }

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

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

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

@@ -0,0 +1,106 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStrokeIn } from './chevron.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+/*
+ * The title's least width beside the actions: narrower than this, the
+ * actions wrap under the words instead of squeezing the title.
+ */
+const wordsMinWidth = '20rem';
+/*
+ * A page's header: the back link, then the title's row, then the part below.
+ * The row wraps as a whole: the words take the free space and keep at least
+ * their least width (or all of a narrower row), and the actions, which wrap
+ * among themselves, sit at the end, or under the words at the start when
+ * they do not fit beside them.
+ */
+function layoutRules() {
+    return `.sw-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-page-header-row {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3) var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-page-header-words {
+  display: flex;
+  flex: 1 1 min(100%, ${wordsMinWidth});
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-page-header-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-page-header-below {
+  min-width: 0;
+}`;
+}
+/*
+ * The back link: the canvas's accent link in label type at weight 500, a
+ * shared chevron pointing back before its words, mirrored in right-to-left,
+ * at the xs control's height and the 44 px target on a coarse pointer. The
+ * chevron is a border, so forced colours keep it in the link's colour.
+ */
+function backRules() {
+    return `.sw-page-header-back {
+  align-items: center;
+  align-self: flex-start;
+  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;
+  max-width: 100%;
+  min-height: var(--sw-control-xs-min-height);
+  overflow-wrap: anywhere;
+}
+
+.sw-page-header-back::before {
+  ${chevronStrokeIn('currentColor')}
+  content: '';
+  flex: none;
+  transform: rotate(135deg);
+}
+
+.sw-page-header-back:dir(rtl)::before { transform: rotate(-45deg); }
+
+@media ${coarsePointerQuery} {
+  .sw-page-header-back { min-height: ${touchTarget}; }
+}`;
+}
+/* PageHeader (see components/PageHeader.tsx). */
+export function cssPageHeaderClasses() {
+    return `${layoutRules()}
+
+${backRules()}`;
+}
+export function pageHeaderClassCatalog() {
+    return [
+        'sw-page-header',
+        'sw-page-header-back',
+        'sw-page-header-row',
+        'sw-page-header-words',
+        'sw-page-header-actions',
+        'sw-page-header-below',
+    ];
+}

package/dist/css/css-table-bounded.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssTableBoundedEdgeClasses } from './css-table-bounded-edges.js';
-import { tableCellPadding, tableRuleWidth, tableSortMinHeight, } from './css-table-metrics.js';
+import { tableCellPadding, tableRowLineVariable, tableRuleWidth, tableSortMinHeight, } from './css-table-metrics.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
@@ -34,7 +34,8 @@ function heightRules() {
   --sw-table-cell-pad: ${tableCellPadding.comfortable.block};
   --sw-table-head-block: 0px;
   --sw-table-foot-rows: 0;
-  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (${body.lineHeight}px + 2 * var(--sw-table-cell-pad) + ${tableRuleWidth}) + var(--sw-table-head-block));
+  ${tableRowLineVariable}: ${body.lineHeight}px;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (var(${tableRowLineVariable}) + 2 * var(--sw-table-cell-pad) + ${tableRuleWidth}) + var(--sw-table-head-block));
 }
 
 .sw-table-bounded:has(> .sw-table-compact) {

package/dist/css/css-table-metrics.d.ts

@@ -12,3 +12,8 @@ export declare const tableCellPadding: {
 export declare const tableRuleWidth = "1px";
 /** The least height of a sortable header's button on a fine pointer. */
 export declare const tableSortMinHeight = "var(--sw-control-xs-min-height)";
+/**
+ * A bounded table's row line, from which its height is counted; the compact
+ * density restates it with its smaller line.
+ */
+export declare const tableRowLineVariable = "--sw-table-row-line";

package/dist/css/css-table-metrics.js

@@ -11,3 +11,8 @@ export const tableCellPadding = {
 export const tableRuleWidth = '1px';
 /** The least height of a sortable header's button on a fine pointer. */
 export const tableSortMinHeight = 'var(--sw-control-xs-min-height)';
+/**
+ * A bounded table's row line, from which its height is counted; the compact
+ * density restates it with its smaller line.
+ */
+export const tableRowLineVariable = '--sw-table-row-line';

package/dist/css/css-tabs.js

@@ -88,6 +88,13 @@ export function cssTabsClasses() {
   color: var(--sw-color-accent);
 }
 
+/* A tab with a count: its label and the shared pill centred, a space-2 apart. */
+.sw-tab-counted {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+}
+
 .sw-tab-panel:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -108,6 +115,7 @@ export function tabsClassCatalog() {
         'sw-tabs-sticky',
         'sw-tab',
         'sw-tab-selected',
+        'sw-tab-counted',
         'sw-tab-panel',
     ];
 }

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

@@ -1 +1,6 @@
+/** The most lines a `maxLines` clamp keeps; one line is `truncate`. */
+export declare const textMaxLines: readonly [2, 3];
+export type TextMaxLines = (typeof textMaxLines)[number];
+export declare function textClampClass(count: TextMaxLines): string;
+export declare function textClampClassCatalog(): string[];
 export declare function cssTextClasses(): string;

package/dist/css/css-text.js

@@ -29,6 +29,29 @@ function compactTextVariantRules() {
         .join('\n');
     return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
 }
+/** The most lines a `maxLines` clamp keeps; one line is `truncate`. */
+export const textMaxLines = [2, 3];
+export function textClampClass(count) {
+    return `sw-text-clamp-${count}`;
+}
+/*
+ * `maxLines`: a clamped block. `overflow: hidden` only clips the drawing, so
+ * the clamped words stay in the accessibility tree.
+ */
+function clampRules() {
+    return textMaxLines
+        .map((count) => `.${textClampClass(count)} {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: ${count};
+  line-clamp: ${count};
+  overflow: hidden;
+}`)
+        .join('\n');
+}
+export function textClampClassCatalog() {
+    return textMaxLines.map(textClampClass);
+}
 export function cssTextClasses() {
     return `.sw-text-align-start { text-align: start; }
 .sw-text-align-center { text-align: center; }
@@ -38,5 +61,7 @@ ${textMarginReset()}
 
 ${textVariantRules()}
 
-${compactTextVariantRules()}`;
+${compactTextVariantRules()}
+
+${clampRules()}`;
 }

package/dist/css/stylesheet.js

@@ -32,6 +32,7 @@ import { separatorClassCatalog } from './css-separator.js';
 import { bandClassCatalog } from './css-band.js';
 import { screenPreviewClassCatalog } from './css-screen-preview.js';
 import { heroClassCatalog } from './css-hero.js';
+import { pageHeaderClassCatalog } from './css-page-header.js';
 import { siteFooterClassCatalog } from './css-site-footer.js';
 import { siteHeaderClassCatalog } from './css-site-header.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
@@ -78,6 +79,7 @@ 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 { textClampClassCatalog } from './css-text.js';
 import { cssPaletteAttributes } from './css-palettes.js';
 import { cssUtilities } from './css-utilities.js';
 import { cssVariables } from './css-variables.js';
@@ -95,6 +97,7 @@ export function utilityClassCatalog() {
         'sw-text-align-end',
         'sw-tabular',
         ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
+        ...textClampClassCatalog(),
         ...buttonClassCatalog(),
         ...buttonLinkClassCatalog(),
         ...dataClassCatalog(),
@@ -152,6 +155,7 @@ export function utilityClassCatalog() {
         ...bandClassCatalog(),
         ...screenPreviewClassCatalog(),
         ...heroClassCatalog(),
+        ...pageHeaderClassCatalog(),
         ...siteFooterClassCatalog(),
         ...siteHeaderClassCatalog(),
         ...statTileClassCatalog(),

package/dist/css/touch-target.d.ts

@@ -1,2 +1,3 @@
 export declare const touchTarget = "var(--sw-control-md-min-height)";
 export declare const coarsePointerQuery = "(pointer: coarse)";
+export declare const finePointerQuery = "(pointer: fine)";

package/dist/css/touch-target.js

@@ -2,6 +2,10 @@
  * The comfortable touch target on a coarse pointer: the md control height,
  * 44 px, both ways. Controls drawn smaller for a fine pointer (CalendarButton
  * at sm and xs, the ActionMenu trigger and commands) grow to it on touch.
+ * The compact density restates the md height on a fine pointer only, so it
+ * is never in force where a coarse rule runs; a rule that reads this outside
+ * a coarse query (a FixtureRow's height, the rail's links) follows it to 36.
  */
 export const touchTarget = 'var(--sw-control-md-min-height)';
 export const coarsePointerQuery = '(pointer: coarse)';
+export const finePointerQuery = '(pointer: fine)';

package/dist/index.d.ts

@@ -59,14 +59,14 @@ 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 { FixtureGroup, fixtureGroupSides, type FixtureGroupProps, type FixtureGroupSides, } from './components/FixtureGroup.js';
 export { FixtureRow, type FixtureRowProps, type FixtureFlag, type FixtureScore, type FixtureScoreBox, type FixtureScoreSide, type FixtureSelect, type FixtureSide, type FixtureStatus, } from './components/FixtureRow.js';
 export { defaultScheduleGridLabels, ScheduleGrid, type ScheduleGridAxisEntry, type ScheduleGridCarryMode, type ScheduleGridDisabledCell, type ScheduleGridDropCheck, type ScheduleGridItem, type ScheduleGridLabels, type ScheduleGridProps, type ScheduleGridSlot, type ScheduleGridTarget, } from './components/ScheduleGrid.js';
 export { DateToggleCalendar, type DateToggleCalendarProps, } from './components/DateToggleCalendar.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, type AppShellSkipLink, } from './components/AppShell.js';
+export { AppShell, appShellContentMaxWidths, appShellSidebarTones, type AppShellContentMaxWidth, type AppShellSidebarTone, type AppShellLabels, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, type AppShellSkipLink, } 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';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
@@ -75,10 +75,11 @@ export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './co
 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, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowRule, type TableRowVariant, type TableSelectCellProps, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
-export { Text, textFonts, type TextAlign, type TextElement, type TextFont, type TextProps, } from './components/Text.js';
+export { Text, textFonts, textMaxLines, type TextAlign, type TextElement, type TextFont, type TextMaxLines, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
 export { themeFrames, type ThemeFrame } from './css/css-theme-frame.js';
+export { themeDensities, type ThemeDensity } from './css/css-density.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
@@ -98,19 +99,21 @@ export { PreviewTiles } from './components/screen-preview/PreviewTiles.js';
 export type { PreviewTile, PreviewTilesProps, } from './components/screen-preview/PreviewTiles.js';
 export { Hero } from './components/Hero.js';
 export type { HeroProps } from './components/Hero.js';
+export { PageHeader } from './components/PageHeader.js';
+export type { PageHeaderBack, PageHeaderProps, } from './components/PageHeader.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, gridFits } from './components/Grid.js';
-export type { GridColumns, GridFit, GridProps } from './components/Grid.js';
+export { DescriptionItem, DescriptionList, descriptionListLayouts, descriptionListTermWidths, } from './components/DescriptionList.js';
+export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, DescriptionListTermWidth, } from './components/DescriptionList.js';
+export { Grid, gridFits, gridRails } from './components/Grid.js';
+export type { GridColumns, GridFit, GridProps, GridRail, } 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';
 export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridNegativeAppearance, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, DenominationTransposeBreakpoint, } from './components/DenominationGrid.js';
-export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipsSelectedStyles, filterChipTones, } from './components/FilterChips.js';
 export { FilterChipsRow } from './components/FilterChipsRow.js';
 export type { FilterChipsRowProps } from './components/FilterChipsRow.js';
-export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, FilterChipTone, } from './components/FilterChips.js';
+export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, FilterChipsSelectedStyle, FilterChipTone, } from './components/FilterChips.js';

package/dist/index.js

@@ -56,14 +56,14 @@ export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
 export { NavCount, navCountTones, } from './components/NavCount.js';
-export { FixtureGroup, } from './components/FixtureGroup.js';
+export { FixtureGroup, fixtureGroupSides, } from './components/FixtureGroup.js';
 export { FixtureRow, } from './components/FixtureRow.js';
 export { defaultScheduleGridLabels, ScheduleGrid, } from './components/ScheduleGrid.js';
 export { DateToggleCalendar, } from './components/DateToggleCalendar.js';
 export { CommandPalette, commandPaletteShortcuts, } from './components/CommandPalette.js';
 export { CommandPaletteTrigger, } from './components/CommandPaletteTrigger.js';
 export { ContextSwitcher, contextSwitcherTriggerAppearances, contextSwitcherWidths, } from './components/ContextSwitcher.js';
-export { AppShell, } from './components/AppShell.js';
+export { AppShell, appShellContentMaxWidths, appShellSidebarTones, } from './components/AppShell.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';
@@ -71,10 +71,11 @@ export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, tableRowVariants, } from './components/Table.js';
-export { Text, textFonts, } from './components/Text.js';
+export { Text, textFonts, textMaxLines, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { themeCanvases } from './css/css-canvas-grouped.js';
 export { themeFrames } from './css/css-theme-frame.js';
+export { themeDensities } from './css/css-density.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
@@ -85,10 +86,11 @@ export { PreviewImage } from './components/screen-preview/PreviewImage.js';
 export { PreviewRow, previewRowKinds, } from './components/screen-preview/PreviewRow.js';
 export { PreviewTiles } from './components/screen-preview/PreviewTiles.js';
 export { Hero } from './components/Hero.js';
+export { PageHeader } from './components/PageHeader.js';
 export { SiteFooter } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
-export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
-export { Grid, gridFits } from './components/Grid.js';
+export { DescriptionItem, DescriptionList, descriptionListLayouts, descriptionListTermWidths, } from './components/DescriptionList.js';
+export { Grid, gridFits, gridRails } from './components/Grid.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
-export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipsSelectedStyles, filterChipTones, } from './components/FilterChips.js';
 export { FilterChipsRow } from './components/FilterChipsRow.js';