@scalewing/react 1.21.0 → 1.23.0

package/dist/components/tooltip/use-tooltip-placement.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * While `shown`, puts the tooltip on the top layer as a manual popover and
+ * keeps it beside its anchor and inside the viewport: under the anchor (over
+ * it when there is no room below), lined up with its start or, where that
+ * would leave the screen, its end, a `space-2` inset from every edge. It
+ * follows scrolling, resizing, and a change in either element's size. While
+ * hidden the tooltip stays in the page (it may name its trigger) and is not
+ * a popover. Without the popover API it keeps the same fixed placement.
+ */
+export declare function useTooltipPlacement(shown: boolean, tooltipRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>): void;

package/dist/components/tooltip/use-tooltip-placement.js

@@ -0,0 +1,46 @@
+'use client';
+import { useLayoutEffect } from 'react';
+import { placePopover } from '../use-anchored-popover.js';
+/**
+ * While `shown`, puts the tooltip on the top layer as a manual popover and
+ * keeps it beside its anchor and inside the viewport: under the anchor (over
+ * it when there is no room below), lined up with its start or, where that
+ * would leave the screen, its end, a `space-2` inset from every edge. It
+ * follows scrolling, resizing, and a change in either element's size. While
+ * hidden the tooltip stays in the page (it may name its trigger) and is not
+ * a popover. Without the popover API it keeps the same fixed placement.
+ */
+export function useTooltipPlacement(shown, tooltipRef, anchorRef) {
+    useLayoutEffect(() => {
+        const node = tooltipRef.current;
+        const anchor = anchorRef.current;
+        if (!shown || !node || !anchor)
+            return;
+        const supportsPopover = typeof node.showPopover === 'function';
+        if (supportsPopover) {
+            node.setAttribute('popover', 'manual');
+            if (!node.matches(':popover-open'))
+                node.showPopover();
+        }
+        const place = () => {
+            if (node && anchor)
+                placePopover(node, anchor, { flipInline: true });
+        };
+        place();
+        const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(place) : null;
+        resizes?.observe(node);
+        resizes?.observe(anchor);
+        window.addEventListener('resize', place);
+        window.addEventListener('scroll', place, true);
+        return () => {
+            resizes?.disconnect();
+            window.removeEventListener('resize', place);
+            window.removeEventListener('scroll', place, true);
+            if (supportsPopover) {
+                if (node.matches(':popover-open'))
+                    node.hidePopover();
+                node.removeAttribute('popover');
+            }
+        };
+    }, [anchorRef, shown, tooltipRef]);
+}

package/dist/components/use-anchored-popover.d.ts

@@ -6,6 +6,8 @@ export type AnchoredPopoverPlacement = {
     /** Line up with the anchor's other edge when the preferred one overflows. */
     flipInline?: boolean;
 };
+/** Places a fixed (or top-layer) `node` beside `anchor`, inside the viewport. */
+export declare function placePopover(node: HTMLElement, anchor: HTMLElement, { align, flipInline }: AnchoredPopoverPlacement): void;
 /**
  * Shows a mounted element on the top layer as a manual popover, keeps it
  * beside `anchorRef` through scroll, window resize, and a change in its own

package/dist/components/use-anchored-popover.js

@@ -13,7 +13,8 @@ function layoutViewport() {
         height: root.clientHeight || window.innerHeight,
     };
 }
-function placePopover(node, anchor, { align = 'start', flipInline = false }) {
+/** Places a fixed (or top-layer) `node` beside `anchor`, inside the viewport. */
+export function placePopover(node, anchor, { align = 'start', flipInline = false }) {
     const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],

package/dist/css/breakpoints.d.ts

@@ -1,8 +1,29 @@
+/** The layout breakpoint: a phone below it, a wider screen from it. */
 export declare const breakpointScale: {
     readonly md: 48;
 };
 export type Breakpoint = keyof typeof breakpointScale;
 export declare const breakpoints: Breakpoint[];
-export type HideDirection = 'from' | 'below';
-export declare function hideClass(direction: HideDirection, breakpoint: Breakpoint): string;
-export declare function breakpointQuery(direction: HideDirection, breakpoint: Breakpoint): string;
+/**
+ * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
+ * for content that fits only from a laptop up, such as a row of labelled
+ * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
+ */
+export declare const visibilityBreakpointScale: {
+    readonly lg: 64;
+    readonly md: 48;
+};
+export type VisibilityBreakpoint = keyof typeof visibilityBreakpointScale;
+export declare const visibilityBreakpoints: VisibilityBreakpoint[];
+/** Which side of a breakpoint: `from` it and wider, or `below` it. */
+export type BreakpointDirection = 'from' | 'below';
+export declare const breakpointDirections: readonly BreakpointDirection[];
+export declare function hideClass(direction: BreakpointDirection, breakpoint: VisibilityBreakpoint): string;
+/**
+ * The media query `hideBelow` (`'below'`) or `hideFrom` (`'from'`) uses at a
+ * breakpoint, such as `not all and (min-width: 64rem)` below `lg`, for an app
+ * that must follow the same width in script (a tooltip that names a glyph
+ * only while its label is hidden).
+ */
+export declare function breakpointQuery(direction: BreakpointDirection, breakpoint: VisibilityBreakpoint): string;

package/dist/css/breakpoints.js

@@ -1,11 +1,37 @@
+/** The layout breakpoint: a phone below it, a wider screen from it. */
 export const breakpointScale = {
     md: 48,
 };
 export const breakpoints = Object.keys(breakpointScale);
+/**
+ * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
+ * for content that fits only from a laptop up, such as a row of labelled
+ * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
+ */
+export const visibilityBreakpointScale = {
+    ...breakpointScale,
+    lg: 64,
+};
+export const visibilityBreakpoints = Object.keys(visibilityBreakpointScale);
+export const breakpointDirections = [
+    'from',
+    'below',
+];
 export function hideClass(direction, breakpoint) {
     return `sw-hide-${direction}-${breakpoint}`;
 }
+/**
+ * The media query `hideBelow` (`'below'`) or `hideFrom` (`'from'`) uses at a
+ * breakpoint, such as `not all and (min-width: 64rem)` below `lg`, for an app
+ * that must follow the same width in script (a tooltip that names a glyph
+ * only while its label is hidden).
+ */
 export function breakpointQuery(direction, breakpoint) {
-    const minWidth = `(min-width: ${breakpointScale[breakpoint]}rem)`;
+    if (!breakpointDirections.includes(direction))
+        throw new RangeError(`direction must be one of ${breakpointDirections.join(', ')}`);
+    if (!visibilityBreakpoints.includes(breakpoint))
+        throw new RangeError(`breakpoint must be one of ${visibilityBreakpoints.join(', ')}`);
+    const minWidth = `(min-width: ${visibilityBreakpointScale[breakpoint]}rem)`;
     return direction === 'from' ? minWidth : `not all and ${minWidth}`;
 }

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

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -56,6 +57,27 @@ export function cssActionMenuClasses() {
   ${zIndex('popup')}
 }
 
+/* Each child of the header is a line of its own: a name, then a role. */
+.sw-action-menu-header {
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin-bottom: var(--sw-space-1);
+  /* The commands' inline padding, so the header's words line up with theirs. */
+  padding: var(--sw-space-1) var(--sw-control-xs-padding-inline) var(--sw-space-2);
+}
+
+/* With a header, the commands are the menu inside the popover. */
+.sw-action-menu-items {
+  display: block;
+}
+
 .sw-action-menu-item {
   align-items: center;
   appearance: none;
@@ -109,6 +131,8 @@ export function actionMenuClassCatalog() {
         'sw-action-menu',
         'sw-action-menu-trigger',
         'sw-action-menu-list',
+        'sw-action-menu-header',
+        'sw-action-menu-items',
         'sw-action-menu-item',
         'sw-action-menu-item-danger',
     ];

package/dist/css/css-chart.js

@@ -1,6 +1,47 @@
 import { typographyVariants } from '@scalewing/tokens';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
+/*
+ * A diverging chart puts zero in the middle of each track, marked by a
+ * hairline: a positive bar starts there and grows toward the inline end, a
+ * negative one ends there and grows toward the start, each at most half the
+ * track. The fill keeps its share of the scale (`--sw-bar-fill`), so a
+ * bar is half as long as in the magnitude layout, on the same scale. The
+ * end at zero is square, so the bars meet the hairline.
+ */
+function divergingRules() {
+    return `.sw-bar-chart-diverging .sw-bar-chart-track {
+  position: relative;
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-track::before {
+  background: var(--sw-color-border);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 50%;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-fill {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  margin-inline-start: 50%;
+  width: calc(var(--sw-bar-fill, 0) * 50%);
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-fill-negative {
+  border-end-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-start-end-radius: 0;
+  border-start-start-radius: inherit;
+  margin-inline-start: calc(50% - var(--sw-bar-fill, 0) * 50%);
+}
+
+@media (forced-colors: active) {
+  .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
+}`;
+}
 export function cssChartClasses() {
     return `.sw-bar-chart {
   display: grid;
@@ -80,7 +121,9 @@ export function cssChartClasses() {
 .sw-bar-chart-axis-track {
   display: flex;
   justify-content: space-between;
-}`;
+}
+
+${divergingRules()}`;
 }
 export function chartClassCatalog() {
     return [
@@ -94,5 +137,6 @@ export function chartClassCatalog() {
         'sw-bar-chart-fill-negative',
         'sw-bar-chart-value',
         'sw-bar-chart-axis-track',
+        'sw-bar-chart-diverging',
     ];
 }

package/dist/css/css-chrome.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssChromeClasses() {
@@ -36,6 +37,18 @@ export function cssChromeClasses() {
   color: var(--sw-color-text);
 }
 
+/*
+ * A button in a navigation is a destination: on a coarse pointer it grows to
+ * the 44 px touch target both ways, whatever its size, as a section link
+ * and a calendar button do. A label beside its glyph keeps its line.
+ */
+@media ${coarsePointerQuery} {
+  .sw-nav .sw-button {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: ${caption.fontSize}px;
   letter-spacing: ${caption.letterSpacing}px;

package/dist/css/css-components.js

@@ -7,6 +7,7 @@ import { cssChartClasses } from './css-chart.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
 import { cssChromeClasses } from './css-chrome.js';
+import { cssSectionNavClasses } from './css-section-nav.js';
 import { cssDataClasses } from './css-data.js';
 import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
@@ -123,6 +124,8 @@ ${cssChartClasses()}
 
 ${cssChromeClasses()}
 
+${cssSectionNavClasses()}
+
 ${cssDialogClasses()}
 
 ${cssAccordionClasses()}

package/dist/css/css-date-field.js

@@ -229,16 +229,51 @@ function calendarRules() {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
+/*
+ * A range's days are one band in each week row: square-cornered, the accent
+ * at 16 % over the calendar's glass, rounded at the range's start and end.
+ * accentSubtle is mixed against the surface, not the glass, and fades to
+ * nothing where the accent is near AA, so the band would vanish in most
+ * dark palettes. Every number on the band is in the text colour, which
+ * keeps 4.5:1 on it in every palette (muted and accent do not); a
+ * neighbouring month's day and today are marked by the band and today's
+ * accent ring (3:1 or more on the band). The selected day sits on top.
+ */
+.sw-date-field-day-in-range {
+  background: color-mix(in srgb, var(--sw-color-accent) 16%, transparent);
+  border-radius: 0;
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-day-range-start {
+  border-end-start-radius: var(--sw-radius-pill);
+  border-start-start-radius: var(--sw-radius-pill);
+}
+
+.sw-date-field-day-range-end {
+  border-end-end-radius: var(--sw-radius-pill);
+  border-start-end-radius: var(--sw-radius-pill);
+}
+
 .sw-date-field-day[aria-current='date'] {
   border-color: var(--sw-color-accent);
   color: var(--sw-color-accent);
   font-weight: ${label.fontWeight};
 }
 
+.sw-date-field-day-in-range[aria-current='date'] {
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-day-in-range:hover:not([aria-disabled='true']) {
+  background: color-mix(in srgb, var(--sw-color-accent) 24%, transparent);
+}
+
 .sw-date-field-day[aria-selected='true'],
 .sw-date-field-day[aria-selected='true']:hover {
   background: var(--sw-color-accent);
   border-color: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
   color: var(--sw-color-onAccent);
   font-weight: ${label.fontWeight};
 }
@@ -279,7 +314,15 @@ function adaptiveRules() {
   }
   .sw-date-field-calendar { border-color: CanvasText; }
   .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
-  .sw-date-field-day[aria-selected='true'] {
+  .sw-date-field-day-in-range,
+  .sw-date-field-day-in-range:hover:not([aria-disabled='true']),
+  .sw-date-field-day-in-range[aria-current='date'] {
+    background: Mark;
+    color: MarkText;
+    forced-color-adjust: none;
+  }
+  .sw-date-field-day[aria-selected='true'],
+  .sw-date-field-day[aria-selected='true']:hover {
     background: Highlight;
     color: HighlightText;
     forced-color-adjust: none;
@@ -311,6 +354,9 @@ export function dateFieldClassCatalog() {
         'sw-date-field-grid',
         'sw-date-field-day',
         'sw-date-field-day-outside',
+        'sw-date-field-day-in-range',
+        'sw-date-field-day-range-start',
+        'sw-date-field-day-range-end',
         'sw-date-field-footer',
     ];
 }

package/dist/css/css-denomination-aligned.d.ts

@@ -0,0 +1,7 @@
+import { type TableColumnSize } from './css-table-layout.js';
+/** The row-label widths a strip lines up at: the Table column sizes. */
+export type DenominationLabelWidth = TableColumnSize;
+export declare const denominationLabelWidths: DenominationLabelWidth[];
+export declare function denominationLabelWidthClass(width: DenominationLabelWidth): string;
+export declare function cssDenominationAlignedClasses(): string;
+export declare function denominationAlignedClassCatalog(): string[];

package/dist/css/css-denomination-aligned.js

@@ -0,0 +1,68 @@
+import { breakpointQuery } from './breakpoints.js';
+import { tableColumnSizes } from './css-table-layout.js';
+export const denominationLabelWidths = Object.keys(tableColumnSizes);
+export function denominationLabelWidthClass(width) {
+    return `sw-denomination-label-${width}`;
+}
+/*
+ * A strip with a label width lines its columns up with every other strip
+ * of the same columns in a container of the same width, such as the cards
+ * of a feed: the label column is that width, and the count columns (and the
+ * total column from md up, where it is drawn) share the rest of the scroll
+ * region's width equally, measured from the region itself (a container, so
+ * 100cqi is its width) rather than from the cells' content. Every column is
+ * sized, so the browser has no spare width to share by content. A count
+ * wider than its share widens its column, and the strip then scrolls as a
+ * plain one does. The component sets the column count and whether there is
+ * a total column (`--sw-denomination-columns`, `--sw-denomination-total`);
+ * below md the total column collapses, so it takes no share.
+ */
+export function cssDenominationAlignedClasses() {
+    const widths = Object.entries(tableColumnSizes)
+        .map(([size, rem]) => `.${denominationLabelWidthClass(size)} { --sw-denomination-label-width: ${rem}rem; }`)
+        .join('\n');
+    const strip = '.sw-denomination-strip-aligned';
+    return `.sw-denomination-scroll-aligned {
+  container-type: inline-size;
+}
+
+${widths}
+
+${strip} {
+  --sw-denomination-total-shown: 1;
+  --sw-denomination-share: calc(
+    (100cqi - var(--sw-denomination-label-width)) /
+      (var(--sw-denomination-columns) + var(--sw-denomination-total) * var(--sw-denomination-total-shown))
+  );
+}
+
+${strip} th,
+${strip} td {
+  box-sizing: border-box;
+}
+
+${strip} .sw-denomination-label,
+${strip} thead .sw-denomination-corner:first-child {
+  width: var(--sw-denomination-label-width);
+}
+
+${strip} .sw-denomination-cell,
+${strip} .sw-denomination-head:not(.sw-denomination-total-head),
+${strip} .sw-denomination-total,
+${strip} .sw-denomination-total-head {
+  width: var(--sw-denomination-share);
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${strip} { --sw-denomination-total-shown: 0; }
+  ${strip} .sw-denomination-total,
+  ${strip} .sw-denomination-total-head { width: 0; }
+}`;
+}
+export function denominationAlignedClassCatalog() {
+    return [
+        'sw-denomination-scroll-aligned',
+        'sw-denomination-strip-aligned',
+        ...denominationLabelWidths.map(denominationLabelWidthClass),
+    ];
+}

package/dist/css/css-denomination-grid.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -235,7 +236,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 @media ${breakpointQuery('below', 'md')} {
   .sw-denomination-strip .sw-denomination-total,
   .sw-denomination-strip .sw-denomination-total-head { padding: 0; position: relative; }
-  .sw-denomination-total-value { ${visuallyHiddenDeclarations} }
+  .sw-denomination-total-value,
+  .sw-denomination-total-label { ${visuallyHiddenDeclarations} }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip .sw-denomination-label-line { gap: var(--sw-space-1); }
@@ -247,6 +249,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 
 ${cssDenominationCellToneClasses()}
 
+${cssDenominationAlignedClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -279,11 +283,13 @@ export function denominationGridClassCatalog() {
         'sw-denomination-total',
         'sw-denomination-total-inline',
         'sw-denomination-total-head',
+        'sw-denomination-total-label',
         'sw-denomination-total-value',
         'sw-denomination-tiles',
         'sw-denomination-tile-list',
         'sw-denomination-tile',
         'sw-denomination-subtotal',
         ...denominationCellToneClassCatalog(),
+        ...denominationAlignedClassCatalog(),
     ];
 }

package/dist/css/css-field.js

@@ -80,11 +80,24 @@ export function cssFieldClasses() {
   border-color: var(--sw-color-danger);
 }
 
+/*
+ * A changed value: the accent border, a hairline thicker through an inset
+ * shadow so nothing moves, on the control or on an adorned frame (whose
+ * input draws no border of its own).
+ */
+[data-theme] .sw-field-changed > :is(input, select, textarea),
+.sw-field-changed .sw-field-adorned {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
 ${adornmentRules()}
 
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
+  [data-theme] .sw-field-changed > :is(input, select, textarea),
+  .sw-field-changed .sw-field-adorned { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
   .sw-field-adorned:has(> input:disabled) {
     ${disabledControlForcedColors}
@@ -99,6 +112,7 @@ export function fieldClassCatalog() {
         'sw-field-description',
         'sw-field-error',
         'sw-field-invalid',
+        'sw-field-changed',
         'sw-field-adorned',
         'sw-field-prefix',
         'sw-field-suffix',

package/dist/css/css-responsive.js

@@ -1,12 +1,11 @@
-import { breakpointQuery, breakpoints, hideClass, } from './breakpoints.js';
-const directions = ['from', 'below'];
+import { breakpointDirections, breakpointQuery, hideClass, visibilityBreakpoints, } from './breakpoints.js';
 export function cssResponsiveClasses() {
-    return breakpoints
-        .flatMap((breakpoint) => directions.map((direction) => `@media ${breakpointQuery(direction, breakpoint)} {
+    return visibilityBreakpoints
+        .flatMap((breakpoint) => breakpointDirections.map((direction) => `@media ${breakpointQuery(direction, breakpoint)} {
   .${hideClass(direction, breakpoint)} { display: none; }
 }`))
         .join('\n\n');
 }
 export function responsiveClassCatalog() {
-    return breakpoints.flatMap((breakpoint) => directions.map((direction) => hideClass(direction, breakpoint)));
+    return visibilityBreakpoints.flatMap((breakpoint) => breakpointDirections.map((direction) => hideClass(direction, breakpoint)));
 }

package/dist/css/css-scroll-region.d.ts

@@ -1,3 +1,11 @@
+/**
+ * The shade each inline edge of `selector` draws while `useScrollOverflow`
+ * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is
+ * the left in a left-to-right box and the right in RTL. A box that scrolls
+ * itself (a `Tabs` strip) takes these alone; a scroll region takes them
+ * through `scrollRegionRules`.
+ */
+export declare function scrollShadeRules(selector: string): string;
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the

package/dist/css/css-scroll-region.js

@@ -12,8 +12,14 @@ function edgeShade(side) {
     const offset = side === 'left' ? 'var(--sw-space-6)' : 'calc(-1 * var(--sw-space-6))';
     return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${shadeColor}`;
 }
-/** The start edge is the left in a left-to-right box and the right in RTL. */
-function edgeShadeRules(selector) {
+/**
+ * The shade each inline edge of `selector` draws while `useScrollOverflow`
+ * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is
+ * the left in a left-to-right box and the right in RTL. A box that scrolls
+ * itself (a `Tabs` strip) takes these alone; a scroll region takes them
+ * through `scrollRegionRules`.
+ */
+export function scrollShadeRules(selector) {
     const more = (edge) => `${selector}.sw-scroll-more-${edge}`;
     const both = `${more('start')}.sw-scroll-more-end`;
     return [
@@ -47,7 +53,7 @@ ${selector}:focus-visible {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-${edgeShadeRules(selector)}`;
+${scrollShadeRules(selector)}`;
 }
 export function scrollRegionClassCatalog() {
     return ['sw-scroll-more-start', 'sw-scroll-more-end'];

package/dist/css/css-section-nav.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function sectionNavVerticalClass(breakpoint: Breakpoint): string;
+export declare function cssSectionNavClasses(): string;
+export declare function sectionNavClassCatalog(): string[];