@reddb-io/ui-kit 0.3.4 → 0.3.6

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

@@ -0,0 +1,104 @@
+<!-- A native file control composed through canonical Field and Input, with
+     selected filenames kept as visible polite feedback. -->
+<script lang="ts">
+  import { afterFormReset, fileNames } from "./core/native-controls";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import Field from "./Field.svelte";
+  import Input from "./Input.svelte";
+  import { fileInput } from "./file-input.variants";
+
+  interface Props extends Omit<HTMLInputAttributes, "children" | "class" | "id" | "required" | "type" | "value" | "defaultValue"> {
+    /** The required visible accessible name supplied through Field. */
+    label: string;
+    /** Supporting text announced with the file control. */
+    help?: string;
+    /** Current validation error announced with the file control. */
+    error?: string;
+    /** Makes the requirement visible and native. */
+    required?: boolean;
+    /** Explicit control id; otherwise Field supplies a stable generated one. */
+    id?: string;
+    /** Native files; bind:files follows selection, and FileList/null sets or clears it. */
+    files?: FileList | null;
+    /** Called with the native FileList after user selection. */
+    onfileschange?: (files: FileList | null) => void;
+    /** The native file input for imperative focus or file inspection. */
+    ref?: HTMLInputElement;
+    /** Extra classes merged onto the native file control. */
+    class?: string;
+    /** Extra classes merged onto the containing Field. */
+    fieldClass?: string;
+  }
+
+  let {
+    label,
+    help,
+    error,
+    required = false,
+    id,
+    ref = $bindable(),
+    files = $bindable(),
+    onfileschange,
+    class: className,
+    fieldClass,
+    multiple = false,
+    onchange,
+    ...rest
+  }: Props = $props();
+
+  let element = $state<HTMLInputElement>();
+  let selectedNames = $state<string[]>([]);
+  const styles = fileInput();
+
+  function handleChange(event: Event): void {
+    const input = event.currentTarget as HTMLInputElement;
+    files = input.files;
+    selectedNames = fileNames(input.files);
+    onfileschange?.(input.files);
+    onchange?.(
+      event as Parameters<NonNullable<HTMLInputAttributes["onchange"]>>[0],
+    );
+  }
+  $effect(() => { if (ref !== element) ref = element; });
+
+  $effect(() => {
+    if (!element || files === undefined) return;
+    if (files === null) element.value = "";
+    else if (element.files !== files) element.files = files;
+    selectedNames = fileNames(files);
+  });
+
+  $effect(() => {
+    // Changing the native form target must move the reset listener too.
+    rest.form;
+    return afterFormReset(element?.form, () => {
+      files = null;
+      selectedNames = [];
+    });
+  });
+</script>
+
+<div class={styles.root()} data-file-input>
+  <Field {label} {help} {error} {required} {id} class={styles.field({ class: fieldClass })}>
+    {#snippet children(control)}
+      <Input
+        {...rest}
+        {...control}
+        bind:ref={element}
+        type="file"
+        {multiple}
+        onchange={handleChange}
+        class={styles.control({ class: className })}
+      />
+    {/snippet}
+  </Field>
+  <p class={styles.filename()} aria-live="polite" data-file-name>
+    {#if selectedNames.length > 0}
+      {selectedNames.join(", ")}
+    {:else if multiple}
+      No files selected
+    {:else}
+      No file selected
+    {/if}
+  </p>
+</div>

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

@@ -0,0 +1,21 @@
+<!-- Native submission scaffold; fields, actions, and business content stay caller-owned. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLFormAttributes } from "svelte/elements";
+  import { form } from "./form.variants";
+
+  interface Props extends Omit<HTMLFormAttributes, "children" | "class"> {
+    /** The native form element for FormData or imperative submission. */
+    ref?: HTMLFormElement;
+    /** Extra classes for a consumer's local arrangement. */
+    class?: string;
+    /** The fields, actions and other content that make up the form. */
+    children?: Snippet;
+  }
+
+  let { ref = $bindable(), class: className, children, ...rest }: Props = $props();
+</script>
+
+<form {...rest} bind:this={ref} class={form({ class: className })}>
+  {@render children?.()}
+</form>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import List from "./List.svelte";
+  import { gridList, type GridListColumn } from "./grid-list.variants";
+  import { list as listAppearance, type ListGap } from "./list.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "class"> {
+    /**
+     * Most columns the list may use, `1` to `4` (default `1`); it uses fewer as its own width
+     * narrows.
+     */
+    columns?: GridListColumn;
+    /** Density-owned space between items: `sm`, `md` (the default) or `lg`. */
+    gap?: ListGap;
+    /**
+     * Whether the grid is a list (default `true`): a `<ul>` whose children are `li` elements. Set
+     * `false` for a plain layout grid of blocks that are not list items (KPI tiles, Cards): it
+     * renders a `div` with the same columns and gap, and no list semantics (wave 5A).
+     */
+    list?: boolean;
+    /** Extra classes merged onto the list element. */
+    class?: string;
+    /** The items: `li` elements while `list` is true (a `<ul>` admits no other child), any blocks when it is `false`. */
+    children?: Snippet;
+  }
+
+  let {
+    columns = 1,
+    gap = "md",
+    list = true,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if list}
+  <List {...rest} data-grid-list {gap} class={gridList({ columns, class: className })}>
+    {@render children?.()}
+  </List>
+{:else}
+  <!-- The same grid without list semantics: a <ul> admits only <li> children. -->
+  <div
+    {...(rest as Record<string, unknown>)}
+    data-grid-list
+    class={listAppearance({ gap, class: gridList({ columns, class: className }) })}
+  >
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,41 @@
+<!-- A heading whose outline level and type role are separate decisions (ADR 0025). -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    defaultHeadingRole,
+    heading,
+    type HeadingLevel,
+    type HeadingRole,
+  } from "./heading.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "class" | "role"> {
+    /** Document outline depth: renders `h1`…`h6`. */
+    level?: HeadingLevel;
+    /**
+     * The Theme type role it reads as — independent of `level`. Defaults to
+     * `title` at level 1 and `heading` below it.
+     */
+    role?: HeadingRole;
+    /** Extra classes merged onto the heading element. */
+    class?: string;
+    /** The heading text or inline content. */
+    children: Snippet;
+  }
+
+  const { level = 2, role, class: className, children, ...rest }: Props = $props();
+
+  const resolvedRole = $derived(role ?? defaultHeadingRole(level));
+  const classes = $derived(heading({ role: resolvedRole, class: className }));
+</script>
+
+<!-- One static element per level, never `<svelte:element>`: before Svelte 5.57.2
+     a dynamic element is detached and re-inserted while it hydrates, which the
+     browser counts as a new paint, so a heading that is the page's Largest
+     Contentful Paint would be painted again only once the JavaScript has run. -->
+{#if level === 1}<h1 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h1>
+{:else if level === 2}<h2 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h2>
+{:else if level === 3}<h3 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h3>
+{:else if level === 4}<h4 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h4>
+{:else if level === 5}<h5 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h5>
+{:else}<h6 {...rest} data-heading data-type-role={resolvedRole} class={classes}>{@render children()}</h6>{/if}

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

@@ -0,0 +1,75 @@
+<!-- The only sanctioned seam between a Kit component and a lucide glyph. -->
+<script lang="ts" module>
+  import type { LucideProps } from "@lucide/svelte";
+  import type { Component } from "svelte";
+
+  /*! @license Built-in menu geometry: Copyright (c) 2026 Lucide Icons and Contributors.
+   * Permission to use, copy, modify, and/or distribute this software for any
+   * purpose with or without fee is hereby granted, provided that the above
+   * copyright notice and this permission notice appear in all copies.
+   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+   * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+   * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+   * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+   * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+   * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+   * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+   */
+
+  export { ICON_SIZES, ICON_COLORS, type IconSize, type IconColor } from "./core/icon";
+  import { iconColor, iconDimension, type IconColor, type IconSize, type DeprecatedIconColor } from "./core/icon";
+  import { warnDeprecated } from "./deprecation";
+
+  export type IconGlyphProps = LucideProps;
+  export type IconGlyph = Component<IconGlyphProps>;
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props
+    extends Omit<
+      SVGAttributes<SVGSVGElement>,
+      "color" | "height" | "stroke" | "stroke-width" | "width"
+    > {
+    /** A consumer-supplied Lucide glyph, or the built-in menu glyph used by navigation without loading the optional icon package. */
+    icon: IconGlyph | "menu";
+    /** Density-responsive DS size. */
+    size?: IconSize;
+    /**
+     * Semantic Theme color; raw color values are deliberately not accepted.
+     * `current` inherits the surrounding ink, so a glyph follows its control's
+     * hover and selected states or a caller's token-backed text class.
+     * `muted` is a deprecated alias that draws in `ink-muted` for one release.
+     */
+    color?: IconColor | DeprecatedIconColor;
+  }
+
+  let {
+    icon: Glyph,
+    size = "md",
+    color = "foreground",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const dimension = $derived(iconDimension(size));
+  const resolvedColor = $derived(iconColor(color));
+  // Keep the public seam exact (`IconGlyph` is Lucide's own props) while
+  // preventing Svelte's template checker from expanding the complete SVG
+  // attribute union at this dynamic component boundary.
+  const RenderGlyph = $derived(Glyph as Component<Record<string, unknown>>);
+
+  $effect(() => {
+    if (color === "muted") warnDeprecated("Icon", 'color="muted"', 'color="ink-muted"');
+  });
+</script>
+
+{#if Glyph === "menu"}
+  <!-- Geometry: Lucide menu, @lucide/svelte 1.52.0 (ISC). -->
+  <svg {...rest} data-icon width={dimension} height={dimension} viewBox="0 0 24 24" fill="none" stroke={resolvedColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className}>
+    <path d="M4 5h16" /><path d="M4 12h16" /><path d="M4 19h16" />
+  </svg>
+{:else}
+  <RenderGlyph {...rest} data-icon size={dimension} color={resolvedColor} strokeWidth={2} class={className} />
+{/if}

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

@@ -0,0 +1,133 @@
+<!--
+  A picture that reserves its box, names its alternative and loads at the
+  priority the caller states. The DS never resizes or re-encodes: the
+  application's asset pipeline writes the variants, and the Image accepts the
+  URLs (srcset, picture sources) and the intrinsic size that pipeline produced.
+-->
+<script module lang="ts">
+  export type { ImageAsset, ImageFit, ImagePosition, ImageSource } from "./image.variants";
+</script>
+
+<script lang="ts">
+  import type { HTMLImgAttributes } from "svelte/elements";
+  import {
+    assertImageContract,
+    image,
+    imageRatio,
+    type ImageFit,
+    type ImagePosition,
+    type ImageSource,
+  } from "./image.variants";
+
+  interface Props
+    extends Omit<
+      HTMLImgAttributes,
+      | "alt"
+      | "class"
+      | "decoding"
+      | "fetchpriority"
+      | "height"
+      | "loading"
+      | "sizes"
+      | "src"
+      | "srcset"
+      | "style"
+      | "width"
+    > {
+    /** Fallback URL, used when no `srcset` candidate or `source` applies. */
+    src: string;
+    /**
+     * Text alternative, required. `alt=""` is refused unless `decorative` says the image carries no
+     * information.
+     */
+    alt: string;
+    /** The image carries no information: renders `alt=""`, and `alt` must be empty. */
+    decorative?: boolean;
+    /** Intrinsic width in px of `src`; with `height` it reserves the box before the bytes arrive. */
+    width?: number;
+    /** Intrinsic height in px of `src`; with `width` it reserves the box before the bytes arrive. */
+    height?: number;
+    /**
+     * Width divided by height, reserved when the intrinsic size is unknown (or to crop to another
+     * shape with `fit`). One of `ratio` or `width` and `height` is required.
+     */
+    ratio?: number;
+    /** Width- or density-described candidates of the same picture, from the app's pipeline. */
+    srcset?: string;
+    /** Slot widths the browser uses to pick a `w`-described candidate. */
+    sizes?: string;
+    /**
+     * `<picture>` sources tried in order before the `img` — a modern format (AVIF, then WebP) or an
+     * art-directed crop. Omitted, a bare `img` renders.
+     */
+    sources?: readonly ImageSource[];
+    /**
+     * The Largest Contentful Paint candidate: fetched at high priority, eagerly, and decoded
+     * synchronously. Defaults to `false` — lazy loading and async decoding.
+     */
+    priority?: boolean;
+    /** Overrides the loading strategy `priority` implies; rarely needed. */
+    loading?: "lazy" | "eager";
+    /** How the picture fills its reserved box: `cover` (default) crops, `contain` letterboxes. */
+    fit?: ImageFit;
+    /** The focal point kept in frame when `cover` crops. Defaults to `center`. */
+    position?: ImagePosition;
+    /** Extra classes merged onto the `img`. */
+    class?: string;
+  }
+
+  const {
+    src,
+    alt,
+    decorative = false,
+    width,
+    height,
+    ratio,
+    srcset,
+    sizes,
+    sources = [],
+    priority = false,
+    loading,
+    fit = "cover",
+    position = "center",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const box = $derived.by(() => {
+    assertImageContract({ alt, decorative, width, height, ratio });
+    return imageRatio({ width, height, ratio });
+  });
+  const classes = $derived(image({ fit, position, class: className }));
+</script>
+
+{#snippet img()}
+  <img
+    {...rest}
+    {src}
+    alt={decorative ? "" : alt}
+    {width}
+    {height}
+    {srcset}
+    {sizes}
+    loading={loading ?? (priority ? "eager" : "lazy")}
+    decoding={priority ? "sync" : "async"}
+    fetchpriority={priority ? "high" : undefined}
+    style:aspect-ratio={String(box)}
+    data-image
+    data-image-priority={priority || undefined}
+    class={classes}
+  />
+{/snippet}
+
+{#if sources.length > 0}
+  <!-- The picture adds no box of its own: layout and fit stay the img's. -->
+  <picture data-image-picture class="contents">
+    {#each sources as source (source.srcset)}
+      <source srcset={source.srcset} type={source.type} media={source.media} sizes={source.sizes ?? sizes} />
+    {/each}
+    {@render img()}
+  </picture>
+{:else}
+  {@render img()}
+{/if}

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

@@ -0,0 +1,35 @@
+<!--
+  Indicator — a Base Primitive for placing caller-owned marker content around
+  caller-owned content. It adds no status meaning and no interaction of its
+  own; Badge or StatusIndicator supplies meaning, while the child keeps focus.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { indicator, type IndicatorPosition } from "./indicator.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class"> {
+    /** Content placed around the anchored child. */
+    marker: Snippet;
+    /** The content whose box establishes the placement boundary. */
+    children: Snippet;
+    /** Logical marker anchor. Defaults to top-end. */
+    position?: IndicatorPosition;
+    /** Extra classes, merged over the placement root. */
+    class?: string;
+  }
+
+  const {
+    marker,
+    children,
+    position = "top-end",
+    class: className,
+    ...rest
+  }: Props = $props();
+  const slots = $derived(indicator({ position }));
+</script>
+
+<span {...rest} class={slots.root({ class: className })} data-indicator>
+  <span class={slots.marker()} data-indicator-marker>{@render marker()}</span>
+  {@render children()}
+</span>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { tick, untrack } from "svelte";
+  import Button from "./Button.svelte";
+  import Input from "./Input.svelte";
+  import Icon, { type IconGlyph } from "./Icon.svelte";
+  import { inlineEdit } from "./inline-edit.variants";
+  import { createInlineEditSession, inlineEditReadValue, type InlineEditContract } from "./core/inline-edit";
+
+  interface Props extends InlineEditContract {
+    /** Optional decorative glyph, rendered through Icon in both the read view and editor. */
+    icon?: IconGlyph;
+    /** Reports a committed value after validation and persistence succeed. */
+    onvaluechange?: (value: string) => void;
+    /** Reports entry into or exit from editing. */
+    oneditingchange?: (editing: boolean) => void;
+    /** Optional persistence operation. A rejection keeps the draft open. */
+    onconfirm?: (value: string) => void | Promise<void>;
+    /** Extra classes on the field group. */
+    class?: string;
+  }
+  let { label, icon, presentation = "text", editVisibility = "always", sourceLabel, savedLabel = "Saved", inputType = "text", value = $bindable(), onvaluechange, editing = $bindable(), defaultEditing = false, oneditingchange,
+    validate, onconfirm, disabled = false, required = true, maxlength, emptyLabel = "Untitled",
+    editLabel = "Edit", saveLabel = "Save", cancelLabel = "Cancel", requiredMessage = "Enter a value.",
+    saveErrorMessage = "Could not save. Try again.", class: className }: Props = $props();
+  const id = $props.id();
+  const styles = $derived(inlineEdit({ editVisibility, presentation, withIcon: Boolean(icon) }));
+  let localEditing = $state(untrack(() => defaultEditing));
+  const active = $derived(editing ?? localEditing);
+  const initial = untrack(() => value);
+  let draftState = $state({ draft: initial, error: "", saving: false });
+  const session = createInlineEditSession(initial, next => { draftState = next; });
+  let input = $state<HTMLInputElement>();
+  let readRow = $state<HTMLDivElement>();
+  let previous = { active: false, value: initial };
+  let restoreFocus = false;
+  $effect(() => {
+    const next = { active, value }, was = previous;
+    if (next.value !== was.value || next.active !== was.active) session.reset(next.value);
+    if (next.active && (!was.active || next.value !== was.value)) void tick().then(() => { input?.focus(); input?.select(); });
+    if (!next.active && restoreFocus) { restoreFocus = false; void tick().then(() => readRow?.querySelector<HTMLButtonElement>("button")?.focus()); }
+    previous = next;
+  });
+  $effect(() => () => session.invalidate());
+  function setEditing(next: boolean) {
+    if (!next) restoreFocus = true;
+    editing = next; localEditing = next; oneditingchange?.(next);
+  }
+  async function save(event: SubmitEvent) {
+    event.preventDefault();
+    if (disabled) return;
+    const result = await session.save({ required, requiredMessage, saveErrorMessage, validate, confirm: onconfirm });
+    if (result.status === "committed") { value = result.value; onvaluechange?.(result.value); setEditing(false); }
+    else if (result.status === "invalid" || result.status === "failed") { await tick(); input?.focus(); }
+  }
+  function cancel() { if (!session.state.saving) { session.reset(value); setEditing(false); } }
+</script>
+
+<div role="group" aria-labelledby={`${id}-label`} aria-describedby={presentation === "input" && !active ? `${id}-status` : undefined} class={styles.root({ class: className })} data-inline-edit data-presentation={presentation} data-state={active ? (draftState.saving ? "saving" : "editing") : "saved"}>
+  <span id={`${id}-label`} class={styles.label()}>{label}</span>
+  {#if active}
+    <form class={styles.row()} aria-labelledby={`${id}-label`} aria-busy={draftState.saving} onsubmit={save} novalidate>
+      <div class={styles.field()}>
+        {#if icon}<span aria-hidden="true" class={styles.inputIcon()}><Icon {icon} size="sm" color="current" focusable="false" /></span>{/if}
+        <Input bind:ref={input} type={inputType} controlSize={presentation === "input" ? "md" : "sm"} value={draftState.draft} onvaluechange={next => session.change(String(next ?? ""))}
+          aria-labelledby={`${id}-label`} aria-invalid={draftState.error ? "true" : undefined}
+          aria-describedby={draftState.error ? `${id}-error` : undefined} {maxlength} {required} disabled={disabled || draftState.saving}
+          class={styles.input()} onkeydown={event => {
+            if (event.key === "Escape" && !event.isComposing && !session.state.saving) { event.preventDefault(); event.stopPropagation(); cancel(); }
+            if (event.key === "Enter" && event.isComposing) event.preventDefault();
+          }} />
+      </div>
+      <Button type="submit" size={presentation === "input" ? "md" : "sm"} disabled={disabled || draftState.saving} loading={draftState.saving}>{saveLabel}</Button>
+      <Button variant="ghost" size={presentation === "input" ? "md" : "sm"} disabled={draftState.saving} onclick={cancel}>{cancelLabel}</Button>
+    </form>
+    {#if draftState.error}<p id={`${id}-error`} role="alert" class={styles.error()}>{draftState.error}</p>{/if}
+  {:else}
+    <div bind:this={readRow} class={styles.row()}>
+      <span data-inline-edit-value class={styles.value()}>
+        {#if icon}<span aria-hidden="true" class={styles.icon()}><Icon {icon} size="sm" color="current" focusable="false" /></span>{/if}
+        <span class={styles.readText()}>{inlineEditReadValue(value, inputType, emptyLabel)}</span>
+      </span>
+      <Button size={presentation === "input" ? "md" : "sm"} variant="ghost" class={styles.edit()} {disabled} aria-label={`${editLabel} ${label}`} onclick={() => setEditing(true)}>{editLabel}</Button>
+    </div>
+    {#if presentation === "input"}<p id={`${id}-status`} data-saved-value role="status" class={styles.status()}>{savedLabel}{sourceLabel ? ` · ${sourceLabel}` : ""}</p>{/if}
+  {/if}
+</div>

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

@@ -0,0 +1,84 @@
+<!--
+  Input — the canonical Base text entry.
+
+  It stays a native <input>: the complete platform attribute surface is spread
+  through, including identity, autofill, constraints, validation, events and
+  the native `size` attribute. `value` is bindable (`bind:value`), and `ref`
+  is bindable for the rare caller that must move focus imperatively; ordinary
+  focus remains the browser's own behavior.
+-->
+<script lang="ts">
+  import { checkFieldName, getFieldContext } from "./a11y";
+  import { untrack } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { input, type InputSize } from "./input.variants";
+  import { inputValue } from "./core/input";
+
+  interface Props extends Omit<HTMLInputAttributes, "class" | "value"> {
+    /** The current value. Bindable: `bind:value` follows every keystroke. */
+    value?: HTMLInputAttributes["value"];
+    /** Called with the new value on every input (ADR 0026's value dialect); the native `oninput` still receives the Event. */
+    onvaluechange?: (value: HTMLInputAttributes["value"]) => void;
+    /** The native input element, available for imperative focus or selection. */
+    ref?: HTMLInputElement;
+    /**
+     * The control height step, matching Button's `size` (default `md`). Named
+     * apart from the native `size` attribute, which is still spread through.
+     */
+    controlSize?: InputSize;
+    /** Extra classes, merged over the canonical appearance. */
+    class?: string;
+  }
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    controlSize = "md",
+    class: className,
+    oninput,
+    onvaluechange,
+    ...rest
+  }: Props = $props();
+
+  // The element stays the source of truth for what was typed. `value` follows
+  // it on every input and is written back only when a caller supplies one, so a
+  // Field (or any spread) re-rendering around an uncontrolled Input can never
+  // blank it by passing `undefined` again.
+  const initial = untrack(() => value);
+  // A caller's reactive spread may replace its optional ref prop. The mounted
+  // control remains the source of truth for imperative updates and focus.
+  let element = $state<HTMLInputElement>();
+  $effect(() => { if (ref !== element) ref = element; });
+  $effect(() => {
+    if (element && initial !== undefined && element.type !== "file") element.defaultValue = initial === null ? "" : String(initial);
+  });
+
+  function handleInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }): void {
+    const element = event.currentTarget;
+    value = inputValue(element);
+    oninput?.(event);
+    onvaluechange?.(value);
+  }
+
+  $effect(() => {
+    const next = value;
+    if (!element || next === undefined || element.type === "file") return;
+    const text = next === null ? "" : String(next);
+    if (text !== element.value) element.value = text;
+  });
+
+  // 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("Input", element);
+  });
+</script>
+
+<input
+  {...rest}
+  value={initial}
+  bind:this={element}
+  oninput={handleInput}
+  class={input({ size: controlSize, class: className })}
+/>

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

@@ -0,0 +1,41 @@
+<!-- Semantic key caps and chords, available to every Kit through Base. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { kbd, kbdChord, type KbdSize } from "./kbd.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "children" | "class"> {
+    /** One key, or the ordered parts of a chord. */
+    keys?: readonly string[];
+    /** Visual separator hidden from assistive technology. */
+    separator?: string;
+    /** Key cap size: `sm` or `md` (the default). It follows the surrounding type, not Density. */
+    size?: KbdSize;
+    /** Extra classes merged onto each key cap, not onto a chord's wrapper. */
+    class?: string;
+    /** A custom single key cap, replacing `keys`. */
+    children?: Snippet;
+  }
+
+  const {
+    keys = [],
+    separator = "+",
+    size = "md",
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const chord = kbdChord();
+</script>
+
+{#if children}
+  <kbd {...rest} data-kbd class={kbd({ size, class: className })}>{@render children()}</kbd>
+{:else}
+  <kbd {...rest} data-kbd class={chord.root()}>
+    {#each keys as key, index (index)}
+      {#if index > 0}<span aria-hidden="true" class={chord.separator()}>{separator}</span>{/if}
+      <kbd class={kbd({ size, class: className })}>{key}</kbd>
+    {/each}
+  </kbd>
+{/if}