@happyvertical/smrt-svelte 0.30.0

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__/AddressInput.behavior.test.js

@@ -0,0 +1,122 @@
+/**
+ * Behavior tests for AddressInput (Sweep S11, #1416).
+ *
+ * Exercises the sub-field wiring: typing/selecting each field composes a
+ * Partial<AddressValue> emitted via onchange, the `fields` prop gates which
+ * sub-fields render (and thus which keys appear in the composed value),
+ * province/country selects populate from options, and the error prop marks
+ * every field invalid with a single linked alert. useAppState (default mode)
+ * is mocked since the hook throws outside a <Provider>.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+import AddressInput from '../AddressInput.svelte';
+describe('AddressInput — behavior', () => {
+    it('typing the street composes a value including the street', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', onchange },
+        });
+        await userEvent.type(screen.getByLabelText('Street Address'), '123 Main St');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ street: '123 Main St' }));
+    });
+    it('typing the city updates the composed value', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', onchange },
+        });
+        await userEvent.type(screen.getByLabelText('City'), 'Toronto');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ city: 'Toronto' }));
+    });
+    it('selecting a province emits its value code', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', onchange },
+        });
+        await userEvent.selectOptions(screen.getByLabelText('Province/State'), 'ON');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ province: 'ON' }));
+    });
+    it('selecting a country emits its value code', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', onchange },
+        });
+        await userEvent.selectOptions(screen.getByLabelText('Country'), 'US');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ country: 'US' }));
+    });
+    it('defaults the country to CA', () => {
+        render(AddressInput, { props: { name: 'addr', label: 'Address' } });
+        expect(screen.getByLabelText('Country')).toHaveValue('CA');
+    });
+    it('composes a complete address object across all fields', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', onchange },
+        });
+        await userEvent.type(screen.getByLabelText('Postal/ZIP Code'), 'M5V 2T6');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({
+            street: '',
+            city: '',
+            province: '',
+            postalCode: 'M5V 2T6',
+            country: 'CA',
+        }));
+    });
+    it('only emits keys for the fields it was told to render', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: {
+                name: 'addr',
+                label: 'Address',
+                fields: ['city', 'country'],
+                onchange,
+            },
+        });
+        expect(screen.queryByLabelText('Street Address')).toBeNull();
+        expect(screen.queryByLabelText('Postal/ZIP Code')).toBeNull();
+        await userEvent.type(screen.getByLabelText('City'), 'Ottawa');
+        const composed = onchange.mock.calls.at(-1)?.[0];
+        expect(Object.keys(composed).sort()).toEqual(['city', 'country']);
+        expect(composed.city).toBe('Ottawa');
+    });
+    it('seeds sub-fields from the bound value object', () => {
+        render(AddressInput, {
+            props: {
+                name: 'addr',
+                label: 'Address',
+                value: { city: 'Calgary', province: 'AB', country: 'CA' },
+            },
+        });
+        expect(screen.getByLabelText('City')).toHaveValue('Calgary');
+        expect(screen.getByLabelText('Province/State')).toHaveValue('AB');
+    });
+    it('renders the province and country option sets', () => {
+        render(AddressInput, { props: { name: 'addr', label: 'Address' } });
+        const provinces = screen.getByLabelText('Province/State');
+        expect(provinces.querySelector('option[value="QC"]')?.textContent).toBe('Quebec');
+        const countries = screen.getByLabelText('Country');
+        expect(countries.querySelector('option[value="US"]')?.textContent).toBe('United States');
+    });
+    it('marks every field invalid and links one alert when error is set', () => {
+        render(AddressInput, {
+            props: { name: 'addr', label: 'Address', error: 'Address required' },
+        });
+        const street = screen.getByLabelText('Street Address');
+        expect(street).toHaveAttribute('aria-invalid', 'true');
+        expect(street).toHaveAttribute('aria-describedby', 'addr-error');
+        const err = document.getElementById('addr-error');
+        expect(err).toHaveTextContent('Address required');
+        expect(err).toHaveAttribute('role', 'alert');
+    });
+    it('is axe-clean with all fields labelled', async () => {
+        const { container } = render(AddressInput, {
+            props: { name: 'addr', label: 'Address' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,92 @@
+/**
+ * Component test for CheckboxInput (Sweep S11, #1416).
+ *
+ * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts).
+ * CheckboxInput calls `useAppState` (throws outside a <Provider>), so we mock it
+ * to a stub default mode. Its form-context lookup uses `getContext` and safely
+ * returns undefined outside a provider, so no further stubbing is needed.
+ */
+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';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+import CheckboxInput from '../CheckboxInput.svelte';
+describe('CheckboxInput', () => {
+    it('renders a checkbox labelled by its label, wired via for/id', () => {
+        render(CheckboxInput, { props: { name: 'terms', label: 'Accept terms' } });
+        const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).toHaveAttribute('id', 'terms');
+        expect(checkbox).not.toBeChecked();
+    });
+    it('reflects the checked prop', () => {
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', checked: true },
+        });
+        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
+    });
+    it('reflects the disabled prop', () => {
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', disabled: true },
+        });
+        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeDisabled();
+    });
+    it('reflects the required prop (and marks the label with *)', () => {
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', required: true },
+        });
+        // Required appends a "*" to the visible label, so the accessible name is "Accept terms*".
+        expect(screen.getByRole('checkbox', { name: 'Accept terms*' })).toBeRequired();
+    });
+    it('toggles checked and fires onchange when clicked', async () => {
+        const onchange = vi.fn();
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', onchange },
+        });
+        const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
+        await userEvent.click(checkbox);
+        expect(checkbox).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+        await userEvent.click(checkbox);
+        expect(checkbox).not.toBeChecked();
+        expect(onchange).toHaveBeenLastCalledWith(false);
+    });
+    it('toggles when its label text is clicked', async () => {
+        const onchange = vi.fn();
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', onchange },
+        });
+        await userEvent.click(screen.getByText('Accept terms'));
+        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+    });
+    it('does not fire onchange when disabled', async () => {
+        const onchange = vi.fn();
+        render(CheckboxInput, {
+            props: { name: 'terms', label: 'Accept terms', disabled: true, onchange },
+        });
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Accept terms' }));
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean with a label', async () => {
+        const { container } = render(CheckboxInput, {
+            props: { name: 'newsletter', label: 'Subscribe to the newsletter' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean when checked, required, and disabled', async () => {
+        const { container } = render(CheckboxInput, {
+            props: {
+                name: 'newsletter',
+                label: 'Subscribe to the newsletter',
+                checked: true,
+                required: true,
+                disabled: true,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/DateRangeInput.behavior.test.js

@@ -0,0 +1,135 @@
+/**
+ * Behavior tests for DateRangeInput (Sweep S11, #1416).
+ *
+ * In default mode the component renders two native date pickers (Start / End)
+ * with cross-linked min/max, emits a { startDate, endDate } range via
+ * onchange, and validates start <= end. The hooks throw outside a <Provider>,
+ * so useAppState (default mode) + useSTT (stub) are mocked.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+vi.mock('../../../hooks/useSTT.svelte.js', () => ({
+    useSTT: () => ({
+        isListening: false,
+        isInitializing: false,
+        isReady: false,
+        adapterType: null,
+        downloadProgress: 0,
+        lastResult: '',
+        initialize: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+    }),
+}));
+import DateRangeInput from '../DateRangeInput.svelte';
+describe('DateRangeInput — behavior', () => {
+    it('renders labelled Start and End date pickers', () => {
+        render(DateRangeInput, { props: { name: 'range', label: 'Dates' } });
+        expect(screen.getByLabelText('Start')).toHaveAttribute('type', 'date');
+        expect(screen.getByLabelText('End')).toHaveAttribute('type', 'date');
+    });
+    it('setting the start date emits the range with the new start', async () => {
+        const onchange = vi.fn();
+        render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates', onchange },
+        });
+        await fireEvent.change(screen.getByLabelText('Start'), {
+            target: { value: '2024-01-10' },
+        });
+        expect(onchange).toHaveBeenLastCalledWith({
+            startDate: '2024-01-10',
+            endDate: '',
+        });
+    });
+    it('setting both dates emits the full range', async () => {
+        const onchange = vi.fn();
+        render(DateRangeInput, {
+            props: {
+                name: 'range',
+                label: 'Dates',
+                startDate: '2024-01-10',
+                onchange,
+            },
+        });
+        await fireEvent.change(screen.getByLabelText('End'), {
+            target: { value: '2024-03-20' },
+        });
+        expect(onchange).toHaveBeenLastCalledWith({
+            startDate: '2024-01-10',
+            endDate: '2024-03-20',
+        });
+    });
+    it('flags an end-before-start range as invalid with a linked alert', () => {
+        render(DateRangeInput, {
+            props: {
+                name: 'range',
+                label: 'Dates',
+                startDate: '2024-05-01',
+                endDate: '2024-01-01',
+            },
+        });
+        const start = screen.getByLabelText('Start');
+        expect(start).toHaveAttribute('aria-invalid', 'true');
+        expect(start).toHaveAttribute('aria-describedby', 'range-error');
+        const err = document.getElementById('range-error');
+        expect(err).toHaveAttribute('role', 'alert');
+        expect(err).toHaveTextContent('End date must be after start date');
+    });
+    it('treats start <= end as a valid range (no error)', () => {
+        render(DateRangeInput, {
+            props: {
+                name: 'range',
+                label: 'Dates',
+                startDate: '2024-01-01',
+                endDate: '2024-05-01',
+            },
+        });
+        expect(screen.getByLabelText('Start')).not.toHaveAttribute('aria-invalid');
+        expect(document.getElementById('range-error')).toBeNull();
+    });
+    it('caps the start picker max at the chosen end date', () => {
+        render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates', endDate: '2024-03-20' },
+        });
+        expect(screen.getByLabelText('Start')).toHaveAttribute('max', '2024-03-20');
+    });
+    it('floors the end picker min at the chosen start date', () => {
+        render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates', startDate: '2024-01-10' },
+        });
+        expect(screen.getByLabelText('End')).toHaveAttribute('min', '2024-01-10');
+    });
+    it('mirrors the dates into hidden submission inputs', async () => {
+        const { container } = render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates', startDate: '2024-01-10' },
+        });
+        await fireEvent.change(screen.getByLabelText('End'), {
+            target: { value: '2024-03-20' },
+        });
+        expect(container.querySelector('input[name="range_start"]')).toHaveValue('2024-01-10');
+        expect(container.querySelector('input[name="range_end"]')).toHaveValue('2024-03-20');
+    });
+    it('renders an explicit error prop as a linked alert', () => {
+        render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates', error: 'Pick a range' },
+        });
+        const err = document.getElementById('range-error');
+        expect(err).toHaveTextContent('Pick a range');
+        expect(err).toHaveAttribute('role', 'alert');
+    });
+    it('is axe-clean in a labelled + error state', async () => {
+        const { container } = render(DateRangeInput, {
+            props: {
+                name: 'range',
+                label: 'Dates',
+                startDate: '2024-05-01',
+                endDate: '2024-01-01',
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});