@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/src/DateField.svelte

@@ -0,0 +1,157 @@
+<!-- A segmented calendar value composed from the canonical Field and Input. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { possibleDate, segmentDigits } from "./core/date-segments";
+  import { afterFormReset } from "./core/native-controls";
+  import type { DateFieldContract } from "./core/contracts/datefield";
+  import Field from "./Field.svelte";
+  import Input from "./Input.svelte";
+  import { dateField } from "./date-field.variants";
+
+  interface Props extends DateFieldContract {
+    /** Called with the new value whenever it changes (ADR 0026's value dialect). */
+    onvaluechange?: (value: string) => void;
+    /** Extra classes merged onto the canonical Field root. */
+    class?: string;
+  }
+
+  let {
+    label,
+    name,
+    value = $bindable(""),
+    onvaluechange,
+    help,
+    error,
+    required = false,
+    disabled = false,
+    id,
+    class: className,
+    segmentClass,
+  }: Props = $props();
+
+
+  const initialValue = untrack(() => value);
+  const initial = possibleDate(initialValue);
+  let year = $state(initial?.[1] ?? "");
+  let month = $state(initial?.[2] ?? "");
+  let day = $state(initial?.[3] ?? "");
+  let yearControl = $state<HTMLInputElement>();
+  let monthControl = $state<HTMLInputElement>();
+  let dayControl = $state<HTMLInputElement>();
+  let publishedValue = value;
+  const complete = $derived(possibleDate(`${year}-${month}-${day}`) !== null);
+  const styles = dateField();
+
+  $effect(() => {
+    if (value === publishedValue) return;
+
+    const next = possibleDate(value);
+    year = next?.[1] ?? "";
+    month = next?.[2] ?? "";
+    day = next?.[3] ?? "";
+    publishedValue = value;
+  });
+
+  $effect(() => afterFormReset(yearControl?.form, () => {
+    const reset = possibleDate(initialValue); year = reset?.[1] ?? ""; month = reset?.[2] ?? ""; day = reset?.[3] ?? "";
+    publishedValue = initialValue; value = initialValue;
+  }));
+
+  type Segment = "year" | "month" | "day";
+
+  function publish(): void {
+    const before = value;
+    publishedValue = complete ? `${year}-${month}-${day}` : "";
+    value = publishedValue;
+    if (value !== before) onvaluechange?.(value);
+  }
+
+  function handleInput(event: Event, segment: Segment): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const length = segment === "year" ? 4 : 2;
+    const next = segmentDigits(input.value, segment);
+
+    input.value = next;
+    if (segment === "year") year = next;
+    else if (segment === "month") month = next;
+    else day = next;
+    publish();
+
+    if (next.length === length) {
+      (segment === "year" ? monthControl : segment === "month" ? dayControl : undefined)?.focus();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, segment: Segment): void {
+    const previous = segment === "day" ? monthControl : segment === "month" ? yearControl : undefined;
+    const next = segment === "year" ? monthControl : segment === "month" ? dayControl : undefined;
+
+    if (event.key === "ArrowLeft" && previous) {
+      event.preventDefault();
+      previous.focus();
+    } else if (event.key === "ArrowRight" && next) {
+      event.preventDefault();
+      next.focus();
+    }
+  }
+</script>
+
+<Field {label} {help} {error} {required} {id} class={styles.root({ class: className })}>
+  {#snippet children(control)}
+    <div class={styles.segments()} data-date-field data-date-segments>
+      <Input
+        {...control}
+        bind:ref={yearControl}
+        type="text"
+        inputmode="numeric"
+        maxlength={4}
+        value={year}
+        {disabled}
+        aria-label={`${label}, year`}
+        data-date-segment="year"
+        class={styles.year({ class: segmentClass })}
+        oninput={(event) => handleInput(event, "year")}
+        onkeydown={(event) => handleKeydown(event, "year")}
+      />
+      <span class={styles.separator()} aria-hidden="true">-</span>
+      <Input
+        bind:ref={monthControl}
+        id={`${control.id}-month`}
+        type="text"
+        inputmode="numeric"
+        maxlength={2}
+        value={month}
+        required={control.required}
+        {disabled}
+        aria-label={`${label}, month`}
+        aria-describedby={control["aria-describedby"]}
+        aria-invalid={control["aria-invalid"]}
+        aria-errormessage={control["aria-errormessage"]}
+        data-date-segment="month"
+        class={styles.segment({ class: segmentClass })}
+        oninput={(event) => handleInput(event, "month")}
+        onkeydown={(event) => handleKeydown(event, "month")}
+      />
+      <span class={styles.separator()} aria-hidden="true">-</span>
+      <Input
+        bind:ref={dayControl}
+        id={`${control.id}-day`}
+        type="text"
+        inputmode="numeric"
+        maxlength={2}
+        value={day}
+        required={control.required}
+        {disabled}
+        aria-label={`${label}, day`}
+        aria-describedby={control["aria-describedby"]}
+        aria-invalid={control["aria-invalid"]}
+        aria-errormessage={control["aria-errormessage"]}
+        data-date-segment="day"
+        class={styles.segment({ class: segmentClass })}
+        oninput={(event) => handleInput(event, "day")}
+        onkeydown={(event) => handleKeydown(event, "day")}
+      />
+      {#if name && complete && !disabled}<input type="hidden" {name} {value} />{/if}
+    </div>
+  {/snippet}
+</Field>

package/vendor/ds/kits/base/src/DatePicker.svelte

@@ -0,0 +1,112 @@
+<!-- A synchronized DateField and Calendar under the canonical Popover lifecycle. -->
+<script lang="ts">
+  import type { DatePickerContract } from "./core/contracts/datepicker";
+  import { parseCalendarDate as toDateValue } from "./core/calendar";
+  import type { DateValue } from "@internationalized/date";
+  import type { Snippet } from "svelte";
+  import Calendar from "./Calendar.svelte";
+  import DateField from "./DateField.svelte";
+  import Popover from "./Popover.svelte";
+  import { datePicker } from "./date-picker.variants";
+
+  type Side = "top" | "right" | "bottom" | "left";
+  type Align = "start" | "center" | "end";
+
+  interface Props extends DatePickerContract {
+    /** Optional caller-owned content inside the canonical trigger Button. */
+    trigger?: Snippet;
+    /** Extra classes merged onto the picker root, which lays the field and trigger out in a row. */
+    class?: string;
+    /** Called with the complete ISO date after the user picks one in the Calendar. */
+    onvaluechange?: (value: string) => void;
+    /** Called with the next open state when the calendar Popover opens or closes. */
+    onopenchange?: (open: boolean) => void;
+  }
+
+  let {
+    label,
+    calendarLabel,
+    triggerLabel = `Choose ${label}`,
+    name,
+    value = $bindable(""),
+    help,
+    error,
+    required = false,
+    disabled = false,
+    id,
+    open = $bindable(false),
+    placeholder,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    side,
+    align,
+    sideOffset,
+    collisionPadding,
+    trigger,
+    class: className,
+    fieldClass,
+    segmentClass,
+    triggerClass,
+    contentClass,
+    calendarClass,
+    navigationClass,
+    dayClass,
+    onvaluechange,
+    onopenchange,
+  }: Props = $props();
+
+  const styles = datePicker();
+  const calendarValue = $derived(toDateValue(value));
+
+
+  function handleCalendarValue(next: DateValue | undefined): void {
+    if (!next) return;
+    value = next.toString();
+    onvaluechange?.(value);
+    open = false;
+  }
+</script>
+
+<div class={styles.root({ class: className })} data-date-picker>
+  <DateField
+    {label}
+    {name}
+    bind:value
+    {help}
+    {error}
+    {required}
+    {disabled}
+    {id}
+    class={styles.field({ class: fieldClass })}
+    {segmentClass}
+  />
+  <Popover
+    {triggerLabel}
+    contentLabel={calendarLabel}
+    bind:open
+    {disabled}
+    {side}
+    {align}
+    {sideOffset}
+    {collisionPadding}
+    {trigger}
+    triggerClass={styles.trigger({ class: triggerClass })}
+    class={styles.content({ class: contentClass })}
+    onopenchange={onopenchange}
+  >
+    <Calendar
+      label={calendarLabel}
+      value={calendarValue}
+      placeholder={placeholder ?? calendarValue}
+      {minValue}
+      {maxValue}
+      {isDateUnavailable}
+      disabled={disabled}
+      onvaluechange={handleCalendarValue}
+      class={styles.calendar({ class: calendarClass })}
+      {navigationClass}
+      {dayClass}
+    />
+  </Popover>
+</div>

package/vendor/ds/kits/base/src/DateRangeField.svelte

@@ -0,0 +1,81 @@
+<!-- An ordered pair of canonical DateFields under one native Fieldset. -->
+<script lang="ts">
+  import type { DateRangeFieldContract } from "./core/contracts/daterangefield";
+  import DateField from "./DateField.svelte";
+  import Fieldset from "./Fieldset.svelte";
+  import { dateRangeField } from "./date-range-field.variants";
+
+  interface Props extends DateRangeFieldContract {
+    /** Called with both bounds whenever either changes (ADR 0026's value dialect). */
+    onvaluechange?: (value: { start: string; end: string }) => void;
+    /** Extra classes merged onto the canonical Fieldset root. */
+    class?: string;
+  }
+
+  const generatedId = $props.id();
+  let {
+    label,
+    startLabel,
+    endLabel,
+    startName,
+    endName,
+    startValue = $bindable(""),
+    endValue = $bindable(""),
+    onvaluechange,
+    help,
+    rangeError = "End date cannot be before start date.",
+    required = false,
+    disabled = false,
+    id,
+    class: className,
+    fieldClass,
+    segmentClass,
+  }: Props = $props();
+
+  const inverted = $derived(Boolean(startValue && endValue && endValue < startValue));
+  const idPrefix = $derived(id ?? `${generatedId}-range`);
+  const helpId = $derived(`${idPrefix}-help`);
+  const errorId = $derived(`${idPrefix}-error`);
+  const describedBy = $derived([help ? helpId : undefined, inverted ? errorId : undefined].filter(Boolean).join(" ") || undefined);
+  const styles = dateRangeField();
+</script>
+
+<Fieldset
+  legend={label}
+  {disabled}
+  class={styles.root({ class: className })}
+  data-date-range-field
+  aria-describedby={describedBy}
+  aria-invalid={inverted ? "true" : undefined}
+>
+  <div class={styles.frame()} data-range-field-frame>
+    <div class={styles.fields()} data-date-range-fields>
+      <DateField
+        label={startLabel}
+        name={startName}
+        bind:value={startValue}
+        onvaluechange={(start) => onvaluechange?.({ start, end: endValue })}
+        id={`${idPrefix}-start`}
+        {required}
+        {disabled}
+        class={fieldClass}
+        {segmentClass}
+      />
+      <DateField
+        label={endLabel}
+        name={inverted ? undefined : endName}
+        bind:value={endValue}
+        onvaluechange={(end) => onvaluechange?.({ start: startValue, end })}
+        id={`${idPrefix}-end`}
+        {required}
+        {disabled}
+        class={fieldClass}
+        {segmentClass}
+      />
+    </div>
+  </div>
+  {#if help}<p class={styles.help()} id={helpId}>{help}</p>{/if}
+  {#if inverted}
+    <p class={styles.error()} id={errorId} role="alert">{rangeError}</p>
+  {/if}
+</Fieldset>

package/vendor/ds/kits/base/src/DateRangePicker.svelte

@@ -0,0 +1,137 @@
+<!-- Synchronized DateRangeField and RangeCalendar under the canonical Popover lifecycle. -->
+<script lang="ts">
+  import type { DateRangePickerContract } from "./core/contracts/daterangepicker";
+  import { parseCalendarDate as toDateValue } from "./core/calendar";
+  import type { DateValue } from "@internationalized/date";
+  import type { Snippet } from "svelte";
+  import DateRangeField from "./DateRangeField.svelte";
+  import Popover from "./Popover.svelte";
+  import RangeCalendar from "./RangeCalendar.svelte";
+  import { dateRangePicker } from "./date-range-picker.variants";
+
+  type DateRange = { start: DateValue | undefined; end: DateValue | undefined };
+  type StringDateRange = { start: string; end: string };
+  type Side = "top" | "right" | "bottom" | "left";
+  type Align = "start" | "center" | "end";
+
+  interface Props extends DateRangePickerContract {
+    /** Custom content inside the trigger Button. The trigger label text is shown when omitted. */
+    trigger?: Snippet;
+    /** Extra classes merged onto the picker root, which lays the field and trigger out in a row. */
+    class?: string;
+    /**
+     * Called with `{ start, end }` ISO dates once the user has chosen a complete range in the
+     * calendar.
+     */
+    onvaluechange?: (value: StringDateRange) => void;
+    /** Called with the next open state when the calendar Popover opens or closes. */
+    onopenchange?: (open: boolean) => void;
+  }
+
+  let {
+    label,
+    startLabel,
+    endLabel,
+    calendarLabel,
+    triggerLabel = `Choose ${label}`,
+    startName,
+    endName,
+    startValue = $bindable(""),
+    endValue = $bindable(""),
+    help,
+    rangeError,
+    required = false,
+    disabled = false,
+    id,
+    open = $bindable(false),
+    placeholder,
+    minValue,
+    maxValue,
+    minDays,
+    maxDays,
+    isDateUnavailable,
+    side,
+    align,
+    sideOffset,
+    collisionPadding,
+    trigger,
+    class: className,
+    fieldClass,
+    dateFieldClass,
+    segmentClass,
+    triggerClass,
+    contentClass,
+    calendarClass,
+    navigationClass,
+    dayClass,
+    onvaluechange,
+    onopenchange,
+  }: Props = $props();
+
+  const styles = dateRangePicker();
+  const calendarValue = $derived<DateRange>({
+    start: toDateValue(startValue),
+    end: toDateValue(endValue),
+  });
+
+
+  function handleCalendarValue(next: DateRange): void {
+    startValue = next.start?.toString() ?? "";
+    endValue = next.end?.toString() ?? "";
+
+    if (startValue && endValue) {
+      onvaluechange?.({ start: startValue, end: endValue });
+      open = false;
+    }
+  }
+</script>
+
+<div class={styles.root({ class: className })} data-date-range-picker>
+  <DateRangeField
+    {label}
+    {startLabel}
+    {endLabel}
+    {startName}
+    {endName}
+    bind:startValue
+    bind:endValue
+    {help}
+    {rangeError}
+    {required}
+    {disabled}
+    {id}
+    class={styles.field({ class: fieldClass })}
+    fieldClass={dateFieldClass}
+    {segmentClass}
+  />
+  <Popover
+    {triggerLabel}
+    contentLabel={calendarLabel}
+    bind:open
+    {disabled}
+    {side}
+    {align}
+    {sideOffset}
+    {collisionPadding}
+    {trigger}
+    triggerClass={styles.trigger({ class: triggerClass })}
+    class={contentClass}
+    onopenchange={onopenchange}
+  >
+    <RangeCalendar
+      label={calendarLabel}
+      value={calendarValue}
+      placeholder={placeholder ?? calendarValue.start}
+      {minValue}
+      {maxValue}
+      {minDays}
+      {maxDays}
+      {isDateUnavailable}
+      {disabled}
+      onvaluechange={handleCalendarValue}
+      class={styles.calendar({ class: calendarClass })}
+      {navigationClass}
+      {dayClass}
+    />
+  </Popover>
+</div>

package/vendor/ds/kits/base/src/Deck.svelte

@@ -0,0 +1,24 @@
+<!--
+  A named run of slides, stacked in reading order (ADR 0027). It is not a deck
+  engine: keyboard navigation and speaker notes are follow-up work.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { deck } from "./deck.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "class"> {
+    /** The deck's accessible name; it makes the deck a named region of the page. */
+    label: string;
+    /** Extra classes merged onto the deck. */
+    class?: string;
+    /** The slides, each a SlideFrame or a slide layout. */
+    children?: Snippet;
+  }
+
+  const { label, class: className, children, ...rest }: Props = $props();
+</script>
+
+<section {...(rest as Record<string, unknown>)} aria-label={label} data-deck class={deck({ class: className })}>
+  {@render children?.()}
+</section>

package/vendor/ds/kits/base/src/DescriptionList.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    descriptionList,
+    type DescriptionListGap,
+    type DescriptionListItem,
+  } from "./description-list.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDListElement>, "class"> {
+    /**
+     * The term and detail pairs, in order; each side is a string or a Snippet. Renders nothing when
+     * omitted.
+     */
+    items?: readonly DescriptionListItem[];
+    /** Density-owned space between and within items: `sm`, `md` (the default) or `lg`. */
+    gap?: DescriptionListGap;
+    /** Extra classes merged onto the `dl` root. */
+    class?: string;
+  }
+
+  let { items = [], gap = "md", class: className, ...rest }: Props = $props();
+  const slots = $derived(descriptionList({ gap }));
+</script>
+
+<dl
+  {...(rest as Record<string, unknown>)}
+  data-description-list
+  class={slots.root({ class: className })}
+>
+  {#each items as item}
+    <div data-description-item class={slots.item()}>
+      <dt class={slots.term()}>
+        {#if typeof item.term === "string"}{item.term}{:else}{@render item.term()}{/if}
+      </dt>
+      <dd class={slots.detail()}>
+        {#if typeof item.detail === "string"}{item.detail}{:else}{@render item.detail()}{/if}
+      </dd>
+    </div>
+  {/each}
+</dl>

package/vendor/ds/kits/base/src/Dialog.svelte

@@ -0,0 +1,143 @@
+<!--
+  A modal Dialog on the platform's top-layer <dialog> (ADR 0017).
+
+  `showModal()` already renders above every stacking context and makes the rest
+  of the document inert, so the DS owns only what the platform leaves open: a
+  controllable `open`, labelling, focus entry and return, light dismiss, and
+  scroll containment. The trigger is optional — omit `triggerLabel` and drive
+  `bind:open` from a menu item, a command or a route instead.
+-->
+
+
+<script lang="ts">
+  import { createModalController } from "./core/modal";
+  import type { DialogContract } from "./core/contracts/dialog";
+  import { untrack, type Snippet } from "svelte";
+  import type { HTMLDialogAttributes } from "svelte/elements";
+  import { button } from "./button.variants";
+  import { dialog as dialogAppearance, dialogClose, type DialogSize } from "./dialog.variants";
+
+  interface Props extends DialogContract, Omit<HTMLDialogAttributes, keyof DialogContract | "aria-describedby" | "aria-labelledby" | "class"> {
+    /** Replaces the visible title and default close control with a caller-owned header. The required title remains the accessible name; the header receives the canonical close operation. A custom header keeps the body in its own scrolling region. */
+    header?: Snippet<[{ close: () => void }]>;
+    /**
+     * Optional custom trigger content; `triggerLabel` remains its accessible name. Words it shows
+     * must appear, in order, in `triggerLabel`, ideally first (WCAG 2.5.3, Label in Name).
+     */
+    trigger?: Snippet;
+    /** Dialog body. */
+    children?: Snippet;
+    /** Optional action region with the canonical close operation. */
+    actions?: Snippet<[{ close: () => void }]>;
+    /** Called whenever the Dialog opens or closes, by any path. */
+    onopenchange?: (open: boolean) => void;
+    /** Extra classes merged onto the modal surface. */
+    class?: string;
+  }
+
+  let {
+    triggerLabel,
+    title,
+    description,
+    header,
+    trigger,
+    children,
+    actions,
+    initialFocus = "body",
+    showClose = true,
+    open = $bindable(false),
+    onopenchange,
+    dismissible = true,
+    size = "md",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const uid = $props.id();
+  const titleId = `${uid}-title`;
+  const descriptionId = `${uid}-description`;
+
+  let dialog: HTMLDialogElement | undefined = $state();
+  let controller = $state<ReturnType<typeof createModalController>>();
+  $effect(() => {
+    if (!dialog) return;
+    const next = createModalController(dialog, { initialFocus: () => initialFocus, dismissible: () => dismissible, requestOpen: setOpen });
+    controller = next;
+    return () => next.destroy();
+  });
+  function apply(next: boolean) { controller?.sync(next); }
+
+  function setOpen(next: boolean): void {
+    const changed = open !== next;
+    open = next;
+    apply(next);
+    if (changed) onopenchange?.(next);
+  }
+
+  function close(): void {
+    setOpen(false);
+  }
+
+  // A caller that drives `bind:open` from outside reaches the element here;
+  // the DS's own trigger, close control and keys apply it synchronously above.
+  $effect(() => {
+    const wanted = open;
+    const lifecycle = controller;
+    untrack(() => lifecycle?.sync(wanted));
+  });
+
+</script>
+
+{#if triggerLabel}
+  <button
+    type="button"
+    data-dialog-trigger
+    aria-label={triggerLabel}
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    class={button({ variant: "secondary", size: "sm" })}
+    onclick={() => setOpen(true)}
+  >
+    {#if trigger}{@render trigger()}{:else}{triggerLabel}{/if}
+  </button>
+{/if}
+
+<dialog
+  bind:this={dialog}
+  {...(rest as Record<string, unknown>)}
+  aria-modal="true"
+  aria-labelledby={titleId}
+  aria-describedby={description ? descriptionId : undefined}
+  class={dialogAppearance({ size, class: [header ? "open:flex open:flex-col overflow-hidden" : "", className].filter(Boolean).join(" ") })}
+  tabindex="-1"
+>
+  <h2
+    id={titleId}
+    data-dialog-title
+    class={[
+      header ? "sr-only" : "text-heading",
+      showClose && "pr-[var(--reddb-spatial-control-height-md)]",
+    ]}
+  >{title}</h2>
+  {#if header}<div data-dialog-header class="shrink-0">{@render header({ close })}</div>{/if}
+  {#if description}
+    <p id={descriptionId} data-dialog-description class="mt-[var(--reddb-spatial-gap-sm)] text-ink-muted">
+      {description}
+    </p>
+  {/if}
+  {#if showClose && !header}
+    <button
+      type="button"
+      data-dialog-close
+      aria-label={`Close ${title}`}
+      class={button({ variant: "ghost", size: "sm", class: dialogClose() })}
+      onclick={close}><span aria-hidden="true">×</span></button
+    >
+  {/if}
+  {#if children}
+    <div data-dialog-body class={header ? "min-h-0 flex-1 overflow-y-auto" : "mt-[var(--reddb-spatial-gap-lg)]"}>{@render children()}</div>
+  {/if}
+  {#if actions}
+    <div data-dialog-actions>{@render actions({ close })}</div>
+  {/if}
+</dialog>