@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/src/TwoColumnSlide.svelte

@@ -0,0 +1,63 @@
+<!-- A titled slide with two equal columns of caller-owned content (ADR 0027). -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Eyebrow from "./Eyebrow.svelte";
+  import Heading from "./Heading.svelte";
+  import SlideFrame from "./SlideFrame.svelte";
+  import type { HeadingLevel } from "./heading.variants";
+  import type { SlideSurface } from "./slide-frame.variants";
+  import { slideLayout } from "./slide-layout.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "title"> {
+    /** The slide's title, set in the title role. */
+    title: string;
+    /** A micro-label above the title. */
+    eyebrow?: string;
+    /** The first column, in reading order (left in a left-to-right script). */
+    start: Snippet;
+    /** The second column, in reading order (right in a left-to-right script). */
+    end: Snippet;
+    /** The title's outline level. Defaults to 2. */
+    level?: HeadingLevel;
+    /** The slide's accessible name. Defaults to `title`. */
+    label?: string;
+    /** The slide's position in its deck, shown in the bottom margin when given. */
+    number?: number;
+    /** How many slides the deck has; shown after `number` when both are given. */
+    total?: number;
+    /** The ground the slide is set on: the page `background` (default) or the `raised` elevation. */
+    surface?: SlideSurface;
+    /** Extra classes merged onto the frame. */
+    class?: string;
+  }
+
+  const {
+    title,
+    eyebrow,
+    start,
+    end,
+    level = 2,
+    label,
+    number,
+    total,
+    surface = "background",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = slideLayout();
+</script>
+
+<SlideFrame {...rest} label={label ?? title} {number} {total} {surface} class={className} data-two-column-slide>
+  <div class={slots.body()}>
+    <div class={slots.header()}>
+      {#if eyebrow}<Eyebrow>{eyebrow}</Eyebrow>{/if}
+      <Heading {level} role="title">{title}</Heading>
+    </div>
+    <div data-slide-columns class={slots.columns()}>
+      <div data-slide-column="start" class={slots.column()}>{@render start()}</div>
+      <div data-slide-column="end" class={slots.column()}>{@render end()}</div>
+    </div>
+  </div>
+</SlideFrame>

package/vendor/ds/kits/base/src/WindowMockup.svelte

@@ -0,0 +1,51 @@
+<!-- Plain decorative window chrome around caller-owned, semantically intact content. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import AspectRatio from "./AspectRatio.svelte";
+  import { DEFAULT_WINDOW_MOCKUP_RATIO, windowMockup } from "./window-mockup.variants";
+
+  interface Props
+    extends Omit<
+      HTMLAttributes<HTMLDivElement>,
+      "aria-hidden" | "aria-label" | "children" | "class" | "role" | "title"
+    > {
+    /** Optional display-only title for the decorative title bar. */
+    title?: string;
+    /** Width divided by viewport height. */
+    ratio?: number;
+    /** Extra classes merged onto the decorative frame. */
+    class?: string;
+    /** Caller-owned screenshot, live embed, code sample, or other content. */
+    children: Snippet;
+  }
+
+  const {
+    title,
+    ratio = DEFAULT_WINDOW_MOCKUP_RATIO,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(windowMockup());
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-window-mockup
+  role="presentation"
+  class={styles.root({ class: className })}
+>
+  <div data-window-mockup-chrome aria-hidden="true" class={styles.chrome()}>
+    <span class={styles.controls()}>
+      <span class={styles.control()}></span>
+      <span class={styles.control()}></span>
+      <span class={styles.control()}></span>
+    </span>
+    <span class={styles.title()}>{title ?? ""}</span>
+    <span class={styles.balance()}></span>
+  </div>
+  <AspectRatio data-window-mockup-viewport {ratio} class={styles.viewport()}>
+    {@render children()}
+  </AspectRatio>
+</div>

package/vendor/ds/kits/base/src/a11y.ts

@@ -0,0 +1,21 @@
+// Svelte owns only context; DOM diagnostics are shared with native React.
+import { getContext, hasContext, setContext } from "svelte";
+export { warnA11y, hasAccessibleName, checkFieldName, checkButtonName, FIELD_NAME_FIX } from "./core/a11y";
+
+const FIELD_CONTEXT = Symbol("reddb.field");
+
+/** What a Field tells the control rendered inside it. */
+export interface FieldContext {
+  /** The Field's visible label, which names the control through `<label for>`. */
+  readonly label: string;
+}
+
+/** Called by Field so the control inside it knows its name is owned. */
+export function setFieldContext(context: FieldContext): void {
+  setContext(FIELD_CONTEXT, context);
+}
+
+/** The enclosing Field's context, or `undefined` outside one. */
+export function getFieldContext(): FieldContext | undefined {
+  return hasContext(FIELD_CONTEXT) ? getContext<FieldContext>(FIELD_CONTEXT) : undefined;
+}

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

@@ -0,0 +1,26 @@
+// Accordion's public item contract and token-only appearance seam.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export interface AccordionItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export const accordion = tv({
+  slots: {
+    root: "min-w-0 divide-y divide-muted border-y border-muted",
+    item: "min-w-0",
+    header: "m-0",
+    // `group` is what the indicator's expanded-state rotation reads.
+    trigger: [
+      "group min-h-[var(--reddb-spatial-control-height-sm)] w-full justify-between rounded-none px-0 text-left",
+      "data-[state=open]:text-foreground",
+    ].join(" "),
+    label: "min-w-0 truncate",
+    indicator: "ml-auto shrink-0 text-ink-muted transition-transform group-aria-expanded:rotate-180 motion-reduce:transition-none",
+    content: "overflow-hidden pb-[var(--reddb-spatial-inset-md)] text-foreground",
+  },
+});
+
+export type AccordionVariants = VariantProps<typeof accordion>;

package/vendor/ds/kits/base/src/alert-dialog.variants.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { dialog } from "./dialog.variants";
+
+/** Dialog appearance narrowed for a focused destructive decision. */
+export const alertDialog = tv({
+  base: [dialog(), "max-w-md"].join(" "),
+});
+
+/** Token-backed arrangement for the canonical decision controls. */
+export const alertDialogActions = tv({
+  base: [
+    "mt-[var(--reddb-spatial-gap-lg)]",
+    "flex flex-wrap justify-end gap-[var(--reddb-spatial-gap-md)]",
+  ].join(" "),
+});
+
+export type AlertDialogVariants = VariantProps<typeof alertDialog>;

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

@@ -0,0 +1,36 @@
+// Alert's public appearance seam consumes DS-owned Feedback Roles only. The
+// Theme may remap their Brand materials without changing these names or the
+// component contract (ADR 0009). Meaning is `tone`, the shared vocabulary
+// (ADR 0026): each Feedback Role draws its copy on its tinted surface (ADR
+// 0023), and neutral is ink on the muted surface.
+import { tv, type VariantProps } from "tailwind-variants";
+import { FEEDBACK_TONES, TONES, type FeedbackTone, type Tone } from "./tone";
+
+/** Every tone an Alert accepts: the shared vocabulary. */
+export const ALERT_TONES = TONES;
+export type AlertTone = Tone;
+
+/** @deprecated Alert's meaning is `tone` (ADR 0026); use `FEEDBACK_TONES` or `ALERT_TONES`. Removed next release. */
+export const ALERT_FEEDBACK_ROLES = FEEDBACK_TONES;
+/** @deprecated Alert's meaning is `tone` (ADR 0026); use `AlertTone`. Removed next release. */
+export type AlertFeedbackRole = FeedbackTone;
+
+const TONE: Record<Tone, string> = {
+  neutral: "border-transparent bg-muted text-foreground",
+  info: "border-feedback-info-border bg-feedback-info-surface text-feedback-info-foreground",
+  success: "border-feedback-success-border bg-feedback-success-surface text-feedback-success-foreground",
+  warning: "border-feedback-warning-border bg-feedback-warning-surface text-feedback-warning-foreground",
+  danger: "border-feedback-danger-border bg-feedback-danger-surface text-feedback-danger-foreground",
+};
+
+export const alert = tv({
+  base: [
+    "rounded-md border",
+    "px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+    "text-sm",
+  ].join(" "),
+  variants: { tone: TONE },
+  defaultVariants: { tone: "neutral" },
+});
+
+export type AlertVariants = VariantProps<typeof alert>;

package/vendor/ds/kits/base/src/appearance-switch.behavior.ts

@@ -0,0 +1,29 @@
+/** The independently selectable appearance axes established by ADRs 0003 and 0008. */
+export const APPEARANCE_AXES = ["theme", "color-scheme", "density"] as const;
+export type AppearanceAxis = (typeof APPEARANCE_AXES)[number];
+
+/** One caller-owned value on an appearance axis. */
+export interface AppearanceOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/** Minimal persistence surface, injectable without depending on browser globals. */
+export interface AppearanceStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export function appearanceAttribute(axis: AppearanceAxis): `data-${AppearanceAxis}` {
+  return `data-${axis}`;
+}
+
+export function appearanceStorageKey(axis: AppearanceAxis): string {
+  return `reddb:appearance:${axis}`;
+}
+
+/** Apply one value without touching either of the other independent axes. */
+export function applyAppearance(root: HTMLElement, axis: AppearanceAxis, value: string): void {
+  root.setAttribute(appearanceAttribute(axis), value);
+}

package/vendor/ds/kits/base/src/aspect-ratio.variants.ts

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** The common media ratio; callers remain free to supply any positive ratio. */
+export const DEFAULT_ASPECT_RATIO = 16 / 9;
+
+export const aspectRatio = tv({
+  base: [
+    "relative box-border w-full overflow-hidden",
+    "p-[var(--reddb-spatial-inset-sm)]",
+    "[&>*]:h-full [&>*]:w-full",
+  ].join(" "),
+});
+
+export type AspectRatioVariants = VariantProps<typeof aspectRatio>;

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

@@ -0,0 +1,29 @@
+// Avatar's token-only appearance seam; image loading and fallback semantics
+// remain in the component.
+import { tv, type VariantProps } from "tailwind-variants";
+
+const SIZE = {
+  sm: {
+    root: "size-[var(--reddb-spatial-control-height-sm)] text-xs",
+  },
+  md: {
+    root: "size-[var(--reddb-spatial-control-height-md)] text-sm",
+  },
+  lg: {
+    root: "size-[var(--reddb-spatial-control-height-lg)] text-base",
+  },
+} as const;
+
+export const avatar = tv({
+  slots: {
+    root: "relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted text-foreground",
+    image: "absolute inset-0 size-full object-cover",
+    fallback: "flex size-full items-center justify-center font-medium",
+  },
+  variants: { size: SIZE },
+  defaultVariants: { size: "md" },
+});
+
+export type AvatarVariants = VariantProps<typeof avatar>;
+export type AvatarSize = NonNullable<AvatarVariants["size"]>;
+export const AVATAR_SIZES = Object.keys(SIZE) as readonly AvatarSize[];

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

@@ -0,0 +1,89 @@
+// Badge's public appearance seam: what a status means (`tone`, ADR 0026) and
+// how strongly it is drawn (`variant`, its emphasis axis) are two axes.
+//
+// Every tone resolves to its Feedback Role exactly as it does on Alert, Card
+// and Button, through pairs the Foundation's contrast contract measures:
+//   - tinted: the role's copy on its tinted message surface (ADR 0023);
+//   - filled: `on-feedback` ink on the role's text-grade stop — a tone chip;
+//   - outline: the role's copy inside its border, on whatever ground it sits.
+// Neutral is ink on the muted surface, ink as a fill, or ink in a muted edge.
+// No tone fills with the Brand red: red on a status is danger (DESIGN.md).
+import { tv, type VariantProps } from "tailwind-variants";
+import type { Tone } from "./tone";
+
+/** How strongly a Badge's tone is drawn — its emphasis axis. */
+export const BADGE_VARIANTS = ["tinted", "filled", "outline"] as const;
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+
+/**
+ * Variant values kept for one release (ADR 0026). `neutral` is the tinted
+ * neutral badge it always drew; `primary` keeps its accent fill and warns —
+ * a status is a tone (`tone="danger" variant="filled"`), never the accent.
+ */
+export const DEPRECATED_BADGE_VARIANTS = {
+  neutral: "tinted",
+  primary: "filled",
+} as const satisfies Record<string, BadgeVariant>;
+/** @deprecated `neutral` is `variant="tinted"`; `primary` is a filled tone. Removed next release. */
+export type DeprecatedBadgeVariant = keyof typeof DEPRECATED_BADGE_VARIANTS;
+
+const APPEARANCE = {
+  tinted: {
+    neutral: "border-transparent bg-muted text-foreground",
+    info: "border-transparent bg-feedback-info-surface text-feedback-info-foreground",
+    success: "border-transparent bg-feedback-success-surface text-feedback-success-foreground",
+    warning: "border-transparent bg-feedback-warning-surface text-feedback-warning-foreground",
+    danger: "border-transparent bg-feedback-danger-surface text-feedback-danger-foreground",
+  },
+  filled: {
+    neutral: "border-transparent bg-foreground text-background",
+    info: "border-transparent bg-feedback-info-foreground text-on-feedback",
+    success: "border-transparent bg-feedback-success-foreground text-on-feedback",
+    warning: "border-transparent bg-feedback-warning-foreground text-on-feedback",
+    danger: "border-transparent bg-feedback-danger-foreground text-on-feedback",
+  },
+  outline: {
+    neutral: "border-muted bg-transparent text-foreground",
+    info: "border-feedback-info-border bg-transparent text-feedback-info-foreground",
+    success: "border-feedback-success-border bg-transparent text-feedback-success-foreground",
+    warning: "border-feedback-warning-border bg-transparent text-feedback-warning-foreground",
+    danger: "border-feedback-danger-border bg-transparent text-feedback-danger-foreground",
+  },
+} as const satisfies Record<BadgeVariant, Record<Tone, string>>;
+
+/** The accent fill the deprecated `variant="primary"` still draws for one release. */
+const DEPRECATED_PRIMARY = "border-transparent bg-primary text-on-primary";
+
+const TONE = { neutral: "", info: "", success: "", warning: "", danger: "" } as const satisfies Record<
+  Tone,
+  string
+>;
+const VARIANT = { tinted: "", filled: "", outline: "", neutral: "", primary: "" } as const;
+
+export const badge = tv({
+  base: [
+    "inline-flex items-center gap-[var(--reddb-spatial-gap-sm)] rounded-md border px-2 py-0.5",
+    "text-xs font-medium leading-tight whitespace-nowrap",
+  ].join(" "),
+  variants: { tone: TONE, variant: VARIANT },
+  compoundVariants: [
+    ...(Object.entries(APPEARANCE) as [BadgeVariant, Record<Tone, string>][]).flatMap(([variant, tones]) =>
+      (Object.entries(tones) as [Tone, string][]).map(([tone, className]) => ({
+        variant,
+        tone,
+        class: className,
+      })),
+    ),
+    // The deprecated neutral variant is the tinted badge, tone for tone.
+    ...(Object.entries(APPEARANCE.tinted) as [Tone, string][]).map(([tone, className]) => ({
+      variant: "neutral" as const,
+      tone,
+      class: className,
+    })),
+    { variant: "primary" as const, class: DEPRECATED_PRIMARY },
+  ],
+  defaultVariants: { tone: "neutral", variant: "tinted" },
+});
+
+export type BadgeVariants = VariantProps<typeof badge>;
+export type BadgeTone = Tone;

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

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+export const breadcrumbs = tv({
+  slots: {
+    root: "text-caption font-regular text-ink-muted",
+    list: "m-0 flex list-none flex-wrap items-center gap-[var(--reddb-spatial-gap-lg)] ps-0",
+    item: "flex items-center gap-[var(--reddb-spatial-gap-lg)]",
+    current: "font-regular text-foreground",
+    link: "font-regular text-ink-muted hover:text-foreground focus-visible:text-foreground underline-offset-[calc(var(--reddb-spatial-gap-sm)/2)]",
+    separator: "select-none text-ink-muted/70",
+  },
+}, typeRoleMerge);
+
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbs>;

package/vendor/ds/kits/base/src/browser-mockup.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const DEFAULT_BROWSER_MOCKUP_RATIO = 16 / 9;
+
+export const browserMockup = tv({
+  slots: {
+    root: "overflow-hidden rounded-lg border border-muted bg-background text-foreground shadow-lg",
+    chrome:
+      "flex min-h-[var(--reddb-spatial-control-height-sm)] items-center gap-[var(--reddb-spatial-gap-sm)] border-b border-muted bg-muted px-[var(--reddb-spatial-inset-sm)]",
+    controls: "flex shrink-0 gap-[var(--reddb-spatial-gap-sm)]",
+    control: "size-2 rounded-full bg-muted",
+    address:
+      "min-w-0 flex-1 truncate rounded-md border border-muted bg-background px-[var(--reddb-spatial-inset-sm)] text-xs text-ink-muted",
+    viewport: "bg-background",
+  },
+});
+
+export type BrowserMockupVariants = VariantProps<typeof browserMockup>;

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

@@ -0,0 +1,186 @@
+// Button's public appearance seam.
+//
+// Every class lives in these `tv()` contracts so a consumer can extend the
+// canonical appearance without forking the element behavior. Colours resolve
+// through Theme/Color Scheme roles and spatial values through Density roles;
+// this module owns no appearance-axis selection or raw value.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { QUIET_HOVER, QUIET_OPEN, QUIET_PRESSED } from "./quiet-control.variants";
+import type { Tone } from "./tone";
+import { typeRoleMerge } from "./type-roles";
+
+const VARIANT = {
+  /** The affirmative action of a view — at most one per view. */
+  primary: "bg-primary text-on-primary",
+  /** Everything else that is still an action: outlined, not filled. */
+  secondary: "border-control-edge bg-transparent text-foreground hover:border-foreground",
+  /**
+   * An action that should not compete for attention. It is the quiet-control
+   * contract (quiet-control.variants.ts, wave 6A): transparent at rest, the
+   * quiet fill on hover, the stronger one pressed or holding a popup open.
+   */
+  ghost: `bg-transparent text-ink-muted hover:text-foreground ${QUIET_HOVER} ${QUIET_PRESSED} ${QUIET_OPEN}`,
+} as const;
+
+// What the action means (ADR 0026): the shared tone vocabulary, resolved by
+// the compound variants below onto each Feedback Role's materials.
+const TONE = {
+  neutral: "",
+  info: "",
+  success: "",
+  warning: "",
+  danger: "",
+} as const satisfies Record<Tone, string>;
+
+const SIZE = {
+  sm: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm",
+  md: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm",
+  lg: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base",
+} as const;
+
+const BLOCK = {
+  /** Fills its column — a form's submit, a drawer's confirm, a mobile action. */
+  true: "w-full",
+  /** The default: as wide as what it says. */
+  false: "",
+} as const;
+
+export const button = tv({
+  base: [
+    "inline-flex items-center justify-center gap-[var(--reddb-spatial-gap-md)]",
+    "rounded-md border border-transparent",
+    "font-medium leading-tight whitespace-nowrap",
+    // No colour transition (quiet-control.variants.ts): states and a Color
+    // Scheme switch land at full contrast at once.
+    // One ink focus ring for every variant and tone (ADR 0023): 2px, offset
+    // 2px, so the pixels around it are the ground and never the Button's fill.
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+  ].join(" "),
+  variants: { variant: VARIANT, tone: TONE, size: SIZE, block: BLOCK },
+  // Each tone keeps the variant's hierarchy: primary fills with the role's
+  // fill material under its on-fill label, secondary outlines in the role's
+  // border, ghost carries only the role's ink. A danger primary is therefore a
+  // filled destructive action, deeper than the accent in both Color Schemes
+  // and distinct from its secondary and ghost forms (ADR 0009, ADR 0023).
+  //
+  // A tone ghost keeps its role's tinted surface as its quiet fill, hovered and
+  // pressed (wave 6A): the role's copy on the neutral ink fill drops to
+  // 3.66:1 (danger) and 3.71:1 (info) on the dark overlay, where a danger
+  // ghost sits in a Dialog, while the contract holds it on its own surface.
+  //
+  // A filled Button never hovers with an opacity (wave 6A): every filled
+  // emphasis swaps to its opaque active material — `primary-active` for the
+  // accent, `feedback-<tone>-fill-active` for a tone — which the contrast
+  // contract pairs with the label, so the ground never shows through.
+  compoundVariants: [
+    {
+      // Hovered, pressed or holding a popup open, the accent fills with the
+      // opaque `primary-active` role, which the contrast contract pairs with
+      // `on-primary` (wave 5A). The old opacity hover let the ground show
+      // through: a SpeedDial trigger held open on Marketing dark fell to 4.44:1.
+      tone: "neutral",
+      variant: "primary",
+      class: "hover:bg-primary-active active:bg-primary-active aria-expanded:bg-primary-active",
+    },
+    {
+      tone: "danger",
+      variant: "primary",
+      class: "bg-feedback-danger-fill text-feedback-danger-on-fill hover:bg-feedback-danger-fill-active active:bg-feedback-danger-fill-active aria-expanded:bg-feedback-danger-fill-active",
+    },
+    {
+      tone: "danger",
+      variant: "secondary",
+      class: "border-feedback-danger-border text-feedback-danger-foreground hover:border-feedback-danger-foreground hover:bg-feedback-danger-surface",
+    },
+    {
+      tone: "danger",
+      variant: "ghost",
+      class: "text-feedback-danger-foreground hover:text-feedback-danger-foreground hover:bg-feedback-danger-surface active:bg-feedback-danger-surface",
+    },
+    {
+      tone: "success",
+      variant: "primary",
+      class: "bg-feedback-success-fill text-feedback-success-on-fill hover:bg-feedback-success-fill-active active:bg-feedback-success-fill-active aria-expanded:bg-feedback-success-fill-active",
+    },
+    {
+      tone: "success",
+      variant: "secondary",
+      class: "border-feedback-success-border text-feedback-success-foreground hover:border-feedback-success-foreground hover:bg-feedback-success-surface",
+    },
+    {
+      tone: "success",
+      variant: "ghost",
+      class: "text-feedback-success-foreground hover:text-feedback-success-foreground hover:bg-feedback-success-surface active:bg-feedback-success-surface",
+    },
+    {
+      tone: "warning",
+      variant: "primary",
+      class: "bg-feedback-warning-fill text-feedback-warning-on-fill hover:bg-feedback-warning-fill-active active:bg-feedback-warning-fill-active aria-expanded:bg-feedback-warning-fill-active",
+    },
+    {
+      tone: "warning",
+      variant: "secondary",
+      class: "border-feedback-warning-border text-feedback-warning-foreground hover:border-feedback-warning-foreground hover:bg-feedback-warning-surface",
+    },
+    {
+      tone: "warning",
+      variant: "ghost",
+      class: "text-feedback-warning-foreground hover:text-feedback-warning-foreground hover:bg-feedback-warning-surface active:bg-feedback-warning-surface",
+    },
+    {
+      tone: "info",
+      variant: "primary",
+      class: "bg-feedback-info-fill text-feedback-info-on-fill hover:bg-feedback-info-fill-active active:bg-feedback-info-fill-active aria-expanded:bg-feedback-info-fill-active",
+    },
+    {
+      tone: "info",
+      variant: "secondary",
+      class: "border-feedback-info-border text-feedback-info-foreground hover:border-feedback-info-foreground hover:bg-feedback-info-surface",
+    },
+    {
+      tone: "info",
+      variant: "ghost",
+      class: "text-feedback-info-foreground hover:text-feedback-info-foreground hover:bg-feedback-info-surface active:bg-feedback-info-surface",
+    },
+  ],
+  defaultVariants: { variant: "secondary", tone: "neutral", size: "md", block: false },
+}, typeRoleMerge);
+
+/**
+ * The loading indicator, inheriting the Button variant's current colour. It
+ * takes the Icon size role of the Button's size, so it matches a leading Icon
+ * at every Density stop and the label does not shift when loading starts.
+ */
+export const buttonSpinner = tv({
+  slots: {
+    root: "shrink-0 motion-safe:animate-spin motion-reduce:animate-pulse",
+    track: "fill-none stroke-current opacity-25",
+    head: "fill-none stroke-current",
+  },
+  variants: {
+    size: {
+      sm: { root: "size-[var(--reddb-spatial-icon-size-sm)]" },
+      md: { root: "size-[var(--reddb-spatial-icon-size-md)]" },
+      lg: { root: "size-[var(--reddb-spatial-icon-size-lg)]" },
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export type ButtonVariants = VariantProps<typeof button>;
+export type ButtonVariant = NonNullable<ButtonVariants["variant"]>;
+export type ButtonTone = NonNullable<ButtonVariants["tone"]>;
+/** @deprecated Button's meaning is `tone` (ADR 0026); use `ButtonTone`. Removed next release. */
+export type ButtonIntent = ButtonTone;
+export type ButtonSize = NonNullable<ButtonVariants["size"]>;
+
+// Enumerated from the maps so documentation and local extensions can inspect
+// the same closed vocabulary the component accepts without restating it.
+export const BUTTON_VARIANTS = Object.keys(VARIANT) as readonly ButtonVariant[];
+export const BUTTON_TONES = Object.keys(TONE) as readonly ButtonTone[];
+/** @deprecated Button's meaning is `tone` (ADR 0026); use `BUTTON_TONES`. Removed next release. */
+export const BUTTON_INTENTS = BUTTON_TONES;
+export const BUTTON_SIZES = Object.keys(SIZE) as readonly ButtonSize[];

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

@@ -0,0 +1,35 @@
+// Calendar appearance is token-only; Bits UI owns date state, focus, and announcements.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const calendar = tv({
+  slots: {
+    root: [
+      "w-fit min-w-0 rounded-lg border border-muted bg-background text-foreground",
+      "p-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    header: "mb-[var(--reddb-spatial-gap-sm)] flex items-center justify-between gap-[var(--reddb-spatial-gap-sm)]",
+    navigation: "w-[var(--reddb-spatial-control-height-sm)] shrink-0 px-0",
+    heading: "min-w-0 text-center text-sm font-medium",
+    months: "grid gap-[var(--reddb-spatial-gap-md)]",
+    grid: "w-full",
+    gridHead: "text-ink-muted",
+    gridRow: "grid grid-cols-7",
+    headCell: "flex h-[var(--reddb-spatial-control-height-sm)] items-center justify-center text-xs font-regular",
+    cell: "p-0 text-center",
+    day: [
+      "relative inline-flex size-[var(--reddb-spatial-control-height-sm)] items-center justify-center rounded-md",
+      "text-sm tabular-nums",
+      // Rest, hover, pressed and focus are the quiet-control contract the
+      // component wraps this slot in (wave 6A); a chosen day keeps the accent.
+      "data-[selected]:bg-primary data-[selected]:font-medium data-[selected]:text-on-primary",
+      "data-[range-start]:rounded-e-none data-[range-end]:rounded-s-none",
+      "data-[range-middle]:rounded-none data-[range-middle]:border-y data-[range-middle]:border-primary",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-35",
+      "data-[unavailable]:line-through data-[unavailable]:opacity-60",
+      "data-[outside-month]:text-ink-muted data-[outside-month]:opacity-50",
+      "data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:size-1 data-[today]:after:rounded-full data-[today]:after:bg-current",
+    ].join(" "),
+  },
+});
+
+export type CalendarVariants = VariantProps<typeof calendar>;