@fairgarden/design 0.1.0-0.canary.0

package/utils/highlightMatch.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/**
+ * Marks each case-insensitive occurrence of `query` in `label` with the
+ * `match` part: weight, never color or fill (P2).
+ */
+export declare function highlightMatch(label: string, query: string, className: string): string | React.ReactNode[];
+//# sourceMappingURL=highlightMatch.d.ts.map

package/utils/highlightMatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightMatch.d.ts","sourceRoot":"","sources":["../src/utils/highlightMatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,8BAmB7E"}

package/utils/highlightMatch.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Marks each case-insensitive occurrence of `query` in `label` with the
+ * `match` part: weight, never color or fill (P2).
+ */
+export function highlightMatch(label, query, className) {
+    const needle = query.trim().toLocaleLowerCase();
+    if (!needle)
+        return label;
+    const haystack = label.toLocaleLowerCase();
+    const parts = [];
+    let start = 0;
+    let index = haystack.indexOf(needle);
+    while (index !== -1) {
+        if (index > start)
+            parts.push(label.slice(start, index));
+        parts.push(React.createElement("mark", { key: index, className: className }, label.slice(index, index + needle.length)));
+        start = index + needle.length;
+        index = haystack.indexOf(needle, start);
+    }
+    if (start < label.length)
+        parts.push(label.slice(start));
+    return parts;
+}
+//# sourceMappingURL=highlightMatch.js.map

package/utils/highlightMatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightMatch.js","sourceRoot":"","sources":["../src/utils/highlightMatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,KAAa,EAAE,SAAiB;IAC5E,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAA;IAC/C,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAA;IACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC1C,MAAM,KAAK,GAAsB,EAAE,CAAA;IACnC,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;IACpC,OAAO,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;QACpB,IAAI,KAAK,GAAG,KAAK;YAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;QACxD,KAAK,CAAC,IAAI,CACR,8BAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IACnC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CACrC,CACR,CAAA;QACD,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;QAC7B,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACzC,CAAC;IACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,OAAO,KAAK,CAAA;AACd,CAAC"}

package/utils/layers.css

@@ -0,0 +1,3 @@
+
+@layer reset, tokens, theme, roles, base, variants, compounds, scales, states, print;
+/* Cascade layer order (§1.11.3). Loaded first; layer names are global. */

package/utils/line.module.css

@@ -0,0 +1,101 @@
+/*
+ * Line styles (§1.5.8, §4.2, §4.6). Compose into a module part, in a
+ * top-level rule outside any @layer (Lightning CSS rejects nested composes):
+ *   .label { composes: lineDotted from '../../utils/line.module.css'; }
+ * The part colors the line from a role variable (`stroke`, `border-color`,
+ * `outline-color`); the line style never carries a color.
+ *
+ * SVG first. Dots and dashes are drawn in SVG from the --fgd- geometry
+ * tokens [D36, D68]: every class sets the SVG stroke properties, which
+ * inherit, so an inline <svg><line/></svg> or <rect/> inside the part draws
+ * true round dots and exact dash arrays (round caps extend each dash by the
+ * stroke width, so the drawn array is compensated). Inline SVG is foreground
+ * and prints.
+ *
+ * HTML boxes. `lineSolid`, `lineDouble` and `lineDoubleHair` are complete as
+ * borders. The dotted and dashed classes also set a `border-style` fallback
+ * for a box that cannot host an SVG (a pill's disabled edge); its geometry
+ * is the browser's, so prefer the SVG where the line carries meaning.
+ */
+@layer base {
+  .lineSolid {
+    border-style: solid;
+    stroke-width: var(--border-size-1);
+    stroke-dasharray: none;
+    stroke-linecap: butt;
+  }
+
+  /* Relation: leaders, tethers, estimates, disabled edges. 1 px at 3 px. */
+  .lineDottedFine {
+    border-style: dotted;
+    border-width: var(--fgd-dot-fine);
+    stroke-width: var(--fgd-dot-fine);
+    stroke-dasharray: 0 var(--fgd-dot-fine-pitch);
+    stroke-linecap: round;
+  }
+
+  /* Relation, grouping frames, ornamental rules. 2 px at 5 px. */
+  .lineDotted {
+    border-style: dotted;
+    border-width: var(--fgd-dot);
+    stroke-width: var(--fgd-dot);
+    stroke-dasharray: 0 var(--fgd-dot-pitch);
+    stroke-linecap: round;
+  }
+
+  /* Ornamental dot underline; dot-and-star rule. 4 px at 9 px. */
+  .lineDottedBold {
+    border-style: dotted;
+    border-width: var(--fgd-dot-bold);
+    stroke-width: var(--fgd-dot-bold);
+    stroke-dasharray: 0 var(--fgd-dot-bold-pitch);
+    stroke-linecap: round;
+  }
+
+  /* Annotation. 1 px, 4 on / 3 off, butt caps. */
+  .lineDashedFine {
+    border-style: dashed;
+    border-width: var(--border-size-1);
+    stroke-width: var(--border-size-1);
+    stroke-dasharray: var(--fgd-dash-fine) var(--fgd-dash-fine-gap);
+    stroke-linecap: butt;
+  }
+
+  /* Path; provisional. 2 px, renders 5 on / 4 off with round caps. */
+  .lineDashed {
+    border-style: dashed;
+    border-width: var(--border-size-2);
+    stroke-width: var(--border-size-2);
+    stroke-dasharray: calc(var(--fgd-dash) - var(--border-size-2))
+      calc(var(--fgd-dash-gap) + var(--border-size-2));
+    stroke-linecap: round;
+  }
+
+  /*
+   * Frame / terminal: outer --border-size-2, --fgd-double-gap, inner
+   * --border-size-1. The inner line is an outline inset inside the border;
+   * set `outline-color` with `border-color`.
+   */
+  .lineDouble {
+    border-style: solid;
+    border-width: var(--border-size-2);
+    outline-style: solid;
+    outline-width: var(--border-size-1);
+    outline-offset: calc(
+      -1 * (var(--border-size-2) + var(--fgd-double-gap) + var(--border-size-1))
+    );
+  }
+
+  /*
+   * Table totals, running header: two --border-size-1 hairlines
+   * --fgd-double-hair-gap apart. The element sits between its block-start
+   * and block-end borders: empty, it is the gap; as a band, content grows it.
+   */
+  .lineDoubleHair {
+    box-sizing: content-box;
+    border-style: solid;
+    border-width: 0;
+    border-block-width: var(--border-size-1);
+    min-block-size: var(--fgd-double-hair-gap);
+  }
+}

package/utils/media.css

@@ -0,0 +1,11 @@
+/*
+ * System custom media (§1.5.13) [D183]. Provided to every file, global or
+ * module, through @csstools/postcss-global-data (postcss.config.js and
+ * docs/postcss.config.mjs), beside Open Props' media.min.css. The
+ * definitions are consumed at build time and emit nothing.
+ *
+ * --fgd-nav-inline-n-above: where the inline Navigation Bar replaces the
+ * drawer. A build-time constant: 1024 px by default (the --lg-n-above
+ * value); a site whose bar exceeds its fit budget points its PostCSS
+ * global data at its own file that sets 1440 px (the --xl-n-above value).
+ */

package/utils/navigation.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+/**
+ * One navigation link: a Navigation Menu panel link, a drawer child link and
+ * a footer sitemap link.
+ */
+export interface SitemapLink {
+    /** The link text, authored in sentence case (bar items and group headings set their own case). */
+    label: string;
+    href: string;
+    /**
+     * Marks the current page (`aria-current="page"`). The Navigation Menu and
+     * the drawer also match their `currentPath`; the footer reads only this.
+     */
+    current?: boolean;
+    /** An external site: the arrow-open mark and "(external site)". */
+    external?: boolean;
+    /**
+     * A third tier, for the mega panels only: in an `overview` panel the link
+     * becomes a caps group heading (with ›, to `href`) over these links; in an
+     * `index` panel a category whose pane lists them. The drawer and the
+     * footer list the link itself and leave this tier to its page.
+     */
+    links?: readonly SitemapLink[];
+}
+/** An image in the navigation data. */
+export interface SitemapImage {
+    src: string;
+    /** The alternative text; `''` for a decorative image. */
+    alt: string;
+}
+/** The optional promo card of an `overview` panel (§9.6): one Tab stop, its stretched title link. */
+export interface SitemapPromo {
+    href: string;
+    /** The title, `type-itemhead`. */
+    title: string;
+    /** A 16:9 image. */
+    image?: SitemapImage;
+    /** A two-line `type-body-ui` blurb. */
+    description?: string;
+}
+/** The panel a section opens in the desktop Navigation Menu [D182]. */
+export type SitemapPanel = 'dropdown' | 'overview' | 'index';
+/**
+ * One top-level navigation section: a bar item and its panel, a drawer
+ * group and a footer sitemap group, whose heading is the section's label
+ * [D187].
+ */
+export interface SitemapSection {
+    /** The bar item, drawer row and footer group heading. */
+    label: string;
+    /**
+     * The section's landing page: the `overview` panel's overview link (a
+     * `dropdown` panel's first link), the drawer group's first child and the
+     * footer group's linked heading. Its path marks the parent of current.
+     */
+    href?: string;
+    /** One line under the `overview` panel's overview link, in `--role-muted`. */
+    description?: string;
+    /**
+     * The section's pages: the `dropdown` list, the `overview` link groups
+     * (each link with its own `links`) or the `index` categories; the drawer
+     * group's child links; the footer group's links. A section with no links
+     * and an `href` is a plain bar link and a direct drawer link.
+     */
+    links: readonly SitemapLink[];
+    /**
+     * The desktop panel. Default: `overview` when the section has a
+     * `description` or a `promo`, or a link carries its own `links`; else
+     * `dropdown` (see `sitemapPanel`).
+     */
+    panel?: SitemapPanel;
+    /** The `overview` panel's optional promo card (≤ 1 per panel). */
+    promo?: SitemapPromo;
+    /** The `index` panel's featured bar: one link across both panes, at the foot. */
+    featured?: SitemapLink;
+}
+/** The navigation data: the top-level sections, in bar order. */
+export type Sitemap = readonly SitemapSection[];
+/** The panel a section opens: its `panel`, else the default that its content implies. */
+export declare function sitemapPanel(section: SitemapSection): SitemapPanel;
+/**
+ * The path of a site-relative (or absolute http) href, without query, hash
+ * or trailing slash; `null` for fragments and other protocols.
+ */
+export declare function toPath(href: string | null | undefined): string | null;
+/** `true` when `href` is the current page: its path equals `currentPath`. */
+export declare function isCurrentPath(href: string | null | undefined, currentPath: string | null | undefined): boolean;
+/**
+ * `true` when the page lies in the section at `sectionHref`: the section's
+ * path is a whole-segment prefix of `currentPath` (the section page itself
+ * included). The home path `/` matches only itself.
+ */
+export declare function isInSection(sectionHref: string | null | undefined, currentPath: string | null | undefined): boolean;
+/** Whether any link among `children` (elements with an `href`) is the current page or lies under it. */
+export declare function holdsCurrent(children: React.ReactNode, currentPath: string | undefined): boolean;
+/** Wraps each child in a list item with `className`; empty children are dropped. */
+export declare function listItems(children: React.ReactNode, className: string): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>[] | null | undefined;
+//# sourceMappingURL=navigation.d.ts.map

package/utils/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,kGAAkG;IAClG,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;CAC/B;AAED,uCAAuC;AACvC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,qGAAqG;AACrG,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAA;AAE5D;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,kEAAkE;IAClE,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,WAAW,CAAA;CACvB;AAED,iEAAiE;AACjE,MAAM,MAAM,OAAO,GAAG,SAAS,cAAc,EAAE,CAAA;AAE/C,yFAAyF;AACzF,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,YAAY,CAIlE;AAID;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAWrE;AAED,6EAA6E;AAC7E,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAIT;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAMT;AAED,wGAAwG;AACxG,wBAAgB,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAQhG;AAED,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM;;qCAIrE"}

package/utils/navigation.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+/** The panel a section opens: its `panel`, else the default that its content implies. */
+export function sitemapPanel(section) {
+    if (section.panel != null)
+        return section.panel;
+    const tiered = section.links.some((link) => link.links != null && link.links.length > 0);
+    return tiered || section.description != null || section.promo != null ? 'overview' : 'dropdown';
+}
+/* ── Current by URL path [D182]: the Navigation Menu, Navigation Bar and drawer ── */
+/**
+ * The path of a site-relative (or absolute http) href, without query, hash
+ * or trailing slash; `null` for fragments and other protocols.
+ */
+export function toPath(href) {
+    if (!href || href.startsWith('#'))
+        return null;
+    let url;
+    try {
+        url = new URL(href, 'http://localhost/');
+    }
+    catch {
+        return null;
+    }
+    if (url.protocol !== 'http:' && url.protocol !== 'https:')
+        return null;
+    const trimmed = url.pathname.replace(/\/+$/, '');
+    return trimmed === '' ? '/' : trimmed;
+}
+/** `true` when `href` is the current page: its path equals `currentPath`. */
+export function isCurrentPath(href, currentPath) {
+    const target = toPath(href);
+    const current = toPath(currentPath);
+    return target !== null && target === current;
+}
+/**
+ * `true` when the page lies in the section at `sectionHref`: the section's
+ * path is a whole-segment prefix of `currentPath` (the section page itself
+ * included). The home path `/` matches only itself.
+ */
+export function isInSection(sectionHref, currentPath) {
+    const section = toPath(sectionHref);
+    const current = toPath(currentPath);
+    if (section === null || current === null)
+        return false;
+    if (section === '/')
+        return current === '/';
+    return current === section || current.startsWith(`${section}/`);
+}
+/** Whether any link among `children` (elements with an `href`) is the current page or lies under it. */
+export function holdsCurrent(children, currentPath) {
+    let found = false;
+    React.Children.forEach(children, (child) => {
+        if (found || !React.isValidElement(child))
+            return;
+        const href = child.props.href;
+        if (typeof href === 'string' && isInSection(href, currentPath))
+            found = true;
+    });
+    return found;
+}
+/** Wraps each child in a list item with `className`; empty children are dropped. */
+export function listItems(children, className) {
+    return React.Children.map(children, (child) => child == null || child === false ? null : React.createElement('li', { className }, child));
+}
+//# sourceMappingURL=navigation.js.map

package/utils/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgG9B,yFAAyF;AACzF,MAAM,UAAU,YAAY,CAAC,OAAuB;IAClD,IAAI,OAAO,CAAC,KAAK,IAAI,IAAI;QAAE,OAAO,OAAO,CAAC,KAAK,CAAA;IAC/C,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IACxF,OAAO,MAAM,IAAI,OAAO,CAAC,WAAW,IAAI,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAA;AACjG,CAAC;AAED,sFAAsF;AAEtF;;;GAGG;AACH,MAAM,UAAU,MAAM,CAAC,IAA+B;IACpD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAA;IAC9C,IAAI,GAAQ,CAAA;IACZ,IAAI,CAAC;QACH,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAA;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAA;IACb,CAAC;IACD,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IACtE,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAChD,OAAO,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA;AACvC,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,aAAa,CAC3B,IAA+B,EAC/B,WAAsC;IAEtC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IACnC,OAAO,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,OAAO,CAAA;AAC9C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,WAAsC,EACtC,WAAsC;IAEtC,MAAM,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IACnC,MAAM,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IACnC,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IACtD,IAAI,OAAO,KAAK,GAAG;QAAE,OAAO,OAAO,KAAK,GAAG,CAAA;IAC3C,OAAO,OAAO,KAAK,OAAO,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,OAAO,GAAG,CAAC,CAAA;AACjE,CAAC;AAED,wGAAwG;AACxG,MAAM,UAAU,YAAY,CAAC,QAAyB,EAAE,WAA+B;IACrF,IAAI,KAAK,GAAG,KAAK,CAAA;IACjB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,CAAqB,KAAK,CAAC;YAAE,OAAM;QACrE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;QAC7B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC;YAAE,KAAK,GAAG,IAAI,CAAA;IAC9E,CAAC,CAAC,CAAA;IACF,OAAO,KAAK,CAAA;AACd,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,SAAS,CAAC,QAAyB,EAAE,SAAiB;IACpE,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAC5C,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,CAC1F,CAAA;AACH,CAAC"}

package/utils/ornament.module.css

@@ -0,0 +1,224 @@
+/*
+ * Ornaments and markers (§1.5.16; geometry §4.7; usage §8.4, §8.10, §8.11,
+ * §12.11, §12.14, §12.16). Shared classes for inline, aria-hidden SVG: the
+ * `marker-*` shapes, the index and rank numerals, `ornament-trail`, the
+ * dashed trail, and `ornament-blob`, the blob mount (§6.6).
+ * utils/Ornament.tsx draws the SVG geometry and adds these
+ * classes; compose them into a module part in a top-level rule outside any
+ * @layer (Lightning CSS rejects nested composes):
+ *   .marker { composes: markerOrigin from '../../utils/ornament.module.css'; }
+ *
+ * Color. Markers draw in currentColor, the role color of the line they end
+ * or mark (--role-accent on a trail; --primary12 on a timeline, which its
+ * host sets); `ornamentTrail` sets --role-accent itself, which resolves to
+ * --primary12 on the saturated fields [D14, D117]. The index marker names
+ * its --primary1 face directly (a face under ink, not a knockout) [D144].
+ *
+ * Geometry. Fixed pixel sizes from the --fgd-marker-* tokens, never scaled
+ * with a figure or the viewport (P9). Open shapes at --border-size-1-5 with
+ * round caps and joins; `marker-current` is the one solid mark, a data mark
+ * a legend defines [D58]. A dash stops --size-px-1 short of a marker and
+ * restarts past it, so no partial dash touches one (§4.7.5).
+ *
+ * The blob mount is the exception to one ink: two flat secondary discs
+ * (brand marks [D117]) behind a mark in the front disc's contrast ink.
+ *
+ * Print: markers and the trail are SVG foreground and print black through
+ * the remap; the trail prints at 0.75 pt with 3 / 2.5 pt dashes [D142],
+ * markers kept (§4.7.1). The blob's discs are hidden (the remap would turn
+ * them black) and its mark prints black [D103, D126]. Forced colors:
+ * currentColor takes the system ink; the blob's discs drop.
+ */
+
+/* Composition sits in top-level rules, outside the layers. */
+.markerIndex {
+  composes: typeLabel from './type.module.css';
+}
+
+.markerRank {
+  composes: typeBodyUi typeMuted from './type.module.css';
+}
+
+/* The trail's path: line-dashed, --border-size-2, 5 on / 4 off, round caps [D66]. */
+.ornamentTrailPath {
+  composes: lineDashed from './line.module.css';
+}
+
+@layer base {
+  /*
+   * marker-origin (open circle), marker-waypoint (stroked X), marker-terminal
+   * (open triangle pointing along the path, never a chevron) and
+   * marker-current (solid dot), each at its token size.
+   */
+  .markerOrigin,
+  .markerWaypoint,
+  .markerTerminal,
+  .markerCurrent {
+    display: block;
+    flex: none;
+    inline-size: var(--marker-size);
+    block-size: var(--marker-size);
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .markerOrigin {
+    --marker-size: var(--fgd-marker-trail);
+  }
+
+  .markerWaypoint {
+    --marker-size: var(--fgd-marker-waypoint);
+  }
+
+  .markerTerminal {
+    --marker-size: var(--fgd-arrow-head);
+  }
+
+  .markerCurrent {
+    --marker-size: var(--fgd-marker-current);
+
+    fill: currentColor;
+    stroke: none;
+  }
+
+  /*
+   * marker-index (§4.7.5, §8.10): a --size-px-5 circle, a --primary1 face
+   * with a --border-size-1-5 --primary12 edge, holding a zero-padded numeral
+   * in type-label (--font-weight-6). Numbered map and figure callouts keyed
+   * to a list; never an unstroked colored disc.
+   */
+  .markerIndex {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--size-px-5);
+    block-size: var(--size-px-5);
+    border: var(--border-size-1-5) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+    line-height: 1;
+  }
+
+  /*
+   * The rank numeral (§8.4 ranked, §12.11): type-body-ui in data numerals,
+   * --role-muted (the one ink on forest and the saturated fields), no
+   * period, end-aligned in a 2.5ch column.
+   */
+  .markerRank {
+    display: inline-block;
+    flex: none;
+    min-inline-size: 2.5ch;
+    font-variant-numeric: var(--fgd-numerals-data);
+    text-align: end;
+  }
+
+  /*
+   * ornament-trail (§4.7.1): a freehand line-dashed path with its markers,
+   * 110–220 × 45–90 px, decorative. At most one per band and two per page;
+   * never with an eyebrow rule or on a haloed lockup [D38]; it stops
+   * --fgd-space-halo short of a label and hides rather than touch type.
+   */
+  .ornamentTrail {
+    display: block;
+    flex: none;
+    overflow: visible;
+    color: var(--role-accent);
+    fill: none;
+  }
+
+  .ornamentTrailPath {
+    fill: none;
+    stroke: currentColor;
+  }
+
+  /*
+   * ornament-blob, the blob mount (§6.6, §1.5.16): a hand-cut disc at a
+   * fixed 136 × 130 px, flat and opaque in --secondary9, over an under-disc
+   * 4% larger and turned 8° in --secondary7 (fill.mount.under), which shows
+   * only 2–6 px crescents. The mark sits centred on the front disc in its
+   * contrast ink, --secondary-contrast (§1.4.7), about 42% of the disc's
+   * width. The discs are brand marks, exempt from 3:1 [D117]; on a dark
+   * ground the under-disc reads darker than the front disc. Once per page:
+   * a logo, block icon or stat numeral. The only color layer allowed behind
+   * a drawing [D77].
+   */
+  .ornamentBlob {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    vertical-align: middle;
+  }
+
+  .blobDiscs {
+    display: block;
+    grid-area: 1 / 1;
+    overflow: visible;
+  }
+
+  .blobUnder {
+    fill: var(--secondary7);
+  }
+
+  .blobFront {
+    fill: var(--secondary9);
+  }
+
+  .blobMark {
+    display: grid;
+    grid-area: 1 / 1;
+    place-items: center;
+    color: var(--secondary-contrast);
+  }
+
+  /* Forced colors flatten fills: the discs drop and the mark takes the system ink (§4.11). */
+  @media (forced-colors: active) {
+    .blobDiscs {
+      display: none;
+    }
+  }
+
+  /* The trail's own markers, drawn inside its SVG: solid strokes, never the path's dashes. */
+  .trailMarker {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--border-size-1-5);
+    stroke-dasharray: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+
+@layer variants {
+  /* On a timeline, origin and terminal take --fgd-marker-timeline (8 px) (§4.7.2). */
+  .markerTimeline {
+    --marker-size: var(--fgd-marker-timeline);
+  }
+
+  /* Where the mount is omitted (forest, the solid fields), the bare mark takes the scope's one ink. */
+  .blobOmitted .blobMark {
+    color: inherit;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The trail prints black at 0.75 pt with 3 / 2.5 pt dashes, markers kept [D142]. */
+    .ornamentTrailPath {
+      stroke-width: var(--fgd-print-trail-stroke);
+      stroke-dasharray: var(--fgd-print-trail-dash) var(--fgd-print-trail-gap);
+      stroke-linecap: butt;
+    }
+
+    /* The blob's discs drop; the mark stays, black through the remap [D103, D126]. */
+    .blobDiscs {
+      display: none;
+    }
+  }
+}

package/utils/overlay.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type PrimaryScale, type RadixScale } from './scales';
+/** The attributes every overlay root writes: a `white` scope that follows the page mode [D139]. */
+export declare const overlayAttributes: import("./scope").ScopeAttributes;
+/**
+ * The popup's color axes: the explicit props, else the overlay preset's
+ * defaults. Computed, never CVA defaults, so the classes mark a new scope
+ * root the way Ground's do [D133].
+ */
+export declare function overlayScales(primary: PrimaryScale | null | undefined, secondary: RadixScale | null | undefined): {
+    primary: PrimaryScale;
+    secondary: RadixScale;
+};
+/**
+ * The overlay scope's action scale class (the white preset's amber), so a
+ * solid Button inside a popup takes the overlay's action, not the root's.
+ * Add it to the popup root beside its CVA classes.
+ */
+export declare const overlayActionClassName: string;
+/** The overlay preset's default scale classes (primary, secondary, action), for a popup root without color props. */
+export declare const overlayScaleClassName: string;
+/**
+ * Provides the overlay scope to the popup's children. React context reaches
+ * through portals, so without it a Button inside a popup opened from a
+ * forest field would write forest's scope attributes.
+ */
+export declare function OverlayScope({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * The anchored-panel offset from the trigger, `--fgd-popup-offset` (8 px,
+ * §9.1, §10.1). Base UI positions in JavaScript, so the token is restated.
+ */
+export declare const OVERLAY_SIDE_OFFSET = 8;
+/**
+ * Viewport clearance before a panel flips or shifts: `--fgd-popup-clearance`
+ * (16 px, the base `--fgd-space-margin`, §10.1).
+ */
+export declare const OVERLAY_COLLISION_PADDING = 16;
+/**
+ * The anchored-panel tail on a 12 × 8 box (--size-px-2-5 wide): 6 px of
+ * triangle plus the 2 px band that overlaps the panel's frame, filled with
+ * the face so the frame opens under the tail, and the two slanted edges at
+ * the frame's --border-size-2. The host module sets fill and stroke.
+ */
+export declare function OverlayTail({ className }: {
+    className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=overlay.d.ts.map

package/utils/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/utils/overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAA;AAiBjB,mGAAmG;AACnG,eAAO,MAAM,iBAAiB,mCAAkC,CAAA;AAIhE;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACxC,SAAS,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GACvC;IAAE,OAAO,EAAE,YAAY,CAAC;IAAC,SAAS,EAAE,UAAU,CAAA;CAAE,CAKlD;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QACuE,CAAA;AAE1G,qHAAqH;AACrH,eAAO,MAAM,qBAAqB,QAIvB,CAAA;AAEX;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAExE;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,IAAkB,CAAA;AAElD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,KAAqB,CAAA;AAE3D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAOhE"}