@reddb-io/ui-kit 0.3.4 → 0.3.6

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    failure: "unlabelled-checkbox" | "unshared-radio-name";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "unlabelled-checkbox"}
+  <input type="checkbox" name="telemetry" />
+{:else}
+  <fieldset>
+    <legend>Release channel</legend>
+    <label><input type="radio" name="stable-channel" value="stable" /> Stable</label>
+    <label><input type="radio" name="preview-channel" value="preview" /> Preview</label>
+  </fieldset>
+{/if}

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

@@ -0,0 +1,19 @@
+<!-- A consumer that binds every native form control the way Svelte apps do. -->
+<script lang="ts">
+  import { Checkbox, Input, Switch, Textarea } from "@reddb-io/design-system/base";
+
+  let text = $state("initial");
+  let notes = $state("first");
+  let accepted = $state(false);
+  let enabled = $state(true);
+</script>
+
+<Input data-bound-input bind:value={text} />
+<Textarea data-bound-textarea bind:value={notes} />
+<Checkbox data-bound-checkbox label="Accept terms" bind:checked={accepted} />
+<Switch data-bound-switch label="Enabled" bind:checked={enabled} />
+<output data-text>{text}</output>
+<output data-notes>{notes}</output>
+<output data-accepted>{String(accepted)}</output>
+<output data-enabled>{String(enabled)}</output>
+<button type="button" data-reset onclick={() => ((text = "reset"), (accepted = true))}>Reset</button>

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

@@ -0,0 +1,9 @@
+<!-- A Product Application-owned nested appearance scope around the canonical date grid. -->
+<script lang="ts">
+  import { Calendar, RangeCalendar } from "@reddb-io/design-system/base";
+</script>
+
+<div data-theme="nested" data-color-scheme="dark" data-density="compact" data-appearance-scope>
+  <Calendar label="Deployment date" class="max-w-sm" data-nested-calendar />
+  <RangeCalendar label="Deployment window" class="max-w-sm" data-nested-range-calendar />
+</div>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    failure: "calendar-without-keyboard-navigation" | "range-without-announcement";
+  }
+
+  let { failure }: Props = $props();
+</script>
+
+{#if failure === "calendar-without-keyboard-navigation"}
+  <div role="grid" aria-label="Deployment date">
+    <div role="row">
+      <button type="button" role="gridcell" tabindex="-1">1</button>
+      <button type="button" role="gridcell" tabindex="-1">2</button>
+    </div>
+  </div>
+{/if}
+
+{#if failure === "range-without-announcement"}
+  <div role="application" aria-label="Deployment window June 2026">
+    <div role="grid">
+      <div role="row">
+        <button type="button" role="gridcell" aria-selected="true">10</button>
+        <button type="button" role="gridcell" aria-selected="true">12</button>
+      </div>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Card } from "@reddb-io/design-system/base";
+
+  let { actionsAlign }: { actionsAlign: "start" | "center" | "end" | "between" } = $props();
+</script>
+
+<Card {actionsAlign}>
+  {#snippet footer()}
+    <button type="button">Cancel</button>
+    <button type="button">Save</button>
+  {/snippet}
+</Card>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Card } from "@reddb-io/design-system/base";
+</script>
+
+<Card orientation="horizontal" title="Release" description="Ready to ship">
+  {#snippet media()}
+    <img src="/release.png" alt="Release preview" />
+  {/snippet}
+
+  <p>Review the changes.</p>
+
+  {#snippet footer()}
+    <button type="button">Publish</button>
+  {/snippet}
+</Card>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import {
+    DescriptionList,
+    GridList,
+    List,
+    ListContainer,
+    type DescriptionListItem,
+  } from "@reddb-io/design-system/base";
+
+  const details: readonly DescriptionListItem[] = [
+    { term: "Region", detail: "South America" },
+    { term: "Owner", detail: "Platform team" },
+  ];
+</script>
+
+<div
+  data-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <List data-nested-list aria-label="Deployments" gap="lg">
+    <li><a href="/alpha">Alpha</a></li>
+    <li><button type="button">Retry</button></li>
+  </List>
+
+  <ListContainer data-nested-list-container title="Services" padding="sm">
+    <List aria-label="Services"><li>API</li></List>
+  </ListContainer>
+
+  <DescriptionList data-nested-description-list aria-label="Service details" items={details} />
+
+  <GridList data-nested-grid-list aria-label="Projects" columns={2} gap="sm">
+    <li>Design system</li>
+    <li>Control plane</li>
+  </GridList>
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let { failure }: { failure: "missing-list-semantics" | "broken-term-detail-pairing" } = $props();
+</script>
+
+{#if failure === "missing-list-semantics"}
+  <div data-broken-list>
+    <div>First result</div>
+    <div>Second result</div>
+  </div>
+{:else}
+  <dl data-broken-description-list>
+    <dt>Region</dt>
+    <dt>Owner</dt>
+    <dd>South America</dd>
+  </dl>
+{/if}

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

@@ -0,0 +1,43 @@
+<!-- A Product Application's Field-bound typeahead at the public Base boundary. -->
+<script lang="ts">
+  import { Combobox, type ComboboxOption } from "@reddb-io/design-system/base";
+
+  interface Props {
+    value?: string;
+    required?: boolean;
+    error?: string;
+    onvaluechange?: (value: string) => void;
+    oninputvaluechange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(""),
+    required = false,
+    error,
+    onvaluechange,
+    oninputvaluechange,
+  }: Props = $props();
+
+  const options: readonly ComboboxOption[] = [
+    { value: "us-east-1", label: "North America" },
+    { value: "sa-east-1", label: "South America" },
+    { value: "eu-west-1", label: "Europe", disabled: true },
+  ];
+</script>
+
+<form>
+  <div data-theme="nested" data-color-scheme="dark" data-density="compact" data-appearance-scope>
+    <Combobox
+      label="Region"
+      help="Type to narrow the available regions."
+      {error}
+      {required}
+      name="region"
+      {options}
+      bind:value
+      {onvaluechange}
+      {oninputvaluechange}
+      class="max-w-md"
+    />
+  </div>
+</form>

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

@@ -0,0 +1,27 @@
+<!-- Deliberately broken public DOM fixtures for Combobox regressions. -->
+<script lang="ts">
+  interface Props {
+    failure: "missing-active-descendant" | "discarded-input";
+  }
+
+  const { failure }: Props = $props();
+  let typed = $state("");
+</script>
+
+{#if failure === "missing-active-descendant"}
+  <input role="combobox" aria-expanded="true" aria-controls="broken-options" />
+  <div id="broken-options" role="listbox">
+    <div id="broken-option" role="option" aria-selected="false">South America</div>
+  </div>
+{:else}
+  <input
+    role="combobox"
+    aria-controls="unused-options"
+    aria-expanded="false"
+    value={typed}
+    oninput={(event) => {
+      typed = "";
+      event.currentTarget.value = typed;
+    }}
+  />
+{/if}

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    failure: "fixed-spacing" | "unusable-bypass";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "fixed-spacing"}
+  <div data-broken-container class="px-4">
+    <div data-broken-stack class="flex flex-col gap-2">Fixed against Density.</div>
+  </div>
+{:else}
+  <a data-broken-skip-link class="sr-only" href="#missing-main">Skip to main content</a>
+  <main id="content">Main content</main>
+{/if}

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

@@ -0,0 +1,25 @@
+<!-- ContentMask at the public Base boundary, below an appearance scope owned
+     entirely by the consumer and around consumer-owned semantics. -->
+<script lang="ts">
+  import { Button, ContentMask } from "@reddb-io/design-system/base";
+
+  let activations = $state(0);
+</script>
+
+<div
+  data-content-mask-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+  data-motion="reduced"
+>
+  <ContentMask shape="squircle" data-masked-image>
+    <img src="/ada.png" alt="Ada Lovelace" />
+  </ContentMask>
+
+  <ContentMask shape="diamond" data-masked-control>
+    <Button onclick={() => (activations += 1)}>Open masked control</Button>
+  </ContentMask>
+
+  <output data-mask-activations>{activations}</output>
+</div>

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

@@ -0,0 +1,19 @@
+<!-- Deliberately broken masks: one removes named content from the accessibility
+     tree; the other collapses its clip and removes its control from operation. -->
+<script lang="ts">
+  interface Props {
+    failure: "hidden-name" | "unreachable-control";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "hidden-name"}
+  <div data-broken-content-mask aria-hidden="true" style="clip-path: circle(50%)">
+    <img src="/ada.png" alt="Ada Lovelace" />
+  </div>
+{:else}
+  <div data-broken-content-mask style="clip-path: circle(0%)">
+    <button type="button" disabled tabindex="-1">Open profile</button>
+  </div>
+{/if}

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

@@ -0,0 +1,29 @@
+<!-- A Dialog opened from outside — a menu item, a command, a route — through bind:open. -->
+<script lang="ts">
+  import { AlertDialog, Dialog } from "@reddb-io/design-system/base";
+
+  interface Props {
+    onconfirm?: () => void | Promise<unknown>;
+  }
+
+  let { onconfirm }: Props = $props();
+  let settings = $state(false);
+  let confirm = $state(false);
+  let changes: boolean[] = $state([]);
+</script>
+
+<button type="button" data-open-settings onclick={() => (settings = true)}>Settings</button>
+<button type="button" data-open-confirm onclick={() => (confirm = true)}>Delete</button>
+<output data-settings-open>{String(settings)}</output>
+<output data-changes>{changes.join(",")}</output>
+
+<Dialog
+  title="Settings"
+  bind:open={settings}
+  onopenchange={(open) => changes.push(open)}
+  data-settings-dialog=""
+>
+  <p>Body</p>
+</Dialog>
+
+<AlertDialog title="Delete deployment?" confirmLabel="Delete" bind:open={confirm} {onconfirm} />

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

@@ -0,0 +1,45 @@
+<!-- Date entry contracts composed only through the distributed Base subpath,
+     including a nested appearance scope owned by the consumer. -->
+<script lang="ts">
+  import { DateField, DateRangeField } from "@reddb-io/design-system/base";
+</script>
+
+<form>
+  <DateField
+    label="Deployment date"
+    name="deploymentDate"
+    value="2026-08-20"
+    help="Use the release calendar."
+    required
+  />
+
+  <DateRangeField
+    label="Deployment window"
+    startLabel="Starts"
+    endLabel="Ends"
+    startName="deploymentStart"
+    endName="deploymentEnd"
+    startValue="2026-08-10"
+    endValue="2026-08-20"
+  />
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <div data-nested-date-field>
+      <DateField label="Nested deployment date" value="2026-09-01" />
+    </div>
+    <div data-nested-date-range-field>
+      <DateRangeField
+        label="Nested deployment window"
+        startLabel="Starts"
+        endLabel="Ends"
+        startValue="2026-09-01"
+        endValue="2026-09-05"
+      />
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,31 @@
+<!-- Deliberately invalid date entries: proof that the contract suites reject
+     impossible calendar dates and ranges whose end precedes their start. -->
+<script lang="ts">
+  interface Props {
+    failure: "impossible-date" | "inverted-range";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "impossible-date"}
+  <div data-date-field>
+    <label for="broken-year">Deployment date</label>
+    <div>
+      <input id="broken-year" aria-label="Deployment date, year" value="2026" />
+      <span aria-hidden="true">-</span>
+      <input aria-label="Deployment date, month" value="02" />
+      <span aria-hidden="true">-</span>
+      <input aria-label="Deployment date, day" value="30" />
+    </div>
+    <input type="hidden" name="deploymentDate" value="2026-02-30" />
+  </div>
+{:else}
+  <fieldset data-date-range-field>
+    <legend>Deployment window</legend>
+    <label for="broken-start">Start date</label>
+    <input id="broken-start" type="date" name="deploymentStart" value="2026-08-20" />
+    <label for="broken-end">End date</label>
+    <input id="broken-end" type="date" name="deploymentEnd" value="2026-08-10" />
+  </fieldset>
+{/if}

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

@@ -0,0 +1,34 @@
+<!-- Picker contracts composed only through the distributed Base subpath,
+     nested under every consumer-owned appearance axis. -->
+<script lang="ts">
+  import { DatePicker, DateRangePicker } from "@reddb-io/design-system/base";
+</script>
+
+<form
+  data-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <div data-nested-date-picker>
+    <DatePicker
+      label="Deployment date"
+      calendarLabel="Deployment date calendar"
+      name="deploymentDate"
+      value="2026-06-10"
+    />
+  </div>
+
+  <div data-nested-date-range-picker>
+    <DateRangePicker
+      label="Deployment window"
+      startLabel="Starts"
+      endLabel="Ends"
+      calendarLabel="Deployment window calendar"
+      startName="deploymentStart"
+      endName="deploymentEnd"
+      startValue="2026-06-10"
+      endValue="2026-06-12"
+    />
+  </div>
+</form>

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

@@ -0,0 +1,29 @@
+<!-- Deliberately desynchronized picker state: the field and calendar publish
+     different dates, proving the picker suites reject split ownership. -->
+<script lang="ts">
+  interface Props {
+    failure: "date-picker-desynchronization" | "date-range-picker-desynchronization";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "date-picker-desynchronization"}
+  <div data-date-picker>
+    <div data-date-field>
+      <input type="hidden" name="deploymentDate" value="2026-06-10" />
+    </div>
+    <div data-calendar>
+      <button type="button" data-bits-day data-value="2026-06-12" data-selected>12</button>
+    </div>
+  </div>
+{:else}
+  <fieldset data-date-range-picker>
+    <input type="hidden" name="deploymentStart" value="2026-06-10" />
+    <input type="hidden" name="deploymentEnd" value="2026-06-12" />
+    <div data-range-calendar>
+      <button type="button" data-bits-day data-value="2026-06-15" data-range-start>15</button>
+      <button type="button" data-bits-day data-value="2026-06-18" data-range-end>18</button>
+    </div>
+  </fieldset>
+{/if}

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

@@ -0,0 +1,33 @@
+<!-- Deliberately broken public DOM fixtures for the four behavioral regressions. -->
+<script lang="ts">
+  interface Props {
+    failure: "missing-label" | "ignored-escape" | "lost-focus" | "pointer-only-tooltip";
+  }
+
+  const { failure }: Props = $props();
+  let open = $state(false);
+  let tooltipOpen = $state(false);
+</script>
+
+{#if failure === "missing-label"}
+  <div role="dialog" aria-modal="true"><h2>Unassociated title</h2></div>
+{:else if failure === "ignored-escape"}
+  <button type="button" data-opener onclick={() => (open = true)}>Open</button>
+  {#if open}<div role="dialog" aria-label="Settings" data-broken-dialog>Still open</div>{/if}
+{:else if failure === "lost-focus"}
+  <button type="button" data-opener onclick={() => (open = true)}>Open</button>
+  {#if open}
+    <div role="dialog" aria-label="Members">
+      <button type="button" data-close onclick={() => (open = false)}>Close</button>
+    </div>
+  {/if}
+{:else}
+  <button
+    type="button"
+    data-tooltip-trigger
+    aria-label="Copy value"
+    onmouseenter={() => (tooltipOpen = true)}
+    onmouseleave={() => (tooltipOpen = false)}>Copy</button
+  >
+  {#if tooltipOpen}<span role="tooltip">Copies to the clipboard</span>{/if}
+{/if}

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

@@ -0,0 +1,68 @@
+<!-- A consumer-owned arrangement and content exercising the disclosure family together. -->
+<script lang="ts">
+  import { Accordion, Disclosure, Tabs } from "@reddb-io/design-system/base";
+
+  interface Props {
+    ontabchange?: (value: string) => void;
+    onaccordionchange?: (value: readonly string[]) => void;
+    ondisclosurechange?: (open: boolean) => void;
+  }
+
+  const { ontabchange, onaccordionchange, ondisclosurechange }: Props = $props();
+  const tabs = [
+    { value: "summary", label: "Summary" },
+    { value: "events", label: "Events" },
+    { value: "disabled", label: "Disabled", disabled: true },
+  ] as const;
+  const sections = [
+    { value: "changes", label: "What changed?" },
+    { value: "impact", label: "Who is affected?" },
+  ] as const;
+</script>
+
+{#snippet tabContent(value: string)}
+  {#if value === "summary"}<p>Summary content</p>{:else}<p>Event content</p>{/if}
+{/snippet}
+
+{#snippet accordionContent(value: string)}
+  {#if value === "changes"}<p>Release notes</p>{:else}<p>All operators</p>{/if}
+{/snippet}
+
+<div data-disclosure-family-consumer>
+  <Tabs
+    label="Deployment view"
+    items={tabs}
+    value="summary"
+    onchange={ontabchange}
+  >
+    {#snippet children({ value })}{@render tabContent(value)}{/snippet}
+  </Tabs>
+
+  <Accordion
+    label="Release questions"
+    items={sections}
+    expanded={["changes"]}
+    onchange={onaccordionchange}
+  >
+    {#snippet children({ value })}{@render accordionContent(value)}{/snippet}
+  </Accordion>
+
+  <Disclosure label="Advanced details" open onchange={ondisclosurechange}>
+    <p>Caller-owned detail</p>
+  </Disclosure>
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <Tabs label="Nested tabs" items={tabs}>
+      {#snippet children({ value })}<p>Nested {value}</p>{/snippet}
+    </Tabs>
+    <Accordion label="Nested accordion" items={sections}>
+      {#snippet children({ value })}<p>Nested {value}</p>{/snippet}
+    </Accordion>
+    <Disclosure label="Nested disclosure"><p>Nested detail</p></Disclosure>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+<!-- Deliberately incomplete disclosure-family controls used to prove the diagnostics. -->
+<script lang="ts">
+  interface Props {
+    failure: "tabs-without-arrow-navigation" | "accordion-without-expanded-state";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "tabs-without-arrow-navigation"}
+  <div role="tablist" aria-label="Deployment view">
+    <button type="button" role="tab" aria-selected="true" tabindex="0">Summary</button>
+    <button type="button" role="tab" aria-selected="false" tabindex="-1">Events</button>
+  </div>
+  <div role="tabpanel">Summary content</div>
+{:else}
+  <section data-accordion>
+    <h3><button type="button">What changed?</button></h3>
+    <div>Release notes</div>
+  </section>
+{/if}

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

@@ -0,0 +1,30 @@
+<!-- Deliberately broken public DOM fixtures for overlay regressions. -->
+<script lang="ts">
+  interface Props {
+    failure: "drawer-lost-focus" | "alert-outside-dismissal";
+  }
+
+  const { failure }: Props = $props();
+  let open = $state(false);
+</script>
+
+<button type="button" data-opener onclick={() => (open = true)}>Open</button>
+
+{#if open && failure === "drawer-lost-focus"}
+  <div role="dialog" aria-modal="true" aria-label="Filters" data-broken-drawer>
+    <button type="button" data-close onclick={() => (open = false)}>Close</button>
+  </div>
+{:else if open}
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div
+    role="alertdialog"
+    aria-modal="true"
+    aria-label="Delete deployment"
+    data-broken-alert-dialog
+    onclick={() => (open = false)}
+  >
+    <button type="button">Cancel</button>
+    <button type="button">Delete</button>
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { AlertDialog, Drawer } from "@reddb-io/design-system/base";
+</script>
+
+<section
+  data-overlay-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <Drawer triggerLabel="Open filters" title="Filters" data-nested-drawer />
+  <AlertDialog
+    triggerLabel="Delete deployment"
+    title="Delete deployment?"
+    confirmLabel="Delete"
+    data-nested-alert-dialog
+  />
+</section>