@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/fixtures/CommerceSurfacesConsumer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import {
+    CheckoutForm,
+    OrderHistory,
+    OrderSummary,
+    ShoppingCart,
+    type CheckoutSection,
+    type OrderHistoryEntry,
+    type OrderSummaryLine,
+    type ShoppingCartItem,
+  } from "@reddb-io/design-system/app";
+
+  const sections: readonly CheckoutSection[] = [
+    { legend: "Delivery", fields: [{ name: "name", label: "Full name", autocomplete: "name" }] },
+  ];
+  const items: readonly ShoppingCartItem[] = [
+    { id: "keyboard", name: "Mechanical keyboard", price: "$48.00", quantity: 1 },
+  ];
+  const lines: readonly OrderSummaryLine[] = [{ label: "Subtotal", value: "$48.00" }];
+  const orders: readonly OrderHistoryEntry[] = [
+    { id: "RDB-1042", placed: "8 August 2026", placedAt: "2026-08-08", status: "Delivered", total: "$48.00" },
+  ];
+</script>
+
+<div data-commerce-consumer data-theme="application" data-color-scheme="dark" data-density="compact">
+  <ShoppingCart title="Shopping cart" {items} totalLabel="Total" total="$48.00" />
+  <CheckoutForm {sections} submitLabel="Place order" aria-label="Checkout" />
+  <OrderSummary title="Order summary" {lines} totalLabel="Total" total="$48.00" />
+  <OrderHistory title="Order history" caption="Past orders" {orders} />
+</div>

package/vendor/ds/kits/app/test/fixtures/DiffConsumer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Diff, type DiffRow } from "@reddb-io/design-system/app";
+
+  const rows: readonly DiffRow[] = [
+    { before: "region = us-east-1", after: "region = us-east-1" },
+    { before: "replicas = 2", after: "replicas = 3" },
+  ];
+</script>
+
+<section
+  data-diff-consumer
+  data-theme="application"
+  data-color-scheme="dark"
+  data-density="compact"
+  data-motion="reduced"
+>
+  <Diff label="Deployment changes" {rows} mode="side-by-side" />
+</section>

package/vendor/ds/kits/app/test/fixtures/DiffContractFailures.svelte

@@ -0,0 +1,5 @@
+<!-- A change presentation whose meaning disappears when colour is absent. -->
+<section data-broken-diff aria-label="Configuration changes">
+  <pre><code><span class="text-danger">timeout = 30</span>
+<span class="text-success">timeout = 60</span></code></pre>
+</section>

package/vendor/ds/kits/app/test/fixtures/EntityInspector.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import EntityInspector from "../../src/composites/EntityInspector.svelte";
+  let { options }: { options: Record<string, any> } = $props();
+  let current = $state((() => options)());
+  export function update(next: Record<string, any>) { current = next; }
+</script>
+<EntityInspector {...(current as any)}><p>Caller-owned details</p>{#snippet actions()}<span>Review controls</span>{/snippet}</EntityInspector>

package/vendor/ds/kits/app/test/fixtures/EntityJourney.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import EntityJourney from "../../src/composites/EntityJourney.svelte";
+  let { options }: { options: any } = $props();
+  let current = $state(untrack(() => options));
+  export function update(next: any) {
+    current = next;
+  }
+</script>
+
+<EntityJourney {...current} />

package/vendor/ds/kits/app/test/fixtures/FilterContractFailures.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    failure: "active-state-is-only-visual";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "active-state-is-only-visual"}
+  <!-- Deliberately broken: visual emphasis never exposes which filter is active. -->
+  <div aria-label="Framework" data-broken-filter>
+    <button type="button">All</button>
+    <button type="button" class="font-medium">Svelte</button>
+    <button type="button">React</button>
+  </div>
+{/if}

package/vendor/ds/kits/app/test/fixtures/FilterSurfacesConsumer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import {
+    CategoryFilter,
+    Filter,
+    type CategoryFilterOption,
+    type FilterOption,
+  } from "@reddb-io/design-system/app";
+
+  const filters: readonly FilterOption[] = [
+    { value: "all", label: "All" },
+    { value: "available", label: "Available" },
+  ];
+  const categories: readonly CategoryFilterOption[] = [
+    { value: "database", label: "Database" },
+    { value: "cache", label: "Cache" },
+  ];
+  let active = $state("all");
+  let selected = $state<string[]>(["database"]);
+</script>
+
+<div data-filter-consumer data-theme="application" data-color-scheme="dark" data-density="compact">
+  <Filter legend="Availability" options={filters} bind:value={active} name="availability" />
+  <CategoryFilter legend="Categories" options={categories} bind:value={selected} name="category" />
+</div>

package/vendor/ds/kits/app/test/fixtures/FrameworkApp.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import * as app from "../../src/index";
+  let { name, options = {}, content = true, slotNames = [] }: { name: string; options?: Record<string, any>; content?: boolean; slotNames?: string[] } = $props();
+  export function update(next: Record<string, any>) { options = next; }
+  const contentSlots = $derived(Object.fromEntries(slotNames.map(key => [key, slot])));
+  const Component = $derived(app[name as keyof typeof app] as any);
+</script>
+{#snippet slot(context?: any)}<span data-provided-slot>Caller detail</span>{#if context?.close}<button type="button" onclick={context.close}>Close via slot</button>{/if}{/snippet}
+{#snippet media()}<span>Preview image</span>{/snippet}
+{#snippet actions()}<button type="button">Inspect request</button>{/snippet}
+{#snippet icon()}<span aria-hidden="true">•</span>{/snippet}
+{#if name === "ActionPanel"}
+  <Component {...options} {...contentSlots} actions={contentSlots.actions ?? actions}><span>Request details</span></Component>
+{:else if name === "CategoryPreview" || name === "ProductFeature"}
+  <Component {...options} {...contentSlots} media={contentSlots.media ?? media}><span>Request details</span></Component>
+{:else if name === "Incentive"}
+  <Component {...options} {...contentSlots} icon={contentSlots.icon ?? icon} />
+{:else if name === "CheckoutForm" || name === "ShoppingCart"}
+  <Component {...options} {...contentSlots} />
+{:else if name === "CategoryFilter" || name === "Filter"}
+  <form><Component {...options} {...contentSlots} /></form>
+{:else if name === "SplitView"}
+  <Component {...options} {...contentSlots}>{#snippet start()}Before{/snippet}{#snippet end()}After{/snippet}</Component>
+{:else if name === "SidebarLayout"}
+  <Component {...options} {...contentSlots}>{#snippet sidebar({ item, close })}<button onclick={close}>Close context</button><a href="#detail">{item?.label ?? "Navigation"} detail</a>{/snippet}<span>Request details</span></Component>
+{:else}
+  <Component {...options} {...contentSlots}>{#if content}<span>Request details</span>{/if}</Component>
+{/if}

package/vendor/ds/kits/app/test/fixtures/HeadingContractFailures.svelte

@@ -0,0 +1,10 @@
+<!-- Deliberately broken: a page title presented as a subordinate section. -->
+<main>
+  <div data-broken-page-heading>
+    <h2>Deployments</h2>
+    <p>Manage releases across environments.</p>
+  </div>
+  <section>
+    <h3>Recent deployments</h3>
+  </section>
+</main>

package/vendor/ds/kits/app/test/fixtures/MainOwnershipConsumer.svelte

@@ -0,0 +1,35 @@
+<!-- Wave 5A: ApplicationShell owns <main>; SidebarLayout and nested shells yield to it. -->
+<script lang="ts">
+  import ApplicationShell from "../../src/composites/ApplicationShell.svelte";
+  import SidebarLayout from "../../src/composites/SidebarLayout.svelte";
+
+  interface Props {
+    case: "sidebar-in-shell" | "sidebar-forced-main" | "shell-in-shell" | "sidebar-alone" | "sidebar-opt-out" | "sidebar-in-embedded-shell";
+  }
+
+  const { case: which }: Props = $props();
+</script>
+
+{#snippet aside()}<p>Filters</p>{/snippet}
+
+{#if which === "sidebar-in-shell"}
+  <ApplicationShell>
+    <SidebarLayout sidebar={aside}><p>Nodes</p></SidebarLayout>
+  </ApplicationShell>
+{:else if which === "sidebar-forced-main"}
+  <ApplicationShell embedded>
+    <SidebarLayout sidebar={aside} main mainId="workspace"><p>Nodes</p></SidebarLayout>
+  </ApplicationShell>
+{:else if which === "shell-in-shell"}
+  <ApplicationShell>
+    <ApplicationShell mainId="preview"><p>Preview</p></ApplicationShell>
+  </ApplicationShell>
+{:else if which === "sidebar-in-embedded-shell"}
+  <ApplicationShell embedded>
+    <SidebarLayout sidebar={aside}><p>Nodes</p></SidebarLayout>
+  </ApplicationShell>
+{:else if which === "sidebar-alone"}
+  <SidebarLayout sidebar={aside}><p>Nodes</p></SidebarLayout>
+{:else if which === "sidebar-opt-out"}
+  <SidebarLayout sidebar={aside} main={false}><p>Nodes</p></SidebarLayout>
+{/if}

package/vendor/ds/kits/app/test/fixtures/MerchandisingContractFailures.svelte

@@ -0,0 +1,3 @@
+<a href="/categories/desks" data-indiscernible-category-preview-link>
+  <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 4h16v16H4z" /></svg>
+</a>

package/vendor/ds/kits/app/test/fixtures/MerchandisingSurfacesConsumer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { CategoryPreview, Incentive } from "@reddb-io/design-system/app";
+  import { Link } from "@reddb-io/design-system/base";
+</script>
+
+{#snippet categoryMedia()}
+  <img src="/desks.jpg" alt="Oak writing desk" />
+{/snippet}
+
+{#snippet deliveryIcon()}
+  <svg viewBox="0 0 24 24"><path d="M3 6h12v10H3z" /></svg>
+{/snippet}
+
+<div data-merchandising-consumer data-theme="base" data-color-scheme="dark" data-density="compact">
+  <CategoryPreview
+    name="Desks"
+    href="/categories/desks"
+    description="Workspaces for every room."
+    media={categoryMedia}
+  />
+  <Incentive
+    title="Complimentary delivery"
+    description="Orders over $50 ship free."
+    icon={deliveryIcon}
+  >
+    {#snippet actions()}<Link href="/delivery">Delivery details</Link>{/snippet}
+  </Incentive>
+</div>

package/vendor/ds/kits/app/test/fixtures/NavigationContractFailures.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    failure: "sidebar-without-current" | "bottom-unreachable-by-keyboard";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "sidebar-without-current"}
+  <!-- Deliberately broken: a visual selection is not a current-item semantic. -->
+  <nav aria-label="Workspace" data-broken-sidebar-navigation>
+    <a href="/overview" class="font-medium">Overview</a>
+    <a href="/activity">Activity</a>
+  </nav>
+{:else}
+  <!-- Deliberately broken: click-shaped spans never enter the tab order. -->
+  <nav aria-label="Primary" data-broken-bottom-navigation>
+    <span>Home</span>
+    <span>Search</span>
+    <span>Account</span>
+  </nav>
+{/if}

package/vendor/ds/kits/app/test/fixtures/NavigationSurfacesConsumer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import {
+    BottomNavigation,
+    SidebarNavigation,
+    StoreNavigation,
+    type ApplicationNavigationItem,
+  } from "@reddb-io/design-system/app";
+
+  const items: readonly ApplicationNavigationItem[] = [
+    { id: "home", label: "Home", href: "/" },
+    { id: "catalogue", label: "Catalogue", href: "/catalogue" },
+    { id: "account", label: "Account", href: "/account" },
+  ];
+</script>
+
+<div data-theme="application" data-color-scheme="dark" data-density="compact">
+  <SidebarNavigation label="Workspace" {items} currentId="catalogue" />
+  <BottomNavigation label="Primary" {items} currentId="home" />
+  <StoreNavigation label="Store" {items} currentId="catalogue" collapse="expanded">
+    {#snippet brand()}<a href="/">Store home</a>{/snippet}
+    {#snippet actions()}<a href="/cart">Cart</a>{/snippet}
+  </StoreNavigation>
+</div>

package/vendor/ds/kits/app/test/fixtures/NestedSplitViewConsumer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { SplitView } from "@reddb-io/design-system/app";
+</script>
+
+<SplitView fraction={0.4} class="h-64" label="Resize navigation and workspace">
+  {#snippet start()}
+    <nav aria-label="Project">Files</nav>
+  {/snippet}
+  {#snippet end()}
+    <SplitView
+      orientation="vertical"
+      fraction={0.6}
+      class="h-full"
+      label="Resize editor and console"
+    >
+      {#snippet start()}<main>Editor</main>{/snippet}
+      {#snippet end()}<aside aria-label="Console">Console</aside>{/snippet}
+    </SplitView>
+  {/snippet}
+</SplitView>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import {
+    TaskCard,
+    TelemetryRow,
+    PropertyPanel,
+    PhaseSummary,
+    PlaybackControls,
+  } from "../../src";
+  let { name, options }: { name: string; options: Record<string, any> } =
+    $props();
+</script>
+
+{#if name === "TaskCard"}<TaskCard
+    item={options.item}
+    {...options}
+  />{:else if name === "TelemetryRow"}<TelemetryRow
+    label={options.label}
+    value={options.value}
+    {...options}
+  />{:else if name === "PropertyPanel"}<PropertyPanel
+    title={options.title}
+    items={options.items}
+    {...options}
+  />{:else if name === "PhaseSummary"}<PhaseSummary
+    label={options.label}
+    gates={options.gates}
+    {...options}
+  />{:else}<PlaybackControls
+    label={options.label}
+    playing={options.playing}
+    position={options.position}
+    duration={options.duration}
+    {...options}
+  />{/if}

package/vendor/ds/kits/app/test/fixtures/ProductCatalogueConsumer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    ProductFeature,
+    ProductList,
+    ProductOverview,
+    ProductQuickview,
+    type ProductListItem,
+  } from "@reddb-io/design-system/app";
+
+  const products: ProductListItem[] = [
+    {
+      id: "field-notes",
+      name: "Field notes",
+      href: "/products/field-notes",
+      description: "A pocket notebook.",
+      price: "$12",
+    },
+  ];
+</script>
+
+{#snippet notebookMedia()}
+  <img src="/field-notes.jpg" alt="Black field-notes book" />
+{/snippet}
+
+{#snippet quickviewTrigger()}
+  <span>Preview field notes</span>
+{/snippet}
+
+<div data-theme="base" data-color-scheme="dark" data-density="compact">
+  <ProductList label="Stationery" items={products} columns={2} />
+
+  <ProductOverview
+    title="Field notes"
+    description="A pocket notebook for everyday observations."
+    price="$12"
+    media={notebookMedia}
+  >
+    <p>Ships with dot-grid paper.</p>
+    {#snippet actions()}<button type="button">Add to basket</button>{/snippet}
+  </ProductOverview>
+
+  <ProductFeature
+    title="Built for the field"
+    description="Thread-bound pages lie flat while you write."
+    media={notebookMedia}
+    mediaSide="end"
+  />
+
+  <ProductQuickview
+    triggerLabel="Preview Field notes"
+    title="Field notes"
+    description="A pocket notebook."
+    trigger={quickviewTrigger}
+    media={notebookMedia}
+  >
+    <button type="button">Choose Field notes</button>
+  </ProductQuickview>
+</div>

package/vendor/ds/kits/app/test/fixtures/ProductCatalogueContractFailures.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  let quickview: HTMLDialogElement;
+
+  function openQuickview(): void {
+    quickview.setAttribute("open", "");
+    quickview.querySelector<HTMLElement>("button")?.focus();
+  }
+
+  function closeQuickview(event: KeyboardEvent): void {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    quickview.removeAttribute("open");
+  }
+</script>
+
+<!-- Deliberately unnamed: neither the collection nor its product action has a name. -->
+<ul data-unnamed-product-list>
+  <li>
+    <button type="button" data-unnamed-product-action>
+      <svg aria-hidden="true" viewBox="0 0 16 16"><path d="M2 8h12" /></svg>
+    </button>
+  </li>
+</ul>
+
+<!-- Deliberately incomplete: dismissal strands focus inside the closed dialog. -->
+<button type="button" data-broken-quickview-trigger onclick={openQuickview}>Quick view</button>
+<dialog bind:this={quickview} data-broken-quickview onkeydown={closeQuickview}>
+  <button type="button" data-broken-quickview-action>Add to basket</button>
+</dialog>

package/vendor/ds/kits/app/test/fixtures/SettingsRows.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Button, Input } from "@reddb-io/design-system/base";
+  import SettingsRow from "../../src/composites/SettingsRow.svelte";
+</script>
+<SettingsRow label="Signing secret" description="At least 16 characters." id="secret">
+  {#snippet children(control)}<Input {...control} type="password" />{/snippet}
+</SettingsRow>
+<SettingsRow label="HTTPS and mobile access" description="Connect another device.">
+  {#snippet actions()}<Button>Configure HTTPS</Button>{/snippet}
+</SettingsRow>

package/vendor/ds/kits/app/test/fixtures/ShellBrandComposition.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Navbar } from "@reddb-io/design-system/base";
+  import {
+    SidebarRail,
+    shellBrandRegion,
+    type SidebarRailItem,
+  } from "../../src/index";
+
+  interface Props {
+    navbar: boolean;
+    rail: boolean;
+  }
+
+  const { navbar, rail }: Props = $props();
+  const region = $derived(shellBrandRegion({ navbar, rail }));
+  const noRailItems: readonly SidebarRailItem[] = [];
+</script>
+
+{#snippet brandMark()}
+  <a href="/" data-shell-brand-mark>Acme</a>
+{/snippet}
+
+{#snippet navbarBrand()}
+  <div data-shell-brand-region="navbar">
+    {#if region === "navbar"}{@render brandMark()}{/if}
+  </div>
+{/snippet}
+
+{#snippet railBrand()}
+  <div data-shell-brand-region="rail">
+    {#if region === "rail"}{@render brandMark()}{/if}
+  </div>
+{/snippet}
+
+<div data-shell-brand-composition>
+  {#if navbar}
+    <Navbar label="Product" collapse="expanded" brand={navbarBrand} />
+  {/if}
+
+  {#if rail}
+    <SidebarRail
+      label="Application rail"
+      items={noRailItems}
+      currentId=""
+      top={railBrand}
+    />
+  {/if}
+
+  <header data-sidebar-panel-header data-shell-brand-region="panel">
+    {#if region === "panel"}{@render brandMark()}{/if}
+  </header>
+</div>

package/vendor/ds/kits/app/test/fixtures/SocialContractFailures.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    failure: "unordered-feed" | "colour-only-rating";
+  }
+
+  let { failure }: Props = $props();
+</script>
+
+{#if failure === "unordered-feed"}
+  <div data-broken-activity-feed aria-label="Deployment activity">
+    <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>
+{:else}
+  <article data-broken-review aria-label="Review by Ada Lovelace">
+    <p>Ada Lovelace</p>
+    <p aria-label="Rating"><span class="text-primary">★★★★★</span></p>
+    <p>Clear and dependable.</p>
+  </article>
+{/if}

package/vendor/ds/kits/app/test/fixtures/SocialSurfacesConsumer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {
+    ActivityFeed,
+    ChatMessage,
+    Review,
+    type ActivityFeedItem,
+  } from "@reddb-io/design-system/app";
+
+  const activity: readonly ActivityFeedItem[] = [
+    {
+      id: "deployed",
+      title: "Ada deployed the release",
+      datetime: "2026-08-08T19:05:00Z",
+      time: "19:05",
+      href: "/deployments/42",
+    },
+  ];
+</script>
+
+<section
+  data-social-surfaces-consumer
+  data-theme="application"
+  data-color-scheme="dark"
+  data-density="compact"
+  data-motion="reduced"
+>
+  <ActivityFeed label="Deployment activity" items={activity} />
+
+  <ChatMessage
+    author="Ada Lovelace"
+    avatarFallback="AL"
+    datetime="2026-08-08T19:10:00Z"
+    time="19:10"
+  >
+    <p>Deployment is ready.</p>
+    {#snippet actions()}<button type="button">Reply</button>{/snippet}
+  </ChatMessage>
+
+  <Review author="Grace Hopper" avatarFallback="GH" rating={5}>
+    <p>Fast and reliable.</p>
+    {#snippet actions()}<button type="button">Mark helpful</button>{/snippet}
+  </Review>
+</section>

package/vendor/ds/kits/app/test/fixtures/TestGlyph.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { IconGlyphProps } from "@reddb-io/design-system/base";
+
+  let { size, color, strokeWidth, ...rest }: IconGlyphProps = $props();
+</script>
+
+<svg {...rest} width={size} height={size} {color} stroke={color} stroke-width={strokeWidth}>
+  <path d="M4 4h16v16H4z" />
+</svg>

package/vendor/ds/kits/app/test/fixtures/TitlingSurfacesConsumer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ActionPanel, CardHeading, PageHeading } from "@reddb-io/design-system/app";
+</script>
+
+<div data-theme="base" data-color-scheme="dark" data-density="compact">
+  <PageHeading title="Deployments" description="Manage releases.">
+    {#snippet actions()}<button type="button">New deployment</button>{/snippet}
+  </PageHeading>
+
+  <CardHeading title="Environment" level={3}>
+    {#snippet actions()}<button type="button">Edit</button>{/snippet}
+  </CardHeading>
+
+  <ActionPanel title="Production deployment">
+    <p>Review the configuration before saving.</p>
+    {#snippet actions()}
+      <button type="button">Cancel</button>
+      <button type="button">Save</button>
+    {/snippet}
+  </ActionPanel>
+</div>

package/vendor/ds/kits/app/test/fixtures/command-surfaces-consumer.ts

@@ -0,0 +1,14 @@
+export {
+  ContextMenu,
+  Menubar,
+  SpeedDial,
+  Toolbar,
+  contextMenu,
+  menubar,
+  speedDial,
+  toolbar,
+  type ContextMenuEntry,
+  type MenubarMenu,
+  type SpeedDialAction,
+  type ToolbarItem,
+} from "@reddb-io/design-system/app";

package/vendor/ds/kits/app/test/fixtures/consumer-check/Unfixed.svelte

@@ -0,0 +1,50 @@
+<!--
+  The Button as it was before issue #50 — the shape a consumer's strict
+  svelte-check rejected, kept as a fixture so the check that now passes on the
+  real Kit is demonstrably a check and not a formality.
+
+  Three errors live here, and they are the three the consumer reported:
+  `disabled` re-declared narrower than the interface it also inherits, and the
+  two-armed `rest` spread that makes the element's props a union TypeScript
+  will not compute. It is deliberately never imported by the Kit; only
+  test/consumer-check.test.ts ever points a compiler at it.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+
+  interface Common {
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  interface ButtonMode extends Common, Omit<HTMLButtonAttributes, "class"> {
+    href?: never;
+  }
+
+  interface AnchorMode extends Common, Omit<HTMLAnchorAttributes, "class"> {
+    href: string;
+  }
+
+  type Props = ButtonMode | AnchorMode;
+
+  const { disabled = false, href, type, class: className, children, ...rest }: Props = $props();
+
+  const tag = $derived(href !== undefined ? "a" : "button");
+  const native = $derived(
+    tag === "a"
+      ? { href: disabled ? undefined : href, type, tabindex: disabled ? -1 : undefined }
+      : { type: type ?? "button", disabled },
+  );
+</script>
+
+<svelte:element
+  this={tag}
+  {...rest}
+  {...native}
+  class={className}
+  aria-disabled={tag === "a" && disabled ? "true" : undefined}
+>
+  {@render children?.()}
+</svelte:element>