@reddb-io/ui-kit 0.3.4 → 0.3.5

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

@@ -0,0 +1,53 @@
+// The Logo's styling, and nothing else.
+//
+// Every class the component wears lives here, in one `tv()` call, by the same
+// convention the application Kit follows: the component file holds behavior
+// only, and the anti-hardcode lint has a single place to read a component's
+// whole visual vocabulary.
+//
+// There is very little to say, and that is the point. The Logo shows a Brand
+// drawing the DS may not recolor (ADR 0004), so it names no colour for the
+// Mark at all — the one colour here is the focus ring's, which belongs to the
+// application's surface and not to the Brand's drawing, and is named through
+// the Theme Layer's utility like every other colour in a Kit.
+//
+// Mark geometry remains absent: clearspace and size are arithmetic on the
+// caller's `size` (logo.box.ts), lengths no Theme or Density stop may reassign.
+// Density instead owns the separation outside that licensed box, so a compact
+// masthead and a spacious one can place the same unmodified Logo honestly.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+const INTERACTIVE = {
+  /**
+   * The `href` form. The ink focus outline (ADR 0023) is drawn on this
+   * element — the box that already INCLUDES the clearspace — so it falls
+   * outside the clearspace by construction; its 2px offset only moves it
+   * further out.
+   */
+  true: "rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+  /** The default: the pure Mark, in a footer or as an avatar. */
+  false: "",
+} as const;
+
+export const logo = tv({
+  // `inline-flex` so the box is exactly the Mark plus its clearspace and no
+  // line-height creeps in underneath; `shrink-0` so a flex parent cannot
+  // squeeze the clearspace away, which would be the one opt-out ADR 0004 says
+  // there is none of.
+  base: [
+    "m-[var(--reddb-spatial-gap-sm)]",
+    "inline-flex shrink-0 items-center justify-center",
+  ].join(" "),
+  variants: { interactive: INTERACTIVE },
+  defaultVariants: { interactive: false },
+});
+
+/**
+ * The Mark itself. `block` because an inline image sits on a text baseline and
+ * would push the clearspace out of true; nothing else, because everything the
+ * drawing looks like is the Brand's.
+ */
+export const logoMark = tv({ base: "block" });
+
+export type LogoVariants = VariantProps<typeof logo>;

package/vendor/ds/kits/base/src/marks/reddb-horizontal-color.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.712 100" width="397.712" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+  <g transform="translate(130 38) scale(0.86835)">
+    <g transform="translate(0 70) scale(0.1 -0.1)" fill="#07080a">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-horizontal-inverse.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.712 100" width="397.712" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+  <g transform="translate(130 38) scale(0.86835)">
+    <g transform="translate(0 70) scale(0.1 -0.1)" fill="#f4f5f7">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-icon-color.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-stacked-color.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 154.423" width="140" height="154.423" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <g transform="translate(20 0)">
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+  </g>
+  <g transform="translate(0 122) scale(0.4541)">
+    <g transform="translate(0 70) scale(0.1 -0.1)" fill="#07080a">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-stacked-inverse.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 154.423" width="140" height="154.423" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <g transform="translate(20 0)">
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+  </g>
+  <g transform="translate(0 122) scale(0.4541)">
+    <g transform="translate(0 70) scale(0.1 -0.1)" fill="#f4f5f7">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-symbol-black.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#07080a"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#f4f5f7"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-symbol-color.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#ff2056"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-symbol-knockout.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path fill-rule="evenodd" d="M0 0 H58 L100 38 V100 H0 Z M16.676 86.095 L16.676 28.905 L41.513 28.905 Q46.905 28.905 50.908 30.784 Q54.912 32.663 57.118 36.095 Q59.324 39.526 59.324 44.183 L59.324 45.163 Q59.324 50.31 56.873 53.497 Q54.422 56.683 50.827 58.154 L50.827 59.624 Q54.095 59.788 55.892 61.871 Q57.69 63.954 57.69 67.386 L57.69 86.095 L46.905 86.095 L46.905 68.938 Q46.905 66.977 45.884 65.752 Q44.863 64.526 42.493 64.526 L27.461 64.526 L27.461 86.095 ZM27.461 55.843 L41.402 55.843 Q45.549 55.843 47.887 53.468 Q50.225 51.093 50.225 47.181 L50.225 46.25 Q50.225 42.338 47.931 39.963 Q45.637 37.588 41.402 37.588 L27.461 37.588 Z" fill="#ff2056"/>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-symbol-white.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <path d="M0 0 H58 L100 38 V100 H0 Z" fill="#f4f5f7"/>
+  <g transform="translate(11.284 86.095) scale(0.0817 -0.0817)" fill="#07080a"><path d="M66 0 L66 700 L370 700 Q436 700 485 677 Q534 654 561 612 Q588 570 588 513 L588 501 Q588 438 558 399 Q528 360 484 342 L484 324 Q524 322 546 296.5 Q568 271 568 229 L568 0 L436 0 L436 210 Q436 234 423.5 249 Q411 264 382 264 L198 264 L198 0 ZM198 370.28 L368.64 370.28 Q419.4 370.28 448.02 399.35 Q476.64 428.42 476.64 476.3 L476.64 487.7 Q476.64 535.58 448.56 564.65 Q420.48 593.72 368.64 593.72 L198 593.72 Z"/></g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-wordmark-black.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.3 71.4" width="308.3" height="71.4" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <g transform="translate(0 70) scale(0.1 -0.1)" fill="#07080a">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/marks/reddb-wordmark-white.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.3 71.4" width="308.3" height="71.4" role="img" aria-label="RedDB">
+  <title>RedDB</title>
+  <g transform="translate(0 70) scale(0.1 -0.1)" fill="#f4f5f7">
+    <path d="M66 0L66 700L370 700Q436 700 485 677Q534 654 561 612Q588 570 588 513L588 501Q588 438 558 399Q528 360 484 342L484 324Q524 322 546 296.5Q568 271 568 229L568 0L436 0L436 210Q436 234 423.5 249Q411 264 382 264L198 264L198 0ZM198 384L356 384Q403 384 429.5 409.5Q456 435 456 477L456 487Q456 529 430 554.5Q404 580 356 580L198 580Z" transform="translate(0 0)"/>
+    <path d="M296 -14Q222 -14 165.5 17.5Q109 49 77.5 106.5Q46 164 46 242L46 254Q46 332 77 389.5Q108 447 164 478.5Q220 510 294 510Q367 510 421 477.5Q475 445 505 387.5Q535 330 535 254L535 211L174 211Q176 160 212 128Q248 96 300 96Q353 96 378 119Q403 142 416 170L519 116Q505 90 478.5 59.5Q452 29 408 7.5Q364 -14 296 -14ZM175 305L407 305Q403 348 372.5 374Q342 400 293 400Q242 400 212 374Q182 348 175 305Z" transform="translate(614 0)"/>
+    <path d="M270 -14Q211 -14 159.5 15.5Q108 45 77 102Q46 159 46 240L46 256Q46 337 77 394Q108 451 159 480.5Q210 510 270 510Q315 510 345.5 499.5Q376 489 395 473Q414 457 424 439L442 439L442 700L568 700L568 0L444 0L444 60L426 60Q409 32 373.5 9Q338 -14 270 -14ZM308 96Q366 96 405 133.5Q444 171 444 243L444 253Q444 325 405.5 362.5Q367 400 308 400Q250 400 211 362.5Q172 325 172 253L172 243Q172 171 211 133.5Q250 96 308 96Z" transform="translate(1173 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L334 700Q475 700 548.5 628.5Q622 557 622 416L622 284Q622 143 548.5 71.5Q475 0 334 0ZM270 120L336 120Q416 120 453 162Q490 204 490 280L490 420Q490 497 453 538.5Q416 580 336 580L270 580Z" transform="translate(1793 0)"/>
+    <path d="M46 0L46 116L138 116L138 584L46 584L46 700L406 700Q470 700 517.5 678.5Q565 657 591.5 617.5Q618 578 618 523L618 513Q618 465 600 434.5Q582 404 557.5 387.5Q533 371 511 364L511 346Q533 340 559 323.5Q585 307 603.5 276Q622 245 622 195L622 185Q622 127 595 85.5Q568 44 520.5 22Q473 0 410 0ZM270 120L394 120Q437 120 463.5 141Q490 162 490 201L490 211Q490 250 464 271Q438 292 394 292L270 292ZM270 412L392 412Q433 412 459.5 433Q486 454 486 491L486 501Q486 539 460 559.5Q434 580 392 580L270 580Z" transform="translate(2419 0)"/>
+  </g>
+</svg>

package/vendor/ds/kits/base/src/media-object.variants.ts

@@ -0,0 +1,29 @@
+// MediaObject owns only the stable media/content relationship; both regions
+// remain caller-owned.
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ALIGN = {
+  start: { root: "items-start" },
+  center: { root: "items-center" },
+  end: { root: "items-end" },
+} as const;
+
+const GAP = {
+  sm: { root: "gap-[var(--reddb-spatial-gap-sm)]" },
+  md: { root: "gap-[var(--reddb-spatial-gap-md)]" },
+  lg: { root: "gap-[var(--reddb-spatial-gap-lg)]" },
+} as const;
+
+export const mediaObject = tv({
+  slots: {
+    root: "flex min-w-0",
+    media: "shrink-0",
+    content: "min-w-0 flex-1",
+  },
+  variants: { align: ALIGN, gap: GAP },
+  defaultVariants: { align: "start", gap: "md" },
+});
+
+export type MediaObjectVariants = VariantProps<typeof mediaObject>;
+export type MediaObjectAlign = NonNullable<MediaObjectVariants["align"]>;
+export type MediaObjectGap = NonNullable<MediaObjectVariants["gap"]>;

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

@@ -0,0 +1,55 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { TONES, type Tone } from "./tone";
+
+/**
+ * What a measurement means (ADR 0026): ink by default — a measurement is not
+ * an action, so it does not spend the Brand red (DESIGN.md) — or the Feedback
+ * Role a threshold reading carries. Shared with Progress and RadialProgress.
+ */
+export const MEASURE_TONE_FILL = {
+  neutral: "bg-foreground",
+  info: "bg-feedback-info-foreground",
+  success: "bg-feedback-success-foreground",
+  warning: "bg-feedback-warning-foreground",
+  danger: "bg-feedback-danger-foreground",
+} as const satisfies Record<Tone, string>;
+
+export const meter = tv({
+  slots: {
+    root: "flex w-full flex-col gap-[var(--reddb-spatial-gap-sm)] text-foreground",
+    summary: "flex items-baseline justify-between gap-[var(--reddb-spatial-gap-md)]",
+    label: "text-sm font-medium",
+    value: "text-sm tabular-nums text-ink-muted",
+    track: "h-2 w-full overflow-hidden rounded-full bg-muted",
+    indicator: "h-full rounded-full transition-[width] motion-reduce:transition-none",
+  },
+  variants: {
+    layout: {
+      stacked: {},
+      inline: {
+        root: "flex-row items-center gap-[var(--reddb-spatial-gap-md)]",
+        summary: "order-last shrink-0",
+        value: "min-w-[5ch] text-end",
+        track: "min-w-0 flex-1",
+      },
+    },
+    labelHidden: { true: { label: "sr-only" } },
+    tone: {
+      neutral: { indicator: MEASURE_TONE_FILL.neutral },
+      info: { indicator: MEASURE_TONE_FILL.info },
+      success: { indicator: MEASURE_TONE_FILL.success },
+      warning: { indicator: MEASURE_TONE_FILL.warning },
+      danger: { indicator: MEASURE_TONE_FILL.danger },
+      /** @deprecated The accent is an emphasis, not a tone (ADR 0026); kept one release. */
+      primary: { indicator: "bg-primary" },
+    },
+  },
+  defaultVariants: { tone: "neutral", layout: "stacked", labelHidden: false },
+});
+
+export type MeterVariants = VariantProps<typeof meter>;
+export type MeterTone = Tone;
+/** The tones a Meter accepts: the shared vocabulary (ADR 0026). */
+export const METER_TONES = TONES satisfies readonly MeterTone[];
+/** @deprecated `primary` is an emphasis, not a tone (ADR 0026). Removed next release. */
+export type DeprecatedMeterTone = "primary";

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

@@ -0,0 +1,78 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import type { NavbarAlign, NavbarCollapse } from "./core/navbar";
+import { typeRoleMerge } from "./type-roles";
+
+const ALIGN = {
+  start: {
+    brand: "shrink-0",
+    links: "grow justify-start",
+    actions: "ms-auto shrink-0 justify-end",
+  },
+  center: {
+    brand: "grow basis-0 justify-start",
+    links: "shrink-0 justify-center",
+    actions: "grow basis-0 justify-end",
+  },
+} as const satisfies Record<NavbarAlign, Record<"brand" | "links" | "actions", string>>;
+
+// `responsive` collapses on the Navbar's own width, not the window's (ADR
+// 0021): the root is a named size container, and the rail appears from the
+// DS's `3xl` container step (48rem). A Navbar in a narrow column or a phone
+// mockup therefore shows its compact arrangement on any screen.
+const COLLAPSE = {
+  responsive: {
+    rail: "hidden @3xl/navbar:flex",
+    compact: "flex @3xl/navbar:hidden",
+    panel: "@3xl/navbar:hidden",
+  },
+  expanded: { rail: "flex", compact: "hidden", panel: "hidden" },
+  collapsed: { rail: "hidden", compact: "flex", panel: "" },
+} as const satisfies Record<NavbarCollapse, Record<"rail" | "compact" | "panel", string>>;
+
+const OPEN = {
+  true: { panel: "flex" },
+  false: { panel: "hidden" },
+} as const;
+
+export const navbar = tv({
+  slots: {
+    root: "@container/navbar flex w-full flex-col border-b border-muted bg-navigation-surface font-sans text-body text-foreground",
+    rail: [
+      "min-h-[var(--reddb-spatial-control-height-lg)] w-full flex-1 items-center gap-[var(--reddb-spatial-gap-lg)]",
+      "px-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    compact: [
+      "min-h-[var(--reddb-spatial-control-height-lg)] w-full flex-1 items-center justify-between gap-[var(--reddb-spatial-gap-md)]",
+      "px-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    brand: "flex items-center",
+    links: "m-0 flex list-none items-stretch self-stretch gap-[var(--reddb-spatial-gap-sm)] ps-0",
+    item: "flex items-stretch",
+    actions: "flex items-center gap-[var(--reddb-spatial-gap-md)]",
+    // Destinations in a masthead read as navigation, not as prose links: muted
+    // ink, no underline, and the current one wears the shared selection
+    // language — neutral surface, full-weight ink, and a 2px ink
+    // underline on the rail (a start-edge bar in the stacked panel below).
+    // Every link carries the transparent edge so marking one moves nothing.
+    link: [
+      "inline-flex h-auto min-h-[var(--reddb-spatial-control-height-lg)] w-auto items-center rounded-none border-b-2 border-transparent",
+      "px-[var(--reddb-spatial-inset-md)] text-body font-medium leading-tight text-ink-muted no-underline",
+      "aria-[current]:border-foreground aria-[current]:bg-foreground/10 aria-[current]:font-medium aria-[current]:text-foreground",
+    ].join(" "),
+    panelLink: [
+      "flex min-h-[var(--reddb-spatial-control-height-md)] w-full items-center justify-start rounded-s-none border-s-2 border-transparent",
+      "px-[var(--reddb-spatial-inset-md)] text-body font-medium text-ink-muted no-underline",
+      "aria-[current]:border-foreground aria-[current]:bg-foreground/10 aria-[current]:font-medium aria-[current]:text-foreground",
+    ].join(" "),
+    toggle: "shrink-0",
+    panel: [
+      "w-full flex-col gap-[var(--reddb-spatial-gap-md)] border-t border-muted",
+      "px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-md)]",
+    ].join(" "),
+    panelLinks: "m-0 flex list-none flex-col gap-[var(--reddb-spatial-gap-sm)] ps-0",
+  },
+  variants: { align: ALIGN, collapse: COLLAPSE, open: OPEN },
+  defaultVariants: { align: "start", collapse: "responsive", open: false },
+}, typeRoleMerge);
+
+export type NavbarVariants = VariantProps<typeof navbar>;

package/vendor/ds/kits/base/src/navigation-menu.behavior.ts

@@ -0,0 +1,24 @@
+/** A native destination rendered by NavigationMenu. */
+export interface NavigationMenuLink {
+  id: string;
+  label: string;
+  href: string;
+  description?: string;
+  active?: boolean;
+  onselect?: () => void;
+}
+
+/** A top-level control whose links open in an anchored surface. */
+export interface NavigationMenuSection {
+  id: string;
+  label: string;
+  links: readonly NavigationMenuLink[];
+}
+
+export type NavigationMenuEntry = NavigationMenuLink | NavigationMenuSection;
+
+export function isNavigationMenuSection(
+  entry: NavigationMenuEntry,
+): entry is NavigationMenuSection {
+  return Array.isArray((entry as NavigationMenuSection).links);
+}

package/vendor/ds/kits/base/src/navigation-menu.variants.ts

@@ -0,0 +1,39 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const navigationMenu = tv({
+  slots: {
+    root: "relative flex max-w-max items-center",
+    list: "flex list-none items-center gap-[var(--reddb-spatial-gap-sm)]",
+    control: [
+      "inline-flex items-center rounded-md text-foreground",
+      // Rest, hover, pressed and focus: the quiet-control contract (wave 6A),
+      // through the ghost Button for a trigger and quietControl() for a link.
+      "data-[state=open]:bg-foreground/10",
+      // The current destination wears the shared selection language: neutral
+      // surface, full-weight ink, and a 2px ink edge — on the bottom of a
+      // horizontal menu, the start of a vertical one (see `orientation`).
+      "border-transparent aria-[current=page]:border-foreground aria-[current=page]:bg-foreground/10",
+      "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+    ].join(" "),
+    content: "min-w-64",
+    links: "grid list-none gap-[var(--reddb-spatial-gap-sm)]",
+    link: "block rounded-md p-[var(--reddb-spatial-inset-sm)] text-foreground",
+    description: "mt-1 block text-sm text-ink-muted",
+  },
+  variants: {
+    orientation: {
+      horizontal: { list: "flex-row", control: "rounded-b-none border-b-2" },
+      vertical: { list: "flex-col items-stretch", control: "rounded-s-none border-s-2" },
+    },
+    size: {
+      sm: { control: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm" },
+      md: { control: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm" },
+      lg: { control: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base" },
+    },
+  },
+  defaultVariants: { orientation: "horizontal", size: "md" },
+});
+
+export type NavigationMenuVariants = VariantProps<typeof navigationMenu>;
+export type NavigationMenuOrientation = NonNullable<NavigationMenuVariants["orientation"]>;
+export type NavigationMenuSize = NonNullable<NavigationMenuVariants["size"]>;

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

@@ -0,0 +1,45 @@
+// The injectable navigation seam (issue 483, maintainer decision 2026-10-05).
+//
+// Some consumers never let the browser follow a link: the same application
+// runs routed and embedded with no URL of its own, so every destination goes
+// through an injected router. A Design System that hard-wired navigation into
+// each link component would break that mode — and 29 components render links.
+//
+// So the seam is one context and one interception point instead of a prop on
+// every component: a NavigationScope sets the context and takes the activation
+// of any in-app `<a href>` inside it, whichever component (or caller) rendered
+// it. Without a scope nothing changes: links are native anchors, as today.
+
+import { getContext, setContext } from "svelte";
+import { createNavigationDisclosures } from "./core/navigation-disclosures";
+
+import type { NavigationSeam } from "./core/navigation";
+export { ownsSameOrigin, routableAnchor, type NavigationSeam } from "./core/navigation";
+
+const NAVIGATION = Symbol("reddb.navigation");
+
+/** Provide `seam` to the components below (NavigationScope does this). */
+export function setNavigation(seam: NavigationSeam): NavigationSeam {
+  return setContext(NAVIGATION, seam);
+}
+
+/** The seam in force here, or `undefined` outside any NavigationScope. */
+export function getNavigation(): NavigationSeam | undefined {
+  return getContext<NavigationSeam | undefined>(NAVIGATION);
+}
+
+/** A shell-scoped coordinator for mutually exclusive navigation disclosures. */
+interface NavigationDisclosures {
+  register(close: () => void): { open: () => void; destroy: () => void };
+}
+const DISCLOSURES = Symbol("reddb-navigation-disclosures");
+
+/** Establish an optional navigation disclosure scope for a page shell. */
+export function provideNavigationDisclosures(): void {
+  setContext<NavigationDisclosures>(DISCLOSURES, createNavigationDisclosures());
+}
+
+/** Join the nearest shell's disclosure scope; standalone navigation stays independent. */
+export function navigationDisclosure(close: () => void): { open: () => void; destroy: () => void } | undefined {
+  return getContext<NavigationDisclosures | undefined>(DISCLOSURES)?.register(close);
+}

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

@@ -0,0 +1,14 @@
+// Notification owns only the relationship between the canonical Alert and its
+// canonical dismissal control. Alert continues to own Feedback Role colour;
+// Button continues to own focus and control appearance.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const notification = tv({
+  slots: {
+    root: "flex w-full max-w-sm items-start gap-[var(--reddb-spatial-gap-sm)]",
+    announcement: "min-w-0 flex-1",
+    dismiss: "shrink-0",
+  },
+});
+
+export type NotificationVariants = VariantProps<typeof notification>;

package/vendor/ds/kits/base/src/number-field.variants.ts

@@ -0,0 +1,10 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const numberField = tv({
+  slots: {
+    root: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[var(--reddb-spatial-gap-sm)]",
+    input: "min-w-0 text-center tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+    step: "aspect-square shrink-0 px-0",
+  },
+});
+export type NumberFieldVariants = VariantProps<typeof numberField>;

package/vendor/ds/kits/base/src/one-time-code-input.variants.ts

@@ -0,0 +1,23 @@
+// OneTimeCodeInput's public appearance seam composes canonical Fieldset and
+// Input skins; segment size and group flow are the only added arrangement.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+import { fieldset } from "./fieldset.variants";
+import { input } from "./input.variants";
+
+export const oneTimeCodeInput = tv({
+  slots: {
+    root: fieldset().root(),
+    list: "flex flex-wrap gap-[var(--reddb-spatial-gap-sm)]",
+    segment: [
+      input(),
+      // A centered single character needs the whole square, without text-field insets.
+      "w-[var(--reddb-spatial-control-height-md)] px-0 text-center",
+    ].join(" "),
+    help: fieldset().help(),
+    error: fieldset().error(),
+  },
+}, typeRoleMerge);
+
+export type OneTimeCodeInputVariants = VariantProps<typeof oneTimeCodeInput>;

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

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const pagination = tv({
+  slots: {
+    root: "text-foreground",
+    list: "m-0 flex list-none flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)] ps-0",
+    page: [
+      "inline-flex h-[var(--reddb-spatial-control-height-sm)] min-w-[var(--reddb-spatial-control-height-sm)]",
+      "items-center justify-center rounded-md border border-control-edge px-[var(--reddb-spatial-inset-sm)]",
+      // The current page wears the shared selection language: a neutral
+      // surface, full-weight ink, and a 2px ink underline — not a red
+      // outline (DESIGN.md, "Interactive states").
+      "aria-[current=page]:border-b-2 aria-[current=page]:border-b-foreground aria-[current=page]:bg-foreground/10",
+      "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+    ].join(" "),
+  },
+});
+
+export type PaginationVariants = VariantProps<typeof pagination>;

package/vendor/ds/kits/base/src/phone-input.variants.ts

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const phoneInput = tv({
+  slots: {
+    root: "min-w-0",
+    row: "grid min-w-0 grid-cols-[minmax(0,14ch)_minmax(0,1fr)] items-start gap-[var(--reddb-spatial-gap-sm)]",
+    country: "min-w-0 [&>label]:sr-only",
+    input: "min-w-0 w-full tabular-nums",
+    popup: "min-w-[min(32ch,calc(100vw-var(--reddb-spatial-inset-lg)*2))]",
+    read: "grid min-w-0 gap-[var(--reddb-spatial-gap-sm)]",
+    label: "text-sm font-medium text-foreground",
+    value: "flex min-w-0 min-h-[var(--reddb-spatial-control-height-md)] items-center gap-[var(--reddb-spatial-gap-sm)] text-editable-md",
+    number: "min-w-0 select-text break-words [overflow-wrap:anywhere]",
+    flag: "shrink-0",
+    help: "m-0 text-caption text-ink-muted",
+    error: "m-0 text-caption text-feedback-danger-foreground",
+  },
+});

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

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const DEFAULT_PHONE_MOCKUP_RATIO = 9 / 16;
+
+export const phoneMockup = tv({
+  slots: {
+    root:
+      "mx-auto w-full max-w-sm rounded-2xl border border-muted bg-background p-[var(--reddb-spatial-inset-sm)] text-foreground shadow-lg",
+    chrome:
+      "flex h-[var(--reddb-spatial-control-height-sm)] items-center justify-center",
+    speaker: "h-1 w-12 rounded-full bg-muted",
+    viewport: "rounded-2xl border border-muted bg-background",
+  },
+});
+
+export type PhoneMockupVariants = VariantProps<typeof phoneMockup>;

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

@@ -0,0 +1,12 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only anchored surface appearance; positioning and focus remain in Popover.svelte. */
+export const popover = tv({
+  base: [
+    "z-50 w-80 max-w-sm rounded-lg border border-elevation-overlay-border bg-elevation-overlay-surface text-elevation-overlay-foreground shadow-elevation-overlay",
+    "p-[var(--reddb-spatial-inset-md)] outline-hidden",
+    "motion-safe:transition-opacity motion-reduce:transition-none",
+  ].join(" "),
+});
+
+export type PopoverVariants = VariantProps<typeof popover>;

package/vendor/ds/kits/base/src/portal-appearance.svelte.ts

@@ -0,0 +1,12 @@
+import { createAttachmentKey } from "svelte/attachments";
+import { observePortalAppearance, modalPortalContainer } from "./core/portal-appearance";
+/** Renderer-owned attachment and state over the portable portal boundary. */
+export function portalAppearance(open: () => boolean) {
+  let source = $state<HTMLElement>(), attributes = $state<Record<string, string>>({}), container = $state<HTMLElement>();
+  const anchor = { [createAttachmentKey()]: (element: HTMLElement) => { source = element; return () => { source = undefined; }; } };
+  $effect(() => { if (!open() || !source) return; return observePortalAppearance(source, next => { attributes = next.attributes; container = next.container; }); });
+  return { anchor, get attributes() { return attributes; }, get container() {
+    // Mount directly in the native modal; keep that host while the popup closes.
+    return open() && source ? modalPortalContainer(source) : container;
+  } };
+}