@happyvertical/smrt-ui 0.43.4 → 0.43.6

package/dist/components/forms/__tests__/composite-controls.fixture.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 import Combobox from '../Combobox.svelte';
-import type { ControlInteractionRegistry } from '../control-interaction.js';
+import type {
+  ControlInteractionRegistry,
+  ControlOption,
+} from '../control-interaction.js';
 import Form from '../Form.svelte';
 import Listbox from '../Listbox.svelte';
 import MultiSelect from '../MultiSelect.svelte';
@@ -8,8 +11,18 @@ import TagsInput from '../TagsInput.svelte';
 
 interface Props {
   registry: ControlInteractionRegistry;
+  fieldsetDisabled?: boolean;
+  collisionOptions?: ControlOption[];
+  collisionValues?: Array<string | number>;
+  onCollisionValuesChange?: (values: Array<string | number>) => void;
 }
-let { registry }: Props = $props();
+let {
+  registry,
+  fieldsetDisabled = false,
+  collisionOptions,
+  collisionValues = $bindable([]),
+  onCollisionValuesChange,
+}: Props = $props();
 const countries = [
   { value: 'ca', label: 'Canada' },
   { value: 'us', label: 'United States' },
@@ -22,8 +35,13 @@ let region = $state<string | number>('west');
 </script>
 
 <Form formId="profile" interactionRegistry={registry} aria-label="Profile">
-  <Combobox name="country" label="Country" options={countries} bind:value={country} />
+  <fieldset disabled={fieldsetDisabled}>
+  <Combobox name="country" label="Country" options={countries} required bind:value={country} />
   <MultiSelect name="channels" label="Channels" options={[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'SMS' }]} bind:values={channels} />
-  <TagsInput name="topics" label="Topics" bind:values={tags} />
+  <TagsInput name="topics" label="Topics" maxTags={2} bind:values={tags} />
   <Listbox name="region" label="Region" options={[{ value: 'west', label: 'West' }, { value: 'east', label: 'East' }]} bind:value={region} />
+  {#if collisionOptions}
+    <MultiSelect name="collision" label="Collision" options={collisionOptions} bind:values={collisionValues} onvalueschange={onCollisionValuesChange} />
+  {/if}
+  </fieldset>
 </Form>

package/dist/components/forms/__tests__/composite-controls.fixture.svelte.d.ts

@@ -1,8 +1,12 @@
-import type { ControlInteractionRegistry } from '../control-interaction.js';
+import type { ControlInteractionRegistry, ControlOption } from '../control-interaction.js';
 interface Props {
     registry: ControlInteractionRegistry;
+    fieldsetDisabled?: boolean;
+    collisionOptions?: ControlOption[];
+    collisionValues?: Array<string | number>;
+    onCollisionValuesChange?: (values: Array<string | number>) => void;
 }
-declare const CompositeControls: import("svelte").Component<Props, {}, "">;
+declare const CompositeControls: import("svelte").Component<Props, {}, "collisionValues">;
 type CompositeControls = ReturnType<typeof CompositeControls>;
 export default CompositeControls;
 //# sourceMappingURL=composite-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/composite-controls.fixture.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/composite-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAO5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AA8BD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"composite-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/composite-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,0BAA0B,EAC1B,aAAa,EACd,MAAM,2BAA2B,CAAC;AAOnC,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACzC,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;CACpE;AAyCD,QAAA,MAAM,iBAAiB,0DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/forms/__tests__/composite-controls.test.js

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import { createControlInteractionRegistry } from '../control-interaction.js';
 import Fixture from './composite-controls.fixture.svelte';
@@ -25,6 +25,101 @@ describe('composite controls', () => {
         render(Fixture, { props: { registry } });
         expect(registry.list('profile').map((item) => item.identity.controlId)).toEqual(['country', 'channels', 'topics', 'region']);
     });
+    it('rejects invalid choice and normalized-shape proposals at staging time', async () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry } });
+        const invalid = new Map([
+            ['country', 'unknown'],
+            ['channels', ['fax']],
+            ['topics', ['duplicate', 'duplicate']],
+            ['region', 'north'],
+        ]);
+        for (const [controlId, value] of invalid) {
+            await registry.execute({
+                action: 'stage',
+                identity: { formId: 'profile', controlId },
+                value,
+            }, { source: 'agent' });
+            expect(registry.get({ formId: 'profile', controlId })?.state.staged?.valid).toBe(false);
+        }
+        expect(await screen.findAllByRole('alert')).toHaveLength(invalid.size);
+    });
+    it('applies only the deterministic MultiSelect match for colliding values', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        const onValuesChange = vi.fn();
+        render(Fixture, {
+            props: {
+                registry,
+                collisionOptions: [
+                    { value: 1, label: 'Number one' },
+                    { value: '1', label: 'String one' },
+                    { value: 2, label: 'Disabled two', disabled: true },
+                ],
+                onCollisionValuesChange: onValuesChange,
+            },
+        });
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'profile', controlId: 'collision' },
+            value: [1],
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'profile', controlId: 'collision' })?.state.staged
+            ?.valid).toBe(true);
+        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
+        expect(onValuesChange).toHaveBeenLastCalledWith([1]);
+        await userEvent.click(screen.getByRole('button', { name: /Collision.*Number one/ }));
+        expect(screen.getByRole('option', { name: 'Number one' })).toHaveAttribute('aria-selected', 'true');
+        expect(screen.getByRole('option', { name: 'String one' })).toHaveAttribute('aria-selected', 'false');
+        for (const value of [[1, 1], [2], ['unknown']]) {
+            await registry.execute({
+                action: 'stage',
+                identity: { formId: 'profile', controlId: 'collision' },
+                value,
+            }, { source: 'agent' });
+            expect(registry.get({ formId: 'profile', controlId: 'collision' })?.state
+                .staged?.valid).toBe(false);
+        }
+    });
+    it('stages the typed option value selected by a transport string', async () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, {
+            props: {
+                registry,
+                collisionOptions: [{ value: 1, label: 'Number one' }],
+            },
+        });
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'profile', controlId: 'collision' },
+            value: ['1'],
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'profile', controlId: 'collision' })?.state.staged
+            ?.value).toEqual([1]);
+    });
+    it('normalizes legacy string-bound selections for numeric options', async () => {
+        const registry = createControlInteractionRegistry();
+        const onValuesChange = vi.fn();
+        render(Fixture, {
+            props: {
+                registry,
+                collisionOptions: [{ value: 1, label: 'Number one' }],
+                collisionValues: ['1'],
+                onCollisionValuesChange: onValuesChange,
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: /Collision.*Number one/ }));
+        const option = screen.getByRole('option', { name: 'Number one' });
+        expect(option).toHaveAttribute('aria-selected', 'true');
+        await userEvent.click(option);
+        expect(onValuesChange).toHaveBeenLastCalledWith([]);
+    });
+    it('reports effective disabled state from an ancestor fieldset', () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry, fieldsetDisabled: true } });
+        expect(registry.list('profile').map((item) => item.state.disabled)).toEqual([true, true, true, true]);
+    });
     it('is axe-clean', async () => {
         const registry = createControlInteractionRegistry();
         const { container } = render(Fixture, { props: { registry } });

package/dist/components/forms/__tests__/composite-user-edit.fixture.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import SegmentedControl from '../SegmentedControl.svelte';
+
+let {
+  registry,
+  onchange,
+  modeState,
+}: {
+  registry: ControlInteractionRegistry;
+  onchange?: (event: Event) => void;
+  modeState?: {
+    get?: () => string;
+    set?: (next: string) => void;
+  };
+} = $props();
+
+let mode = $state<'draft' | 'review' | 'published'>('draft');
+
+$effect(() => {
+  if (!modeState) return;
+  modeState.get = () => mode;
+  modeState.set = (next) => {
+    mode = next as typeof mode;
+  };
+});
+</script>
+
+<Form formId="profile" interactionRegistry={registry} {onchange}>
+  <SegmentedControl
+    name="mode"
+    label="Mode"
+    bind:value={mode}
+    options={[
+      { value: 'draft', label: 'Draft' },
+      { value: 'review', label: 'Review' },
+      { value: 'published', label: 'Published' },
+    ]}
+  />
+</Form>

package/dist/components/forms/__tests__/composite-user-edit.fixture.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+type $$ComponentProps = {
+    registry: ControlInteractionRegistry;
+    onchange?: (event: Event) => void;
+    modeState?: {
+        get?: () => string;
+        set?: (next: string) => void;
+    };
+};
+declare const CompositeUserEdit: import("svelte").Component<$$ComponentProps, {}, "">;
+type CompositeUserEdit = ReturnType<typeof CompositeUserEdit>;
+export default CompositeUserEdit;
+//# sourceMappingURL=composite-user-edit.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/composite-user-edit.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-user-edit.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/composite-user-edit.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAI3E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,0BAA0B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,MAAM,MAAM,CAAC;QACnB,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KAC9B,CAAC;CACH,CAAC;AAiCF,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}