@fairgarden/design 0.1.0-alpha.0

package/components/Search/Search.js

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { Field, FieldLabel } from '../Field';
+import { Icon } from '../Icon';
+import { input, inputParts } from '../Input';
+import { Link } from '../Link';
+import { highlightMatch } from '../../utils/highlightMatch';
+import { OverlayScope, overlayAttributes, overlayScaleClassName } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './search.module.css';
+/*
+ * Search (§9.10): where typing beats browsing. Site and collection search
+ * on Base UI's Autocomplete, in a `search` landmark.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: search.module.css; CVA function `search`. The module styles
+ *   only Search's own parts: the field is the Input's box (§10.1, through
+ *   `input` and `inputParts`), the submit a `solid` Button butted to it,
+ *   and the clear and header trigger icon-only Buttons.
+ * - Axes: `kind` → boxed, ruled, trigger, docked; `primary`, `secondary`
+ *   → scales module classes. `trigger` is the header's icon-only Button,
+ *   which carries only the Button's own classes.
+ * - Compound variants: none.
+ * - Defaults: kind boxed; color axes none.
+ * - Color fallback: Search's parts inherit the scope. The submit falls back
+ *   to the scope's action scale through the Button's `solid` class.
+ * - States: `data-focused` on the input → the ring on any focus [D90]
+ *   (around field and submit together when butted); `data-popup-open` →
+ *   `aria-expanded`, popup shown; `data-highlighted` on `item` → --primary4
+ *   plus the start bar [D145]; `data-disabled` → per §10.1; popup
+ *   `data-starting-style` / `data-ending-style` → the clip reveal.
+ * - Parts: base (the landmark), magnifier, rules, popup, group,
+ *   groupLabel, item, itemIcon, match, secondaryName, seeAll, status, bar.
+ * - Scope: the popup renders in its Base UI Portal and declares a `white`
+ *   page scope; edge --border-size-2 --primary12 [D148, D156].
+ * - Container: none; the docked bar is page frame, and the butted submit
+ *   follows the Input's row (§5.10.2).
+ */
+export const search = cva(styles.base, {
+    variants: {
+        kind: {
+            boxed: styles.boxed,
+            ruled: styles.ruled,
+            docked: styles.docked,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'boxed',
+    },
+});
+function isGroups(items) {
+    return items.length > 0 && 'items' in items[0];
+}
+/**
+ * Search in a `search` landmark. Matches are marked by weight, never
+ * color; an empty result is a plain-word status, never a red error (P10).
+ * Show one docked bar at a time.
+ */
+export function Search(props) {
+    if (props.kind === 'trigger') {
+        const { label, onClick, render, className, primary, secondary } = props;
+        return (React.createElement(Button, { iconOnly: true, size: "lg", icon: "search", onClick: onClick, render: render, className: className, primary: primary, secondary: secondary }, label));
+    }
+    return React.createElement(SearchField, { ...props });
+}
+function SearchField(props) {
+    const { kind, label, labelVisible = false, placeholder = 'Search…', value, defaultValue, onValueChange, onSubmit, action, name = 'q', items, filter, status, loading = false, emptyText = (query) => `No results for '${query}'`, seeAllHref, seeAllText = (query) => `See all results for '${query}'`, submitLabel = 'Search', submitLabelled = false, hideSubmit = false, submitOnItemClick, disabled, className, primary, secondary, } = props;
+    const scope = useScopeAttributes();
+    const ruled = kind === 'ruled';
+    const showSubmit = !ruled && !hideSubmit;
+    const [innerQuery, setInnerQuery] = React.useState(defaultValue ?? '');
+    const query = value !== undefined ? value : innerQuery;
+    const trimmed = query.trim();
+    const handleSubmit = (event) => {
+        if (!onSubmit)
+            return;
+        event.preventDefault();
+        onSubmit(query, event);
+    };
+    const boxClassName = ruled ? styles.rules : input({ butted: showSubmit ? 'end' : undefined });
+    const renderRow = (suggestion) => (React.createElement(BaseAutocomplete.Item, { key: suggestion.value, value: suggestion, disabled: suggestion.disabled, className: styles.item, render: suggestion.href ? React.createElement("a", { href: suggestion.href }) : undefined },
+        suggestion.icon ? React.createElement(Icon, { name: suggestion.icon, className: styles.itemIcon }) : null,
+        React.createElement("span", { className: styles.itemText },
+            React.createElement("span", null, highlightMatch(suggestion.label ?? suggestion.value, query, styles.match)),
+            suggestion.secondaryName ? (React.createElement("span", { className: styles.secondaryName }, suggestion.secondaryName)) : null)));
+    const field = (React.createElement(Field, { disabled: disabled },
+        labelVisible ? React.createElement(FieldLabel, null, label) : null,
+        React.createElement(BaseAutocomplete.Root, { items: items, filter: filter, value: value, defaultValue: defaultValue, onValueChange: (next) => {
+                setInnerQuery(next);
+                onValueChange?.(next);
+            }, itemToStringValue: (suggestion) => suggestion.value, submitOnItemClick: submitOnItemClick, disabled: disabled, name: name },
+            React.createElement(BaseAutocomplete.InputGroup, { ...scope, className: boxClassName },
+                ruled ? (React.createElement("svg", { className: styles.rulesEdge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("line", { className: styles.rulesEdgeLine, x1: "0", y1: "0.5", x2: "100%", y2: "0.5" }),
+                    React.createElement("line", { className: styles.rulesEdgeLine, x1: "0", y1: "100%", x2: "100%", y2: "100%", transform: "translate(0 -0.5)" }))) : null,
+                React.createElement(Icon, { name: "search", className: styles.magnifier }),
+                React.createElement(BaseAutocomplete.Input, { className: inputParts.control, placeholder: placeholder, "aria-label": labelVisible ? undefined : label }),
+                React.createElement(BaseAutocomplete.Clear, { render: React.createElement(Button, { iconOnly: true, size: "sm", icon: "close" }, "Clear search") }),
+                showSubmit ? (React.createElement("span", { className: inputParts.actionSlot },
+                    React.createElement(Button, { type: "submit", variant: "solid", butted: "start", iconOnly: true, icon: "arrow_forward", disabled: disabled, className: inputParts.actionIcon }, submitLabel),
+                    submitLabelled ? (React.createElement(Button, { type: "submit", variant: "solid", butted: "start", size: "lg", disabled: disabled, className: inputParts.actionText }, submitLabel)) : null)) : null,
+                ruled ? null : (React.createElement("svg", { className: inputParts.edge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("rect", { className: inputParts.edgeLine, width: "100%", height: "100%" })))),
+            React.createElement(BaseAutocomplete.Portal, null,
+                React.createElement(BaseAutocomplete.Positioner, { className: styles.positioner, sideOffset: 8, align: "start", collisionPadding: 16 },
+                    React.createElement(BaseAutocomplete.Popup, { ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
+                        React.createElement(OverlayScope, null,
+                            React.createElement(BaseAutocomplete.Status, { className: styles.status }, loading ? 'Searching…' : status),
+                            React.createElement(BaseAutocomplete.Empty, { className: styles.status }, loading || trimmed === '' ? null : emptyText(trimmed)),
+                            React.createElement(BaseAutocomplete.List, { className: styles.list }, items && isGroups(items)
+                                ? items.map((group) => (React.createElement(BaseAutocomplete.Group, { key: group.label, items: group.items, className: styles.group },
+                                    React.createElement(BaseAutocomplete.GroupLabel, { className: styles.groupLabel }, group.label),
+                                    React.createElement(BaseAutocomplete.Collection, null, (suggestion) => renderRow(suggestion)))))
+                                : (suggestion) => renderRow(suggestion)),
+                            seeAllHref && trimmed !== '' ? (React.createElement("div", { className: styles.seeAll },
+                                React.createElement(Link, { kind: "standalone", href: seeAllHref(trimmed) }, seeAllText(trimmed)))) : null)))))));
+    const form = (React.createElement("form", { className: styles.form, action: action, onSubmit: handleSubmit }, field));
+    return (React.createElement("search", { ...scope, "aria-label": label, className: search({ kind, primary, secondary, className }) }, kind === 'docked' ? React.createElement("div", { className: styles.bar }, form) : form));
+}
+//# sourceMappingURL=Search.js.map

package/components/Search/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../src/components/Search/Search.tsx"],"names":[],"mappings":"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"}

package/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Search';
+//# sourceMappingURL=index.d.ts.map

package/components/Search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Search/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/components/Search/index.js

@@ -0,0 +1,2 @@
+export * from './Search';
+//# sourceMappingURL=index.js.map

package/components/Search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Search/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/components/Search/search.module.css

@@ -0,0 +1,326 @@
+/*
+ * Search (§9.10). CVA function `search`. The module styles only Search's
+ * own parts: `base` (the search landmark), `magnifier`, `rules` (the
+ * rule-bounded field, with `rulesEdge` / `rulesEdgeLine` for its dotted
+ * disabled rules), `popup`, `list`, `group`, `groupLabel`, `item`,
+ * `itemIcon`, `itemText`, `match`, `secondaryName`, `seeAll`, `status`,
+ * `bar` (docked); `positioner` places the popup on --layer-3. The boxed
+ * field is the Input's box (§10.1), the submit a `solid` Button butted to
+ * it, and the clear and header trigger icon-only Buttons: their parts are
+ * left to their own modules (§1.11.1). Colors are role variables only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.item {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.secondaryName {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.status {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.rulesEdgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The landmark: in-page filters run full width at base and --size-sm from --md-n-above. */
+  .base {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .form {
+    display: block;
+    margin: 0;
+  }
+
+  /* The magnifier: Material Symbols Rounded `search`, inline tier, decorative, --primary12 [D166]. */
+  .magnifier {
+    flex: none;
+    color: inherit;
+  }
+
+  /*
+   * Rule-bounded: no box; the field sits between two --border-size-2
+   * --primary12 rules the width of the container (Sofar Sounds).
+   */
+  .rules {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: var(--size-px-8);
+    padding-inline: var(--ds-space-12);
+    border-block: var(--border-size-2) solid var(--primary12);
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  .rulesEdge {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .rulesEdgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  .positioner {
+    z-index: var(--layer-3);
+    outline: 0;
+  }
+
+  /* The §9.1 panel at field width: the white scope's face, the --border-size-2 --primary12 frame. */
+  .popup {
+    /* The clip reveal starts from the trigger side. */
+    --search-reveal-from: inset(0 0 100% 0);
+
+    box-sizing: border-box;
+    inline-size: var(--anchor-width);
+    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--ds-radius-8);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+    outline: 0;
+  }
+
+  /* 8 rows visible, then it scrolls. */
+  .list {
+    box-sizing: border-box;
+    max-block-size: min(
+      var(--available-height, 100vh),
+      calc(8 * var(--ds-size-hit) + 2 * var(--size-px-1))
+    );
+    padding: var(--size-px-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  /* Groups: a type-label head, and a --border-size-1 --role-rule rule above every group but the first. */
+  .group {
+    display: block;
+  }
+
+  .group + .group {
+    margin-block-start: var(--size-px-1);
+    padding-block-start: var(--size-px-1);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .groupLabel {
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  /* Suggestion rows: --ds-size-hit, type-body-ui; an optional type icon; highlight radius 8 − 4 [D40]. */
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-3);
+    border-radius: calc(var(--ds-radius-8) - var(--size-px-1));
+    color: var(--primary12);
+    text-decoration-line: none;
+    cursor: default;
+    outline: 0;
+    user-select: none;
+  }
+
+  .item::before {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+  }
+
+  .itemIcon {
+    flex: none;
+    color: var(--primary12);
+  }
+
+  .itemText {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  /* Matches are marked by weight, not color, which survives every ground and B/W. */
+  .match {
+    background: none;
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The secondary name: italic type-caption in --role-muted (Audubon's Latin names). */
+  .secondaryName {
+    font-style: italic;
+  }
+
+  /* "See all": a standalone link row (§9.3), set off by the group rule. */
+  .seeAll {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Status: "12 results", or a plain-word "No results" with a next step; never a red error (P10). */
+  .status {
+    color: var(--primary12);
+  }
+
+  .status:not(:empty) {
+    padding: var(--size-px-2) var(--size-px-3);
+  }
+
+  /* Docked: a full-width opaque bar at least --ds-size-hit tall, a --border-size-1 rule on its content side. */
+  .bar {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--ds-size-hit);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--ds-space-margin);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+    background-color: var(--role-ground);
+  }
+
+  .bar > * {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .rulesEdgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    /* The clip reveal (the edge wipes open), never a fade [D91]. */
+    .popup {
+      transition: clip-path var(--ds-duration-disclosure) var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Boxed (default): the Input's field box with the butted submit. */
+  .boxed {
+    display: block;
+  }
+
+  .ruled {
+    display: block;
+  }
+
+  /* In-page filters: --size-sm from --md-n-above. */
+  @media (min-width: 768px) {
+    .boxed,
+    .ruled {
+      max-inline-size: var(--size-sm);
+    }
+  }
+
+  /* Docked: the top edge's one bar while open, on --layer-2, never stacked under another [D89]. */
+  .docked {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+  }
+}
+
+@layer states {
+  /* Focus: the ring on any focus of the input, outside the rules [D90]. */
+  .rules[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Disabled: the rules become `line-dotted-fine` in --role-rule; inks --role-muted [D16]. */
+  .rules[data-disabled] {
+    border-block-style: none;
+    padding-block: var(--border-size-2);
+    color: var(--role-muted);
+  }
+
+  .rules[data-disabled] .rulesEdge {
+    display: block;
+  }
+
+  /* Highlighted: --primary4 plus a --ds-stroke-3 start bar, as Menu [D145]. */
+  .item[data-highlighted] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before {
+    display: block;
+  }
+
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  /* Placement: a popup above the field reveals from its bottom edge. */
+  .popup[data-side='top'] {
+    --search-reveal-from: inset(100% 0 0 0);
+  }
+
+  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
+  .popup[data-starting-style],
+  .popup[data-ending-style] {
+    clip-path: var(--search-reveal-from);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Fields, triggers and popups are interaction only; a results page prints its heading and hits. */
+    .base,
+    .positioner {
+      display: none;
+    }
+  }
+}

package/components/SectionBar/SectionBar.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type BreadcrumbCrumb } from '../Breadcrumb';
+import { type PageGroundPreset } from '../../utils/scope';
+export declare const sectionBar: (props?: ({
+    kind?: "section" | "guide" | "tabs" | null | undefined;
+    capped?: boolean | null | undefined;
+    docked?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SectionBarVariants = VariantProps<typeof sectionBar>;
+/** The three §11.7 builds. */
+export type SectionBarKind = NonNullable<SectionBarVariants['kind']>;
+/** One in-page section: the target's `id` and the label the Jump list, title and tabs show. */
+export interface SectionBarSection {
+    /** The section's element `id`; its first heading takes focus when the section is followed. */
+    id: string;
+    /** The label, authored in sentence case. */
+    label: React.ReactNode;
+}
+/** The guide bar's `listen` jump [D184]: a standalone link with an opaque count badge. */
+export interface SectionBarListen {
+    /** The recordings' anchor, e.g. "#recordings"; following it moves focus to that heading. */
+    href: string;
+    /** Default "Listen". */
+    label?: React.ReactNode;
+    /** The number of recordings, shown in a count Badge. */
+    count?: number;
+}
+type SectionBarCommonProps = Omit<React.ComponentPropsWithRef<'nav'>, 'children'> & {
+    /** The optional top rule: `--border-size-2` in the brand green, decorative like the strip. Default `false`. */
+    capped?: boolean;
+    /**
+     * The docked position: sticky at the top edge on `--layer-2`. The page
+     * shell sets it from `onDockChange` and swaps it with the header on
+     * upward scroll; the two never stack [D89, D183]. Default `false`.
+     */
+    docked?: boolean;
+    /** Primary Radix scale for the bar's scope. Never defaulted [D133]. */
+    primary?: SectionBarVariants['primary'];
+    /** Secondary Radix scale: the Jump indicator, tab hover and link hover. Never defaulted. */
+    secondary?: SectionBarVariants['secondary'];
+    /** The page ground of the band the bar covers. Default: the enclosing page ground, else `paper`. */
+    preset?: PageGroundPreset;
+    /** The landmark's name. Default "In this section". */
+    label?: string;
+    /** The ancestors, root first: the inline breadcrumb from `--md-n-above`, the staircase below it. */
+    items?: readonly BreadcrumbCrumb[];
+    /** The current page: the last crumb, at `--font-weight-7`, acting as the title [D184]. */
+    current: React.ReactNode;
+    /** The page's sections, in order: the Jump list, the base title and the tab strip. */
+    sections?: readonly SectionBarSection[];
+    /** The section in view, controlled. Omitted, the bar follows scroll (scrollspy). */
+    activeSection?: string;
+    /** Called when the section in view changes. */
+    onActiveSectionChange?: (id: string) => void;
+    /**
+     * Called when the sentinel at the bar's in-flow position leaves (`true`)
+     * or re-enters (`false`) the viewport top [D183]. Pass it to wire `docked`.
+     */
+    onDockChange?: (docked: boolean) => void;
+    /** The Jump trigger's word. Default "Jump to". */
+    jumpLabel?: string;
+    /** The staircase toggle's accessible name. Default "Page path". */
+    toggleLabel?: string;
+    /** End tools, such as the §9.4 audio Toggle at `--size-px-7`. Below 360 px they move into the staircase panel. */
+    tools?: React.ReactNode;
+    /** Share links (inline-tier icon links), from `--xl-n-above` [D184]. */
+    share?: React.ReactNode;
+    /** Builds each crumb anchor, e.g. `(href) => <NextLink href={href} />`. */
+    renderLink?: (href: string) => React.ReactElement;
+};
+type SectionBarKindProps = {
+    /**
+     * `section` (default): glyph, caps title and Jump to at base; from
+     * `--md-n-above` the inline breadcrumb and the live Jump label.
+     * `guide`: an optional start `search`, the centred breadcrumb and an
+     * end `listen` jump. `tabs`: from `--lg-n-above`, with 6 or fewer
+     * sections, the tab strip replaces Jump to.
+     */
+    kind?: 'section';
+    search?: never;
+    listen?: never;
+    toTop?: never;
+} | {
+    kind: 'guide';
+    /** A §9.10 Autocomplete (Search) at `--ds-size-control-md`, capped at `--size-px-13`, from `--md-n-above`. */
+    search?: React.ReactNode;
+    /** The end `listen` jump [D184]. */
+    listen?: SectionBarListen;
+    toTop?: never;
+} | {
+    kind: 'tabs';
+    /**
+     * The `toTop` cell's target: the skip link's target, e.g. "#main". It
+     * moves focus there. Omitted, no cell.
+     */
+    toTop?: string;
+    search?: never;
+    listen?: never;
+};
+/** Props for SectionBar: `nav` props, the kind with its parts, the path, the sections and the color axes. */
+export type SectionBarProps = SectionBarCommonProps & SectionBarKindProps;
+/**
+ * The page's sticky section bar: a Base UI Toolbar in a `nav` named "In
+ * this section", on the covered band's page ground, with a
+ * `--border-size-1` `--role-rule` bottom rule and no shadow; one line, at
+ * least `--ds-size-hit` tall.
+ *
+ * - Base: the disclosure glyph opens the staircase breadcrumb (capped at
+ *   half the viewport), the caps title follows the section in view, and
+ *   "Jump to" opens the list of sections.
+ * - From `--md-n-above`: the inline breadcrumb (root → current, the current
+ *   crumb at `--font-weight-7`) replaces glyph and title, and the Jump label
+ *   carries the section in view, announced politely once per change.
+ * - The Jump panel is a Popover of links in a `nav` "On this page",
+ *   `--size-px-14` wide: Tab moves through the links, Escape closes it, and
+ *   following a link closes it and moves focus to the section's heading.
+ * - `kind="tabs"`: from `--lg-n-above`, with 6 or fewer sections, equal
+ *   cells of at least `--size-px-12` replace Jump to, with scrollspy
+ *   (`aria-current="location"`) and an optional `toTop` cell at the start.
+ * - `kind="guide"`: an optional start `search` and an end `listen` jump.
+ *
+ * Docking: pass `onDockChange` and feed `docked`; bring the header back in
+ * its place on upward scroll. Hidden in print; the path prints in the
+ * masthead.
+ */
+export declare function SectionBar(props: SectionBarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SectionBar.d.ts.map

package/components/SectionBar/SectionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBar.d.ts","sourceRoot":"","sources":["../../src/components/SectionBar/SectionBar.tsx"],"names":[],"mappings":"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"}