@scalewing/react 1.20.0 → 1.22.0

package/dist/components/tooltip/tooltip-open.js

@@ -0,0 +1,60 @@
+/**
+ * A trigger that acts when pressed: a link, a button, a form control or an
+ * element with a widget role. A tap on it does what it does and does not
+ * also open the tooltip, which would stay over the result (or, after a
+ * link, over the next page).
+ */
+const actingRoles = [
+    'button',
+    'checkbox',
+    'combobox',
+    'link',
+    'menuitem',
+    'menuitemcheckbox',
+    'menuitemradio',
+    'option',
+    'radio',
+    'searchbox',
+    'slider',
+    'spinbutton',
+    'switch',
+    'tab',
+    'textbox',
+    'treeitem',
+];
+const actingTrigger = [
+    'a[href]',
+    'area[href]',
+    'audio[controls]',
+    'button',
+    'input',
+    'label',
+    'select',
+    'summary',
+    'textarea',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    ...actingRoles.map((role) => `[role="${role}"]`),
+].join(', ');
+/** Whether a tap at `target` lands on a control inside the tooltip's anchor. */
+export function tapActs(target, anchor) {
+    if (!(target instanceof Element))
+        return false;
+    const control = target.closest(actingTrigger);
+    return control !== null && anchor.contains(control);
+}
+/**
+ * Whether the focus that just landed on `target` is visible: from the
+ * keyboard or a script, not a click or a tap, which hover and the tap's own
+ * rule already cover. A browser without `:focus-visible` counts it visible.
+ */
+export function focusIsVisible(target) {
+    if (!(target instanceof Element))
+        return true;
+    try {
+        return target.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}

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/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-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-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[];

package/dist/css/css-section-nav.js

@@ -0,0 +1,120 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+export function sectionNavVerticalClass(breakpoint) {
+    return `sw-section-nav-vertical-from-${breakpoint}`;
+}
+/*
+ * From the breakpoint up the row becomes a side list: one item per line,
+ * the full width of its column, the current one marked by an accent bar at
+ * its inline start instead of the underline.
+ */
+function verticalRules() {
+    return breakpoints
+        .map((breakpoint) => {
+        const nav = `.${sectionNavVerticalClass(breakpoint)}`;
+        return `@media ${breakpointQuery('from', breakpoint)} {
+  ${nav} .sw-section-nav-list {
+    border-bottom: 0;
+    flex-direction: column;
+    gap: var(--sw-space-1);
+  }
+
+  ${nav} .sw-section-nav-link {
+    border-bottom: 0;
+    border-inline-start: 2px solid transparent;
+    border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  ${nav} .sw-section-nav-link:dir(rtl) {
+    border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm);
+  }
+
+  ${nav} .sw-section-nav-link[aria-current] {
+    border-inline-start-color: var(--sw-color-accent);
+  }
+}`;
+    })
+        .join('\n\n');
+}
+/*
+ * A section navigation is quieter than a workspace's: label-size words in
+ * the muted color with no fill, the current item in the text color over an
+ * accent underline on the row's hairline (as a tab strip marks its tab),
+ * and a soft fill on hover. A link that is the current page or holds it is
+ * marked the same way. A coarse pointer gets the 44 px target. The link
+ * rules start at the canvas (`[data-theme]`) to outrank its accent links.
+ */
+export function cssSectionNavClasses() {
+    return `.sw-section-nav-list {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1) var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-theme] .sw-section-nav-link {
+  align-items: center;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--sw-radius-sm) var(--sw-radius-sm) 0 0;
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin-bottom: -1px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+  text-decoration: none;
+}
+
+[data-theme] .sw-section-nav-link:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 12%, transparent);
+  color: var(--sw-color-text);
+}
+
+[data-theme] .sw-section-nav-link:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+[data-theme] .sw-section-nav-link[aria-current] {
+  border-bottom-color: var(--sw-color-accent);
+  color: var(--sw-color-text);
+}
+
+.sw-section-nav-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+${verticalRules()}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-section-nav-link { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-section-nav-link { color: LinkText; }
+  [data-theme] .sw-section-nav-link[aria-current] { border-color: Highlight; color: CanvasText; }
+}`;
+}
+export function sectionNavClassCatalog() {
+    return [
+        'sw-section-nav',
+        'sw-section-nav-list',
+        'sw-section-nav-link',
+        'sw-section-nav-icon',
+        ...breakpoints.map(sectionNavVerticalClass),
+    ];
+}