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

package/navigation/navigation-menu/navigation-menu.module.css

@@ -73,7 +73,7 @@
   .base {
     display: flex;
     align-self: stretch;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     color: var(--primary12);
   }
 
@@ -126,15 +126,15 @@
     pointer-events: none;
   }
 
-  /* The target: at least --ds-size-hit square, label then chevron --size-px-1 apart. */
+  /* The target: at least --fgd-size-hit square, label then chevron --size-px-1 apart. */
   .hit {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--size-px-1);
     box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
-    min-inline-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
+    min-inline-size: var(--fgd-size-hit);
   }
 
   .label {
@@ -158,7 +158,6 @@
   }
 
   .popup {
-    --navigation-menu-clip-from: inset(0 0 100% 0);
     --navigation-menu-clip-rest: inset(calc(-1 * var(--size-px-2)));
 
     box-sizing: border-box;
@@ -172,27 +171,27 @@
   .popupOverview {
     inline-size: var(--anchor-width, 100vw);
     border-block-end-width: var(--border-size-2);
-    border-radius: var(--ds-radius-none);
+    border-radius: var(--radius-0);
   }
 
   /*
    * Index and dropdown: attached under the bar but not full-bleed, so the
-   * top corners are square and the bottom ones --ds-radius-8; the edge runs
+   * top corners are square and the bottom ones --radius-2-25; the edge runs
    * down the sides and across the bottom, and the top meets the bar's rule
    * [D182].
    */
   .popupAttached {
     min-inline-size: min(
-      max(var(--ds-size-menu-min), var(--anchor-width, 0px)),
-      calc(100vw - 2 * var(--ds-space-margin))
+      max(var(--fgd-size-menu-min), var(--anchor-width, 0px)),
+      calc(100vw - 2 * var(--fgd-space-margin))
     );
-    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    max-inline-size: calc(100vw - 2 * var(--fgd-space-margin));
     border-inline-width: var(--border-size-2);
     border-block-end-width: var(--border-size-2);
-    border-start-start-radius: var(--ds-radius-none);
-    border-start-end-radius: var(--ds-radius-none);
-    border-end-start-radius: var(--ds-radius-8);
-    border-end-end-radius: var(--ds-radius-8);
+    border-start-start-radius: var(--radius-0);
+    border-start-end-radius: var(--radius-0);
+    border-end-start-radius: var(--radius-2-25);
+    border-end-end-radius: var(--radius-2-25);
     overflow: hidden;
     overflow: clip;
   }
@@ -218,7 +217,7 @@
   }
 
   /*
-   * A panel row: a --ds-size-hit pitch in type-body-ui, no rest underline
+   * A panel row: a --fgd-size-hit pitch in type-body-ui, no rest underline
    * [D80]. Link's list-link build (`kind="nav"` with `list`) gives its ink
    * and its hover, press and current states; the row's full width and
    * underline offset are restated in the compounds layer, above Link's.
@@ -233,24 +232,24 @@
 
   /* 200 px to --size-px-14 wide (§9.1). */
   .dropdown {
-    min-inline-size: var(--ds-size-menu-min);
+    min-inline-size: var(--fgd-size-menu-min);
   }
 
   .dropdownList {
     box-sizing: border-box;
-    min-inline-size: var(--ds-size-menu-min);
+    min-inline-size: var(--fgd-size-menu-min);
     max-inline-size: var(--size-px-14);
     padding-block: var(--size-px-2);
     padding-inline: var(--size-px-3);
   }
 
-  /* ── Overview (LTA) ────────────────────────────────────────────────── */
+  /* ── Overview ──────────────────────────────────────────────────────── */
 
-  /* Content on the 12-column grid of --ds-container-content, aligned with the bar's container. */
+  /* Content on the 12-column grid of --fgd-container-content, aligned with the bar's container. */
   .overview {
     --navigation-menu-overview-size: min(
-      calc(var(--anchor-width, 100vw) - 2 * var(--ds-space-margin)),
-      var(--ds-container-content)
+      calc(var(--anchor-width, 100vw) - 2 * var(--fgd-space-margin)),
+      var(--fgd-container-content)
     );
 
     padding-block: var(--size-px-7) var(--size-px-8);
@@ -259,7 +258,7 @@
   .overviewInner {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
-    column-gap: var(--ds-space-margin);
+    column-gap: var(--fgd-space-margin);
     box-sizing: border-box;
     inline-size: var(--navigation-menu-overview-size);
     margin-inline-start: calc(
@@ -293,7 +292,7 @@
     align-items: center;
     gap: var(--size-px-1);
     box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     margin: 0;
     text-decoration-line: none;
   }
@@ -333,7 +332,7 @@
   .groups {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    column-gap: var(--ds-space-margin);
+    column-gap: var(--fgd-space-margin);
     row-gap: var(--size-px-5);
     margin-block-start: var(--size-px-5);
   }
@@ -346,7 +345,7 @@
     color: var(--primary12);
   }
 
-  /* ── Index (Audubon) ───────────────────────────────────────────────── */
+  /* ── Index ─────────────────────────────────────────────────────────── */
 
   /* At most 2 × --size-px-14: the category list, then a pane of at least --size-px-14. */
   .index {
@@ -381,7 +380,7 @@
     align-items: center;
     box-sizing: border-box;
     inline-size: 100%;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     margin: 0;
     padding-block: 0;
     padding-inline: var(--size-px-3);
@@ -439,7 +438,7 @@
     color: var(--role-glyph);
   }
 
-  /* Hover transitions [D181]: color only, --ds-duration-quick; nothing moves. */
+  /* Hover transitions [D181]: color only, --fgd-duration-quick; nothing moves. */
   @media (prefers-reduced-motion: no-preference) {
     .label,
     .featured,
@@ -447,14 +446,7 @@
     .headingLabel,
     .categoryLabel {
       transition-property: color, text-decoration-color;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-
-    /* First open only: the clip reveal from the top; switching and closing stay instant [D182]. */
-    .popup {
-      transition-property: clip-path;
-      transition-duration: var(--ds-duration-disclosure);
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
   }
@@ -492,12 +484,12 @@
     text-decoration-line: underline;
   }
 
-  /* Pressed: a --ds-stroke-3 underline in --primary12 under the label (derived; flagged). */
+  /* Pressed: a --border-size-2-25 underline in --primary12 under the label (derived; flagged). */
   .trigger:not([data-disabled]):active .label,
   .barLink:active .label {
     text-decoration-line: underline;
     text-decoration-color: var(--primary12);
-    text-decoration-thickness: var(--ds-stroke-3);
+    text-decoration-thickness: var(--border-size-2-25);
   }
 
   /* Parent of current (aria-current="true", path prefix): the bar at --border-size-2. */
@@ -506,18 +498,18 @@
     border-block-end-width: var(--border-size-2);
   }
 
-  /* Current (data-active, aria-current="page"): the --ds-stroke-3 bar plus --font-weight-7. */
+  /* Current (data-active, aria-current="page"): the --border-size-2-25 bar plus --font-weight-7. */
   .barLink[data-active]::after {
-    border-block-end-width: var(--ds-stroke-3);
+    border-block-end-width: var(--border-size-2-25);
   }
 
   .barLink[data-active] .label {
     font-weight: var(--font-weight-7);
   }
 
-  /* Open (data-popup-open): the --ds-stroke-3 bar flush with the bar's rule; the chevron flips. */
+  /* Open (data-popup-open): the --border-size-2-25 bar flush with the bar's rule; the chevron flips. */
   .trigger[data-popup-open]::after {
-    border-block-end-width: var(--ds-stroke-3);
+    border-block-end-width: var(--border-size-2-25);
   }
 
   .chevron[data-popup-open] {
@@ -555,7 +547,7 @@
   .heading:hover .headingLabel,
   .featuredBar:hover .featuredLabel {
     color: var(--role-link-hover);
-    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-line: var(--fgd-link-hover-line);
   }
 
   .featured:active .featuredLabel,
@@ -565,13 +557,13 @@
     text-decoration-thickness: var(--border-size-2);
   }
 
-  /* On the section landing page: --font-weight-7 plus a --ds-stroke-3 underline. */
+  /* On the section landing page: --font-weight-7 plus a --border-size-2-25 underline. */
   .featured[data-active] .featuredLabel,
   .heading[data-active] .headingLabel,
   .featuredBar[data-active] .featuredLabel {
     font-weight: var(--font-weight-7);
     text-decoration-line: underline;
-    text-decoration-thickness: var(--ds-stroke-3);
+    text-decoration-thickness: var(--border-size-2-25);
   }
 
   .featured:focus-visible,
@@ -585,7 +577,7 @@
 
   .categoryTrigger:hover .categoryLabel {
     color: var(--role-link-hover);
-    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-line: var(--fgd-link-hover-line);
   }
 
   .categoryTrigger:active .categoryLabel {
@@ -593,13 +585,13 @@
     text-decoration-thickness: var(--border-size-2);
   }
 
-  /* Selected (data-popup-open): the --ds-stroke-3 start-edge bar plus --font-weight-7. */
+  /* Selected (data-popup-open): the --border-size-2-25 start-edge bar plus --font-weight-7. */
   .categoryTrigger[data-popup-open] {
     font-weight: var(--font-weight-7);
   }
 
   .categoryTrigger[data-popup-open]::before {
-    border-inline-start-width: var(--ds-stroke-3);
+    border-inline-start-width: var(--border-size-2-25);
   }
 
   .categoryTrigger:focus-visible {
@@ -617,12 +609,6 @@
       text-decoration-line: underline;
     }
   }
-
-  /* ── Motion: the first open's clip reveal from the top [D91, D182] ─── */
-
-  .popup[data-starting-style] {
-    clip-path: var(--navigation-menu-clip-from);
-  }
 }
 
 @layer print {

package/navigation/pagination/Pagination.js

@@ -27,7 +27,7 @@ import styles from './pagination.module.css';
  *   offset --size-px-1), `:active` → the underline at --border-size-2
  *   [D181]. Step buttons are icon-only outline Buttons, whose hover, press
  *   and ring are Button's. aria-current="page" on `current` → the
- *   --ds-stroke-3 bar plus --font-weight-7; aria-current="true" on the
+ *   --border-size-2-25 bar plus --font-weight-7; aria-current="true" on the
  *   current `dot` → solid and larger. Ends omit the control and keep its
  *   space; nothing is ever disabled. The list region the pager drives
  *   carries aria-busy while loading; the pager stays put.

package/navigation/pagination/pagination.module.css

@@ -51,14 +51,14 @@
 
 @layer base {
   /* Previous at the start, Next at the end, the numbers centered; an omitted
-     end keeps its column, so the row stays put. --ds-space-40 above. */
+     end keeps its column, so the row stays put. --size-px-7-5 above. */
   .base {
     container: pagination / inline-size;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     align-items: center;
-    column-gap: var(--ds-space-12);
-    margin-block-start: var(--ds-space-40);
+    column-gap: var(--size-px-2-5);
+    margin-block-start: var(--size-px-7-5);
     color: var(--primary12);
     white-space: nowrap;
   }
@@ -98,38 +98,38 @@
     color: var(--primary12);
   }
 
-  /* Current: unlinked, on the same --ds-size-hit cell as a page link. */
+  /* Current: unlinked, on the same --fgd-size-hit cell as a page link. */
   .current {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--ds-size-hit);
-    min-block-size: var(--ds-size-hit);
+    min-inline-size: var(--fgd-size-hit);
+    min-block-size: var(--fgd-size-hit);
     color: var(--primary12);
   }
 
-  /* The current bar: --ds-stroke-3, --size-px-4 wide, under the numeral. A
+  /* The current bar: --border-size-2-25, --size-px-4 wide, under the numeral. A
      border, so it survives forced colors. Physical offsets: centering is
      direction-agnostic with the translate. */
   .current::after {
     content: '';
     position: absolute;
-    bottom: var(--ds-space-12);
+    bottom: var(--size-px-2-5);
     left: 50%;
     display: none;
     inline-size: var(--size-px-4);
-    border-block-end: var(--ds-stroke-3) solid var(--primary12);
+    border-block-end: var(--border-size-2-25) solid var(--primary12);
     translate: -50% 0;
   }
 
-  /* Gap "…": --role-muted, not focusable, on a --ds-size-hit cell. */
+  /* Gap "…": --role-muted, not focusable, on a --fgd-size-hit cell. */
   .gap {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--ds-size-hit);
-    min-block-size: var(--ds-size-hit);
+    min-inline-size: var(--fgd-size-hit);
+    min-block-size: var(--fgd-size-hit);
     color: var(--role-muted);
   }
 
@@ -147,10 +147,10 @@
     text-underline-offset: var(--size-px-1);
   }
 
-  /* The step pager's dots: 10 px --ds-stroke-1-5 --primary12 outlines, --size-px-2 apart. */
+  /* The step pager's dots: 10 px --border-size-1-5 --primary12 outlines, --size-px-2 apart. */
   .dots {
-    --pagination-dot: var(--ds-size-pager-dot);
-    --pagination-dot-current: var(--ds-size-pager-dot-current);
+    --pagination-dot: var(--fgd-size-pager-dot);
+    --pagination-dot-current: var(--fgd-size-pager-dot-current);
 
     display: flex;
     align-items: center;
@@ -162,14 +162,14 @@
     box-sizing: border-box;
     inline-size: var(--pagination-dot);
     block-size: var(--pagination-dot);
-    border: var(--ds-stroke-1-5) solid var(--primary12);
+    border: var(--border-size-1-5) solid var(--primary12);
     border-radius: var(--radius-round);
   }
 
   @media (prefers-reduced-motion: no-preference) {
     .word {
       transition-property: text-decoration-color;
-      transition-duration: var(--ds-duration-quick);
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
   }
@@ -200,13 +200,13 @@
   .current,
   .gap,
   .statusCount {
-    font-size: var(--ds-font-size-label);
+    font-size: var(--fgd-font-size-label);
   }
 
-  /* A number: a --ds-size-hit square hit area, no box, no rest underline [D80]. */
+  /* A number: a --fgd-size-hit square hit area, no box, no rest underline [D80]. */
   .page {
     justify-content: center;
-    min-inline-size: var(--ds-size-hit);
+    min-inline-size: var(--fgd-size-hit);
   }
 
   /* Compact: "Page 5 of 12" between the steps at every width. */
@@ -215,12 +215,12 @@
   }
 
   /*
-   * Step pager: icon-only ‹ › circles (--ds-size-control-md) around the
+   * Step pager: icon-only ‹ › circles (--fgd-size-control-md) around the
    * mono "3 of 12", centred; an omitted end keeps its column (§9.9).
    */
   .kindStep,
   .kindDots {
-    grid-template-columns: var(--ds-size-control-md) auto var(--ds-size-control-md);
+    grid-template-columns: var(--fgd-size-control-md) auto var(--fgd-size-control-md);
     justify-content: center;
   }
 
@@ -312,7 +312,7 @@
   }
 
   /* Stack guard: below 360 px the words drop and the chevrons stand alone on
-     their --ds-size-hit targets, still named "Previous" and "Next" [D166].
+     their --fgd-size-hit targets, still named "Previous" and "Next" [D166].
      The Button's gap closes with the word. */
   @media (max-width: 359.98px) {
     .step {
@@ -346,7 +346,7 @@
 }
 
 @layer states {
-  /* Current: the --ds-stroke-3 bar in --primary12 plus --font-weight-7. */
+  /* Current: the --border-size-2-25 bar in --primary12 plus --font-weight-7. */
   .current[aria-current='page'] {
     font-weight: var(--font-weight-7);
   }

package/navigation/sidebar-nav/SidebarNav.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sidebarNav: (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 SidebarNavVariants = VariantProps<typeof sidebarNav>;
+/** One entry of the page tree: a group (top level, with `items`), a page, or a page with subpages. */
+export interface SidebarNavItem {
+    /** The link text, authored in sentence case; a group heading sets its own caps [D165]. */
+    title: string;
+    /** The page. Omitted on a group, whose heading is then plain text. */
+    href?: string;
+    /**
+     * At the top level: the group's pages, under its caps heading. On a page:
+     * its subpages, one level deeper on an indented guide. Nest no deeper.
+     */
+    items?: readonly SidebarNavItem[];
+    /** Marks the current page. Default: its path equals `currentPath`. */
+    current?: boolean;
+    /**
+     * A collapsible group's initial state. Default: open when it holds the
+     * current page.
+     */
+    defaultOpen?: boolean;
+}
+/** Props for SidebarNav: `nav` props, the page tree, the current path and the color axes. */
+export type SidebarNavProps = Omit<React.ComponentPropsWithRef<'nav'>, 'children'> & {
+    /**
+     * The page tree: groups (a caps heading over its pages) and, rarely,
+     * top-level pages. Plain data, so the desktop column and the drawer
+     * render the same object.
+     */
+    items: readonly SidebarNavItem[];
+    /** The current page's URL path; its link takes `aria-current="page"`. */
+    currentPath?: string;
+    /** The landmark's name. Default "Documentation". */
+    label?: string;
+    /**
+     * Groups become independent Collapsibles, each heading with the D109
+     * glyph; the group holding the current page opens by default. Default
+     * `false`: every group open, no toggles.
+     */
+    collapsible?: boolean;
+    /** The toggle's accessible name for a group. Default: "{title} pages". */
+    toggleLabel?: (title: string) => string;
+    /**
+     * Builds each anchor, e.g. `(href) => <NextLink href={href} />`.
+     * Default: a plain `<a href>`.
+     */
+    renderLink?: (href: string) => React.ReactElement;
+    /** Override the scope's primary. Never defaulted [D133]. */
+    primary?: SidebarNavVariants['primary'];
+    /** Override the scope's secondary. Never defaulted. */
+    secondary?: SidebarNavVariants['secondary'];
+};
+/**
+ * The docs page tree [D202]: a `nav` of groups, each a caps heading
+ * (`type-label`, a link to the group's index page when it has one) over its
+ * pages on a --role-hairline guide, groups split by hairline rules. The
+ * current page takes `aria-current="page"`, the --border-size-2-25
+ * start-edge bar and weight 700. The same component, from the same data,
+ * fills the docs layout's column from --fgd-nav-inline-n-above and the
+ * drawer below it. On mount, and when the current page changes, the
+ * current link is scrolled into view inside the nearest scrolling
+ * ancestor (the column or the drawer's Scroll Area), never the page, so
+ * nothing moves around it. Hidden in print.
+ */
+export declare function SidebarNav(props: SidebarNavProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SidebarNav.d.ts.map

package/navigation/sidebar-nav/SidebarNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.d.ts","sourceRoot":"","sources":["../../src/navigation/sidebar-nav/SidebarNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqCjE,eAAO,MAAM,UAAU;;;8EAMrB,CAAA;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzD,sGAAsG;AACtG,MAAM,WAAW,cAAc;IAC7B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACjC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,6FAA6F;AAC7F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF;;;;OAIG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACjD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,uDAAuD;IACvD,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;CAC5C,CAAA;AAsCH;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAqEhD"}