@happyvertical/smrt-ui 0.53.0 → 0.53.2

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

@@ -1,201 +0,0 @@
-/**
- * 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 { 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 { expectNoA11yViolations } from '../../../test-support/a11y';
-import { createControlInteractionRegistry, executeLocalControlCommand, } from '../control-interaction.js';
-import Form from '../Form.svelte';
-import FormAttachmentFixture from './form-attachment.fixture.svelte';
-const children = createRawSnippet(() => ({
-    render: () => '<button type="submit">Save</button>',
-}));
-const controlledInput = createRawSnippet(() => ({
-    render: () => '<input data-smrt-control="display-name" />',
-}));
-function dispatchTrusted(target, type) {
-    const event = new Event(type, { bubbles: true });
-    const implementationSymbol = Object.getOwnPropertySymbols(event).find((symbol) => symbol.description === 'impl');
-    if (!implementationSymbol)
-        throw new Error('missing JSDOM event internals');
-    target.addEventListener(type, (dispatched) => {
-        const implementation = dispatched[implementationSymbol];
-        implementation.isTrusted = true;
-    }, { capture: true, once: true });
-    target.dispatchEvent(event);
-}
-function dispatchLocalGesture(execute) {
-    const target = new EventTarget();
-    let pending;
-    target.addEventListener('click', (event) => {
-        pending = execute(event);
-    }, { once: true });
-    target.dispatchEvent(new Event('click'));
-    if (!pending)
-        throw new Error('local gesture handler did not run');
-    return pending;
-}
-describe('Form', () => {
-    it('exposes its native element while mounted and clears it on unmount', async () => {
-        const { component, container, unmount } = render(Form, {
-            props: { children },
-        });
-        expect(component.getFormElement()).toBe(container.querySelector('form'));
-        await unmount();
-        expect(component.getFormElement()).toBeNull();
-    });
-    it('forwards an action attachment and preserves form posting and control registration', async () => {
-        const registry = createControlInteractionRegistry();
-        const attached = vi.fn();
-        const destroyed = vi.fn();
-        const submitted = vi.fn();
-        const onsubmit = vi.fn();
-        const enhance = (form) => {
-            attached(form);
-            const submit = (event) => {
-                submitted(event.defaultPrevented, new FormData(form));
-                event.preventDefault();
-            };
-            form.addEventListener('submit', submit);
-            return {
-                destroy() {
-                    form.removeEventListener('submit', submit);
-                    destroyed();
-                },
-            };
-        };
-        const { container, unmount } = render(FormAttachmentFixture, {
-            props: { enhance, registry, onsubmit },
-        });
-        const form = container.querySelector('form');
-        expect(attached).toHaveBeenCalledExactlyOnceWith(form);
-        expect(form).toHaveAttribute('method', 'POST');
-        expect(form).toHaveAttribute('action', '/profile');
-        expect(registry.list()).toHaveLength(1);
-        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
-        expect(submitted).toHaveBeenCalledOnce();
-        expect(submitted.mock.calls[0][0]).toBe(false);
-        expect(submitted.mock.calls[0][1].get('displayName')).toBe('Dana');
-        expect(onsubmit).toHaveBeenCalledOnce();
-        await unmount();
-        expect(destroyed).toHaveBeenCalledOnce();
-        expect(registry.list()).toHaveLength(0);
-    });
-    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('records trusted value edits but not focus-only clicks', () => {
-        const registry = createControlInteractionRegistry();
-        const recordUserEdit = vi.spyOn(registry, 'recordUserEdit');
-        const { container } = render(Form, {
-            props: {
-                formId: 'profile',
-                interactionRegistry: registry,
-                children: controlledInput,
-            },
-        });
-        const input = container.querySelector('input');
-        if (!input)
-            throw new Error('Expected controlled input');
-        // A click can focus a field without changing it. Direct-edit tracking is
-        // deliberately limited to input/change, while composite controls record
-        // their successful mutations explicitly.
-        dispatchTrusted(input, 'click');
-        expect(recordUserEdit).not.toHaveBeenCalled();
-        dispatchTrusted(input, 'input');
-        expect(recordUserEdit).toHaveBeenCalledOnce();
-        expect(recordUserEdit).toHaveBeenCalledWith({
-            formId: 'profile',
-            controlId: 'display-name',
-            subject: undefined,
-        });
-    });
-    it('preserves a consumer-normalized human edit while an async setter rolls back', async () => {
-        let releaseSetter;
-        let setterStarted;
-        const setterBlocked = new Promise((resolve) => {
-            releaseSetter = resolve;
-        });
-        const setterStartedPromise = new Promise((resolve) => {
-            setterStarted = resolve;
-        });
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        const { container } = render(Form, {
-            props: {
-                formId: 'profile',
-                interactionRegistry: registry,
-                children: controlledInput,
-                oninput: (event) => {
-                    const input = event.target;
-                    input.value = input.value.replace(/^./, (character) => character.toUpperCase());
-                },
-            },
-        });
-        const input = container.querySelector('input');
-        if (!input)
-            throw new Error('Expected controlled input');
-        const identity = { formId: 'profile', controlId: 'display-name' };
-        registry.register({
-            identity,
-            metadata: { kind: 'text' },
-            getValue: () => input.value,
-            setValue: async (next) => {
-                input.value = String(next);
-                setterStarted?.();
-                await setterBlocked;
-                throw new Error('setter_failed');
-            },
-            restoreValue: (next) => {
-                input.value = String(next);
-            },
-        });
-        await registry.execute({ action: 'stage', identity, value: 'Grace' }, { source: 'agent' });
-        const applying = dispatchLocalGesture((event) => executeLocalControlCommand(registry, { action: 'apply', identity, revision: 1 }, event));
-        await setterStartedPromise;
-        input.value = 'katherine';
-        dispatchTrusted(input, 'input');
-        expect(input.value).toBe('Katherine');
-        releaseSetter?.();
-        expect(await applying).toMatchObject({
-            ok: false,
-            reason: 'setter_failed',
-        });
-        expect(input.value).toBe('Katherine');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Form, {
-            props: { 'aria-label': 'Profile form', children },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

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

@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import FormActionBar from '../FormActionBar.svelte';
-const actions = createRawSnippet(() => ({
-    render: () => '<span><button type="button">Cancel</button><button type="submit">Publish</button></span>',
-}));
-describe('FormActionBar', () => {
-    it('is a labelled group carrying the shell contract attribute', () => {
-        render(FormActionBar, {
-            props: { label: 'Video actions', children: actions },
-        });
-        const group = screen.getByRole('group', { name: 'Video actions' });
-        expect(group.hasAttribute('data-form-action-bar')).toBe(true);
-        expect(screen.getByRole('button', { name: 'Publish' })).toBeInTheDocument();
-    });
-    it('defaults its accessible name and supports the plain variant', () => {
-        render(FormActionBar, { props: { plain: true, children: actions } });
-        const group = screen.getByRole('group', { name: 'Form actions' });
-        expect(group.classList.contains('plain')).toBe(true);
-    });
-});

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 { render, screen } from '@testing-library/svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-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();
-    });
-});

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

@@ -1,303 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { tick } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { createControlInteractionRegistry, executeLocalControlCommand, } from '../control-interaction.js';
-import Listbox from '../Listbox.svelte';
-import Fixture from './listbox-form.fixture.svelte';
-function form() {
-    return screen.getByRole('form', { name: 'Vendor form' });
-}
-function data() {
-    return new FormData(form());
-}
-describe('Listbox native form value', () => {
-    it('posts one option value after mouse or keyboard selection', async () => {
-        render(Fixture);
-        await userEvent.click(screen.getByRole('option', { name: 'Plate supplier' }));
-        expect(data().getAll('vendor')).toEqual(['42']);
-        await userEvent.keyboard('{ArrowDown}{Enter}');
-        expect(data().getAll('vendor')).toEqual(['steel']);
-        await userEvent.click(screen.getByRole('option', { name: 'Disabled supplier' }));
-        expect(data().getAll('vendor')).toEqual(['steel']);
-    });
-    it('posts an empty named selection and omits missing or empty names', async () => {
-        const { rerender } = render(Fixture);
-        expect(data().getAll('vendor')).toEqual(['']);
-        await rerender({ name: '', value: 42 });
-        expect([...data()]).toEqual([]);
-        await rerender({ unnamed: true, value: 42 });
-        expect([...data()]).toEqual([]);
-    });
-    it.each([
-        { disabled: true },
-        { fieldsetDisabled: true },
-    ])('omits disabled values %j', (props) => {
-        render(Fixture, { props: { ...props, value: 42 } });
-        expect([...data()]).toEqual([]);
-    });
-    it.each([
-        undefined,
-        42,
-    ])('restores initial value %j and selection on reset', async (value) => {
-        render(Fixture, { props: { value } });
-        await userEvent.click(screen.getByRole('option', { name: 'Steel supplier' }));
-        form().reset();
-        await settleReset();
-        expect(data().getAll('vendor')).toEqual([value === undefined ? '' : '42']);
-        expect(screen.getByRole('option', { name: 'Plate supplier' })).toHaveAttribute('aria-selected', String(value === 42));
-        expect(screen.getByRole('option', { name: 'Steel supplier' })).toHaveAttribute('aria-selected', 'false');
-    });
-    it('retains the selected value when reset is canceled', async () => {
-        render(Fixture);
-        await userEvent.click(screen.getByRole('option', { name: 'Plate supplier' }));
-        form().addEventListener('reset', (event) => event.preventDefault());
-        form().reset();
-        await settleReset();
-        expect(data().getAll('vendor')).toEqual(['42']);
-    });
-    it('preserves registry identity and posts only applied values', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { registry } });
-        const identity = { formId: 'vendor-form', controlId: 'vendor' };
-        await registry.execute({ action: 'stage', identity, value: '42' }, { source: 'agent' });
-        expect(data().getAll('vendor')).toEqual(['']);
-        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
-        expect(data().getAll('vendor')).toEqual(['42']);
-        expect(registry.get(identity)?.state.value).toBe(42);
-    });
-});
-async function settleReset() {
-    await new Promise((resolve) => setTimeout(resolve));
-    await tick();
-}
-describe('Listbox deferred native reset', () => {
-    it('preserves a newer programmatic value before reset completion', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const view = render(Listbox, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'other', label: 'Other' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                value: 42,
-            },
-        });
-        await view.rerender({ value: 'changed' });
-        target.reset();
-        await view.rerender({ value: 'other' });
-        await settleReset();
-        expect(new FormData(target).getAll('choice')).toEqual(['other']);
-        await view.unmount();
-        target.remove();
-    });
-    it('cancels pending completion when unmounted', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const onChange = vi.fn();
-        const view = render(Listbox, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'other', label: 'Other' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                value: 42,
-                onvaluechange: onChange,
-            },
-        });
-        target.reset();
-        await view.unmount();
-        await settleReset();
-        expect(onChange).not.toHaveBeenCalled();
-        target.remove();
-    });
-});
-describe('Listbox selected disabled option posting', () => {
-    it('omits initially disabled selections and responds to dynamic disable without losing state', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const options = [
-            { value: 42, label: 'Selected', disabled: true },
-            { value: 'other', label: 'Other' },
-        ];
-        const view = render(Listbox, {
-            target,
-            props: { options, label: 'Choice', name: 'choice', value: 42 },
-        });
-        expect(new FormData(target).getAll('choice')).toEqual([]);
-        await view.rerender({
-            options: options.map((option) => ({ ...option, disabled: false })),
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['42']);
-        await view.rerender({ options });
-        expect(new FormData(target).getAll('choice')).toEqual([]);
-        await view.rerender({
-            options: options.map((option) => ({ ...option, disabled: false })),
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['42']);
-        await view.unmount();
-        target.remove();
-    });
-});
-describe('Listbox reset listener ordering', () => {
-    it('honors cancellation from a later listener microtask', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const onChange = vi.fn();
-        const view = render(Listbox, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                value: 42,
-                onvaluechange: onChange,
-            },
-        });
-        await view.rerender({ value: 'changed' });
-        target.addEventListener('reset', (event) => {
-            queueMicrotask(() => event.preventDefault());
-        });
-        target.reset();
-        await settleReset();
-        expect(new FormData(target).getAll('choice')).toEqual(['changed']);
-        expect(onChange).not.toHaveBeenCalled();
-        await view.unmount();
-        target.remove();
-    });
-});
-function dispatchLocalCommand(registry, command) {
-    const target = new EventTarget();
-    let pending;
-    target.addEventListener('click', (event) => {
-        pending = executeLocalControlCommand(registry, command, event);
-    }, { once: true });
-    target.dispatchEvent(new Event('click'));
-    if (!pending)
-        throw new Error('local command handler did not run');
-    return pending;
-}
-describe('Listbox reset registry currency', () => {
-    it.each([
-        false,
-        true,
-    ])('keeps staged proposal currency correct when cancellation is %s', async (cancel) => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { ...{ value: 42 }, registry } });
-        const identity = { formId: 'vendor-form', controlId: 'vendor' };
-        const target = form();
-        await userEvent.click(screen.getByRole('option', { name: 'Steel supplier' }));
-        expect((await registry.execute({ action: 'stage', identity, value: 42 }, { source: 'agent' })).ok).toBe(true);
-        if (cancel)
-            target.addEventListener('reset', (event) => event.preventDefault());
-        target.reset();
-        await settleReset();
-        expect(registry.get(identity)?.state.staged?.stale).toBe(!cancel);
-        const applied = await dispatchLocalCommand(registry, {
-            action: 'apply',
-            identity,
-        });
-        expect(applied.ok).toBe(cancel);
-        if (!cancel) {
-            expect(applied.reason).toBe('staged_value_stale');
-            expect(new FormData(target).getAll('vendor')).toEqual(['42']);
-        }
-    });
-    it.each([
-        false,
-        true,
-    ])('preserves reset over an async local clear when cancellation is %s', async (cancel) => {
-        let releasePolicy;
-        let policyStarted;
-        const blocked = new Promise((resolve) => {
-            releasePolicy = resolve;
-        });
-        const started = new Promise((resolve) => {
-            policyStarted = resolve;
-        });
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-            policy: async (command) => {
-                if (command.action === 'clear') {
-                    policyStarted();
-                    await blocked;
-                }
-                return { allowed: true };
-            },
-        });
-        render(Fixture, { props: { ...{ value: 42 }, registry } });
-        const identity = { formId: 'vendor-form', controlId: 'vendor' };
-        const target = form();
-        await userEvent.click(screen.getByRole('option', { name: 'Steel supplier' }));
-        const clearing = dispatchLocalCommand(registry, {
-            action: 'clear',
-            identity,
-        });
-        await started;
-        if (cancel)
-            target.addEventListener('reset', (event) => event.preventDefault());
-        target.reset();
-        await settleReset();
-        releasePolicy();
-        const result = await clearing;
-        await tick();
-        expect(result.ok).toBe(cancel);
-        if (!cancel)
-            expect(result.reason).toBe('staged_value_stale');
-        expect(new FormData(target).getAll('vendor')).toEqual(cancel ? [''] : ['42']);
-    });
-});
-describe('Listbox exact option identity posting', () => {
-    it.each([
-        false,
-        true,
-    ])('posts an enabled numeric option beside a disabled string collision in reversed order %s', async (reverse) => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const options = [
-            { value: 42, label: 'Numeric' },
-            { value: '42', label: 'Text', disabled: true },
-        ];
-        if (reverse)
-            options.reverse();
-        const view = render(Listbox, {
-            target,
-            props: { options, label: 'Choice', name: 'choice', value: 42 },
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['42']);
-        expect(screen.getByRole('option', { name: 'Numeric' })).toHaveAttribute('aria-selected', 'true');
-        await view.rerender({ value: undefined });
-        await userEvent.click(screen.getByRole('option', { name: 'Numeric' }));
-        expect(new FormData(target).getAll('choice')).toEqual(['42']);
-        expect(screen.getByRole('option', { name: 'Numeric' })).toHaveAttribute('aria-selected', 'true');
-        await view.rerender({
-            value: 42,
-            options: options.map((option) => ({
-                ...option,
-                disabled: option.value === 42,
-            })),
-        });
-        expect(new FormData(target).getAll('choice')).toEqual([]);
-        await userEvent.click(screen.getByRole('option', { name: 'Text' }));
-        expect(new FormData(target).getAll('choice')).toEqual(['42']);
-        expect(screen.getByRole('option', { name: 'Text' })).toHaveAttribute('aria-selected', 'true');
-        await view.unmount();
-        target.remove();
-    });
-});