@fairgarden/design 0.1.0-0.canary.0

package/foundations/icon/Icon.js

@@ -0,0 +1,54 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { iconPathsByWeight, iconTierWeights, iconViewBox, } from '../../icons/paths';
+import styles from './icon.module.css';
+/**
+ * Icon classes (§6.10) [D166]. `size` is the Material Symbols tier:
+ * `inline` 16 px (`--size-px-3`), `tag` 20 px (`--size-px-4`), `block` 36 px
+ * (`--fgd-size-icon-block`). The icon has no color axes: it is filled in
+ * `currentColor` and takes its part's ink role.
+ */
+export const icon = cva(styles.base, {
+    variants: {
+        size: {
+            inline: styles.inline,
+            tag: styles.tag,
+            block: styles.block,
+        },
+        directional: {
+            true: styles.directional,
+        },
+    },
+    defaultVariants: {
+        size: 'inline',
+        directional: false,
+    },
+});
+/** Glyphs that point along the inline axis, mirrored in right-to-left layouts (§6.10). */
+const directionalIcons = new Set([
+    'arrow_forward',
+    'chevron_left',
+    'chevron_right',
+]);
+/**
+ * A Material Symbols Rounded UI icon, drawn as inline SVG in `currentColor`
+ * (FILL 0) at its tier's calibrated weight. The one FILL 1 instance,
+ * `circle`, is a selection mark only and must always travel with a second
+ * cue (a bar, a weight change, an edge change or a word): state is never
+ * shown by fill alone [D166].
+ */
+export function Icon({ name, label, size, directional, weight = 'rest', className, ...rest }) {
+    const a11y = label
+        ? { role: 'img', 'aria-label': label }
+        : { 'aria-hidden': true };
+    const weights = iconTierWeights[size ?? 'inline'];
+    return (React.createElement("svg", { viewBox: iconViewBox, fill: "currentColor", focusable: "false", ...a11y, ...rest, className: icon({
+            size,
+            directional: directional ?? directionalIcons.has(name),
+            className,
+        }) }, weight === 'interactive' ? (React.createElement(React.Fragment, null,
+        React.createElement("path", { className: styles.rest, d: iconPathsByWeight[weights.rest][name] }),
+        React.createElement("path", { className: styles.emphasis, d: iconPathsByWeight[weights.emphasis][name] }))) : (React.createElement("path", { d: iconPathsByWeight[weights[weight]][name] }))));
+}
+//# sourceMappingURL=Icon.js.map

package/foundations/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/foundations/icon/Icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM,CAAC,WAAW;SACzB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAA;AAWF,0FAA0F;AAC1F,MAAM,gBAAgB,GAA0B,IAAI,GAAG,CAAW;IAChE,eAAe;IACf,cAAc;IACd,eAAe;CAChB,CAAC,CAAA;AAyBF;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,GAAG,MAAM,EACf,SAAS,EACT,GAAG,IAAI,EACG;IACV,MAAM,IAAI,GAAG,KAAK;QAChB,CAAC,CAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAY;QACjD,CAAC,CAAE,EAAE,aAAa,EAAE,IAAI,EAAY,CAAA;IACtC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAA;IAEjD,OAAO,CACL,6BACE,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,OAAO,KACb,IAAI,KACJ,IAAI,EACR,SAAS,EAAE,IAAI,CAAC;YACd,IAAI;YACJ,WAAW,EAAE,WAAW,IAAI,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC;YACtD,SAAS;SACV,CAAC,IAED,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,CAC1B;QACE,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAI,CACjF,CACJ,CAAC,CAAC,CAAC,CACF,8BAAM,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAI,CACtD,CACG,CACP,CAAA;AACH,CAAC"}

package/foundations/icon/icon.module.css

@@ -0,0 +1,69 @@
+/*
+ * Icon (§6.10, §1.5.12) [D166]. One Material Symbols Rounded instance per
+ * icon and weight, filled in currentColor, so it takes its part's ink role,
+ * follows the mode with no selector and prints black (12 / 15 / 27 pt = the
+ * px sizes at 0.75 pt per px, so no print rule is needed). The icon carries
+ * no color, mode or grade of its own, and never scales between tiers.
+ *
+ * Weight (§10.1 icon states). Each tier draws its calibrated rest weight;
+ * the emphasis instance is the next stroke tier's weight at the same size
+ * and optical size, never a larger glyph. An icon with
+ * weight="interactive" carries both paths and swaps to emphasis while its
+ * host is hovered or pressed. The host opts in by composing `iconHost` in a
+ * top-level rule (Lightning CSS rejects nested composes):
+ *   .base { composes: iconHost from '../icon/icon.module.css'; }
+ * or, from JS, by adding the exported `iconHost` class. Disabled and busy
+ * hosts keep the rest weight; focus rings the host, never the glyph.
+ */
+@layer base {
+  .base {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--icon-size);
+    block-size: var(--icon-size);
+    fill: currentColor;
+    vertical-align: middle;
+  }
+
+  /* An interactive icon's emphasis path waits for its host. */
+  .emphasis {
+    display: none;
+  }
+}
+
+@layer variants {
+  /* Tiers (§6.10): inline 16, tag 20, block 36. */
+  .inline {
+    --icon-size: var(--size-px-3);
+  }
+
+  .tag {
+    --icon-size: var(--size-px-4);
+  }
+
+  .block {
+    --icon-size: var(--fgd-size-icon-block);
+  }
+
+  /* Directional glyphs mirror in right-to-left layouts (§6.10, §1.3.6). */
+  .directional:dir(rtl) {
+    scale: -1 1;
+  }
+}
+
+@layer states {
+  /*
+   * Hover (not disabled, not busy) and press (:active, or data-pressed where
+   * Base UI sets it): the emphasis instance replaces the rest one. The press
+   * colors (the inverse pair) belong to the host [D84].
+   */
+  .iconHost:not([data-disabled], :disabled, [aria-busy='true']):is(:hover, :active, [data-pressed])
+    .rest {
+    display: none;
+  }
+
+  .iconHost:not([data-disabled], :disabled, [aria-busy='true']):is(:hover, :active, [data-pressed])
+    .emphasis {
+    display: inline;
+  }
+}

package/foundations/icon/iconHost.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The host class for `weight="interactive"` icons (§10.1 icon states). Add it
+ * to the element whose hover or press swaps the icon to its emphasis weight
+ * (a button, a cell, a link), or compose it in the host's module:
+ * `composes: iconHost from '../icon/icon.module.css'`. Kept out of the
+ * client module, so a server component reads the class name itself.
+ */
+export declare const iconHost: string;
+//# sourceMappingURL=iconHost.d.ts.map

package/foundations/icon/iconHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconHost.d.ts","sourceRoot":"","sources":["../../src/foundations/icon/iconHost.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAwB,CAAA"}

package/foundations/icon/iconHost.js

@@ -0,0 +1,10 @@
+import styles from './icon.module.css';
+/**
+ * The host class for `weight="interactive"` icons (§10.1 icon states). Add it
+ * to the element whose hover or press swaps the icon to its emphasis weight
+ * (a button, a cell, a link), or compose it in the host's module:
+ * `composes: iconHost from '../icon/icon.module.css'`. Kept out of the
+ * client module, so a server component reads the class name itself.
+ */
+export const iconHost = styles.iconHost;
+//# sourceMappingURL=iconHost.js.map

package/foundations/icon/iconHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconHost.js","sourceRoot":"","sources":["../../src/foundations/icon/iconHost.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAW,MAAM,CAAC,QAAQ,CAAA"}

package/foundations/icon/index.d.ts

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

package/foundations/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}

package/foundations/icon/index.js

@@ -0,0 +1,3 @@
+export * from './Icon';
+export * from './iconHost';
+//# sourceMappingURL=index.js.map

package/foundations/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/foundations/icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}

package/foundations/separator/Separator.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Separator (§9.12). `variant` names the line by role and style, within what
+ * §4.2 allows a separator: solid `rule` (default, `--role-rule`) and
+ * `hairline` (`--role-hairline`), `dotted` (relation subdivisions only),
+ * `doubleHair` (totals, running headers) and `ruleDot` (the rule–dot–rule
+ * thematic break). No dashed value: dashes never divide [D35]. Orientation is
+ * Base UI's own prop. Color axes inherit the host's scope [D133].
+ */
+export declare const separator: (props?: ({
+    variant?: "dotted" | "hairline" | "rule" | "doubleHair" | "ruleDot" | null | undefined;
+    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;
+export type SeparatorVariants = VariantProps<typeof separator>;
+export type SeparatorVariant = NonNullable<SeparatorVariants['variant']>;
+/** Props for Separator: Base UI Separator props (including `orientation`) plus the variant and color axes. */
+export interface SeparatorProps extends BaseSeparator.Props, SeparatorVariants {
+    /**
+     * The line by role: `rule` (default) in `--role-rule`, a division the
+     * reader must find; `hairline` in `--role-hairline`, where whitespace also
+     * carries structure; `dotted` for relation subdivisions only; `doubleHair`
+     * for totals and running headers; `ruleDot` for a thematic break
+     * (horizontal only).
+     */
+    variant?: SeparatorVariants['variant'];
+    /**
+     * Primary Radix scale: the line color. Never defaulted; omitted, it
+     * inherits the host's scope [D133].
+     */
+    primary?: SeparatorVariants['primary'];
+    /**
+     * Secondary Radix scale, accepted for the shared color contract; no
+     * separator part draws in an accent. Never defaulted.
+     */
+    secondary?: SeparatorVariants['secondary'];
+}
+/**
+ * A separator announced to assistive technology (Base UI). Use it where the
+ * grouping would otherwise be unclear; typographic separators (· • | ›) are
+ * text, composed from this module's `glyph` / `glyphInk` parts by the host.
+ * `ruleDot` is horizontal only.
+ */
+export declare function Separator(props: SeparatorProps): React.JSX.Element;
+//# sourceMappingURL=Separator.d.ts.map

package/foundations/separator/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/foundations/separator/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;;;;8EAepB,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAC9D,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAA;AAGxE,8GAA8G;AAC9G,MAAM,WAAW,cAAe,SAAQ,aAAa,CAAC,KAAK,EAAE,iBAAiB;IAC5E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC3C;AA8BD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAe9C"}

package/foundations/separator/Separator.js

@@ -0,0 +1,62 @@
+'use client';
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { cva } from 'class-variance-authority';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './separator.module.css';
+/**
+ * Separator (§9.12). `variant` names the line by role and style, within what
+ * §4.2 allows a separator: solid `rule` (default, `--role-rule`) and
+ * `hairline` (`--role-hairline`), `dotted` (relation subdivisions only),
+ * `doubleHair` (totals, running headers) and `ruleDot` (the rule–dot–rule
+ * thematic break). No dashed value: dashes never divide [D35]. Orientation is
+ * Base UI's own prop. Color axes inherit the host's scope [D133].
+ */
+export const separator = cva(styles.base, {
+    variants: {
+        variant: {
+            rule: styles.rule,
+            hairline: styles.hairline,
+            dotted: styles.dotted,
+            doubleHair: styles.doubleHair,
+            ruleDot: styles.ruleDot,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'rule',
+    },
+});
+/** The `dotted` run: true round dots as zero-length round-capped dashes (§4.8.3). */
+function DotRun({ orientation }) {
+    const vertical = orientation === 'vertical';
+    return (React.createElement("svg", { className: styles.dots, "aria-hidden": "true", focusable: "false" },
+        React.createElement("line", { x1: vertical ? '50%' : '0', y1: vertical ? '0' : '50%', x2: vertical ? '50%' : '100%', y2: vertical ? '100%' : '50%' })));
+}
+/** `ornament-rule-dot` (§4.8.2): hairline, solid dot, hairline. */
+function RuleDot() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.segment }),
+        React.createElement("svg", { className: styles.dot, viewBox: "0 0 2 2", "aria-hidden": "true", focusable: "false" },
+            React.createElement("circle", { cx: "1", cy: "1", r: "1" })),
+        React.createElement("span", { className: styles.segment })));
+}
+/**
+ * A separator announced to assistive technology (Base UI). Use it where the
+ * grouping would otherwise be unclear; typographic separators (· • | ›) are
+ * text, composed from this module's `glyph` / `glyphInk` parts by the host.
+ * `ruleDot` is horizontal only.
+ */
+export function Separator(props) {
+    const { variant, primary, secondary, className, orientation = 'horizontal', ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedVariant = variant ?? 'rule';
+    const classes = resolveClassName(className, (extra) => separator({ variant, primary, secondary, className: extra }));
+    return (React.createElement(BaseSeparator, { ...scope, ...rest, orientation: orientation, className: classes },
+        resolvedVariant === 'dotted' ? React.createElement(DotRun, { orientation: orientation }) : null,
+        resolvedVariant === 'ruleDot' ? React.createElement(RuleDot, null) : null));
+}
+//# sourceMappingURL=Separator.js.map

package/foundations/separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../src/foundations/separator/Separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACxC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB;QACD,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AA4BF,qFAAqF;AACrF,SAAS,MAAM,CAAC,EAAE,WAAW,EAAgC;IAC3D,MAAM,QAAQ,GAAG,WAAW,KAAK,UAAU,CAAA;IAC3C,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO;QAC/D,8BACE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAC1B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC7B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAC7B,CACE,CACP,CAAA;AACH,CAAC;AAED,mEAAmE;AACnE,SAAS,OAAO;IACd,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QACnC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,EAAC,SAAS,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;YAChF,gCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CAC1B;QACN,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAClC,CACJ,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAG,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC7F,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,eAAe,GAAqB,OAAO,IAAI,MAAM,CAAA;IAE3D,MAAM,OAAO,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CACpD,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC7D,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,OAAK,KAAK,KAAM,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;QAC7E,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI;QAC1E,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,CAAC,IAAI,CACrC,CACjB,CAAA;AACH,CAAC"}

package/foundations/separator/index.d.ts

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

package/foundations/separator/index.d.ts.map

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

package/foundations/separator/index.js

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

package/foundations/separator/index.js.map

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

package/foundations/separator/separator.module.css

@@ -0,0 +1,174 @@
+/*
+ * Separator (§9.12; geometry and meaning §4). CVA function `separator` in
+ * Separator.tsx. Parts: base (the line), dots (the SVG dot run of `dotted`),
+ * segment and dot (the rule–dot–rule ornament), glyph / glyphInk (typographic
+ * separators, composed by host modules). Every separator is --border-size-1;
+ * solid = boundary, dotted = relation, double = total; never dashed [D35, D66].
+ *
+ * Variant classes compose one line style and publish local dimensions; the
+ * data-orientation rules (states layer) consume them for the edge and axis.
+ */
+
+/* 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. */
+.segment {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --separator-thickness: 0;
+    --separator-edge-start: var(--border-size-1);
+    --separator-edge-end: 0;
+    position: relative;
+    flex: none;
+    margin: 0;
+    border-color: currentColor;
+    color: var(--role-rule);
+  }
+
+  /*
+   * True round dots in inline SVG (foreground, so they print) [D36, D68]:
+   * zero-length dashes with round caps, geometry inherited from lineDottedFine.
+   * The offset puts the first dot's centre half a dot in, and the run is sized
+   * below to a whole number of pitches, so it starts and ends on a dot (§4.8.3).
+   */
+  .dots {
+    position: absolute;
+    inset: 0;
+    display: block;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-dashoffset: calc(var(--fgd-dot-fine) / -2);
+  }
+
+  /* Rule–dot–rule (ornament-rule-dot, §4.8.2): two hairlines and a solid dot. */
+  .segment {
+    flex: 1 1 0;
+    border-color: currentColor;
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+  }
+
+  .dot {
+    flex: none;
+    inline-size: var(--fgd-ornament-dot);
+    block-size: var(--fgd-ornament-dot);
+    margin-inline: var(--fgd-ornament-dot-gap);
+    fill: currentColor;
+  }
+
+  /* Typographic separators (· › and • |), composed by host modules. */
+  .glyph {
+    color: var(--role-muted);
+  }
+
+  .glyphInk {
+    color: var(--primary12);
+  }
+}
+
+.rule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.hairline {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.dotted {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+.doubleHair {
+  composes: lineDoubleHair from '../../utils/line.module.css';
+}
+
+@layer variants {
+  /* Solid, where the division must be found (default). */
+  .rule {
+    color: var(--role-rule);
+  }
+
+  /* Solid, with whitespace support only [D17]. */
+  .hairline {
+    color: var(--role-hairline);
+  }
+
+  /* Relation only: subdivisions inside solid-bounded groups, never the only
+     boundary [D66]. The SVG draws it; the box carries no border. */
+  .dotted {
+    --separator-thickness: var(--fgd-dot-fine);
+    --separator-edge-start: 0;
+    color: var(--role-rule);
+  }
+
+  /* Totals and running-header bands: 1 + 1 px, --fgd-double-hair-gap apart. */
+  .doubleHair {
+    --separator-thickness: var(--fgd-double-hair-gap);
+    --separator-edge-end: var(--border-size-1);
+    color: var(--role-rule);
+  }
+
+  /* Thematic break: 35% of the text column, max --size-px-13, centred.
+     Ornaments in reading bands take --primary12 (§4.8.2). Horizontal only. */
+  .ruleDot {
+    --separator-thickness: var(--fgd-ornament-dot);
+    --separator-edge-start: 0;
+    display: flex;
+    align-items: center;
+    inline-size: min(35%, var(--size-px-13));
+    margin-inline: auto;
+    color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* data-orientation picks the axis and the edge that draws the line. */
+  .base[data-orientation='horizontal'] {
+    box-sizing: content-box;
+    block-size: var(--separator-thickness);
+    border-width: 0;
+    border-block-width: var(--separator-edge-start) var(--separator-edge-end);
+  }
+
+  .base[data-orientation='vertical'] {
+    box-sizing: content-box;
+    align-self: stretch;
+    inline-size: var(--separator-thickness);
+    border-width: 0;
+    border-inline-width: var(--separator-edge-start) var(--separator-edge-end);
+  }
+
+  /* Whole pitches plus one dot, centred; 100% where round() is unsupported. */
+  .base[data-orientation='horizontal'] .dots {
+    inline-size: 100%;
+    inline-size: calc(
+      round(down, 100% - var(--fgd-dot-fine), var(--fgd-dot-fine-pitch)) + var(--fgd-dot-fine)
+    );
+    block-size: 100%;
+    margin-inline: auto;
+  }
+
+  .base[data-orientation='vertical'] .dots {
+    inline-size: 100%;
+    block-size: 100%;
+    block-size: calc(
+      round(down, 100% - var(--fgd-dot-fine), var(--fgd-dot-fine-pitch)) + var(--fgd-dot-fine)
+    );
+    margin-block: auto;
+  }
+}
+
+@layer print {
+  @media print {
+    /* A rule is never stranded at the top or foot of a page; lines print
+       black at 0.75 pt through the global remap (§9.12, §4.12). */
+    .base[data-orientation='horizontal'] {
+      break-before: avoid;
+      break-after: avoid;
+    }
+  }
+}

package/foundations/sticker/Sticker.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sticker: (props?: ({
+    size?: "s" | "l" | null | undefined;
+    bare?: boolean | null | undefined;
+    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 StickerVariants = VariantProps<typeof sticker>;
+/** The two native sticker sizes (§6.2): S 152 px, L 312 px. */
+export type StickerSize = 's' | 'l';
+/** Props for Sticker: `span` props, `render`, the art, the size, `bare` and the color axes. */
+export type StickerProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    /**
+     * The asset's viewBox, drawn at its native size: `0 0 152 152` for S,
+     * `0 0 312 312` for L (other aspect ratios keep the width).
+     */
+    viewBox: string;
+    /**
+     * The halo layer: the asset's pre-expanded path, 8 px (`--fgd-space-halo`)
+     * outside every part, merged into one silhouette with rounded concave
+     * bridges and no sharp outer corners. Never a runtime stroke, outline or
+     * blur. Filled `--primary1`; no edge, ever. Ignored with `bare`.
+     */
+    halo?: React.ReactNode;
+    /**
+     * The line art, stroked in `--role-heading` at the silhouette weight
+     * (`--border-size-2-25` at S, `--border-size-2-75` at L), round caps and joins, no
+     * fill; give ink-spot parts `fill="currentColor"`, and wrap interior lines
+     * in `StickerDetail`. No text inside the art.
+     */
+    children: React.ReactNode;
+    /** `s` (default): `--fgd-size-art-s`, 152 px. `l`: `--fgd-size-art-l`, 312 px. */
+    size?: StickerSize;
+    /**
+     * The bare variant: no halo and no scope of its own; the art draws in the
+     * host ground's `--role-heading` with open counters. Never on a
+     * decorative pattern. Default `false`.
+     */
+    bare?: boolean;
+    /**
+     * Primary Radix scale: the halo's `--primary1` (the sticker's own scope),
+     * or, when bare, the host's. Override only with a pairing §2 verifies
+     * [D128]. Never defaulted.
+     */
+    primary?: StickerVariants['primary'];
+    /**
+     * Secondary Radix scale: the line's `--role-heading` (step 12). Override
+     * only with a verified pairing [D128]. Never defaulted.
+     */
+    secondary?: StickerVariants['secondary'];
+};
+/**
+ * A §6.5 sticker: pass the asset's `viewBox`, its pre-expanded `halo` path
+ * and its line art as children. It declares its own `white` scope, so the
+ * same asset looks identical on every ground within a mode: a face that
+ * follows the page mode on a page ground, a light island inside a field or
+ * the night band. In print the halo vanishes and the line prints black.
+ */
+export declare function Sticker(props: StickerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for StickerDetail: SVG group props. */
+export type StickerDetailProps = Omit<React.SVGProps<SVGGElement>, 'ref'>;
+/**
+ * Interior lines, one stroke step lighter than the silhouette
+ * (`--border-size-2` at S, `--border-size-2-25` at L): at most two weights per
+ * drawing, depth by weight, never tone (§6.2).
+ */
+export declare function StickerDetail(props: StickerDetailProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Sticker.d.ts.map

package/foundations/sticker/Sticker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker.d.ts","sourceRoot":"","sources":["../../src/foundations/sticker/Sticker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA+CjE,eAAO,MAAM,OAAO;;;;;8EAiBlB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AAEnD,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,CAAA;AAEnC,+FAA+F;AAC/F,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACzC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,0EAwD1C;AAED,gDAAgD;AAChD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,CAAA;AAEzE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAGtD"}