@happyvertical/smrt-svelte 0.34.5 → 0.34.6

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

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

@@ -1,83 +0,0 @@
-<script lang="ts">
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { tryGetFormGroupContext } from '../../state/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

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

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

@@ -1,83 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-import type { HTMLSelectAttributes } from 'svelte/elements';
-import { tryGetFormGroupContext } from '../../state/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

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

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

@@ -1,85 +0,0 @@
-<script lang="ts">
-import type { HTMLTextareaAttributes } from 'svelte/elements';
-import { tryGetFormGroupContext } from '../../state/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

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

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

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

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

@@ -1 +0,0 @@
-{"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__/FormGroup.test.js

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

@@ -1,49 +0,0 @@
-/**
- * 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();
-    });
-});