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

package/page/docs-layout/DocsLayout.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type NavDrawerProps } from '../../navigation/nav-drawer';
+import { type PageGroundPreset } from '../../utils/scope';
+export declare const docsLayout: (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 DocsLayoutVariants = VariantProps<typeof docsLayout>;
+interface DocsLayoutContextValue {
+    /** The sidebar navigation, repeated in the drawer below the threshold. */
+    sidebar: React.ReactNode;
+    /** The in-flow sidebar column. */
+    sidebarRef: React.RefObject<HTMLDivElement | null>;
+}
+/** Provided by DocsLayout; read by DocsLayoutDrawer. */
+export declare const DocsLayoutContext: React.Context<DocsLayoutContextValue | null>;
+/** Props for DocsLayout: `div` props, the frame's slots, the page ground and the color axes. */
+export type DocsLayoutProps = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
+    /**
+     * The site header: a `NavigationBar` with `wide` (so its content box
+     * meets the columns), whose `drawer` is a `DocsLayoutDrawer`.
+     */
+    header?: React.ReactNode;
+    /**
+     * The page tree: a `SidebarNav`. It fills the sticky start column from
+     * --fgd-nav-inline-n-above and, below it, the drawer that
+     * `DocsLayoutDrawer` opens from the header.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * The page's contents: a `TableOfContents`. It fills the sticky end
+     * column from --xl-n-above; below it, the same element draws as its
+     * compact bar (`kind="bar"`, set through `TableOfContentsContext`),
+     * pinned at the top of the page under the header. Omitted, or with no
+     * items, neither appears.
+     */
+    toc?: React.ReactNode;
+    /** The page. */
+    children?: React.ReactNode;
+    /** A full-width part under the columns, such as the site `Footer`. */
+    footer?: React.ReactNode;
+    /** The page ground: `paper` (default), `white` or the page's one pastel. */
+    preset?: PageGroundPreset;
+    /** The `main` element's id, the skip link's target. Default "main". */
+    mainId?: string;
+    /** The skip link's words. Default "Skip to main content". */
+    skipLabel?: string;
+    /** Override the page ground's primary. Never defaulted [D133]. */
+    primary?: DocsLayoutVariants['primary'];
+    /** Override the page ground's secondary. Never defaulted. */
+    secondary?: DocsLayoutVariants['secondary'];
+};
+/**
+ * The documentation page frame [D202, D203]. A skip link first (the
+ * header's Navigation Bar then renders none), the header, then up to three
+ * columns inside `--fgd-container-wide`: the sidebar (`SidebarNav`, a
+ * sticky 240 px column with its own scroll, from --fgd-nav-inline-n-above;
+ * below it the header's menu Button opens the same navigation in the
+ * drawer), the `main` page with its end gutter for the code blocks'
+ * hanging ⋮, and the table of contents (a sticky 240 px column from
+ * --xl-n-above; below it the contents' compact bar, pinned under the
+ * header while the page scrolls, naming the section in view and opening
+ * the list in a panel). Every placement is viewport media and the bar has
+ * one fixed height, so the first paint is the final frame. Print keeps the
+ * page alone.
+ */
+export declare function DocsLayout(props: DocsLayoutProps): React.JSX.Element;
+/** Props for DocsLayoutDrawer: NavDrawer's, less the list it builds itself. */
+export type DocsLayoutDrawerProps = Omit<NavDrawerProps, 'nav' | 'sections' | 'children' | 'navLabel'>;
+/**
+ * The docs layout's drawer [D202]: a `NavDrawer` whose sheet shows the
+ * layout's `sidebar` (the same `SidebarNav`, from the same data). Put it in
+ * the header's `drawer` slot: the Navigation Bar shows its menu Button
+ * below --fgd-nav-inline-n-above, exactly where the sidebar column is
+ * absent. Focus moves to the current page's link, is trapped, Escape
+ * closes, and focus returns to the menu Button; the page behind is inert
+ * and does not scroll. If the window widens past the threshold while it is
+ * open, it closes and focus moves to the sidebar column's current link.
+ */
+export declare function DocsLayoutDrawer(props: DocsLayoutDrawerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=DocsLayout.d.ts.map

package/page/docs-layout/DocsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLayout.d.ts","sourceRoot":"","sources":["../../src/page/docs-layout/DocsLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAQ5E,OAAO,EAAgC,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AA8BvF,eAAO,MAAM,UAAU;;;8EAMrB,CAAA;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzD,UAAU,sBAAsB;IAC9B,0EAA0E;IAC1E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,kCAAkC;IAClC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CACnD;AAED,wDAAwD;AACxD,eAAO,MAAM,iBAAiB,8CAA2D,CAAA;AAGzF,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;CAC5C,CAAA;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBA6DhD;AAKD,+EAA+E;AAC/E,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAEtG;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAmB5D"}

package/page/docs-layout/DocsLayout.js

@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { NavDrawer } from '../../navigation/nav-drawer';
+import { TableOfContentsContext, } from '../../navigation/table-of-contents';
+import { cx } from '../../utils/className';
+import { SkipLinkContext } from '../../utils/frame';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { isPageGroundPreset, useScope } from '../../utils/scope';
+import styles from './docs-layout.module.css';
+/*
+ * Docs Layout (§11.15) [D202, D203]: the documentation page frame. A skip
+ * link, the site header, then the frame's columns: the sidebar navigation,
+ * the page, and an optional table of contents.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: docs-layout.module.css; CVA function `docsLayout`.
+ * - Axes: `primary`, `secondary` → scales module classes, applied through
+ *   the root's Ground.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: the root is a `kind="band"` Ground of the page ground
+ *   (`preset`, else the scope's page ground, else `paper`); every part
+ *   takes its role variables.
+ * - States: none of its own. The sidebar column and the table-of-contents
+ *   column are placed by viewport media only (the sidebar from
+ *   --fgd-nav-inline-n-above, the contents column from --xl-n-above), so
+ *   the server HTML paints the final frame: nothing is measured and
+ *   nothing moves at hydration [D201].
+ * - Parts: base (the page), skipLink, frame (the columns), sidebar (its
+ *   sticky column), main, tocBar (the strip below --xl-n-above that pins
+ *   the Table of Contents' compact bar under the header), toc (its sticky
+ *   column),
+ *   drawerTrigger (the menu Button of a DocsLayoutDrawer outside a
+ *   Navigation Bar).
+ * - Scope: the root re-declares the page ground as a `kind="band"` Ground.
+ * - Container: none; page frame on the viewport custom media [D163].
+ */
+export const docsLayout = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the root's Ground applies them.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** Provided by DocsLayout; read by DocsLayoutDrawer. */
+export const DocsLayoutContext = React.createContext(null);
+DocsLayoutContext.displayName = 'DocsLayoutContext';
+/**
+ * The documentation page frame [D202, D203]. A skip link first (the
+ * header's Navigation Bar then renders none), the header, then up to three
+ * columns inside `--fgd-container-wide`: the sidebar (`SidebarNav`, a
+ * sticky 240 px column with its own scroll, from --fgd-nav-inline-n-above;
+ * below it the header's menu Button opens the same navigation in the
+ * drawer), the `main` page with its end gutter for the code blocks'
+ * hanging ⋮, and the table of contents (a sticky 240 px column from
+ * --xl-n-above; below it the contents' compact bar, pinned under the
+ * header while the page scrolls, naming the section in view and opening
+ * the list in a panel). Every placement is viewport media and the bar has
+ * one fixed height, so the first paint is the final frame. Print keeps the
+ * page alone.
+ */
+export function DocsLayout(props) {
+    const { header, sidebar, toc, children, footer, preset: presetProp, mainId = 'main', skipLabel = 'Skip to main content', primary, secondary, className, ...rest } = props;
+    const scope = useScope();
+    const preset = presetProp ?? (isPageGroundPreset(scope.ground) ? scope.ground : 'paper');
+    const sidebarRef = React.useRef(null);
+    const context = React.useMemo(() => ({ sidebar, sidebarRef }), [sidebar]);
+    const hasSidebar = sidebar != null && sidebar !== false;
+    const hasToc = toc != null && toc !== false;
+    return (React.createElement(SkipLinkContext.Provider, { value: true },
+        React.createElement(DocsLayoutContext.Provider, { value: context },
+            React.createElement(Ground, { ...rest, kind: "band", preset: preset, primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("div", null), className: docsLayout({ className }) },
+                React.createElement("a", { className: styles.skipLink, href: `#${mainId}` }, skipLabel),
+                header,
+                React.createElement("div", { className: cx(styles.frame, hasSidebar && styles.withSidebar, hasToc && styles.withToc) },
+                    hasSidebar ? (React.createElement("div", { ref: sidebarRef, className: styles.sidebar }, sidebar)) : null,
+                    React.createElement("main", { id: mainId, className: styles.main },
+                        hasToc ? (React.createElement("div", { className: styles.tocBar },
+                            React.createElement(TableOfContentsContext.Provider, { value: BAR }, toc))) : null,
+                        children),
+                    hasToc ? React.createElement("div", { className: styles.toc }, toc) : null),
+                footer))));
+}
+/** Below --xl-n-above the one `toc` draws as the compact bar. */
+const BAR = { kind: 'bar' };
+/**
+ * The docs layout's drawer [D202]: a `NavDrawer` whose sheet shows the
+ * layout's `sidebar` (the same `SidebarNav`, from the same data). Put it in
+ * the header's `drawer` slot: the Navigation Bar shows its menu Button
+ * below --fgd-nav-inline-n-above, exactly where the sidebar column is
+ * absent. Focus moves to the current page's link, is trapped, Escape
+ * closes, and focus returns to the menu Button; the page behind is inert
+ * and does not scroll. If the window widens past the threshold while it is
+ * open, it closes and focus moves to the sidebar column's current link.
+ */
+export function DocsLayoutDrawer(props) {
+    const { triggerClassName, ...rest } = props;
+    const layout = React.useContext(DocsLayoutContext);
+    const inlineTarget = React.useCallback(() => {
+        const column = layout?.sidebarRef.current;
+        return (column?.querySelector('a[aria-current="page"]') ??
+            column?.querySelector('a[href]') ??
+            null);
+    }, [layout]);
+    return (React.createElement(NavDrawer, { ...rest, nav: layout?.sidebar, inlineTarget: inlineTarget, triggerClassName: cx(styles.drawerTrigger, triggerClassName) }));
+}
+//# sourceMappingURL=DocsLayout.js.map

package/page/docs-layout/DocsLayout.js.map

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

package/page/docs-layout/docs-layout.module.css

@@ -0,0 +1,266 @@
+/*
+ * Docs Layout (§11.15). CVA function `docsLayout` in DocsLayout.tsx; the
+ * root (`base`) is the page's `kind="band"` Ground.
+ *
+ * Parts: base, skipLink, frame (the columns), withSidebar, withToc, sidebar
+ * (its sticky column), main, tocBar (the strip that pins the contents'
+ * compact bar), toc (its sticky column), drawerTrigger.
+ *
+ * Page frame [D163, D202]: placement answers to the viewport custom media
+ * alone, the same steps as the rest of the frame (no new breakpoint):
+ * - base: one column; the sidebar sits in the drawer (the header's menu
+ *   Button), the contents in their compact bar, sticky under the header.
+ * - --fgd-nav-inline-n-above (1024 px by default): the sidebar column, the
+ *   same threshold that swaps the header's drawer for inline navigation.
+ * - --xl-n-above (1440 px): the contents column; the bar goes.
+ * Nothing is measured, so the server HTML paints the final frame [D201].
+ * Colors are role variables only; one local custom property carries a
+ * dimension (--docs-layout-gutter, the page's end gutter).
+ */
+
+/* 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. */
+.skipLink {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative;
+    min-block-size: 100dvh;
+  }
+
+  /* The skip link: the first stop in the page, shown on focus (§11.5). */
+  .skipLink {
+    position: absolute;
+    inset-block-start: var(--size-px-2);
+    inset-inline-start: var(--fgd-space-margin);
+    z-index: var(--layer-3);
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-5);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+    text-decoration-line: none;
+    white-space: nowrap;
+  }
+
+  /*
+   * The columns, capped at --fgd-container-wide (reached at the 1440 px
+   * viewport, so below it they span the viewport less its margins), with
+   * the grid gutter between them. The frame clips sideways at its padding
+   * edge (`clip`, so the sticky columns still dock): a code block's hanging
+   * ⋮ runs its hit area on into the margin, and on a phone past the
+   * viewport, where it must not make the page scroll sideways.
+   */
+  .frame {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--fgd-space-margin);
+    box-sizing: border-box;
+    max-inline-size: var(--fgd-container-wide);
+    margin-inline: auto;
+    padding-inline: var(--fgd-space-margin);
+    overflow-x: clip;
+  }
+
+  /* Below its threshold the sidebar lives in the drawer; the contents column below --xl-n-above. */
+  .sidebar,
+  .toc {
+    display: none;
+  }
+
+  /*
+   * The page. Its end gutter is the room a code block's or demo's hanging
+   * ⋮ always takes, outside the block's frame: --fgd-size-file-tabs-control
+   * (24 px), then --fgd-size-hit from --md-n-above, so the whole 44 px hit
+   * area fits in the column [D197].
+   */
+  .main {
+    --docs-layout-gutter: var(--fgd-size-file-tabs-control);
+
+    min-inline-size: 0;
+    padding-block: var(--size-px-7-5) var(--fgd-space-section);
+    padding-inline-end: var(--docs-layout-gutter);
+  }
+
+  /*
+   * The contents below --xl-n-above [D203]: a strip at the top of the page,
+   * straight under the header's rule, that sticks to the viewport top once
+   * the static header scrolls away, so the bar naming the section in view
+   * stays in reach; the page's one sticky bar [D89]. One fixed height (the
+   * bar's --fgd-size-control-md box in --size-px-2 of ground, the
+   * --fgd-size-control-xl header height) over a --border-size-1 hairline,
+   * opaque page ground across the column and its end gutter, so the page
+   * scrolls cleanly under it. Its panel is an overlay, so opening it moves
+   * nothing. With no items the bar renders nothing and the strip goes.
+   */
+  .tocBar {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: calc(var(--fgd-size-control-xl) + var(--border-size-1));
+    margin-block: calc(-1 * var(--size-px-7-5)) var(--size-px-7-5);
+    margin-inline-end: calc(-1 * var(--docs-layout-gutter));
+    padding-inline-end: var(--docs-layout-gutter);
+    border-block-end: var(--border-size-1) solid var(--role-hairline);
+    background-color: var(--role-ground);
+  }
+
+  .tocBar:empty {
+    display: none;
+  }
+
+  /* A heading a link lands on clears the sticky bar by --size-px-3. */
+  .withToc .main [id] {
+    scroll-margin-block-start: calc(var(--fgd-size-control-xl) + var(--border-size-1) + var(--size-px-3));
+  }
+
+  @media (min-width: 768px) {
+    .main {
+      --docs-layout-gutter: var(--fgd-size-hit);
+    }
+  }
+
+  /*
+   * From the inline threshold: the sidebar column, 240 px, sticky at the
+   * viewport top with its own scroll (never the page's), ruled from the
+   * page by a --role-hairline. The stable gutter keeps its width whether
+   * or not it scrolls.
+   */
+  @media (min-width: 1024px) {
+    .withSidebar {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr);
+    }
+
+    .sidebar {
+      position: sticky;
+      inset-block-start: 0;
+      align-self: start;
+      display: block;
+      box-sizing: border-box;
+      max-block-size: 100dvh;
+      padding-block: var(--size-px-7-5);
+      padding-inline-end: var(--size-px-3);
+      border-inline-end: var(--border-size-1) solid var(--role-hairline);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-gutter: stable;
+    }
+
+    /*
+     * The current page is the column's initial scroll target where
+     * supported, so the column opens scrolled to it before first paint (the
+     * Sidebar Navigation's layout effect does it elsewhere, after
+     * hydration). Scoped to the column, the scroller it names: outside a
+     * scroll container `nearest` would scroll the page. No snap type is set,
+     * so the alignment is inert otherwise.
+     */
+    .sidebar [aria-current='page'] {
+      scroll-initial-target: nearest;
+      scroll-snap-align: center;
+    }
+  }
+
+  /* From --xl-n-above: the contents column, 240 px, sticky, scrolling on its own when long. */
+  @media (min-width: 1440px) {
+    .withToc {
+      grid-template-columns: minmax(0, 1fr) var(--size-px-13);
+    }
+
+    .withSidebar.withToc {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr) var(--size-px-13);
+    }
+
+    .toc {
+      position: sticky;
+      inset-block-start: 0;
+      align-self: start;
+      display: block;
+      box-sizing: border-box;
+      max-block-size: 100dvh;
+      padding-block: var(--size-px-7-5);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-gutter: stable;
+    }
+
+    .toc:empty {
+      display: none;
+    }
+
+    /* A `toc` with no items: no column. */
+    .withToc:has(> .toc:empty) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .withSidebar.withToc:has(> .toc:empty) {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr);
+    }
+
+    .tocBar {
+      display: none;
+    }
+
+    .withToc .main [id] {
+      scroll-margin-block-start: 0;
+    }
+  }
+}
+
+@layer states {
+  .skipLink:not(:focus) {
+    inline-size: 1px;
+    block-size: 1px;
+    min-block-size: 0;
+    padding: 0;
+    border-width: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .skipLink:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* A DocsLayoutDrawer outside a Navigation Bar: its menu Button goes where the sidebar column comes in. */
+  @media (min-width: 1024px) {
+    .drawerTrigger {
+      display: none;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* The page prints alone (§7.7): no skip link, columns or contents. */
+    .skipLink,
+    .sidebar,
+    .toc,
+    .tocBar,
+    .drawerTrigger {
+      display: none;
+    }
+
+    .frame {
+      display: block;
+      max-inline-size: none;
+      padding-inline: 0;
+      overflow: visible;
+    }
+
+    .main {
+      padding-block: 0;
+      padding-inline-end: 0;
+    }
+  }
+}

package/page/docs-layout/index.d.ts

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

package/page/docs-layout/index.d.ts.map

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

package/page/docs-layout/index.js

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

package/page/docs-layout/index.js.map

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

package/page/footer/Footer.d.ts

@@ -6,7 +6,7 @@ import type { SitemapSection } from '../../utils/navigation';
 /** The shared navigation data (utils/navigation), re-exported where it first lived. */
 export type { SitemapLink, SitemapSection } from '../../utils/navigation';
 export declare const footer: (props?: ({
-    kind?: "ruled" | "guide" | "minimal" | null | undefined;
+    kind?: "minimal" | "ruled" | "guide" | null | undefined;
     signoff?: boolean | null | undefined;
     newsletterColumn?: boolean | null | undefined;
     collapsed?: boolean | null | undefined;

package/page/footer/Footer.js

@@ -32,7 +32,7 @@ import styles from './footer.module.css';
  *   on that Ground. Block actions are §9.2 Buttons, whose `solid` class
  *   aliases the scope's action scale.
  * - States: the Accordion's `data-open`, `data-panel-open` and clip reveal
- *   live in its module; `aria-current="page"` → the --ds-stroke-3
+ *   live in its module; `aria-current="page"` → the --border-size-2-25
  *   start-edge bar and weight 700; `:hover` [D181] → sitemap, group,
  *   cell and back-to-top links are §9.3 list links (Link `kind="nav"`
  *   with `list`) and legal links its `muted` ancestor ink, so Link owns