@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

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
+ * --ds-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;
+  }
+
+  /* --ds-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(--ds-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(--ds-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 (LTA): toggle and truncated title on a --ds-size-hit bar. */
+  .stair {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .stairBar {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    min-inline-size: 0;
+  }
+
+  .stairToggle {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-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 (LTA ≈41 px). */
+  .stairList {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--ds-size-hit);
+    list-style: none;
+  }
+
+  .stairRow {
+    --stair-indent: 0px;
+
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-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(--ds-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 --ds-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(--ds-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.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.map

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

package/navigation/nav-drawer/NavDrawer.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { type VariantProps } from 'class-variance-authority';
+import { type SitemapSection } from '../../utils/navigation';
+export declare const navigationDrawer: (props?: ({
+    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 NavigationDrawerVariants = VariantProps<typeof navigationDrawer>;
+/** Props for NavDrawer. */
+export type NavDrawerProps = {
+    /**
+     * The top-level rows from the shared navigation data (utils/navigation),
+     * the object that also feeds `NavigationMenuSections` and `Footer`'s
+     * `sitemap` [D187]. A section with links is a group (its landing page
+     * first, then its links); one with only an `href` is a direct link. They
+     * come before `children`.
+     */
+    sections?: readonly SitemapSection[];
+    /** The top-level rows: `NavDrawerGroup`s and direct `NavDrawerLink`s. */
+    children?: React.ReactNode;
+    /** The fixed footer zone: a `NavDrawerFooter`. */
+    footer?: React.ReactNode;
+    /** The menu Button's label, authored in title case [D160]. Default "Menu". */
+    label?: string;
+    /** The close control's label. Default "Close". */
+    closeLabel?: string;
+    /** The drawer `nav`'s name. Default "Main". */
+    navLabel?: string;
+    /** The logo repeated in the drawer's bar. Default: the Navigation Bar's. */
+    logo?: React.ReactNode;
+    /** The logo link. Default: the Navigation Bar's, else "/". */
+    logoHref?: string;
+    /** The logo link's accessible name. Default: the Navigation Bar's. */
+    logoLabel?: string;
+    /** The current page's URL path. Default: the Navigation Bar's. */
+    currentPath?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called when the drawer opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Override the header scope's primary. Never defaulted [D133]. */
+    primary?: NavigationDrawerVariants['primary'];
+    /** Override the header scope's secondary. Never defaulted. */
+    secondary?: NavigationDrawerVariants['secondary'];
+    /** Class names for the sheet, added after its own. */
+    className?: string;
+    /** Class names for the menu Button, added after its own. */
+    triggerClassName?: string;
+};
+/**
+ * The navigation drawer below --ds-nav-inline-n-above [D183]: the menu
+ * Button (the `menu` icon plus "Menu"; × plus "Close" while open) and a
+ * modal Dialog sheet in the header's own scope, full screen below
+ * --md-n-above and a 480 px side sheet with a --ds-stroke-3 inner edge
+ * from it. The sheet repeats the header's bar with the close control where
+ * the menu Button was, lists independent Collapsible groups and direct
+ * links in a Scroll Area, and keeps its footer fixed. Focus moves to the
+ * first row, is trapped, and returns to the menu Button; no backdrop is
+ * painted. If the viewport reaches the inline threshold while open, it
+ * closes and focus goes to the matching bar item. Put it in the Navigation
+ * Bar's `drawer` slot.
+ */
+export declare function NavDrawer(props: NavDrawerProps): React.JSX.Element;
+/** Props for NavDrawerGroup: Base UI Collapsible Root props, the row label and its links. */
+export type NavDrawerGroupProps = Omit<BaseCollapsible.Root.Props, 'children'> & {
+    /** The group row's label, in the display serif (`type-itemhead`). */
+    label: React.ReactNode;
+    /** The group's `NavDrawerLink`s. Nest groups one level deep at most. */
+    children?: React.ReactNode;
+};
+/**
+ * One top-level group: an independent Collapsible whose trigger row shows
+ * LTA's expand/collapse glyph [D109] (outward in --role-muted, inward in
+ * --primary12 when open; it swaps, never rotates), over its child links on
+ * an indent guide. A group holding the current page opens by default and
+ * its row takes the start-edge bar (`aria-current="true"`).
+ */
+export declare function NavDrawerGroup(props: NavDrawerGroupProps): React.JSX.Element;
+/** Props for NavDrawerLink: anchor props plus an explicit current flag. */
+export type NavDrawerLinkProps = React.ComponentProps<'a'> & {
+    /** Marks the link as the current page. Default: its path equals the drawer's `currentPath`. */
+    active?: boolean;
+};
+/**
+ * A drawer link. At the top level it is a direct link, styled as a group
+ * row without the glyph (the bare-text underline on hover); in a group, a
+ * `type-body-ui` child link on the indent guide; in the footer, a utility
+ * link. Child and footer links are list links, whose hover is color only
+ * [D181]. The current page takes `aria-current="page"`, the --ds-stroke-3
+ * start-edge bar and weight 700.
+ */
+export declare function NavDrawerLink(props: NavDrawerLinkProps): React.JSX.Element;
+/** Props for NavDrawerFooter: `div` props, the action and the locale Select. */
+export type NavDrawerFooterProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    /** The primary pill: a `solid` Button at `size="lg"`, hugging its label. */
+    action?: React.ReactNode;
+    /** The locale Select (or a locale link). */
+    locale?: React.ReactNode;
+    /** Utility links (`NavDrawerLink`s): the utility bar's links, repeated. */
+    children?: React.ReactNode;
+};
+/**
+ * The drawer's fixed footer zone, under a --border-size-2 --role-rule: the
+ * primary pill first (where the header's action goes below 480 px), then
+ * the utility links at a --ds-size-hit pitch, then the locale Select. Put
+ * it in the drawer's `footer`.
+ */
+export declare function NavDrawerFooter(props: NavDrawerFooterProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=NavDrawer.d.ts.map

package/navigation/nav-drawer/NavDrawer.d.ts.map

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