@happyvertical/smrt-ui 0.34.5 → 0.34.7

package/dist/components/forms/Toggle.svelte

@@ -0,0 +1,224 @@
+<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);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toggle__thumb,
+    .toggle__thumb::after {
+      transition: none;
+    }
+  }
+</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}`;
+}