@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+  interface Props {
+    failure: "unreachable-scroll-area" | "unpersisted-appearance-switch";
+    storageKey?: string;
+  }
+
+  const { failure, storageKey = "reddb:appearance:theme" }: Props = $props();
+
+  function changeTheme(event: Event): void {
+    const control = event.currentTarget as HTMLSelectElement;
+    document.documentElement.setAttribute("data-theme", control.value);
+    // Deliberately omits storage.setItem(storageKey, control.value).
+    void storageKey;
+  }
+</script>
+
+{#if failure === "unreachable-scroll-area"}
+  <div data-broken-scroll-area class="overflow-y-auto">
+    <p>First deployment</p>
+    <p>Second deployment</p>
+  </div>
+{:else}
+  <label>
+    Theme
+    <select data-broken-appearance-switch onchange={changeTheme}>
+      <option value="application">Application</option>
+      <option value="marketing">Marketing</option>
+    </select>
+  </label>
+{/if}

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AspectRatio, Card, Divider } from "@reddb-io/design-system/base";
+</script>
+
+<div
+  data-surface-appearance-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-density="compact"
+>
+  <Card title="Deployment" description="Caller-owned surface content.">
+    <AspectRatio ratio={4 / 3} aria-label="Deployment preview">
+      <button type="button">Open preview</button>
+    </AspectRatio>
+    <Divider />
+    <p>Healthy in sa-east-1.</p>
+  </Card>
+
+  <Divider orientation="vertical" aria-label="Column boundary" />
+</div>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props {
+    failure: "frozen-card-density" | "missing-separator-semantics";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "frozen-card-density"}
+  <section data-broken-card class="rounded-lg border p-4">
+    Card spacing is fixed instead of following the nearest Density scope.
+  </section>
+{:else}
+  <div data-broken-divider class="border-t"></div>
+{/if}

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Table } from "@reddb-io/design-system/base";
+
+  const columns = [
+    { key: "node", header: "Node" },
+    { key: "region", header: "Region" },
+    { key: "latency", header: "Latency" },
+  ] as const;
+  const rows = [
+    { node: "db-01", region: "South America", latency: "24 ms" },
+    { node: "db-02", region: "Europe", latency: "31 ms" },
+  ] as const;
+</script>
+
+{#snippet cell({ column, value })}
+  {#if column.key === "node"}
+    <a href={`/nodes/${value}`}>{value}</a>
+  {:else}
+    {value}
+  {/if}
+{/snippet}
+
+<section data-table-scope data-theme="marketing" data-color-scheme="dark" data-density="compact">
+  <Table caption="Cluster replicas" {columns} {rows} rowHeader="node" {cell} />
+</section>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  let { failure }: { failure: "missing-header-association" | "silent-overflow" } = $props();
+</script>
+
+{#if failure === "missing-header-association"}
+  <!-- Bold cells look like headings, but no native header association exists. -->
+  <table data-broken-table>
+    <tbody>
+      <tr><td><strong>Region</strong></td><td><strong>Latency</strong></td></tr>
+      <tr><td>South America</td><td>24 ms</td></tr>
+    </tbody>
+  </table>
+{:else}
+  <!-- The wide table is clipped without exposing a keyboard-scrollable region. -->
+  <div data-broken-table-overflow class="overflow-hidden">
+    <table style="min-width: 64rem">
+      <caption>Cluster replicas</caption>
+      <thead><tr><th scope="col">Node</th><th scope="col">Region</th></tr></thead>
+      <tbody><tr><th scope="row">db-01</th><td>South America</td></tr></tbody>
+    </table>
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Tabs } from "@reddb-io/design-system/base";
+
+  const items = [
+    { value: "table", label: "Table" },
+    { value: "graph", label: "Graph" },
+  ] as const;
+</script>
+
+<Tabs label="Result format" {items} followHash>
+  {#snippet children({ value })}
+    {#if value === "table"}
+      <div id="source-table" tabindex="-1">Table evidence</div>
+    {:else}
+      <div id="source-graph" tabindex="-1">Graph evidence</div>
+    {/if}
+  {/snippet}
+</Tabs>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    size?: string | number;
+    color?: string;
+    strokeWidth?: string | number;
+  }
+
+  let { size = 24, color = "currentColor", strokeWidth = 2, ...rest }: Props = $props();
+</script>
+
+<svg
+  {...rest}
+  data-test-glyph
+  width={size}
+  height={size}
+  color={color}
+  stroke={color}
+  stroke-width={strokeWidth}
+  viewBox="0 0 24 24"
+></svg>

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

@@ -0,0 +1,30 @@
+<!-- A Product Application's native multiline and choice controls, composed
+     through Field at the public Base package boundary. -->
+<script lang="ts">
+  import { Field, Select, Textarea } from "@reddb-io/design-system/base";
+
+  interface Props {
+    error?: string;
+    required?: boolean;
+  }
+
+  const { error, required = false }: Props = $props();
+</script>
+
+<form>
+  <Field label="Deployment notes" help="Include rollback details." {error} {required}>
+    {#snippet children(control)}
+      <Textarea {...control} name="notes" rows={4} value="Preserve the current release." />
+    {/snippet}
+  </Field>
+
+  <Field label="Region" {required}>
+    {#snippet children(control)}
+      <Select {...control} name="region" value="sa-east-1">
+        <option value="">Choose a region</option>
+        <option value="us-east-1">North America</option>
+        <option value="sa-east-1">South America</option>
+      </Select>
+    {/snippet}
+  </Field>
+</form>

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

@@ -0,0 +1,19 @@
+<!-- Deliberately incomplete controls: proof that the suites diagnose the
+     multiline and keyboard-select gaps rather than merely rendering markup. -->
+<script lang="ts">
+  interface Props {
+    failure: "single-line" | "mouse-only-select";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "single-line"}
+  <input name="notes" aria-label="Notes" />
+{:else}
+  <div data-mouse-only-select>
+    <button type="button" tabindex="-1">Choose a region</button>
+    <div>North America</div>
+    <div>South America</div>
+  </div>
+{/if}

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

@@ -0,0 +1,45 @@
+<!-- Time entry contracts composed only through the distributed Base subpath,
+     including a nested appearance scope owned by the consumer. -->
+<script lang="ts">
+  import { TimeField, TimeRangeField } from "@reddb-io/design-system/base";
+</script>
+
+<form>
+  <TimeField
+    label="Meeting time"
+    name="meetingTime"
+    value="09:45"
+    help="Use local time."
+    required
+  />
+
+  <TimeRangeField
+    label="Support window"
+    startLabel="Starts"
+    endLabel="Ends"
+    startName="supportStart"
+    endName="supportEnd"
+    startValue="09:00"
+    endValue="17:00"
+  />
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <div data-nested-time-field>
+      <TimeField label="Nested meeting time" value="10:15" />
+    </div>
+    <div data-nested-time-range-field>
+      <TimeRangeField
+        label="Nested support window"
+        startLabel="Starts"
+        endLabel="Ends"
+        startValue="10:00"
+        endValue="18:00"
+      />
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,29 @@
+<!-- Deliberately invalid time entries: proof that the contract suites reject
+     impossible clock values and ranges whose end precedes their start. -->
+<script lang="ts">
+  interface Props {
+    failure: "impossible-time" | "inverted-range";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "impossible-time"}
+  <div data-time-field>
+    <label for="broken-hour">Meeting time</label>
+    <div>
+      <input id="broken-hour" aria-label="Meeting time, hour" value="29" />
+      <span aria-hidden="true">:</span>
+      <input aria-label="Meeting time, minute" value="75" />
+    </div>
+    <input type="hidden" name="meetingTime" value="29:75" />
+  </div>
+{:else}
+  <fieldset data-time-range-field>
+    <legend>Support window</legend>
+    <label for="broken-start">Start time</label>
+    <input id="broken-start" type="time" name="supportStart" value="17:00" />
+    <label for="broken-end">End time</label>
+    <input id="broken-end" type="time" name="supportEnd" value="09:00" />
+  </fieldset>
+{/if}

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

@@ -0,0 +1,10 @@
+<!-- A Tooltip decorating a trigger the consumer already renders. -->
+<script lang="ts">
+  import { Tooltip } from "@reddb-io/design-system/base";
+</script>
+
+<Tooltip content="Copies the connection string">
+  {#snippet child({ props })}
+    <a {...props} href="#copy" data-own-trigger>Copy</a>
+  {/snippet}
+</Tooltip>

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

@@ -0,0 +1,16 @@
+<!-- An uncontrolled control inside a Field whose validation state changes around it. -->
+<script lang="ts">
+  import { Checkbox, Field, Input } from "@reddb-io/design-system/base";
+
+  let error = $state<string | undefined>(undefined);
+</script>
+
+<Field label="Email" {error}>
+  {#snippet children(control)}
+    <Input {...control} name="email" data-uncontrolled-input />
+  {/snippet}
+</Field>
+<Checkbox label="Remember me" {...{ error }} data-uncontrolled-checkbox />
+<button type="button" data-validate onclick={() => (error = error ? undefined : "Enter your email.")}>
+  Validate
+</button>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Breadcrumbs, Navbar, Pagination, Steps } from "@reddb-io/design-system/base";
+
+  const links = [
+    { id: "overview", label: "Overview", href: "/overview", current: true },
+    { id: "activity", label: "Activity", href: "/activity" },
+  ] as const;
+</script>
+
+<section
+  data-wayfinding-scope
+  data-theme="marketing"
+  data-color-scheme="dark"
+  data-contrast="high"
+  data-density="compact"
+>
+  <Navbar {links} collapse="expanded" />
+  <Breadcrumbs
+    items={[
+      { id: "clusters", label: "Clusters", href: "/clusters" },
+      { id: "primary", label: "Primary", current: true },
+    ]}
+  />
+  <Pagination pages={[{ page: 1, href: "?page=1", current: true }]} />
+  <Steps items={[{ id: "account", label: "Account", state: "current" }]} />
+</section>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { failure }: { failure: "breadcrumbs-current" | "pagination-labels" } = $props();
+</script>
+
+{#if failure === "breadcrumbs-current"}
+  <nav aria-label="Breadcrumbs" data-broken-breadcrumbs>
+    <ol>
+      <li><a href="/clusters">Clusters</a></li>
+      <li><a href="/clusters/primary">Primary</a></li>
+    </ol>
+  </nav>
+{:else}
+  <nav aria-label="Pagination" data-broken-pagination>
+    <a href="?page=1">1</a>
+    <a href="?page=2">2</a>
+  </nav>
+{/if}

package/vendor/ds/kits/base/test/fixtures/alert-consumer.ts

@@ -0,0 +1,11 @@
+// Alert through the Base subpath a Product Application consumes.
+export {
+  ALERT_FEEDBACK_ROLES,
+  ALERT_TONES,
+  FEEDBACK_TONES,
+  TONES,
+  Alert,
+  alert,
+  type AlertFeedbackRole,
+  type AlertVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/binary-choice-consumer.ts

@@ -0,0 +1,15 @@
+// Binary and single-choice controls through the same Base subpath a Product
+// Application uses. This pins the distributed public names and their optional
+// appearance seams at the consumer boundary.
+export {
+  Checkbox,
+  RadioGroup,
+  Switch,
+  checkbox,
+  radioGroup,
+  switchControl,
+  type CheckboxVariants,
+  type RadioGroupOption,
+  type RadioGroupVariants,
+  type SwitchVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/button-consumer.ts

@@ -0,0 +1,16 @@
+// The Base subpath as a Product Application consumes it.
+//
+// Keeping this import at the package boundary matters: importing the component
+// file directly would let the implementation exist without proving that the
+// universal public contract is actually reachable from `./base`.
+
+export {
+  BUTTON_INTENTS,
+  BUTTON_TONES,
+  TONES,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  Button,
+  button,
+  buttonSpinner,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/calendar-consumer.ts

@@ -0,0 +1,7 @@
+// Calendar capabilities through the distributed Base consumer seam.
+export {
+  Calendar,
+  RangeCalendar,
+  calendar,
+  type CalendarVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/collection-structure-consumer.ts

@@ -0,0 +1,17 @@
+export {
+  LIST_GAPS,
+  DescriptionList,
+  DESCRIPTION_LIST_GAPS,
+  GridList,
+  GRID_LIST_COLUMNS,
+  List,
+  ListContainer,
+  card,
+  descriptionList,
+  gridList,
+  list,
+  type ListGap,
+  type DescriptionListItem,
+  type DescriptionListGap,
+  type GridListColumn,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/combobox-consumer.ts

@@ -0,0 +1,9 @@
+// Combobox through the Base subpath a Product Application consumes.
+export {
+  Combobox,
+  combobox,
+  input,
+  popover,
+  type ComboboxOption,
+  type ComboboxVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/content-mask-consumer.ts

@@ -0,0 +1,10 @@
+// ContentMask contracts through the Base subpath a Product Application
+// consumes. Private source files cannot satisfy these tests.
+export {
+  CONTENT_MASK_CLIP_PATHS,
+  CONTENT_MASK_SHAPES,
+  ContentMask,
+  contentMask,
+  type ContentMaskShape,
+  type ContentMaskVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/date-entry-consumer.ts

@@ -0,0 +1,11 @@
+// Date entry contracts through the Base subpath a Product Application uses.
+// Private source files cannot satisfy this distributed-export seam.
+
+export {
+  DateField,
+  DateRangeField,
+  dateField,
+  dateRangeField,
+  type DateFieldVariants,
+  type DateRangeFieldVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/date-picker-consumer.ts

@@ -0,0 +1,11 @@
+// Date picker contracts through the distributed Base consumer seam.
+// Private source files cannot satisfy this compilation boundary.
+
+export {
+  DatePicker,
+  DateRangePicker,
+  datePicker,
+  dateRangePicker,
+  type DatePickerVariants,
+  type DateRangePickerVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/dialog-tooltip-consumer.ts

@@ -0,0 +1,9 @@
+// Dialog and Tooltip through the Base subpath a Product Application consumes.
+export {
+  Dialog,
+  Tooltip,
+  dialog,
+  tooltip,
+  type DialogVariants,
+  type TooltipVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/disclosure-family-consumer.ts

@@ -0,0 +1,14 @@
+// Disclosure-family capabilities through the distributed Base consumer seam.
+export {
+  Accordion,
+  Disclosure,
+  Tabs,
+  accordion,
+  disclosure,
+  tabs,
+  type AccordionItem,
+  type AccordionVariants,
+  type DisclosureVariants,
+  type TabItem,
+  type TabsVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/drawer-alert-dialog-consumer.ts

@@ -0,0 +1,13 @@
+// Overlays through the Base subpath a Product Application consumes.
+export {
+  AlertDialog,
+  DRAWER_SIDES,
+  Drawer,
+  alertDialog,
+  alertDialogActions,
+  button,
+  drawer,
+  type AlertDialogVariants,
+  type DrawerSide,
+  type DrawerVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/field-input-consumer.ts

@@ -0,0 +1,15 @@
+// Field and Input through the same Base subpath a Product Application uses.
+//
+// Keeping this fixture at the package boundary means the behavior suites fail
+// if either implementation exists privately without becoming a public Base
+// capability, or if an Extension Seam is present but cannot be imported.
+
+export {
+  Field,
+  Input,
+  field,
+  input,
+  type FieldControlProps,
+  type FieldVariants,
+  type InputVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/form-scaffolding-consumer.ts

@@ -0,0 +1,13 @@
+// Form scaffolding through the same Base subpath a Product Application uses.
+export {
+  Fieldset,
+  Form,
+  Label,
+  fieldset,
+  form,
+  label,
+  type FieldsetControlProps,
+  type FieldsetVariants,
+  type FormVariants,
+  type LabelVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/layout-consumer.ts

@@ -0,0 +1,16 @@
+// Layout capabilities through the Base subpath a Product Application consumes.
+export {
+  Container,
+  SkipLink,
+  Stack,
+  container,
+  skipLink,
+  stack,
+  STACK_ALIGNMENTS,
+  STACK_DIRECTIONS,
+  STACK_GAPS,
+  STACK_JUSTIFICATIONS,
+  type ContainerVariants,
+  type StackGap,
+  type StackVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/media-presentation-consumer.ts

@@ -0,0 +1,9 @@
+export {
+  AVATAR_SIZES,
+  Avatar,
+  Carousel,
+  MediaObject,
+  avatar,
+  carousel,
+  mediaObject,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/menu-consumer.ts

@@ -0,0 +1,20 @@
+// Menu capabilities through the Base subpath a Product Application consumes.
+export {
+  DROPDOWN_MENU_SIZES,
+  DropdownMenu,
+  NavigationMenu,
+  dropdownMenu,
+  dropdownMenuGroups,
+  isDropdownMenuGroup,
+  isNavigationMenuSection,
+  navigationMenu,
+  type DropdownMenuEntry,
+  type DropdownMenuGroup,
+  type DropdownMenuItem,
+  type DropdownMenuSize,
+  type NavigationMenuEntry,
+  type NavigationMenuLink,
+  type NavigationMenuOrientation,
+  type NavigationMenuSection,
+  type NavigationMenuSize,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/mockup-consumer.ts

@@ -0,0 +1,14 @@
+export {
+  BrowserMockup,
+  DEFAULT_BROWSER_MOCKUP_RATIO,
+  DEFAULT_PHONE_MOCKUP_RATIO,
+  DEFAULT_WINDOW_MOCKUP_RATIO,
+  PhoneMockup,
+  WindowMockup,
+  browserMockup,
+  phoneMockup,
+  windowMockup,
+  type BrowserMockupVariants,
+  type PhoneMockupVariants,
+  type WindowMockupVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/notification-empty-state-consumer.ts

@@ -0,0 +1,12 @@
+// Feedback surfaces through the Base subpath a Product Application uses.
+// Private source files cannot satisfy this distributed-export seam.
+
+export {
+  EMPTY_STATE_SIZES,
+  EmptyState,
+  Notification,
+  emptyState,
+  notification,
+  type EmptyStateSize,
+  type NotificationVariants,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/numeric-chronology-consumer.ts

@@ -0,0 +1,11 @@
+export {
+  Countdown,
+  Statistic,
+  Timeline,
+  countdown,
+  formatDuration,
+  normalizeRemaining,
+  statistic,
+  timeline,
+  type TimelineItem,
+} from "@reddb-io/design-system/base";

package/vendor/ds/kits/base/test/fixtures/popover-link-preview-consumer.ts

@@ -0,0 +1,9 @@
+// Popover and LinkPreview through the Base subpath a Product Application consumes.
+export {
+  LinkPreview,
+  Popover,
+  linkPreview,
+  popover,
+  type LinkPreviewVariants,
+  type PopoverVariants,
+} from "@reddb-io/design-system/base";