@fairgarden/design 0.1.0-0.canary.0

package/navigation/breadcrumb/Breadcrumb.js

@@ -0,0 +1,183 @@
+'use client';
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { DisclosureGlyph, disclosureGlyphHost } from '../../disclosure/collapsible';
+import { Icon } from '../../foundations/icon';
+import { Link } from '../../actions/link';
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from '../../overlays/menu';
+import { Tooltip, TooltipPopup, TooltipTrigger } from '../../overlays/tooltip';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './breadcrumb.module.css';
+/*
+ * Breadcrumb (§9.8): where the page sits in the hierarchy.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: breadcrumb.module.css; CVA functions `breadcrumb` (the root) and
+ *   `breadcrumbStairRow` (a staircase row).
+ * - Axes: `kind` → inline | staircase | parent → kindInline, kindStaircase,
+ *   kindParent (prefixed, because `staircase` is also a part); `primary`,
+ *   `secondary` → scales module classes (the secondary drives nothing).
+ *   `breadcrumbStairRow`: `level` → 1 … 6 → level1 … level6, the indent.
+ * - Compound variants: none.
+ * - Defaults: kind inline; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: ancestors are Link kind="nav" muted, so the Link owns their
+ *   muted rest ink, hover (--role-link-hover only, underlined where that is
+ *   --primary12), press and ring [D80, D181]. aria-current="page" on
+ *   `current` → --font-weight-6 (--font-weight-7 on the staircase kind's
+ *   one line, the section bar's title [D184]). Collapsible data-panel-open on
+ *   `stairToggle` → the disclosure glyph turns inward in --primary12 (the
+ *   Collapsible's glyph rules); :hover on `stairToggle` → the glyph at the
+ *   next tier's weight (its glyph host, §11.7); `staircase` data-starting-style /
+ *   data-ending-style → the clip reveal, instant under --motionNotOK.
+ * - Parts: base (the nav), list, item, link, separator, current,
+ *   domainGlyph, overflow (the "…" item), staircase (the Collapsible panel), stairToggle,
+ *   stairRow; plus plain (a level without a page), parentRow / parentLink /
+ *   parentText (the ‹ Parent link, a `text` Button), stair, stairBar,
+ *   stairGlyph, stairTitle, stairList, stairChevron and printLine.
+ * - Scope: none.
+ * - Container: a `kindInline` root is the inline-size container
+ *   `breadcrumb`. Baseline: the parent link only; viewport fallback inline
+ *   from --md-n-above (4 levels) and 6 levels from --lg-n-above; container
+ *   from 768 px inline, collapsing the middle past 4 levels, from 1024 px up
+ *   to 6 (§5.10.2). `kindStaircase` is page frame on viewport media
+ *   (§5.10.1): the collapsed staircase below --md-n-above, one line from it
+ *   (4 levels, 6 from --lg-n-above), whose crumbs truncate [D184]. The
+ *   §11.7 SectionBar renders this one line (`withStaircase={false}`) and
+ *   reveals the staircase in its own Collapsible.
+ */
+export const breadcrumb = cva(styles.base, {
+    variants: {
+        kind: {
+            inline: styles.kindInline,
+            staircase: styles.kindStaircase,
+            parent: styles.kindParent,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'inline',
+    },
+});
+/** A staircase row's indent (§9.8 Tokens): level 2 adds the chevron slot, deeper levels step by --size-px-2. */
+export const breadcrumbStairRow = cva(styles.stairRow, {
+    variants: {
+        level: {
+            1: styles.level1,
+            2: styles.level2,
+            3: styles.level3,
+            4: styles.level4,
+            5: styles.level5,
+            6: styles.level6,
+        },
+    },
+});
+function anchor(href, renderLink) {
+    return renderLink ? renderLink(href) : React.createElement("a", { href: href });
+}
+/** The level count at which each tier collapses the middle, root and last ancestors kept (§9.8). */
+function collapse(count, maxLevels) {
+    const keep = maxLevels - 2;
+    if (count + 1 <= maxLevels) {
+        return { shown: (_index) => true, hidden: [] };
+    }
+    const hidden = [];
+    for (let index = 1; index < count - keep; index += 1)
+        hidden.push(index);
+    return { shown: (index) => index === 0 || index >= count - keep, hidden };
+}
+/** The chevron separator: Material Symbols `chevron_right`, inline tier, hidden from assistive technology. */
+function CrumbSeparator() {
+    return React.createElement(Icon, { name: "chevron_right", className: styles.separator });
+}
+function Crumb({ crumb, renderLink, }) {
+    if (crumb.href == null)
+        return React.createElement("span", { className: styles.plain }, crumb.label);
+    return (React.createElement(Link, { kind: "nav", muted: true, href: crumb.href, render: renderLink?.(crumb.href), className: styles.link }, crumb.label));
+}
+/** The "…" crumb: an icon-only `sm` Button opening a Menu of the hidden ancestors. */
+function Overflow({ tier, crumbs, label, renderLink, }) {
+    return (React.createElement("li", { className: cx(styles.item, tier) },
+        React.createElement(Menu, null,
+            React.createElement(Tooltip, null,
+                React.createElement(TooltipTrigger, { render: React.createElement(MenuTrigger, { variant: "text", size: "sm", iconOnly: true, icon: "more_horiz" }, label) }),
+                React.createElement(TooltipPopup, null, label)),
+            React.createElement(MenuPopup, null, crumbs.map((crumb, index) => crumb.href == null ? (React.createElement(MenuItem, { key: index, disabled: true }, crumb.label)) : (React.createElement(MenuItem, { key: index, render: anchor(crumb.href, renderLink) }, crumb.label))))),
+        React.createElement(CrumbSeparator, null)));
+}
+/** The one-line form, with the tier classes the module's media and container rules read. */
+function CrumbList({ items, current, domainGlyph, renderLink, renderCrumb, overflowLabel, }) {
+    const md = collapse(items.length, 4);
+    const lg = collapse(items.length, 6);
+    const rows = [];
+    items.forEach((crumb, index) => {
+        rows.push(React.createElement("li", { key: `crumb-${index}`, className: cx(styles.item, md.shown(index) && styles.inMd, lg.shown(index) && styles.inLg) },
+            index === 0 && domainGlyph != null ? (React.createElement("span", { className: styles.domainGlyph, "aria-hidden": "true" }, domainGlyph)) : null,
+            React.createElement(Crumb, { crumb: crumb, renderLink: renderCrumb ?? renderLink }),
+            React.createElement(CrumbSeparator, null)));
+        if (index === 0 && md.hidden.length > 0) {
+            rows.push(React.createElement(Overflow, { key: "overflow-md", tier: styles.inMd, crumbs: md.hidden.map((hidden) => items[hidden]), label: overflowLabel, renderLink: renderLink }));
+        }
+        if (index === 0 && lg.hidden.length > 0) {
+            rows.push(React.createElement(Overflow, { key: "overflow-lg", tier: styles.inLg, crumbs: lg.hidden.map((hidden) => items[hidden]), label: overflowLabel, renderLink: renderLink }));
+        }
+    });
+    rows.push(React.createElement("li", { key: "current", className: cx(styles.item, styles.inMd, styles.inLg) },
+        React.createElement("span", { className: styles.current, "aria-current": "page" }, current)));
+    return React.createElement("ol", { className: styles.list }, rows);
+}
+/** "‹ Parent": a `text` Button rendered as an anchor, in `type-label` caps [D165]. */
+function ParentLink({ items, renderLink, }) {
+    const parent = [...items].reverse().find((crumb) => crumb.href != null);
+    if (parent?.href == null)
+        return null;
+    return (React.createElement("div", { className: styles.parentRow },
+        React.createElement(Button, { variant: "text", icon: "chevron_left", nativeButton: false, render: anchor(parent.href, renderLink), className: styles.parentLink },
+            React.createElement("span", { className: styles.parentText }, parent.label))));
+}
+/** The staircase: the toggle and truncated title, then one indented row per level. */
+function Staircase({ items, current, renderLink, toggleLabel, }) {
+    const level = (index) => Math.min(index + 1, 6);
+    const chevron = (React.createElement("span", { className: styles.stairChevron },
+        React.createElement(Icon, { name: "chevron_right" })));
+    return (React.createElement(BaseCollapsible.Root, { className: styles.stair },
+        React.createElement("div", { className: styles.stairBar },
+            React.createElement(BaseCollapsible.Trigger, { className: cx(styles.stairToggle, disclosureGlyphHost), "aria-label": toggleLabel },
+                React.createElement("span", { className: styles.stairGlyph },
+                    React.createElement(DisclosureGlyph, { size: "chrome" }))),
+            React.createElement("span", { className: styles.stairTitle }, current)),
+        React.createElement(BaseCollapsible.Panel, { className: styles.staircase },
+            React.createElement("ol", { className: styles.stairList },
+                items.map((crumb, index) => (React.createElement("li", { key: index, className: breadcrumbStairRow({ level: level(index) }) },
+                    index > 0 ? chevron : null,
+                    React.createElement(Crumb, { crumb: crumb, renderLink: renderLink })))),
+                React.createElement("li", { className: breadcrumbStairRow({ level: level(items.length) }) },
+                    items.length > 0 ? chevron : null,
+                    React.createElement("span", { className: styles.current, "aria-current": "page" }, current))))));
+}
+/**
+ * A `nav` named "Breadcrumb" holding the ancestors in order, then the
+ * current page, unlinked and marked `aria-current="page"`. Crumbs are
+ * `type-label` caps; ancestors are `--role-muted` at `--font-weight-4`, the
+ * current page `--primary12` at `--font-weight-6`, and › chevrons separate
+ * them. Crumbs never wrap: the middle collapses into a "…" menu instead.
+ * Use it on pages two or more levels deep, never as a history trail.
+ */
+export function Breadcrumb(props) {
+    const { items, current, kind, primary, secondary, domainGlyph, renderLink, renderCrumb, overflowLabel = 'More levels', toggleLabel = 'Page path', printLine = true, withStaircase = true, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'inline';
+    return (React.createElement("nav", { "aria-label": "Breadcrumb", ...rest, ...scope, className: breadcrumb({ kind, primary, secondary, className }) },
+        resolvedKind !== 'staircase' ? (React.createElement(ParentLink, { items: items, renderLink: renderLink })) : withStaircase ? (React.createElement(Staircase, { items: items, current: current, renderLink: renderLink, toggleLabel: toggleLabel })) : null,
+        resolvedKind === 'parent' ? null : (React.createElement(CrumbList, { items: items, current: current, domainGlyph: domainGlyph, renderLink: renderLink, renderCrumb: renderCrumb, overflowLabel: overflowLabel })),
+        printLine && items.length > 0 ? (React.createElement("p", { className: styles.printLine }, items.map((crumb, index) => (React.createElement(React.Fragment, { key: index },
+            index > 0 ? ' / ' : null,
+            crumb.label))))) : null));
+}
+//# sourceMappingURL=Breadcrumb.js.map

package/navigation/breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../src/navigation/breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACzC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAC,UAAU;YACzB,SAAS,EAAE,MAAM,CAAC,aAAa;YAC/B,MAAM,EAAE,MAAM,CAAC,UAAU;SAC1B;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ;KACf;CACF,CAAC,CAAA;AAEF,gHAAgH;AAChH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE;IACrD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC,MAAM;YAChB,CAAC,EAAE,MAAM,CAAC,MAAM;YAChB,CAAC,EAAE,MAAM,CAAC,MAAM;YAChB,CAAC,EAAE,MAAM,CAAC,MAAM;YAChB,CAAC,EAAE,MAAM,CAAC,MAAM;YAChB,CAAC,EAAE,MAAM,CAAC,MAAM;SACjB;KACF;CACF,CAAC,CAAA;AAsEF,SAAS,MAAM,CAAC,IAAY,EAAE,UAAiD;IAC7E,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2BAAG,IAAI,EAAE,IAAI,GAAI,CAAA;AAC1D,CAAC;AAED,oGAAoG;AACpG,SAAS,QAAQ,CAAC,KAAa,EAAE,SAAiB;IAChD,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,CAAA;IAC1B,IAAI,KAAK,GAAG,CAAC,IAAI,SAAS,EAAE,CAAC;QAC3B,OAAO,EAAE,KAAK,EAAE,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAc,EAAE,CAAA;IACpE,CAAC;IACD,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,EAAE,KAAK,IAAI,CAAC;QAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACxE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,EAAE,MAAM,EAAE,CAAA;AACnF,CAAC;AAED,8GAA8G;AAC9G,SAAS,cAAc;IACrB,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CAAA;AACnE,CAAC;AAED,SAAS,KAAK,CAAC,EACb,KAAK,EACL,UAAU,GAIX;IACC,IAAI,KAAK,CAAC,IAAI,IAAI,IAAI;QAAE,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAQ,CAAA;IAClF,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAC,KAAK,EACV,KAAK,QACL,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,UAAU,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,MAAM,CAAC,IAAI,IAErB,KAAK,CAAC,KAAK,CACP,CACR,CAAA;AACH,CAAC;AAED,sFAAsF;AACtF,SAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,GAMX;IACC,OAAO,CACL,4BAAI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC;QAClC,oBAAC,IAAI;YACH,oBAAC,OAAO;gBACN,oBAAC,cAAc,IACb,MAAM,EACJ,oBAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,IAAI,EAAC,YAAY,IAC7D,KAAK,CACM,GAEhB;gBACF,oBAAC,YAAY,QAAE,KAAK,CAAgB,CAC5B;YACV,oBAAC,SAAS,QACP,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAC3B,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CACnB,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,UAC3B,KAAK,CAAC,KAAK,CACH,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,IACzD,KAAK,CAAC,KAAK,CACH,CACZ,CACF,CACS,CACP;QACP,oBAAC,cAAc,OAAG,CACf,CACN,CAAA;AACH,CAAC;AAED,4FAA4F;AAC5F,SAAS,SAAS,CAAC,EACjB,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa,GAQd;IACC,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IACpC,MAAM,IAAI,GAAsB,EAAE,CAAA;IAElC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC7B,IAAI,CAAC,IAAI,CACP,4BACE,GAAG,EAAE,SAAS,KAAK,EAAE,EACrB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC;YAEzF,KAAK,KAAK,CAAC,IAAI,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACpC,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,iBAAc,MAAM,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,IAAI;YACR,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,IAAI,UAAU,GAAI;YAC9D,oBAAC,cAAc,OAAG,CACf,CACN,CAAA;QACD,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,IAAI,CACP,oBAAC,QAAQ,IACP,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAChD,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU,GACtB,CACH,CAAA;QACH,CAAC;QACD,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,IAAI,CACP,oBAAC,QAAQ,IACP,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAChD,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU,GACtB,CACH,CAAA;QACH,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAC,SAAS,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC;QACpE,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,kBAAe,MAAM,IACjD,OAAO,CACH,CACJ,CACN,CAAA;IAED,OAAO,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAM,CAAA;AAChD,CAAC;AAED,sFAAsF;AACtF,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,UAAU,GAIX;IACC,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IACvE,IAAI,MAAM,EAAE,IAAI,IAAI,IAAI;QAAE,OAAO,IAAI,CAAA;IACrC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC9B,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,cAAc,EACnB,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,EACvC,SAAS,EAAE,MAAM,CAAC,UAAU;YAE5B,8BAAM,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,MAAM,CAAC,KAAK,CAAQ,CAClD,CACL,CACP,CAAA;AACH,CAAC;AAED,sFAAsF;AACtF,SAAS,SAAS,CAAC,EACjB,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,GAMZ;IACC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAe,CAAA;IACrE,MAAM,OAAO,GAAG,CACd,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY;QAClC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACxB,CACR,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK;QAC3C,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC7B,oBAAC,eAAe,CAAC,OAAO,IACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,mBAAmB,CAAC,gBAC1C,WAAW;gBAEvB,8BAAM,SAAS,EAAE,MAAM,CAAC,UAAU;oBAChC,oBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC5B,CACiB;YAC1B,8BAAM,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,OAAO,CAAQ,CAChD;QACN,oBAAC,eAAe,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS;YAChD,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;oBACnE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;oBAC3B,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CAC5C,CACN,CAAC;gBACF,4BAAI,SAAS,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC9D,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;oBAClC,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,kBAAe,MAAM,IACjD,OAAO,CACH,CACJ,CACF,CACiB,CACH,CACxB,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa,GAAG,aAAa,EAC7B,WAAW,GAAG,WAAW,EACzB,SAAS,GAAG,IAAI,EAChB,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,YAAY,GAAmB,IAAI,IAAI,QAAQ,CAAA;IAErD,OAAO,CACL,2CACa,YAAY,KACnB,IAAI,KACJ,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;QAE7D,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,CAC9B,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CACrD,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,IAAI;QACP,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,GAC5B,CACH;QACA,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/B,2BAAG,SAAS,EAAE,MAAM,CAAC,SAAS,IAC3B,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;YACvB,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;YACxB,KAAK,CAAC,KAAK,CACG,CAClB,CAAC,CACA,CACL,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC"}

package/navigation/breadcrumb/breadcrumb.module.css

@@ -0,0 +1,417 @@
+/*
+ * Breadcrumb (§9.8). CVA functions `breadcrumb` and `breadcrumbStairRow` in
+ * Breadcrumb.tsx. Parts: base (the nav), list (the one-line `ol`), item,
+ * link (an ancestor: Link kind="nav" muted), plain (a level without a page),
+ * separator (› chevron), current, domainGlyph, the "…" overflow crumb,
+ * parentRow / parentLink / parentText (‹ Parent), stair (the Collapsible
+ * root), stairBar, stairToggle, stairGlyph (the glyph's box),
+ * stairTitle, staircase (the Collapsible panel), stairList, stairRow,
+ * stairChevron, printLine. Colors follow the §9.8 Color roles table through
+ * role variables only; local custom properties carry dimensions only:
+ *   --stair-indent  a staircase row's start inset, published by level1…6
+ *
+ * Tier classes: `inMd` marks what the 4-level line shows, `inLg` what the
+ * 6-level line shows; the media and container rules below pick one.
+ *
+ * The staircase kind is the section-bar breadcrumb (§11.7) [D184]: the
+ * staircase below --md-n-above, then one line whose crumbs truncate on a
+ * --fgd-size-hit target, rest in --primary12 (the §11.7 crumb ink; the hover
+ * stays Link's muted --role-link-hover only) and whose current crumb, at
+ * --font-weight-7, acts as the bar's title.
+ */
+
+/* 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. Crumbs are caps wayfinding,
+ * the §3.7 breadcrumb forms of `type-label` [D165]. */
+.link {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.plain {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.current {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.parentLink {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.stairTitle {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.printLine {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The one-line form. Crumbs never wrap; the middle collapses instead. */
+  .list {
+    display: none;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  .item {
+    display: none;
+    flex: none;
+    align-items: center;
+  }
+
+  /* › at the inline tier, --size-px-2 each side, --role-muted (§9.8 Tokens). */
+  .separator {
+    flex: none;
+    margin-inline: var(--size-px-2);
+    color: var(--role-muted);
+  }
+
+  /* Optional solid glyph, --size-px-3, --size-px-2 before the root [D47]. */
+  .domainGlyph {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    margin-inline-end: var(--size-px-2);
+    color: var(--primary12);
+  }
+
+  .current {
+    color: var(--primary12);
+  }
+
+  .plain {
+    color: var(--role-muted);
+  }
+
+  /* ‹ Parent: one line; a long label truncates with an ellipsis, never wraps. */
+  .parentRow {
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  /* --fgd-size-hit tall in the flow (§9.8 States: the ring is hit-tall on the
+     parent link), like the nav crumbs, so no hit area hangs outside the nav
+     and a clipping host never scrolls. */
+  .parentLink {
+    max-inline-size: 100%;
+    min-block-size: var(--fgd-size-hit);
+  }
+
+  /* The cap is the container width less the glyph and the Button's gap; the
+     vw line is the fallback without container units. */
+  .parentText {
+    display: block;
+    max-inline-size: calc(100vw - 2 * var(--fgd-space-margin) - 2 * var(--size-px-3));
+    max-inline-size: calc(100cqi - 2 * var(--size-px-3));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The staircase: toggle and truncated title on a --fgd-size-hit bar. */
+  .stair {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .stairBar {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--fgd-size-hit);
+    min-inline-size: 0;
+  }
+
+  .stairToggle {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* The 16 px glyph's box, centred in the toggle's hit area. */
+  .stairGlyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--size-px-7);
+    block-size: var(--size-px-7);
+  }
+
+  .stairTitle {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--primary12);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The clip reveal (§1.5.15) [D91]: the panel's edge wipes open, never fades. */
+  .staircase {
+    block-size: var(--collapsible-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Level 1 sits under the title, past the toggle's hit area (≈41 px). */
+  .stairList {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--fgd-size-hit);
+    list-style: none;
+  }
+
+  .stairRow {
+    --stair-indent: 0px;
+
+    display: flex;
+    align-items: center;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline-start: var(--stair-indent);
+    white-space: nowrap;
+  }
+
+  /* The --size-px-5 chevron slot before levels 2 and deeper; › in --role-muted. */
+  .stairChevron {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    inline-size: var(--size-px-5);
+    color: var(--role-muted);
+  }
+
+  .printLine {
+    display: none;
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .staircase {
+      transition-property: block-size;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Ancestor and pageless level: --font-weight-4, --font-letterspacing-2 (§3.7);
+     the ancestor link's rest ink is Link's `muted` --role-muted, never an accent [D80]. */
+  .link,
+  .plain {
+    font-weight: var(--font-weight-4);
+    letter-spacing: var(--font-letterspacing-2);
+  }
+
+  .link {
+    white-space: nowrap;
+  }
+
+  /* Staircase indents: level 2 adds the chevron slot; each deeper level --size-px-2. */
+  .level1,
+  .level2 {
+    --stair-indent: 0px;
+  }
+
+  .level3 {
+    --stair-indent: var(--size-px-2);
+  }
+
+  .level4 {
+    --stair-indent: calc(2 * var(--size-px-2));
+  }
+
+  .level5 {
+    --stair-indent: calc(3 * var(--size-px-2));
+  }
+
+  .level6 {
+    --stair-indent: calc(4 * var(--size-px-2));
+  }
+
+  /* In-page breadcrumb: a module, container-first [D163]. Baseline: the
+     parent link only. */
+  .kindInline {
+    container: breadcrumb / inline-size;
+  }
+
+  /* Parent: the single ‹ Parent link at every width. */
+  .kindParent .parentRow {
+    display: flex;
+  }
+
+  /* The staircase kind's line (the section bar's crumbs): crumbs shrink and
+     truncate rather than wrap, each at most --size-px-14, on a --fgd-size-hit
+     target (§11.7) [D184]. */
+  .kindStaircase .list {
+    min-inline-size: 0;
+  }
+
+  .kindStaircase .item {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+  }
+
+  .kindStaircase .list .link,
+  .kindStaircase .list .plain,
+  .kindStaircase .list .current {
+    display: block;
+    min-inline-size: 0;
+    max-inline-size: var(--size-px-14);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .kindStaircase .list .link {
+    padding-block: calc((var(--fgd-size-hit) - 1lh) / 2);
+  }
+
+  /* The bar's crumbs rest in --primary12 (§11.7); weight and position tell
+     the current crumb apart. Link's states layer keeps the muted hover. */
+  .kindStaircase .list .link,
+  .kindStaircase .list .plain {
+    color: var(--primary12);
+  }
+
+  /* Viewport fallback: inline from --md-n-above (4 levels), 6 levels from
+     --lg-n-above. The staircase is page frame: the staircase below
+     --md-n-above, one line from it [D184]. */
+  @media (min-width: 768px) {
+    .kindInline .list,
+    .kindStaircase .list {
+      display: flex;
+    }
+
+    .kindInline .parentRow,
+    .kindStaircase .stair {
+      display: none;
+    }
+
+    .inMd {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .item {
+      display: none;
+    }
+
+    .inLg {
+      display: flex;
+    }
+  }
+
+  /* Container thresholds (§5.10.2): from 768 px inline, the middle collapsed
+     past 4 levels (root and last two ancestors kept); from 1024 px up to 6. */
+  @container breadcrumb (width < 768px) {
+    .kindInline .list {
+      display: none;
+    }
+
+    .kindInline .parentRow {
+      display: flex;
+    }
+  }
+
+  @container breadcrumb (width >= 768px) {
+    .kindInline .list {
+      display: flex;
+    }
+
+    .kindInline .parentRow {
+      display: none;
+    }
+
+    .item {
+      display: none;
+    }
+
+    .inMd {
+      display: flex;
+    }
+  }
+
+  @container breadcrumb (width >= 1024px) {
+    .item {
+      display: none;
+    }
+
+    .inLg {
+      display: flex;
+    }
+  }
+}
+
+@layer states {
+  /* Ancestor hover is Link's `muted` nav hover: --role-link-hover only,
+     underlined where that ink is --primary12 (§9.8) [D80, D181]. */
+
+  /* Current: --font-weight-6 against ancestors at --font-weight-4, last, unlinked;
+     on the staircase kind's line --font-weight-7, acting as the title [D184]. */
+  .current[aria-current='page'] {
+    font-weight: var(--font-weight-6);
+  }
+
+  .kindStaircase .list .current[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  /* Stair toggle hover: the glyph at the next tier's weight, from the
+     Collapsible's glyph host; no added circle (§11.7) [D181]. */
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .stairToggle:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .staircase[data-starting-style],
+  .staircase[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The interactive breadcrumb is hidden; the path prints once as one plain
+       line of caps, the staircase flattened and collapsed crumbs restored,
+       with no URLs or link letters (§7.8) [D80, D105]. */
+    .list,
+    .parentRow,
+    .stair {
+      display: none;
+    }
+
+    .printLine {
+      display: block;
+    }
+  }
+}

package/navigation/breadcrumb/index.d.ts

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

package/navigation/breadcrumb/index.d.ts.map

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

package/navigation/breadcrumb/index.js

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

package/navigation/breadcrumb/index.js.map

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