@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

package/dist/packages/tabs/tabs.test.js

@@ -1,169 +1,183 @@
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../tab/tab.js';
-import '../tab-panel/tab-panel.js';
-import './tabs.js';
-test('renders the different tab components', async () => {
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../tab/tab.js";
+import "../tab-panel/tab-panel.js";
+import "./tabs.js";
+test("renders the different tab components", async () => {
     const component = html `<w-tabs>
-    <w-tab for="fellowship">Fellowship</w-tab>
-    <w-tab-panel id="fellowship">
-      <p>And my axe!</p>
-    </w-tab-panel>
+		<w-tab for="fellowship">Fellowship</w-tab>
+		<w-tab-panel id="fellowship">
+			<p>And my axe!</p>
+		</w-tab-panel>
 
-    <w-tab for="towers">Towers</w-tab>
-    <w-tab-panel id="towers">
-      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
-    </w-tab-panel>
+		<w-tab for="towers">Towers</w-tab>
+		<w-tab-panel id="towers">
+			<p>I am on nobody's side, because nobody is on my side, little orc.</p>
+		</w-tab-panel>
 
-    <w-tab for="return">Return</w-tab>
-    <w-tab-panel id="return">
-      <p>I am no man.</p>
-    </w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="return">Return</w-tab>
+		<w-tab-panel id="return">
+			<p>I am no man.</p>
+		</w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
     // defaults to the first tab if the active property is not set
-    await expect.element(page.getByText('And my axe!')).toBeVisible();
-    await expect.element(page.getByText("I am on nobody's side")).not.toBeVisible();
-    await expect.element(page.getByText('I am no man')).not.toBeVisible();
+    await expect.element(page.getByText("And my axe!")).toBeVisible();
+    await expect
+        .element(page.getByText("I am on nobody's side"))
+        .not.toBeVisible();
+    await expect.element(page.getByText("I am no man")).not.toBeVisible();
 });
-test('can control the visible tab with the active attribute', async () => {
+test("can control the visible tab with the active attribute", async () => {
     const component = html `<w-tabs active="towers">
-    <w-tab for="fellowship">Fellowship</w-tab>
-    <w-tab-panel id="fellowship">
-      <p>And my axe!</p>
-    </w-tab-panel>
+		<w-tab for="fellowship">Fellowship</w-tab>
+		<w-tab-panel id="fellowship">
+			<p>And my axe!</p>
+		</w-tab-panel>
 
-    <w-tab for="towers">Towers</w-tab>
-    <w-tab-panel id="towers">
-      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
-    </w-tab-panel>
+		<w-tab for="towers">Towers</w-tab>
+		<w-tab-panel id="towers">
+			<p>I am on nobody's side, because nobody is on my side, little orc.</p>
+		</w-tab-panel>
 
-    <w-tab for="return">Return</w-tab>
-    <w-tab-panel id="return">
-      <p>I am no man.</p>
-    </w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="return">Return</w-tab>
+		<w-tab-panel id="return">
+			<p>I am no man.</p>
+		</w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
     await expect.element(page.getByText("I am on nobody's side")).toBeVisible();
-    await expect.element(page.getByText('And my axe!')).not.toBeVisible();
-    await expect.element(page.getByText('I am no man')).not.toBeVisible();
+    await expect.element(page.getByText("And my axe!")).not.toBeVisible();
+    await expect.element(page.getByText("I am no man")).not.toBeVisible();
 });
-test('clicking a tab changes the active attribute, visible tab panel', async () => {
+test("clicking a tab changes the active attribute, visible tab panel", async () => {
     const component = html `<w-tabs active="towers">
-    <w-tab for="fellowship">Fellowship</w-tab>
-    <w-tab-panel id="fellowship">
-      <p>And my axe!</p>
-    </w-tab-panel>
+		<w-tab for="fellowship">Fellowship</w-tab>
+		<w-tab-panel id="fellowship">
+			<p>And my axe!</p>
+		</w-tab-panel>
 
-    <w-tab for="towers">Towers</w-tab>
-    <w-tab-panel id="towers">
-      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
-    </w-tab-panel>
+		<w-tab for="towers">Towers</w-tab>
+		<w-tab-panel id="towers">
+			<p>I am on nobody's side, because nobody is on my side, little orc.</p>
+		</w-tab-panel>
 
-    <w-tab for="return">Return</w-tab>
-    <w-tab-panel id="return">
-      <p>I am no man.</p>
-    </w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="return">Return</w-tab>
+		<w-tab-panel id="return">
+			<p>I am no man.</p>
+		</w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
     // Query tabs by element tag name since role is set via ElementInternals
-    const tabs = page.container.querySelectorAll('w-tab');
+    const tabs = page.container.querySelectorAll("w-tab");
     await userEvent.click(tabs[2]);
-    await page.container.querySelector('w-tabs').updateComplete;
-    await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
-    await expect.element(page.getByText('I am no man')).toBeVisible();
-    await expect.element(page.getByText('And my axe!')).not.toBeVisible();
-    await expect.element(page.getByText("I am on nobody's side")).not.toBeVisible();
+    await page.container.querySelector("w-tabs").updateComplete;
+    await page.container.querySelectorAll("w-tab-panel")[2].updateComplete;
+    await expect.element(page.getByText("I am no man")).toBeVisible();
+    await expect.element(page.getByText("And my axe!")).not.toBeVisible();
+    await expect
+        .element(page.getByText("I am on nobody's side"))
+        .not.toBeVisible();
 });
-test('switches panel content when panels are initialized with hidden attribute', async () => {
+test("switches panel content when panels are initialized with hidden attribute", async () => {
     const component = html `<w-tabs active="tab2">
-    <w-tab for="tab1">First Tab</w-tab>
-    <w-tab-panel id="tab1">
-      <p>Content for the first tab.</p>
-    </w-tab-panel>
+		<w-tab for="tab1">First Tab</w-tab>
+		<w-tab-panel id="tab1">
+			<p>Content for the first tab.</p>
+		</w-tab-panel>
 
-    <w-tab for="tab2">Second Tab</w-tab>
-    <w-tab-panel id="tab2" hidden>
-      <p>Content for the second tab.</p>
-    </w-tab-panel>
+		<w-tab for="tab2">Second Tab</w-tab>
+		<w-tab-panel id="tab2" hidden>
+			<p>Content for the second tab.</p>
+		</w-tab-panel>
 
-    <w-tab for="tab3">Third Tab</w-tab>
-    <w-tab-panel id="tab3" hidden>
-      <p>Content for the third tab.</p>
-    </w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="tab3">Third Tab</w-tab>
+		<w-tab-panel id="tab3" hidden>
+			<p>Content for the third tab.</p>
+		</w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
-    await page.container.querySelector('w-tabs').updateComplete;
-    await expect.element(page.getByText('Content for the second tab.')).toBeVisible();
-    await expect.element(page.getByText('Content for the first tab.')).not.toBeVisible();
-    await expect.element(page.getByText('Content for the third tab.')).not.toBeVisible();
-    const tabs = page.container.querySelectorAll('w-tab');
+    await page.container.querySelector("w-tabs").updateComplete;
+    await expect
+        .element(page.getByText("Content for the second tab."))
+        .toBeVisible();
+    await expect
+        .element(page.getByText("Content for the first tab."))
+        .not.toBeVisible();
+    await expect
+        .element(page.getByText("Content for the third tab."))
+        .not.toBeVisible();
+    const tabs = page.container.querySelectorAll("w-tab");
     await userEvent.click(tabs[2]);
-    await page.container.querySelector('w-tabs').updateComplete;
-    await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
-    await expect.element(page.getByText('Content for the third tab.')).toBeVisible();
-    await expect.element(page.getByText('Content for the second tab.')).not.toBeVisible();
+    await page.container.querySelector("w-tabs").updateComplete;
+    await page.container.querySelectorAll("w-tab-panel")[2].updateComplete;
+    await expect
+        .element(page.getByText("Content for the third tab."))
+        .toBeVisible();
+    await expect
+        .element(page.getByText("Content for the second tab."))
+        .not.toBeVisible();
 });
-test('tab-panel visibility is controlled via internal shadow DOM (no host attribute changes) to avoid hydration mismatch', async () => {
+test("tab-panel visibility is controlled via internal shadow DOM (no host attribute changes) to avoid hydration mismatch", async () => {
     const component = html `<w-tabs>
-    <w-tab for="panel1">Tab 1</w-tab>
-    <w-tab-panel id="panel1">
-      <p>Content 1</p>
-    </w-tab-panel>
+		<w-tab for="panel1">Tab 1</w-tab>
+		<w-tab-panel id="panel1">
+			<p>Content 1</p>
+		</w-tab-panel>
 
-    <w-tab for="panel2">Tab 2</w-tab>
-    <w-tab-panel id="panel2">
-      <p>Content 2</p>
-    </w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="panel2">Tab 2</w-tab>
+		<w-tab-panel id="panel2">
+			<p>Content 2</p>
+		</w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
     // Wait for tabs component to initialize
-    await page.container.querySelector('w-tabs').updateComplete;
-    const panels = page.container.querySelectorAll('w-tab-panel');
+    await page.container.querySelector("w-tabs").updateComplete;
+    const panels = page.container.querySelectorAll("w-tab-panel");
     // Visibility is controlled via internal shadow DOM elements, not host attributes
     // This avoids hydration mismatches when parent sets _parentActive
     expect(panels[0].active).toBe(true);
     expect(panels[1].active).toBe(false);
     // Internal shadow DOM wrapper has data-active attribute for CSS visibility
-    const activeWrapper = panels[0].shadowRoot?.querySelector('.panel-content');
-    const inactiveWrapper = panels[1].shadowRoot?.querySelector('.panel-content');
-    expect(activeWrapper?.hasAttribute('data-active')).toBe(true);
-    expect(inactiveWrapper?.hasAttribute('data-active')).toBe(false);
+    const activeWrapper = panels[0].shadowRoot?.querySelector(".panel-content");
+    const inactiveWrapper = panels[1].shadowRoot?.querySelector(".panel-content");
+    expect(activeWrapper?.hasAttribute("data-active")).toBe(true);
+    expect(inactiveWrapper?.hasAttribute("data-active")).toBe(false);
     // Verify visibility works correctly
-    await expect.element(page.getByText('Content 1')).toBeVisible();
-    await expect.element(page.getByText('Content 2')).not.toBeVisible();
+    await expect.element(page.getByText("Content 1")).toBeVisible();
+    await expect.element(page.getByText("Content 2")).not.toBeVisible();
 });
-test('aria-selected uses ElementInternals (no DOM attribute) to avoid hydration mismatch', async () => {
+test("aria-selected uses ElementInternals (no DOM attribute) to avoid hydration mismatch", async () => {
     const component = html `<w-tabs>
-    <w-tab for="panel1">Tab 1</w-tab>
-    <w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
+		<w-tab for="panel1">Tab 1</w-tab>
+		<w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
 
-    <w-tab for="panel2">Tab 2</w-tab>
-    <w-tab-panel id="panel2"><p>Content 2</p></w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="panel2">Tab 2</w-tab>
+		<w-tab-panel id="panel2"><p>Content 2</p></w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
-    const tabsEl = page.container.querySelector('w-tabs');
+    const tabsEl = page.container.querySelector("w-tabs");
     await tabsEl.updateComplete;
-    const tabs = page.container.querySelectorAll('w-tab');
+    const tabs = page.container.querySelectorAll("w-tab");
     // aria-selected is set via ElementInternals, not as a DOM attribute (to avoid hydration mismatch)
-    expect(tabs[0].hasAttribute('aria-selected')).toBe(false);
-    expect(tabs[1].hasAttribute('aria-selected')).toBe(false);
+    expect(tabs[0].hasAttribute("aria-selected")).toBe(false);
+    expect(tabs[1].hasAttribute("aria-selected")).toBe(false);
     // But the property should be set correctly by the parent
-    expect(tabs[0].ariaSelected).toBe('true');
-    expect(tabs[1].ariaSelected).toBe('false');
+    expect(tabs[0].ariaSelected).toBe("true");
+    expect(tabs[1].ariaSelected).toBe("false");
 });
-test('w-tab does not mutate host aria-controls by default', async () => {
+test("w-tab does not mutate host aria-controls by default", async () => {
     const component = html `<w-tabs>
-    <w-tab for="panel1">Tab 1</w-tab>
-    <w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
-  </w-tabs>`;
+		<w-tab for="panel1">Tab 1</w-tab>
+		<w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
+	</w-tabs>`;
     const page = render(component);
-    const tabsEl = page.container.querySelector('w-tabs');
+    const tabsEl = page.container.querySelector("w-tabs");
     await tabsEl.updateComplete;
-    const tab = page.container.querySelector('w-tab');
-    const internalButton = tab.shadowRoot?.querySelector('button');
-    expect(tab.hasAttribute('aria-controls')).toBe(false);
-    expect(internalButton?.getAttribute('aria-controls')).toBe('panel1');
+    const tab = page.container.querySelector("w-tab");
+    const internalButton = tab.shadowRoot?.querySelector("button");
+    expect(tab.hasAttribute("aria-controls")).toBe(false);
+    expect(internalButton?.getAttribute("aria-controls")).toBe("panel1");
 });

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpTextarea } from './textarea.js';
+import React from "react";
+import { WarpTextarea } from "./textarea.js";
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<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" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
     onBlur?: ((e: Event) => void) | undefined;
     onblur?: ((e: Event) => void) | undefined;

package/dist/packages/textarea/react.js

@@ -1,30 +1,30 @@
-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 BaseTextarea = createComponent({
-    tagName: 'w-textarea',
+    tagName: "w-textarea",
     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",
     },
 });
 export const Textarea = React.forwardRef(({ helpText, maxRows, minRows, readOnly, ...props }, ref) => React.createElement(BaseTextarea, {
     ...props,
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
-    ...(maxRows !== undefined ? { 'maximum-rows': maxRows } : {}),
-    ...(minRows !== undefined ? { 'minimum-rows': minRows } : {}),
-    ...(readOnly ? { 'read-only': true } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
+    ...(maxRows !== undefined ? { "maximum-rows": maxRows } : {}),
+    ...(minRows !== undefined ? { "minimum-rows": minRows } : {}),
+    ...(readOnly ? { "read-only": true } : {}),
     ref,
 }));
-Textarea.displayName = 'Textarea';
+Textarea.displayName = "Textarea";

package/dist/packages/textarea/styles.js

@@ -1,2 +1,2 @@
-import { unsafeCSS } from 'lit';
+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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.flex{display:flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.fixed{position:fixed}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.visible{visibility:visible}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.resize{resize:both}.resize-none{resize:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}");

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

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

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

@@ -1,111 +1,143 @@
-import { i18n } from '@lingui/core';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import { messages } from './locales/en/messages.mjs';
-import './textarea.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import { messages } from "./locales/en/messages.mjs";
+import "./textarea.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', messages);
-i18n.activate('en');
-describe('w-textarea accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
+i18n.load("en", messages);
+i18n.activate("en");
+describe("w-textarea accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
         // go through setting the various attributes and running automated AXE tests on each
-        test('default state has no violations', async () => {
+        test("default state has no violations", async () => {
             const page = render(html `<w-textarea label="Message"></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with help text has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" help-text="Enter your message"></w-textarea>`);
+        test("with help text has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					help-text="Enter your message"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('invalid state has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" invalid help-text="This field is required"></w-textarea>`);
+        test("invalid state has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					invalid
+					help-text="This field is required"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" disabled></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('readonly state has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" readonly value="Read only text"></w-textarea>`);
+        test("readonly state has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					readonly
+					value="Read only text"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required state has no violations', async () => {
+        test("required state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" required></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('optional state has no violations', async () => {
+        test("optional state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('textarea has accessible name from label', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("textarea has accessible name from label", async () => {
             const page = render(html `<w-textarea label="Description"></w-textarea>`);
             // this checks that after we set the label to "Description", the textbox's accessible name is also "Description".
             // accessible name is derived from the label (or aria-label / aria-labelledby) if present (which they are not in this case)
-            await expect.element(page.getByRole('textbox', { name: 'Description' })).toBeVisible();
+            await expect
+                .element(page.getByRole("textbox", { name: "Description" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 3.3.1 - Error Identification', () => {
-        test('error state is indicated via aria-invalid', async () => {
+    describe("WCAG 3.3.1 - Error Identification", () => {
+        test("error state is indicated via aria-invalid", async () => {
             const page = render(html `<w-textarea label="Message" invalid></w-textarea>`);
-            await expect.element(page.getByLabelText('Message')).toHaveAttribute('aria-invalid', 'true');
-        });
-        test('error message is associated via aria-errormessage', async () => {
-            const page = render(html `<w-textarea label="Message" invalid help-text="Field is required"></w-textarea>`);
-            await expect.element(page.getByLabelText('Message')).toHaveAccessibleErrorMessage('Field is required');
+            await expect
+                .element(page.getByLabelText("Message"))
+                .toHaveAttribute("aria-invalid", "true");
+        });
+        test("error message is associated via aria-errormessage", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					invalid
+					help-text="Field is required"
+				></w-textarea>`);
+            await expect
+                .element(page.getByLabelText("Message"))
+                .toHaveAccessibleErrorMessage("Field is required");
         });
     });
-    describe('WCAG 3.3.2 - Labels or Instructions', () => {
-        test('help text is programmatically associated', async () => {
-            const page = render(html `<w-textarea label="Bio" help-text="Tell us about yourself"></w-textarea>`);
-            await expect.element(page.getByLabelText('Bio')).toHaveAccessibleDescription('Tell us about yourself');
+    describe("WCAG 3.3.2 - Labels or Instructions", () => {
+        test("help text is programmatically associated", async () => {
+            const page = render(html `<w-textarea
+					label="Bio"
+					help-text="Tell us about yourself"
+				></w-textarea>`);
+            await expect
+                .element(page.getByLabelText("Bio"))
+                .toHaveAccessibleDescription("Tell us about yourself");
         });
     });
     // these tests essentially verify that the attributes we set on the host are mirrored to the internal textarea
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('required state is exposed', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("required state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" required></w-textarea>`);
             // getByLabelText resolves to the internal <textarea>, not the host element
-            await expect.element(page.getByLabelText('Name')).toHaveAttribute('required');
+            await expect
+                .element(page.getByLabelText("Name"))
+                .toHaveAttribute("required");
         });
-        test('disabled state is exposed', async () => {
+        test("disabled state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" disabled></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toBeDisabled();
+            await expect.element(page.getByLabelText("Name")).toBeDisabled();
         });
-        test('readonly state is exposed', async () => {
+        test("readonly state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" readonly></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toHaveAttribute('readonly');
+            await expect
+                .element(page.getByLabelText("Name"))
+                .toHaveAttribute("readonly");
         });
-        test('value is exposed', async () => {
+        test("value is exposed", async () => {
             const page = render(html `<w-textarea label="Name" value="Hello"></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toHaveValue('Hello');
+            await expect.element(page.getByLabelText("Name")).toHaveValue("Hello");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('textarea is focusable', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("textarea is focusable", async () => {
             const page = render(html `<w-textarea label="Message"></w-textarea>`);
-            const textarea = page.getByLabelText('Message');
+            const textarea = page.getByLabelText("Message");
             await textarea.click();
             // Check focus via activeElement - delegatesFocus means the shadow root's textarea gets focus
-            const wTextarea = document.querySelector('w-textarea');
-            await expect.poll(() => wTextarea?.shadowRoot?.activeElement?.tagName).toBe('TEXTAREA');
-        });
-        test('disabled textarea is not focusable', async () => {
-            const page = render(html `
-        <button>Before</button>
-        <w-textarea label="Message" disabled></w-textarea>
-        <button>After</button>
-      `);
-            const buttons = Array.from(document.querySelectorAll('button'));
+            const wTextarea = document.querySelector("w-textarea");
+            await expect
+                .poll(() => wTextarea?.shadowRoot?.activeElement?.tagName)
+                .toBe("TEXTAREA");
+        });
+        test("disabled textarea is not focusable", async () => {
+            render(html `
+				<button>Before</button>
+				<w-textarea label="Message" disabled></w-textarea>
+				<button>After</button>
+			`);
+            const buttons = [...document.querySelectorAll("button")];
             const beforeBtn = buttons[0];
             const afterBtn = buttons[1];
             expect(beforeBtn).toBeDefined();
             expect(afterBtn).toBeDefined();
             beforeBtn.focus();
             // Attempt to move focus to the disabled textarea; focus should remain on "Before".
-            const wTextarea = document.querySelector('w-textarea');
+            const wTextarea = document.querySelector("w-textarea");
             wTextarea?.click();
             await expect.element(beforeBtn).toHaveFocus();
             // Verify disabled textarea doesn't receive focus

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

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * A multi-line text input with built-in form validation, auto-resizing, and styling support.

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

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