@warp-ds/elements 2.8.0-next.1 → 2.8.0-next.3

package/dist/packages/radio-group/radio-group.test.js

@@ -0,0 +1,392 @@
+import { i18n } from '@lingui/core';
+import { html } from 'lit';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './radio-group.js';
+import '../radio/radio.js';
+// Initialize i18n with English locale for tests
+i18n.load('en', {
+    'radio-group.label.optional': ['(optional)'],
+    'radio-group.validation.required': ['Please select an option.'],
+});
+i18n.activate('en');
+test('selects radio on click and dispatches input/change', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    const onInput = vi.fn();
+    const onChange = vi.fn();
+    group.addEventListener('input', onInput);
+    group.addEventListener('change', onChange);
+    await group.updateComplete;
+    radios[1].click();
+    await group.updateComplete;
+    expect(radios[0].checked).toBe(false);
+    expect(radios[1].checked).toBe(true);
+    expect(onInput).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    radios[1].click();
+    await group.updateComplete;
+    expect(onChange).toHaveBeenCalledTimes(1);
+});
+test('renders help text when provided', async () => {
+    const page = render(html `
+    <w-radio-group name="choices" label="Choices" help-text="Select one">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    await expect.element(page.getByText('Select one')).toBeVisible();
+});
+test('disabled group renders help text in disabled color', async () => {
+    render(html `
+    <w-radio-group name="choices" label="Choices" help-text="Select one" disabled>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    const helpText = group.shadowRoot?.querySelector('[part~="help-text"]');
+    expect(helpText).not.toBeNull();
+    const swatch = document.createElement('div');
+    swatch.style.color = 'var(--w-s-color-text-disabled)';
+    document.body.append(swatch);
+    const disabledColor = getComputedStyle(swatch).color;
+    swatch.remove();
+    if (!helpText) {
+        throw new Error('Expected help text element to exist');
+    }
+    expect(getComputedStyle(helpText).color).toBe(disabledColor);
+});
+test('renders optional text when optional is true', async () => {
+    const page = render(html `
+    <w-radio-group name="choices" label="Choices" optional>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    await expect.element(page.getByText('(optional)')).toBeVisible();
+});
+test('associates selected value with form submission', async () => {
+    render(html `
+    <form>
+      <w-radio-group label="Choices" name="choice">
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    let data = new FormData(form);
+    expect(data.get('choice')).toBeNull();
+    radios[0].click();
+    await group.updateComplete;
+    data = new FormData(form);
+    expect(data.get('choice')).toBe('alpha');
+});
+test('radio group does not submit its own value', async () => {
+    render(html `
+    <form>
+      <w-radio-group label="Choices" name="choice">
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    radios[1].click();
+    await group.updateComplete;
+    const data = new FormData(form);
+    expect(data.get('choice')).toBe('beta');
+});
+test('does not submit a value when name is missing', async () => {
+    render(html `
+    <form>
+      <w-radio-group name="choices" label="Choices">
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    radios[0].click();
+    await group.updateComplete;
+    const data = new FormData(form);
+    expect(data.get('choice')).toBeNull();
+});
+test('required group reports validity based on selection', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice" required>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    await expect.poll(() => group.checkValidity()).toBe(false);
+    expect(group.validity.valueMissing).toBe(true);
+    expect(group.validationMessage).not.toBe('');
+    radios[0].click();
+    await group.updateComplete;
+    await expect.poll(() => group.checkValidity()).toBe(true);
+    expect(group.validity.valid).toBe(true);
+});
+test('required group blocks form submission until a selection is made', async () => {
+    render(html `
+    <form>
+      <w-radio-group label="Choices" name="choice" required>
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+      <button type="submit">Submit</button>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    const submit = document.querySelector('button[type="submit"]');
+    const onSubmit = vi.fn(() => {
+        const data = new FormData(form);
+        expect(data.get('choice')).toBe('alpha');
+    });
+    form.addEventListener('submit', (event) => {
+        if (!form.checkValidity()) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        onSubmit();
+    });
+    await group.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(false);
+    submit.click();
+    await expect.poll(() => form.checkValidity()).toBe(false);
+    expect(onSubmit).not.toHaveBeenCalled();
+    radios[0].click();
+    await group.updateComplete;
+    submit.click();
+    await group.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(true);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+});
+test('required group exposes a validation message when empty', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice" required>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    await expect.poll(() => group.reportValidity()).toBe(false);
+    expect(group.validationMessage).not.toBe('');
+});
+test('resets to default selection on form reset', async () => {
+    render(html `
+    <form>
+      <w-radio-group label="Choices" name="choice">
+        <w-radio value="alpha" checked>Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    await expect.poll(() => radios[0].checked).toBe(true);
+    await expect.poll(() => radios[1].checked).toBe(false);
+    radios[1].click();
+    await group.updateComplete;
+    form.reset();
+    await group.updateComplete;
+    await expect.poll(() => radios[0].checked).toBe(true);
+    await expect.poll(() => radios[1].checked).toBe(false);
+});
+test('disabled group prevents selection and disables child radios', async () => {
+    render(html `
+    <w-radio-group name="choices" label="Choices" disabled>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    expect(radios[0].getAttribute('aria-disabled')).toBe('true');
+    expect(radios[1].getAttribute('aria-disabled')).toBe('true');
+    expect(radios[0].tabIndex).toBe(-1);
+    expect(radios[1].tabIndex).toBe(-1);
+    radios[0].click();
+    await group.updateComplete;
+    expect(radios[0].checked).toBe(false);
+});
+test('name changes after render affect form submission', async () => {
+    render(html `
+    <form>
+      <w-radio-group label="Choices" name="choice">
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    radios[0].click();
+    await group.updateComplete;
+    let data = new FormData(form);
+    expect(data.get('choice')).toBe('alpha');
+    group.name = 'preference';
+    await group.updateComplete;
+    data = new FormData(form);
+    expect(data.get('choice')).toBeNull();
+    expect(data.get('preference')).toBe('alpha');
+});
+test('re-enabling a disabled group restores tabbable radio', async () => {
+    render(html `
+    <w-radio-group name="choices" label="Choices" disabled>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta" checked>Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    expect(radios[0].tabIndex).toBe(-1);
+    expect(radios[1].tabIndex).toBe(-1);
+    group.disabled = false;
+    await group.updateComplete;
+    await expect.poll(() => radios[1].checked).toBe(true);
+    await expect.poll(() => radios[1].tabIndex).toBe(0);
+    await expect.poll(() => radios[0].tabIndex).toBe(-1);
+});
+test('only one radio is tabbable at a time', async () => {
+    render(html `
+    <w-radio-group name="choices" label="Choices">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    await expect.poll(() => radios[0].tabIndex).toBe(0);
+    await expect.poll(() => radios[1].tabIndex).toBe(-1);
+    radios[1].click();
+    await group.updateComplete;
+    await expect.poll(() => radios[0].tabIndex).toBe(-1);
+    await expect.poll(() => radios[1].tabIndex).toBe(0);
+});
+test('warns when used in a form without a name', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    render(html `
+    <form>
+      <w-radio-group label="Choices">
+        <w-radio value="alpha">Alpha</w-radio>
+        <w-radio value="beta">Beta</w-radio>
+      </w-radio-group>
+    </form>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    expect(warn).toHaveBeenCalledWith('w-radio-group: "name" is required for form submission.');
+    warn.mockRestore();
+});
+test('propagates invalid state to child radios', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice" required>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    group.reportValidity();
+    await group.updateComplete;
+    expect(radios[0].invalid).toBe(true);
+    expect(radios[1].invalid).toBe(true);
+    radios[0].click();
+    await group.updateComplete;
+    expect(radios[0].invalid).toBe(false);
+    expect(radios[1].invalid).toBe(false);
+});
+test('adds and removes tabindex on the host when invalid', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    expect(group.hasAttribute('tabindex')).toBe(false);
+    group.setAttribute('invalid', '');
+    await group.updateComplete;
+    expect(group.getAttribute('tabindex')).toBe('0');
+    group.removeAttribute('invalid');
+    await group.updateComplete;
+    expect(group.hasAttribute('tabindex')).toBe(false);
+});
+test('updates optional text when locale changes', async () => {
+    i18n.load('fr', {
+        'radio-group.label.optional': ['(optionnel)'],
+        'radio-group.validation.required': ['Please select an option.'],
+    });
+    const page = render(html `
+    <w-radio-group name="choices" label="Choices" optional>
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    await expect.element(page.getByText('(optional)')).toBeVisible();
+    i18n.activate('fr');
+    await group.updateComplete;
+    await expect.element(page.getByText('(optionnel)')).toBeVisible();
+    i18n.activate('en');
+});
+test('does not set aria-labelledby when label is missing', async () => {
+    render(html `
+    <w-radio-group name="choices">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    await group.updateComplete;
+    const fieldset = group.shadowRoot?.querySelector('fieldset');
+    expect(fieldset?.getAttribute('aria-labelledby')).toBeNull();
+});
+test('applies group name to child radios when missing', async () => {
+    render(html `
+    <w-radio-group label="Choices" name="choice">
+      <w-radio value="alpha">Alpha</w-radio>
+      <w-radio value="beta">Beta</w-radio>
+    </w-radio-group>
+  `);
+    const group = document.querySelector('w-radio-group');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await group.updateComplete;
+    expect(radios[0].getAttribute('name')).toBe('choice');
+    expect(radios[1].getAttribute('name')).toBe('choice');
+});

package/dist/packages/radio-group/react.d.ts

@@ -0,0 +1,7 @@
+import { WRadioGroup } from './radio-group.js';
+export declare const RadioGroup: import("@lit/react").ReactWebComponent<WRadioGroup, {
+    onInput: string;
+    oninput: string;
+    onChange: string;
+    onchange: string;
+}>;

package/dist/packages/radio-group/react.js

@@ -0,0 +1,17 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const RadioGroup = createComponent({
+    tagName: 'w-radio-group',
+    elementClass: Component,
+    react: React,
+    events: {
+        onInput: 'input',
+        oninput: 'input',
+        onChange: 'change',
+        onchange: 'change',
+    },
+});

package/dist/packages/select/select.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Select } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "name" | "form" | "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "helpText" | "optional" | "readOnly" | "readonly" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
+    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "name" | "form" | "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "helpText" | "readOnly" | "readonly" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "name" | "form" | "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "placeholder" | "helpText" | "required" | "optional" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "reportValidity" | "setCustomValidity" | "_textareaStyles"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "name" | "form" | "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "required" | "reportValidity" | "optional" | "helpText" | "placeholder" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { TextField } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "name" | "size" | "form" | "label" | "mask" | "pattern" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "type" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "placeholder" | "helpText" | "required" | "autocomplete" | "max" | "min" | "minLength" | "maxLength" | "readOnly" | "readonly" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "name" | "size" | "form" | "label" | "mask" | "pattern" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "type" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "required" | "helpText" | "placeholder" | "autocomplete" | "max" | "min" | "minLength" | "maxLength" | "readOnly" | "readonly" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/toast/api.js

@@ -1,4 +1,4 @@
-import { windowExists } from '../utils/window-exists';
+import { windowExists } from '../utils/window-exists.js';
 function getToastContainer() {
     const container = customElements.get('w-toast-container');
     return container;