@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/theme/theme.css

@@ -0,0 +1,283 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+/* Tailwind 4 @theme surface — every value references a --reddb-* token, except the query steps. */
+@theme inline {
+  /* DS-named responsive steps (ADR 0021): literal, because a query condition cannot read var(). */
+  --breakpoint-*: initial;
+  --breakpoint-2xl: 96rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-xl: 80rem;
+  --container-*: initial;
+  --container-2xl: 42rem;
+  --container-2xs: 18rem;
+  --container-3xl: 48rem;
+  --container-3xs: 16rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+  --container-content: 48rem;
+  --container-lg: 32rem;
+  --container-md: 28rem;
+  --container-prose: 65ch;
+  --container-sm: 24rem;
+  --container-wide: 80rem;
+  --container-xl: 36rem;
+  --container-xs: 20rem;
+  /* Tailwind default steps the DS does not name stop existing (ADR 0025). */
+  --text-*: initial;
+  --color-amber-100: var(--reddb-color-amber-100);
+  --color-amber-400: var(--reddb-color-amber-400);
+  --color-amber-50: var(--reddb-color-amber-50);
+  --color-amber-600: var(--reddb-color-amber-600);
+  --color-amber-700: var(--reddb-color-amber-700);
+  --color-amber-900: var(--reddb-color-amber-900);
+  --color-amber-950: var(--reddb-color-amber-950);
+  --color-azure-400: var(--reddb-color-azure-400);
+  --color-azure-600: var(--reddb-color-azure-600);
+  --color-background: var(--reddb-color-background);
+  --color-blue-100: var(--reddb-color-blue-100);
+  --color-blue-400: var(--reddb-color-blue-400);
+  --color-blue-50: var(--reddb-color-blue-50);
+  --color-blue-600: var(--reddb-color-blue-600);
+  --color-blue-700: var(--reddb-color-blue-700);
+  --color-blue-900: var(--reddb-color-blue-900);
+  --color-blue-950: var(--reddb-color-blue-950);
+  --color-border-strong: var(--reddb-color-border-strong);
+  --color-border-subtle: var(--reddb-color-border-subtle);
+  --color-brand-active: var(--reddb-color-brand-active);
+  --color-brand-hover: var(--reddb-color-brand-hover);
+  --color-brand-on-primary: var(--reddb-color-brand-on-primary);
+  --color-brand-primary: var(--reddb-color-brand-primary);
+  --color-control-edge: var(--reddb-color-control-edge);
+  --color-elevation-base-border: var(--reddb-color-elevation-base-border);
+  --color-elevation-base-foreground: var(--reddb-color-elevation-base-foreground);
+  --color-elevation-base-surface: var(--reddb-color-elevation-base-surface);
+  --color-elevation-overlay-border: var(--reddb-color-elevation-overlay-border);
+  --color-elevation-overlay-foreground: var(--reddb-color-elevation-overlay-foreground);
+  --color-elevation-overlay-surface: var(--reddb-color-elevation-overlay-surface);
+  --color-elevation-raised-border: var(--reddb-color-elevation-raised-border);
+  --color-elevation-raised-foreground: var(--reddb-color-elevation-raised-foreground);
+  --color-elevation-raised-surface: var(--reddb-color-elevation-raised-surface);
+  --color-elevation-sunken-border: var(--reddb-color-elevation-sunken-border);
+  --color-elevation-sunken-foreground: var(--reddb-color-elevation-sunken-foreground);
+  --color-elevation-sunken-surface: var(--reddb-color-elevation-sunken-surface);
+  --color-feedback-danger-border: var(--reddb-color-feedback-danger-border);
+  --color-feedback-danger-fill: var(--reddb-color-feedback-danger-fill);
+  --color-feedback-danger-fill-active: var(--reddb-color-feedback-danger-fill-active);
+  --color-feedback-danger-foreground: var(--reddb-color-feedback-danger-foreground);
+  --color-feedback-danger-on-dark: var(--reddb-color-feedback-danger-on-dark);
+  --color-feedback-danger-on-fill: var(--reddb-color-feedback-danger-on-fill);
+  --color-feedback-danger-on-light: var(--reddb-color-feedback-danger-on-light);
+  --color-feedback-danger-surface: var(--reddb-color-feedback-danger-surface);
+  --color-feedback-info-border: var(--reddb-color-feedback-info-border);
+  --color-feedback-info-fill: var(--reddb-color-feedback-info-fill);
+  --color-feedback-info-fill-active: var(--reddb-color-feedback-info-fill-active);
+  --color-feedback-info-foreground: var(--reddb-color-feedback-info-foreground);
+  --color-feedback-info-on-dark: var(--reddb-color-feedback-info-on-dark);
+  --color-feedback-info-on-fill: var(--reddb-color-feedback-info-on-fill);
+  --color-feedback-info-on-light: var(--reddb-color-feedback-info-on-light);
+  --color-feedback-info-surface: var(--reddb-color-feedback-info-surface);
+  --color-feedback-success-border: var(--reddb-color-feedback-success-border);
+  --color-feedback-success-fill: var(--reddb-color-feedback-success-fill);
+  --color-feedback-success-fill-active: var(--reddb-color-feedback-success-fill-active);
+  --color-feedback-success-foreground: var(--reddb-color-feedback-success-foreground);
+  --color-feedback-success-on-dark: var(--reddb-color-feedback-success-on-dark);
+  --color-feedback-success-on-fill: var(--reddb-color-feedback-success-on-fill);
+  --color-feedback-success-on-light: var(--reddb-color-feedback-success-on-light);
+  --color-feedback-success-surface: var(--reddb-color-feedback-success-surface);
+  --color-feedback-warning-border: var(--reddb-color-feedback-warning-border);
+  --color-feedback-warning-fill: var(--reddb-color-feedback-warning-fill);
+  --color-feedback-warning-fill-active: var(--reddb-color-feedback-warning-fill-active);
+  --color-feedback-warning-foreground: var(--reddb-color-feedback-warning-foreground);
+  --color-feedback-warning-on-dark: var(--reddb-color-feedback-warning-on-dark);
+  --color-feedback-warning-on-fill: var(--reddb-color-feedback-warning-on-fill);
+  --color-feedback-warning-on-light: var(--reddb-color-feedback-warning-on-light);
+  --color-feedback-warning-surface: var(--reddb-color-feedback-warning-surface);
+  --color-focus: var(--reddb-color-focus);
+  --color-foreground: var(--reddb-color-foreground);
+  --color-gold-400: var(--reddb-color-gold-400);
+  --color-gold-600: var(--reddb-color-gold-600);
+  --color-green-100: var(--reddb-color-green-100);
+  --color-green-400: var(--reddb-color-green-400);
+  --color-green-50: var(--reddb-color-green-50);
+  --color-green-600: var(--reddb-color-green-600);
+  --color-green-700: var(--reddb-color-green-700);
+  --color-green-900: var(--reddb-color-green-900);
+  --color-green-950: var(--reddb-color-green-950);
+  --color-ink: var(--reddb-color-ink);
+  --color-ink-muted: var(--reddb-color-ink-muted);
+  --color-magenta-400: var(--reddb-color-magenta-400);
+  --color-magenta-600: var(--reddb-color-magenta-600);
+  --color-muted: var(--reddb-color-muted);
+  --color-navigation-surface: var(--reddb-color-navigation-surface);
+  --color-neutral-0: var(--reddb-color-neutral-0);
+  --color-neutral-100: var(--reddb-color-neutral-100);
+  --color-neutral-200: var(--reddb-color-neutral-200);
+  --color-neutral-300: var(--reddb-color-neutral-300);
+  --color-neutral-400: var(--reddb-color-neutral-400);
+  --color-neutral-50: var(--reddb-color-neutral-50);
+  --color-neutral-500: var(--reddb-color-neutral-500);
+  --color-neutral-600: var(--reddb-color-neutral-600);
+  --color-neutral-700: var(--reddb-color-neutral-700);
+  --color-neutral-800: var(--reddb-color-neutral-800);
+  --color-neutral-900: var(--reddb-color-neutral-900);
+  --color-neutral-950: var(--reddb-color-neutral-950);
+  --color-on-feedback: var(--reddb-color-on-feedback);
+  --color-on-muted: var(--reddb-color-on-muted);
+  --color-on-primary: var(--reddb-color-on-primary);
+  --color-orange-400: var(--reddb-color-orange-400);
+  --color-orange-600: var(--reddb-color-orange-600);
+  --color-paper: var(--reddb-color-paper);
+  --color-primary: var(--reddb-color-primary);
+  --color-primary-active: var(--reddb-color-primary-active);
+  --color-primary-text: var(--reddb-color-primary-text);
+  --color-red-100: var(--reddb-color-red-100);
+  --color-red-300: var(--reddb-color-red-300);
+  --color-red-400: var(--reddb-color-red-400);
+  --color-red-50: var(--reddb-color-red-50);
+  --color-red-500: var(--reddb-color-red-500);
+  --color-red-600: var(--reddb-color-red-600);
+  --color-red-700: var(--reddb-color-red-700);
+  --color-red-900: var(--reddb-color-red-900);
+  --color-red-950: var(--reddb-color-red-950);
+  --color-scrim: var(--reddb-color-scrim);
+  --color-series-1: var(--reddb-color-series-1);
+  --color-series-1-on-dark: var(--reddb-color-series-1-on-dark);
+  --color-series-1-on-light: var(--reddb-color-series-1-on-light);
+  --color-series-2: var(--reddb-color-series-2);
+  --color-series-2-on-dark: var(--reddb-color-series-2-on-dark);
+  --color-series-2-on-light: var(--reddb-color-series-2-on-light);
+  --color-series-3: var(--reddb-color-series-3);
+  --color-series-3-on-dark: var(--reddb-color-series-3-on-dark);
+  --color-series-3-on-light: var(--reddb-color-series-3-on-light);
+  --color-series-4: var(--reddb-color-series-4);
+  --color-series-4-on-dark: var(--reddb-color-series-4-on-dark);
+  --color-series-4-on-light: var(--reddb-color-series-4-on-light);
+  --color-series-5: var(--reddb-color-series-5);
+  --color-series-5-on-dark: var(--reddb-color-series-5-on-dark);
+  --color-series-5-on-light: var(--reddb-color-series-5-on-light);
+  --color-series-6: var(--reddb-color-series-6);
+  --color-series-6-on-dark: var(--reddb-color-series-6-on-dark);
+  --color-series-6-on-light: var(--reddb-color-series-6-on-light);
+  --color-series-highlight-on-dark: var(--reddb-color-series-highlight-on-dark);
+  --color-series-highlight-on-light: var(--reddb-color-series-highlight-on-light);
+  --color-surface-muted: var(--reddb-color-surface-muted);
+  --color-teal-400: var(--reddb-color-teal-400);
+  --color-teal-600: var(--reddb-color-teal-600);
+  --color-violet-400: var(--reddb-color-violet-400);
+  --color-violet-600: var(--reddb-color-violet-600);
+  --duration-fast: var(--reddb-duration-fast);
+  --duration-instant: var(--reddb-duration-instant);
+  --duration-normal: var(--reddb-duration-normal);
+  --duration-slow: var(--reddb-duration-slow);
+  --ease-emphasized: var(--reddb-easing-emphasized);
+  --ease-entrance: var(--reddb-easing-entrance);
+  --ease-exit: var(--reddb-easing-exit);
+  --ease-standard: var(--reddb-easing-standard);
+  --font-mono: var(--reddb-font-family-mono);
+  --font-sans: var(--reddb-font-family-sans);
+  --font-weight-bold: var(--reddb-font-weight-bold);
+  --font-weight-medium: var(--reddb-font-weight-medium);
+  --font-weight-regular: var(--reddb-font-weight-regular);
+  --leading-display: var(--reddb-line-height-display);
+  --leading-normal: var(--reddb-line-height-normal);
+  --leading-relaxed: var(--reddb-line-height-relaxed);
+  --leading-snug: var(--reddb-line-height-snug);
+  --leading-tight: var(--reddb-line-height-tight);
+  --radius-2xl: var(--reddb-radius-2xl);
+  --radius-full: var(--reddb-radius-full);
+  --radius-lg: var(--reddb-radius-lg);
+  --radius-md: var(--reddb-radius-md);
+  --radius-none: var(--reddb-radius-none);
+  --radius-sm: var(--reddb-radius-sm);
+  --radius-xl: var(--reddb-radius-xl);
+  --shadow-elevation-base: var(--reddb-shadow-elevation-base);
+  --shadow-elevation-overlay: var(--reddb-shadow-elevation-overlay);
+  --shadow-elevation-raised: var(--reddb-shadow-elevation-raised);
+  --shadow-elevation-sunken: var(--reddb-shadow-elevation-sunken);
+  --shadow-lg: var(--reddb-shadow-lg);
+  --shadow-md: var(--reddb-shadow-md);
+  --shadow-sm: var(--reddb-shadow-sm);
+  --shadow-xl: var(--reddb-shadow-xl);
+  --spacing-0: var(--reddb-spacing-0);
+  --spacing-0_5: var(--reddb-spacing-0_5);
+  --spacing-1: var(--reddb-spacing-1);
+  --spacing-10: var(--reddb-spacing-10);
+  --spacing-12: var(--reddb-spacing-12);
+  --spacing-16: var(--reddb-spacing-16);
+  --spacing-2: var(--reddb-spacing-2);
+  --spacing-20: var(--reddb-spacing-20);
+  --spacing-24: var(--reddb-spacing-24);
+  --spacing-3: var(--reddb-spacing-3);
+  --spacing-4: var(--reddb-spacing-4);
+  --spacing-5: var(--reddb-spacing-5);
+  --spacing-6: var(--reddb-spacing-6);
+  --spacing-8: var(--reddb-spacing-8);
+  --spacing-px: var(--reddb-spacing-px);
+  --text-2xl: var(--reddb-font-size-2xl);
+  --text-2xl--line-height: var(--reddb-line-height-snug);
+  --text-3xl: var(--reddb-font-size-3xl);
+  --text-3xl--line-height: var(--reddb-line-height-tight);
+  --text-4xl: var(--reddb-font-size-4xl);
+  --text-4xl--line-height: var(--reddb-line-height-tight);
+  --text-5xl: var(--reddb-font-size-5xl);
+  --text-5xl--line-height: var(--reddb-line-height-tight);
+  --text-6xl: var(--reddb-font-size-6xl);
+  --text-6xl--line-height: var(--reddb-line-height-tight);
+  --text-base: var(--reddb-font-size-base);
+  --text-base--line-height: var(--reddb-line-height-normal);
+  --text-display-lg: var(--reddb-font-size-display-lg);
+  --text-display-lg--line-height: var(--reddb-line-height-display);
+  --text-display-md: var(--reddb-font-size-display-md);
+  --text-display-md--line-height: var(--reddb-line-height-display);
+  --text-display-sm: var(--reddb-font-size-display-sm);
+  --text-display-sm--line-height: var(--reddb-line-height-display);
+  --text-editable-lg: var(--reddb-editable-text-lg);
+  --text-editable-lg--line-height: var(--reddb-line-height-normal);
+  --text-editable-md: var(--reddb-editable-text-md);
+  --text-editable-md--line-height: var(--reddb-line-height-normal);
+  --text-editable-sm: var(--reddb-editable-text-sm);
+  --text-editable-sm--line-height: var(--reddb-line-height-normal);
+  --text-lg: var(--reddb-font-size-lg);
+  --text-lg--line-height: var(--reddb-line-height-normal);
+  --text-sm: var(--reddb-font-size-sm);
+  --text-sm--line-height: var(--reddb-line-height-normal);
+  --text-xl: var(--reddb-font-size-xl);
+  --text-xl--line-height: var(--reddb-line-height-snug);
+  --text-xs: var(--reddb-font-size-xs);
+  --text-xs--line-height: var(--reddb-line-height-normal);
+  --tracking-normal: var(--reddb-letter-spacing-normal);
+  --tracking-tight: var(--reddb-letter-spacing-tight);
+  --tracking-tighter: var(--reddb-letter-spacing-tighter);
+  --tracking-wide: var(--reddb-letter-spacing-wide);
+}
+/* Type roles (ADR 0025), inline: a utility reads the role where it is used, so a Theme island's type applies. */
+@theme inline {
+  --text-body: var(--reddb-type-body-font-size);
+  --text-body--font-weight: var(--reddb-type-body-font-weight);
+  --text-body--letter-spacing: var(--reddb-type-body-letter-spacing);
+  --text-body--line-height: var(--reddb-type-body-line-height);
+  --text-caption: var(--reddb-type-caption-font-size);
+  --text-caption--font-weight: var(--reddb-type-caption-font-weight);
+  --text-caption--letter-spacing: var(--reddb-type-caption-letter-spacing);
+  --text-caption--line-height: var(--reddb-type-caption-line-height);
+  --text-display: var(--reddb-type-display-font-size);
+  --text-display--font-weight: var(--reddb-type-display-font-weight);
+  --text-display--letter-spacing: var(--reddb-type-display-letter-spacing);
+  --text-display--line-height: var(--reddb-type-display-line-height);
+  --text-eyebrow: var(--reddb-type-eyebrow-font-size);
+  --text-eyebrow--font-weight: var(--reddb-type-eyebrow-font-weight);
+  --text-eyebrow--letter-spacing: var(--reddb-type-eyebrow-letter-spacing);
+  --text-eyebrow--line-height: var(--reddb-type-eyebrow-line-height);
+  --text-heading: var(--reddb-type-heading-font-size);
+  --text-heading--font-weight: var(--reddb-type-heading-font-weight);
+  --text-heading--letter-spacing: var(--reddb-type-heading-letter-spacing);
+  --text-heading--line-height: var(--reddb-type-heading-line-height);
+  --text-title: var(--reddb-type-title-font-size);
+  --text-title--font-weight: var(--reddb-type-title-font-weight);
+  --text-title--letter-spacing: var(--reddb-type-title-letter-spacing);
+  --text-title--line-height: var(--reddb-type-title-line-height);
+}

package/vendor/ds/tokens/density-comfortable.css

@@ -0,0 +1,51 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+/* Density stop: comfortable — the neutral the components ship in, applied at the root until re-declared. */
+/* Spatial tokens only (ADR 0003): typography, radius, and colour are untouched. */
+:where(:root, :host),
+[data-density="comfortable"],
+:host([data-density="comfortable"]) {
+  --reddb-spatial-control-height-lg: var(--reddb-spacing-10);
+  --reddb-spatial-control-height-md: var(--reddb-spacing-8);
+  --reddb-spatial-control-height-sm: var(--reddb-spacing-6);
+  --reddb-spatial-gap-lg: var(--reddb-spacing-3);
+  --reddb-spatial-gap-md: var(--reddb-spacing-2);
+  --reddb-spatial-gap-sm: var(--reddb-spacing-1);
+  --reddb-spatial-icon-size-lg: var(--reddb-spacing-5);
+  --reddb-spatial-icon-size-md: var(--reddb-spacing-4);
+  --reddb-spatial-icon-size-sm: var(--reddb-spacing-3);
+  --reddb-spatial-inset-lg: var(--reddb-spacing-6);
+  --reddb-spatial-inset-md: var(--reddb-spacing-4);
+  --reddb-spatial-inset-sm: var(--reddb-spacing-3);
+  --reddb-spatial-layout-gap-lg: var(--reddb-spacing-8);
+  --reddb-spatial-layout-gap-md: var(--reddb-spacing-6);
+  --reddb-spatial-layout-gap-sm: var(--reddb-spacing-4);
+  --reddb-spatial-section-gap: var(--reddb-spacing-16);
+  --reddb-spatial-section-inset: var(--reddb-spacing-12);
+  --reddb-spatial-switch-thumb-size: var(--reddb-spacing-4);
+  --reddb-spatial-switch-track-height: var(--reddb-spacing-6);
+  --reddb-spatial-target-min: var(--reddb-spacing-6);
+}
+/* Touch floor (ADR 0022): under a coarse primary pointer every pointer target is at least 44px. */
+@media (pointer: coarse) {
+  :where(:root, :host),
+  [data-density="comfortable"],
+  :host([data-density="comfortable"]) {
+    --reddb-spatial-control-height-lg: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-md: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-sm: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-target-min: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+  }
+}
+/* Editable text (ADR 0022): 16px under a coarse pointer, so iOS does not zoom a focused field. */
+/* A pointer rule, not a Density one: the same at every stop, and it wins over every Theme. */
+@media (pointer: coarse) {
+  :root,
+  :host,
+  [data-theme],
+  :host([data-theme]) {
+    --reddb-editable-text-lg: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-md: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-sm: var(--reddb-font-size-base) !important;
+  }
+}

package/vendor/ds/tokens/density-compact.css

@@ -0,0 +1,49 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+/* Density stop: compact — a measured step between maximum density and the neutral. */
+/* Spatial tokens only (ADR 0003): typography, radius, and colour are untouched. */
+[data-density="compact"],
+:host([data-density="compact"]) {
+  --reddb-spatial-control-height-lg: calc((var(--reddb-spacing-8) + var(--reddb-spacing-10)) / 2);
+  --reddb-spatial-control-height-md: calc((var(--reddb-spacing-6) + var(--reddb-spacing-8)) / 2);
+  --reddb-spatial-control-height-sm: var(--reddb-spacing-6);
+  --reddb-spatial-gap-lg: calc((var(--reddb-spacing-2) + var(--reddb-spacing-3)) / 2);
+  --reddb-spatial-gap-md: calc((var(--reddb-spacing-1) + var(--reddb-spacing-2)) / 2);
+  --reddb-spatial-gap-sm: calc((var(--reddb-spacing-0_5) + var(--reddb-spacing-1)) / 2);
+  --reddb-spatial-icon-size-lg: calc((var(--reddb-spacing-4) + var(--reddb-spacing-5)) / 2);
+  --reddb-spatial-icon-size-md: calc((var(--reddb-spacing-3) + var(--reddb-spacing-4)) / 2);
+  --reddb-spatial-icon-size-sm: var(--reddb-spacing-3);
+  --reddb-spatial-inset-lg: calc((var(--reddb-spacing-5) + var(--reddb-spacing-6)) / 2);
+  --reddb-spatial-inset-md: calc((var(--reddb-spacing-3) + var(--reddb-spacing-4)) / 2);
+  --reddb-spatial-inset-sm: calc((var(--reddb-spacing-2) + var(--reddb-spacing-3)) / 2);
+  --reddb-spatial-layout-gap-lg: var(--reddb-spacing-6);
+  --reddb-spatial-layout-gap-md: var(--reddb-spacing-5);
+  --reddb-spatial-layout-gap-sm: var(--reddb-spacing-3);
+  --reddb-spatial-section-gap: var(--reddb-spacing-12);
+  --reddb-spatial-section-inset: var(--reddb-spacing-10);
+  --reddb-spatial-switch-thumb-size: calc((var(--reddb-spacing-3) + var(--reddb-spacing-4)) / 2);
+  --reddb-spatial-switch-track-height: calc((var(--reddb-spacing-5) + var(--reddb-spacing-6)) / 2);
+  --reddb-spatial-target-min: var(--reddb-spacing-6);
+}
+/* Touch floor (ADR 0022): under a coarse primary pointer every pointer target is at least 44px. */
+@media (pointer: coarse) {
+  [data-density="compact"],
+  :host([data-density="compact"]) {
+    --reddb-spatial-control-height-lg: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-md: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-sm: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-target-min: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+  }
+}
+/* Editable text (ADR 0022): 16px under a coarse pointer, so iOS does not zoom a focused field. */
+/* A pointer rule, not a Density one: the same at every stop, and it wins over every Theme. */
+@media (pointer: coarse) {
+  :root,
+  :host,
+  [data-theme],
+  :host([data-theme]) {
+    --reddb-editable-text-lg: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-md: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-sm: var(--reddb-font-size-base) !important;
+  }
+}

package/vendor/ds/tokens/density-spacious.css

@@ -0,0 +1,49 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+/* Density stop: spacious — content breathes and guides attention (the marketing stop: app-landing). */
+/* Spatial tokens only (ADR 0003): typography, radius, and colour are untouched. */
+[data-density="spacious"],
+:host([data-density="spacious"]) {
+  --reddb-spatial-control-height-lg: var(--reddb-spacing-12);
+  --reddb-spatial-control-height-md: var(--reddb-spacing-10);
+  --reddb-spatial-control-height-sm: var(--reddb-spacing-8);
+  --reddb-spatial-gap-lg: var(--reddb-spacing-4);
+  --reddb-spatial-gap-md: var(--reddb-spacing-3);
+  --reddb-spatial-gap-sm: var(--reddb-spacing-2);
+  --reddb-spatial-icon-size-lg: var(--reddb-spacing-6);
+  --reddb-spatial-icon-size-md: var(--reddb-spacing-5);
+  --reddb-spatial-icon-size-sm: var(--reddb-spacing-4);
+  --reddb-spatial-inset-lg: var(--reddb-spacing-8);
+  --reddb-spatial-inset-md: var(--reddb-spacing-5);
+  --reddb-spatial-inset-sm: var(--reddb-spacing-4);
+  --reddb-spatial-layout-gap-lg: var(--reddb-spacing-12);
+  --reddb-spatial-layout-gap-md: var(--reddb-spacing-10);
+  --reddb-spatial-layout-gap-sm: var(--reddb-spacing-6);
+  --reddb-spatial-section-gap: var(--reddb-spacing-24);
+  --reddb-spatial-section-inset: var(--reddb-spacing-20);
+  --reddb-spatial-switch-thumb-size: var(--reddb-spacing-5);
+  --reddb-spatial-switch-track-height: var(--reddb-spacing-8);
+  --reddb-spatial-target-min: var(--reddb-spacing-6);
+}
+/* Touch floor (ADR 0022): under a coarse primary pointer every pointer target is at least 44px. */
+@media (pointer: coarse) {
+  [data-density="spacious"],
+  :host([data-density="spacious"]) {
+    --reddb-spatial-control-height-lg: var(--reddb-spacing-12);
+    --reddb-spatial-control-height-md: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-sm: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-target-min: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+  }
+}
+/* Editable text (ADR 0022): 16px under a coarse pointer, so iOS does not zoom a focused field. */
+/* A pointer rule, not a Density one: the same at every stop, and it wins over every Theme. */
+@media (pointer: coarse) {
+  :root,
+  :host,
+  [data-theme],
+  :host([data-theme]) {
+    --reddb-editable-text-lg: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-md: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-sm: var(--reddb-font-size-base) !important;
+  }
+}

package/vendor/ds/tokens/density-tiny.css

@@ -0,0 +1,49 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+/* Density stop: tiny — the former compact contract for maximum information density. */
+/* Spatial tokens only (ADR 0003): typography, radius, and colour are untouched. */
+[data-density="tiny"],
+:host([data-density="tiny"]) {
+  --reddb-spatial-control-height-lg: var(--reddb-spacing-8);
+  --reddb-spatial-control-height-md: var(--reddb-spacing-6);
+  --reddb-spatial-control-height-sm: var(--reddb-spacing-6);
+  --reddb-spatial-gap-lg: var(--reddb-spacing-2);
+  --reddb-spatial-gap-md: var(--reddb-spacing-1);
+  --reddb-spatial-gap-sm: var(--reddb-spacing-0_5);
+  --reddb-spatial-icon-size-lg: var(--reddb-spacing-4);
+  --reddb-spatial-icon-size-md: var(--reddb-spacing-3);
+  --reddb-spatial-icon-size-sm: var(--reddb-spacing-3);
+  --reddb-spatial-inset-lg: var(--reddb-spacing-5);
+  --reddb-spatial-inset-md: var(--reddb-spacing-3);
+  --reddb-spatial-inset-sm: var(--reddb-spacing-2);
+  --reddb-spatial-layout-gap-lg: var(--reddb-spacing-5);
+  --reddb-spatial-layout-gap-md: var(--reddb-spacing-4);
+  --reddb-spatial-layout-gap-sm: var(--reddb-spacing-2);
+  --reddb-spatial-section-gap: var(--reddb-spacing-10);
+  --reddb-spatial-section-inset: var(--reddb-spacing-8);
+  --reddb-spatial-switch-thumb-size: var(--reddb-spacing-3);
+  --reddb-spatial-switch-track-height: var(--reddb-spacing-5);
+  --reddb-spatial-target-min: var(--reddb-spacing-6);
+}
+/* Touch floor (ADR 0022): under a coarse primary pointer every pointer target is at least 44px. */
+@media (pointer: coarse) {
+  [data-density="tiny"],
+  :host([data-density="tiny"]) {
+    --reddb-spatial-control-height-lg: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-md: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-control-height-sm: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+    --reddb-spatial-target-min: calc((var(--reddb-spacing-10) + var(--reddb-spacing-12)) / 2);
+  }
+}
+/* Editable text (ADR 0022): 16px under a coarse pointer, so iOS does not zoom a focused field. */
+/* A pointer rule, not a Density one: the same at every stop, and it wins over every Theme. */
+@media (pointer: coarse) {
+  :root,
+  :host,
+  [data-theme],
+  :host([data-theme]) {
+    --reddb-editable-text-lg: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-md: var(--reddb-font-size-base) !important;
+    --reddb-editable-text-sm: var(--reddb-font-size-base) !important;
+  }
+}

package/vendor/ds/tokens/tokens.css

@@ -0,0 +1,182 @@
+/* Generated by @reddb-io/tokens from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/tokens build`. */
+:root,
+:host {
+  --reddb-color-amber-100: #feedcb;
+  --reddb-color-amber-400: #fbbf24;
+  --reddb-color-amber-50: #fef3de;
+  --reddb-color-amber-600: #a47d18;
+  --reddb-color-amber-700: #735811;
+  --reddb-color-amber-900: #322401;
+  --reddb-color-amber-950: #211600;
+  --reddb-color-azure-400: #98c1f6;
+  --reddb-color-azure-600: #2e86ec;
+  --reddb-color-blue-100: #e5f1fe;
+  --reddb-color-blue-400: #57a9ff;
+  --reddb-color-blue-50: #eef5fe;
+  --reddb-color-blue-600: #4586ca;
+  --reddb-color-blue-700: #305e8e;
+  --reddb-color-blue-900: #0d2843;
+  --reddb-color-blue-950: #07192c;
+  --reddb-color-border-strong: var(--reddb-color-neutral-300);
+  --reddb-color-border-subtle: var(--reddb-color-neutral-200);
+  --reddb-color-brand-active: var(--reddb-color-red-700);
+  --reddb-color-brand-hover: var(--reddb-color-red-600);
+  --reddb-color-brand-on-primary: var(--reddb-color-neutral-950);
+  --reddb-color-brand-primary: var(--reddb-color-red-500);
+  --reddb-color-feedback-danger-on-dark: var(--reddb-color-red-300);
+  --reddb-color-feedback-danger-on-light: var(--reddb-color-red-700);
+  --reddb-color-feedback-info-on-dark: var(--reddb-color-blue-400);
+  --reddb-color-feedback-info-on-light: var(--reddb-color-blue-700);
+  --reddb-color-feedback-success-on-dark: var(--reddb-color-green-400);
+  --reddb-color-feedback-success-on-light: var(--reddb-color-green-700);
+  --reddb-color-feedback-warning-on-dark: var(--reddb-color-amber-400);
+  --reddb-color-feedback-warning-on-light: var(--reddb-color-amber-700);
+  --reddb-color-gold-400: #c8a918;
+  --reddb-color-gold-600: #977f0f;
+  --reddb-color-green-100: #d8f9e0;
+  --reddb-color-green-400: #4ade80;
+  --reddb-color-green-50: #e6fbeb;
+  --reddb-color-green-600: #329556;
+  --reddb-color-green-700: #23683c;
+  --reddb-color-green-900: #0a2f17;
+  --reddb-color-green-950: #051e0e;
+  --reddb-color-ink: var(--reddb-color-neutral-950);
+  --reddb-color-magenta-400: #d535bd;
+  --reddb-color-magenta-600: #8a1f7a;
+  --reddb-color-neutral-0: #ffffff;
+  --reddb-color-neutral-100: #e7e9ee;
+  --reddb-color-neutral-200: #d3d6de;
+  --reddb-color-neutral-300: #b3b8c4;
+  --reddb-color-neutral-400: #8b91a1;
+  --reddb-color-neutral-50: #f4f5f7;
+  --reddb-color-neutral-500: #666d7e;
+  --reddb-color-neutral-600: #4a5162;
+  --reddb-color-neutral-700: #333949;
+  --reddb-color-neutral-800: #1e222d;
+  --reddb-color-neutral-900: #12141b;
+  --reddb-color-neutral-950: #07080a;
+  --reddb-color-orange-400: #f7b37b;
+  --reddb-color-orange-600: #945820;
+  --reddb-color-paper: var(--reddb-color-neutral-50);
+  --reddb-color-red-100: #feeaea;
+  --reddb-color-red-300: #ff7899;
+  --reddb-color-red-400: #ff6389;
+  --reddb-color-red-50: #fef1f1;
+  --reddb-color-red-500: #ff2056;
+  --reddb-color-red-600: #d11a46;
+  --reddb-color-red-700: #ad163a;
+  --reddb-color-red-900: #3f191c;
+  --reddb-color-red-950: #2a0f11;
+  --reddb-color-series-1-on-dark: var(--reddb-color-azure-400);
+  --reddb-color-series-1-on-light: var(--reddb-color-azure-600);
+  --reddb-color-series-2-on-dark: var(--reddb-color-orange-400);
+  --reddb-color-series-2-on-light: var(--reddb-color-orange-600);
+  --reddb-color-series-3-on-dark: var(--reddb-color-teal-400);
+  --reddb-color-series-3-on-light: var(--reddb-color-teal-600);
+  --reddb-color-series-4-on-dark: var(--reddb-color-violet-400);
+  --reddb-color-series-4-on-light: var(--reddb-color-violet-600);
+  --reddb-color-series-5-on-dark: var(--reddb-color-gold-400);
+  --reddb-color-series-5-on-light: var(--reddb-color-gold-600);
+  --reddb-color-series-6-on-dark: var(--reddb-color-magenta-400);
+  --reddb-color-series-6-on-light: var(--reddb-color-magenta-600);
+  --reddb-color-series-highlight-on-dark: var(--reddb-color-red-500);
+  --reddb-color-series-highlight-on-light: var(--reddb-color-red-500);
+  --reddb-color-surface-muted: var(--reddb-color-neutral-100);
+  --reddb-color-teal-400: #25cdac;
+  --reddb-color-teal-600: #168b74;
+  --reddb-color-violet-400: #aa89fc;
+  --reddb-color-violet-600: #7713e6;
+  --reddb-duration-fast: 150ms;
+  --reddb-duration-instant: 75ms;
+  --reddb-duration-normal: 250ms;
+  --reddb-duration-slow: 400ms;
+  --reddb-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --reddb-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
+  --reddb-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --reddb-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --reddb-font-family-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --reddb-font-family-sans: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --reddb-font-size-2xl: 1.5rem;
+  --reddb-font-size-3xl: 1.875rem;
+  --reddb-font-size-4xl: 2.25rem;
+  --reddb-font-size-5xl: 3rem;
+  --reddb-font-size-6xl: 3.75rem;
+  --reddb-font-size-base: 1rem;
+  --reddb-font-size-display-lg: 8rem;
+  --reddb-font-size-display-md: 6rem;
+  --reddb-font-size-display-sm: 4.5rem;
+  --reddb-font-size-lg: 1.125rem;
+  --reddb-font-size-sm: 0.875rem;
+  --reddb-font-size-xl: 1.25rem;
+  --reddb-font-size-xs: 0.75rem;
+  --reddb-font-weight-bold: 700;
+  --reddb-font-weight-medium: 500;
+  --reddb-font-weight-regular: 400;
+  --reddb-letter-spacing-normal: 0em;
+  --reddb-letter-spacing-tight: -0.02em;
+  --reddb-letter-spacing-tighter: -0.04em;
+  --reddb-letter-spacing-wide: 0.04em;
+  --reddb-line-height-display: 1;
+  --reddb-line-height-normal: 1.5;
+  --reddb-line-height-relaxed: 1.65;
+  --reddb-line-height-snug: 1.25;
+  --reddb-line-height-tight: 1.1;
+  --reddb-radius-2xl: 1rem;
+  --reddb-radius-full: 9999px;
+  --reddb-radius-lg: 0.5rem;
+  --reddb-radius-md: 0.375rem;
+  --reddb-radius-none: 0rem;
+  --reddb-radius-sm: 0.125rem;
+  --reddb-radius-xl: 0.75rem;
+  --reddb-shadow-lg: 0px 8px 24px 0px color-mix(in srgb, #07080a 20%, transparent);
+  --reddb-shadow-md: 0px 2px 8px 0px color-mix(in srgb, #07080a 16%, transparent);
+  --reddb-shadow-sm: 0px 1px 2px 0px color-mix(in srgb, #07080a 12%, transparent);
+  --reddb-shadow-xl: 0px 16px 48px 0px color-mix(in srgb, #07080a 24%, transparent);
+  --reddb-spacing-0: 0rem;
+  --reddb-spacing-0_5: 0.125rem;
+  --reddb-spacing-1: 0.25rem;
+  --reddb-spacing-10: 2.5rem;
+  --reddb-spacing-12: 3rem;
+  --reddb-spacing-16: 4rem;
+  --reddb-spacing-2: 0.5rem;
+  --reddb-spacing-20: 5rem;
+  --reddb-spacing-24: 6rem;
+  --reddb-spacing-3: 0.75rem;
+  --reddb-spacing-4: 1rem;
+  --reddb-spacing-5: 1.25rem;
+  --reddb-spacing-6: 1.5rem;
+  --reddb-spacing-8: 2rem;
+  --reddb-spacing-px: 1px;
+}
+/* DS-owned roles, not Brand tokens: responsive steps (ADR 0021), editable text (ADR 0022) and fluid type sizes (ADR 0025). */
+:root,
+:host {
+  --reddb-breakpoint-2xl: 96rem;
+  --reddb-breakpoint-lg: 64rem;
+  --reddb-breakpoint-md: 48rem;
+  --reddb-breakpoint-sm: 40rem;
+  --reddb-breakpoint-xl: 80rem;
+  --reddb-container-2xl: 42rem;
+  --reddb-container-2xs: 18rem;
+  --reddb-container-3xl: 48rem;
+  --reddb-container-3xs: 16rem;
+  --reddb-container-4xl: 56rem;
+  --reddb-container-5xl: 64rem;
+  --reddb-container-6xl: 72rem;
+  --reddb-container-7xl: 80rem;
+  --reddb-container-content: 48rem;
+  --reddb-container-full: 100%;
+  --reddb-container-lg: 32rem;
+  --reddb-container-md: 28rem;
+  --reddb-container-prose: 65ch;
+  --reddb-container-sm: 24rem;
+  --reddb-container-wide: 80rem;
+  --reddb-container-xl: 36rem;
+  --reddb-container-xs: 20rem;
+  --reddb-editable-text-lg: var(--reddb-font-size-base);
+  --reddb-editable-text-md: var(--reddb-font-size-sm);
+  --reddb-editable-text-sm: var(--reddb-font-size-sm);
+  --reddb-fluid-text-3xl-5xl: clamp(var(--reddb-font-size-3xl), 1.2rem + 2.8125cqi, var(--reddb-font-size-5xl));
+  --reddb-fluid-text-5xl-display-sm: clamp(var(--reddb-font-size-5xl), 2.1rem + 3.75cqi, var(--reddb-font-size-display-sm));
+}