@happyvertical/smrt-svelte 0.34.5 → 0.34.6

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

@@ -1,37 +0,0 @@
-/**
- * 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 '@happyvertical/smrt-ui/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

@@ -1,39 +0,0 @@
-/**
- * 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 '@happyvertical/smrt-ui/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

@@ -1,87 +0,0 @@
-/**
- * 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 '@happyvertical/smrt-ui/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

@@ -1,16 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/state/form-group-context.d.ts

@@ -1,13 +0,0 @@
-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/state/form-group-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-group-context.d.ts","sourceRoot":"","sources":["../../src/state/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/state/form-group-context.js

@@ -1,28 +0,0 @@
-/**
- * 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}`;
-}