@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

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

@@ -1,122 +1,215 @@
-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";
+import { messages } from "./locales/en/messages.mjs";
 // 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", messages);
+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();
+});
+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");
+});
+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();
+});
+test("renders optional indicator as 'Optional' without parentheses", 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();
+    expect(page.getByText("(optional)").query()).toBeNull();
+});
+test("does not render optional indicator when both required and optional are set", async () => {
+    const page = render(html `
+		<w-checkbox-group label="Preferences" required optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("Preferences")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", 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.getByRole("group", { name: /Preferences.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", 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();
+    const group = document.querySelector("w-checkbox-group");
+    group.required = true;
+    await group.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
 });
-i18n.activate('en');
-test('renders help text when provided', async () => {
+test("shows optional indicator when required is removed dynamically", 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 label="Preferences" required optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const group = document.querySelector("w-checkbox-group");
+    group.required = false;
+    await group.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
 });
-test('associates help text with the group', async () => {
+test("does not render optional indicator when there is no label", 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 aria-label="Preferences" optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const group = document.querySelector("w-checkbox-group");
+    await group.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
 });
-test('renders label above the group and associates it', async () => {
+test("excludes optional indicator from accessible name when required suppresses 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" required optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const group = page.getByRole("group", { name: "Preferences" });
+    await expect.element(group).toBeVisible();
+    // Verify "Optional" is not part of the accessible name
+    expect(page.getByRole("group", { name: /Optional/ }).query()).toBeNull();
 });
-test('renders optional text when optional is true', async () => {
+test("updates optional text when locale changes", async () => {
+    i18n.load("nb", {
+        "checkbox-group.label.optional": ["Valgfri"],
+    });
     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>
+	`);
+    const group = document.querySelector("w-checkbox-group");
+    await group.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    i18n.activate("nb");
+    await group.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    i18n.activate("en");
 });
-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,12 @@
-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" | "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<WarpCheckboxGroup, keyof HTMLElement>> & React.RefAttributes<WarpCheckboxGroup>, "ref">, "help-text"> & {
+import React from "react";
+import type { WarpCheckboxGroup } from "./checkbox-group.js";
+/**
+ * Checkboxes allow users to select one or more options from a number of choices.
+ *
+ * Wrap individual checkboxes in a checkbox group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCheckboxGroup>, "name" | "invalid" | "label" | "helpText" | "optional" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "form" | "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<WarpCheckboxGroup>>;

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

@@ -1,17 +1,24 @@
-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,
 });
+/**
+ * Checkboxes allow users to select one or more options from a number of choices.
+ *
+ * Wrap individual checkboxes in a checkbox group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
+ */
 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,74 +1,97 @@
-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 () => {
+        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>
-      `);
+				<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 () => {
+        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');
+				<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;
@@ -8,7 +8,7 @@ declare const WarpCombobox_base: import("@open-wc/form-control").Constructor<imp
 /**
  * A combobox element for text input with selectable options.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
  */
 export declare class WarpCombobox extends WarpCombobox_base {
     #private;
@@ -116,7 +116,7 @@ export declare class WarpCombobox extends WarpCombobox_base {
     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;
@@ -156,4 +156,9 @@ export declare class WarpCombobox extends WarpCombobox_base {
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-combobox": WarpCombobox;
+    }
+}
 export {};

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

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