@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

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

@@ -1,122 +1,128 @@
-import { i18n } from '@lingui/core';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './checkbox-group.js';
-import '../checkbox/checkbox.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./checkbox-group.js";
+import "../checkbox/checkbox.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'checkbox-group.label.optional': ['(optional)'],
-    'checkbox-group.validation.required': ['At least one selection is required.'],
+i18n.load("en", {
+    "checkbox-group.label.optional": ["(optional)"],
+    "checkbox-group.validation.required": ["At least one selection is required."],
 });
-i18n.activate('en');
-test('renders help text when provided', async () => {
+i18n.activate("en");
+test("renders help text when provided", async () => {
     const page = render(html `
-    <w-checkbox-group help-text="Select all that apply">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('Select all that apply')).toBeVisible();
+		<w-checkbox-group help-text="Select all that apply">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("Select all that apply")).toBeVisible();
 });
-test('associates help text with the group', async () => {
+test("associates help text with the group", async () => {
     const page = render(html `
-    <w-checkbox-group help-text="Choose wisely">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    const group = page.getByRole('group');
-    await expect.element(group).toHaveAccessibleDescription('Choose wisely');
+		<w-checkbox-group help-text="Choose wisely">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const group = page.getByRole("group");
+    await expect.element(group).toHaveAccessibleDescription("Choose wisely");
 });
-test('renders label above the group and associates it', async () => {
+test("renders label above the group and associates it", async () => {
     const page = render(html `
-    <w-checkbox-group label="Preferences">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('Preferences')).toBeVisible();
-    await expect.element(page.getByRole('group', { name: 'Preferences' })).toBeVisible();
+		<w-checkbox-group label="Preferences">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("Preferences")).toBeVisible();
+    await expect
+        .element(page.getByRole("group", { name: "Preferences" }))
+        .toBeVisible();
 });
-test('renders optional text when optional is true', async () => {
+test("renders optional text when optional is true", async () => {
     const page = render(html `
-    <w-checkbox-group label="Preferences" optional>
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('(optional)')).toBeVisible();
+		<w-checkbox-group label="Preferences" optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("(optional)")).toBeVisible();
 });
-test('required group toggles invalid state for group and children after submit and selection', async () => {
+test("required group toggles invalid state for group and children after submit and selection", async () => {
     const page = render(html `
-    <form>
-      <w-checkbox-group label="Preferences" required>
-        <w-checkbox name="group" value="foo">Foo</w-checkbox>
-        <w-checkbox name="group" value="bar">Bar</w-checkbox>
-      </w-checkbox-group>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const submit = page.getByRole('button', { name: 'Submit' });
-    const group = page.getByRole('group', { name: 'Preferences' });
-    const firstCheckbox = page.getByRole('checkbox', { name: 'Foo' });
-    const firstCheckboxEl = document.querySelector('w-checkbox');
+		<form>
+			<w-checkbox-group label="Preferences" required>
+				<w-checkbox name="group" value="foo">Foo</w-checkbox>
+				<w-checkbox name="group" value="bar">Bar</w-checkbox>
+			</w-checkbox-group>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const submit = page.getByRole("button", { name: "Submit" });
+    const group = page.getByRole("group", { name: "Preferences" });
+    const firstCheckbox = page.getByRole("checkbox", { name: "Foo" });
+    const firstCheckboxEl = document.querySelector("w-checkbox");
     await firstCheckboxEl.updateComplete;
     const internalInput = firstCheckboxEl.shadowRoot?.querySelector('[part="input"]');
     if (!internalInput) {
-        throw new Error('Expected checkbox input element to exist');
+        throw new Error("Expected checkbox input element to exist");
     }
     await submit.click();
     await expect.poll(() => form.checkValidity()).toBe(false);
-    await expect.element(group).toHaveAttribute('aria-invalid', 'true');
-    await expect.element(firstCheckbox).toHaveAttribute('aria-invalid', 'true');
+    await expect.element(group).toHaveAttribute("aria-invalid", "true");
+    await expect.element(firstCheckbox).toHaveAttribute("aria-invalid", "true");
     // Group invalid state should flow via aria-invalid on the internal input,
     // while host invalid remains untouched (no host attribute mutation).
-    expect(firstCheckboxEl.hasAttribute('invalid')).toBe(false);
-    expect(internalInput.getAttribute('aria-invalid')).toBe('true');
+    expect(firstCheckboxEl.hasAttribute("invalid")).toBe(false);
+    expect(internalInput.getAttribute("aria-invalid")).toBe("true");
     firstCheckboxEl.click();
     await expect.poll(() => form.checkValidity()).toBe(true);
-    await expect.element(group).not.toHaveAttribute('aria-invalid', 'true');
-    await expect.element(firstCheckbox).not.toHaveAttribute('aria-invalid', 'true');
-    expect(internalInput.getAttribute('aria-invalid')).toBeNull();
+    await expect.element(group).not.toHaveAttribute("aria-invalid", "true");
+    await expect
+        .element(firstCheckbox)
+        .not.toHaveAttribute("aria-invalid", "true");
+    expect(internalInput.getAttribute("aria-invalid")).toBeNull();
 });
-test('submits checked checkbox values via form data', async () => {
+test("submits checked checkbox values via form data", async () => {
     render(html `
-    <form>
-      <w-checkbox-group label="Preferences">
-        <w-checkbox name="prefs" value="alpha" checked>Alpha</w-checkbox>
-        <w-checkbox name="prefs" value="beta" checked>Beta</w-checkbox>
-        <w-checkbox name="prefs" value="gamma">Gamma</w-checkbox>
-      </w-checkbox-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
+		<form>
+			<w-checkbox-group label="Preferences">
+				<w-checkbox name="prefs" value="alpha" checked>Alpha</w-checkbox>
+				<w-checkbox name="prefs" value="beta" checked>Beta</w-checkbox>
+				<w-checkbox name="prefs" value="gamma">Gamma</w-checkbox>
+			</w-checkbox-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
     const data = new FormData(form);
-    expect(data.getAll('prefs')).toEqual(['alpha', 'beta']);
+    expect(data.getAll("prefs")).toEqual(["alpha", "beta"]);
 });
-test('applies group name to child checkboxes without a name', async () => {
+test("applies group name to child checkboxes without a name", async () => {
     render(html `
-    <w-checkbox-group name="prefs">
-      <w-checkbox value="alpha" checked>Alpha</w-checkbox>
-      <w-checkbox name="custom" value="beta" checked>Beta</w-checkbox>
-    </w-checkbox-group>
-  `);
-    const [first, second] = Array.from(document.querySelectorAll('w-checkbox'));
+		<w-checkbox-group name="prefs">
+			<w-checkbox value="alpha" checked>Alpha</w-checkbox>
+			<w-checkbox name="custom" value="beta" checked>Beta</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const [first, second] = [
+        ...document.querySelectorAll("w-checkbox"),
+    ];
     await first.updateComplete;
-    expect(first.name).toBe('prefs');
-    expect(second.name).toBe('custom');
+    expect(first.name).toBe("prefs");
+    expect(second.name).toBe("custom");
 });
-test('warns when used in a form without a name', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+test("warns when used in a form without a name", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => { });
     render(html `
-    <form>
-      <w-checkbox-group>
-        <w-checkbox value="alpha" checked>Alpha</w-checkbox>
-      </w-checkbox-group>
-    </form>
-  `);
+		<form>
+			<w-checkbox-group>
+				<w-checkbox value="alpha" checked>Alpha</w-checkbox>
+			</w-checkbox-group>
+		</form>
+	`);
     await expect.poll(() => warn).toHaveBeenCalled();
     warn.mockRestore();
 });

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WCheckboxGroup } from './checkbox-group.js';
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WCheckboxGroup>, "form" | "label" | "name" | "invalid" | "helpText" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "reportValidity" | "optional"> & {} & Partial<Omit<WCheckboxGroup, keyof HTMLElement>> & React.RefAttributes<WCheckboxGroup>, "ref">, "help-text"> & {
+import React from "react";
+import { WarpCheckboxGroup } from "./checkbox-group.js";
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCheckboxGroup>, "form" | "label" | "name" | "invalid" | "helpText" | "optional" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "reportValidity"> & {} & Partial<Omit<WarpCheckboxGroup, keyof HTMLElement>> & React.RefAttributes<WarpCheckboxGroup>, "ref">, "help-text"> & {
     helpText?: string;
-} & React.RefAttributes<WCheckboxGroup>>;
+} & React.RefAttributes<WarpCheckboxGroup>>;

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

@@ -1,17 +1,17 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+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 {
 }
 const BaseCheckboxGroup = createComponent({
-    tagName: 'w-checkbox-group',
+    tagName: "w-checkbox-group",
     elementClass: Component,
     react: React,
 });
 export const CheckboxGroup = React.forwardRef(({ helpText, ...props }, ref) => React.createElement(BaseCheckboxGroup, {
     ...props,
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
     ref,
 }));
-CheckboxGroup.displayName = 'CheckboxGroup';
+CheckboxGroup.displayName = "CheckboxGroup";

package/dist/packages/combobox/combobox.a11y.test.d.ts

@@ -1,2 +1,2 @@
-import '../textfield/textfield.js';
-import './combobox.js';
+import "../textfield/textfield.js";
+import "./combobox.js";

package/dist/packages/combobox/combobox.a11y.test.js

@@ -1,52 +1,99 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../textfield/textfield.js';
-import './combobox.js';
-describe('w-combobox accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../textfield/textfield.js";
+import "./combobox.js";
+describe("w-combobox accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
         const sampleOptions = [
-            { value: 'apple', label: 'Apple' },
-            { value: 'banana', label: 'Banana' },
-            { value: 'orange', label: 'Orange' },
+            { value: "apple", label: "Apple" },
+            { value: "banana", label: "Banana" },
+            { value: "orange", label: "Orange" },
         ];
-        test('default state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" .options="${sampleOptions}"></w-combobox>`);
+        test("default state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with help text has no violations', async () => {
+        test("with help text has no violations", async () => {
             const page = render(html `
-        <w-combobox
-          label="Select a fruit"
-          help-text="Start typing to filter options"
-          .options="${sampleOptions}"></w-combobox>
-      `);
+				<w-combobox
+					label="Select a fruit"
+					help-text="Start typing to filter options"
+					.options="${sampleOptions}"
+				></w-combobox>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('invalid state has no violations', async () => {
+        test("invalid state has no violations", async () => {
             const page = render(html `
-        <w-combobox
-          label="Select a fruit"
-          invalid
-          help-text="Please select a valid option"
-          .options="${sampleOptions}"></w-combobox>
-      `);
+				<w-combobox
+					label="Select a fruit"
+					invalid
+					help-text="Please select a valid option"
+					.options="${sampleOptions}"
+				></w-combobox>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" disabled .options="${sampleOptions}"></w-combobox>`);
+        test("disabled state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					disabled
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" required .options="${sampleOptions}"></w-combobox>`);
+        test("required state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					required
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('optional state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" optional .options="${sampleOptions}"></w-combobox>`);
+        test("optional state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					optional
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('open on focus state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" open-on-focus .options="${sampleOptions}"></w-combobox>`);
+        test("open on focus state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					open-on-focus
+					.options="${sampleOptions}"
+				></w-combobox>`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test("with light-DOM option children has no violations", async () => {
+            const page = render(html `
+				<w-combobox label="Select a fruit">
+					<option value="apple">Apple</option>
+					<option value="banana">Banana</option>
+					<option value="orange">Orange</option>
+				</w-combobox>
+			`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test("open with light-DOM option children has no violations", async () => {
+            const page = render(html `
+				<w-combobox data-testid="combobox" label="Select a fruit" open-on-focus>
+					<option value="apple">Apple</option>
+					<option value="banana">Banana</option>
+					<option value="orange">Orange</option>
+				</w-combobox>
+			`);
+            const el = (await page.getByTestId("combobox").element());
+            const input = el?.shadowRoot
+                ?.querySelector("w-textfield")
+                ?.shadowRoot?.querySelector("input");
+            input?.focus();
+            await new Promise((resolve) => setTimeout(resolve, 100));
             await expect(page).toHaveNoAxeViolations();
         });
     });

package/dist/packages/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export interface ComboboxOption {
     value: string;
     label?: string;
@@ -12,79 +12,94 @@ declare const WarpCombobox_base: import("@open-wc/form-control").Constructor<imp
  */
 export declare class WarpCombobox extends WarpCombobox_base {
     #private;
-    /** The available options to select from
-     * @summary
-     * @description
+    /**
+     * The available options to select from.
+     *
+     * Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.
      */
     options: ComboboxOption[];
-    /** Label above input
-     * @summary
-     * @description
+    /**
+     * The label displayed above the input.
+     *
+     * Use this to give the combobox a visible and accessible name.
      */
     label?: string;
-    /** Input placeholder
-     * @summary
-     * @description
+    /**
+     * Placeholder text displayed when the input is empty.
+     *
+     * Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.
      */
     placeholder?: string;
-    /** The input value
-     * @summary
-     * @description
+    /**
+     * The selected or typed value.
+     *
+     * When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.
      */
     value: string;
-    /** Whether the popover opens when focus is on the text field
-     * @summary
-     * @description
+    /**
+     * Whether the option list opens when the input receives focus.
+     *
+     * Use this when users should see available options before they start typing.
      */
     openOnFocus: boolean;
-    /** Select active option on blur
-     * @summary
-     * @description
+    /**
+     * Whether the active option is selected when the input loses focus.
+     *
+     * When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.
      */
     selectOnBlur: boolean;
-    /** Whether the matching text segments in the options should be highlighted
-     * @summary
-     * @description
+    /**
+     * Whether matching text segments in options are highlighted.
+     *
+     * Use this to visually emphasize the part of each option that matches the current input value.
      */
     matchTextSegments: boolean;
-    /** Disable client-side static filtering
-     * @summary
-     * @description
+    /**
+     * Whether built-in client-side filtering is disabled.
+     *
+     * Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.
      */
     disableStaticFiltering: boolean;
-    /** Renders the input field in an invalid state
-     * @summary
-     * @description
+    /**
+     * Whether the combobox is visually invalid.
+     *
+     * Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.
      */
     invalid: boolean;
-    /** The content to display as the help text
-     * @summary
-     * @description
+    /**
+     * Help text displayed below the input.
+     *
+     * Use this for supporting guidance or validation feedback.
      */
     helpText?: string;
-    /** Whether the element is disabled
-     * @summary
-     * @description
+    /**
+     * Whether the combobox is disabled.
+     *
+     * Disabled comboboxes cannot be focused, changed, or submitted with form data.
      */
     disabled: boolean;
-    /** Whether the element is required
-     * @summary
-     * @description
+    /**
+     * Whether the combobox is required before form submission.
+     *
+     * Use this when the user must provide a value before submitting the form.
      */
     required: boolean;
-    /** Whether to show optional text
-     * @summary
-     * @description
+    /**
+     * Whether to show optional text next to the label.
+     *
+     * Use this to indicate that the combobox is not required.
      */
     optional: boolean;
-    /** Name attribute for form submission
-     * @summary
-     * @description
+    /**
+     * The name submitted with the combobox value.
+     *
+     * Use this when the combobox belongs to a form and its value should be included in form data.
      */
     name?: string;
-    /** Autocomplete attribute for the input field
-     * @summary
-     * @description
+    /**
+     * The autocomplete attribute passed to the internal input.
+     *
+     * Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.
      */
     autocomplete?: string;
     /** @internal Options list open boolean */
@@ -93,18 +108,23 @@ export declare class WarpCombobox extends WarpCombobox_base {
     private _navigationOption;
     /** @internal Available options based on user's input value */
     private _currentOptions;
+    /** @internal Options parsed from light-DOM <option> children */
+    private _lightDomOptions;
     /** @internal Unique identifier counter for options */
     private _optionIdCounter;
     /** @internal The text displayed in the input field (may differ from value when option has label) */
     private _displayValue;
     static styles: import("lit").CSSResult[];
     constructor();
-    firstUpdated(changedProps: Map<string, unknown>): void;
+    firstUpdated(): void;
     updated(changedProperties: Map<string, unknown>): void;
     resetFormControl(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private get _listboxId();
     private get _id();
     private get _helpId();
+    private get _sourceOptions();
     /** Get the display text for the navigation option or current display value */
     private get _navigationLabelOrDisplayValue();
     /** Get the actual value for the navigation option or current value */

package/dist/packages/combobox/combobox.hydration.test.d.ts

@@ -1 +1 @@
-import './combobox.js';
+import "./combobox.js";