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

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/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/textarea/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/textarea/locales/da/messages.mjs

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +1,20 @@
-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" | "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;
+import React from "react";
+import type { WarpTextarea } from "./textarea.js";
+import type { ChangeEventWithTarget, InputEventWithTarget } from "../types.js";
+/**
+ * A multi-line text input with built-in form validation, auto-resizing, and styling support.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextarea>, "name" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "maxRows" | "minRows" | "setCustomValidity" | "_textareaStyles"> & {
+    onBlur?: ((e: FocusEvent) => void) | undefined;
+    onblur?: ((e: FocusEvent) => void) | undefined;
+    onChange?: ((e: ChangeEventWithTarget<HTMLTextAreaElement>) => void) | undefined;
+    onchange?: ((e: ChangeEventWithTarget<HTMLTextAreaElement>) => void) | undefined;
+    onInput?: ((e: InputEventWithTarget<HTMLTextAreaElement>) => void) | undefined;
+    oninput?: ((e: InputEventWithTarget<HTMLTextAreaElement>) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onfocus?: ((e: FocusEvent) => void) | undefined;
 } & Partial<Omit<WarpTextarea, keyof HTMLElement>> & React.RefAttributes<WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
     helpText?: string;
     maxRows?: number;

package/dist/packages/textarea/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 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",
     },
 });
+/**
+ * A multi-line text input with built-in form validation, auto-resizing, and styling support.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+ */
 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 { 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}.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)}.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}}`;
+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";