@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/src/composites/shopping-cart.variants.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from "svelte";
+import type { ShoppingCartItem as PortableShoppingCartItem } from "../core/shopping-cart";
+export { shoppingCart, type ShoppingCartVariants } from "./shopping-cart.appearance";
+/** Svelte content adapter for a portable cart row. */
+export interface ShoppingCartItem extends PortableShoppingCartItem<Snippet> {}

package/vendor/ds/kits/app/src/composites/sidebar-layout.variants.ts

@@ -0,0 +1,211 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+// Two presentations, two responsive contracts (ADR 0021).
+//
+//   - The panel layout (no rail) is a component placed in a page, so it is
+//     container-first: the root is a named size container, and the sidebar
+//     and main regions share one line in a 1 : 3 proportion from the
+//     container's `3xl` step (48rem, the step the viewport `md` used to be) and
+//     stack below it — beside a SplitView pane or inside a Card as on a wide
+//     window. The root cannot query its own width, so the regions carry the
+//     steps. The gutter is the Density layout tier (ADR 0024).
+//
+//   - The rail layout (a `rail` snippet) is the application's page chrome: a
+//     full-height (`min-h-dvh`) frame whose compact presentation is a drawer
+//     fixed to the viewport, with a viewport backdrop. ADR 0021 reserves the
+//     viewport for exactly that, so its `md:`/`max-md:` steps stay. Driving the
+//     drawer from container width is ADR 0021's follow-up ("Split panes"), not
+//     this layout's.
+const SIDE = {
+  start: { sidebar: "", content: "" },
+  end: { sidebar: "", content: "" },
+} as const;
+
+export const sidebarLayout = tv({
+  slots: {
+    root: "min-w-0 items-start",
+    region: "min-w-0",
+    // The panel layout's regions: a full line each below the container's
+    // `3xl` step, one line in proportion from it.
+    sidebar: "min-w-0 basis-full @3xl/sidebar-layout:grow-[1] @3xl/sidebar-layout:basis-0",
+    content: "min-w-0 basis-full @3xl/sidebar-layout:grow-[3] @3xl/sidebar-layout:basis-0",
+    railRegion: "relative z-30 min-h-dvh w-max min-w-0",
+    panel: "min-w-0 border-e border-elevation-sunken-border bg-elevation-sunken-surface shadow-elevation-sunken",
+    main: "min-w-0 break-words",
+  },
+  variants: {
+    side: SIDE,
+    rail: {
+      false: {
+        root: "@container/sidebar-layout flex w-full flex-wrap gap-[var(--reddb-spatial-layout-gap-md)]",
+      },
+      true: {
+        root: [
+          // Page chrome (see above): the viewport steps below are the frame's.
+          "grid min-h-dvh items-stretch gap-0",
+          "transition-[grid-template-columns] motion-reduce:transition-none",
+        ].join(" "),
+        panel: [
+          "max-md:fixed max-md:inset-y-0 max-md:z-40 max-md:w-[min(20rem,calc(100vw_-_var(--_reddb-sidebar-rail-width,calc(var(--reddb-spatial-control-height-md)+2*var(--reddb-spatial-inset-sm)))))]",
+          "max-md:overflow-y-auto max-md:p-[var(--reddb-spatial-inset-sm)]",
+          "max-md:transition-transform motion-reduce:transition-none",
+        ].join(" "),
+      },
+    },
+    railOpen: {
+      false: {
+        railRegion: "w-0 overflow-hidden pointer-events-none md:w-0",
+      },
+      true: {},
+    },
+    panelOpen: {
+      false: {
+        panel: "max-md:pointer-events-none md:w-0 md:overflow-hidden md:pointer-events-none",
+      },
+      true: { panel: "max-md:translate-x-0" },
+    },
+  },
+  compoundVariants: [
+    {
+      side: "start",
+      rail: true,
+      railOpen: true,
+      class: {
+        root: [
+          "grid-cols-[auto_minmax(0,1fr)]",
+        ].join(" "),
+        panel: "max-md:start-[var(--_reddb-sidebar-rail-width,calc(var(--reddb-spatial-control-height-md)+2*var(--reddb-spatial-inset-sm)))]",
+        main: "max-md:col-start-2",
+      },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: true,
+      class: {
+        root: [
+          "grid-cols-[minmax(0,1fr)_auto]",
+        ].join(" "),
+        panel: "max-md:end-[var(--_reddb-sidebar-rail-width,calc(var(--reddb-spatial-control-height-md)+2*var(--reddb-spatial-inset-sm)))]",
+        main: "max-md:col-start-1",
+      },
+    },
+    {
+      side: "start",
+      rail: true,
+      railOpen: false,
+      class: {
+        root: "grid-cols-[0_minmax(0,1fr)]",
+        panel: "max-md:start-0",
+        main: "max-md:col-start-2",
+      },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: false,
+      class: {
+        root: "grid-cols-[minmax(0,1fr)_0]",
+        panel: "max-md:end-0",
+        main: "max-md:col-start-1",
+      },
+    },
+    {
+      side: "start",
+      rail: true,
+      railOpen: true,
+      panelOpen: false,
+      class: {
+        root: "md:grid-cols-[auto_0_minmax(0,1fr)]",
+        panel: "max-md:-translate-x-full",
+      },
+    },
+    {
+      side: "start",
+      rail: true,
+      railOpen: true,
+      panelOpen: true,
+      class: {
+        root: "md:grid-cols-[auto_minmax(12rem,1fr)_minmax(0,3fr)]",
+      },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: true,
+      panelOpen: false,
+      class: {
+        root: "md:grid-cols-[minmax(0,1fr)_0_auto]",
+        panel: "max-md:translate-x-full",
+      },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: true,
+      panelOpen: true,
+      class: {
+        root: "md:grid-cols-[minmax(0,3fr)_minmax(12rem,1fr)_auto]",
+      },
+    },
+    {
+      side: "start",
+      rail: true,
+      railOpen: false,
+      panelOpen: false,
+      class: { root: "md:grid-cols-[0_0_minmax(0,1fr)]" },
+    },
+    {
+      side: "start",
+      rail: true,
+      railOpen: false,
+      panelOpen: true,
+      class: { root: "md:grid-cols-[0_minmax(12rem,1fr)_minmax(0,3fr)]" },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: false,
+      panelOpen: false,
+      class: { root: "md:grid-cols-[minmax(0,1fr)_0_0]" },
+    },
+    {
+      side: "end",
+      rail: true,
+      railOpen: false,
+      panelOpen: true,
+      class: { root: "md:grid-cols-[minmax(0,3fr)_minmax(12rem,1fr)_0]" },
+    },
+  ],
+  defaultVariants: { side: "start", rail: false, railOpen: true, panelOpen: false },
+});
+
+export type SidebarLayoutVariants = VariantProps<typeof sidebarLayout>;
+export type SidebarSide = NonNullable<SidebarLayoutVariants["side"]>;
+export const SIDEBAR_SIDES = Object.keys(SIDE) as readonly SidebarSide[];
+
+/** Page navigation uses one item model for a desktop rail and a mobile bottom bar. */
+export const responsiveNavigationLayout = tv({
+  slots: {
+    root: "grid min-h-dvh min-w-0 grid-cols-[minmax(0,1fr)] pb-[var(--reddb-spatial-control-height-lg)] md:grid-cols-[auto_minmax(0,1fr)] md:pb-0",
+    header: "sticky top-0 z-20 col-span-full min-w-0",
+    rail: "sticky top-[var(--_reddb-navigation-header-height,0px)] hidden h-dvh min-h-0 md:block",
+    panel: "sticky top-[var(--_reddb-navigation-header-height,0px)] hidden h-dvh min-h-0 min-w-0 overflow-y-auto border-e border-muted bg-elevation-sunken-surface md:block",
+    main: "min-w-0 p-[var(--reddb-spatial-inset-md)] [&_a]:scroll-mb-[var(--_reddb-navigation-bottom-height,0px)] [&_button]:scroll-mb-[var(--_reddb-navigation-bottom-height,0px)] [&_input]:scroll-mb-[var(--_reddb-navigation-bottom-height,0px)]",
+    bottom: "fixed inset-x-0 bottom-0 z-30 md:hidden",
+    more: "grid gap-[var(--reddb-spatial-gap-sm)]",
+    drawer: "max-w-[min(42ch,calc(100vw_-_var(--reddb-spatial-inset-lg)))] pb-[max(var(--reddb-spatial-inset-md),env(safe-area-inset-bottom))]",
+    menu: "min-h-0 min-w-0",
+  },
+  variants: {
+    header: {true:{root:"grid-rows-[auto_minmax(0,1fr)]"},false:{root:"grid-rows-[minmax(0,1fr)]"}},
+    dockable: {true:{},false:{root:"grid-cols-[auto_minmax(0,1fr)] pb-0",rail:"block"}},
+    panel: { true: {root: "md:grid-cols-[auto_minmax(14rem,20rem)_minmax(0,1fr)]"}, false: {} },
+    side: {start: {}, end: {}},
+  },
+  compoundVariants: [
+    {side:"end",panel:false,class:{root:"md:grid-cols-[minmax(0,1fr)_auto]",rail:"md:order-3",main:"md:order-1"}},
+    {side:"end",panel:true,class:{root:"md:grid-cols-[minmax(0,1fr)_minmax(14rem,20rem)_auto]",rail:"md:order-3",panel:"md:order-2",main:"md:order-1"}},
+  ],
+  defaultVariants: {panel:false,side:"start",dockable:true,header:false},
+});

package/vendor/ds/kits/app/src/composites/sidebar-navigation.variants.ts

@@ -0,0 +1,12 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const sidebarNavigation = tv({
+  slots: {
+    root: "flex w-full flex-col border-elevation-sunken-border bg-elevation-sunken-surface text-foreground shadow-elevation-sunken",
+    toolbar: "flex min-w-0 items-center justify-between gap-[var(--reddb-spatial-gap-sm)] border-b border-muted pb-[var(--reddb-spatial-inset-sm)] mb-[var(--reddb-spatial-layout-gap-sm)]",
+    list: "m-0 flex list-none flex-col gap-[var(--reddb-spatial-gap-sm)] p-0",
+    item: "min-h-[var(--reddb-spatial-control-height-md)]",
+  },
+});
+
+export type SidebarNavigationVariants = VariantProps<typeof sidebarNavigation>;

package/vendor/ds/kits/app/src/composites/sidebar-panel.variants.ts

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+
+export const sidebarPanel = tv({
+  slots: {
+    root: "flex min-h-0 min-w-0 flex-col bg-elevation-sunken-surface text-foreground",
+    toolbar: "flex shrink-0 items-center justify-between gap-[var(--reddb-spatial-gap-sm)] border-b border-muted px-[var(--reddb-spatial-inset-sm)] py-[var(--reddb-spatial-gap-sm)]",
+    header: "flex shrink-0 min-w-0 flex-wrap items-center justify-between gap-[var(--reddb-spatial-gap-md)] px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+    actions: "ms-auto flex shrink-0 items-center gap-[var(--reddb-spatial-gap-sm)]",
+    controls: "grid shrink-0 gap-[var(--reddb-spatial-gap-md)] px-[var(--reddb-spatial-inset-md)] pb-[var(--reddb-spatial-inset-sm)]",
+    body: "min-h-0 min-w-0 flex-1 px-[var(--reddb-spatial-inset-sm)] pb-[var(--reddb-spatial-inset-sm)]",
+    footer: "shrink-0 border-t border-muted p-[var(--reddb-spatial-inset-sm)]",
+  },
+});

package/vendor/ds/kits/app/src/composites/sidebar-rail.variants.ts

@@ -0,0 +1,58 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only rail appearance; SidebarRail.svelte owns focus and selection emission. */
+export const sidebarRail = tv({
+  slots: {
+    root: [
+      "flex h-full min-h-0 w-[calc(var(--reddb-spatial-control-height-md)+2*var(--reddb-spatial-inset-sm))] shrink-0 flex-col items-center",
+      "gap-[var(--reddb-spatial-gap-sm)] border-e border-elevation-sunken-border bg-elevation-sunken-surface shadow-elevation-sunken",
+      "p-[var(--reddb-spatial-inset-sm)] text-foreground",
+    ].join(" "),
+    region: "flex w-full shrink-0 flex-col items-center gap-[var(--reddb-spatial-gap-sm)]",
+    // A classic scrollbar must not consume the icon's whole column and create
+    // a second horizontal scrollbar. Wheel, touch and roving focus still
+    // scroll this compact rail; ordinary content panels retain their scrollbar.
+    middle: "min-h-0 w-[calc(100%+2*var(--reddb-spatial-gap-sm))] flex-1 -mx-[var(--reddb-spatial-gap-sm)] px-[var(--reddb-spatial-gap-sm)] py-[var(--reddb-spatial-gap-sm)] overflow-x-hidden overflow-y-auto [scrollbar-width:none]",
+    badgeAnchor: "size-full items-center justify-center [&>[data-indicator-marker]]:translate-x-[var(--reddb-spatial-gap-sm)] [&>[data-indicator-marker]]:-translate-y-[var(--reddb-spatial-gap-sm)]",
+    statusAnchor: "size-full items-center justify-center [&>[data-indicator-marker]]:translate-x-0 [&>[data-indicator-marker]]:translate-y-0",
+    badge: "h-[var(--reddb-spatial-icon-size-md)] min-w-[var(--reddb-spatial-icon-size-md)] justify-center rounded-full p-0 tabular-nums",
+    face: "inline-flex size-full shrink-0 items-center justify-center",
+    label: "order-last max-w-full whitespace-normal break-words text-center text-caption",
+    divider: "mb-[var(--reddb-spatial-gap-md)]",
+    list: "m-0 flex w-full list-none flex-col items-center gap-[var(--reddb-spatial-gap-md)] p-0",
+    // The selected destination wears the shared selection language: neutral
+    // surface, foreground ink, and a 2px ink start-edge bar (wave 6A) — never a red
+    // outline. Every item carries the transparent edge so selection moves
+    // nothing (DESIGN.md, "Interactive states").
+    item: [
+      "relative size-[var(--reddb-spatial-control-height-md)] shrink-0 overflow-visible rounded-s-none rounded-e-md border-0 border-s-2 border-transparent p-0",
+      "text-sm font-medium text-ink-muted hover:bg-foreground/8 hover:text-foreground",
+      "aria-pressed:border-foreground aria-pressed:bg-foreground/10 aria-pressed:text-foreground aria-[current]:border-foreground aria-[current]:bg-foreground/10 aria-[current]:text-foreground",
+      // Focus is the ink focus outline every DS control draws (ADR 0023),
+      // drawn inside the item: the middle region scrolls, and the rail's
+      // content box is exactly one item wide, so an outline outside the item
+      // would be clipped on both sides by the scroll region.
+      "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+    ].join(" "),
+    fallback: "inline-flex size-full items-center justify-center",
+  },
+  variants: {
+    labelled: {
+      false: {},
+      true: {
+        // A typographic measure, independent of the fallback face's zero glyph.
+        // ch changes during font loading and can wrap labels, moving the whole page.
+        root: "w-[calc(max(6.65em,var(--reddb-spatial-control-height-md)*2)+2*var(--reddb-spatial-inset-sm))] text-caption",
+        item: "h-auto min-h-[var(--reddb-spatial-control-height-lg)] w-full flex-col gap-[var(--reddb-spatial-gap-sm)] py-[var(--reddb-spatial-gap-sm)]",
+        face: "size-[var(--reddb-spatial-control-height-md)]",
+        // Let the whole item establish the badge's containing block. Presence
+        // stays relative to the face through its own Indicator.
+        badgeAnchor: "static [&>[data-indicator-marker]]:end-[calc(var(--reddb-spatial-gap-sm)/2)] [&>[data-indicator-marker]]:top-[calc(var(--reddb-spatial-gap-sm)/2)] [&>[data-indicator-marker]]:translate-x-0 [&>[data-indicator-marker]]:translate-y-0",
+        list: "[&_[data-tooltip-root]]:w-full",
+      },
+    },
+  },
+  defaultVariants: { labelled: false },
+});
+
+export type SidebarRailVariants = VariantProps<typeof sidebarRail>;

package/vendor/ds/kits/app/src/composites/speed-dial.variants.ts

@@ -0,0 +1,22 @@
+import { popover } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const speedDial = tv({
+  slots: {
+    content: popover({
+      class: "flex min-w-40 flex-col gap-[var(--reddb-spatial-gap-sm)] p-[var(--reddb-spatial-inset-sm)]",
+    }),
+    action: "w-full justify-start",
+  },
+  variants: {
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export type SpeedDialVariants = VariantProps<typeof speedDial>;
+export type SpeedDialSize = NonNullable<SpeedDialVariants["size"]>;

package/vendor/ds/kits/app/src/composites/store-navigation.variants.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const storeNavigation = tv({
+  slots: {
+    root: "isolate flex w-full flex-col bg-background text-foreground",
+    announcement: [
+      "flex min-h-[var(--reddb-spatial-control-height-sm)] items-center justify-center",
+      "px-[var(--reddb-spatial-inset-md)] text-center text-sm",
+      "bg-primary text-on-primary",
+    ].join(" "),
+    navbar: "relative",
+  },
+});
+
+export type StoreNavigationVariants = VariantProps<typeof storeNavigation>;

package/vendor/ds/kits/app/src/composites/task-list.behavior.ts

@@ -0,0 +1,51 @@
+import type { Tone } from "@reddb-io/design-system/base";
+
+export const TASK_STATES = ["queued", "running", "paused", "blocked", "succeeded", "failed", "cancelled"] as const;
+export type TaskState = (typeof TASK_STATES)[number];
+
+export interface TaskListItem {
+  /** Stable identity across updates, filtering and ordering. */
+  id: string;
+  /** Visible task name, used to name its progress. */
+  title: string;
+  /** Caller-owned lifecycle state; the list never starts or schedules work. */
+  state: TaskState;
+  /** Localized state name; defaults to the English lifecycle name. */
+  stateLabel?: string;
+  /** Optional semantic emphasis; otherwise follows the lifecycle state. */
+  tone?: Tone;
+  /** Supporting task context. */
+  description?: string;
+  /** Progress from 0 to 100, clamped by Progress; null means indeterminate. Omit to hide the track. */
+  progress?: number | null;
+  /** Caller-formatted progress reading, if different from a percentage. */
+  progressLabel?: string;
+  /** Worker or other execution context, already formatted by the caller. */
+  worker?: string;
+  /** Caller-formatted remaining-time estimate; no timers run in the component. */
+  estimate?: string;
+  /** Visible reason for a blocked, paused or failed task, or other relevant explanation. */
+  reason?: string;
+  /** Optional destination for the task name. */
+  href?: string;
+}
+
+export const TASK_STATE_LABELS: Record<TaskState, string> = {
+  queued: "Queued", running: "Running", paused: "Paused", blocked: "Blocked",
+  succeeded: "Completed", failed: "Failed", cancelled: "Cancelled",
+};
+export const TASK_STATE_TONES: Record<TaskState, Tone> = {
+  queued: "neutral", running: "info", paused: "neutral", blocked: "warning",
+  succeeded: "success", failed: "danger", cancelled: "neutral",
+};
+
+export function validateTasks(items: readonly TaskListItem[]): readonly TaskListItem[] {
+  const ids = new Set<string>();
+  for (const item of items) {
+    if (!item.id || ids.has(item.id)) throw new Error("TaskList: task ids must be non-empty and unique.");
+    if (!TASK_STATES.includes(item.state)) throw new Error(`TaskList: unknown state for ${item.id}.`);
+    if (item.progress !== undefined && item.progress !== null && !Number.isFinite(item.progress)) throw new Error("TaskList: progress must be finite, null or omitted.");
+    ids.add(item.id);
+  }
+  return items;
+}

package/vendor/ds/kits/app/src/composites/task-list.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const taskList = tv({
+  slots: {
+    root: "@container/task-list min-w-0 [overflow-wrap:anywhere] text-foreground",
+    list: "m-0 grid min-w-0 list-none divide-y divide-muted p-0",
+    item: "grid min-w-0 gap-[var(--reddb-spatial-layout-gap-sm)] py-[var(--reddb-spatial-inset-md)] first:pt-0 last:pb-0",
+    header: "flex min-w-0 flex-wrap items-baseline justify-between gap-[var(--reddb-spatial-gap-sm)]",
+    title: "m-0 min-w-0 break-words text-body font-medium",
+    description: "m-0 break-words text-body text-ink-muted",
+    context: "flex min-w-0 [overflow-wrap:anywhere] [&>span]:min-w-0 [&>span]:max-w-full flex-wrap gap-x-[var(--reddb-spatial-gap-md)] gap-y-[var(--reddb-spatial-gap-sm)] text-caption text-ink-muted",
+    reason: "m-0 break-words text-caption text-foreground",
+    progress: "flex min-w-0 items-center gap-[var(--reddb-spatial-gap-md)]",
+    reading: "shrink-0 text-caption tabular-nums text-ink-muted",
+    actions: "flex min-w-0 flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+  },
+});
+export type TaskListVariants = VariantProps<typeof taskList>;

package/vendor/ds/kits/app/src/composites/toolbar.variants.ts

@@ -0,0 +1,27 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const toolbar = tv({
+  slots: {
+    root: [
+      "inline-flex items-center gap-[var(--reddb-spatial-gap-sm)]",
+      "data-[command-toolbar]:items-center",
+      "rounded-md border border-muted bg-background p-[var(--reddb-spatial-inset-sm)]",
+    ].join(" "),
+    item: "inline-flex shrink-0 items-center",
+  },
+  variants: {
+    orientation: {
+      horizontal: "",
+      vertical: { root: "flex-col items-stretch" },
+    },
+    size: {
+      sm: { item: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm" },
+      md: { item: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm" },
+      lg: { item: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base" },
+    },
+  },
+  defaultVariants: { orientation: "horizontal", size: "md" },
+});
+
+export type ToolbarVariants = VariantProps<typeof toolbar>;
+export type ToolbarSize = NonNullable<ToolbarVariants["size"]>;

package/vendor/ds/kits/app/src/core/category-filter.ts

@@ -0,0 +1,4 @@
+/** Preserve selection order and avoid duplicates while adding or removing one category. */
+export function categoryValues(active: readonly string[], value: string, checked: boolean): string[] {
+  return checked ? active.includes(value) ? [...active] : [...active, value] : active.filter(candidate => candidate !== value);
+}

package/vendor/ds/kits/app/src/core/checkout-form.ts

@@ -0,0 +1,22 @@
+/** One caller-owned checkout field rendered through canonical Field and Input. */
+export interface CheckoutField<Type = unknown, Complete = unknown, InputMode = unknown> {
+  name: string;
+  label: string;
+  type?: Type;
+  value?: string | number;
+  autocomplete?: Complete;
+  inputmode?: InputMode;
+  placeholder?: string;
+  help?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+/** A visibly named caller-owned group of checkout fields. */
+export interface CheckoutSection<Type = unknown, Complete = unknown, InputMode = unknown> {
+  legend: string;
+  fields: readonly CheckoutField<Type, Complete, InputMode>[];
+  disabled?: boolean;
+}
+

package/vendor/ds/kits/app/src/core/contracts/actionpanel.ts

@@ -0,0 +1,24 @@
+import type { CardPadding, CardVariant, SectionHeadingLevel } from "@reddb-io/design-system/base";
+
+/** Portable ActionPanel properties shared by native adapters. */
+export interface ActionPanelContract {
+/**
+     * Panel name: rendered as the heading, and used as the region's accessible name
+     * unless `aria-label` is given.
+     */
+    title: string;
+/** Supporting line under the heading. Nothing is rendered when omitted. */
+    description?: string;
+/**
+     * Outline depth of the heading, `1` to `6`; it is always drawn at the compact size. Defaults to
+     * `2`.
+     */
+    level?: SectionHeadingLevel;
+/** Edge treatment of the underlying Card: `outline` or `plain`. Defaults to `outline`. */
+    variant?: CardVariant;
+/**
+     * Density-owned inset of the header, content and footer: `none`, `sm` or `md`. Defaults to
+     * `md`.
+     */
+    padding?: CardPadding;
+}

package/vendor/ds/kits/app/src/core/contracts/activityfeed.ts

@@ -0,0 +1,10 @@
+import type { TimelineItem } from "@reddb-io/design-system/base";
+
+type ActivityFeedItem = TimelineItem;
+/** Portable ActivityFeed properties shared by native adapters. */
+export interface ActivityFeedContract {
+/** Caller-owned activity in chronological display order. */
+    items: readonly ActivityFeedItem[];
+/** Accessible name for this activity stream. */
+    label?: string;
+}

package/vendor/ds/kits/app/src/core/contracts/applicationshell.ts

@@ -0,0 +1,17 @@
+
+
+/** Portable ApplicationShell properties shared by native adapters. */
+export interface ApplicationShellContract {
+/** The id shared by the keyboard bypass and the main landmark. */
+    mainId?: string;
+/** Let layouts consume the viewport edge. Header content owns its vertical rhythm and shares the navigation plane, so a Navbar is flush with the shell. */
+    fullWidth?: boolean;
+/**
+     * The shell is embedded in a host document that already owns the page's
+     * `<main>` (a preview, a documentation frame). Its main region stays the
+     * focusable skip-link target but is not a second `main` landmark. Defaults
+     * to `true` inside another ApplicationShell, which owns `<main>`, and to
+     * `false` everywhere else.
+     */
+    embedded?: boolean;
+}

package/vendor/ds/kits/app/src/core/contracts/bottomnavigation.ts

@@ -0,0 +1,20 @@
+import type { PrimaryNavigationItem } from "../../composites/navigation.behavior";
+
+interface BottomNavigationItem extends PrimaryNavigationItem {
+    /** Whether this destination's contextual menu is open, independent from currentId. */
+    expanded?: boolean;
+    /** Id of the contextual menu controlled by this item. */
+    controls?: string;
+  }
+/** Portable BottomNavigation properties shared by native adapters. */
+export interface BottomNavigationContract {
+/** Accessible name for the `nav` landmark. */
+    label: string;
+/** Destinations, native links or section buttons in the given order; each `id` must be unique. */
+    items: readonly BottomNavigationItem[];
+/**
+     * The `id` of the item for the current page. It must match exactly one entry in `items`, or the
+     * component throws.
+     */
+    currentId: string;
+}

package/vendor/ds/kits/app/src/core/contracts/cardheading.ts

@@ -0,0 +1,15 @@
+import type { SectionHeadingLevel, SectionHeadingSize } from "@reddb-io/design-system/base";
+
+/** Portable CardHeading properties shared by native adapters. */
+export interface CardHeadingContract {
+/** Heading text, rendered as a heading element at `level`. */
+    title: string;
+/** Supporting line under the title. Nothing is rendered when omitted. */
+    description?: string;
+/**
+     * Outline depth of the heading, `1` to `6`, independent of its visual `size`. Defaults to `2`.
+     */
+    level?: SectionHeadingLevel;
+/** Visual size of the title: `sm`, `md`, `lg` or `display`. Defaults to `sm`. */
+    size?: SectionHeadingSize;
+}

package/vendor/ds/kits/app/src/core/contracts/categoryfilter.ts

@@ -0,0 +1,21 @@
+import type { CategoryFilterOption } from "../../composites/category-filter.variants";
+
+/** Portable CategoryFilter properties shared by native adapters. */
+export interface CategoryFilterContract {
+/** Visible name for the category choices. */
+    legend: string;
+/** Caller-owned categories rendered as native checkbox choices. */
+    options: readonly CategoryFilterOption[];
+/** Active category values: `bind:value` (ADR 0026). */
+    value?: string[];
+/** Optional native form name shared by every category. */
+    name?: string;
+/** Disables the whole fieldset and every category checkbox. Defaults to `false`. */
+    disabled?: boolean;
+/**
+     * Extra classes, merged over the list slot's own, onto the element that wraps the checkboxes.
+     */
+    listClass?: string;
+/** Extra classes, merged over the option slot's own, onto each checkbox's field wrapper. */
+    optionClass?: string;
+}

package/vendor/ds/kits/app/src/core/contracts/categorypreview.ts

@@ -0,0 +1,18 @@
+
+
+/** Portable CategoryPreview properties shared by native adapters. */
+export interface CategoryPreviewContract {
+/** Visible category name and the destination's accessible name. */
+    name: string;
+/** Destination of the link wrapped around `name`. */
+    href: string;
+/** Supporting line under the category name. Nothing is rendered when omitted. */
+    description?: string;
+/** Width-to-height ratio of the media region, as a number. Defaults to `4 / 3`. */
+    ratio?: number;
+/**
+     * Outline level of the category name, `2` to `6` (default `3`). Set it one below the
+     * heading that introduces the previews so the page outline never skips a level.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}

package/vendor/ds/kits/app/src/core/contracts/chatmessage.ts

@@ -0,0 +1,18 @@
+
+
+/** Portable ChatMessage properties shared by native adapters. */
+export interface ChatMessageContract {
+/** Visible and accessible author name. */
+    author: string;
+/**
+     * Image source for the author's avatar. When omitted or unloadable, `avatarFallback` is shown
+     * instead.
+     */
+    avatarSrc?: string;
+/** Visible fallback when the author's image is unavailable. */
+    avatarFallback: string;
+/** Machine-readable message timestamp. */
+    datetime: string;
+/** Caller-owned visible timestamp. */
+    time: string;
+}

package/vendor/ds/kits/app/src/core/contracts/checkoutform.ts

@@ -0,0 +1,18 @@
+import type { CheckoutSection } from "../checkout-form";
+
+/** Portable CheckoutForm properties shared by native adapters. */
+export interface CheckoutFormContract {
+/** Caller-owned field groups; the component owns only their associations. */
+    sections?: readonly CheckoutSection[];
+/** Form-level failure associated with the native form boundary. */
+    error?: string;
+/** Default native submit label when no actions snippet is supplied. */
+    submitLabel?: string;
+/** Extra classes, merged over the section slot's own, onto each section's fieldset. */
+    sectionClass?: string;
+/**
+     * Extra classes, merged over the actions slot's own, onto the wrapper around the actions or
+     * submit button.
+     */
+    actionsClass?: string;
+}