@reddb-io/ui-kit 0.3.4 → 0.3.6

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

@@ -0,0 +1,63 @@
+<!--
+  Textarea — the canonical Base multiline entry.
+
+  It remains a native <textarea>, so rows, wrapping, constraints, validity,
+  form submission, events and focus all stay under the platform contract.
+-->
+<script lang="ts">
+  import { checkFieldName, getFieldContext } from "./a11y";
+  import { untrack } from "svelte";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+  import { textarea } from "./textarea.variants";
+
+  interface Props extends Omit<HTMLTextareaAttributes, "class" | "value"> {
+    /** The current value. Bindable: `bind:value` follows every keystroke. */
+    value?: HTMLTextareaAttributes["value"];
+    /** Called with the new value on every input (ADR 0026's value dialect); the native `oninput` still receives the Event. */
+    onvaluechange?: (value: string) => void;
+    /** The native textarea, available for imperative focus or selection. */
+    ref?: HTMLTextAreaElement;
+    /** Extra classes, merged over the canonical appearance. */
+    class?: string;
+  }
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    class: className,
+    oninput,
+    onvaluechange,
+    ...rest
+  }: Props = $props();
+
+  // As Input: the element owns what was typed; `value` follows it and is written
+  // back only when a caller supplies one.
+  const initial = untrack(() => value);
+
+  function handleInput(event: Event & { currentTarget: EventTarget & HTMLTextAreaElement }): void {
+    value = event.currentTarget.value;
+    oninput?.(event);
+    onvaluechange?.(event.currentTarget.value);
+  }
+
+  $effect(() => {
+    const next = value;
+    if (!ref || next === undefined || next === null) return;
+    if (String(next) !== ref.value) ref.value = String(next);
+  });
+
+  // Wave 5A's accessible-name contract: inside a Field the label owns the
+  // name; anywhere else a mounted control with no name warns in development.
+  const insideField = getFieldContext() !== undefined;
+  $effect(() => {
+    if (!insideField) checkFieldName("Textarea", ref);
+  });
+</script>
+
+<textarea
+  {...rest}
+  value={initial}
+  bind:this={ref}
+  oninput={handleInput}
+  class={textarea({ class: className })}
+></textarea>

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

@@ -0,0 +1,118 @@
+<!-- A segmented clock value composed from the canonical Field and Input. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { possibleTime, segmentDigits } from "./core/date-segments";
+  import { afterFormReset } from "./core/native-controls";
+  import type { TimeFieldContract } from "./core/contracts/timefield";
+  import Field from "./Field.svelte";
+  import Input from "./Input.svelte";
+  import { timeField } from "./time-field.variants";
+
+  interface Props extends TimeFieldContract {
+    /** 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 = possibleTime(initialValue);
+  let publishedValue = initialValue;
+  let hour = $state(initial?.[1] ?? "");
+  let minute = $state(initial?.[2] ?? "");
+  let hourControl = $state<HTMLInputElement>();
+  let minuteControl = $state<HTMLInputElement>();
+  const complete = $derived(possibleTime(`${hour}:${minute}`) !== null);
+  const styles = timeField();
+
+  $effect(() => {
+    if (value === publishedValue) return;
+    const next = possibleTime(value); hour = next?.[1] ?? ""; minute = next?.[2] ?? ""; publishedValue = value;
+  });
+  $effect(() => afterFormReset(hourControl?.form, () => {
+    const next = possibleTime(initialValue); hour = next?.[1] ?? ""; minute = next?.[2] ?? ""; publishedValue = initialValue; value = initialValue;
+  }));
+
+  function publish(): void {
+    const before = value;
+    publishedValue = complete ? `${hour}:${minute}` : "";
+    value = publishedValue;
+    if (value !== before) onvaluechange?.(value);
+  }
+
+  function handleInput(event: Event, segment: "hour" | "minute"): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const next = segmentDigits(input.value, segment);
+
+    input.value = next;
+    if (segment === "hour") hour = next;
+    else minute = next;
+    publish();
+    if (next.length === 2) (segment === "hour" ? minuteControl : undefined)?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent, segment: "hour" | "minute"): void {
+    if (event.key === "ArrowLeft" && segment === "minute") {
+      event.preventDefault();
+      hourControl?.focus();
+    } else if (event.key === "ArrowRight" && segment === "hour") {
+      event.preventDefault();
+      minuteControl?.focus();
+    }
+  }
+</script>
+
+<Field {label} {help} {error} {required} {id} class={styles.root({ class: className })}>
+  {#snippet children(control)}
+    <div class={styles.segments()} data-time-field data-time-segments>
+      <Input
+        {...control}
+        bind:ref={hourControl}
+        type="text"
+        inputmode="numeric"
+        maxlength={2}
+        value={hour}
+        {disabled}
+        aria-label={`${label}, hour`}
+        data-time-segment="hour"
+        class={styles.segment({ class: segmentClass })}
+        oninput={(event) => handleInput(event, "hour")}
+        onkeydown={(event) => handleKeydown(event, "hour")}
+      />
+      <span class={styles.separator()} aria-hidden="true">:</span>
+      <Input
+        bind:ref={minuteControl}
+        id={`${control.id}-minute`}
+        type="text"
+        inputmode="numeric"
+        maxlength={2}
+        value={minute}
+        required={control.required}
+        {disabled}
+        aria-label={`${label}, minute`}
+        aria-describedby={control["aria-describedby"]}
+        aria-invalid={control["aria-invalid"]}
+        aria-errormessage={control["aria-errormessage"]}
+        data-time-segment="minute"
+        class={styles.segment({ class: segmentClass })}
+        oninput={(event) => handleInput(event, "minute")}
+        onkeydown={(event) => handleKeydown(event, "minute")}
+      />
+      {#if name && complete && !disabled}<input type="hidden" {name} {value} />{/if}
+    </div>
+  {/snippet}
+</Field>

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

@@ -0,0 +1,81 @@
+<!-- An ordered pair of canonical TimeFields under one native Fieldset. -->
+<script lang="ts">
+  import type { TimeRangeFieldContract } from "./core/contracts/timerangefield";
+  import Fieldset from "./Fieldset.svelte";
+  import TimeField from "./TimeField.svelte";
+  import { timeRangeField } from "./time-range-field.variants";
+
+  interface Props extends TimeRangeFieldContract {
+    /** 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 time cannot be before start time.",
+    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 = timeRangeField();
+</script>
+
+<Fieldset
+  legend={label}
+  {disabled}
+  class={styles.root({ class: className })}
+  data-time-range-field
+  aria-describedby={describedBy}
+  aria-invalid={inverted ? "true" : undefined}
+>
+  <div class={styles.frame()} data-range-field-frame>
+    <div class={styles.fields()} data-time-range-fields>
+      <TimeField
+        label={startLabel}
+        name={startName}
+        bind:value={startValue}
+        onvaluechange={(start) => onvaluechange?.({ start, end: endValue })}
+        id={`${idPrefix}-start`}
+        {required}
+        {disabled}
+        class={fieldClass}
+        {segmentClass}
+      />
+      <TimeField
+        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/Timeline.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  export type { TimelineItem } from "./core/timeline";
+</script>
+
+<script lang="ts">
+  import type { TimelineItem } from "./core/timeline";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Link from "./Link.svelte";
+  import { timeline } from "./timeline.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLOListElement>, "class"> {
+    /**
+     * The entries in display order; each has a `title`, a machine-readable `datetime`, visible
+     * `time` text, and optionally a `description` and an `href` that makes the title a link.
+     */
+    items: readonly TimelineItem[];
+    /** Accessible name of the list; defaults to `Timeline`. */
+    label?: string;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  let { items, label = "Timeline", class: className, ...rest }: Props = $props();
+  const slots = $derived(timeline());
+</script>
+
+<ol
+  {...(rest as Record<string, unknown>)}
+  data-timeline
+  aria-label={label}
+  class={slots.root({ class: className })}
+>
+  {#each items as item (item.id)}
+    <li data-timeline-item class={slots.item()}>
+      <span aria-hidden="true" class={slots.marker()}></span>
+      <span class={slots.content()}>
+        <time datetime={item.datetime} class={slots.time()}>{item.time}</time>
+        {#if item.href !== undefined}
+          <Link href={item.href} class={slots.title()}>{item.title}</Link>
+        {:else}
+          <span class={slots.title()}>{item.title}</span>
+        {/if}
+        {#if item.description !== undefined}
+          <p class={slots.description()}>{item.description}</p>
+        {/if}
+      </span>
+    </li>
+  {/each}
+</ol>

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

@@ -0,0 +1,63 @@
+<!-- The opening slide of a deck: eyebrow, display title, subtitle and presenter line (ADR 0027). -->
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import Eyebrow from "./Eyebrow.svelte";
+  import Heading from "./Heading.svelte";
+  import SlideFrame from "./SlideFrame.svelte";
+  import Text from "./Text.svelte";
+  import type { HeadingLevel } from "./heading.variants";
+  import type { SlideSurface } from "./slide-frame.variants";
+  import { slideLayout } from "./slide-layout.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "title"> {
+    /** The deck's title, set in the display role. */
+    title: string;
+    /** A micro-label above the title, such as the event or the series. */
+    eyebrow?: string;
+    /** One line under the title, in the heading role and secondary ink. */
+    subtitle?: string;
+    /** Who presents and when, at the foot of the slide. */
+    presenter?: string;
+    /** The title's outline level. Defaults to 2, so a page heading can sit above the deck. */
+    level?: HeadingLevel;
+    /** The slide's accessible name. Defaults to `title`. */
+    label?: string;
+    /** The slide's position in its deck, shown in the bottom margin when given. */
+    number?: number;
+    /** How many slides the deck has; shown after `number` when both are given. */
+    total?: number;
+    /** The ground the slide is set on: the page `background` (default) or the `raised` elevation. */
+    surface?: SlideSurface;
+    /** Extra classes merged onto the frame. */
+    class?: string;
+  }
+
+  const {
+    title,
+    eyebrow,
+    subtitle,
+    presenter,
+    level = 2,
+    label,
+    number,
+    total,
+    surface = "background",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = slideLayout();
+</script>
+
+<SlideFrame {...rest} label={label ?? title} {number} {total} {surface} class={className} data-title-slide>
+  <div class={slots.body()}>
+    <div class={slots.header({ class: slots.centred() })}>
+      {#if eyebrow}<Eyebrow>{eyebrow}</Eyebrow>{/if}
+      <Heading {level} role="display">{title}</Heading>
+      {#if subtitle}<p data-slide-subtitle class={slots.lede()}>{subtitle}</p>{/if}
+    </div>
+    {#if presenter}
+      <Text data-slide-presenter ink="muted" class={slots.foot()}>{presenter}</Text>
+    {/if}
+  </div>
+</SlideFrame>

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

@@ -0,0 +1,78 @@
+<!-- A pressed-state control composed from the canonical native Button. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { nextPressed } from "./core/native-controls";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import Button from "./Button.svelte";
+  import { toggleButton } from "./toggle-button.variants";
+
+  interface Props extends Omit<HTMLButtonAttributes, "aria-pressed" | "children" | "class" | "onclick" | "type"> {
+    /** Required visible and accessible control name. */
+    label: string;
+    /** Current pressed state, bindable for controlled consumers. */
+    pressed?: boolean;
+    /** Initial uncontrolled state; later changes do not replace the user's choice. */
+    defaultPressed?: boolean;
+    /** Group composition can prohibit removing its sole selection. */
+    allowUnpress?: boolean;
+    /** Disables the button, so activation neither changes `pressed` nor reports a change. */
+    disabled?: boolean;
+    /** Extra classes merged onto the underlying Button, over the pressed-state styling. */
+    class?: string;
+    /**
+     * Optional visual content; `label` remains the stable accessible name, so words it shows must
+     * appear, in order, in `label`, ideally first (WCAG 2.5.3, Label in Name).
+     */
+    children?: Snippet;
+    /**
+     * Called with the click event after the pressed state has been updated; skipped while
+     * disabled.
+     */
+    onclick?: HTMLButtonAttributes["onclick"];
+    /** Called with the next pressed state when activation changes it (ADR 0026). */
+    onpressedchange?: (pressed: boolean) => void;
+  }
+
+  let {
+    label,
+    pressed = $bindable(),
+    defaultPressed = false,
+    allowUnpress = true,
+    disabled = false,
+    class: className,
+    children,
+    onclick,
+    onpressedchange,
+    ...rest
+  }: Props = $props();
+
+  const initial = untrack(() => defaultPressed);
+  let local = $state(initial);
+  const current = $derived(pressed ?? local);
+
+  function activate(event: MouseEvent): void {
+    if (disabled) return;
+    const next = nextPressed(current, allowUnpress);
+    if (next !== current) {
+      local = next;
+      pressed = next;
+      onpressedchange?.(next);
+    }
+    onclick?.(event as Parameters<NonNullable<HTMLButtonAttributes["onclick"]>>[0]);
+  }
+</script>
+
+<Button
+  {...rest}
+  {disabled}
+  variant="secondary"
+  class={toggleButton({ pressed: current, class: className })}
+  aria-pressed={current}
+  aria-label={children ? label : undefined}
+  data-state={current ? "on" : "off"}
+  data-toggle-button
+  onclick={activate}
+>
+  {#if children}{@render children()}{:else}{label}{/if}
+</Button>

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

@@ -0,0 +1,79 @@
+<!-- Exactly one pressed option, composed from canonical Fieldset and ToggleButton. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { afterFormReset, associatedForm } from "./core/native-controls";
+  import { toggleGroupTarget, toggleGroupValue, type ToggleGroupContract } from "./core/toggle-group";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import Fieldset from "./Fieldset.svelte";
+  import ToggleButton from "./ToggleButton.svelte";
+  import { toggleGroup, type ToggleGroupOption } from "./toggle-group.variants";
+
+  interface Props extends ToggleGroupContract, Omit<HTMLFieldsetAttributes, "children" | "class" | "name" | "disabled"> {
+    /** Extra classes merged onto the native fieldset. */
+    class?: string;
+    /** Called with a newly selected option; reset does not emit a user change. */
+    onvaluechange?: (value: string) => void;
+  }
+
+  let {
+    legend,
+    options,
+    value = $bindable(),
+    defaultValue,
+    name,
+    disabled = false,
+    help,
+    error,
+    class: className,
+    listClass,
+    optionClass,
+    onvaluechange,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(toggleGroup({ invalid: Boolean(error) }));
+  const initial = untrack(() => value ?? defaultValue);
+  let local = $state(initial);
+  const selected = $derived(toggleGroupValue(options, value ?? local));
+  let element = $state<HTMLFieldSetElement>();
+  let list: HTMLDivElement;
+  $effect(() => afterFormReset(associatedForm(element, rest.form), () => { local = initial; value = initial; }));
+
+  function choose(option: ToggleGroupOption): void {
+    if (disabled || element?.matches(":disabled") || option.disabled || option.value === selected) return;
+    value = option.value;
+    onvaluechange?.(option.value);
+  }
+
+  function move(event: KeyboardEvent, current: number): void {
+    if (disabled || element?.matches(":disabled")) return;
+    const next = toggleGroupTarget(options, current, event.key, getComputedStyle(list).direction === "rtl");
+    if (next === undefined) return;
+    event.preventDefault();
+    choose(options[next]!);
+    list.querySelectorAll<HTMLButtonElement>("button")[next]?.focus();
+  }
+</script>
+
+<Fieldset {...rest} bind:ref={element} {legend} {disabled} {help} {error} class={styles.root({ class: className })} data-toggle-group>
+  {#snippet children(control)}
+    <div bind:this={list} class={styles.list({ class: listClass })} role="group" aria-label={legend}>
+      {#each options as option, index (option.value)}
+        <ToggleButton
+          {...control}
+          label={option.label}
+          pressed={option.value === selected}
+          allowUnpress={false}
+          disabled={disabled || option.disabled}
+          class={styles.option({ class: optionClass })}
+          tabindex={option.value === selected ? 0 : -1}
+          data-toggle-value={option.value}
+          onclick={() => choose(option)}
+          onkeydown={(event) => move(event, index)}
+        />
+      {/each}
+    </div>
+    {#if name}
+      <input type="hidden" {name} value={selected} {disabled} form={rest.form} />
+    {/if}
+  {/snippet}
+</Fieldset>

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

@@ -0,0 +1,109 @@
+<!--
+  A supplemental description whose trigger remains meaningful without it.
+
+  By default the Tooltip renders its own ghost trigger named by `label`. Pass
+  `child` to decorate an element you already have — an icon Button, a link, a
+  table cell — spreading the given props onto it; that element then owns its
+  own accessible name.
+-->
+<script lang="ts">
+  import { portalAppearance } from "./portal-appearance.svelte";
+  import type { TooltipContract } from "./core/contracts/tooltip";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { Tooltip as Bits } from "bits-ui";
+  import { button } from "./button.variants";
+  import { tooltip as tooltipAppearance } from "./tooltip.variants";
+
+  interface Props extends TooltipContract, Omit<HTMLButtonAttributes, keyof TooltipContract | "aria-describedby" | "aria-label" | "class" | "type"> {
+    /** Trigger content. */
+    children?: Snippet;
+    /**
+     * Render your own trigger: spread `props` onto one focusable element. It
+     * receives the Tooltip's event handlers and `aria-describedby`.
+     */
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    /** Extra classes merged onto the trigger. */
+    class?: string;
+  }
+
+  let {
+    label,
+    content,
+    children,
+    // The Bits trigger's own snippet is named `child` too; keep ours distinct.
+    child: childTrigger,
+    class: className,
+    onmouseenter,
+    onmouseleave,
+    ...rest
+  }: Props = $props();
+  const uid = $props.id();
+  const tooltipId = `${uid}-content`;
+  let open = $state(false);
+
+  function handleMouseenter(event: MouseEvent): void {
+    onmouseenter?.(event as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+    open = true;
+  }
+
+  function handleMouseleave(event: MouseEvent): void {
+    onmouseleave?.(event as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+    open = false;
+  }
+  const portal = portalAppearance(() => open);
+</script>
+
+<span {...portal.anchor} data-tooltip-root class="relative inline-flex">
+  <Bits.Provider delayDuration={0}>
+    <Bits.Root bind:open delayDuration={0} disabled={Boolean(rest.disabled)}>
+      <Bits.Trigger
+        {...(rest as Record<string, unknown>)}
+        disabled={Boolean(rest.disabled)}
+        onmouseenter={handleMouseenter}
+        onmouseleave={handleMouseleave}
+      >
+        {#snippet child({ props })}
+          {#if childTrigger}
+            {@render childTrigger({ props: { ...props, "data-tooltip-trigger": "" } })}
+          {:else}
+            <button
+              {...props}
+              type="button"
+              data-tooltip-trigger
+              aria-label={label}
+              class={button({ variant: "ghost", size: "sm", class: className })}
+            >
+              {#if children}{@render children()}{:else}{label}{/if}
+            </button>
+          {/if}
+        {/snippet}
+      </Bits.Trigger>
+
+      {#if open}
+        <Bits.Portal to={portal.container}>
+          <Bits.Content
+            id={tooltipId}
+            side="top"
+            align="center"
+            sideOffset={8}
+            avoidCollisions={true}
+            collisionPadding={8}
+          >
+            {#snippet child({ props, wrapperProps })}
+              <div {...wrapperProps} {...portal.attributes}>
+                <span
+                  {...props}
+                  id={tooltipId}
+                  data-tooltip-surface
+                  role="tooltip"
+                  class={tooltipAppearance()}
+                >{content}</span>
+              </div>
+            {/snippet}
+          </Bits.Content>
+        </Bits.Portal>
+      {/if}
+    </Bits.Root>
+  </Bits.Provider>
+</span>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { transfer } from "./transfer.variants";
+  import { transferPresentation } from "./core/operational-motion";
+  import type { TransferContract } from "./core/contracts/transfer";
+  interface Props extends TransferContract {}
+  let {
+    fromId,
+    toId,
+    trigger,
+    duration = 400,
+    paused = false,
+  }: Props = $props();
+  let host: HTMLSpanElement;
+  let initial = true;
+  let previous: string | number | undefined;
+  $effect(() => {
+    const key = trigger;
+    if (initial) {
+      initial = false;
+      previous = key;
+      return;
+    }
+    const changed = key !== previous;
+    previous = key;
+    if (changed && !paused && host)
+      return transferPresentation(host, fromId, toId, duration);
+  });
+</script>
+
+<span bind:this={host!} data-transfer aria-hidden="true" class={transfer()}
+></span>