@fairgarden/design 0.1.0-alpha.0

package/components/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/components/Tag/Tag.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;AAEjE,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAoB7C,eAAO,MAAM,GAAG;;;8EAMd,CAAA;AAEF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AAE3C,2FAA2F;AAC3F,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACxD,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAA;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;CACrC,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,0EAgClC"}

package/components/Tag/Tag.js

@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../Icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './tag.module.css';
+/*
+ * Tag (§10.11): the topic tag, taxonomy with no container.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: tag.module.css; CVA function `tag`.
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: none; color axes: none.
+ * - Color fallback: the taxonomy scale, passed as `secondary`; omitted, it
+ *   inherits the scope.
+ * - States (linked tags only): `:hover` → the bare-text underline on the
+ *   label, --role-accent at --border-size-2, offset --size-px-1 [D181];
+ *   `:focus-visible` → ring around icon and label.
+ * - Parts: base, icon, label.
+ * - Scope: none. Container: none; inherits its context.
+ */
+export const tag = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A topic tag: an icon plus a caps label (`type-label` at weight 700,
+ * authored in sentence case; topic tags keep caps [D160]), with no
+ * container. Color sits on the icon only, never on the small label text.
+ * Pass `href` to link it to its topic.
+ */
+export function Tag(props) {
+    const { render, ref, className, href, icon, primary, secondary, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const glyph = icon == null ? null : typeof icon === 'string' ? (React.createElement(Icon, { name: icon, size: "tag", className: styles.icon })) : (React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon));
+    return useRender({
+        defaultTagName: href == null ? 'span' : 'a',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            ...(href == null ? null : { href }),
+            className: tag({ primary, secondary, className }),
+            children: (React.createElement(React.Fragment, null,
+                glyph,
+                React.createElement("span", { className: styles.label }, children))),
+        }, rest),
+    });
+}
+//# sourceMappingURL=Tag.js.map

package/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAClC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AA2BF;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,KAAe;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC3F,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,MAAM,KAAK,GACT,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/C,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,IAC7C,IAAI,CACA,CACR,CAAA;IAEH,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;QAC3C,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CACf;YACE,GAAG,KAAK;YACR,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,EAAE,IAAI,EAAmC,CAAC;YACrE,SAAS,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;YACjD,QAAQ,EAAE,CACR;gBACG,KAAK;gBACN,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CAC/C,CACJ;SACF,EACD,IAAI,CACL;KACF,CAAC,CAAA;AACJ,CAAC"}

package/components/Tag/index.d.ts

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

package/components/Tag/index.d.ts.map

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

package/components/Tag/index.js

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

package/components/Tag/index.js.map

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

package/components/Tag/tag.module.css

@@ -0,0 +1,99 @@
+/*
+ * Tag (§10.11): the topic tag. Parts: `base` (no container), `icon` (the
+ * subject symbol at the tag tier, the tag's only color, --role-accent) and
+ * `label` (caps, --primary12). Colors are role variables only.
+ */
+
+/* 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. Topic tags keep caps [D160]. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* No container: icon, --ds-space-12, label (LTA 11–12 px). */
+  .base {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-12);
+    max-inline-size: 100%;
+    color: var(--primary12);
+    text-decoration-line: none;
+    vertical-align: middle;
+  }
+
+  /* The subject symbol: tag tier (--size-px-4), filled in --role-accent. */
+  .icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    color: var(--role-accent);
+    fill: currentColor;
+  }
+
+  .icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    fill: currentColor;
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .label {
+    font-weight: var(--font-weight-7);
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* A linked tag's target reaches --ds-size-hit, extended invisibly (§9.1) [D43]. */
+  .base[href] {
+    position: relative;
+  }
+
+  .base[href]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: 100%;
+    block-size: var(--ds-size-hit);
+    min-inline-size: var(--ds-size-hit);
+    translate: -50% -50%;
+  }
+
+  @media (forced-colors: active) {
+    .icon {
+      color: CanvasText;
+    }
+  }
+
+  /* Hover transition [D181]: --ds-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .label {
+      transition-property: text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer states {
+  /*
+   * Linked tag hover: tag lists are bare text, so the label takes the
+   * bare-text underline, --role-accent at --border-size-2, offset
+   * --size-px-1 (§10.11) [D181].
+   */
+  .base[href]:hover .label {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: the ring around icon and label, keyboard only [D45]. */
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+    border-radius: var(--radius-1);
+  }
+}

package/components/Timeline/Timeline.d.ts

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from '../Link';
+export declare const timeline: (props?: ({
+    kind?: "trail" | "agenda" | "date-block" | null | undefined;
+    ongoing?: 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;
+/** Entry state classes (unmanaged element): the stage of a milestone. */
+export declare const timelineEntry: (props?: ({
+    stage?: "current" | "planned" | "past" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TimelineVariants = VariantProps<typeof timeline>;
+/** The three timeline builds (§12.14). */
+export type TimelineKind = 'trail' | 'agenda' | 'date-block';
+/** A milestone's stage: past and planned keep the waypoint X (told apart by words); current is "now". */
+export type TimelineStage = 'past' | 'current' | 'planned';
+/** The §4.7 marker set drawn on the spine. */
+export type TimelineMarker = 'origin' | 'waypoint' | 'terminal' | 'current';
+/** Props for Timeline: `section` props, `render`, the kind, `ongoing` and the color axes. */
+export type TimelineProps = useRender.ComponentProps<'section'> & {
+    /**
+     * `trail` (default): a straight dashed spine with the §4.7 markers
+     * (origin, waypoints, terminal, "now"). `agenda`: date heads, a scope
+     * caption and sessions led by the » marker. `date-block`: a stacked
+     * date block (month / day / weekday) in a fixed key column, no spine.
+     */
+    kind?: TimelineKind;
+    /**
+     * The timeline continues: the last entry keeps a waypoint and the
+     * terminal marker sits past it. Default `false`.
+     */
+    ongoing?: boolean;
+    /**
+     * Primary Radix scale: markers, date keys, titles and text. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: TimelineVariants['primary'];
+    /**
+     * Secondary Radix scale: the spine, the agenda's » markers
+     * (`--role-accent`), title-link underlines and the date heads on light
+     * grounds (`--role-heading`). Never defaulted.
+     */
+    secondary?: TimelineVariants['secondary'];
+};
+/**
+ * The timeline module: a `TimelineList` of `TimelineEntry`s (trail and
+ * date-block), or `TimelineDay`s holding a `TimelineDateHead`, a
+ * `TimelineScope` and a `TimelineList` of `TimelineSession`s (agenda). A
+ * `TimelineCaption` defines the current marker. Entries never alternate
+ * sides; the spine is always dashed [D174].
+ */
+export declare function Timeline(props: TimelineProps): React.JSX.Element;
+/** Props for TimelineList: `ol` props and `render`. */
+export type TimelineListProps = useRender.ComponentProps<'ol'>;
+/**
+ * The ordered entries (or an agenda day's sessions). On an ongoing trail it
+ * closes with the terminal marker past the last entry.
+ */
+export declare function TimelineList(props: TimelineListProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineEntry: list-item props, `render`, the stage, the date key and a marker override. */
+export type TimelineEntryProps = useRender.ComponentProps<'li'> & {
+    /**
+     * `planned` (default): waypoint X, and say "Planned" in the date key.
+     * `past`: waypoint X; the date (or "Past") carries it, never dimmed.
+     * `current`: the solid "now" dot, `aria-current="step"`, and its dated
+     * label ("Today, 22 Sep 2026") in words.
+     */
+    stage?: TimelineStage;
+    /**
+     * The date key: a `time` element (`type-data`), or a `TimelineDateStack`
+     * in the date-block kind. Above the title at base; a column left of the
+     * spine from 768 px of container.
+     */
+    date?: React.ReactNode;
+    /**
+     * Overrides the marker. By default the first entry draws the origin
+     * circle, the last the terminal triangle (unless the timeline is
+     * ongoing), the rest waypoint X's, and the current entry the "now" dot.
+     */
+    marker?: TimelineMarker;
+};
+/**
+ * One milestone: its date key, the spine with its marker, and the body
+ * (`TimelineTitle`, `TimelineText`). Entries never split across pages.
+ */
+export declare function TimelineEntry(props: TimelineEntryProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineTitle: heading props and `render` (default `<h3>`). */
+export type TimelineTitleProps = useRender.ComponentProps<'h3'>;
+/** The entry title: `type-itemhead` in `--primary12`, within the reading measure. Renders `<h3>`. */
+export declare function TimelineTitle(props: TimelineTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineTitleLink: Link props except `kind`, which is always `title`. */
+export type TimelineTitleLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * A linked entry's one link, inside `TimelineTitle`: a §9.3 title Link
+ * whose hit area stretches over the entry; the entry draws the ring.
+ */
+export declare function TimelineTitleLink(props: TimelineTitleLinkProps): React.JSX.Element;
+/** Props for TimelineText: `div` props and `render`. */
+export type TimelineTextProps = useRender.ComponentProps<'div'>;
+/** The entry text: `type-body-ui` in `--primary12`. Put long entries in a Collapsible. */
+export declare function TimelineText(props: TimelineTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineCaption: paragraph props and `render`. */
+export type TimelineCaptionProps = useRender.ComponentProps<'p'>;
+/**
+ * The legend line that defines the current marker, e.g. "● Today, 22 Sep
+ * 2026" (§8.11): `type-caption` in `--primary12`. In print, write it as
+ * "As of 22 Sep 2026".
+ */
+export declare function TimelineCaption(props: TimelineCaptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDateStack: `time` props, `render` and the three lines. */
+export type TimelineDateStackProps = Omit<useRender.ComponentProps<'time'>, 'children'> & {
+    /** The month, e.g. "Jul": `type-label` caps. */
+    month: React.ReactNode;
+    /** The day of the month: a large data numeral. */
+    day: React.ReactNode;
+    /** The weekday, e.g. "Sat": `type-label` caps. */
+    weekday?: React.ReactNode;
+};
+/** The date-block key (Sofar Sounds): MONTH / day / WEEKDAY, stacked. Pass `dateTime`. */
+export declare function TimelineDateStack(props: TimelineDateStackProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDay: `section` props and `render`. */
+export type TimelineDayProps = useRender.ComponentProps<'section'>;
+/** One agenda day: `TimelineDateHead`, `TimelineScope`, then a `TimelineList` of sessions. */
+export declare function TimelineDay(props: TimelineDayProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDateHead: heading props and `render` (default `<h3>`). */
+export type TimelineDateHeadProps = useRender.ComponentProps<'h3'>;
+/** The agenda date head: `type-itemhead` in `--role-heading` (a group head). Renders `<h3>`. */
+export declare function TimelineDateHead(props: TimelineDateHeadProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineScope: paragraph props and `render`. */
+export type TimelineScopeProps = useRender.ComponentProps<'p'>;
+/** The scope caption, "All times are Eastern.": the time zone, stated once. */
+export declare function TimelineScope(props: TimelineScopeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineSession: list-item props and `render`. */
+export type TimelineSessionProps = useRender.ComponentProps<'li'>;
+/**
+ * One agenda session, led by the » block marker in `--role-accent`:
+ * `TimelineSessionTitle`, an optional `TimelineMeta` ("Happening now",
+ * "Past") and a `TimelineDescription`.
+ */
+export declare function TimelineSession(props: TimelineSessionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineSessionTitle: heading props, `render` and the pipe-joined meta. */
+export type TimelineSessionTitleProps = useRender.ComponentProps<'h4'> & {
+    /**
+     * Fields joined into the title with the serif's own pipe: "Title | Format
+     * | Time". A no-break space precedes each pipe, so a pipe never starts a
+     * line; leave out empty fields.
+     */
+    meta?: React.ReactNode[];
+};
+/** The session title, `type-itemhead` in `--primary12`, with its meta pipe-joined. Renders `<h4>`. */
+export declare function TimelineSessionTitle(props: TimelineSessionTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineMeta: paragraph props and `render`. */
+export type TimelineMetaProps = useRender.ComponentProps<'p'>;
+/** A session's meta line: `type-caption` in `--primary12` ("Happening now", "Past"). */
+export declare function TimelineMeta(props: TimelineMetaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDescription: `div` props and `render`. */
+export type TimelineDescriptionProps = useRender.ComponentProps<'div'>;
+/** A session's description: `type-body-ui` in `--primary12`. */
+export declare function TimelineDescription(props: TimelineDescriptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Timeline.d.ts.map

package/components/Timeline/Timeline.d.ts.map

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

package/components/Timeline/Timeline.js

@@ -0,0 +1,314 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Link } from '../Link';
+import { Marker } from '../../utils/Ornament';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './timeline.module.css';
+/*
+ * Timeline & Agenda (§12.14): ordered milestones, or a dated agenda of
+ * sessions. Composed from an `ol` of entries (`time` + heading + text);
+ * agenda day groups are `section`s with a date heading. Markers and the
+ * spine are decorative SVG (`aria-hidden`); every state they show is also
+ * in words. §8.11 owns the method (spine, marker grammar, date keys).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: timeline.module.css; CVA functions `timeline` and
+ *   `timelineEntry`.
+ * - Axes: `kind` → trail | agenda | date-block → `trail`, `agenda`,
+ *   `dateBlock`; `ongoing` → `ongoing` (the terminal marker sits past the
+ *   last entry); `primary`, `secondary` → scales module classes.
+ *   `timelineEntry`: `stage` → past | current | planned (state classes on
+ *   an unmanaged element; default planned).
+ * - Compound variants: none.
+ * - Defaults: kind trail, ongoing false; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: the `stage` classes on `entry`, plus `aria-current="step"` on
+ *   the current entry; a linked entry's title Link (§9.3) owns hover and
+ *   press, and `entry:has(titleLink:focus-visible)` draws the ring around
+ *   the entry; long entries compose Collapsible (§10.13).
+ * - Parts: base, list, entry, dateKey, rail, spine (the SVG line in
+ *   `spineBox`; composes line-dashed, whose border fallback a line ignores),
+ *   marker (the box holding the shared §4.7 markers, utils/Ornament: origin,
+ *   waypoint, terminal or current at the timeline size), body, title,
+ *   titleLink, text, caption, dateStack (the date-block key: month, day,
+ *   weekday); agenda: day, dateHead, scope, session, sessionMarker,
+ *   sessionTitle, meta, description.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `timeline`; the entry
+ *   layout (date key, spine, entries) queries it. Baseline without
+ *   support: spine at the left margin, dates above titles, with viewport
+ *   fallbacks of the date key column from --md-n-above and the 3 / gutter
+ *   / 7 layout from --lg-n-above. Thresholds (§5.10.2): key 2/8 left of the
+ *   spine from 768; key 3, spine in the gutter, entries 7 from 1024 [D163].
+ */
+export const timeline = cva(styles.base, {
+    variants: {
+        kind: {
+            trail: styles.trail,
+            agenda: styles.agenda,
+            'date-block': styles.dateBlock,
+        },
+        ongoing: {
+            true: styles.ongoing,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'trail',
+        ongoing: false,
+    },
+});
+/** Entry state classes (unmanaged element): the stage of a milestone. */
+export const timelineEntry = cva(styles.entry, {
+    variants: {
+        stage: {
+            past: styles.past,
+            current: styles.current,
+            planned: styles.planned,
+        },
+    },
+    defaultVariants: {
+        stage: 'planned',
+    },
+});
+const TimelineContext = React.createContext({
+    kind: 'trail',
+    ongoing: false,
+});
+TimelineContext.displayName = 'TimelineContext';
+/**
+ * The timeline module: a `TimelineList` of `TimelineEntry`s (trail and
+ * date-block), or `TimelineDay`s holding a `TimelineDateHead`, a
+ * `TimelineScope` and a `TimelineList` of `TimelineSession`s (agenda). A
+ * `TimelineCaption` defines the current marker. Entries never alternate
+ * sides; the spine is always dashed [D174].
+ */
+export function Timeline(props) {
+    const { render, ref, className, kind = 'trail', ongoing = false, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const context = React.useMemo(() => ({ kind, ongoing }), [kind, ongoing]);
+    const element = useRender({
+        defaultTagName: 'section',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: timeline({ kind, ongoing, primary, secondary, className }),
+        }, rest),
+    });
+    return React.createElement(TimelineContext.Provider, { value: context }, element);
+}
+/**
+ * The ordered entries (or an agenda day's sessions). On an ongoing trail it
+ * closes with the terminal marker past the last entry.
+ */
+export function TimelineList(props) {
+    const { render, ref, className, children, ...rest } = props;
+    const { kind, ongoing } = React.useContext(TimelineContext);
+    return useRender({
+        defaultTagName: 'ol',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(styles.list, className),
+            children: (React.createElement(React.Fragment, null,
+                children,
+                kind === 'trail' && ongoing ? (React.createElement("li", { className: styles.end, "aria-hidden": "true" },
+                    React.createElement("span", { className: styles.rail },
+                        React.createElement(MarkerGlyph, { fixed: "terminal" })))) : null)),
+        }, rest),
+    });
+}
+/**
+ * One milestone: its date key, the spine with its marker, and the body
+ * (`TimelineTitle`, `TimelineText`). Entries never split across pages.
+ */
+export function TimelineEntry(props) {
+    const { render, ref, className, stage = 'planned', date, marker, children, ...rest } = props;
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({
+            'aria-current': stage === 'current' ? 'step' : undefined,
+            className: timelineEntry({ stage, className }),
+            children: (React.createElement(React.Fragment, null,
+                date != null ? React.createElement("div", { className: styles.dateKey }, date) : null,
+                React.createElement("span", { className: styles.rail, "aria-hidden": "true" },
+                    React.createElement(MarkerGlyph, { fixed: marker }),
+                    React.createElement("svg", { className: styles.spineBox, focusable: "false" },
+                        React.createElement("line", { className: styles.spine, x1: "50%", y1: "0", x2: "50%", y2: "100%" }))),
+                React.createElement("div", { className: styles.body }, children))),
+        }, rest),
+    });
+}
+/**
+ * The §4.7 markers at the timeline size (§1.5.16), from the shared ornament
+ * utilities: origin, an open circle at --ds-marker-timeline; waypoint, a
+ * stroked X at --ds-marker-waypoint; terminal, an open triangle at
+ * --ds-marker-timeline pointing along the spine; current, a solid dot at
+ * --ds-marker-current. Unfixed, CSS picks the shape from the entry's
+ * position and stage.
+ */
+function MarkerGlyph({ fixed }) {
+    const shape = (name, className) => fixed == null || fixed === name ? (React.createElement(Marker, { kind: name, size: "timeline", angle: 90, className: fixed === name ? `${className} ${styles.markerFixed}` : className })) : null;
+    return (React.createElement("span", { className: styles.marker, "aria-hidden": "true" },
+        shape('origin', styles.markerOrigin),
+        shape('waypoint', styles.markerWaypoint),
+        shape('terminal', styles.markerTerminal),
+        shape('current', styles.markerCurrent)));
+}
+/** The entry title: `type-itemhead` in `--primary12`, within the reading measure. Renders `<h3>`. */
+export function TimelineTitle(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.title, className) }, rest),
+    });
+}
+/**
+ * A linked entry's one link, inside `TimelineTitle`: a §9.3 title Link
+ * whose hit area stretches over the entry; the entry draws the ring.
+ */
+export function TimelineTitleLink(props) {
+    const { className, ...rest } = props;
+    return React.createElement(Link, { ...rest, kind: "title", className: cx(styles.titleLink, className) });
+}
+/** The entry text: `type-body-ui` in `--primary12`. Put long entries in a Collapsible. */
+export function TimelineText(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.text, className) }, rest),
+    });
+}
+/**
+ * The legend line that defines the current marker, e.g. "● Today, 22 Sep
+ * 2026" (§8.11): `type-caption` in `--primary12`. In print, write it as
+ * "As of 22 Sep 2026".
+ */
+export function TimelineCaption(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.caption, className) }, rest),
+    });
+}
+/** The date-block key (Sofar Sounds): MONTH / day / WEEKDAY, stacked. Pass `dateTime`. */
+export function TimelineDateStack(props) {
+    const { render, ref, className, month, day, weekday, ...rest } = props;
+    return useRender({
+        defaultTagName: 'time',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(styles.dateStack, className),
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: styles.dateMonth }, month),
+                React.createElement("span", { className: styles.dateDay }, day),
+                weekday != null ? React.createElement("span", { className: styles.dateWeekday }, weekday) : null)),
+        }, rest),
+    });
+}
+/** One agenda day: `TimelineDateHead`, `TimelineScope`, then a `TimelineList` of sessions. */
+export function TimelineDay(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'section',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.day, className) }, rest),
+    });
+}
+/** The agenda date head: `type-itemhead` in `--role-heading` (a group head). Renders `<h3>`. */
+export function TimelineDateHead(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.dateHead, className) }, rest),
+    });
+}
+/** The scope caption, "All times are Eastern.": the time zone, stated once. */
+export function TimelineScope(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.scope, className) }, rest),
+    });
+}
+/**
+ * One agenda session, led by the » block marker in `--role-accent`:
+ * `TimelineSessionTitle`, an optional `TimelineMeta` ("Happening now",
+ * "Past") and a `TimelineDescription`.
+ */
+export function TimelineSession(props) {
+    const { render, ref, className, children, ...rest } = props;
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(styles.session, className),
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("svg", { className: styles.sessionMarker, viewBox: "0 0 36 36", focusable: "false", "aria-hidden": "true" },
+                    React.createElement("path", { d: "M9 10l8 8-8 8M19 10l8 8-8 8", vectorEffect: "non-scaling-stroke" })),
+                React.createElement("div", { className: styles.sessionBody }, children))),
+        }, rest),
+    });
+}
+/** The session title, `type-itemhead` in `--primary12`, with its meta pipe-joined. Renders `<h4>`. */
+export function TimelineSessionTitle(props) {
+    const { render, ref, className, meta, children, ...rest } = props;
+    const fields = (meta ?? []).filter((field) => field != null && field !== false && field !== '');
+    return useRender({
+        defaultTagName: 'h4',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(styles.sessionTitle, className),
+            children: (React.createElement(React.Fragment, null,
+                children,
+                fields.map((field, index) => (React.createElement(React.Fragment, { key: index },
+                    ' | ',
+                    field))))),
+        }, rest),
+    });
+}
+/** A session's meta line: `type-caption` in `--primary12` ("Happening now", "Past"). */
+export function TimelineMeta(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.meta, className) }, rest),
+    });
+}
+/** A session's description: `type-body-ui` in `--primary12`. */
+export function TimelineDescription(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.description, className) }, rest),
+    });
+}
+//# sourceMappingURL=Timeline.js.map