@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/src/composites/OrderHistory.svelte

@@ -0,0 +1,70 @@
+<!-- Order facts composed into canonical heading and native table relationships. -->
+<script lang="ts">
+  import type { OrderHistoryContract } from "../core/contracts/orderhistory";
+  import {
+    SectionHeading,
+    Table,
+    type SectionHeadingLevel,
+    type TableCellContext,
+    type TableColumn,
+    type TableRow,
+  } from "@reddb-io/design-system/base";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    DEFAULT_ORDER_HISTORY_LABELS,
+    orderHistory,
+    type OrderHistoryEntry,
+    type OrderHistoryLabels,
+  } from "./order-history.variants";
+
+  interface Props extends OrderHistoryContract, Omit<HTMLAttributes<HTMLElement>, keyof OrderHistoryContract | "class" | "title"> {
+    /** Extra classes, merged over the root slot's own, onto the `section` element. */
+    class?: string;
+  }
+
+  const uid = $props.id();
+  const {
+    title,
+    level = 2,
+    caption,
+    orders,
+    labels = {},
+    class: className,
+    ...rest
+  }: Props = $props();
+  const titleId = `${uid}-title`;
+  const vocabulary = $derived({ ...DEFAULT_ORDER_HISTORY_LABELS, ...labels });
+  const columns = $derived<readonly TableColumn[]>([
+    { key: "order", header: vocabulary.order },
+    { key: "placed", header: vocabulary.placed },
+    { key: "status", header: vocabulary.status },
+    { key: "total", header: vocabulary.total },
+  ]);
+  const rows = $derived<readonly TableRow[]>(
+    orders.map((order) => ({
+      order: order.id,
+      placed: order.placed,
+      status: order.status,
+      total: order.total,
+    })),
+  );
+  const styles = orderHistory();
+</script>
+
+<section
+  {...rest}
+  data-order-history
+  aria-labelledby={rest["aria-label"] ? undefined : titleId}
+  class={styles.root({ class: className })}
+>
+  <SectionHeading id={titleId} {title} {level} rule={false} class={styles.heading()} />
+  <Table {caption} {columns} {rows} rowHeader="order" {cell} />
+</section>
+
+{#snippet cell({ column, value, rowIndex }: TableCellContext)}
+  {#if column.key === "placed"}
+    <time datetime={orders[rowIndex]?.placedAt}>{value}</time>
+  {:else}
+    {value}
+  {/if}
+{/snippet}

package/vendor/ds/kits/app/src/composites/OrderSummary.svelte

@@ -0,0 +1,60 @@
+<!-- A named order total composed from canonical Card and DescriptionList. -->
+<script lang="ts">
+  import type { OrderSummaryContract } from "../core/contracts/ordersummary";
+  import {
+    Card,
+    DescriptionList,
+    SectionHeading,
+    type SectionHeadingLevel,
+  } from "@reddb-io/design-system/base";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { orderSummary, type OrderSummaryLine } from "./order-summary.variants";
+
+  interface Props extends OrderSummaryContract, Omit<HTMLAttributes<HTMLDivElement>, keyof OrderSummaryContract | "class" | "title"> {
+    /** Optional controls rendered in the footer, such as a checkout link or button. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the underlying Card. */
+    class?: string;
+  }
+
+  const uid = $props.id();
+  const {
+    title,
+    level = 2,
+    lines,
+    totalLabel,
+    total,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const titleId = `${uid}-title`;
+  const styles = orderSummary();
+</script>
+
+<Card
+  {...rest}
+  data-order-summary
+  role="region"
+  aria-labelledby={rest["aria-label"] ? undefined : titleId}
+  class={styles.root({ class: className })}
+>
+  {#snippet header()}
+    <SectionHeading id={titleId} {title} {level} rule={false} class={styles.heading()} />
+  {/snippet}
+
+  <div class={styles.content()}>
+    <DescriptionList items={lines.map((line) => ({ term: line.label, detail: line.value }))} />
+    <div data-order-summary-total class={styles.total()}>
+      <span>{totalLabel}</span>
+      <output aria-live="polite" aria-atomic="true">{total}</output>
+    </div>
+  </div>
+
+  {#snippet footer()}
+    {#if actions}
+      <div data-order-summary-actions class={styles.actions()}>{@render actions()}</div>
+    {/if}
+  {/snippet}
+</Card>

package/vendor/ds/kits/app/src/composites/PageHeading.svelte

@@ -0,0 +1,46 @@
+<!-- The one title at the root of an application page's document outline. -->
+<script lang="ts">
+  import type { PageHeadingContract } from "../core/contracts/pageheading";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Heading, Stack } from "@reddb-io/design-system/base";
+  import { pageHeading } from "./page-heading.variants";
+
+  interface Props extends PageHeadingContract, Omit<HTMLAttributes<HTMLDivElement>, keyof PageHeadingContract | "class" | "title"> {
+    /** Caller-owned context such as canonical Breadcrumbs. */
+    context?: Snippet;
+    /** Caller-owned canonical links and controls, kept in document order. */
+    actions?: Snippet;
+    /**
+     * Extra classes, merged over the root slot's own, onto the wrapper around the title and
+     * actions.
+     */
+    class?: string;
+  }
+
+  const {
+    title,
+    description,
+    context,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(pageHeading());
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-page-heading
+  class={slots.root({ class: className })}
+>
+  <Stack gap="sm" class={slots.identity()}>
+    {#if context}<div data-page-heading-context class={slots.context()}>{@render context()}</div>{/if}
+    <Heading level={1} role="title" class={slots.title()}>{title}</Heading>
+    {#if description}<p class={slots.description()}>{description}</p>{/if}
+  </Stack>
+  {#if actions}
+    <div data-page-heading-actions class={slots.actions()}>{@render actions()}</div>
+  {/if}
+</div>

package/vendor/ds/kits/app/src/composites/PhaseSummary.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { StatusIndicator } from "@reddb-io/design-system/base";
+  import type { PhaseSummaryContract } from "../core/contracts/phasesummary";
+  import { operational } from "../operational.variants";
+  import { validateGates, GATE_LABELS, GATE_TONES } from "../core/operational";
+  interface Props extends PhaseSummaryContract {
+    /** Additional root classes. */
+    class?: string;
+  }
+  let { label, gates, description, class: className }: Props = $props();
+  const s = operational();
+</script>
+
+<section
+  data-phase-summary
+  aria-label={label}
+  class={s.body({ class: className })}
+>
+  <p class={s.title()}>{label}</p>
+  {#if description}<p class={s.description()}>{description}</p>{/if}
+  <ul class={s.list()}>
+    {#each validateGates(gates) as gate (gate.id)}<li
+        data-gate-id={gate.id}
+        data-state={gate.state}
+      >
+        <div class={s.row()}>
+          <span class={s.title()}>{gate.label}</span><StatusIndicator
+            label={GATE_LABELS[gate.state]}
+            tone={GATE_TONES[gate.state]}
+          />
+        </div>
+        {#if gate.description}<p class={s.description()}>
+            {gate.description}
+          </p>{/if}
+      </li>{/each}
+  </ul>
+</section>

package/vendor/ds/kits/app/src/composites/PlaybackControls.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Button, Select, Slider } from "@reddb-io/design-system/base";
+  import type { PlaybackControlsContract } from "../core/contracts/playbackcontrols";
+  import { PLAYBACK_SPEEDS } from "../core/operational";
+  import { operational } from "../operational.variants";
+  interface Props extends PlaybackControlsContract {
+    /** Additional root classes. */
+    class?: string;
+  }
+  let {
+    label,
+    playing,
+    position,
+    duration,
+    speed = 1,
+    onplayingchange,
+    onpositionchange,
+    onspeedchange,
+    onstep,
+    class: className,
+  }: Props = $props();
+  const s = operational();
+  const speeds = PLAYBACK_SPEEDS;
+  const end = $derived(Number.isFinite(duration) ? Math.max(0, duration) : 0);
+</script>
+
+<div
+  data-playback-controls
+  role="group"
+  aria-label={label}
+  class={s.body({ class: className })}
+>
+  <div class={s.actions()}>
+    <Button
+      disabled={!onplayingchange || !end}
+      onclick={() => onplayingchange?.(!playing)}
+      >{playing ? "Pause" : "Play"}</Button
+    ><Button
+      disabled={!onstep || playing || position >= end}
+      onclick={() => onstep?.()}>Next step</Button
+    >
+    <div class={s.speed()}>
+      <Select
+        aria-label="Playback speed"
+        value={String(speed)}
+        options={speeds}
+        disabled={!onspeedchange}
+        onvaluechange={(value) => onspeedchange?.(Number(value))}
+      />
+    </div>
+  </div>
+  <Slider
+    fieldClass={s.seek()}
+    label="Replay position"
+    value={position}
+    min={0}
+    max={Math.max(1, end)}
+    disabled={!onpositionchange || !end}
+    onvaluechange={(value) => onpositionchange?.(value)}
+    formatValue={(value) => `${value} / ${end}`}
+  />
+</div>

package/vendor/ds/kits/app/src/composites/ProductFeature.svelte

@@ -0,0 +1,71 @@
+<!-- A reusable product feature relationship; page sequence and product copy stay local. -->
+<script lang="ts">
+  import type { ProductFeatureContract } from "../core/contracts/productfeature";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    MediaObject,
+    SectionHeading,
+    Stack,
+    type SectionHeadingLevel,
+  } from "@reddb-io/design-system/base";
+  import {
+    productFeature,
+    type ProductFeatureMediaSide,
+  } from "./product-feature.variants";
+
+  interface Props extends ProductFeatureContract, Omit<HTMLAttributes<HTMLDivElement>, keyof ProductFeatureContract | "children" | "class" | "title"> {
+    /** Caller-owned product imagery, including its own alternative text. */
+    media: Snippet;
+    /** Optional body of the feature, rendered under the heading. */
+    children?: Snippet;
+    /** Optional links or controls, rendered after the body. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the media-object root. */
+    class?: string;
+  }
+
+  const instanceId = $props.id();
+  const headingId = `${instanceId}-title`;
+  const {
+    title,
+    description,
+    level = 2,
+    mediaSide = "start",
+    media,
+    children,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const slots = $derived(productFeature({ mediaSide }));
+</script>
+
+<MediaObject
+  {...(rest as Record<string, unknown>)}
+  data-product-feature
+  role="region"
+  aria-labelledby={headingId}
+  {media}
+  gap="lg"
+  mediaClass={slots.media()}
+  contentClass={slots.content()}
+  class={slots.root({ class: className })}
+>
+  <Stack gap="layout-sm">
+    <SectionHeading
+      {title}
+      {description}
+      {level}
+      titleId={headingId}
+      rule={false}
+      class={slots.heading()}
+    />
+    {#if children}
+      <div data-product-feature-body class={slots.body()}>{@render children()}</div>
+    {/if}
+    {#if actions}
+      <div data-product-feature-actions class={slots.actions()}>{@render actions()}</div>
+    {/if}
+  </Stack>
+</MediaObject>

package/vendor/ds/kits/app/src/composites/ProductList.svelte

@@ -0,0 +1,74 @@
+<!-- A named product collection composed from canonical GridList and Card surfaces. -->
+<script lang="ts">
+  import type { ProductListContract } from "../core/contracts/productlist";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Card, GridList, Heading, Link, type GridListColumn } from "@reddb-io/design-system/base";
+  import type { ProductListItem } from "./product-list.behavior";
+  import { productList } from "./product-list.variants";
+
+  interface Props extends ProductListContract, Omit<HTMLAttributes<HTMLUListElement>, keyof ProductListContract | "children" | "class"> {
+    /** Caller-owned product entries with native content snippets. */
+    items: readonly ProductListItem[];
+    /** Caller-owned empty state, rendered as the collection's only item. */
+    empty?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the GridList. */
+    class?: string;
+  }
+
+  const instanceId = $props.id();
+  const {
+    label,
+    items,
+    columns = 2,
+    empty,
+    headingLevel = 3,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const slots = $derived(productList({ columns }));
+</script>
+
+<GridList
+  {...(rest as Record<string, unknown>)}
+  data-product-list
+  aria-label={label}
+  {columns}
+  gap="md"
+  class={slots.root({ class: className })}
+>
+  {#each items as item, index (item.id)}
+    {@const titleId = `${instanceId}-product-${index}-name`}
+    <li class={slots.item()}>
+      <Card
+        data-product-list-item
+        role="article"
+        aria-labelledby={titleId}
+        padding="sm"
+        footer={item.actions}
+        class={slots.card()}
+      >
+        {#snippet header()}
+          <div class={slots.identity()}>
+            <Heading level={headingLevel} role="heading" id={titleId} data-product-list-name class={slots.name()}>
+              {#if item.href}<Link href={item.href}>{item.name}</Link>{:else}{item.name}{/if}
+            </Heading>
+            {#if item.price}<p data-product-list-price class={slots.price()}>{item.price}</p>{/if}
+          </div>
+        {/snippet}
+
+        {#if item.media}
+          <div data-product-list-media class={slots.media()}>{@render item.media()}</div>
+        {/if}
+        {#if item.description}
+          <p data-product-list-description class={slots.description()}>{item.description}</p>
+        {/if}
+
+      </Card>
+    </li>
+  {:else}
+    <li data-product-list-empty class={slots.empty()}>
+      {#if empty}{@render empty()}{:else}No products available.{/if}
+    </li>
+  {/each}
+</GridList>

package/vendor/ds/kits/app/src/composites/ProductOverview.svelte

@@ -0,0 +1,77 @@
+<!-- Product identity and caller-owned purchase content in one reusable overview. -->
+<script lang="ts">
+  import type { ProductOverviewContract } from "../core/contracts/productoverview";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    Image,
+    SectionHeading,
+    Stack,
+    type ImageAsset,
+    type SectionHeadingLevel,
+  } from "@reddb-io/design-system/base";
+  import { productOverview } from "./product-overview.variants";
+
+  interface Props extends ProductOverviewContract, Omit<HTMLAttributes<HTMLElement>, keyof ProductOverviewContract | "children" | "class" | "title"> {
+    /**
+     * Caller-owned product imagery, including its own alternative text. Optional when `image` is
+     * given; one of the two is required.
+     */
+    media?: Snippet;
+    /** Caller-owned product detail, options, or fulfilment information. */
+    children?: Snippet;
+    /** Caller-owned canonical purchase controls. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the `section` element. */
+    class?: string;
+  }
+
+  const instanceId = $props.id();
+  const headingId = `${instanceId}-title`;
+  const {
+    title,
+    description,
+    price,
+    level = 2,
+    media,
+    image,
+    priority = false,
+    children,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const slots = $derived(productOverview());
+</script>
+
+<section
+  {...(rest as Record<string, unknown>)}
+  data-product-overview
+  aria-labelledby={headingId}
+  class={slots.root({ class: className })}
+>
+  <div data-product-overview-media class={slots.media()}>
+    {#if media}
+      {@render media()}
+    {:else if image}
+      <Image {...image} {priority} class="w-full" />
+    {/if}
+  </div>
+  <Stack gap="layout-sm" class={slots.content()}>
+    <SectionHeading
+      {title}
+      {description}
+      {level}
+      titleId={headingId}
+      rule={false}
+      class={slots.heading()}
+    />
+    {#if price}<p data-product-overview-price class={slots.price()}>{price}</p>{/if}
+    {#if children}
+      <div data-product-overview-body class={slots.body()}>{@render children()}</div>
+    {/if}
+    {#if actions}
+      <div data-product-overview-actions class={slots.actions()}>{@render actions()}</div>
+    {/if}
+  </Stack>
+</section>

package/vendor/ds/kits/app/src/composites/ProductQuickview.svelte

@@ -0,0 +1,62 @@
+<!-- Product detail inside the canonical Dialog focus and dismissal lifecycle. -->
+<script lang="ts">
+  import type { ProductQuickviewContract } from "../core/contracts/productquickview";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Dialog } from "@reddb-io/design-system/base";
+  import { productQuickview } from "./product-quickview.variants";
+
+  interface Props extends ProductQuickviewContract, Omit<HTMLAttributes<HTMLDivElement>, keyof ProductQuickviewContract | "children" | "class" | "title"> {
+    /**
+     * Custom content for the opening Button; `triggerLabel` stays its accessible name, so words it
+     * shows must appear, in order, in `triggerLabel`, ideally first (WCAG 2.5.3, Label in Name):
+     * `Quick view` shown, `Quick view Field notes` named.
+     */
+    trigger?: Snippet;
+    /** Caller-owned product imagery, including its own alternative text. */
+    media?: Snippet;
+    /** Caller-owned product detail and controls. */
+    children?: Snippet;
+    /** Controls for the dialog's action region; it receives `{ close }` to dismiss the dialog. */
+    actions?: Snippet<[{ close: () => void }]>;
+    /** Extra classes, merged over the root slot's own, onto the wrapper around the dialog. */
+    class?: string;
+  }
+
+  const {
+    triggerLabel,
+    title,
+    description,
+    trigger,
+    media,
+    children,
+    actions,
+    class: className,
+    dialogClass,
+    ...rest
+  }: Props = $props();
+  const slots = $derived(productQuickview());
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-product-quickview
+  class={slots.root({ class: className })}
+>
+  <Dialog
+    {triggerLabel}
+    {title}
+    {description}
+    {trigger}
+    {actions}
+    initialFocus="body"
+    class={slots.dialog({ class: dialogClass })}
+  >
+    <div data-product-quickview-content class={slots.content()}>
+      {#if media}
+        <div data-product-quickview-media class={slots.media()}>{@render media()}</div>
+      {/if}
+      <div data-product-quickview-body class={slots.body()}>{@render children?.()}</div>
+    </div>
+  </Dialog>
+</div>

package/vendor/ds/kits/app/src/composites/PropertyPanel.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { DescriptionList } from "@reddb-io/design-system/base";
+  import type { PropertyPanelContract } from "../core/contracts/propertypanel";
+  import { operational } from "../operational.variants";
+
+  interface Props extends PropertyPanelContract {
+    /** Caller-owned panel actions. */
+    actions?: Snippet;
+    /** Additional root classes. */
+    class?: string;
+  }
+  let {
+    title,
+    items,
+    description,
+    actions,
+    class: className,
+  }: Props = $props();
+  const s = operational();
+</script>
+
+<section
+  data-property-panel
+  aria-label={title}
+  class={[s.root({ class: className }), s.body()].join(" ")}
+>
+  <div class={s.header()}>
+    <p class={s.title()}>{title}</p>
+    {#if actions}<div class={s.actions()}>{@render actions()}</div>{/if}
+  </div>
+  {#if description}<p class={s.description()}>
+      {description}
+    </p>{/if}<DescriptionList
+    gap="sm"
+    class={s.properties()}
+    items={items.map((item) => ({
+      term: item.label,
+      detail: String(item.value),
+    }))}
+  />
+</section>

package/vendor/ds/kits/app/src/composites/Review.svelte

@@ -0,0 +1,68 @@
+<!-- A scored authored review composed from canonical Base surface and media contracts. -->
+<script lang="ts">
+  import type { ReviewContract } from "../core/contracts/review";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Avatar, Card, MediaObject, Rating } from "@reddb-io/design-system/base";
+  import { review } from "./review.variants";
+
+  interface Props extends ReviewContract, Omit<HTMLAttributes<HTMLElement>, keyof ReviewContract | "children" | "class"> {
+    /** Caller-owned review body. */
+    children: Snippet;
+    /** Optional caller-owned destinations and controls. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the `article` element. */
+    class?: string;
+  }
+
+  const generatedId = $props.id();
+  const {
+    author,
+    avatarSrc,
+    avatarFallback,
+    rating: score,
+    maxRating = 5,
+    datetime,
+    time,
+    children,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(review());
+  const label = $derived(rest["aria-label"] ?? `Review by ${author}`);
+</script>
+
+<article {...rest} data-review aria-label={label} class={styles.root({ class: className })}>
+  <Card class={styles.card()}>
+    {#snippet header()}
+      <MediaObject>
+        {#snippet media()}
+          <Avatar src={avatarSrc} name={author} fallback={avatarFallback} />
+        {/snippet}
+
+        <div class={styles.identity()}>
+          <span data-review-author class={styles.author()}>{author}</span>
+          {#if datetime !== undefined && time !== undefined}
+            <time {datetime} class={styles.time()}>{time}</time>
+          {/if}
+        </div>
+      </MediaObject>
+    {/snippet}
+
+    <div data-review-content class={styles.content()}>
+      <Rating
+        id={`${generatedId}-score`}
+        legend={`Rating by ${author}`}
+        name={`${generatedId}-score`}
+        value={score}
+        max={maxRating}
+        disabled
+      />
+      <div data-review-body class={styles.body()}>{@render children()}</div>
+      {#if actions}
+        <footer data-review-actions class={styles.actions()}>{@render actions()}</footer>
+      {/if}
+    </div>
+  </Card>
+</article>