@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,29 @@
+<!--
+  Deliberately broken public DOM fixtures. They are counter-examples, not
+  alternate components: the accessibility suite must diagnose each omission
+  before the real Field/Input tracer is allowed to pass.
+-->
+<script lang="ts">
+  interface Props {
+    failure: "missing-label" | "missing-error-association" | "invalid-native-forwarding";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "missing-label"}
+  <div data-a11y-fixture={failure}>
+    <input name="email" type="email" />
+  </div>
+{:else if failure === "missing-error-association"}
+  <div data-a11y-fixture={failure}>
+    <label for="broken-email">Email address</label>
+    <input id="broken-email" name="email" type="email" aria-invalid="true" />
+    <p id="broken-email-error">Enter a valid email address.</p>
+  </div>
+{:else}
+  <div data-a11y-fixture={failure}>
+    <!-- The wrapper was asked for native constraints but dropped them. -->
+    <input data-intended-required="true" data-intended-pattern=".+@.+" name="email" />
+  </div>
+{/if}

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

@@ -0,0 +1,33 @@
+<!-- A Product Application's smallest usable form tracer. -->
+<script lang="ts">
+  import { Field, Input } from "@reddb-io/design-system/base";
+
+  interface Props {
+    label?: string;
+    help?: string;
+    error?: string;
+    required?: boolean;
+    id?: string;
+  }
+
+  const {
+    label = "Email address",
+    help,
+    error,
+    required = false,
+    id,
+  }: Props = $props();
+</script>
+
+<Field {label} {help} {error} {required} {id}>
+  {#snippet children(control)}
+    <Input
+      {...control}
+      name="email"
+      type="email"
+      autocomplete="email"
+      placeholder="name@example.com"
+      data-testid="email"
+    />
+  {/snippet}
+</Field>

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Fieldset, Form, Input, Label } from "@reddb-io/design-system/base";
+
+  interface Props {
+    disabledGroup?: boolean;
+    onsubmit?: (event: SubmitEvent) => void;
+  }
+
+  const { disabledGroup = false, onsubmit }: Props = $props();
+</script>
+
+<div>
+  <Form
+    action="/profiles"
+    method="post"
+    autocomplete="off"
+    novalidate
+    class="max-w-xl"
+    data-testid="profile-form"
+    {onsubmit}
+  >
+    <Label
+      for="display-name"
+      title="Your public name"
+      class="tracking-wide"
+      data-testid="display-name-label"
+    >Display name</Label>
+    <Input id="display-name" name="displayName" />
+
+    <Fieldset
+      legend="Contact preferences"
+      disabled={disabledGroup}
+      class="min-w-0"
+      data-intended-group
+    >
+      <Label for="email-notices">Email notices</Label>
+      <Input id="email-notices" name="notices" type="checkbox" value="email" />
+    </Fieldset>
+
+    <button type="submit">Save profile</button>
+  </Form>
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <Form data-testid="nested-form">
+      <Label for="nested-query" data-testid="nested-label">Search</Label>
+      <Input id="nested-query" name="query" type="search" />
+      <Fieldset legend="Search options"><p>No filters selected.</p></Fieldset>
+    </Form>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    failure: "unlabelled-control" | "lost-fieldset-group";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "unlabelled-control"}
+  <div>
+    <span>Email address</span>
+    <input id="unlabelled-email" name="email" />
+  </div>
+{:else}
+  <div data-intended-group>
+    <span>Contact preferences</span>
+    <label for="email-notices">Email notices</label>
+    <input id="email-notices" name="notices" type="checkbox" />
+  </div>
+{/if}

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import AspectRatio from "../../src/AspectRatio.svelte";
+  import Skeleton from "../../src/Skeleton.svelte";
+  import Prose from "../../src/Prose.svelte";
+  import Eyebrow from "../../src/Eyebrow.svelte";
+  import Kbd from "../../src/Kbd.svelte";
+  import Form from "../../src/Form.svelte";
+  import Fieldset from "../../src/Fieldset.svelte";
+  import SkipLink from "../../src/SkipLink.svelte";
+  import Meter from "../../src/Meter.svelte";
+  import Progress from "../../src/Progress.svelte";
+  import RadialProgress from "../../src/RadialProgress.svelte";
+  import Indicator from "../../src/Indicator.svelte";
+  import StatusIndicator from "../../src/StatusIndicator.svelte";
+  import List from "../../src/List.svelte";
+  import GridList from "../../src/GridList.svelte";
+  import DescriptionList from "../../src/DescriptionList.svelte";
+  import ControlGroup from "../../src/ControlGroup.svelte";
+  import ContentMask from "../../src/ContentMask.svelte";
+  import SectionHeading from "../../src/SectionHeading.svelte";
+  import Statistic from "../../src/Statistic.svelte";
+  const adapters: Record<string, Component<any>> = { AspectRatio, Skeleton, Prose, Eyebrow, Kbd, Form, Fieldset, SkipLink, Meter, Progress, RadialProgress, Indicator, StatusIndicator, List, GridList, DescriptionList, ControlGroup, ContentMask, SectionHeading, Statistic };
+  let { name, options = {}, content = true, rich = false }: { name: string; options?: Record<string, any>; content?: boolean; rich?: boolean } = $props();
+  export function update(next: Record<string, unknown>) { options = next; }
+  const Adapter = $derived(adapters[name]!);
+</script>
+{#snippet marker()}<span aria-label="3 unread">3</span>{/snippet}
+{#snippet action()}<button type="button">Details</button>{/snippet}
+{#snippet term()}<strong>Requests</strong>{/snippet}
+{#snippet detail()}<a href="/detail">View details</a>{/snippet}
+{#if name === "Fieldset"}
+  <Fieldset {...options}>
+    {#snippet children(control)}<input {...control} name="choice" aria-label="Choice" value="chosen" />{/snippet}
+  </Fieldset>
+{:else if name === "Indicator"}
+  <Indicator {...options} {marker}><button type="button">Inbox</button></Indicator>
+{:else if name === "SectionHeading"}
+  {#if rich}<SectionHeading {...options} actions={action} />{:else}<SectionHeading {...options} />{/if}
+{:else if name === "DescriptionList"}
+  <DescriptionList {...options} items={rich ? [{ term, detail }] : options.items} />
+{:else if name === "Form"}
+  <Form {...options}><input name="query" aria-label="Query" value="original" required /><button type="submit">Submit</button><button type="reset">Reset</button></Form>
+{:else if name === "List" || name === "GridList"}
+  <Adapter {...options}>
+    {#if options.list === false}<div>Alpha</div><div>Beta</div>{:else}<li>Alpha</li><li>Beta</li>{/if}
+  </Adapter>
+{:else if content}
+  <Adapter {...options}><span data-test-content>Content</span></Adapter>
+{:else}
+  <Adapter {...options} />
+{/if}

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Checkbox from "../../src/Checkbox.svelte";
+  import Switch from "../../src/Switch.svelte";
+  import RadioGroup from "../../src/RadioGroup.svelte";
+  import Select from "../../src/Select.svelte";
+  let { name, options = {}, rich = false }: { name: string; options?: Record<string, any>; rich?: boolean } = $props();
+  const adapters: Record<string, Component<any>> = { Checkbox, Switch, RadioGroup, Select };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+<form>
+  {#if name === "RadioGroup" && rich}
+    <RadioGroup {...options} legend={options.legend} name={options.name} options={options.options}>
+      {#snippet optionMedia(option)}<span aria-hidden="true">{option.value}</span>{/snippet}
+    </RadioGroup>
+  {:else if name === "Select" && rich}
+    <Select {...options}><optgroup label="More regions"><option value="eu">Europe</option><option value="ap" disabled>Asia Pacific</option></optgroup></Select>
+  {:else}<Adapter {...options} />{/if}
+</form>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Swap from "../../src/Swap.svelte";
+  import CodeBlock from "../../src/CodeBlock.svelte";
+  let { name, options = {}, clicked, changed }: { name: string; options?: Record<string, any>; clicked?: () => void; changed?: (next: boolean) => void } = $props();
+  export function update(next: Record<string, any>) { options = next; }
+  const native = $derived.by(() => { const { faces, ...rest } = options; return rest; });
+</script>
+{#if name === "Swap"}
+  {#if options.faces}
+    <Swap {...native} label={options.label} onclick={clicked} onswappedchange={changed}>
+      {#snippet off()}<span aria-hidden="true">◇</span> Pin{/snippet}
+      {#snippet on()}<span aria-hidden="true">◆</span> Pin{/snippet}
+    </Swap>
+  {:else}<Swap {...native} label={options.label} onclick={clicked} onswappedchange={changed} />{/if}
+{:else}<CodeBlock {...native} code={options.code} />{/if}

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Link from "../../src/Link.svelte";
+  import Alert from "../../src/Alert.svelte";
+  import Notification from "../../src/Notification.svelte";
+  import EmptyState from "../../src/EmptyState.svelte";
+  import MediaObject from "../../src/MediaObject.svelte";
+  import ListContainer from "../../src/ListContainer.svelte";
+  import Breadcrumbs from "../../src/Breadcrumbs.svelte";
+  import BrowserMockup from "../../src/BrowserMockup.svelte";
+  import WindowMockup from "../../src/WindowMockup.svelte";
+  import PhoneMockup from "../../src/PhoneMockup.svelte";
+  let { name, options = {}, content = true, rich = false }: { name: string; options?: Record<string, any>; content?: boolean; rich?: boolean } = $props();
+  const adapters: Record<string, Component<any>> = { Link, Alert, Notification, BrowserMockup, WindowMockup, PhoneMockup };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+{#snippet media()}<span data-slot="media">M</span>{/snippet}
+{#snippet body()}<a href="/detail" data-slot="content">Details</a>{/snippet}
+{#snippet actions()}<button type="button">Create</button>{/snippet}
+{#snippet header()}<strong>Custom title</strong>{/snippet}
+{#if name === "EmptyState"}
+  <EmptyState {...options} media={rich ? media : undefined} actions={rich ? actions : undefined} />
+{:else if name === "MediaObject"}
+  <MediaObject {...options} {media}>{#snippet children()}{@render body()}{/snippet}</MediaObject>
+{:else if name === "ListContainer"}
+  <ListContainer {...options} header={rich ? header : undefined} footer={rich ? actions : undefined}>
+    {#snippet children()}<ul><li>Destination</li></ul>{/snippet}
+  </ListContainer>
+{:else if name === "Breadcrumbs"}
+  <Breadcrumbs {...options} items={options.items ?? []} />
+{:else if content}
+  <Adapter {...options}>{#snippet children()}<span data-slot="body">Content</span>{/snippet}</Adapter>
+{:else}
+  <Adapter {...options} />
+{/if}

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import InlineEdit from "../../src/InlineEdit.svelte";
+  import Reveal from "../../src/Reveal.svelte";
+  let { name, options = {}, changed = () => {}, editingChanged = () => {} }: { name: string; options?: Record<string, any>; changed?: (value: string) => void; editingChanged?: (next: boolean) => void } = $props();
+  export function update(next: Record<string, any>) { options = next; }
+</script>
+{#if name === "InlineEdit"}
+  <InlineEdit {...options} label={options.label} value={options.value}
+    onvaluechange={value => { changed(value); options = { ...options, value }; }}
+    oneditingchange={editing => { editingChanged(editing); if (options.editing !== undefined) options = { ...options, editing }; }} />
+{:else}<Reveal {...options}><p>Review details</p></Reveal>{/if}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Field from "../../src/Field.svelte";
+  import Input from "../../src/Input.svelte";
+  import type { FieldContractProps } from "../../src/core/field";
+  let { label, help, error, required, id, layout }: FieldContractProps = $props();
+  export function clearError() { error = undefined; }
+</script>
+<Field {label} {help} {error} {required} {id} {layout}>
+  {#snippet children(control)}<Input {...control} name="name" />{/snippet}
+</Field>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Avatar from "../../src/Avatar.svelte";
+  import ToggleGroup from "../../src/ToggleGroup.svelte";
+  import AppearanceSwitch from "../../src/AppearanceSwitch.svelte";
+  let { name, options = {} }: { name: string; options?: Record<string, any> } = $props();
+  const adapters: Record<string, Component<any>> = { Avatar, ToggleGroup, AppearanceSwitch };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, any>) { options = next; }
+</script>
+<form><Adapter {...options} /></form>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Input from "../../src/Input.svelte";
+  let { type, initialValue, onValueChange }: { type: "text" | "number" | "range"; initialValue: string | number | null; onValueChange: (value: unknown) => void } = $props();
+  let value = $state(untrack(() => initialValue));
+  export function setValue(next: string | number | null) { value = next; }
+</script>
+<Input {type} bind:value min="0" max="10" step="any" onvaluechange={onValueChange} aria-label="Value" name="value" />

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import NavigationScope from "../../src/NavigationScope.svelte";
+  import LinkPreview from "../../src/LinkPreview.svelte";
+  import Dialog from "../../src/Dialog.svelte";
+  import Drawer from "../../src/Drawer.svelte";
+  import AlertDialog from "../../src/AlertDialog.svelte";
+  import Disclosure from "../../src/Disclosure.svelte";
+  import Accordion from "../../src/Accordion.svelte";
+  import Tabs from "../../src/Tabs.svelte";
+  import Combobox from "../../src/Combobox.svelte";
+  import Popover from "../../src/Popover.svelte";
+  import DropdownMenu from "../../src/DropdownMenu.svelte";
+  import Tooltip from "../../src/Tooltip.svelte";
+  import DateField from "../../src/DateField.svelte";
+  import TimeField from "../../src/TimeField.svelte";
+  import DateRangeField from "../../src/DateRangeField.svelte";
+  import TimeRangeField from "../../src/TimeRangeField.svelte";
+  import Calendar from "../../src/Calendar.svelte";
+  import RangeCalendar from "../../src/RangeCalendar.svelte";
+  import DatePicker from "../../src/DatePicker.svelte";
+  import DateRangePicker from "../../src/DateRangePicker.svelte";
+  import SearchSelect from "../../src/SearchSelect.svelte";
+  import Carousel from "../../src/Carousel.svelte";
+  import Navbar from "../../src/Navbar.svelte";
+  import NavigationMenu from "../../src/NavigationMenu.svelte";
+  let { name, options = {}, changed = (_value: any) => {} }: { name: string; options?: Record<string, any>; changed?: (value: any) => void } = $props();
+  const adapters: Record<string, Component<any>> = { Dialog, Drawer, AlertDialog, Disclosure, Accordion, Tabs, Combobox, Popover, DropdownMenu, Tooltip, LinkPreview, NavigationScope, DateField, TimeField, DateRangeField, TimeRangeField, Calendar, RangeCalendar, DatePicker, DateRangePicker, SearchSelect, Carousel, Navbar, NavigationMenu };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, any>) { options = next; }
+</script>
+<form>
+  {#if name === "Accordion" || name === "Tabs"}
+    <Adapter {...options} onvaluechange={changed}>
+      {#snippet children(item: { value: string })}<p>{item.value} details</p>{/snippet}
+    </Adapter>
+  {:else if name === "Dialog" || name === "Drawer" || name === "AlertDialog" || name === "Disclosure" || name === "Popover"}
+    <Adapter {...options} onopenchange={changed}><button type="button">Review detail</button>{#if name === "Dialog" || name === "Drawer"}<Popover triggerLabel="Nested options" contentLabel="Nested choices"><button type="button">Choose nested option</button></Popover>{/if}</Adapter>
+  {:else if name === "DateField" || name === "TimeField" || name === "DateRangeField" || name === "TimeRangeField" || name === "Calendar" || name === "RangeCalendar" || name === "DatePicker" || name === "DateRangePicker" || name === "SearchSelect"}<Adapter {...options} onvaluechange={changed} />
+  {:else if name === "NavigationScope"}<Adapter {...options}><a href="/inspect">Inspect request</a><a href="#summary">Summary</a></Adapter>
+  {:else if name === "Combobox"}<Combobox {...options} label={options.label} options={options.options} onvaluechange={changed} />
+  {:else}<Adapter {...options} />{/if}
+</form>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Icon from "../../src/Icon.svelte";
+  import Image from "../../src/Image.svelte";
+  import Logo from "../../src/Logo.svelte";
+  import Card from "../../src/Card.svelte";
+  import TestGlyph from "./TestGlyph.svelte";
+  let { name, options = {}, rich = false, glyph = false }: { name: string; options?: Record<string, any>; rich?: boolean; glyph?: boolean } = $props();
+  const adapters: Record<string, Component<any>> = { Icon, Image, Logo };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+{#snippet header()}<strong>Custom header</strong>{/snippet}
+{#snippet media()}<span>Custom media</span>{/snippet}
+{#snippet footer()}<button type="button">Details</button>{/snippet}
+{#if name === "Card"}
+  <Card {...options} icon={glyph ? TestGlyph : undefined} header={rich ? header : undefined} media={rich ? media : undefined} {footer}><span>Card content</span></Card>
+{:else}
+  <Adapter {...options} {...(name === "Icon" && glyph ? { icon: TestGlyph } : {})} />
+{/if}

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import ToggleButton from "../../src/ToggleButton.svelte";
+  import Rating from "../../src/Rating.svelte";
+  import FileInput from "../../src/FileInput.svelte";
+  let { name, options = {} }: { name: string; options?: Record<string, any> } = $props();
+  const adapters: Record<string, Component<any>> = { ToggleButton, Rating, FileInput };
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+<form><Adapter {...options} /></form>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import NumberField from "../../src/NumberField.svelte";
+  import Slider from "../../src/Slider.svelte";
+  import OneTimeCodeInput from "../../src/OneTimeCodeInput.svelte";
+  let { name, options = {}, changed = () => {}, complete = () => {} }: { name: string; options?: Record<string, any>; changed?: (value: any) => void; complete?: (value: string) => void } = $props();
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+<form id="numeric-form">
+  {#if name === "NumberField"}<NumberField {...options} label={options.label} onvaluechange={changed} />
+  {:else if name === "Slider"}<Slider {...options} label={options.label} onvaluechange={changed} />
+  {:else}<OneTimeCodeInput {...options} label={options.label} onvaluechange={changed} oncomplete={complete} />{/if}
+</form>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Badge from "../../src/Badge.svelte";
+  import Button from "../../src/Button.svelte";
+  import Container from "../../src/Container.svelte";
+  import Divider from "../../src/Divider.svelte";
+  import Heading from "../../src/Heading.svelte";
+  import Label from "../../src/Label.svelte";
+  import LoadingIndicator from "../../src/LoadingIndicator.svelte";
+  import Stack from "../../src/Stack.svelte";
+  import Text from "../../src/Text.svelte";
+  // This fixture deliberately accepts each adapter's own native props.
+  const adapters: Record<string, Component<any>> = { Badge, Button, Container, Divider, Heading, Label, LoadingIndicator, Stack, Text };
+  const { name, options = {} }: { name: string; options?: Record<string, unknown> } = $props();
+  const Adapter = $derived(adapters[name]!);
+</script>
+<Adapter {...options}>Content</Adapter>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Table from "../../src/Table.svelte";
+  import Timeline from "../../src/Timeline.svelte";
+  import Steps from "../../src/Steps.svelte";
+  import Pagination from "../../src/Pagination.svelte";
+  import Countdown from "../../src/Countdown.svelte";
+  import ScrollArea from "../../src/ScrollArea.svelte";
+  import Breadcrumbs from "../../src/Breadcrumbs.svelte";
+  const adapters: Record<string, Component<any>> = { Table, Timeline, Steps, Pagination, Countdown, ScrollArea, Breadcrumbs };
+  let { name, options = {}, rich = false }: { name: string; options?: Record<string, any>; rich?: boolean } = $props();
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+{#if name === "ScrollArea"}
+  <ScrollArea {...options} label={options.label}><a href="/detail">Details</a><p>Scrollable content</p></ScrollArea>
+{:else if name === "Table" && rich}
+  <Table {...options} caption={options.caption} columns={options.columns} rows={options.rows}>
+    {#snippet cell({ column, rowIndex, value })}<a href="/cell/{rowIndex}/{column.key}">{value ?? "Missing"}</a>{/snippet}
+  </Table>
+{:else}
+  <Adapter {...options} />
+{/if}

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import SlideFrame from "../../src/SlideFrame.svelte";
+  import TitleSlide from "../../src/TitleSlide.svelte";
+  import SectionSlide from "../../src/SectionSlide.svelte";
+  import TwoColumnSlide from "../../src/TwoColumnSlide.svelte";
+  import FigureSlide from "../../src/FigureSlide.svelte";
+  import QuoteSlide from "../../src/QuoteSlide.svelte";
+  import BulletsSlide from "../../src/BulletsSlide.svelte";
+  import Deck from "../../src/Deck.svelte";
+  const adapters: Record<string, Component<any>> = { TitleSlide, SectionSlide, QuoteSlide, BulletsSlide };
+  let { name, options = {} }: { name: string; options?: Record<string, any> } = $props();
+  const Adapter = $derived(adapters[name]!);
+  export function update(next: Record<string, unknown>) { options = next; }
+</script>
+{#if name === "SlideFrame"}
+  <SlideFrame {...options} label={options.label}><a href="/report">Read report</a></SlideFrame>
+{:else if name === "Deck"}
+  <Deck {...options} label={options.label}><SlideFrame label="Nested slide"><a href="/report">Read report</a></SlideFrame></Deck>
+{:else if name === "TwoColumnSlide"}
+  <TwoColumnSlide {...options} title={options.title}>
+    {#snippet start()}<h3>Before</h3><p>Manual review</p>{/snippet}
+    {#snippet end()}<h3>After</h3><a href="/report">Read report</a>{/snippet}
+  </TwoColumnSlide>
+{:else if name === "FigureSlide"}
+  <FigureSlide {...options} title={options.title}>
+    {#snippet figure()}<table><caption>Replicas</caption><tbody><tr><th scope="row">api-01</th><td>Ready</td></tr></tbody></table>{/snippet}
+  </FigureSlide>
+{:else}
+  <Adapter {...options} />
+{/if}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Textarea from "../../src/Textarea.svelte";
+  const { initialValue, onValueChange }: { initialValue: string; onValueChange: (value: string) => void } = $props();
+  let value = $state(untrack(() => initialValue));
+  export function setValue(next: string) { value = next; }
+</script>
+<Textarea bind:value onvaluechange={onValueChange} name="notes" aria-label="Notes" />

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { CodeBlock, Kbd, Link } from "@reddb-io/design-system/base";
+</script>
+
+<section
+  data-inline-text-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <p>
+    Open the <Link href="/guide">guide</Link> with <Kbd keys={["Ctrl", "K"]} />.
+  </p>
+  <CodeBlock code={'const greeting = "hello";'} language="TypeScript" />
+</section>

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

@@ -0,0 +1,20 @@
+<!-- Deliberately broken examples: tests pin the regressions these primitives prevent. -->
+<script lang="ts">
+  interface Props {
+    failure: "colour-only-link" | "collapsed-code";
+    source?: string;
+  }
+
+  const { failure, source = "const answer = 42;" }: Props = $props();
+  const collapsed = $derived(source.trim().replace(/\s+/g, " "));
+</script>
+
+{#if failure === "colour-only-link"}
+  <p>
+    Read the
+    <a data-broken-link class="text-primary" href="/guide">usage guide</a>
+    before continuing.
+  </p>
+{:else}
+  <code data-broken-code>{collapsed}</code>
+{/if}

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Container, SkipLink, Stack } from "@reddb-io/design-system/base";
+</script>
+
+<SkipLink />
+<main id="main-content" tabindex="-1">
+  <Container aria-label="Deployment content">
+    <Stack gap="lg" aria-label="Deployment flow">
+      <h1>Deployment</h1>
+      <div data-density="compact">
+        <Container aria-label="Compact nested content">
+          <Stack gap="sm"><p>Nested density island</p></Stack>
+        </Container>
+      </div>
+    </Stack>
+  </Container>
+</main>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Avatar, Carousel, MediaObject } from "@reddb-io/design-system/base";
+</script>
+
+{#snippet portrait()}
+  <Avatar name="Ada Lovelace" fallback="AL" />
+{/snippet}
+
+{#snippet biography()}
+  <div>
+    <strong>Ada Lovelace</strong>
+    <a href="/people/ada">Read biography</a>
+  </div>
+{/snippet}
+
+{#snippet firstSlide()}
+  <button type="button">Open architecture</button>
+{/snippet}
+
+{#snippet secondSlide()}
+  <p>Delivery</p>
+{/snippet}
+
+<div
+  data-media-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <MediaObject media={portrait}>
+    {@render biography()}
+  </MediaObject>
+
+  <Carousel
+    label="Platform capabilities"
+    slides={[
+      { label: "Architecture", content: firstSlide },
+      { label: "Delivery", content: secondSlide },
+    ]}
+  />
+</div>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  interface Props {
+    failure: "avatar-without-fallback" | "unpausable-carousel";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "avatar-without-fallback"}
+  <span data-broken-avatar role="img" aria-label="Ada Lovelace">
+    <img src="/missing-ada.png" alt="" />
+  </span>
+{:else}
+  <section
+    data-broken-carousel
+    data-auto-rotates
+    role="region"
+    aria-roledescription="carousel"
+    aria-label="Featured work"
+  >
+    <p>Rotation starts automatically, with no control that can pause it.</p>
+  </section>
+{/if}