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

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

@@ -1,120 +1,223 @@
-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 { i18n } from "@lingui/core";
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../affix/affix.js";
+import "./textfield.js";
+import { messages } from "./locales/en/messages.mjs";
+// Initialize i18n with English locale for tests
+i18n.load("en", messages);
+i18n.activate("en");
+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();
 });
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `<w-textfield label="Email" optional></w-textfield>`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    expect(page.getByText("(optional)").query()).toBeNull();
+});
+test("does not render optional indicator when both required and optional are set", async () => {
+    const page = render(html `<w-textfield label="Email" required optional></w-textfield>`);
+    await expect.element(page.getByText("Email")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `<w-textfield label="Email" optional></w-textfield>`);
+    await expect
+        .element(page.getByRole("textbox", { name: /Email.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `<w-textfield
+			label="Email"
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    const el = page.getByTestId("field").element();
+    el.required = true;
+    await el.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("shows optional indicator when required is removed dynamically", async () => {
+    const page = render(html `<w-textfield
+			label="Email"
+			required
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const el = page.getByTestId("field").element();
+    el.required = false;
+    await el.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+});
+test("does not render optional indicator when there is no label", async () => {
+    const page = render(html `<w-textfield aria-label="Email" optional></w-textfield>`);
+    await expect.element(page.getByLabelText("Email")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from accessible name when required suppresses it", async () => {
+    const page = render(html `<w-textfield label="Email" required optional></w-textfield>`);
+    const input = page.getByRole("textbox", { name: "Email" });
+    await expect.element(input).toBeVisible();
+    // Verify "Optional" is not part of the accessible name
+    expect(page.getByRole("textbox", { name: /Optional/ }).query()).toBeNull();
+});
+test("renders localized optional text based on document lang", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `<w-textfield
+			label="Email"
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    const el = page.getByTestId("field").element();
+    await el.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
+});

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

@@ -1,8 +1,8 @@
-import type { ToastInternal, ToastOptions } from './types';
+import type { ToastInternal, ToastOptions } from "./types";
 /**
  * Creates a new toast
  */
-export declare function toast(message: string, options?: ToastOptions): ToastOptions;
+export declare function toast(message: string, options?: ToastOptions): ToastOptions | undefined;
 /**
  * Remove an existing 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/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}.bg-transparent{background-color:#0000}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.grid{display:grid}.shrink-0{flex-shrink:0}.auto-rows-auto{grid-auto-rows:auto}.overflow-hidden{overflow:hidden}.self-center{align-self:center}.bottom-16{bottom:1.6rem}.left-0{left:0}.right-0{right:0}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.fixed{position:fixed}.relative{position:relative}.static{position:static}.z-50{z-index:50}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.w-full{width:100%}.h-\\[16px\\]{height:16px}.w-\\[16px\\]{width:16px}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-auto{margin-left:auto}.mr-8{margin-right:.8rem}.mt-16{margin-top:1.6rem}.m-\\[8px\\]{margin:8px}.p-8{padding:.8rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.p-\\[8px\\]{padding:8px}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.translate-z-0{--w-translate-z:0rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:mx-16{margin-left:1.6rem;margin-right:1.6rem}}`;
+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}.bg-transparent{background-color:#0000}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.shrink-0{flex-shrink:0}.overflow-hidden{overflow:hidden}.self-center{align-self:center}.relative{position:relative}.static{position:static}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.w-full{width:100%}.h-\\[16px\\]{height:16px}.w-\\[16px\\]{width:16px}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-auto{margin-left:auto}.mr-8{margin-right:.8rem}.mt-16{margin-top:1.6rem}.m-\\[8px\\]{margin:8px}.p-8{padding:.8rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.p-\\[8px\\]{padding:8px}.pointer-events-auto{pointer-events:auto}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}");

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.
  *
@@ -29,7 +29,7 @@ export declare class WarpToast extends LitElement {
     disconnectedCallback(): void;
     updated(): void;
     /** @internal */
-    get _wrapper(): HTMLElement;
+    get _wrapper(): HTMLElement | null;
     /** @internal */
     get _warning(): boolean;
     /** @internal */
@@ -44,3 +44,8 @@ export declare class WarpToast extends LitElement {
     close(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-toast": WarpToast;
+    }
+}