@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/test/fixtures/MenuBehaviorFailures.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    failure: "no-roving-focus" | "escape-survives";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "no-roving-focus"}
+  <div role="menu" aria-label="Broken actions" data-broken-menu>
+    <button type="button" role="menuitem">Rename</button>
+    <button type="button" role="menuitem">Duplicate</button>
+  </div>
+{:else}
+  <button type="button" aria-haspopup="menu" aria-expanded="true">Actions</button>
+  <div role="menu" aria-label="Broken actions" data-broken-menu>
+    <button type="button" role="menuitem">Rename</button>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/MockupConsumer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import {
+    BrowserMockup,
+    PhoneMockup,
+    WindowMockup,
+  } from "@reddb-io/design-system/base";
+</script>
+
+<div
+  data-mockup-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <BrowserMockup address="https://example.test/deployments">
+    <article aria-label="Browser deployment">
+      <button type="button">Inspect deployment</button>
+    </article>
+  </BrowserMockup>
+
+  <PhoneMockup>
+    <nav aria-label="Phone queue">
+      <a href="/queue">Open queue</a>
+    </nav>
+  </PhoneMockup>
+
+  <WindowMockup title="Logs">
+    <section aria-label="Window logs">
+      <pre>pnpm test
+all green</pre>
+      <button type="button">Copy logs</button>
+    </section>
+  </WindowMockup>
+</div>

package/vendor/ds/kits/base/test/fixtures/MockupContractFailures.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  interface Props {
+    failure: "swallowed-content" | "interactive-chrome";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "swallowed-content"}
+  <div data-broken-mockup aria-hidden="true">
+    <article aria-label="Deployment preview">
+      <button type="button">Inspect deployment</button>
+    </article>
+  </div>
+{:else}
+  <div data-broken-browser-mockup>
+    <div data-broken-browser-chrome>
+      <a href="/reload">Reload</a>
+      <input aria-label="Address" value="https://example.test/deployments" />
+    </div>
+    <article aria-label="Deployment preview">Caller-owned content</article>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/NavbarMasthead.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {
+    DropdownMenu,
+    Navbar,
+    type DropdownMenuEntry,
+    type NavbarAlign,
+    type NavbarCollapse,
+    type NavbarLink,
+  } from "@reddb-io/design-system/base";
+
+  interface Props {
+    links?: readonly NavbarLink[];
+    align?: NavbarAlign;
+    collapse?: NavbarCollapse;
+    open?: boolean;
+    notifications?: readonly DropdownMenuEntry[];
+    account?: readonly DropdownMenuEntry[];
+  }
+
+  let {
+    links = [
+      { id: "nodes", label: "Nodes", href: "/nodes", active: true },
+      { id: "queries", label: "Queries", href: "/queries" },
+      { id: "settings", label: "Settings", href: "/settings" },
+    ],
+    align,
+    collapse,
+    open = $bindable(false),
+    notifications = [
+      { id: "invite", label: "Invite accepted" },
+      { id: "backup", label: "Backup finished" },
+    ],
+    account = [
+      { id: "profile", label: "Profile", href: "/profile" },
+      { heading: "Session", items: [{ id: "sign-out", label: "Sign out" }] },
+    ],
+  }: Props = $props();
+</script>
+
+<Navbar {links} {align} {collapse} bind:open>
+  {#snippet brand()}
+    <a href="/" aria-label="reddb.io home" data-brand>reddb.io</a>
+  {/snippet}
+
+  {#snippet actions()}
+    <DropdownMenu
+      triggerLabel="Notifications"
+      contentLabel="Notifications"
+      items={notifications}
+    />
+    <DropdownMenu triggerLabel="RD account" contentLabel="Account" items={account} variant="ghost">
+      {#snippet trigger()}<span data-avatar>RD</span>{/snippet}
+    </DropdownMenu>
+  {/snippet}
+</Navbar>

package/vendor/ds/kits/base/test/fixtures/NavigationScopeConsumer.svelte

@@ -0,0 +1,40 @@
+<!-- Issue 483: links rendered by several Base components, and by the caller, inside one NavigationScope. -->
+<script lang="ts">
+  import { Breadcrumbs, Link, NavigationScope, Pagination } from "@reddb-io/design-system/base";
+
+  interface Props {
+    navigate: (href: string, event: MouseEvent) => void;
+    scoped?: boolean;
+  }
+
+  const { navigate, scoped = true }: Props = $props();
+</script>
+
+{#snippet links()}
+  <Link href="/collections" data-probe="link">Collections</Link>
+  <Breadcrumbs
+    items={[
+      { id: "home", label: "Home", href: "/" },
+      { id: "db", label: "Database", href: "/databases/main" },
+      { id: "here", label: "Settings", current: true },
+    ]}
+  />
+  <Pagination
+    pages={[
+      { page: 1, href: "/rows?page=1", current: true },
+      { page: 2, href: "/rows?page=2" },
+    ]}
+  />
+  <a href="/caller-owned" data-probe="caller">Caller anchor</a>
+  <a href="https://example.com/docs" data-probe="external">External</a>
+  <a href="/report.csv" download data-probe="download">Download</a>
+  <a href="/elsewhere" target="_blank" data-probe="blank">New tab</a>
+  <a href="#section" data-probe="fragment">Fragment</a>
+  <a href="/native" data-native-navigation data-probe="opt-out">Opt out</a>
+{/snippet}
+
+{#if scoped}
+  <NavigationScope {navigate}>{@render links()}</NavigationScope>
+{:else}
+  {@render links()}
+{/if}

package/vendor/ds/kits/base/test/fixtures/NotificationEmptyStateConsumer.svelte

@@ -0,0 +1,28 @@
+<!-- Both feedback surfaces through the distributed Base subpath, nested below
+     appearance axes selected entirely by the consumer. -->
+<script lang="ts">
+  import { Button, EmptyState, Notification } from "@reddb-io/design-system/base";
+</script>
+
+<div
+  data-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <div data-nested-notification>
+    <Notification feedback="warning" title="Capacity is nearly full">
+      Add capacity before the next deployment.
+    </Notification>
+  </div>
+
+  <div data-nested-empty-state>
+    <EmptyState
+      title="No nodes yet"
+      description="A node appears here as soon as one joins."
+      hint="reddb node add --name alpha"
+    >
+      {#snippet actions()}<Button>Add a node</Button>{/snippet}
+    </EmptyState>
+  </div>
+</div>

package/vendor/ds/kits/base/test/fixtures/NotificationEmptyStateContractFailures.svelte

@@ -0,0 +1,21 @@
+<!-- Deliberately broken feedback surfaces. The notification is visible but
+     never enters an assistive-technology live region; the empty region offers
+     an action without saying what is empty. -->
+<script lang="ts">
+  interface Props {
+    failure: "silent-notification" | "unnamed-empty-state";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "silent-notification"}
+  <div data-broken-notification>
+    <p>Deployment complete</p>
+    <button type="button">Dismiss</button>
+  </div>
+{:else}
+  <div data-broken-empty-state>
+    <button type="button">Add a node</button>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/NumberFieldConsumer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Button, NumberField } from "@reddb-io/design-system/base";
+  let quantity = $state<number|null>(3);
+</script>
+<form>
+  <NumberField label="Units" name="units" bind:value={quantity} min={1} max={12}/>
+  <Button onclick={()=>quantity=null}>Clear externally</Button>
+  <p data-bound-value>{quantity===null?"empty":quantity}</p>
+</form>

package/vendor/ds/kits/base/test/fixtures/NumericChronologyConsumer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Countdown, Statistic, Timeline } from "@reddb-io/design-system/base";
+</script>
+
+<section
+  data-numeric-chronology-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-contrast="high"
+  data-density="compact"
+>
+  <button type="button">Before chronology</button>
+  <Statistic label="Queries" value={1240} description="Last 24 hours" />
+  <Countdown label="Deployment window" remaining={65} />
+  <Timeline
+    label="Deployment history"
+    items={[
+      {
+        id: "queued",
+        title: "Queued",
+        datetime: "2026-08-08T19:00:00Z",
+        time: "19:00",
+        href: "/deployments/queued",
+      },
+      {
+        id: "deployed",
+        title: "Deployed",
+        datetime: "2026-08-08T19:05:00Z",
+        time: "19:05",
+      },
+    ]}
+  />
+  <button type="button">After chronology</button>
+</section>

package/vendor/ds/kits/base/test/fixtures/NumericChronologyContractFailures.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { failure }: { failure: "silent-countdown" | "unordered-timeline" } = $props();
+</script>
+
+{#if failure === "silent-countdown"}
+  <!-- Completion is visible, but no live status delivers the change. -->
+  <div data-broken-countdown>
+    <span>Deployment window</span>
+    <span>Complete</span>
+  </div>
+{:else}
+  <!-- Visual stacking suggests chronology, but the document exposes no order. -->
+  <div data-broken-timeline aria-label="Deployment history">
+    <div><time datetime="2026-08-08T19:00:00Z">19:00</time> Queued</div>
+    <div><time datetime="2026-08-08T19:05:00Z">19:05</time> Deployed</div>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/Operational.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Progress, Meter, Statistic, Transfer } from "../../src";
+  let { name, options }: { name: string; options: Record<string, any> } =
+    $props();
+</script>
+
+{#if name === "Progress"}<Progress
+    {...options}
+  />{:else if name === "Meter"}<Meter
+    value={options.value}
+    {...options}
+  />{:else if name === "Statistic"}<Statistic
+    label={options.label}
+    value={options.value}
+    {...options}
+  />{:else}<Transfer
+    fromId={options.fromId}
+    toId={options.toId}
+    {...options}
+  />{/if}

package/vendor/ds/kits/base/test/fixtures/PopoverLinkPreviewFailures.svelte

@@ -0,0 +1,38 @@
+<!-- Deliberately broken public DOM fixtures for anchored-overlay regressions. -->
+<script lang="ts">
+  interface Props {
+    failure: "viewport-escape" | "permanent-focus-trap";
+  }
+
+  const { failure }: Props = $props();
+  let open = $state(false);
+
+  function trap(event: KeyboardEvent): void {
+    if (event.key !== "Tab") return;
+    event.preventDefault();
+    (event.currentTarget as HTMLElement).querySelector<HTMLElement>("button")?.focus();
+  }
+</script>
+
+{#if failure === "viewport-escape"}
+  <a href="/clusters" data-link-preview-trigger>Clusters</a>
+  <div
+    data-broken-overlay
+    style="position: fixed; left: 1025px; width: 240px;"
+  >
+    A preview rendered beyond a 1024px viewport
+  </div>
+{:else}
+  <button type="button" data-popover-trigger onclick={() => (open = true)}>Open actions</button>
+  {#if open}
+    <div
+      data-broken-overlay
+      role="dialog"
+      aria-label="Trapped actions"
+      tabindex="-1"
+      onkeydown={trap}
+    >
+      <button type="button">Only trapped action</button>
+    </div>
+  {/if}
+{/if}

package/vendor/ds/kits/base/test/fixtures/ProgressFeedbackConsumer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import {
+    LoadingIndicator,
+    Meter,
+    Progress,
+    RadialProgress,
+    Skeleton,
+  } from "@reddb-io/design-system/base";
+</script>
+
+<section
+  data-progress-feedback-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <button type="button">Before feedback</button>
+  <Progress value={64} label="Deployment progress" />
+  <Progress label="Preparing deployment" />
+  <RadialProgress value={64} label="Indexing progress" />
+  <Meter value={3} max={5} label="Cluster capacity" />
+  <LoadingIndicator label="Loading nodes…" />
+  <Skeleton label="Loading node summary" />
+  <Skeleton shape="circle" />
+  <button type="button">After feedback</button>
+</section>

package/vendor/ds/kits/base/test/fixtures/ProgressLoadingContractFailures.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { failure }: { failure: "missing-progress-value" | "silent-spinner" } = $props();
+</script>
+
+{#if failure === "missing-progress-value"}
+  <!-- The fill says 72% to an eye, but the progressbar exposes no value. -->
+  <div data-broken-progress role="progressbar" aria-label="Deployment progress">
+    <div data-broken-progress-fill style="width: 72%"></div>
+  </div>
+{:else}
+  <!-- Motion says “loading” to an eye; nothing announces that state. -->
+  <div data-broken-loading>
+    <svg data-broken-spinner viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" stroke-width="3" />
+    </svg>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/RangePressedConsumer.svelte

@@ -0,0 +1,67 @@
+<!-- A consumer form exercising range and pressed-state controls together. -->
+<script lang="ts">
+  import {
+    Form,
+    Rating,
+    Slider,
+    ToggleButton,
+    ToggleGroup,
+  } from "@reddb-io/design-system/base";
+
+  interface Props {
+    sliderOninput?: (event: Event) => void;
+    ratingOnkeydown?: (event: KeyboardEvent) => void;
+    toggleOnclick?: (event: MouseEvent) => void;
+    groupOnvaluechange?: (value: string) => void;
+  }
+
+  const { sliderOninput, ratingOnkeydown, toggleOnclick, groupOnvaluechange }: Props = $props();
+  const alignments = [
+    { value: "left", label: "Left" },
+    { value: "center", label: "Center" },
+    { value: "right", label: "Right" },
+  ] as const;
+</script>
+
+<Form data-testid="range-pressed-form">
+  <Slider
+    label="Deployment capacity"
+    name="capacity"
+    min={0}
+    max={100}
+    step={10}
+    value={40}
+    formatValue={(current) => `${current}%`}
+    oninput={sliderOninput}
+  />
+
+  <Rating
+    legend="Release confidence"
+    name="confidence"
+    max={5}
+    value={3}
+    onkeydown={ratingOnkeydown}
+  />
+
+  <ToggleButton label="Pin deployment" onclick={toggleOnclick} />
+
+  <ToggleGroup
+    legend="Alignment"
+    name="alignment"
+    options={alignments}
+    value="center"
+    onvaluechange={groupOnvaluechange}
+  />
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <Slider label="Nested capacity" value={20} />
+    <Rating legend="Nested confidence" name="nested-confidence" value={2} />
+    <ToggleButton label="Nested pin" pressed />
+    <ToggleGroup legend="Nested alignment" options={alignments} value="left" />
+  </div>
+</Form>

package/vendor/ds/kits/base/test/fixtures/RangePressedContractFailures.svelte

@@ -0,0 +1,20 @@
+<!-- Deliberately incomplete range and pressed-state controls. -->
+<script lang="ts">
+  interface Props {
+    failure: "missing-slider-value" | "multi-select-toggle-group";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "missing-slider-value"}
+  <div role="slider" aria-label="Deployment capacity" aria-valuemin="0" aria-valuemax="100">
+    Capacity
+  </div>
+{:else}
+  <div role="group" aria-label="Alignment">
+    <button type="button" aria-pressed="true">Left</button>
+    <button type="button" aria-pressed="true">Center</button>
+    <button type="button" aria-pressed="false">Right</button>
+  </div>
+{/if}

package/vendor/ds/kits/base/test/fixtures/RevealAppearanceConsumer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Reveal } from "@reddb-io/design-system/base";
+
+  const themes = ["application", "marketing"];
+  const schemes = ["light", "dark"];
+  const densities = ["tiny", "compact", "comfortable", "spacious"];
+</script>
+
+{#each themes as theme}
+  {#each schemes as scheme}
+    {#each densities as density}
+      <div data-appearance-scope data-theme={theme} data-color-scheme={scheme} data-density={density}>
+        <Reveal>Visible in every appearance</Reveal>
+      </div>
+    {/each}
+  {/each}
+{/each}

package/vendor/ds/kits/base/test/fixtures/SpecializedEntryConsumer.svelte

@@ -0,0 +1,56 @@
+<!-- The three capabilities composed at the public Base package boundary,
+     including one nested appearance scope owned entirely by the consumer. -->
+<script lang="ts">
+  import {
+    Button,
+    ControlGroup,
+    FileInput,
+    OneTimeCodeInput,
+  } from "@reddb-io/design-system/base";
+
+  interface Props {
+    fileOnchange?: (event: Event) => void;
+    otpOncomplete?: (value: string) => void;
+  }
+
+  const { fileOnchange, otpOncomplete }: Props = $props();
+</script>
+
+<form>
+  <FileInput
+    label="Upload evidence"
+    help="PDF or image, up to 10 MB."
+    name="evidence"
+    accept=".pdf,image/*"
+    onchange={fileOnchange}
+    required
+  />
+
+  <OneTimeCodeInput
+    label="Verification code"
+    help="Paste or enter the six-digit code."
+    name="verificationCode"
+    length={6}
+    oncomplete={otpOncomplete}
+    required
+  />
+
+  <ControlGroup label="Record actions">
+    <Button type="button">Save</Button>
+    <Button type="button" variant="secondary">Cancel</Button>
+  </ControlGroup>
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <FileInput label="Nested upload" name="nested-file" />
+    <OneTimeCodeInput label="Nested code" name="nested-code" length={4} />
+    <ControlGroup label="Nested actions" orientation="vertical">
+      <Button type="button">Continue</Button>
+      <Button type="button" variant="secondary">Back</Button>
+    </ControlGroup>
+  </div>
+</form>

package/vendor/ds/kits/base/test/fixtures/SpecializedEntryContractFailures.svelte

@@ -0,0 +1,26 @@
+<!-- Deliberately incomplete specialized entries: proof that the suites catch
+     hidden file feedback and an OTP surface that cannot accept a pasted code. -->
+<script lang="ts">
+  interface Props {
+    failure: "hidden-file-name" | "broken-otp-paste";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "hidden-file-name"}
+  <label for="broken-file">Upload evidence</label>
+  <input id="broken-file" type="file" name="evidence" />
+{:else}
+  <fieldset>
+    <legend>Verification code</legend>
+    {#each Array(6) as _, index}
+      <input
+        aria-label={`Digit ${index + 1} of 6`}
+        inputmode="numeric"
+        maxlength="1"
+        onpaste={(event) => event.preventDefault()}
+      />
+    {/each}
+  </fieldset>
+{/if}

package/vendor/ds/kits/base/test/fixtures/StatusVocabularyConsumer.svelte

@@ -0,0 +1,19 @@
+<!-- Status vocabulary at the public Base package boundary, nested below an
+     appearance scope owned entirely by the consumer. -->
+<script lang="ts">
+  import { Badge, Indicator, StatusIndicator } from "@reddb-io/design-system/base";
+</script>
+
+<div
+  data-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <Badge tone="success">Stable</Badge>
+  <StatusIndicator label="Available" tone="success" />
+  <Indicator position="top-end">
+    {#snippet marker()}<StatusIndicator label="Delayed" tone="warning" showLabel={false} />{/snippet}
+    <a href="/service">Service</a>
+  </Indicator>
+</div>

package/vendor/ds/kits/base/test/fixtures/StatusVocabularyContractFailures.svelte

@@ -0,0 +1,5 @@
+<!-- Deliberately inaccessible status vocabulary: the mark has colour, but no
+     text or accessible name carries what that colour is supposed to mean. -->
+<span data-status-contract-failure>
+  <span data-status-mark class="size-2 rounded-full bg-primary"></span>
+</span>

package/vendor/ds/kits/base/test/fixtures/SurfaceControlsConsumer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import {
+    AppearanceSwitch,
+    ScrollArea,
+    SectionHeading,
+    Swap,
+  } from "@reddb-io/design-system/base";
+
+  const themes = [
+    { value: "application", label: "Application" },
+    { value: "marketing", label: "Marketing" },
+  ] as const;
+</script>
+
+<div data-appearance-scope data-theme="marketing" data-color-scheme="dark" data-density="compact">
+  <SectionHeading title="Deployments" description="Recent activity" />
+
+  <ScrollArea label="Recent deployments" class="max-h-24">
+    <p>Production</p>
+    <p>Preview</p>
+  </ScrollArea>
+
+  <Swap label="Details for this deployment">
+    {#snippet off()}▸ Details{/snippet}
+    {#snippet on()}▾ Details{/snippet}
+  </Swap>
+
+  <AppearanceSwitch
+    label="Theme"
+    axis="theme"
+    options={themes}
+    value="application"
+    persistKey="reddb:test:theme"
+  />
+</div>