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

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

@@ -1,120 +1,152 @@
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../affix/affix.js';
-import './textfield.js';
-test('renders the textfield', async () => {
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../affix/affix.js";
+import "./textfield.js";
+test("renders the textfield", async () => {
     const component = html `<w-textfield label="Test label"></w-textfield>`;
     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-textfield label="${label}" name="message" value="Hola el Mundo"></w-textfield>
-    </form>
-  `;
+		<form data-testid="form">
+			<w-textfield
+				label="${label}"
+				name="message"
+				value="Hola el Mundo"
+			></w-textfield>
+		</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
     expect(changeHandler).toHaveBeenCalled();
-    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-textfield label="Test label" help-text="Helpful help text"></w-textfield>`;
+test("renders help text if provided", async () => {
+    const component = html `<w-textfield
+		label="Test label"
+		help-text="Helpful help text"
+	></w-textfield>`;
     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-textfield label="Test label" invalid help-text="No, bad input!"></w-textfield>`;
+test("marks input field as aria-invalid if the invalid prop is true", async () => {
+    const component = html `<w-textfield
+		label="Test label"
+		invalid
+		help-text="No, bad input!"
+	></w-textfield>`;
     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('marks input field as readonly if the read-only prop is true', async () => {
-    const component = html `<w-textfield label="Test label" read-only></w-textfield>`;
+test("marks input field as readonly if the read-only prop is true", async () => {
+    const component = html `<w-textfield
+		label="Test label"
+		read-only
+	></w-textfield>`;
     const page = render(component);
-    await expect.element(page.getByLabelText('Test label')).toHaveAttribute('readonly', '');
+    await expect
+        .element(page.getByLabelText("Test label"))
+        .toHaveAttribute("readonly", "");
 });
-test('renders affix component in the prefix slot', async () => {
+test("renders affix component in the prefix slot", async () => {
     const component = html `
-    <w-textfield label="Test label">
-      <w-affix slot="prefix" label="kr"></w-affix>
-    </w-textfield>
-  `;
+		<w-textfield label="Test label">
+			<w-affix slot="prefix" label="kr"></w-affix>
+		</w-textfield>
+	`;
     const page = render(component);
-    await expect.element(page.getByText('kr')).toBeVisible();
+    await expect.element(page.getByText("kr")).toBeVisible();
 });
-test('renders affix component in the suffix slot', async () => {
+test("renders affix component in the suffix slot", async () => {
     const component = html `
-    <w-textfield label="Test label">
-      <w-affix slot="suffix" label="kr"></w-affix>
-    </w-textfield>
-  `;
+		<w-textfield label="Test label">
+			<w-affix slot="suffix" label="kr"></w-affix>
+		</w-textfield>
+	`;
     const page = render(component);
-    await expect.element(page.getByText('kr')).toBeVisible();
+    await expect.element(page.getByText("kr")).toBeVisible();
 });
-test('renders with no autocomplete attribute when none provided', async () => {
+test("renders with no autocomplete attribute when none provided", async () => {
     const component = html `<w-textfield data-testid="textfield"></w-textfield>`;
     const page = render(component);
-    const locator = page.getByTestId('textfield');
+    const locator = page.getByTestId("textfield");
     await expect.element(locator).toBeVisible();
     const el = (await locator.element());
-    expect(el.hasAttribute('autocomplete')).toBe(false);
-    expect(el.shadowRoot.querySelector('input').hasAttribute('autocomplete')).toBe(false);
+    expect(el.hasAttribute("autocomplete")).toBe(false);
+    expect(el.shadowRoot.querySelector("input").hasAttribute("autocomplete")).toBe(false);
 });
-test('defaults to text type when no type attribute is set', async () => {
-    const component = html `<w-textfield data-testid="textfield" label="Test"></w-textfield>`;
+test("defaults to text type when no type attribute is set", async () => {
+    const component = html `<w-textfield
+		data-testid="textfield"
+		label="Test"
+	></w-textfield>`;
     const page = render(component);
-    const el = page.getByTestId('textfield').element();
+    const el = page.getByTestId("textfield").element();
     // The type attribute should not be reflected on the host (to avoid hydration mismatch)
-    expect(el.hasAttribute('type')).toBe(false);
+    expect(el.hasAttribute("type")).toBe(false);
     // But the inner input should have type="text" as the default
     await expect
         .poll(() => {
-        const input = el.shadowRoot?.querySelector('input');
-        return input?.getAttribute('type');
+        const input = el.shadowRoot?.querySelector("input");
+        return input?.getAttribute("type");
     })
-        .toBe('text');
+        .toBe("text");
 });
-test('uses specified type when type attribute is set', async () => {
-    const component = html `<w-textfield data-testid="textfield" label="Email" type="email"></w-textfield>`;
+test("uses specified type when type attribute is set", async () => {
+    const component = html `<w-textfield
+		data-testid="textfield"
+		label="Email"
+		type="email"
+	></w-textfield>`;
     const page = render(component);
-    const el = page.getByTestId('textfield').element();
+    const el = page.getByTestId("textfield").element();
     // The inner input should have the specified type
     await expect
         .poll(() => {
-        const input = el.shadowRoot?.querySelector('input');
-        return input?.getAttribute('type');
+        const input = el.shadowRoot?.querySelector("input");
+        return input?.getAttribute("type");
     })
-        .toBe('email');
+        .toBe("email");
 });
-test('submits the associated form when input has focus and user presses Enter', async () => {
+test("submits the associated form when input has focus and user presses Enter", async () => {
     const screen = render(html `
-    <form>
-      <w-textfield data-testid="textfield" name="test" value="Submit this!"></w-textfield>
-      <button type="submit">Submit</button>
-    </form>
-  `);
+		<form>
+			<w-textfield
+				data-testid="textfield"
+				name="test"
+				value="Submit this!"
+			></w-textfield>
+			<button type="submit">Submit</button>
+		</form>
+	`);
     const onSubmit = vi.fn();
-    const form = document.querySelector('form');
-    form.addEventListener('submit', (event) => {
+    const form = document.querySelector("form");
+    form.addEventListener("submit", (event) => {
         event.preventDefault();
         onSubmit();
     });
-    await userEvent.click(screen.getByTestId('textfield'));
-    await userEvent.keyboard('{Enter}');
+    await userEvent.click(screen.getByTestId("textfield"));
+    await userEvent.keyboard("{Enter}");
     expect(onSubmit).toHaveBeenCalled();
 });

package/dist/packages/toast/api.d.ts

@@ -1,4 +1,4 @@
-import type { ToastInternal, ToastOptions } from './types';
+import type { ToastInternal, ToastOptions } from "./types";
 /**
  * Creates a new toast
  */

package/dist/packages/toast/api.js

@@ -1,6 +1,6 @@
-import { windowExists } from '../utils/window-exists.js';
+import { windowExists } from "../utils/window-exists.js";
 function getToastContainer() {
-    const container = customElements.get('w-toast-container');
+    const container = customElements.get("w-toast-container");
     return container;
 }
 /**
@@ -14,7 +14,7 @@ export function toast(message, options) {
         id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
         text: message,
         duration: 5000,
-        type: 'success',
+        type: "success",
         ...options,
     };
     toast.set(data);

package/dist/packages/toast/index.d.ts

@@ -1,5 +1,5 @@
-import './toast.js';
-import '../toast-container/toast-container.js';
-export { WarpToastContainer } from '../toast-container/toast-container.js';
-export { removeToast, toast, updateToast } from './api.js';
-export { WarpToast } from './toast.js';
+import "./toast.js";
+import "../toast-container/toast-container.js";
+export { WarpToastContainer } from "../toast-container/toast-container.js";
+export { removeToast, toast, updateToast } from "./api.js";
+export { WarpToast } from "./toast.js";

package/dist/packages/toast/index.js

@@ -1,7 +1,7 @@
 // Side-effect imports to register custom elements
-import './toast.js';
-import '../toast-container/toast-container.js';
-export { WarpToastContainer } from '../toast-container/toast-container.js';
+import "./toast.js";
+import "../toast-container/toast-container.js";
+export { WarpToastContainer } from "../toast-container/toast-container.js";
 // Re-exports for backward compatibility
-export { removeToast, toast, updateToast } from './api.js';
-export { WarpToast } from './toast.js';
+export { removeToast, toast, updateToast } from "./api.js";
+export { WarpToast } from "./toast.js";

package/dist/packages/toast/toast.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
-import type { ToastType } from './types';
-export { removeToast, toast, updateToast } from './api.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
+import type { ToastType } from "./types";
+export { removeToast, toast, updateToast } from "./api.js";
 /**
  * You should probably not include this component in HTML markup.
  *