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

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -1,32 +1,32 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Textarea } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Textarea } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
-        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;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
+        onBlur?: ((e: Event) => void) | undefined;
+        onblur?: ((e: Event) => void) | undefined;
+        onChange?: ((e: Event) => void) | undefined;
+        onchange?: ((e: Event) => void) | undefined;
+        onInput?: ((e: Event) => void) | undefined;
+        oninput?: ((e: Event) => void) | undefined;
+        onFocus?: ((e: Event) => void) | undefined;
+        onfocus?: ((e: Event) => void) | undefined;
     } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
         helpText?: string;
         maxRows?: number;
         minRows?: number;
         readOnly?: boolean;
     } & React.RefAttributes<import("./textarea").WarpTextarea>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
-        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;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
+        onBlur?: ((e: Event) => void) | undefined;
+        onblur?: ((e: Event) => void) | undefined;
+        onChange?: ((e: Event) => void) | undefined;
+        onchange?: ((e: Event) => void) | undefined;
+        onInput?: ((e: Event) => void) | undefined;
+        oninput?: ((e: Event) => void) | undefined;
+        onFocus?: ((e: Event) => void) | undefined;
+        onfocus?: ((e: Event) => void) | undefined;
     } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
         helpText?: string;
         maxRows?: number;

package/dist/packages/textarea/textarea.react.stories.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Textarea } from './react';
+import React from "react";
+import { Textarea } from "./react";
 export default {
-    title: 'Forms/Textarea',
+    title: "Forms/Textarea",
     render(args) {
         return React.createElement(Textarea, { ...args });
     },
@@ -9,33 +9,33 @@ export default {
 };
 export const Default = {
     args: {
-        label: 'Email',
+        label: "Email",
     },
 };
 export const WithPlaceholder = {
     args: {
-        label: 'Email',
-        placeholder: 'user@example.com',
+        label: "Email",
+        placeholder: "user@example.com",
     },
 };
 export const WithHelpText = {
     args: {
-        label: 'Password',
-        helpText: 'Must be at least 8 characters',
+        label: "Password",
+        helpText: "Must be at least 8 characters",
     },
 };
 export const Invalid = {
     args: {
-        label: 'Email',
+        label: "Email",
         invalid: true,
-        helpText: 'Please enter a valid email address',
-        value: 'invalid-email',
+        helpText: "Please enter a valid email address",
+        value: "invalid-email",
     },
 };
 export const Disabled = {
     args: {
-        label: 'Email',
+        label: "Email",
         disabled: true,
-        value: 'user@example.com',
+        value: "user@example.com",
     },
 };

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

@@ -1,8 +1,8 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Textarea } from './react.js';
-describeReactSsrAttributeMapping('Textarea', Textarea, [
-    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
-    { propName: 'maxRows', attrName: 'maximum-rows', value: 5 },
-    { propName: 'minRows', attrName: 'minimum-rows', value: 2 },
-    { propName: 'readOnly', attrName: 'read-only' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Textarea } from "./react.js";
+describeReactSsrAttributeMapping("Textarea", Textarea, [
+    { propName: "helpText", attrName: "help-text", value: "Help text" },
+    { propName: "maxRows", attrName: "maximum-rows", value: 5 },
+    { propName: "minRows", attrName: "minimum-rows", value: 2 },
+    { propName: "readOnly", attrName: "read-only" },
 ]);

package/dist/packages/textarea/textarea.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpTextarea } from './textarea.js';
-import './textarea.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpTextarea } from "./textarea.js";
+import "./textarea.js";
 declare const args: Partial<WarpTextarea> & {
     [key: string]: any;
 };

package/dist/packages/textarea/textarea.stories.js

@@ -1,11 +1,11 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './textarea.js';
-const { events, args, argTypes } = getStorybookHelpers('w-textarea');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./textarea.js";
+const { events, args, argTypes } = getStorybookHelpers("w-textarea");
 const meta = {
-    title: 'Forms/Textarea',
+    title: "Forms/Textarea",
     render(args) {
         return html `<w-textarea ${spread(prespread(args))}></w-textarea>`;
     },
@@ -20,93 +20,95 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        label: 'Description',
+        label: "Description",
     },
 };
 export const WithPlaceholder = {
     args: {
-        label: 'Description',
-        placeholder: 'A Link to the Past is a distant prequel to the original The Legend of Zelda',
+        label: "Description",
+        placeholder: "A Link to the Past is a distant prequel to the original The Legend of Zelda",
     },
 };
 export const WithHelpText = {
     args: {
-        label: 'Description',
-        'help-text': 'You can provide a help text if necessary',
+        label: "Description",
+        "help-text": "You can provide a help text if necessary",
     },
 };
 export const NoVisualLabel = {
     args: {
-        'aria-label': 'Description',
+        "aria-label": "Description",
     },
 };
 export const Invalid = {
     args: {
-        label: 'Description',
+        label: "Description",
         invalid: true,
-        'help-text': 'A description is required',
+        "help-text": "A description is required",
     },
 };
 export const Disabled = {
     args: {
-        label: 'Description',
+        label: "Description",
         disabled: true,
         value: 'A Link to the Past is a distant prequel to the original The Legend of Zelda, and, within the official chronology, is the first game in the "Defeated Hero" timeline that connects to an alternate reality scenario where the Hero of Time does not succeed in Ocarina of Time.',
     },
 };
 export const ReadOnly = {
     args: {
-        label: 'Description',
-        'read-only': true,
+        label: "Description",
+        "read-only": true,
         value: 'A Link to the Past is a distant prequel to the original The Legend of Zelda, and, within the official chronology, is the first game in the "Defeated Hero" timeline that connects to an alternate reality scenario where the Hero of Time does not succeed in Ocarina of Time.',
     },
 };
 export const Optional = {
     args: {
-        label: 'Description',
+        label: "Description",
         optional: true,
     },
 };
 export const ControlledSize = {
     args: {
-        label: 'Description',
-        'minimum-rows': 3,
-        'maximum-rows': 3,
+        label: "Description",
+        "minimum-rows": 3,
+        "maximum-rows": 3,
     },
 };
 export const Autofocus = {
     args: {
-        label: 'Description',
-        'minimum-rows': 3,
-        'maximum-rows': 3,
-        placeholder: 'Refresh to see the autofocus take effect',
+        label: "Description",
+        "minimum-rows": 3,
+        "maximum-rows": 3,
+        placeholder: "Refresh to see the autofocus take effect",
         autofocus: true,
     },
 };
 export const FormParticipation = {
     render: () => html `
-    <form
-      @submit=${(e) => {
+		<form
+			@submit=${(e) => {
         e.preventDefault();
         const form = e.target;
         const formData = new FormData(form);
-        alert('Form submitted with message: ' + formData.get('message'));
-    }}>
-      <w-textarea
-        label="Message"
-        name="message"
-        required
-        help-text="This field is required. Try submitting without a value."></w-textarea>
-      <div style="margin-top: 16px; display: flex; gap: 8px;">
-        <button type="submit">Submit</button>
-        <button type="reset">Reset</button>
-      </div>
-    </form>
-  `,
+        alert("Form submitted with message: " + formData.get("message"));
+    }}
+		>
+			<w-textarea
+				label="Message"
+				name="message"
+				required
+				help-text="This field is required. Try submitting without a value."
+			></w-textarea>
+			<div style="margin-top: 16px; display: flex; gap: 8px;">
+				<button type="submit">Submit</button>
+				<button type="reset">Reset</button>
+			</div>
+		</form>
+	`,
     parameters: {
         docs: {
             description: {
-                story: 'Demonstrates form validation using ElementInternals. The textarea participates in native form validation - submission is blocked when the required field is empty, and the browser shows a validation message.',
+                story: "Demonstrates form validation using ElementInternals. The textarea participates in native form validation - submission is blocked when the required field is empty, and the browser shows a validation message.",
             },
         },
     },

package/dist/packages/textarea/textarea.test.d.ts

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

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

@@ -1,175 +1,211 @@
-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 { 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 () => {
     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");
 });

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;