@happyvertical/smrt-ui 0.34.4 → 0.34.6

package/AGENTS.md

@@ -14,11 +14,20 @@ SMRT has one shared set of UI primitives, split across two packages by concern:
 
 - **`smrt-ui` (here) owns the domain-agnostic VISUAL primitives** — `Button`,
   `Card`, `Modal`/`ConfirmDialog`, `Badge`, `Avatar`, `Chip`, `Dropdown`,
-  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … (it has **no**
-  form-input components — those carry i18n/voice logic and belong above the leaf).
-- **`smrt-svelte` owns the FORM primitives** — `Input`, `Textarea`, `Select`,
-  `Checkbox`/`Toggle`, `Form`, and the specialized date/measurement/address/file
-  inputs.
+  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … — **plus the
+  Provider-free base FORM primitives** under `./forms` (`Form`, `Input`,
+  `Select`, `Textarea`, `Toggle`, `FormGroup`), relocated here in #1589's
+  deferred-forms phase so domain packages can adopt them without pulling in the
+  smrt-svelte Provider or closing a build-graph cycle. These are dependency-free:
+  no Provider, no i18n, no spoken-input logic.
+- **`smrt-svelte` owns the Provider-REQUIRED form primitives** — `CheckboxInput`,
+  the rich `Form` (field registration + voice), `TextInput`, `MoneyInput`, and
+  the specialized date/measurement/address/file inputs (they call `useAppState`
+  / the AI hooks and carry i18n + spoken-input logic). It re-exports the base
+  **input** primitives (`Input`, `Select`, `Textarea`, `Toggle`, `FormGroup`)
+  from here so `@happyvertical/smrt-svelte/forms` stays the full barrel — but
+  **not** `Form`: that barrel's `Form` is the rich Provider-backed one, so the
+  Provider-free `Form` is only importable from `@happyvertical/smrt-ui/forms`.
 
 **Domain packages import visual primitives from `smrt-ui` and form primitives
 from `smrt-svelte`, and must not hand-roll raw `<button>` / `<input>` /
@@ -38,6 +47,7 @@ components are exempt — they *are* the primitives.
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
 | `./calendar` | `Calendar`, `DayView` |
 | `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
+| `./forms` | Provider-free base form primitives: `Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` (+ the FormGroup a11y context helpers) |
 | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
 | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
 | `./theme` | simple `ThemeProvider` + context (`useTheme` consumes this from `smrt-svelte`) |

package/dist/components/forms/Form.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+/**
+ * Form — the Provider-free base `<form>` primitive.
+ *
+ * A thin, dependency-free wrapper around the native `<form>` element so domain
+ * components have a primitive to adopt instead of hand-rolling raw `<form>`
+ * markup (issue #1589). It forwards every native form attribute (including
+ * `onsubmit`) and renders its children — no Provider, no i18n, no spoken-input
+ * logic.
+ *
+ * For the rich, Provider-backed form with field registration and voice input,
+ * use `Form` from `@happyvertical/smrt-svelte/forms` instead. This one is the
+ * leaf-level building block; that one composes app state on top.
+ *
+ * `preventDefault` (default `true`) calls `event.preventDefault()` before
+ * invoking the consumer's `onsubmit`, so a click/Enter submit runs the handler
+ * without a full-page navigation — the near-universal SPA pattern. Pass
+ * `preventDefault={false}` to keep native submission (e.g. a GET/POST `action`).
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+
+export interface Props extends Omit<HTMLFormAttributes, 'class'> {
+  class?: string;
+  preventDefault?: boolean;
+  children: Snippet;
+}
+
+let {
+  class: className = '',
+  preventDefault = true,
+  onsubmit,
+  children,
+  ...rest
+}: Props = $props();
+
+function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
+  if (preventDefault) event.preventDefault();
+  onsubmit?.(event);
+}
+</script>
+
+<form class="form {className}" onsubmit={handleSubmit} {...rest}>
+	{@render children()}
+</form>
+
+<style>
+	.form {
+		display: block;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+/**
+ * Form — the Provider-free base `<form>` primitive.
+ *
+ * A thin, dependency-free wrapper around the native `<form>` element so domain
+ * components have a primitive to adopt instead of hand-rolling raw `<form>`
+ * markup (issue #1589). It forwards every native form attribute (including
+ * `onsubmit`) and renders its children — no Provider, no i18n, no spoken-input
+ * logic.
+ *
+ * For the rich, Provider-backed form with field registration and voice input,
+ * use `Form` from `@happyvertical/smrt-svelte/forms` instead. This one is the
+ * leaf-level building block; that one composes app state on top.
+ *
+ * `preventDefault` (default `true`) calls `event.preventDefault()` before
+ * invoking the consumer's `onsubmit`, so a click/Enter submit runs the handler
+ * without a full-page navigation — the near-universal SPA pattern. Pass
+ * `preventDefault={false}` to keep native submission (e.g. a GET/POST `action`).
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLFormAttributes, 'class'> {
+    class?: string;
+    preventDefault?: boolean;
+    children: Snippet;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;
+//# sourceMappingURL=Form.svelte.d.ts.map

package/dist/components/forms/Form.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA6BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/FormGroup.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import {
+  type FormGroupContextValue,
+  nextFieldId,
+  setFormGroupContext,
+} from './form-group-context.js';
+
+export interface Props {
+  label: string;
+  id?: string;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  children: Snippet;
+}
+
+const { label, id, error, hint, required = false, children }: Props = $props();
+
+// Stable id so the label's `for` and the wrapped input's `id` agree even when
+// the consumer doesn't pass one.
+const fallbackId = nextFieldId();
+const fieldId = $derived(id ?? fallbackId);
+const hintId = $derived(hint && !error ? `${fieldId}-hint` : undefined);
+const errorId = $derived(error ? `${fieldId}-error` : undefined);
+const describedBy = $derived(
+  [hintId, errorId].filter(Boolean).join(' ') || undefined,
+);
+
+// Publish the wiring a base input auto-applies (getter stays reactive as
+// hint/error change).
+setFormGroupContext(
+  (): FormGroupContextValue => ({
+    inputId: fieldId,
+    describedBy,
+    invalid: !!error,
+  }),
+);
+</script>
+
+<div class="form-group">
+	<label for={fieldId} class="form-label">
+		{label}
+		{#if required}
+			<span class="required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+	{@render children()}
+	{#if hintId}
+		<p id={hintId} class="form-hint">{hint}</p>
+	{/if}
+	{#if errorId}
+		<p id={errorId} class="form-error" role="alert">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.form-group {
+		margin-bottom: 1rem;
+	}
+
+	.form-label {
+		display: block;
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-medium, 500);
+		color: var(--smrt-color-on-surface, #374151);
+		margin-bottom: 0.375rem;
+	}
+
+	.required {
+		color: var(--smrt-color-error, #ba1a1a);
+		margin-left: 0.125rem;
+	}
+
+	.form-hint {
+		margin: 0.25rem 0 0;
+		font-size: var(--smrt-typography-body-small-size, 0.75rem);
+		color: var(--smrt-color-on-surface-variant, #6b7280);
+	}
+
+	.form-error {
+		margin: 0.25rem 0 0;
+		font-size: var(--smrt-typography-body-small-size, 0.75rem);
+		color: var(--smrt-color-error, #ba1a1a);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    label: string;
+    id?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    children: Snippet;
+}
+declare const FormGroup: import("svelte").Component<Props, {}, "">;
+type FormGroup = ReturnType<typeof FormGroup>;
+export default FormGroup;
+//# sourceMappingURL=FormGroup.svelte.d.ts.map

package/dist/components/forms/FormGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiDD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/Input.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from './form-group-context.js';
+
+export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+  value?: string | number;
+  class?: string;
+}
+
+let {
+  id,
+  type = 'text',
+  value = $bindable(''),
+  placeholder,
+  disabled = false,
+  readonly = false,
+  required = false,
+  name,
+  class: className = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// When wrapped in a <FormGroup>, inherit the id (so its <label for> resolves),
+// the hint/error association, and the error state — unless set explicitly.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<input
+	id={resolvedId}
+	{type}
+	bind:value
+	{placeholder}
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="input {className}"
+	{...rest}
+/>
+
+<style>
+	.input {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+		color: var(--smrt-color-on-surface, #1f2937);
+		background-color: var(--smrt-color-surface, #fff);
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: var(--smrt-radius-small, 0.375rem);
+		transition:
+			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
+			box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out);
+	}
+
+	.input:focus {
+		outline: none;
+		border-color: var(--smrt-color-primary, #005ac1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+	}
+
+	.input:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.input::placeholder {
+		color: var(--smrt-color-on-surface-variant, #9ca3af);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+    value?: string | number;
+    class?: string;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuCD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/forms/Select.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from './form-group-context.js';
+
+export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+  value?: string;
+  class?: string;
+  children: Snippet;
+}
+
+let {
+  id,
+  value = $bindable(''),
+  disabled = false,
+  required = false,
+  name,
+  class: className = '',
+  children,
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// Inherit id / hint+error association / error state from a wrapping FormGroup.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<select
+	id={resolvedId}
+	bind:value
+	{disabled}
+	{required}
+	{name}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="select {className}"
+	{...rest}
+>
+	{@render children()}
+</select>
+
+<style>
+	.select {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 2rem 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+		color: var(--smrt-color-on-surface, #1f2937);
+		background-color: var(--smrt-color-surface, #fff);
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+		background-position: right 0.5rem center;
+		background-repeat: no-repeat;
+		background-size: 1.5em 1.5em;
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: 0.375rem;
+		appearance: none;
+		cursor: pointer;
+		transition:
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
+	}
+
+	.select:focus {
+		outline: none;
+		border-color: var(--smrt-color-primary, #005ac1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+	}
+
+	.select:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+    value?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/components/forms/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuCD,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from './form-group-context.js';
+
+export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
+  value?: string;
+  rows?: number;
+  class?: string;
+}
+
+let {
+  id,
+  value = $bindable(''),
+  placeholder,
+  disabled = false,
+  readonly = false,
+  required = false,
+  name,
+  rows = 4,
+  class: className = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// Inherit id / hint+error association / error state from a wrapping FormGroup.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<textarea
+	id={resolvedId}
+	bind:value
+	{placeholder}
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	{rows}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="textarea {className}"
+	{...rest}
+></textarea>
+
+<style>
+	.textarea {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+		color: var(--smrt-color-on-surface, #1f2937);
+		background-color: var(--smrt-color-surface, #fff);
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: 0.375rem;
+		resize: vertical;
+		min-height: 80px;
+		transition:
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
+	}
+
+	.textarea:focus {
+		outline: none;
+		border-color: var(--smrt-color-primary, #005ac1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+	}
+
+	.textarea:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.textarea::placeholder {
+		color: var(--smrt-color-on-surface-variant, #9ca3af);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
+    value?: string;
+    rows?: number;
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/components/forms/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/Toggle.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+/**
+ * SMRTToggle - An accessible toggle/switch component
+ *
+ * Features:
+ * - Native checkbox semantics for accessibility
+ * - Bindable checked state
+ * - Disabled state
+ * - Labels on either side
+ * - Size variants
+ * - Material 3 styling
+ */
+
+export interface Props {
+  /** Whether the toggle is checked */
+  checked?: boolean;
+  /** Whether the toggle is disabled */
+  disabled?: boolean;
+  /** Name attribute for form submission */
+  name?: string;
+  /** Value attribute for form submission */
+  value?: string;
+  /** Label text */
+  label?: string;
+  /** Position of the label */
+  labelPosition?: 'left' | 'right';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** ID for the input element */
+  id?: string;
+  /** ARIA label for accessibility */
+  ariaLabel?: string;
+  /** Change callback */
+  onchange?: (checked: boolean) => void;
+}
+
+let {
+  checked = $bindable(false),
+  disabled = false,
+  name,
+  value,
+  label,
+  labelPosition = 'right',
+  size = 'md',
+  id,
+  ariaLabel,
+  onchange,
+}: Props = $props();
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  checked = target.checked;
+  onchange?.(checked);
+}
+
+const sizeClasses = {
+  sm: 'toggle--sm',
+  md: 'toggle--md',
+  lg: 'toggle--lg',
+};
+</script>
+
+<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled}>
+  {#if label && labelPosition === 'left'}
+    <span class="toggle__label toggle__label--left">{label}</span>
+  {/if}
+
+  <span class="toggle__track">
+    <input
+      type="checkbox"
+      class="toggle__input"
+      {id}
+      {name}
+      {value}
+      {disabled}
+      {checked}
+      onchange={handleChange}
+      aria-label={ariaLabel ?? label ?? ''}
+    />
+    <span class="toggle__thumb"></span>
+  </span>
+
+  {#if label && labelPosition === 'right'}
+    <span class="toggle__label toggle__label--right">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .toggle--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .toggle__label {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface, #111827);
+    line-height: 1.5;
+  }
+
+  .toggle__track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .toggle__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .toggle__thumb {
+    position: relative;
+    background: var(--smrt-color-surface-container-highest, #e5e7eb);
+    border-radius: var(--smrt-radius-full, 9999px);
+    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .toggle__thumb::after {
+    content: '';
+    position: absolute;
+    background: var(--smrt-color-surface, #ffffff);
+    border-radius: var(--smrt-radius-full, 9999px);
+    box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
+    transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  /* Checked state */
+  .toggle__input:checked + .toggle__thumb {
+    background: var(--smrt-color-primary, #005ac1);
+  }
+
+  /* Focus state */
+  .toggle__input:focus-visible + .toggle__thumb {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+  }
+
+  /* Hover state */
+  .toggle:not(.toggle--disabled):hover .toggle__thumb {
+    background: var(--smrt-color-surface-container-high, #d1d5db);
+  }
+
+  .toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb {
+    background: var(--smrt-color-primary, #2563eb);
+  }
+
+  /* Size: Small */
+  .toggle--sm .toggle__thumb {
+    width: 32px;
+    height: 18px;
+  }
+
+  .toggle--sm .toggle__thumb::after {
+    width: 14px;
+    height: 14px;
+    top: 2px;
+    left: 2px;
+  }
+
+  .toggle--sm .toggle__input:checked + .toggle__thumb::after {
+    transform: translateX(14px);
+  }
+
+  /* Size: Medium (default) */
+  .toggle--md .toggle__thumb {
+    width: 44px;
+    height: 24px;
+  }
+
+  .toggle--md .toggle__thumb::after {
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+  }
+
+  .toggle--md .toggle__input:checked + .toggle__thumb::after {
+    transform: translateX(20px);
+  }
+
+  /* Size: Large */
+  .toggle--lg .toggle__thumb {
+    width: 56px;
+    height: 30px;
+  }
+
+  .toggle--lg .toggle__thumb::after {
+    width: 26px;
+    height: 26px;
+    top: 2px;
+    left: 2px;
+  }
+
+  .toggle--lg .toggle__input:checked + .toggle__thumb::after {
+    transform: translateX(26px);
+  }
+
+  .toggle--lg .toggle__label {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+</style>

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

@@ -0,0 +1,37 @@
+/**
+ * SMRTToggle - An accessible toggle/switch component
+ *
+ * Features:
+ * - Native checkbox semantics for accessibility
+ * - Bindable checked state
+ * - Disabled state
+ * - Labels on either side
+ * - Size variants
+ * - Material 3 styling
+ */
+export interface Props {
+    /** Whether the toggle is checked */
+    checked?: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Value attribute for form submission */
+    value?: string;
+    /** Label text */
+    label?: string;
+    /** Position of the label */
+    labelPosition?: 'left' | 'right';
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** ID for the input element */
+    id?: string;
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Change callback */
+    onchange?: (checked: boolean) => void;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;
+//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/components/forms/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Toggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAiDD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/__tests__/Form.test.js

@@ -0,0 +1,49 @@
+/**
+ * Golden test for the Provider-free Form primitive (#1589 deferred-forms phase).
+ *
+ * Form is the leaf `<form>` wrapper domain packages adopt instead of raw markup:
+ * it forwards native attributes, renders children, and (by default) prevents the
+ * native submit so the consumer's `onsubmit` runs without a page navigation.
+ */
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import Form from '../Form.svelte';
+const children = createRawSnippet(() => ({
+    render: () => '<button type="submit">Save</button>',
+}));
+describe('Form', () => {
+    it('renders a <form> with forwarded attributes and its children', () => {
+        const { container } = render(Form, {
+            props: { name: 'profile', class: 'profile-form', children },
+        });
+        const form = container.querySelector('form');
+        expect(form).not.toBeNull();
+        expect(form).toHaveAttribute('name', 'profile');
+        expect(form).toHaveClass('form', 'profile-form');
+        expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    });
+    it('prevents the native submit and calls onsubmit by default', async () => {
+        const onsubmit = vi.fn();
+        render(Form, { props: { onsubmit, children } });
+        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+        expect(onsubmit).toHaveBeenCalledTimes(1);
+        const event = onsubmit.mock.calls[0][0];
+        expect(event.defaultPrevented).toBe(true);
+    });
+    it('leaves native submission intact when preventDefault is false', async () => {
+        const onsubmit = vi.fn();
+        render(Form, { props: { onsubmit, preventDefault: false, children } });
+        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+        expect(onsubmit).toHaveBeenCalledTimes(1);
+        expect(onsubmit.mock.calls[0][0].defaultPrevented).toBe(false);
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Form, {
+            props: { 'aria-label': 'Profile form', children },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/FormGroup.test.js

@@ -0,0 +1,48 @@
+/**
+ * Golden test for FormGroup accessibility wiring (Sweep L1, #1420).
+ *
+ * FormGroup must make a wrapped base input programmatically accessible with no
+ * extra wiring: a real <label> association, hint/error linked via
+ * aria-describedby, and aria-invalid in the error state.
+ */
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import Fixture from './form-group-input.fixture.svelte';
+describe('FormGroup a11y wiring', () => {
+    it('associates its label with the wrapped input', () => {
+        render(Fixture, {});
+        // getByLabelText only resolves if the label is programmatically associated.
+        expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    });
+    it('links a hint via aria-describedby', () => {
+        render(Fixture, { props: { hint: 'Work address preferred' } });
+        const input = screen.getByLabelText('Email');
+        const describedBy = input.getAttribute('aria-describedby');
+        expect(describedBy).toBeTruthy();
+        const hint = document.getElementById(describedBy);
+        expect(hint).toHaveTextContent('Work address preferred');
+    });
+    it('sets aria-invalid and links the error in the error state', () => {
+        render(Fixture, { props: { error: 'Email is required' } });
+        const input = screen.getByLabelText('Email');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        const describedBy = input.getAttribute('aria-describedby');
+        const error = document.getElementById(describedBy);
+        expect(error).toHaveTextContent('Email is required');
+        // error is announced
+        expect(error).toHaveAttribute('role', 'alert');
+    });
+    it('is axe-clean (labelled control, associated hint)', async () => {
+        const { container } = render(Fixture, {
+            props: { hint: 'Work address preferred' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in the error state', async () => {
+        const { container } = render(Fixture, {
+            props: { error: 'Email is required' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/Input.test.js

@@ -0,0 +1,49 @@
+/**
+ * Golden test for Input (Sweep L4, #1423).
+ *
+ * Input is the low-level form primitive: a bare <input> whose accessible name
+ * comes from a wrapping label/FormGroup, not from itself. Programmatic-label +
+ * axe-clean coverage for the form primitives is L1's deliverable (#1420, "with
+ * L4"); here we cover render + interaction + state behavior.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import Input from '../Input.svelte';
+describe('Input', () => {
+    it('renders an <input> with the given id/name/type', () => {
+        render(Input, { props: { id: 'first', name: 'first', type: 'text' } });
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('id', 'first');
+        expect(input).toHaveAttribute('name', 'first');
+        expect(input).toHaveAttribute('type', 'text');
+    });
+    it('accepts typed input', async () => {
+        render(Input, { props: { id: 'q', name: 'q' } });
+        const input = screen.getByRole('textbox');
+        await userEvent.type(input, 'hello');
+        expect(input).toHaveValue('hello');
+    });
+    it('renders the placeholder', () => {
+        render(Input, { props: { id: 'q', placeholder: 'Search…' } });
+        expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument();
+    });
+    it('does not accept input when disabled', async () => {
+        render(Input, { props: { id: 'q', disabled: true } });
+        const input = screen.getByRole('textbox');
+        expect(input).toBeDisabled();
+        await userEvent.type(input, 'nope');
+        expect(input).toHaveValue('');
+    });
+    it('is read-only when readonly is set', async () => {
+        render(Input, { props: { id: 'q', readonly: true, value: 'fixed' } });
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('readonly');
+        await userEvent.type(input, 'x');
+        expect(input).toHaveValue('fixed');
+    });
+    it('marks required inputs', () => {
+        render(Input, { props: { id: 'q', required: true } });
+        expect(screen.getByRole('textbox')).toBeRequired();
+    });
+});

package/dist/components/forms/__tests__/Select.test.js

@@ -0,0 +1,37 @@
+/**
+ * Golden test for Select (Sweep L1, #1420).
+ *
+ * Select forwards aria attributes (so it can be labelled / error-associated)
+ * and inherits id / describedby / invalid from a wrapping FormGroup via context.
+ */
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import Select from '../Select.svelte';
+function options() {
+    return createRawSnippet(() => ({
+        render: () => `<option value="a">A</option><option value="b">B</option>`,
+    }));
+}
+describe('Select', () => {
+    it('forwards aria-label / aria-describedby / aria-invalid', () => {
+        render(Select, {
+            props: {
+                'aria-label': 'Country',
+                'aria-describedby': 'country-hint',
+                'aria-invalid': 'true',
+                children: options(),
+            },
+        });
+        const select = screen.getByRole('combobox', { name: 'Country' });
+        expect(select).toHaveAttribute('aria-describedby', 'country-hint');
+        expect(select).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(Select, {
+            props: { 'aria-label': 'Country', children: options() },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/Textarea.test.js

@@ -0,0 +1,39 @@
+/**
+ * Golden test for Textarea (Sweep L1, #1420).
+ *
+ * Textarea forwards aria attributes and inherits id / describedby / invalid from
+ * a wrapping FormGroup via context.
+ */
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import Textarea from '../Textarea.svelte';
+describe('Textarea', () => {
+    it('forwards aria-label / aria-describedby / aria-invalid', () => {
+        render(Textarea, {
+            props: {
+                'aria-label': 'Notes',
+                'aria-describedby': 'notes-hint',
+                'aria-invalid': 'true',
+            },
+        });
+        const textarea = screen.getByRole('textbox', { name: 'Notes' });
+        expect(textarea).toHaveAttribute('aria-describedby', 'notes-hint');
+        expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('accepts typed input', async () => {
+        render(Textarea, { props: { 'aria-label': 'Notes' } });
+        const textarea = screen.getByRole('textbox', {
+            name: 'Notes',
+        });
+        await userEvent.type(textarea, 'hello');
+        expect(textarea).toHaveValue('hello');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(Textarea, {
+            props: { 'aria-label': 'Notes' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/Toggle.test.js

@@ -0,0 +1,87 @@
+/**
+ * Component test for Toggle (Sweep S11, #1416).
+ *
+ * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts):
+ * render → assert role/name/state → drive with user-event → prove axe-clean.
+ * Toggle renders native checkbox semantics, so it surfaces as a `checkbox` role.
+ */
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import Toggle from '../Toggle.svelte';
+describe('Toggle', () => {
+    it('renders a checkbox with its label as the accessible name', () => {
+        render(Toggle, { props: { label: 'Email notifications' } });
+        const toggle = screen.getByRole('checkbox', {
+            name: 'Email notifications',
+        });
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).not.toBeChecked();
+    });
+    it('prefers ariaLabel over label for the accessible name', () => {
+        render(Toggle, { props: { label: 'Visible', ariaLabel: 'Wifi' } });
+        expect(screen.getByRole('checkbox', { name: 'Wifi' })).toBeInTheDocument();
+    });
+    it('reflects the checked prop', () => {
+        render(Toggle, { props: { ariaLabel: 'Active', checked: true } });
+        expect(screen.getByRole('checkbox', { name: 'Active' })).toBeChecked();
+    });
+    it('reflects the disabled prop', () => {
+        render(Toggle, { props: { ariaLabel: 'Active', disabled: true } });
+        expect(screen.getByRole('checkbox', { name: 'Active' })).toBeDisabled();
+    });
+    it('forwards name, value, and id to the input for form submission', () => {
+        render(Toggle, {
+            props: { ariaLabel: 'Sub', name: 'sub', value: 'on', id: 'sub-toggle' },
+        });
+        const toggle = screen.getByRole('checkbox', {
+            name: 'Sub',
+        });
+        expect(toggle).toHaveAttribute('name', 'sub');
+        expect(toggle).toHaveAttribute('id', 'sub-toggle');
+        // Svelte binds `value` as the DOM property on checkboxes (not a reflected attribute).
+        expect(toggle.value).toBe('on');
+    });
+    it('toggles checked and fires onchange when clicked', async () => {
+        const onchange = vi.fn();
+        render(Toggle, { props: { ariaLabel: 'Active', onchange } });
+        const toggle = screen.getByRole('checkbox', { name: 'Active' });
+        await userEvent.click(toggle);
+        expect(toggle).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+        await userEvent.click(toggle);
+        expect(toggle).not.toBeChecked();
+        expect(onchange).toHaveBeenLastCalledWith(false);
+    });
+    it('is keyboard-activatable with Space when focused', async () => {
+        const onchange = vi.fn();
+        render(Toggle, { props: { ariaLabel: 'Active', onchange } });
+        const toggle = screen.getByRole('checkbox', { name: 'Active' });
+        toggle.focus();
+        expect(toggle).toHaveFocus();
+        await userEvent.keyboard(' ');
+        expect(toggle).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+    });
+    it('does not fire onchange when disabled', async () => {
+        const onchange = vi.fn();
+        render(Toggle, {
+            props: { ariaLabel: 'Active', disabled: true, onchange },
+        });
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Active' }));
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean with a label', async () => {
+        const { container } = render(Toggle, {
+            props: { label: 'Accessible toggle' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in the checked + disabled state', async () => {
+        const { container } = render(Toggle, {
+            props: { label: 'Locked on', checked: true, disabled: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/form-group-input.fixture.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+/** Test fixture (L1 #1420): an Input wrapped in a FormGroup, to exercise the
+ *  FormGroup → base-input accessibility auto-wiring. */
+import FormGroup from '../FormGroup.svelte';
+import Input from '../Input.svelte';
+
+let {
+  error = undefined,
+  hint = undefined,
+  required = false,
+}: { error?: string; hint?: string; required?: boolean } = $props();
+</script>
+
+<FormGroup label="Email" {error} {hint} {required}>
+	<Input type="email" name="email" />
+</FormGroup>

package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    error?: string;
+    hint?: string;
+    required?: boolean;
+};
+declare const FormGroupInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormGroupInput = ReturnType<typeof FormGroupInput>;
+export default FormGroupInput;
+//# sourceMappingURL=form-group-input.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group-input.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-group-input.fixture.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBhF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/forms/form-group-context.d.ts

@@ -0,0 +1,13 @@
+export interface FormGroupContextValue {
+    /** Stable id for the field control; matches the FormGroup label's `for`. */
+    inputId: string;
+    /** Space-joined ids of the visible hint/error text, or undefined if none. */
+    describedBy: string | undefined;
+    /** Whether the field is currently showing an error. */
+    invalid: boolean;
+}
+export declare function setFormGroupContext(get: () => FormGroupContextValue): void;
+export declare function tryGetFormGroupContext(): (() => FormGroupContextValue) | undefined;
+/** Deterministic, collision-resistant id for a FormGroup that wasn't given one. */
+export declare function nextFieldId(): string;
+//# sourceMappingURL=form-group-context.d.ts.map

package/dist/components/forms/form-group-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group-context.d.ts","sourceRoot":"","sources":["../../../src/components/forms/form-group-context.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,uDAAuD;IACvD,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,qBAAqB,GAAG,IAAI,CAE1E;AAED,wBAAgB,sBAAsB,IAClC,CAAC,MAAM,qBAAqB,CAAC,GAC7B,SAAS,CAEZ;AAID,mFAAmF;AACnF,wBAAgB,WAAW,IAAI,MAAM,CAGpC"}

package/dist/components/forms/form-group-context.js

@@ -0,0 +1,28 @@
+/**
+ * FormGroup accessibility context (Sweep L1, #1420).
+ *
+ * `FormGroup` publishes the wiring a wrapped input needs to be programmatically
+ * accessible — the input's `id` (so the `<label for>` resolves), the
+ * space-joined ids of the hint/error text (for `aria-describedby`), and whether
+ * the field is currently in an error state (`aria-invalid`). The base form
+ * primitives (`Input`, `Select`, `Textarea`) read this and auto-apply those
+ * attributes when the consumer hasn't set them explicitly, so an input dropped
+ * inside a `<FormGroup>` is accessible with no extra wiring.
+ *
+ * The value is a getter so the consuming input always reads the *current*
+ * reactive state (id is stable; describedBy/invalid change as hint/error do).
+ */
+import { getContext, setContext } from 'svelte';
+const FORM_GROUP_KEY = Symbol('smrt-form-group');
+export function setFormGroupContext(get) {
+    setContext(FORM_GROUP_KEY, get);
+}
+export function tryGetFormGroupContext() {
+    return getContext(FORM_GROUP_KEY);
+}
+let autoIdCounter = 0;
+/** Deterministic, collision-resistant id for a FormGroup that wasn't given one. */
+export function nextFieldId() {
+    autoIdCounter += 1;
+    return `smrt-field-${autoIdCounter}`;
+}

package/dist/components/forms/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Form primitives — subpath `@happyvertical/smrt-ui/forms`.
+ *
+ * The Provider-FREE base form primitives, relocated here from
+ * `@happyvertical/smrt-svelte/forms` (issue #1589 deferred-forms phase) so domain
+ * packages can adopt them without pulling in the smrt-svelte Provider or closing
+ * a build-graph cycle. smrt-ui is the leaf everyone may depend on.
+ *
+ * `Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` are generic,
+ * tokenised, a11y-checked building blocks with no Provider/i18n/spoken-input
+ * dependency. The Provider-REQUIRED inputs (`CheckboxInput`, `TextInput`,
+ * `MoneyInput`, the rich `Form`, …) stay in `@happyvertical/smrt-svelte/forms`.
+ */
+export { default as Form } from './Form.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { type FormGroupContextValue, nextFieldId, setFormGroupContext, tryGetFormGroupContext, } from './form-group-context.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EACL,KAAK,qBAAqB,EAC1B,WAAW,EACX,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC"}

package/dist/components/forms/index.js

@@ -0,0 +1,20 @@
+/**
+ * Form primitives — subpath `@happyvertical/smrt-ui/forms`.
+ *
+ * The Provider-FREE base form primitives, relocated here from
+ * `@happyvertical/smrt-svelte/forms` (issue #1589 deferred-forms phase) so domain
+ * packages can adopt them without pulling in the smrt-svelte Provider or closing
+ * a build-graph cycle. smrt-ui is the leaf everyone may depend on.
+ *
+ * `Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` are generic,
+ * tokenised, a11y-checked building blocks with no Provider/i18n/spoken-input
+ * dependency. The Provider-REQUIRED inputs (`CheckboxInput`, `TextInput`,
+ * `MoneyInput`, the rich `Form`, …) stay in `@happyvertical/smrt-svelte/forms`.
+ */
+export { default as Form } from './Form.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { nextFieldId, setFormGroupContext, tryGetFormGroupContext, } from './form-group-context.js';

package/dist/components/ui/Button.svelte

@@ -247,6 +247,22 @@ const linkProps = $derived(() => {
     to { transform: translate(-50%, -50%) rotate(360deg); }
   }
 
+  /* Lay out the button's own children. The children render inside this wrapper
+     span, so the button-level `gap` never reaches them — without making the
+     wrapper itself a flex row, an icon + label (`<Button><svg/>Save</Button>`)
+     would render with no gap. Making `.content` a centered flex row lays out
+     multi-child buttons (icon+text, label+count) correctly after the #1589
+     migration, instead of needing per-button CSS to reach into `.content`. The
+     wrapper is shrink-to-fit, so a caller wanting a spread layout must also give
+     it width — e.g. a full-width button with
+     `.x :global(.content) { width: 100%; justify-content: space-between }`. */
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-2);
+  }
+
   .content.loading {
     opacity: 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.34.4",
+  "version": "0.34.6",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,6 +43,12 @@
       "import": "./dist/components/chat/index.js",
       "default": "./dist/components/chat/index.js"
     },
+    "./forms": {
+      "types": "./dist/components/forms/index.d.ts",
+      "svelte": "./dist/components/forms/index.js",
+      "import": "./dist/components/forms/index.js",
+      "default": "./dist/components/forms/index.js"
+    },
     "./i18n": {
       "types": "./dist/i18n/index.d.ts",
       "svelte": "./dist/i18n/index.js",
@@ -108,7 +114,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.34.4"
+    "@happyvertical/smrt-types": "0.34.6"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"