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

package/dist/packages/textarea/textarea.test.js

@@ -1,175 +1,284 @@
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './textarea.js';
-test('renders the textarea', async () => {
+import { i18n } from "@lingui/core";
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./textarea.js";
+import { messages } from "./locales/en/messages.mjs";
+import { messages as nbMessages } from "./locales/nb/messages.mjs";
+// Initialize i18n with English locale for tests
+i18n.load("en", messages);
+i18n.load("nb", nbMessages);
+i18n.activate("en");
+test("renders the textarea", async () => {
     const component = html `<w-textarea label="Test label"></w-textarea>`;
     const page = render(component);
-    await expect.element(page.getByText('Test label')).toBeVisible();
+    await expect.element(page.getByText("Test label")).toBeVisible();
 });
-test('works as expected in forms', async () => {
-    const label = 'Test label';
+test("works as expected in forms", async () => {
+    const label = "Test label";
     const component = html `
-    <form data-testid="form">
-      <w-textarea label="${label}" name="message" value="Hola el Mundo"></w-textarea>
-    </form>
-  `;
+		<form data-testid="form">
+			<w-textarea
+				label="${label}"
+				name="message"
+				value="Hola el Mundo"
+			></w-textarea>
+		</form>
+	`;
     const page = render(component);
-    await expect.element(page.getByLabelText(label)).toHaveValue('Hola el Mundo');
-    let formData = new FormData(page.getByTestId('form').element());
-    expect(formData.get('message')).toBe('Hola el Mundo');
+    await expect.element(page.getByLabelText(label)).toHaveValue("Hola el Mundo");
+    let formData = new FormData(page.getByTestId("form").element());
+    expect(formData.get("message")).toBe("Hola el Mundo");
     const inputHandler = vi.fn();
     const changeHandler = vi.fn();
-    page.getByLabelText(label).element().addEventListener('input', inputHandler);
-    page.getByLabelText(label).element().addEventListener('change', changeHandler);
-    await page.getByLabelText(label).fill('Hello, World');
+    page.getByLabelText(label).element().addEventListener("input", inputHandler);
+    page
+        .getByLabelText(label)
+        .element()
+        .addEventListener("change", changeHandler);
+    await page.getByLabelText(label).fill("Hello, World");
     expect(inputHandler).toHaveBeenCalled();
     expect(changeHandler).not.toHaveBeenCalled();
     await userEvent.tab(); // trigger a blur to fire the change event
     await expect.poll(() => changeHandler.mock.calls.length).toBeGreaterThan(0);
-    await expect.element(page.getByLabelText(label)).toHaveValue('Hello, World');
-    formData = new FormData(page.getByTestId('form').element());
-    expect(formData.get('message')).toBe('Hello, World');
+    await expect.element(page.getByLabelText(label)).toHaveValue("Hello, World");
+    formData = new FormData(page.getByTestId("form").element());
+    expect(formData.get("message")).toBe("Hello, World");
 });
-test('renders help text if provided', async () => {
-    const component = html `<w-textarea label="Test label" help-text="Helpful help text"></w-textarea>`;
+test("renders help text if provided", async () => {
+    const component = html `<w-textarea
+		label="Test label"
+		help-text="Helpful help text"
+	></w-textarea>`;
     const page = render(component);
-    await expect.element(page.getByText('Helpful help text')).toBeVisible();
+    await expect.element(page.getByText("Helpful help text")).toBeVisible();
 });
-test('marks input field as aria-invalid if the invalid prop is true', async () => {
-    const component = html `<w-textarea label="Test label" invalid help-text="No, bad input!"></w-textarea>`;
+test("marks input field as aria-invalid if the invalid prop is true", async () => {
+    const component = html `<w-textarea
+		label="Test label"
+		invalid
+		help-text="No, bad input!"
+	></w-textarea>`;
     const page = render(component);
-    await expect.element(page.getByLabelText('Test label')).toHaveAccessibleErrorMessage('No, bad input!');
+    await expect
+        .element(page.getByLabelText("Test label"))
+        .toHaveAccessibleErrorMessage("No, bad input!");
 });
-test('aria-invalid attribute is absent when textarea is valid', async () => {
-    const component = html `<w-textarea label="Test label" data-testid="textarea"></w-textarea>`;
+test("aria-invalid attribute is absent when textarea is valid", async () => {
+    const component = html `<w-textarea
+		label="Test label"
+		data-testid="textarea"
+	></w-textarea>`;
     const page = render(component);
-    const textarea = page.getByLabelText('Test label');
+    const textarea = page.getByLabelText("Test label");
     await expect.element(textarea).toBeVisible();
     // aria-invalid should NOT be present when valid
-    await expect.element(textarea).not.toHaveAttribute('aria-invalid');
+    await expect.element(textarea).not.toHaveAttribute("aria-invalid");
 });
 test('aria-invalid attribute is "true" when textarea is invalid', async () => {
     const component = html `<w-textarea label="Test label" invalid></w-textarea>`;
     const page = render(component);
-    const textarea = page.getByLabelText('Test label');
+    const textarea = page.getByLabelText("Test label");
     await expect.element(textarea).toBeVisible();
     // aria-invalid should be "true" when invalid
-    await expect.element(textarea).toHaveAttribute('aria-invalid', 'true');
+    await expect.element(textarea).toHaveAttribute("aria-invalid", "true");
 });
-test('marks input field as readonly if the readonly prop is true', async () => {
+test("marks input field as readonly if the readonly prop is true", async () => {
     const component = html `<w-textarea label="Test label" readonly></w-textarea>`;
     const page = render(component);
-    await expect.element(page.getByLabelText('Test label')).toHaveAttribute('readonly', '');
+    await expect
+        .element(page.getByLabelText("Test label"))
+        .toHaveAttribute("readonly", "");
 });
-test('can reset textarea by resetting surrounding form', async () => {
+test("can reset textarea by resetting surrounding form", async () => {
     render(html `
-    <form>
-      <w-textarea name="message" value="Hola el Mundo"></w-textarea>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wTextArea = document.querySelector('w-textarea');
+		<form>
+			<w-textarea name="message" value="Hola el Mundo"></w-textarea>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wTextArea = document.querySelector("w-textarea");
     // sanity
     expect(form).not.toBeNull();
     expect(wTextArea).not.toBeNull();
-    await expect.poll(() => wTextArea.value).toBe('Hola el Mundo');
-    wTextArea.value = 'Definitely not Hola el Mundo';
-    await expect.poll(() => wTextArea.value).toBe('Definitely not Hola el Mundo');
+    await expect.poll(() => wTextArea.value).toBe("Hola el Mundo");
+    wTextArea.value = "Definitely not Hola el Mundo";
+    await expect.poll(() => wTextArea.value).toBe("Definitely not Hola el Mundo");
     // Reset the form
     form.reset();
-    await expect.poll(() => wTextArea.value).toBe('Hola el Mundo');
+    await expect.poll(() => wTextArea.value).toBe("Hola el Mundo");
 });
-test('checkValidity returns false when required textarea is empty', async () => {
+test("checkValidity returns false when required textarea is empty", async () => {
     render(html `<w-textarea label="Message" name="message" required></w-textarea>`);
-    const wTextArea = document.querySelector('w-textarea');
+    const wTextArea = document.querySelector("w-textarea");
     // Wait for component to be ready
     await expect.poll(() => wTextArea.checkValidity()).toBe(false);
     expect(wTextArea.validity.valueMissing).toBe(true);
-    expect(wTextArea.validationMessage).not.toBe('');
+    expect(wTextArea.validationMessage).not.toBe("");
 });
-test('checkValidity returns true when required textarea has a value', async () => {
-    render(html `<w-textarea label="Message" name="message" required value="Hello"></w-textarea>`);
-    const wTextArea = document.querySelector('w-textarea');
+test("checkValidity returns true when required textarea has a value", async () => {
+    render(html `<w-textarea
+			label="Message"
+			name="message"
+			required
+			value="Hello"
+		></w-textarea>`);
+    const wTextArea = document.querySelector("w-textarea");
     // Wait for component to be ready
     await expect.poll(() => wTextArea.checkValidity()).toBe(true);
     expect(wTextArea.validity.valid).toBe(true);
 });
-test('form submission is blocked when required textarea is empty', async () => {
+test("form submission is blocked when required textarea is empty", async () => {
     const submitHandler = vi.fn((e) => e.preventDefault());
     render(html `
-    <form data-testid="form">
-      <w-textarea label="Message" name="message" required></w-textarea>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    form.addEventListener('submit', submitHandler);
-    const wTextArea = document.querySelector('w-textarea');
+		<form data-testid="form">
+			<w-textarea label="Message" name="message" required></w-textarea>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    form.addEventListener("submit", submitHandler);
+    const wTextArea = document.querySelector("w-textarea");
     // Wait for component to be ready
     await expect.poll(() => wTextArea.checkValidity()).toBe(false);
     // Try to submit - should be blocked by validation
-    const submitButton = document.querySelector('button');
+    const submitButton = document.querySelector("button");
     submitButton.click();
     // Component should show invalid state with error message
     await expect.poll(() => wTextArea.invalid).toBe(true);
-    await expect.poll(() => wTextArea.helpText).not.toBe('');
+    await expect.poll(() => wTextArea.helpText).not.toBe("");
     // Form should not have been submitted
     expect(submitHandler).not.toHaveBeenCalled();
 });
-test('form submission succeeds when required textarea has a value', async () => {
+test("form submission succeeds when required textarea has a value", async () => {
     const submitHandler = vi.fn((e) => e.preventDefault());
     render(html `
-    <form data-testid="form">
-      <w-textarea label="Message" name="message" required value="Hello"></w-textarea>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    form.addEventListener('submit', submitHandler);
-    const wTextArea = document.querySelector('w-textarea');
+		<form data-testid="form">
+			<w-textarea
+				label="Message"
+				name="message"
+				required
+				value="Hello"
+			></w-textarea>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    form.addEventListener("submit", submitHandler);
+    const wTextArea = document.querySelector("w-textarea");
     // Wait for component to be ready
     await expect.poll(() => wTextArea.checkValidity()).toBe(true);
     // Submit should succeed
-    const submitButton = document.querySelector('button');
+    const submitButton = document.querySelector("button");
     submitButton.click();
     // Form should have been submitted
     await expect.poll(() => submitHandler.mock.calls.length).toBeGreaterThan(0);
 });
-test('shows validation error on blur when required field is empty', async () => {
+test("shows validation error on blur when required field is empty", async () => {
     const page = render(html `<w-textarea label="Message" name="message" required></w-textarea>`);
-    const wTextArea = document.querySelector('w-textarea');
+    const wTextArea = document.querySelector("w-textarea");
     // Initially should not show error (no interaction yet)
     await expect.poll(() => wTextArea.invalid).toBeFalsy();
     // Focus and blur the textarea
-    const textarea = page.getByLabelText('Message');
+    const textarea = page.getByLabelText("Message");
     await textarea.click();
     await userEvent.tab(); // blur
     // Should now show validation error
     await expect.poll(() => wTextArea.invalid).toBe(true);
-    await expect.poll(() => wTextArea.helpText).not.toBe('');
+    await expect.poll(() => wTextArea.helpText).not.toBe("");
 });
-test('restores original help text when validation passes', async () => {
+test("restores original help text when validation passes", async () => {
     const page = render(html `
-    <w-textarea label="Message" name="message" required help-text="Enter your message"></w-textarea>
-  `);
-    const wTextArea = document.querySelector('w-textarea');
+		<w-textarea
+			label="Message"
+			name="message"
+			required
+			help-text="Enter your message"
+		></w-textarea>
+	`);
+    const wTextArea = document.querySelector("w-textarea");
     // Initially should show original help text
-    await expect.poll(() => wTextArea.helpText).toBe('Enter your message');
+    await expect.poll(() => wTextArea.helpText).toBe("Enter your message");
     // Focus and blur to trigger validation
-    const textarea = page.getByLabelText('Message');
+    const textarea = page.getByLabelText("Message");
     await textarea.click();
     await userEvent.tab();
     // Should show validation error
     await expect.poll(() => wTextArea.invalid).toBe(true);
-    await expect.poll(() => wTextArea.helpText).not.toBe('Enter your message');
+    await expect.poll(() => wTextArea.helpText).not.toBe("Enter your message");
     // Fill in a value
-    wTextArea.value = 'Hello';
+    wTextArea.value = "Hello";
     await wTextArea.updateComplete;
     // Wait for value + validity to update, then restore original help text
-    await expect.poll(() => wTextArea.value).toBe('Hello');
+    await expect.poll(() => wTextArea.value).toBe("Hello");
     await expect.poll(() => wTextArea.checkValidity()).toBe(true);
     await expect.poll(() => wTextArea.invalid).toBe(false);
-    await expect.poll(() => wTextArea.helpText).toBe('Enter your message');
+    await expect.poll(() => wTextArea.helpText).toBe("Enter your message");
+});
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
+    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-textarea label="Message" required optional></w-textarea>`);
+    await expect.element(page.getByText("Message")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
+    await expect
+        .element(page.getByRole("textbox", { name: /Message.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `<w-textarea
+			label="Message"
+			optional
+			data-testid="field"
+		></w-textarea>`);
+    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-textarea
+			label="Message"
+			required
+			optional
+			data-testid="field"
+		></w-textarea>`);
+    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-textarea aria-label="Message" optional></w-textarea>`);
+    await expect.element(page.getByLabelText("Message")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from accessible name when required suppresses it", async () => {
+    const page = render(html `<w-textarea label="Message" required optional></w-textarea>`);
+    const textarea = page.getByRole("textbox", { name: "Message" });
+    await expect.element(textarea).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 active locale", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `<w-textarea
+			label="Message"
+			optional
+			data-testid="field"
+		></w-textarea>`);
+    const el = page.getByTestId("field").element();
+    await el.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
 });

package/dist/packages/textfield/input-styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared styles for input components (textfield, textarea, select)
+ * using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Label: --w-c-input-label-*
+ * - Help text: --w-c-input-help-text-*
+ * - Optional indicator: --w-c-input-optional-*
+ */
+export declare const inputLabelStyles: import("lit").CSSResult;
+export declare const inputHelpTextStyles: import("lit").CSSResult;

package/dist/packages/textfield/input-styles.js

@@ -0,0 +1,88 @@
+import { css } from "lit";
+/**
+ * Shared styles for input components (textfield, textarea, select)
+ * using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Label: --w-c-input-label-*
+ * - Help text: --w-c-input-help-text-*
+ * - Optional indicator: --w-c-input-optional-*
+ */
+export const inputLabelStyles = css `
+	/* Label component tokens with semantic fallbacks */
+	label {
+		/* Internal tokens - not part of public API */
+		--_color: var(--w-c-input-label-color, var(--w-s-color-text));
+		--_font-size: var(--w-c-input-label-font-size, var(--w-font-size-s));
+		--_line-height: var(--w-c-input-label-line-height, var(--w-line-height-s));
+		--_font-weight: var(--w-c-input-label-font-weight, 700);
+		--_padding-bottom: var(--w-c-input-label-padding-bottom, 0.4rem);
+		--_cursor: var(--w-c-input-label-cursor, pointer);
+		--_display: var(--w-c-input-label-display, block);
+
+		/* Apply styles */
+		display: var(--_display);
+		position: relative;
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
+		padding-bottom: var(--_padding-bottom);
+		cursor: var(--_cursor);
+		color: var(--_color);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	/* Optional text styling */
+	label span {
+		--_padding-left: var(--w-c-input-optional-padding-left, 0.8rem);
+		--_font-weight: var(--w-c-input-optional-font-weight, 400);
+		--_font-size: var(--w-c-input-optional-font-size, var(--w-font-size-s));
+		--_line-height: var(
+			--w-c-input-optional-line-height,
+			var(--w-line-height-s)
+		);
+		--_color: var(--w-c-input-optional-color, var(--w-s-color-text-subtle));
+
+		padding-left: var(--_padding-left);
+		font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		color: var(--_color);
+	}
+`;
+export const inputHelpTextStyles = css `
+	/* Help text component tokens with semantic fallbacks */
+	:host {
+		--_help-text-color: var(
+			--w-c-input-help-text-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_help-text-font-size: var(
+			--w-c-input-help-text-font-size,
+			var(--w-font-size-xs)
+		);
+		--_help-text-line-height: var(
+			--w-c-input-help-text-line-height,
+			var(--w-line-height-xs)
+		);
+		--_help-text-margin-top: var(--w-c-input-help-text-margin-top, 0.4rem);
+		--_help-text-display: var(--w-c-input-help-text-display, block);
+	}
+
+	/* Invalid state overrides color */
+	:host([invalid]) {
+		--_help-text-color: var(
+			--w-c-input-help-text-color-invalid,
+			var(--w-s-color-text-negative)
+		);
+	}
+
+	.help-text {
+		font-size: var(--_help-text-font-size);
+		line-height: var(--_help-text-line-height);
+		margin-top: var(--_help-text-margin-top);
+		display: var(--_help-text-display);
+		color: var(--_help-text-color);
+	}
+`;

package/dist/packages/textfield/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/textfield/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valgfri\"]}");

package/dist/packages/textfield/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/textfield/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Optional\"]}");

package/dist/packages/textfield/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/textfield/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valinnainen\"]}");

package/dist/packages/textfield/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/textfield/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valgfri\"]}");

package/dist/packages/textfield/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/textfield/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valfritt\"]}");

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

@@ -1,14 +1,20 @@
-import React from 'react';
-import { WarpTextField } from './textfield.js';
-export declare const TextField: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
-    onBlur?: (e: Event) => void;
-    onblur?: (e: Event) => void;
-    onChange?: (e: Event) => void;
-    onchange?: (e: Event) => void;
-    onInput?: (e: Event) => void;
-    oninput?: (e: Event) => void;
-    onFocus?: (e: Event) => void;
-    onfocus?: (e: Event) => void;
+import React from "react";
+import type { ChangeEventWithTarget, InputEventWithTarget } from "../types.js";
+import type { WarpTextField } from "./textfield.js";
+/**
+ * A single-line input component used for entering and editing textual or numeric data.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+ */
+export declare const TextField: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextField>, "autocomplete" | "name" | "type" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "size" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "pattern" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "step" | "formatter" | "mask" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+    onBlur?: ((e: FocusEvent) => void) | undefined;
+    onblur?: ((e: FocusEvent) => void) | undefined;
+    onChange?: ((e: ChangeEventWithTarget<HTMLInputElement>) => void) | undefined;
+    onchange?: ((e: ChangeEventWithTarget<HTMLInputElement>) => void) | undefined;
+    onInput?: ((e: InputEventWithTarget<HTMLInputElement>) => void) | undefined;
+    oninput?: ((e: InputEventWithTarget<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onfocus?: ((e: FocusEvent) => void) | undefined;
 } & Partial<Omit<WarpTextField, keyof HTMLElement>> & React.RefAttributes<WarpTextField>, "ref">, "help-text" | "min-length" | "max-length" | "read-only"> & {
     helpText?: string;
     minLength?: number;

package/dist/packages/textfield/react.js

@@ -1,30 +1,35 @@
-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 BaseTextField = createComponent({
-    tagName: 'w-textfield',
+    tagName: "w-textfield",
     elementClass: Component,
     react: React,
     events: {
-        onBlur: 'blur',
-        onblur: 'blur',
-        onChange: 'change',
-        onchange: 'change',
-        onInput: 'input',
-        oninput: 'input',
-        onFocus: 'focus',
-        onfocus: 'focus',
+        onBlur: "blur",
+        onblur: "blur",
+        onChange: "change",
+        onchange: "change",
+        onInput: "input",
+        oninput: "input",
+        onFocus: "focus",
+        onfocus: "focus",
     },
 });
+/**
+ * A single-line input component used for entering and editing textual or numeric data.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+ */
 export const TextField = React.forwardRef(({ helpText, minLength, maxLength, readOnly, ...props }, ref) => React.createElement(BaseTextField, {
     ...props,
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
-    ...(minLength !== undefined ? { 'min-length': minLength } : {}),
-    ...(maxLength !== undefined ? { 'max-length': maxLength } : {}),
-    ...(readOnly ? { 'read-only': true } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
+    ...(minLength !== undefined ? { "min-length": minLength } : {}),
+    ...(maxLength !== undefined ? { "max-length": maxLength } : {}),
+    ...(readOnly ? { "read-only": true } : {}),
     ref,
 }));
-TextField.displayName = 'TextField';
+TextField.displayName = "TextField";

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

@@ -0,0 +1 @@
+import "./textfield.js";

package/dist/packages/textfield/react.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { expect, test, vi } from "vitest";
+import { TextField } from "./react.js";
+import "./textfield.js";
+test("onChange and onInput have the expected types", async () => {
+    const onChange = vi.fn();
+    const onInput = vi.fn();
+    const page = await render(React.createElement(TextField, { name: "test", label: "React TextField", onChange: (e) => {
+            onChange(e.target.value);
+        }, onInput: (e) => {
+            onInput(e.target.value);
+        } }));
+    await page.getByLabelText("React TextField").fill("Hello, World");
+    expect(onInput).toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    await userEvent.tab(); // trigger a blur to fire the change event
+    expect(onChange).toHaveBeenCalledWith("Hello, World");
+});