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

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

@@ -1,246 +1,362 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../textfield/textfield.js';
-import './combobox.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../textfield/textfield.js";
+import "./combobox.js";
+import { messages as textfieldMessages } from "../textfield/locales/en/messages.mjs";
+import { messages as textfieldNbMessages } from "../textfield/locales/nb/messages.mjs";
+// Initialize i18n with English locale for tests (combobox uses textfield's messages)
+i18n.load("en", textfieldMessages);
+i18n.load("nb", textfieldNbMessages);
+i18n.activate("en");
 test('renders with autocomplete="off" on inner textfield when attribute not provided', async () => {
     const component = html `<w-combobox data-testid="combobox"></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
     // The autocomplete attribute is not reflected on the outer element to avoid hydration mismatches
     // Instead, check that the inner textfield receives the correct default value
-    const textfield = el.shadowRoot?.querySelector('w-textfield');
-    expect(textfield?.autocomplete).toBe('off');
+    const textfield = el.shadowRoot?.querySelector("w-textfield");
+    expect(textfield?.autocomplete).toBe("off");
 });
-test('renders with autocomplete attribute when provided', async () => {
-    const component = html `<w-combobox data-testid="combobox" autocomplete="on"></w-combobox>`;
+test("renders with autocomplete attribute when provided", async () => {
+    const component = html `<w-combobox
+		data-testid="combobox"
+		autocomplete="on"
+	></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    expect(el.getAttribute('autocomplete')).toBe('on');
+    expect(el.getAttribute("autocomplete")).toBe("on");
 });
-test('displays initial value correctly when value prop is set', async () => {
+test("displays initial value correctly when value prop is set", async () => {
     const options = [
-        { value: 'apple', label: 'Apple' },
-        { value: 'banana', label: 'Banana' },
+        { value: "apple", label: "Apple" },
+        { value: "banana", label: "Banana" },
     ];
     const component = html `<w-combobox
-    data-testid="combobox"
-    value="apple"
-    .options="${options}"
-  ></w-combobox>`;
+		data-testid="combobox"
+		value="apple"
+		.options="${options}"
+	></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
     // Get the textfield's input element
-    const textfield = el.shadowRoot?.querySelector('w-textfield');
-    const input = textfield?.shadowRoot?.querySelector('input');
+    const textfield = el.shadowRoot?.querySelector("w-textfield");
+    const input = textfield?.shadowRoot?.querySelector("input");
     // Verify the displayed text shows the label "Apple", not the value "apple"
-    expect(input?.value).toBe('Apple');
+    expect(input?.value).toBe("Apple");
     // Verify the combobox value is "apple"
-    expect(el.value).toBe('apple');
+    expect(el.value).toBe("apple");
 });
-test('filters options by label, not value', async () => {
+test("filters options by label, not value", async () => {
     const options = [
-        { value: 'us', label: 'United States' },
-        { value: 'uk', label: 'United Kingdom' },
-        { value: 'no', label: 'Norway' },
+        { value: "us", label: "United States" },
+        { value: "uk", label: "United Kingdom" },
+        { value: "no", label: "Norway" },
     ];
     const component = html `<w-combobox
-    data-testid="combobox"
-    open-on-focus
-    .options="${options}"
-  ></w-combobox>`;
+		data-testid="combobox"
+		open-on-focus
+		.options="${options}"
+	></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
     // Get the textfield's input element
-    const textfield = el.shadowRoot?.querySelector('w-textfield');
-    const input = textfield?.shadowRoot?.querySelector('input');
+    const textfield = el.shadowRoot?.querySelector("w-textfield");
+    const input = textfield?.shadowRoot?.querySelector("input");
     // Type "United" which should match labels "United States" and "United Kingdom"
     // but NOT match any values (us, uk, no)
     input?.focus();
-    input.value = 'United';
-    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    input.value = "United";
+    input.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
     await new Promise((resolve) => setTimeout(resolve, 100));
     // Check that the dropdown shows the matching options
     const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
     const visibleOptions = listbox?.querySelectorAll('[role="option"]');
     // Should show 2 options: "United States" and "United Kingdom"
     expect(visibleOptions?.length).toBe(2);
-    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
-    expect(optionTexts).toContain('United States');
-    expect(optionTexts).toContain('United Kingdom');
-    expect(optionTexts).not.toContain('Norway');
+    const optionTexts = Array.from(visibleOptions || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toContain("United States");
+    expect(optionTexts).toContain("United Kingdom");
+    expect(optionTexts).not.toContain("Norway");
 });
-test('displays option label in textfield but stores option value', async () => {
+test("displays option label in textfield but stores option value", async () => {
     const optionsWithDifferentLabelAndValue = [
-        { value: 'us', label: 'United States' },
-        { value: 'uk', label: 'United Kingdom' },
-        { value: 'no', label: 'Norway' },
+        { value: "us", label: "United States" },
+        { value: "uk", label: "United Kingdom" },
+        { value: "no", label: "Norway" },
     ];
     const component = html `<w-combobox
-    data-testid="combobox"
-    open-on-focus
-    .options="${optionsWithDifferentLabelAndValue}"
-  ></w-combobox>`;
+		data-testid="combobox"
+		open-on-focus
+		.options="${optionsWithDifferentLabelAndValue}"
+	></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
     // Get the textfield's input element
-    const textfield = el.shadowRoot?.querySelector('w-textfield');
-    const input = textfield?.shadowRoot?.querySelector('input');
+    const textfield = el.shadowRoot?.querySelector("w-textfield");
+    const input = textfield?.shadowRoot?.querySelector("input");
     // Focus to open the dropdown
     input?.focus();
     await new Promise((resolve) => setTimeout(resolve, 100));
     // Find and click the "Norway" option (which has value "no")
     const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
     const options = listbox?.querySelectorAll('[role="option"]');
-    const norwayOption = Array.from(options || []).find((opt) => opt.textContent?.trim() === 'Norway');
+    const norwayOption = [...(options || [])].find((opt) => opt.textContent?.trim() === "Norway");
     expect(norwayOption).toBeDefined();
     // Simulate mousedown on the option
-    norwayOption?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    norwayOption?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
     await new Promise((resolve) => setTimeout(resolve, 100));
     // Verify the displayed text is the label "Norway", not the value "no"
-    expect(input?.value).toBe('Norway');
+    expect(input?.value).toBe("Norway");
     // Verify the combobox value is "no", not "Norway"
-    expect(el.value).toBe('no');
+    expect(el.value).toBe("no");
 });
-test('announces suggestion count when opened on focus with empty input', async () => {
+test("announces suggestion count when opened on focus with empty input", async () => {
     const options = [
-        { value: 'apple', label: 'Apple' },
-        { value: 'banana', label: 'Banana' },
-        { value: 'orange', label: 'Orange' },
+        { value: "apple", label: "Apple" },
+        { value: "banana", label: "Banana" },
+        { value: "orange", label: "Orange" },
     ];
     const component = html `<w-combobox
-    data-testid="combobox"
-    open-on-focus
-    .options="${options}"
-  ></w-combobox>`;
+		data-testid="combobox"
+		open-on-focus
+		.options="${options}"
+	></w-combobox>`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const textfield = el.shadowRoot?.querySelector('w-textfield');
-    const input = textfield?.shadowRoot?.querySelector('input');
+    const textfield = el.shadowRoot?.querySelector("w-textfield");
+    const input = textfield?.shadowRoot?.querySelector("input");
     input?.focus();
     await new Promise((resolve) => setTimeout(resolve, 100));
-    const statusText = el.shadowRoot?.querySelector('[role="status"]')?.textContent?.trim();
-    expect(statusText).toBe('3 suggestions');
+    const statusText = el.shadowRoot
+        ?.querySelector('[role="status"]')
+        ?.textContent?.trim();
+    expect(statusText).toBe("3 suggestions");
 });
-test('renders light-DOM option children in the generated popup', async () => {
+test("renders light-DOM option children in the generated popup", async () => {
     const component = html `
-    <w-combobox data-testid="combobox" open-on-focus>
-      <option value="no">Norway</option>
-      <option value="se">Sweden</option>
-      <option value="dk">Denmark</option>
-    </w-combobox>
-  `;
+		<w-combobox data-testid="combobox" open-on-focus>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+			<option value="dk">Denmark</option>
+		</w-combobox>
+	`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const input = el.shadowRoot
+        ?.querySelector("w-textfield")
+        ?.shadowRoot?.querySelector("input");
     input?.focus();
     await new Promise((resolve) => setTimeout(resolve, 100));
     const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
-    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
-    expect(optionTexts).toEqual(['Norway', 'Sweden', 'Denmark']);
+    const optionTexts = Array.from(visibleOptions || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(["Norway", "Sweden", "Denmark"]);
 });
-test('filters light-DOM options by label attribute and stores option value on select', async () => {
+test("filters light-DOM options by label attribute and stores option value on select", async () => {
     const component = html `
-    <w-combobox data-testid="combobox" open-on-focus>
-      <option value="us" label="United States">US</option>
-      <option value="uk" label="United Kingdom">UK</option>
-      <option value="no">Norway</option>
-    </w-combobox>
-  `;
+		<w-combobox data-testid="combobox" open-on-focus>
+			<option value="us" label="United States">US</option>
+			<option value="uk" label="United Kingdom">UK</option>
+			<option value="no">Norway</option>
+		</w-combobox>
+	`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const input = el.shadowRoot
+        ?.querySelector("w-textfield")
+        ?.shadowRoot?.querySelector("input");
     const selectEvents = [];
-    el.addEventListener('select', (event) => selectEvents.push(event));
+    el.addEventListener("select", (event) => selectEvents.push(event));
     input.focus();
-    input.value = 'United';
-    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    input.value = "United";
+    input.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
     await new Promise((resolve) => setTimeout(resolve, 100));
     const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
-    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
-    expect(optionTexts).toEqual(['United States', 'United Kingdom']);
-    visibleOptions?.[1]?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    const optionTexts = Array.from(visibleOptions || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(["United States", "United Kingdom"]);
+    visibleOptions?.[1]?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
     await new Promise((resolve) => setTimeout(resolve, 100));
-    expect(input.value).toBe('United Kingdom');
-    expect(el.value).toBe('uk');
-    expect(selectEvents.at(-1)?.detail).toEqual({ value: 'uk' });
+    expect(input.value).toBe("United Kingdom");
+    expect(el.value).toBe("uk");
+    expect(selectEvents.at(-1)?.detail).toEqual({ value: "uk" });
 });
-test('uses light-DOM options to display an initial value label', async () => {
+test("uses light-DOM options to display an initial value label", async () => {
     const component = html `
-    <w-combobox data-testid="combobox" value="no">
-      <option value="se">Sweden</option>
-      <option value="no">Norway</option>
-    </w-combobox>
-  `;
+		<w-combobox data-testid="combobox" value="no">
+			<option value="se">Sweden</option>
+			<option value="no">Norway</option>
+		</w-combobox>
+	`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
-    expect(input.value).toBe('Norway');
-    expect(el.value).toBe('no');
+    const input = el.shadowRoot
+        ?.querySelector("w-textfield")
+        ?.shadowRoot?.querySelector("input");
+    expect(input.value).toBe("Norway");
+    expect(el.value).toBe("no");
 });
-test('syncs dynamic light-DOM option child changes', async () => {
+test("syncs dynamic light-DOM option child changes", async () => {
     const component = html `
-    <w-combobox data-testid="combobox" open-on-focus>
-      <option value="no">Norway</option>
-      <option value="se">Sweden</option>
-    </w-combobox>
-  `;
+		<w-combobox data-testid="combobox" open-on-focus>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
-    const denmark = document.createElement('option');
-    denmark.value = 'dk';
-    denmark.textContent = 'Denmark';
+    const input = el.shadowRoot
+        ?.querySelector("w-textfield")
+        ?.shadowRoot?.querySelector("input");
+    const denmark = document.createElement("option");
+    denmark.value = "dk";
+    denmark.textContent = "Denmark";
     el.appendChild(denmark);
     const sweden = el.querySelector('option[value="se"]');
     sweden?.remove();
     const norway = el.querySelector('option[value="no"]');
-    norway?.setAttribute('value', 'nor');
+    norway?.setAttribute("value", "nor");
     if (norway) {
-        norway.textContent = 'Norge';
+        norway.textContent = "Norge";
     }
     await new Promise((resolve) => setTimeout(resolve, 100));
     input.focus();
     await new Promise((resolve) => setTimeout(resolve, 100));
     const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
-    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
-    expect(optionTexts).toEqual(['Norge', 'Denmark']);
+    const optionTexts = Array.from(visibleOptions || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(["Norge", "Denmark"]);
 });
-test('non-empty options property takes precedence over light-DOM option children', async () => {
-    const options = [{ value: 'apple', label: 'Apple' }];
+test("non-empty options property takes precedence over light-DOM option children", async () => {
+    const options = [{ value: "apple", label: "Apple" }];
     const component = html `
-    <w-combobox data-testid="combobox" open-on-focus .options="${options}">
-      <option value="banana">Banana</option>
-    </w-combobox>
-  `;
+		<w-combobox data-testid="combobox" open-on-focus .options="${options}">
+			<option value="banana">Banana</option>
+		</w-combobox>
+	`;
     const page = render(component);
-    const locator = page.getByTestId('combobox');
+    const locator = page.getByTestId("combobox");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const input = el.shadowRoot
+        ?.querySelector("w-textfield")
+        ?.shadowRoot?.querySelector("input");
     input.focus();
     await new Promise((resolve) => setTimeout(resolve, 100));
     const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
-    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
-    expect(optionTexts).toEqual(['Apple']);
+    const optionTexts = Array.from(visibleOptions || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(["Apple"]);
+});
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `
+		<w-combobox label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    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-combobox label="Country" required optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    await expect.element(page.getByText("Country")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `
+		<w-combobox label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    // The inner textfield with role="combobox" should have accessible name including Optional
+    await expect
+        .element(page.getByRole("textbox", { name: /Country.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `
+		<w-combobox label="Country" optional data-testid="field">
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    const el = page.getByTestId("field").element();
+    el.required = true;
+    await el.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("shows optional indicator when required is removed dynamically", async () => {
+    const page = render(html `
+		<w-combobox label="Country" required optional data-testid="field">
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const el = page.getByTestId("field").element();
+    el.required = false;
+    await el.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+});
+test("does not render optional indicator when there is no label", async () => {
+    const page = render(html `
+		<w-combobox aria-label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    await expect.element(page.getByLabelText("Country")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from accessible name when required suppresses it", async () => {
+    const page = render(html `
+		<w-combobox label="Country" required optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    const input = page.getByRole("textbox", { name: "Country" });
+    await expect.element(input).toBeVisible();
+    // Verify "Optional" is not part of the accessible name
+    expect(page.getByRole("textbox", { name: /Optional/ }).query()).toBeNull();
+});
+test("renders localized optional text based on document lang", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `
+		<w-combobox label="Country" optional data-testid="field">
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-combobox>
+	`);
+    const el = page.getByTestId("field").element();
+    await el.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
 });

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

@@ -1,10 +1,31 @@
-import React from 'react';
-import { WarpCombobox } from './combobox.js';
-export declare const Combobox: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
-    onSelect?: (e: Event) => void;
-    onselect?: (e: Event) => void;
-    onChange?: (e: Event) => void;
-    onchange?: (e: Event) => void;
+import React from "react";
+import type { WarpCombobox } from "./combobox.js";
+/**
+ * A combobox element for text input with selectable options.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
+ */
+export declare const Combobox: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCombobox>, "autocomplete" | "name" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "placeholder" | "required" | "value" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+    onSelect?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onselect?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onChange?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onchange?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onBlur?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onblur?: ((e: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    onFocus?: ((e: CustomEvent<any>) => void) | undefined;
+    onfocus?: ((e: CustomEvent<any>) => void) | undefined;
 } & Partial<Omit<WarpCombobox, keyof HTMLElement>> & React.RefAttributes<WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
     openOnFocus?: boolean;
     selectOnBlur?: boolean;

package/dist/packages/combobox/react.js

@@ -1,27 +1,36 @@
-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 BaseCombobox = createComponent({
-    tagName: 'w-combobox',
+    tagName: "w-combobox",
     elementClass: Component,
     react: React,
     events: {
-        onSelect: 'select',
-        onselect: 'select',
-        onChange: 'change',
-        onchange: 'change',
+        onSelect: "select",
+        onselect: "select",
+        onChange: "change",
+        onchange: "change",
+        onBlur: "blur",
+        onblur: "blur",
+        onFocus: "focus",
+        onfocus: "focus",
     },
 });
+/**
+ * A combobox element for text input with selectable options.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
+ */
 export const Combobox = React.forwardRef(({ openOnFocus, selectOnBlur, matchTextSegments, disableStaticFiltering, helpText, ...props }, ref) => React.createElement(BaseCombobox, {
     ...props,
-    ...(openOnFocus ? { 'open-on-focus': true } : {}),
-    ...(selectOnBlur ? { 'select-on-blur': true } : {}),
-    ...(matchTextSegments ? { 'match-text-segments': true } : {}),
-    ...(disableStaticFiltering ? { 'disable-static-filtering': true } : {}),
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(openOnFocus ? { "open-on-focus": true } : {}),
+    ...(selectOnBlur ? { "select-on-blur": true } : {}),
+    ...(matchTextSegments ? { "match-text-segments": true } : {}),
+    ...(disableStaticFiltering ? { "disable-static-filtering": true } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
     ref,
 }));
-Combobox.displayName = 'Combobox';
+Combobox.displayName = "Combobox";

package/dist/packages/combobox/styles.js

@@ -1,3 +1,2 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none};
-.z-0{z-index:0;}.z-20{z-index:20;}`;
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.z-0{z-index:0}.z-20{z-index:20}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.visible{visibility:visible}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none}");

package/dist/packages/datepicker/DatePicker.test.d.ts

@@ -1,2 +1,2 @@
-import '../button/button.js';
-import './datepicker.js';
+import "../button/button.js";
+import "./datepicker.js";