@reddb-io/ui-kit 0.3.4 → 0.3.6

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

@@ -0,0 +1,203 @@
+<!-- A closed choice control with search inside its Popover and optional multiple selection. -->
+<script lang="ts">
+  import { portalAppearance } from "./portal-appearance.svelte";
+  import type { SearchSelectContract } from "./core/contracts/searchselect";
+  import { tick } from "svelte";
+  import { focusMovedOutside } from "./core/focus-scope";
+  import { Combobox as Bits, Popover } from "bits-ui";
+  import Field from "./Field.svelte";
+  import Button from "./Button.svelte";
+  import { input } from "./input.variants";
+  import { popover } from "./popover.variants";
+  import type { InputSize } from "./input.variants";
+  import { searchSelect, searchSelectOptions, type SearchSelectOption } from "./search-select.variants";
+
+  interface Common extends SearchSelectContract {
+    /** Extra classes merged onto the Field root. */
+    class?: string;
+    /** Called when the Popover opens or closes. */
+    onopenchange?: (open: boolean) => void;
+  }
+  interface Single extends Common {
+    /** Enable multiple selection and removable chips. Defaults to false. */
+    multiple?: false;
+    /** Selected string in single mode, or string array in multiple mode; use bind:value. */
+    value?: string;
+    /** Called with a string in single mode or string array in multiple mode, including clearing and chip removal. */
+    onvaluechange?: (value: string) => void;
+  }
+  interface Multiple extends Common {
+    /** Enable multiple selection and removable chips. */
+    multiple: true;
+    /** Selected values; use bind:value to keep them synchronized. */
+    value?: string[];
+    /** Called with selected values after selection, removal or clearing. */
+    onvaluechange?: (value: string[]) => void;
+  }
+  type Props = Single | Multiple;
+
+  let {
+    label, options, multiple = false, value = $bindable(multiple ? [] : ""), name,
+    help, error, required = false, disabled = false,
+    placeholder = "Choose an option", searchPlaceholder = "Search options",
+    emptyText = "No matching options", requiredMessage = "Choose at least one option.",
+    clearable = true, open = $bindable(false), controlSize = "md",
+    class: className, triggerClass, contentClass, onvaluechange, onopenchange,
+  }: Props = $props();
+  const styles = searchSelect();
+  const uid = $props.id();
+  const listId = `${uid}-listbox`;
+  let query = $state("");
+  let tabExit = false;
+  let invalid = $state(false);
+  let nativeSelect = $state<HTMLSelectElement>();
+  let anchor = $state<HTMLDivElement>();
+  const selected = $derived(Array.isArray(value) ? value : value ? [value] : []);
+  const selectedLabels = $derived(selected.map(id => options.find(option => option.value === id)?.label ?? id));
+  const summary = $derived(selectedLabels.length > 1 ? `${selectedLabels.length} selected` : selectedLabels[0] ?? placeholder);
+  const filtered = $derived(searchSelectOptions(options, query));
+  const fieldError = $derived(error ?? (invalid && !selected.length ? requiredMessage : undefined));
+
+  $effect(() => { if (!open) query = ""; });
+  $effect(() => { if (disabled && open) changeOpen(false); });
+  $effect(() => {
+    const form = nativeSelect?.form;
+    const reset = () => (invalid = false);
+    form?.addEventListener("reset", reset);
+    return () => form?.removeEventListener("reset", reset);
+  });
+  function nativeChange(event: Event): void {
+    const select = event.currentTarget as HTMLSelectElement;
+    change(multiple ? [...select.selectedOptions].map(option => option.value) : select.value);
+  }
+  function nativeInvalid(event: Event): void {
+    event.preventDefault(); invalid = true;
+    const select = event.currentTarget as HTMLSelectElement;
+    const firstInvalid = select.form ? [...select.form.elements].find(element => "willValidate" in element && (element as HTMLInputElement).willValidate && !(element as HTMLInputElement).validity.valid) : select;
+    if (firstInvalid === select) select.parentElement?.querySelector<HTMLButtonElement>("[data-search-select-trigger]")?.focus();
+  }
+  function change(next: string | string[]): void {
+    value = next;
+    invalid = false;
+    if (multiple) (onvaluechange as ((value: string[]) => void) | undefined)?.(Array.isArray(next) ? next : []);
+    else (onvaluechange as ((value: string) => void) | undefined)?.(typeof next === "string" ? next : "");
+  }
+  function changeOpen(next: boolean): void {
+    open = next;
+    query = "";
+    onopenchange?.(next);
+  }
+  async function choose(next: string | string[]): Promise<void> {
+    const changed = Array.isArray(next) ? next.find(id => !selected.includes(id)) ?? selected.find(id => !next.includes(id)) : next;
+    change(next);
+    if (!multiple) { changeOpen(false); return; }
+    // Bits writes the picked label after reporting selection. Mirror that
+    // write, then clear it so the next search starts with the complete list.
+    query = options.find(option => option.value === changed)?.label ?? "";
+    await tick();
+    query = "";
+  }
+  function searchKeydown(event: KeyboardEvent): void {
+    if (event.key !== "Tab") return;
+    event.stopPropagation();
+    tabExit = !event.shiftKey;
+    if (event.shiftKey) event.preventDefault();
+    else nativeSelect?.parentElement?.querySelector<HTMLButtonElement>("[data-search-select-trigger]")?.focus();
+    if (open) changeOpen(false);
+  }
+  function remove(id: string, event: MouseEvent): void {
+    const current = event.currentTarget as HTMLElement;
+    // Move focus before removing the focused chip, so it never falls to the document body.
+    current.closest("[data-search-select]")?.querySelector<HTMLButtonElement>("[data-search-select-trigger]")?.focus();
+    change(multiple ? selected.filter(candidate => candidate !== id) : "");
+  }
+  function clear(event: MouseEvent): void {
+    (event.currentTarget as HTMLElement).closest("[data-search-select]")?.querySelector<HTMLButtonElement>("[data-search-select-trigger]")?.focus();
+    change(multiple ? [] : "");
+  }
+  const portal = portalAppearance(() => open);
+</script>
+
+<Field {label} {help} error={fieldError} {required} class={styles.root({ class: className })}>
+  {#snippet children(control)}
+    <div class="grid gap-[var(--reddb-spatial-gap-sm)]" data-search-select data-multiple={multiple}>
+      {#if multiple}
+        <select bind:this={nativeSelect} bind:value multiple {name} {disabled} {required} tabindex="-1" aria-hidden="true" class="sr-only" onchange={nativeChange} oninvalid={nativeInvalid}>
+          {@render nativeOptions()}
+        </select>
+      {:else}
+        <select bind:this={nativeSelect} bind:value {name} {disabled} {required} tabindex="-1" aria-hidden="true" class="sr-only" onchange={nativeChange} oninvalid={nativeInvalid}>
+          <option value="">{placeholder}</option>{@render nativeOptions()}
+        </select>
+      {/if}
+      {#snippet nativeOptions()}{#each options as option (option.value)}<option value={option.value} disabled={option.disabled}>{option.label}</option>{/each}{/snippet}
+      <div {...portal.anchor} bind:this={anchor} class={styles.row()}>
+        <Popover.Root bind:open onOpenChange={changeOpen}>
+          <Popover.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} id={control.id} {disabled} size={controlSize}
+                aria-label={`${summary}, ${label}${required ? ", required" : ""}`} aria-describedby={control["aria-describedby"]}
+                aria-invalid={control["aria-invalid"]} aria-errormessage={control["aria-errormessage"]} 
+                class={input({ size: controlSize, class: styles.trigger({ class: triggerClass }) })}
+                onkeydown={(event: KeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); changeOpen(true); } }}
+                data-search-select-trigger>
+                <span class={styles.summary({ class: !selected.length ? styles.placeholder() : undefined })}>{summary}</span>
+                <span aria-hidden="true">⌄</span>
+              </Button>
+            {/snippet}
+          </Popover.Trigger>
+          <Popover.Portal to={portal.container}>
+            <Popover.Content {...portal.attributes} aria-label={label} sideOffset={8} collisionPadding={8} align="start" trapFocus={false} customAnchor={anchor}
+              onCloseAutoFocus={(event) => { if (tabExit || focusMovedOutside(anchor, "[data-search-select-surface]")) event.preventDefault(); tabExit = false; }}
+              class={popover({ class: styles.content({ class: contentClass }) })} data-search-select-surface>
+              {#if multiple}
+                <Bits.Root type="multiple" value={selected} onValueChange={choose} inputValue={query} items={[...options]} open onOpenChange={(next) => { if (!next && open) changeOpen(false); }}>
+                  {@render choices()}
+                </Bits.Root>
+              {:else}
+                <Bits.Root type="single" value={typeof value === "string" ? value : ""} onValueChange={choose} inputValue={query} items={[...options]} allowDeselect={false} open onOpenChange={(next) => { if (!next && open) changeOpen(false); }}>
+                  {@render choices()}
+                </Bits.Root>
+              {/if}
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+        {#if clearable && selected.length}
+          <Button variant="ghost" size={controlSize} {disabled} class={styles.clear()} aria-label={`Clear ${label}`} title={`Clear ${label}`} onclick={clear} data-search-select-clear><span aria-hidden="true">×</span></Button>
+        {/if}
+      </div>
+      {#if multiple && selected.length}
+        <ul class={styles.chips()} aria-label={`Selected ${label}`}>
+          {#each selected as id, index (id)}
+            <li class="min-w-0 max-w-full">
+              <Button variant="secondary" size="sm" class={styles.chip()} {disabled} aria-label={`${selectedLabels[index]}, remove from ${label}`} onclick={(event: MouseEvent) => remove(id, event)} data-search-select-chip>
+                <span class="min-w-0 truncate">{selectedLabels[index]}</span><span aria-hidden="true">×</span>
+              </Button>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      <span class="sr-only" role="status">{selectedLabels.length ? selectedLabels.join(", ") : "No options selected"}</span>
+    </div>
+    {#snippet choices()}
+      <Bits.Input aria-label={`Search ${label}`} aria-controls={listId} placeholder={searchPlaceholder} class={input({ size: controlSize, class: styles.search() })} onkeydown={searchKeydown}
+        oninput={(event) => (query = event.currentTarget.value)}>
+        {#snippet child({ props })}
+          <input {...props} aria-expanded={filtered.length > 0} aria-controls={filtered.length ? listId : undefined} aria-activedescendant={filtered.length && typeof props["aria-activedescendant"] === "string" ? props["aria-activedescendant"] : undefined} />
+        {/snippet}
+      </Bits.Input>
+      {#if filtered.length}
+      <Bits.ContentStatic id={listId} aria-label={label} class={styles.list()} onEscapeKeydown={(event) => { event.preventDefault(); changeOpen(false); }}>
+        <Bits.Viewport>
+          {#each filtered as option (option.value)}
+            <Bits.Item value={option.value} label={option.label} disabled={option.disabled} aria-disabled={option.disabled || undefined} class={styles.item()}>
+              <span class={styles.option()}>{option.label}{#if option.description}<span class={styles.description()}>{option.description}</span>{/if}</span>
+              {#if selected.includes(option.value)}<span aria-hidden="true">✓</span><span class="sr-only">Selected</span>{/if}
+            </Bits.Item>
+          {/each}
+        </Bits.Viewport>
+      </Bits.ContentStatic>
+      {:else}<span class={styles.empty()} role="status">{emptyText}</span>{/if}
+    {/snippet}
+  {/snippet}
+</Field>

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

@@ -0,0 +1,59 @@
+<!-- A section title whose outline depth and visual size are separate decisions. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    sectionHeading,
+    type SectionHeadingLevel,
+    type SectionHeadingSize,
+  } from "./section-heading.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "class" | "title"> {
+    /** The heading text, rendered in the `h1` to `h6` element that `level` selects. */
+    title: string;
+    /** Optional supporting paragraph shown under the title; omitted when empty. */
+    description?: string;
+    /** Optional id for the rendered heading, for an enclosing landmark's aria-labelledby. */
+    titleId?: string;
+    /**
+     * Outline depth from `1` to `6`, choosing the heading element independently of `size`.
+     * Defaults to `2`.
+     */
+    level?: SectionHeadingLevel;
+    /**
+     * Visual size of the title: `sm`, `md`, `lg` or the Theme's `display` role, independent of
+     * `level`. Defaults to `md`.
+     */
+    size?: SectionHeadingSize;
+    /** Whether a divider is drawn under the heading and its spacing kept. Defaults to `true`. */
+    rule?: boolean;
+    /** Trailing controls, such as Buttons, placed at the inline end of the heading. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    title,
+    description,
+    titleId,
+    level = 2,
+    size = "md",
+    rule = true,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(sectionHeading({ size, rule }));
+</script>
+
+<div {...rest} data-section-heading class={slots.root({ class: className })}>
+  <div class={slots.text()}>
+    <svelte:element this={`h${level}`} id={titleId} data-section-heading-title class={slots.title()}>{title}</svelte:element>
+    {#if description}<p data-section-heading-description class={slots.description()}>{description}</p>{/if}
+  </div>
+  {#if actions}
+    <div class={slots.actions()}>{@render actions()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,56 @@
+<!-- A divider between parts of a deck: eyebrow, display title and an optional summary (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 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 section's title, set in the display role. */
+    title: string;
+    /** A micro-label above the title, such as "Part 2". */
+    eyebrow?: string;
+    /** One line on what the section covers, in the heading role and secondary ink. */
+    summary?: string;
+    /** The title's outline level. Defaults to 2. */
+    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,
+    summary,
+    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-section-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 summary}<p data-slide-summary class={slots.lede()}>{summary}</p>{/if}
+    </div>
+  </div>
+</SlideFrame>

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

@@ -0,0 +1,95 @@
+<!--
+  Select — the canonical Base choice control.
+
+  The options belong to the caller, while the platform keeps the popup,
+  keyboard interaction, focus, selection, validation and form semantics.
+-->
+<script module lang="ts">
+  export type { SelectOption } from "./core/choices";
+</script>
+
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { afterFormReset } from "./core/native-controls";
+  import { readSelectValue, type SelectOption } from "./core/choices";
+  import { checkFieldName, getFieldContext } from "./a11y";
+  import type { Snippet } from "svelte";
+  import type { HTMLSelectAttributes } from "svelte/elements";
+  import { select, type SelectSize } from "./select.variants";
+
+  interface Props extends Omit<HTMLSelectAttributes, "children" | "class" | "value"> {
+    /** The native option and optgroup content. */
+    children?: Snippet;
+    /** Flat caller-owned choices for compositions that do not need custom option markup. */
+    options?: readonly SelectOption[];
+    /** The native select, available for imperative focus. */
+    ref?: HTMLSelectElement;
+    /** Current native value, bindable for canonical compositions. */
+    value?: HTMLSelectAttributes["value"];
+    /** Initial uncontrolled native value, including arrays for multiple selection. */
+    defaultValue?: HTMLSelectAttributes["value"];
+    /** Called with the newly selected value (ADR 0026's value dialect); the native `onchange` still receives the Event. */
+    onvaluechange?: (value: string) => void;
+    /**
+     * The control height step, matching Button's `size` (default `md`). Named
+     * apart from the native `size` attribute, which is still spread through.
+     */
+    controlSize?: SelectSize;
+    /** Extra classes, merged over the canonical appearance. */
+    class?: string;
+  }
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    defaultValue,
+    onvaluechange,
+    onchange,
+    children,
+    options = [],
+    controlSize = "md",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const initial = untrack(() => value ?? defaultValue);
+  let local = $state(initial);
+  let element = $state<HTMLSelectElement>();
+  $effect(() => { if (ref !== element) ref = element; });
+  $effect(() => {
+    options; children;
+    if (!element || initial === undefined) return;
+    const selected = new Set((Array.isArray(initial) ? initial : [initial]).map(String));
+    // Native reset uses defaultSelected, including for caller-owned optgroups.
+    for (const option of element.options) option.defaultSelected = selected.has(option.value);
+  });
+  $effect(() => {
+    rest.form;
+    return afterFormReset(element?.form, () => {
+      if (element) { local = readSelectValue(element); value = local; }
+    });
+  });
+
+  // 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("Select", ref);
+  });
+</script>
+
+<select
+  {...rest}
+  bind:this={element}
+  bind:value={() => value ?? local, next => { local = next; value = next; }}
+  onchange={(event) => {
+    const next = event.currentTarget.value;
+    onchange?.(event);
+    onvaluechange?.(next);
+  }}
+  class={select({ size: controlSize, class: className })}>
+  {#each options as option (option.value)}
+    <option value={option.value} disabled={option.disabled}>{option.label}</option>
+  {/each}
+  {@render children?.()}
+</select>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { skeleton, type SkeletonShape } from "./skeleton.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /**
+     * Form of the placeholder: `text` for a line of copy, `rectangle` for a block, `circle` for
+     * an avatar. Defaults to `text`.
+     */
+    shape?: SkeletonShape;
+    /** Optional announcement when this placeholder owns the loading state. */
+    label?: string;
+    /** Extra classes, merged over the placeholder's own, for example to set its size. */
+    class?: string;
+  }
+
+  const {
+    shape = "text",
+    label,
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-skeleton
+  data-shape={shape}
+  class={skeleton({ shape, class: className })}
+  role={label ? "status" : undefined}
+  aria-label={label}
+  aria-live={label ? "polite" : undefined}
+  aria-busy={label ? "true" : undefined}
+  aria-hidden={label ? undefined : "true"}
+></div>

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

@@ -0,0 +1,39 @@
+<!-- A keyboard bypass to the document's canonical main-content landmark. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes, MouseEventHandler } from "svelte/elements";
+  import { focusSkipTarget } from "./core/skip-link";
+  import { skipLink } from "./skip-link.variants";
+
+  interface Props extends Omit<HTMLAnchorAttributes, "class"> {
+    /** In-page destination. Defaults to the shared main-content landmark. */
+    href?: string;
+    /** Extra classes merged onto the focused bypass control. */
+    class?: string;
+    /** Optional local wording; the default is already a complete accessible name. */
+    children?: Snippet;
+  }
+
+  const {
+    href = "#main-content",
+    onclick,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {
+    onclick?.(event);
+    focusSkipTarget(event, href, event.currentTarget.ownerDocument);
+  };
+</script>
+
+<a
+  {...(rest as Record<string, unknown>)}
+  {href}
+  data-skip-link
+  class={skipLink({ class: className })}
+  onclick={handleClick}
+>
+  {#if children}{@render children()}{:else}Skip to main content{/if}
+</a>

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

@@ -0,0 +1,63 @@
+<!--
+  A fixed 16:9 slide (ADR 0027): a size container with a safe title area whose
+  content scales with the frame's own width (see slide-frame.variants.ts).
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { slideFrame, type SlideSurface } from "./slide-frame.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role"> {
+    /** The slide's accessible name, announced with the "slide" role description. */
+    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;
+    /** The slide's content, laid out inside the safe title area of the canvas. */
+    children?: Snippet;
+  }
+
+  const {
+    label,
+    number,
+    total,
+    surface = "background",
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(slideFrame({ surface }));
+  // Read aloud in words; shown as the compact "3 / 8" a slide footer carries.
+  const position = $derived(total === undefined ? `Slide ${number}` : `Slide ${number} of ${total}`);
+  const glyphs = $derived(total === undefined ? `${number}` : `${number} / ${total}`);
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  role="group"
+  aria-roledescription="slide"
+  aria-label={label}
+  data-slide-frame
+  data-slide-surface={surface}
+  data-slide-number={number}
+  data-slide-total={total}
+  class={slots.root({ class: className })}
+>
+  <div data-slide-stage class={slots.stage()}>
+    <div data-slide-safe-area class={slots.safeArea()}>
+      {@render children?.()}
+    </div>
+    {#if number !== undefined}
+      <p data-slide-number-label class={slots.number()}>
+        <span class="sr-only">{position}</span>
+        <span aria-hidden="true">{glyphs}</span>
+      </p>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,107 @@
+<!-- A native range input composed through the canonical Field relationship. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import Field from "./Field.svelte";
+  import { slider } from "./slider.variants";
+  import { rangeValue } from "./core/slider";
+  import { afterFormReset, associatedForm } from "./core/native-controls";
+
+  interface Props extends Omit<HTMLInputAttributes, "children" | "class" | "id" | "max" | "min" | "step" | "type" | "value" | "defaultValue"> {
+    /** Required visible name supplied through Field. */
+    label: string;
+    /** Supporting text announced with the slider. */
+    help?: string;
+    /** Current validation error, announced and associated with the slider. */
+    error?: string;
+    /** Makes the requirement visible on the label and native on the range input. */
+    required?: boolean;
+    /** Explicit id for the range input; otherwise Field generates a stable one. */
+    id?: string;
+    /** Current native numeric value. */
+    value?: number;
+    /** Initial uncontrolled value, restored by native form reset. Defaults to 0. */
+    defaultValue?: number;
+    /** Called with the newly chosen value (ADR 0026's value dialect). */
+    onvaluechange?: (value: number) => void;
+    /** Lowest selectable value; defaults to `0`. */
+    min?: number;
+    /** Highest selectable value; defaults to `100`. */
+    max?: number;
+    /** Increment between selectable values, or `any` for no snapping; defaults to `1`. */
+    step?: number | "any";
+    /** Visible and accessible wording for the current numeric value. */
+    formatValue?: (value: number) => string;
+    /** Extra classes merged onto the range input itself, over its own. */
+    class?: string;
+    /** Extra classes merged onto the Field root that wraps the label and the slider. */
+    fieldClass?: string;
+    /** Extra classes merged onto the live readout of the current value. */
+    outputClass?: string;
+    /** The native range input, bindable for rare imperative access. */
+    ref?: HTMLInputElement;
+  }
+
+  let {
+    label,
+    help,
+    error,
+    required = false,
+    id,
+    value = $bindable(),
+    defaultValue = 0,
+    onvaluechange,
+    min = 0,
+    max = 100,
+    step = 1,
+    formatValue,
+    class: className,
+    fieldClass,
+    outputClass,
+    ref = $bindable(),
+    oninput,
+    ...rest
+  }: Props = $props();
+  let input = $state<HTMLInputElement>();
+  $effect(() => { if (ref !== input) ref = input; });
+  const initial = untrack(() => rangeValue(value ?? defaultValue, min, max, step));
+  let local = $state(initial);
+  const current = $derived(rangeValue(value ?? local, min, max, step));
+  const styles = slider();
+  const formatted = $derived(formatValue ? formatValue(current) : String(current));
+  $effect(() => { if (input && input.valueAsNumber !== current) input.value = String(current); });
+  $effect(() => {
+    return afterFormReset(associatedForm(input, rest.form), () => {
+      local = initial; value = initial;
+      if (input) input.value = String(rangeValue(initial, min, max, step));
+    });
+  });
+</script>
+
+<div class={styles.root()} data-slider>
+  <Field {label} {help} {error} {required} {id} class={fieldClass}>
+    {#snippet children(control)}
+      <input
+        {...rest}
+        {...control}
+        bind:this={input}
+        value={initial}
+        oninput={(event) => {
+          const next = event.currentTarget.valueAsNumber;
+          local = next; value = next;
+          oninput?.(event);
+          onvaluechange?.(next);
+        }}
+        type="range"
+        {min}
+        {max}
+        {step}
+        aria-valuetext={formatValue ? formatted : undefined}
+        class={styles.control({ class: className })}
+      />
+      <output class={styles.output({ class: outputClass })} for={control.id} aria-live="polite">
+        {formatted}
+      </output>
+    {/snippet}
+  </Field>
+</div>