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

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

@@ -1,136 +1,261 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../textfield/textfield.js';
-import './combobox.js';
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../textfield/textfield.js";
+import "./combobox.js";
 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");
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    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");
+});
+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>
+	`;
     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 input = el.shadowRoot
+        ?.querySelector("w-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 visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    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 () => {
+    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>
+	`;
+    const page = render(component);
+    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 selectEvents = [];
+    el.addEventListener("select", (event) => selectEvents.push(event));
+    input.focus();
+    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 || [], (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" });
+});
+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>
+	`;
+    const page = render(component);
+    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");
+});
+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>
+	`;
+    const page = render(component);
+    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";
+    el.appendChild(denmark);
+    const sweden = el.querySelector('option[value="se"]');
+    sweden?.remove();
+    const norway = el.querySelector('option[value="no"]');
+    norway?.setAttribute("value", "nor");
+    if (norway) {
+        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 || [], (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" }];
+    const component = html `
+		<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");
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    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 || [], (opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(["Apple"]);
 });

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

@@ -1,10 +1,18 @@
-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 { WarpCombobox } from "./combobox.js";
+export declare const Combobox: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCombobox>, "value" | "form" | "label" | "autocomplete" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "required" | "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" | "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;
 } & 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,27 @@
-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",
     },
 });
 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";

package/dist/packages/datepicker/DatePicker.test.js

@@ -1,58 +1,62 @@
-import { server, userEvent } from 'vitest/browser';
-import React, { useState } from 'react';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-react';
-import '../button/button.js';
-import './datepicker.js';
-import { DatePicker } from './react.js';
-test('renders the date picker component', async () => {
+import React, { useState } from "react";
+import { expect, test, vi } from "vitest";
+import { server, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import "../button/button.js";
+import "./datepicker.js";
+import { DatePicker } from "./react.js";
+test("renders the date picker component", async () => {
     const page = await render(React.createElement("form", null,
         React.createElement(DatePicker, { label: "From date" })));
-    await expect.element(page.getByLabelText('From date')).toBeVisible();
+    await expect.element(page.getByLabelText("From date")).toBeVisible();
 });
-test('can pick a date using a pointer', async () => {
+test("can pick a date using a pointer", async () => {
     const page = await render(React.createElement("form", { "data-testid": "flight" },
         React.createElement(DatePicker, { label: "From date", name: "from" })));
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    await page.getByRole('button').click({ force: true });
-    await page.getByRole('gridcell').nth(15).click();
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    await page.getByRole("button").click({ force: true });
+    await page.getByRole("gridcell").nth(15).click();
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test.skipIf(server.browser === 'firefox')('can pick a date using keyboard', async () => {
+test.skipIf(server.browser === "firefox")("can pick a date using keyboard", async () => {
     const page = await render(React.createElement("form", { "data-testid": "flight" },
         React.createElement(DatePicker, { label: "From date", name: "from" })));
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    await expect.element(page.getByTestId('calendar').query()).not.toBeVisible();
-    const toggle = page.getByRole('button').element();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    await expect
+        .element(page.getByTestId("calendar").query())
+        .not.toBeVisible();
+    const toggle = page.getByRole("button").element();
     toggle.focus();
-    await userEvent.keyboard('[Enter]');
-    await expect.element(page.getByTestId('calendar')).toBeVisible();
-    page.getByRole('gridcell').nth(15).element().focus();
-    await userEvent.keyboard('[Enter]');
+    await userEvent.keyboard("[Enter]");
+    await expect.element(page.getByTestId("calendar")).toBeVisible();
+    page.getByRole("gridcell").nth(15).element().focus();
+    await userEvent.keyboard("[Enter]");
     await expect
-        .element(page.getByTestId('calendar').query(), { message: 'expected calendar to close after clicking a date' })
+        .element(page.getByTestId("calendar").query(), {
+        message: "expected calendar to close after clicking a date",
+    })
         .not.toBeVisible();
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test('can pick a date by typing in the input field', async () => {
+test("can pick a date by typing in the input field", async () => {
     const page = await render(React.createElement("form", { "data-testid": "flight" },
         React.createElement(DatePicker, { label: "From date", name: "from" })));
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    const toggle = page.getByLabelText('From date').element();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    const toggle = page.getByLabelText("From date").element();
     toggle.focus();
-    await page.getByLabelText('From date').fill('2025-01-01');
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await page.getByLabelText("From date").fill("2025-01-01");
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test('allows for the controlled component pattern', async () => {
+test("allows for the controlled component pattern", async () => {
     const spy = vi.fn();
     const TestComponent = () => {
-        const [value, setValue] = useState('');
+        const [value, setValue] = useState("");
         return (React.createElement("form", { "data-testid": "flight" },
             React.createElement(DatePicker, { label: "From date", name: "from", value: value, onChange: (e) => {
                     const nextValue = e.target.value;
@@ -61,9 +65,12 @@ test('allows for the controlled component pattern', async () => {
                 } })));
     };
     const page = await render(React.createElement(TestComponent, null));
-    await page.getByRole('button').click({ force: true });
-    await page.getByRole('gridcell').nth(15).click();
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    // Check that our controlled onChange handler got to set the value back on the element
-    expect(spy).toBeCalledWith(page.getByLabelText('From date').element().value);
+    await page.getByRole("button").click({ force: true });
+    await page.getByRole("gridcell").nth(15).click();
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    // Controlled consumers should receive the ISO value, even when the visible input text is localized.
+    const selectedValue = spy.mock.calls.at(-1)?.[0];
+    expect(selectedValue).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(document.querySelector("w-datepicker")
+        .value).toBe(selectedValue);
 });