@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/src/reveal.variants.ts

@@ -0,0 +1,43 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const reveal = tv({
+  base: [
+    "opacity-0 will-change-[opacity,transform]",
+    "[transform:translate3d(var(--reveal-x),var(--reveal-y),0)]",
+    "motion-reduce:!opacity-100 motion-reduce:!transform-none motion-reduce:transition-none",
+  ],
+  variants: {
+    direction: {
+      up: "[--reveal-x:0px] [--reveal-y:var(--reddb-spatial-inset-lg)]",
+      down: "[--reveal-x:0px] [--reveal-y:calc(-1*var(--reddb-spatial-inset-lg))]",
+      left: "[--reveal-x:calc(-1*var(--reddb-spatial-inset-lg))] [--reveal-y:0px]",
+      right: "[--reveal-x:var(--reddb-spatial-inset-lg)] [--reveal-y:0px]",
+      none: "[--reveal-x:0px] [--reveal-y:0px]",
+    },
+    path: {
+      css: "",
+      js: [
+        "transition-[opacity,transform]",
+        "[transition-duration:600ms]",
+        "[transition-delay:var(--reveal-delay)]",
+        "[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+      ],
+    },
+    entered: {
+      true: "opacity-100 transform-none",
+      false: "",
+    },
+    debug: {
+      true: "ring-1 ring-current",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    direction: "up",
+    path: "css",
+    entered: false,
+    debug: false,
+  },
+});
+
+export type RevealVariants = VariantProps<typeof reveal>;

package/vendor/ds/kits/base/src/scroll-area.variants.ts

@@ -0,0 +1,29 @@
+// ScrollArea's structural overflow seam. Its inset stays a live Density role.
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ORIENTATION = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto",
+} as const;
+
+export const scrollArea = tv({
+  base: [
+    "relative text-foreground",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+  ].join(" "),
+  variants: {
+    orientation: ORIENTATION,
+    variant: {
+      outline: "rounded-md border border-muted bg-background p-[var(--reddb-spatial-inset-sm)]",
+      plain: "p-0 focus-visible:-outline-offset-2",
+    },
+  },
+  defaultVariants: { orientation: "vertical", variant: "outline" },
+});
+
+export type ScrollAreaVariants = VariantProps<typeof scrollArea>;
+export type ScrollAreaOrientation = NonNullable<ScrollAreaVariants["orientation"]>;
+export const SCROLL_AREA_ORIENTATIONS = Object.keys(
+  ORIENTATION,
+) as readonly ScrollAreaOrientation[];

package/vendor/ds/kits/base/src/search-select.variants.ts

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+import type { ComboboxOption } from "./combobox.variants";
+
+export interface SearchSelectOption extends ComboboxOption {
+  /** Supporting text shown beneath the option label and included in search. */
+  description?: string;
+  /** Additional caller-owned search terms, such as codes or aliases. */
+  keywords?: readonly string[];
+}
+
+/** Accent-insensitive search over labels, descriptions and explicit aliases. */
+export function searchSelectOptions(options: readonly SearchSelectOption[], query: string): readonly SearchSelectOption[] {
+  const normalize = (text: string) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase();
+  const terms = normalize(query).trim().split(/\s+/).filter(Boolean);
+  return terms.length ? options.filter(option => {
+    const text = normalize([option.label, option.description, ...(option.keywords ?? [])].filter(Boolean).join(" "));
+    return terms.every(term => text.includes(term));
+  }) : options;
+}
+
+export const searchSelect = tv({
+  slots: {
+    root: "min-w-0",
+    row: "flex min-w-0 items-center gap-[var(--reddb-spatial-gap-sm)]",
+    trigger: "min-w-0 flex-1 justify-between text-start font-regular",
+    summary: "min-w-0 truncate",
+    placeholder: "text-ink-muted",
+    content: "w-[max(20rem,var(--bits-popover-anchor-width))] max-w-[calc(100vw-2*var(--reddb-spatial-inset-md))] max-h-[min(70dvh,var(--bits-popover-content-available-height))] overflow-y-auto min-w-0 p-[var(--reddb-spatial-inset-sm)]",
+    search: "sticky top-0 z-10 mb-[var(--reddb-spatial-gap-sm)]",
+    list: "min-w-0",
+    item: "group flex min-h-[var(--reddb-spatial-control-height-md)] cursor-default items-center justify-between gap-[var(--reddb-spatial-gap-md)] rounded-md px-[var(--reddb-spatial-inset-sm)] py-[var(--reddb-spatial-inset-sm)] text-body text-foreground data-[highlighted]:bg-foreground/10 data-[selected]:font-medium data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    option: "min-w-0 break-words",
+    description: "block text-caption font-regular text-ink-muted group-data-[highlighted]:text-foreground",
+    empty: "block px-[var(--reddb-spatial-inset-sm)] py-[var(--reddb-spatial-inset-md)] text-body text-ink-muted",
+    chips: "m-0 flex list-none flex-wrap gap-[var(--reddb-spatial-gap-sm)] p-0",
+    chip: "max-w-full justify-between gap-[var(--reddb-spatial-gap-sm)] rounded-md bg-muted text-foreground",
+    clear: "aspect-square shrink-0 p-0",
+  },
+});

package/vendor/ds/kits/base/src/section-heading.variants.ts

@@ -0,0 +1,41 @@
+// SectionHeading keeps outline depth independent from visual size.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+const SIZE = {
+  sm: { title: "text-base font-medium leading-tight" },
+  md: { title: "text-lg font-medium leading-tight" },
+  lg: { title: "text-2xl font-medium leading-tight" },
+  // The Theme's display role (ADR 0025): 5xl in Base and Application, and in
+  // Marketing a size that grows to the Brand display tier with the heading's
+  // own container width (ADR 0021) rather than the window's.
+  display: {
+    title: "text-display",
+    description: "text-lg",
+  },
+} as const;
+
+const RULE = {
+  true: { root: "border-b border-muted pb-[var(--reddb-spatial-inset-sm)]" },
+  false: { root: "border-b border-transparent pb-0" },
+} as const;
+
+export const sectionHeading = tv({
+  slots: {
+    root: "@container/section-heading flex flex-wrap items-end justify-between gap-[var(--reddb-spatial-gap-lg)]",
+    text: "flex flex-col gap-[var(--reddb-spatial-gap-sm)]",
+    // Weight and line height come with each size: the display role bundles
+    // its own, which a shared class here would override.
+    title: "text-foreground",
+    description: "max-w-prose text-sm text-ink-muted",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-md)]",
+  },
+  variants: { size: SIZE, rule: RULE },
+  defaultVariants: { size: "md", rule: true },
+}, typeRoleMerge);
+
+export type SectionHeadingVariants = VariantProps<typeof sectionHeading>;
+export type SectionHeadingSize = NonNullable<SectionHeadingVariants["size"]>;
+export const SECTION_HEADING_SIZES = Object.keys(SIZE) as readonly SectionHeadingSize[];
+export const SECTION_HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
+export type SectionHeadingLevel = (typeof SECTION_HEADING_LEVELS)[number];

package/vendor/ds/kits/base/src/segments.variants.ts

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+export const segments = tv({
+  slots: {
+    track: "grid w-full gap-[var(--reddb-spatial-gap-sm)]",
+    cell: "h-[var(--reddb-spatial-gap-md)] min-w-0 overflow-hidden bg-muted",
+    fill: "h-full",
+  },
+});

package/vendor/ds/kits/base/src/select.variants.ts

@@ -0,0 +1,30 @@
+// Select's public appearance seam. The component keeps the platform's own
+// popup and keyboard model while giving the closed control a canonical skin.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+export const select = tv({
+  base: [
+    "flex w-full cursor-pointer [&[multiple]]:h-auto",
+    "rounded-md border border-control-edge bg-background",
+    "text-foreground",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "aria-invalid:border-feedback-danger-border",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+  ].join(" "),
+  variants: {
+    // The same three steps as Button, so a field and the action beside it
+    // share one control height at every Density stop. Named `controlSize` on
+    // the component: the native \`size\` attribute is still spread through.
+    size: {
+      sm: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-editable-sm",
+      md: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-editable-md",
+      lg: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-editable-lg",
+    },
+  },
+  defaultVariants: { size: "md" },
+}, typeRoleMerge);
+
+export type SelectVariants = VariantProps<typeof select>;
+export type SelectSize = NonNullable<SelectVariants["size"]>;

package/vendor/ds/kits/base/src/skeleton.variants.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+const SHAPE = {
+  text: "h-4 w-full rounded-md",
+  rectangle: "min-h-[var(--reddb-spatial-control-height-lg)] w-full rounded-md",
+  circle: "aspect-square size-12 rounded-full",
+} as const;
+
+export const skeleton = tv({
+  base: "bg-muted motion-safe:animate-pulse motion-reduce:opacity-75",
+  variants: { shape: SHAPE },
+  defaultVariants: { shape: "text" },
+});
+
+export type SkeletonVariants = VariantProps<typeof skeleton>;
+export type SkeletonShape = NonNullable<SkeletonVariants["shape"]>;
+export const SKELETON_SHAPES = Object.keys(SHAPE) as readonly SkeletonShape[];

package/vendor/ds/kits/base/src/skip-link.variants.ts

@@ -0,0 +1,17 @@
+// The bypass is visually absent until focus, then becomes a token-painted
+// fixed control above ordinary page content. Motion has an explicit off-ramp.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const skipLink = tv({
+  base: [
+    "sr-only focus:not-sr-only",
+    "focus:fixed focus:start-[var(--reddb-spatial-inset-md)] focus:top-[var(--reddb-spatial-inset-md)] focus:z-50",
+    "focus:h-auto focus:w-auto focus:overflow-visible focus:whitespace-normal",
+    "focus:rounded-md focus:border focus:border-muted focus:bg-background focus:text-foreground",
+    "focus:px-[var(--reddb-spatial-inset-md)] focus:py-[var(--reddb-spatial-inset-sm)]",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "transition-opacity motion-reduce:transition-none",
+  ].join(" "),
+});
+
+export type SkipLinkVariants = VariantProps<typeof skipLink>;

package/vendor/ds/kits/base/src/slide-frame.variants.ts

@@ -0,0 +1,94 @@
+// SlideFrame: a fixed 16:9 frame for presentations (ADR 0027), a fixed-aspect
+// size container (ADR 0021) whose content scales with the frame's own width.
+//
+// HOW CONTENT SCALES — A ZOOMED CANVAS, NOT A TRANSFORM AND NOT PER-ROLE cqi.
+//
+// Inside the frame sits a stage: a fixed 60rem × 33.75rem canvas (the 16:9
+// page every slide tool uses, 13.33in at 72pt/in) that is laid out exactly once
+// and scaled to the frame with CSS `zoom`. The zoom factor is the ratio of the
+// frame's width to the canvas width, computed in CSS alone:
+// `tan(atan2(100cqi, 60rem))` turns two lengths into a unitless number (atan2
+// takes the two lengths, tan gives back their ratio), and `100cqi` is the
+// frame's inline size because the frame root is the size container.
+//
+//   - Why not per-role cqi type. Scaling only the type roles leaves every
+//     Density inset, gap and control height at page size: a 360px frame is
+//     202px tall, and fixed rhythm overflows it long before the type does. The
+//     Marketing roles are already fluid against their container, so a cqi
+//     multiplier would scale them twice. A canvas scales type, rhythm, borders
+//     and nested components together, so a slide that fits at one width fits
+//     at every width.
+//   - Why not `transform: scale()`. A transform leaves the layout box at
+//     canvas size, so the frame needs a measured wrapper height, hit testing
+//     and focus rings answer to the unscaled box, and text is rasterised once
+//     and resampled. `zoom` changes the used size of everything inside, so the
+//     browser lays text out at the size it paints it — crisp at every width —
+//     and the frame's own box stays the 16:9 the page asked for.
+//
+// The Theme's type roles are untouched: a slide reads in the roles of whatever
+// Theme surrounds it, measured on the canvas. Marketing's fluid display and
+// title interpolate against the stage (a 60rem container), so on a slide they
+// sit near their large stop at every frame width instead of shrinking twice.
+// Without trigonometric CSS functions the zoom is ignored, and the root's
+// aspect ratio and overflow clip keep the frame 16:9 rather than letting the
+// canvas push the page wide.
+//
+// RHYTHM IS PINNED TO THE FRAME, NOT TO DENSITY. A slide is a fixed
+// composition like a printed page: the deck an author fitted at one Density
+// must not overflow at `spacious` on a reader's machine. The stage re-declares
+// the layout and section tiers (ADR 0024) at the neutral stop's Brand steps,
+// so the safe area and every layout inside a slide keep the same proportions
+// at every Density. The component tier is not pinned: a Badge or a Button
+// placed on a slide still follows the surrounding Density, scaled with the
+// canvas. The frame never selects an axis — it sets no `data-density`, and a
+// caller's own Density island inside a slide still re-resolves.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+/** The canvas a slide is composed on, in rem: 60rem × 33.75rem (16:9). */
+export const SLIDE_CANVAS_WIDTH_REM = 60;
+
+/**
+ * The layout and section tiers on a slide, pinned to the `comfortable` stop's
+ * Brand steps (ADR 0024) so slide rhythm is the frame's, not the Density's.
+ */
+const PINNED_RHYTHM = [
+  "[--reddb-spatial-layout-gap-sm:var(--reddb-spacing-4)]",
+  "[--reddb-spatial-layout-gap-md:var(--reddb-spacing-6)]",
+  "[--reddb-spatial-layout-gap-lg:var(--reddb-spacing-8)]",
+  "[--reddb-spatial-section-gap:var(--reddb-spacing-16)]",
+  "[--reddb-spatial-section-inset:var(--reddb-spacing-12)]",
+].join(" ");
+
+/** The ground a slide is set on: the page background or the raised elevation. */
+const SURFACE = {
+  background: { root: "bg-background after:border-muted" },
+  raised: { root: "bg-elevation-raised-surface after:border-elevation-raised-border shadow-elevation-raised" },
+} as const;
+
+export const slideFrame = tv(
+  {
+    slots: {
+      // The size container the stage measures. `w-full` because a size
+      // container takes its width from its parent (ADR 0021); the aspect ratio
+      // and clip hold the frame even if the zoom is unsupported. The hairline
+      // edge is drawn on an overlay, not as a border, so the frame's content
+      // box is exactly 16:9 and the canvas fills it without a sliver.
+      root: "@container/slide-frame relative block w-full min-w-0 aspect-video overflow-hidden rounded-lg text-foreground break-inside-avoid after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:border after:content-['']",
+      // The canvas, zoomed to the frame. It is itself a container, so anything
+      // composed on a slide lays out against the slide (ADR 0021).
+      stage: `@container/slide relative box-border flex w-[60rem] aspect-video flex-col [zoom:tan(atan2(100cqi,60rem))] p-[var(--reddb-spatial-section-inset)] text-body ${PINNED_RHYTHM}`,
+      // The safe title area: everything a layout places stays inside it.
+      safeArea: "relative flex min-h-0 min-w-0 flex-1 flex-col",
+      // The slide number sits in the bottom margin, outside the safe area.
+      number: "absolute inset-x-0 bottom-0 flex h-[var(--reddb-spatial-section-inset)] items-center justify-end px-[var(--reddb-spatial-section-inset)] text-caption tabular-nums text-ink-muted",
+    },
+    variants: { surface: SURFACE },
+    defaultVariants: { surface: "background" },
+  },
+  typeRoleMerge,
+);
+
+export type SlideFrameVariants = VariantProps<typeof slideFrame>;
+export type SlideSurface = NonNullable<SlideFrameVariants["surface"]>;
+export const SLIDE_SURFACES = Object.keys(SURFACE) as readonly SlideSurface[];

package/vendor/ds/kits/base/src/slide-layout.variants.ts

@@ -0,0 +1,43 @@
+// The slide layouts: TitleSlide, SectionSlide, TwoColumnSlide, FigureSlide,
+// QuoteSlide and BulletsSlide (ADR 0027).
+//
+// Each is a SlideFrame with its parts placed inside the safe title area. Type
+// comes only from the Theme's roles (ADR 0025): a slide title is display or
+// title, supporting copy heading or body, attribution and captions caption.
+// Rhythm comes from the layout tier (ADR 0024), which the SlideFrame pins to
+// the frame, so a layout keeps its proportions at every Density and scales
+// with the frame like everything else on the canvas.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+export const slideLayout = tv(
+  {
+    slots: {
+      // The layout fills the safe area; its parts never push past it.
+      body: "flex min-h-0 min-w-0 flex-1 flex-col gap-[var(--reddb-spatial-layout-gap-lg)]",
+      // An eyebrow, title and lede read as one group.
+      header: "flex min-w-0 flex-col gap-[var(--reddb-spatial-layout-gap-sm)]",
+      // A title or section slide centres its header group in the safe area.
+      centred: "my-auto",
+      // Supporting copy under a title: the heading role in secondary ink.
+      lede: "text-heading text-ink-muted text-pretty",
+      // The presenter line or attribution at the foot of the slide.
+      foot: "mt-auto",
+      // Two equal columns that share the remaining height.
+      columns: "grid min-h-0 flex-1 grid-cols-2 gap-[var(--reddb-spatial-layout-gap-lg)]",
+      column: "flex min-h-0 min-w-0 flex-col gap-[var(--reddb-spatial-layout-gap-sm)]",
+      // A figure takes the remaining height; its caption sits under it.
+      figure: "flex min-h-0 flex-1 flex-col gap-[var(--reddb-spatial-layout-gap-sm)]",
+      figureBody: "relative min-h-0 min-w-0 flex-1",
+      // A quotation, in the title role, set as a pull quote.
+      quote: "my-auto flex min-w-0 flex-col gap-[var(--reddb-spatial-layout-gap-md)]",
+      quoteText: "text-title text-foreground text-balance",
+      // Points at the heading role, markers in secondary ink.
+      list: "flex min-w-0 list-disc flex-col gap-[var(--reddb-spatial-layout-gap-sm)] ps-[var(--reddb-spatial-layout-gap-md)] text-heading text-foreground marker:text-ink-muted",
+      item: "ps-[var(--reddb-spatial-gap-sm)] text-pretty",
+    },
+  },
+  typeRoleMerge,
+);
+
+export type SlideLayoutVariants = VariantProps<typeof slideLayout>;

package/vendor/ds/kits/base/src/slider.variants.ts

@@ -0,0 +1,16 @@
+// Slider's token-only appearance seam; native range semantics stay in the component.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const slider = tv({
+  slots: {
+    root: "grid min-w-0 gap-[var(--reddb-spatial-gap-sm)]",
+    control: [
+      "h-[var(--reddb-spatial-control-height-sm)] w-full cursor-pointer accent-primary",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+    ].join(" "),
+    output: "text-sm tabular-nums text-ink-muted",
+  },
+});
+
+export type SliderVariants = VariantProps<typeof slider>;

package/vendor/ds/kits/base/src/stack.variants.ts

@@ -0,0 +1,65 @@
+// Stack's public appearance seam: one flow, in either direction, whose child
+// to child rhythm is the Stack's own (ADR 0024) and is drawn from a Density
+// role at every tier:
+//   - sm | md | lg — the component tier, for the parts of one thing;
+//   - layout-sm | layout-md | layout-lg — the layout tier, between fields,
+//     stacked groups, and a group's heading and its content;
+//   - section — the section tier, between page sections.
+// A caller places the Stack; it never re-spaces the Stack's children.
+import { tv, type VariantProps } from "tailwind-variants";
+
+const GAP = {
+  none: "gap-0",
+  sm: "gap-[var(--reddb-spatial-gap-sm)]",
+  md: "gap-[var(--reddb-spatial-gap-md)]",
+  lg: "gap-[var(--reddb-spatial-gap-lg)]",
+  "layout-sm": "gap-[var(--reddb-spatial-layout-gap-sm)]",
+  "layout-md": "gap-[var(--reddb-spatial-layout-gap-md)]",
+  "layout-lg": "gap-[var(--reddb-spatial-layout-gap-lg)]",
+  section: "gap-[var(--reddb-spatial-section-gap)]",
+} as const;
+
+/** The flow's main axis. `column` (the default) stacks; `row` runs inline. */
+const DIRECTION = {
+  column: "flex-col",
+  row: "flex-row",
+} as const;
+
+/** Cross-axis alignment of the children. `stretch` is the flex default, so it adds no class. */
+const ALIGN = {
+  stretch: "",
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  baseline: "items-baseline",
+} as const;
+
+/** Main-axis distribution of the children. `start` is the flex default. */
+const JUSTIFY = {
+  start: "",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+} as const;
+
+/** Whether children wrap onto a new line when the flow runs out of room. */
+const WRAP = {
+  true: "flex-wrap",
+  false: "",
+} as const;
+
+export const stack = tv({
+  base: "flex",
+  variants: { direction: DIRECTION, gap: GAP, align: ALIGN, justify: JUSTIFY, wrap: WRAP },
+  defaultVariants: { direction: "column", gap: "layout-md", align: "stretch", justify: "start", wrap: false },
+});
+
+export type StackVariants = VariantProps<typeof stack>;
+export type StackGap = NonNullable<StackVariants["gap"]>;
+export type StackDirection = NonNullable<StackVariants["direction"]>;
+export type StackAlign = NonNullable<StackVariants["align"]>;
+export type StackJustify = NonNullable<StackVariants["justify"]>;
+export const STACK_GAPS = Object.keys(GAP) as readonly StackGap[];
+export const STACK_DIRECTIONS = Object.keys(DIRECTION) as readonly StackDirection[];
+export const STACK_ALIGNMENTS = Object.keys(ALIGN) as readonly StackAlign[];
+export const STACK_JUSTIFICATIONS = Object.keys(JUSTIFY) as readonly StackJustify[];

package/vendor/ds/kits/base/src/statistic.variants.ts

@@ -0,0 +1,12 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const statistic = tv({
+  slots: {
+    root: "min-w-0",
+    detail: "grid gap-[var(--reddb-spatial-gap-sm)]",
+    value: "font-mono text-2xl font-medium tabular-nums text-foreground",
+    description: "text-sm text-ink-muted",
+  },
+});
+
+export type StatisticVariants = VariantProps<typeof statistic>;

package/vendor/ds/kits/base/src/status-indicator.variants.ts

@@ -0,0 +1,52 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { TONES, type Tone } from "./tone";
+
+/** The tones a StatusIndicator accepts: the shared vocabulary (ADR 0026). */
+export const STATUS_INDICATOR_TONES = TONES;
+export type StatusIndicatorTone = Tone;
+/** @deprecated StatusIndicator's meaning is `tone` (ADR 0026); use `STATUS_INDICATOR_TONES`. Removed next release. */
+export const STATUS_INDICATOR_STATUSES = TONES;
+/** @deprecated StatusIndicator's meaning is `tone` (ADR 0026); use `StatusIndicatorTone`. Removed next release. */
+export type StatusIndicatorStatus = Tone;
+
+// Every mark is a non-text graphic that, with the label hidden, stands in for
+// it, so each fill holds 3:1 on every ground (WCAG 1.4.11). Neutral follows the
+// feedback anatomy — the edge stop rings the text-grade fill — in the neutral
+// roles: `muted` is a surface role at 8% ink (ADR 0019), 1.19:1 as a mark.
+const TONE: Record<Tone, { mark: string }> = {
+  neutral: { mark: "border-control-edge bg-ink-muted" },
+  info: {
+    mark:
+      "border-[var(--reddb-color-feedback-info-border)] bg-[var(--reddb-color-feedback-info-foreground)]",
+  },
+  success: {
+    mark:
+      "border-[var(--reddb-color-feedback-success-border)] bg-[var(--reddb-color-feedback-success-foreground)]",
+  },
+  warning: {
+    mark:
+      "border-[var(--reddb-color-feedback-warning-border)] bg-[var(--reddb-color-feedback-warning-foreground)]",
+  },
+  danger: {
+    mark:
+      "border-[var(--reddb-color-feedback-danger-border)] bg-[var(--reddb-color-feedback-danger-foreground)]",
+  },
+};
+
+export const statusIndicator = tv({
+  slots: {
+    root: "inline-flex min-w-0 max-w-full items-center gap-[var(--reddb-spatial-gap-sm)] text-sm text-foreground",
+    mark: "size-2 shrink-0 rounded-full border",
+    label: "min-w-0 [overflow-wrap:anywhere]",
+  },
+  variants: {
+    tone: TONE,
+    labelled: {
+      true: { label: "" },
+      false: { label: "sr-only" },
+    },
+  },
+  defaultVariants: { tone: "neutral", labelled: true },
+});
+
+export type StatusIndicatorVariants = VariantProps<typeof statusIndicator>;

package/vendor/ds/kits/base/src/steps.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const steps = tv({
+  slots: {
+    root: "text-foreground",
+    list: "m-0 grid list-none gap-[var(--reddb-spatial-gap-md)] ps-0",
+    item: "min-w-0",
+    content: "flex items-center gap-[var(--reddb-spatial-gap-sm)]",
+    marker: [
+      "inline-flex size-[var(--reddb-spatial-control-height-sm)] shrink-0 items-center justify-center",
+      "rounded-full border border-muted text-sm",
+    ].join(" "),
+    current: "font-medium text-foreground",
+    status: "text-sm text-ink-muted",
+  },
+});
+
+export type StepsVariants = VariantProps<typeof steps>;

package/vendor/ds/kits/base/src/structured-data.ts

@@ -0,0 +1,94 @@
+// Structured Data (ADR 0028): the JSON-LD a page hands to search engines.
+//
+// Base carries only what a Base component needs to emit its own entity — the
+// safe serializer and the BreadcrumbList builder Breadcrumbs uses — because a
+// Base component may not import a child Kit. The Marketing Kit builds the rest
+// (Organization, WebSite, articles, FAQ, products) on this serializer and adds
+// the `JsonLd` and `SeoHead` components.
+
+/** The vocabulary every DS-built node speaks. */
+export const SCHEMA_ORG = "https://schema.org";
+
+/** One schema.org node: a `@type` plus its properties. */
+export interface JsonLdNode {
+  "@context"?: typeof SCHEMA_ORG;
+  "@type": string;
+  "@id"?: string;
+  [property: string]: unknown;
+}
+
+/** A top-level JSON-LD document: one node, or a `@graph` of several. */
+export type JsonLdDocument =
+  | JsonLdNode
+  | { "@context": typeof SCHEMA_ORG; "@graph": readonly JsonLdNode[] };
+
+// Characters that could close the surrounding <script> element, open an HTML
+// comment, or break a JavaScript string literal if the block is ever inlined.
+// Their JSON escapes keep the parsed value identical.
+const UNSAFE = /[<>&\u2028\u2029]/g;
+const ESCAPES: Record<string, string> = {
+  "<": "\\u003c",
+  ">": "\\u003e",
+  "&": "\\u0026",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+/**
+ * Serialize a JSON-LD document so it is safe inside `<script type="application/ld+json">`.
+ * Every `<`, `>` and `&` becomes its JSON unicode escape, so caller text containing
+ * `</script` or `<!--` can neither close the element nor open a comment, and
+ * `JSON.parse` still returns the original value. `undefined` properties are dropped.
+ */
+export function serializeJsonLd(document: JsonLdDocument): string {
+  return JSON.stringify(document).replace(UNSAFE, (character) => ESCAPES[character]!);
+}
+
+/** The complete `<script type="application/ld+json">` element for a document, serialized safely. */
+export function jsonLdScript(document: JsonLdDocument): string {
+  return `<script type="application/ld+json">${serializeJsonLd(document)}</script>`;
+}
+
+/** One crumb: the visible label and, except for the current page, its destination. */
+export interface BreadcrumbListInput {
+  label: string;
+  href?: string;
+}
+
+/** Options for {@link breadcrumbList}. */
+export interface BreadcrumbListOptions {
+  /** Absolute origin (`https://example.com`) that resolves root-relative `href`s. */
+  origin?: string;
+}
+
+/** Resolve `href` against `origin` when it is root-relative; absolute URLs pass through. */
+export function absoluteUrl(href: string, origin?: string): string {
+  if (/^[a-z][a-z\d+.-]*:/i.test(href) || origin === undefined) return href;
+  return new URL(href, origin.endsWith("/") ? origin : `${origin}/`).href;
+}
+
+/** True when `url` is an absolute `http(s)` URL. */
+export function isAbsoluteUrl(url: string): boolean {
+  return /^https?:\/\/[^/\s]+/i.test(url);
+}
+
+/**
+ * A schema.org `BreadcrumbList` from Breadcrumbs-shaped items, in trail order. Each item
+ * becomes a `ListItem` with its 1-based `position`; an item without `href` (the current page)
+ * omits `item`, which schema.org allows for the last crumb.
+ */
+export function breadcrumbList(
+  items: readonly BreadcrumbListInput[],
+  options: BreadcrumbListOptions = {},
+): JsonLdNode {
+  return {
+    "@context": SCHEMA_ORG,
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((crumb, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: crumb.label,
+      ...(crumb.href === undefined ? {} : { item: absoluteUrl(crumb.href, options.origin) }),
+    })),
+  };
+}

package/vendor/ds/kits/base/src/swap.variants.ts

@@ -0,0 +1,13 @@
+// Swap adds only the stable one-cell boundary around ToggleButton's appearance.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const swap = tv({
+  base: "inline-grid place-items-center",
+});
+
+// A face is one grid item even when its content contains an icon and text.
+export const swapFace = tv({
+  base: "inline-flex items-center justify-center gap-[var(--reddb-spatial-gap-md)]",
+});
+
+export type SwapVariants = VariantProps<typeof swap>;