@dxlbnl/ui 0.1.0

package/dist/components/forms/Checkbox.stories.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+  import Checkbox from "./Checkbox.svelte";
+  // resolveTokenColor resolves via backgroundColor; use for bg-token assertions
+
+  const { Story } = defineMeta({
+    title: "Forms/Checkbox",
+    component: Checkbox,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-14: unchecked by default -->
+<Story name="Default (Unchecked)" args={{ label: "Enable notifications", checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    await expect(input).toBeVisible();
+    await expect(input).not.toBeChecked();
+    // AC-20: indicator background is transparent when unchecked
+    const indicator = canvasElement.querySelector(".checkbox-indicator");
+    await expect(getComputedStyle(indicator!).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+  }} />
+
+<!-- AC-15: checked state -->
+<Story name="Checked" args={{ label: "Enable notifications", checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    await expect(input).toBeChecked();
+    // AC-19: indicator background matches var(--amber) when checked
+    const amberColor = resolveTokenColor("--amber");
+    const indicator = canvasElement.querySelector(".checkbox-indicator");
+    await expect(getComputedStyle(indicator!).backgroundColor).toBe(amberColor);
+  }} />
+
+<!-- AC-16: indeterminate state sets DOM property and aria-checked="mixed" -->
+<Story name="Indeterminate" args={{ label: "Select all", indeterminate: true, checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    await expect(input).toBeVisible();
+    // AC-16: DOM .indeterminate property must be true after mount (set via $effect)
+    await expect((input as HTMLInputElement).indeterminate).toBe(true);
+  }} />
+
+<!-- AC-17: disabled unchecked — toBeDisabled and wrap opacity 0.4 -->
+<Story name="Disabled Unchecked" args={{ label: "Locked option", disabled: true, checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    await expect(input).toBeDisabled();
+    // AC-17: wrap opacity 0.4 and cursor not-allowed
+    const wrap = canvasElement.querySelector(".checkbox-wrap");
+    await expect(getComputedStyle(wrap!).opacity).toBe("0.4");
+    await expect(getComputedStyle(wrap!).cursor).toBe("not-allowed");
+  }} />
+
+<!-- AC-17: disabled checked — both disabled and checked -->
+<Story name="Disabled Checked" args={{ label: "Locked option", disabled: true, checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    await expect(input).toBeDisabled();
+    await expect(input).toBeChecked();
+  }} />
+
+<!-- AC-18: Space key toggles checked state; AC-1/AC-2/AC-4/AC-8 regression guards -->
+<Story name="Space to Toggle" args={{ label: "Toggle me", checked: false }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    const indicator = canvasElement.querySelector(".checkbox-indicator");
+    const wrap = canvasElement.querySelector(".checkbox-wrap");
+
+    // AC-1: indicator is exactly 16×16 before toggle
+    const indicatorRectBefore = indicator!.getBoundingClientRect();
+    await expect(indicatorRectBefore.width).toBe(16);
+    await expect(indicatorRectBefore.height).toBe(16);
+
+    // Capture wrap row height before toggle
+    const wrapHeightBefore = wrap!.getBoundingClientRect().height;
+
+    await expect(input).not.toBeChecked();
+    await input.focus();
+    await userEvent.keyboard(" ");
+    await expect(input).toBeChecked();
+
+    // AC-2 / AC-4: indicator dimensions must not change after toggle
+    const indicatorRectAfter = indicator!.getBoundingClientRect();
+    await expect(indicatorRectAfter.width).toBe(16);
+    await expect(indicatorRectAfter.height).toBe(16);
+
+    // AC-4: wrap row height must not change (the layout shift symptom)
+    const wrapHeightAfter = wrap!.getBoundingClientRect().height;
+    await expect(wrapHeightAfter).toBe(wrapHeightBefore);
+
+    // AC-8: ::after must be position:absolute so it is out of flow
+    const afterPosition = getComputedStyle(indicator!, "::after").position;
+    await expect(afterPosition).toBe("absolute");
+  }} />

package/dist/components/forms/Checkbox.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Checkbox from "./Checkbox.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/Checkbox.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { getContext } from "svelte";
+  import type { FieldContext } from "./field-context.js";
+  import { FIELD_CONTEXT_KEY } from "./field-context.js";
+
+  interface Props extends HTMLInputAttributes {
+    /** Visible label text rendered next to the checkbox. */
+    label: string;
+    /** Show the indeterminate (−) state. @default false */
+    indeterminate?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    label,
+    indeterminate = false,
+    checked = $bindable(false),
+    disabled,
+    ...rest
+  }: Props = $props();
+
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  const fieldCtx = getContext<FieldContext | undefined>(FIELD_CONTEXT_KEY);
+
+  let resolvedId = $derived(
+    fieldCtx ? fieldCtx.inputId : (rest.id as string | undefined),
+  );
+  let resolvedAriaInvalid:
+    | boolean
+    | "true"
+    | "false"
+    | "grammar"
+    | "spelling"
+    | null
+    | undefined = $derived(fieldCtx?.hasError ? "true" : undefined);
+  let resolvedAriaDescribedby = $derived(
+    fieldCtx?.hasHint ? fieldCtx.hintId : undefined,
+  );
+
+  $effect(() => {
+    if (inputEl) inputEl.indeterminate = indeterminate;
+  });
+</script>
+
+<label class="checkbox-wrap" class:disabled>
+  <input
+    type="checkbox"
+    class="checkbox-input"
+    bind:checked
+    {disabled}
+    bind:this={inputEl}
+    id={resolvedId}
+    aria-invalid={resolvedAriaInvalid}
+    aria-describedby={resolvedAriaDescribedby}
+    {...rest}
+  />
+  <span class="checkbox-indicator" aria-hidden="true"></span>
+  <span class="checkbox-label">{label}</span>
+</label>
+
+<style>
+  .checkbox-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--ink);
+    position: relative;
+
+    &.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  .checkbox-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+
+    &:checked + .checkbox-indicator {
+      background: var(--amber);
+      border-color: var(--amber);
+
+      &::after {
+        content: "✔";
+        color: var(--bg);
+        font-size: 20px;
+        line-height: 1;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    &:indeterminate + .checkbox-indicator {
+      background: var(--amber);
+      border-color: var(--amber);
+      opacity: 0.6;
+
+      &::after {
+        content: "–";
+        color: var(--bg);
+        font-size: 20px;
+        line-height: 1;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    &:focus-visible + .checkbox-indicator {
+      outline: 2px solid var(--amber);
+      outline-offset: 2px;
+    }
+  }
+
+  .checkbox-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border: 1px solid var(--rule-strong);
+    background: transparent;
+    border-radius: 0;
+    transition:
+      background var(--transition),
+      border-color var(--transition);
+    position: relative;
+  }
+
+  .checkbox-label {
+    color: var(--ink);
+  }
+</style>

package/dist/components/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends HTMLInputAttributes {
+    /** Visible label text rendered next to the checkbox. */
+    label: string;
+    /** Show the indeterminate (−) state. @default false */
+    indeterminate?: boolean;
+    [key: string]: unknown;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/Field.stories.svelte

@@ -0,0 +1,113 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Field from "./Field.svelte";
+  import Input from "./Input.svelte";
+  import Textarea from "./Textarea.svelte";
+  import Radio from "./Radio.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Forms/Field",
+    component: Field,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default — Hint"
+  args={{ label: "Bench Note", inputId: "bench-note", hint: "Describe the work session." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText("Bench Note");
+    await expect(input).toBeVisible();
+    await expect(input.tagName).toBe("INPUT");
+    const hint = canvas.getByText("Describe the work session.");
+    await expect(hint).toBeVisible();
+    const inkFaint = resolveTokenColor("--ink-faint");
+    await expect(getComputedStyle(hint).color).toBe(inkFaint);
+  }}>
+  <Input id="bench-note" aria-describedby="bench-note-hint" type="text" placeholder="Placeholder…" />
+</Story>
+
+<Story name="Error State"
+  args={{ label: "Email", inputId: "email-field", error: "Invalid email address." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText("Email");
+    await expect(input).toBeVisible();
+    await expect(input.getAttribute("aria-invalid")).toBe("true");
+    const errorText = canvas.getByText("Invalid email address.");
+    await expect(errorText).toBeVisible();
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(errorText).color).toBe(dangerColor);
+    const textbox = canvas.getByRole("textbox", { name: "Email" });
+    await expect(textbox.getAttribute("aria-describedby")).toBe("email-field-hint");
+  }}>
+  <Input id="email-field" aria-describedby="email-field-hint" aria-invalid="true" error={true} type="email" value="bad@" />
+</Story>
+
+<Story name="Disabled"
+  args={{ label: "Locked", inputId: "locked-field", hint: "Field is locked." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText("Locked");
+    await expect(input).toBeDisabled();
+    await expect(canvas.getByText("Field is locked.")).toBeVisible();
+  }}>
+  <Input id="locked-field" type="text" value="read-only" disabled />
+</Story>
+
+<Story name="With Textarea"
+  args={{ label: "Notes", inputId: "notes-field", hint: "Up to 500 characters." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const control = canvas.getByLabelText("Notes");
+    await expect(control.tagName).toBe("TEXTAREA");
+  }}>
+  <Textarea id="notes-field" aria-describedby="notes-field-hint" />
+</Story>
+
+<!-- AC-54 through AC-62: Field auto-injects aria-invalid + aria-describedby via context -->
+<Story name="Auto ARIA Wiring"
+  args={{ label: "Email", inputId: "auto-email", error: "Invalid email address." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    // AC-55: id is set from Field context (no manual id on the Input)
+    await expect(input.getAttribute("id")).toBe("auto-email");
+    // AC-56: aria-invalid is "true" because Field has an error prop
+    await expect(input.getAttribute("aria-invalid")).toBe("true");
+    // AC-57: aria-describedby is "{inputId}-hint" because error is set
+    await expect(input.getAttribute("aria-describedby")).toBe("auto-email-hint");
+    // AC-61: the hint span with the error text is visible
+    const hint = canvas.getByText("Invalid email address.");
+    await expect(hint).toBeVisible();
+    await expect(hint.getAttribute("id")).toBe("auto-email-hint");
+  }}>
+  <Input />
+</Story>
+
+<Story name="Required Field"
+  args={{ label: "Project Name", inputId: "project-name" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox", { name: "Project Name" });
+    await expect(input).toBeRequired();
+    await expect(canvasElement.querySelector(".field-hint")).toBeNull();
+  }}>
+  <Input id="project-name" type="text" required />
+</Story>
+
+<!-- AC-60: Radio inside Field receives aria-invalid + aria-describedby from context -->
+<Story name="Auto ARIA Wiring — Radio"
+  args={{ label: "Module type", inputId: "radio-ac60", error: "Select one option." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radio = canvas.getByRole("radio");
+    await expect(radio.getAttribute("aria-invalid")).toBe("true");
+    await expect(radio.getAttribute("aria-describedby")).toBe("radio-ac60-hint");
+    const hint = canvas.getByText("Select one option.");
+    await expect(hint).toBeVisible();
+  }}>
+  <Radio name="mod" value="osc" label="Oscillator" />
+</Story>

package/dist/components/forms/Field.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Field from "./Field.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Field: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Field = InstanceType<typeof Field>;
+export default Field;

package/dist/components/forms/Field.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import { setContext } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+  import { FIELD_CONTEXT_KEY } from './field-context.js'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Visible label text rendered above the input. */
+    label: string
+    /** `id` of the associated input — wires the `<label for>` and context. */
+    inputId: string
+    /** Helper text shown below the input. */
+    hint?: string
+    /** Error message — overrides hint and sets error state on nested inputs. */
+    error?: string
+    children: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    label,
+    inputId,
+    hint,
+    error,
+    children,
+    ...rest
+  }: Props = $props()
+
+  let hintId = $derived(`${inputId}-hint`)
+  let hasError = $derived(!!error)
+  let hasHint = $derived(!!(hint || error))
+  let hintText = $derived(error ?? hint)
+
+  // Provide context so nested Input/Textarea/Checkbox/Radio/Switch
+  // can auto-wire aria-invalid, aria-describedby, and id.
+  // Use a getter object so children re-read reactive values on each render.
+  const ctx = {
+    get inputId() { return inputId },
+    get hintId() { return hintId },
+    get hasHint() { return hasHint },
+    get hasError() { return hasError },
+  }
+  setContext(FIELD_CONTEXT_KEY, ctx)
+</script>
+
+<Stack gap="xs" style="min-width: 0;" {...rest}>
+  <label for={inputId} class="field-label">{label}</label>
+  {@render children()}
+  {#if hintText}
+    <span id={hintId} class="field-hint" class:err={hasError} aria-live="polite">
+      {hintText}
+    </span>
+  {/if}
+</Stack>
+
+<style>
+  .field-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--ink-faint);
+    display: block;
+  }
+
+  .field-hint {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--ink-faint);
+  }
+
+  .field-hint.err {
+    color: var(--danger);
+  }
+</style>

package/dist/components/forms/Field.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Visible label text rendered above the input. */
+    label: string;
+    /** `id` of the associated input — wires the `<label for>` and context. */
+    inputId: string;
+    /** Helper text shown below the input. */
+    hint?: string;
+    /** Error message — overrides hint and sets error state on nested inputs. */
+    error?: string;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/forms/Input.stories.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Input from "./Input.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Forms/Input",
+    component: Input,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default" args={{ type: "text", placeholder: "Placeholder…" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await expect(input).toBeVisible();
+    await expect(input).toBeEnabled();
+    const bgSunken = resolveTokenColor("--bg-sunken");
+    await expect(getComputedStyle(input).backgroundColor).toBe(bgSunken);
+    await expect(getComputedStyle(input).borderTopStyle).toBe("solid");
+    await expect(getComputedStyle(input).borderTopWidth).toBe("1px");
+    await expect(getComputedStyle(input).fontFamily).toContain("JetBrains Mono");
+  }} />
+
+<Story name="With Value" args={{ type: "text", value: "CONDUIT-PDX2" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await expect(input).toHaveValue("CONDUIT-PDX2");
+  }} />
+
+<Story name="Error State" args={{ type: "text", value: "bad@input", error: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await expect(input).toBeVisible();
+    await expect(input).toBeEnabled();
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(input).borderColor).toBe(dangerColor);
+  }} />
+
+<Story name="Disabled" args={{ type: "text", value: "read-only", disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await expect(input).toBeDisabled();
+    await expect(getComputedStyle(input).opacity).toBe("0.4");
+    await expect(getComputedStyle(input).cursor).toBe("not-allowed");
+  }} />
+
+<Story name="Email" args={{ type: "email", placeholder: "you@domain.com" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await expect(input.getAttribute("type")).toBe("email");
+  }} />

package/dist/components/forms/Input.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Input from "./Input.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/components/forms/Input.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+  import { getContext } from 'svelte'
+  import type { FieldContext } from './field-context.js'
+  import { FIELD_CONTEXT_KEY } from './field-context.js'
+
+  interface Props extends HTMLInputAttributes {
+    /** Show the error (danger-border) state. Auto-set when inside a Field with an error prop. @default false */
+    error?: boolean
+    [key: string]: unknown
+  }
+
+  let { error = false, ...rest }: Props = $props()
+
+  const fieldCtx = getContext<FieldContext | undefined>(FIELD_CONTEXT_KEY)
+
+  let resolvedId = $derived(fieldCtx ? fieldCtx.inputId : (rest.id as string | undefined))
+  // 'true' is a valid Booleanish value for aria-invalid
+  let resolvedAriaInvalid: boolean | 'true' | 'false' | 'grammar' | 'spelling' | null | undefined = $derived(
+    fieldCtx?.hasError ? 'true' : undefined
+  )
+  let resolvedAriaDescribedby = $derived(
+    fieldCtx?.hasHint ? fieldCtx.hintId : (rest['aria-describedby'] as string | undefined)
+  )
+  let resolvedError = $derived(error || (fieldCtx?.hasError ?? false))
+</script>
+
+<input
+  class="input"
+  class:err={resolvedError}
+  id={resolvedId}
+  aria-invalid={resolvedAriaInvalid}
+  aria-describedby={resolvedAriaDescribedby}
+  {...rest}
+/>
+
+<style>
+  .input {
+    font-family: var(--mono);
+    font-size: 13px;
+    letter-spacing: 0.02em;
+    background: var(--bg-sunken);
+    color: var(--ink);
+    border: 1px solid var(--rule-strong);
+    padding: 7px 10px;
+    outline: none;
+    width: 100%;
+    transition: border-color var(--transition);
+    border-radius: 0;
+  }
+
+  .input:focus {
+    border-color: var(--amber);
+  }
+
+  .input.err {
+    border-color: var(--danger);
+  }
+
+  .input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/forms/Input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    /** Show the error (danger-border) state. Auto-set when inside a Field with an error prop. @default false */
+    error?: boolean;
+    [key: string]: unknown;
+}
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;