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

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '../button/button.js';
-import './toast.js';
-import '../toast-container/toast-container.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "../button/button.js";
+import "./toast.js";
+import "../toast-container/toast-container.js";
 declare const meta: Meta;
 export default meta;
 export declare const Default: StoryObj;

package/dist/packages/toast/toast.stories.js

@@ -1,34 +1,55 @@
-import { spread } from '@open-wc/lit-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import '../button/button.js';
-import './toast.js';
-import '../toast-container/toast-container.js';
+import { spread } from "@open-wc/lit-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "../button/button.js";
+import "./toast.js";
+import "../toast-container/toast-container.js";
 const meta = {
-    title: 'Overlays/Toast',
+    title: "Overlays/Toast",
 };
 export default meta;
 export const Default = {
     args: {},
     render() {
         return html `
-      <w-button small onclick="window.toast('message goes here', { type: 'error', canclose: true })"> See Error Example </w-button>
-      <w-button small onclick="window.toast('message goes here', { type: 'warning', canclose: true })"> See Warning Example </w-button>
-      <w-button small onclick="window.toast('message goes here', { type: 'success', canclose: true })"> See Success Example </w-button>
-    `;
+			<w-button
+				small
+				onclick="window.toast('message goes here', { type: 'error', canclose: true })"
+			>
+				See Error Example
+			</w-button>
+			<w-button
+				small
+				onclick="window.toast('message goes here', { type: 'warning', canclose: true })"
+			>
+				See Warning Example
+			</w-button>
+			<w-button
+				small
+				onclick="window.toast('message goes here', { type: 'success', canclose: true })"
+			>
+				See Success Example
+			</w-button>
+		`;
     },
 };
 export const ToastContainer = {
     render(args) {
-        return html ` <p>This is here to document attributes. See the Default example for a complete usage example.</p>
-      <w-toast-container ${spread(prespread(args))}></w-toast-container>`;
+        return html ` <p>
+				This is here to document attributes. See the Default example for a
+				complete usage example.
+			</p>
+			<w-toast-container ${spread(prespread(args))}></w-toast-container>`;
     },
 };
 export const Toast = {
     render(args) {
         return html `
-      <p>This is here to document attributes. See the Default example for a complete usage example.</p>
-      <w-toast ${spread(prespread(args))}></w-toast>
-    `;
+			<p>
+				This is here to document attributes. See the Default example for a
+				complete usage example.
+			</p>
+			<w-toast ${spread(prespread(args))}></w-toast>
+		`;
     },
 };

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

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

package/dist/packages/toast/toast.test.js

@@ -1,58 +1,75 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './toast.js';
-test('renders the toast with text', async () => {
-    const component = html `<w-toast text="Test message" data-testid="toast"></w-toast>`;
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./toast.js";
+test("renders the toast with text", async () => {
+    const component = html `<w-toast
+		text="Test message"
+		data-testid="toast"
+	></w-toast>`;
     const page = render(component);
-    await expect.element(page.getByTestId('toast')).toBeVisible();
-    await expect.element(page.getByText('Test message')).toBeVisible();
+    await expect.element(page.getByTestId("toast")).toBeVisible();
+    await expect.element(page.getByText("Test message")).toBeVisible();
 });
-test('defaults to success type when no type attribute is set', async () => {
-    const component = html `<w-toast text="Success message" data-testid="toast"></w-toast>`;
+test("defaults to success type when no type attribute is set", async () => {
+    const component = html `<w-toast
+		text="Success message"
+		data-testid="toast"
+	></w-toast>`;
     const page = render(component);
-    const el = page.getByTestId('toast').element();
+    const el = page.getByTestId("toast").element();
     // The type attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('type')).toBe(false);
+    expect(el.hasAttribute("type")).toBe(false);
     // But the success icon should be rendered (default behavior)
     await expect
         .poll(() => {
-        const icon = el.shadowRoot?.querySelector('w-icon');
-        return icon?.getAttribute('name');
+        const icon = el.shadowRoot?.querySelector("w-icon");
+        return icon?.getAttribute("name");
     })
-        .toBe('Success');
+        .toBe("Success");
 });
-test('generates unique id when no id attribute is set', async () => {
-    const component = html `<w-toast text="Test message" data-testid="toast"></w-toast>`;
+test("generates unique id when no id attribute is set", async () => {
+    const component = html `<w-toast
+		text="Test message"
+		data-testid="toast"
+	></w-toast>`;
     const page = render(component);
-    const el = page.getByTestId('toast').element();
+    const el = page.getByTestId("toast").element();
     // An id should be generated
     expect(el.id).toBeTruthy();
     expect(el.id.length).toBeGreaterThan(0);
 });
-test('uses specified type when type attribute is set', async () => {
-    const component = html `<w-toast text="Warning message" type="warning" data-testid="toast"></w-toast>`;
+test("uses specified type when type attribute is set", async () => {
+    const component = html `<w-toast
+		text="Warning message"
+		type="warning"
+		data-testid="toast"
+	></w-toast>`;
     const page = render(component);
-    const el = page.getByTestId('toast').element();
+    const el = page.getByTestId("toast").element();
     // The type attribute should be reflected
-    expect(el.getAttribute('type')).toBe('warning');
+    expect(el.getAttribute("type")).toBe("warning");
     // And the warning icon should be rendered
     await expect
         .poll(() => {
-        const icon = el.shadowRoot?.querySelector('w-icon');
-        return icon?.getAttribute('name');
+        const icon = el.shadowRoot?.querySelector("w-icon");
+        return icon?.getAttribute("name");
     })
-        .toBe('Warning');
+        .toBe("Warning");
 });
-test('renders error type correctly', async () => {
-    const component = html `<w-toast text="Error message" type="error" data-testid="toast"></w-toast>`;
+test("renders error type correctly", async () => {
+    const component = html `<w-toast
+		text="Error message"
+		type="error"
+		data-testid="toast"
+	></w-toast>`;
     const page = render(component);
-    const el = page.getByTestId('toast').element();
+    const el = page.getByTestId("toast").element();
     // The error icon should be rendered
     await expect
         .poll(() => {
-        const icon = el.shadowRoot?.querySelector('w-icon');
-        return icon?.getAttribute('name');
+        const icon = el.shadowRoot?.querySelector("w-icon");
+        return icon?.getAttribute("name");
     })
-        .toBe('Error');
+        .toBe("Error");
 });

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

@@ -1,4 +1,4 @@
-export type ToastType = 'success' | 'error' | 'warning';
+export type ToastType = "success" | "error" | "warning";
 export interface ToastOptions {
     id?: string | number;
     type?: ToastType;

package/dist/packages/toast-container/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}.block{display:block}.grid{display:grid}.auto-rows-auto{grid-auto-rows:auto}.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}.static{position:static}.z-50{z-index:50}.w-full{width:100%}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right: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))}@media (min-width:480px){.sm\\:mx-16{margin-left:1.6rem;margin-right:1.6rem}}");

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import type { ToastInternal, ToastOptions } from '../toast/types.js';
+import { LitElement } from "lit";
+import type { ToastInternal, ToastOptions } from "../toast/types.js";
 /**
  * You should probably not include this component in HTML markup.
  *