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

package/dist/packages/alert/alert.stories.js

@@ -1,18 +1,18 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import '../utils/expand-transition.js';
-import './alert.js';
-const { events, args, argTypes } = getStorybookHelpers('w-alert');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "../utils/expand-transition.js";
+import "./alert.js";
+const { events, args, argTypes } = getStorybookHelpers("w-alert");
 const meta = {
-    title: 'Feedback/Alert',
+    title: "Feedback/Alert",
     render(args) {
         return html `
-      <w-alert ${spread(prespread(args))}>
-        <p>This is an alert message</p>
-      </w-alert>
-    `;
+			<w-alert ${spread(prespread(args))}>
+				<p>This is an alert message</p>
+			</w-alert>
+		`;
     },
     args,
     argTypes,
@@ -25,44 +25,46 @@ const meta = {
 export default meta;
 export const Info = {
     args: {
-        variant: 'info',
+        variant: "info",
         show: true,
-        role: 'alert',
+        role: "alert",
     },
 };
 export const Warning = {
     args: {
-        variant: 'warning',
+        variant: "warning",
         show: true,
-        role: 'alert',
+        role: "alert",
     },
 };
 export const Negative = {
     args: {
-        variant: 'negative',
+        variant: "negative",
         show: true,
-        role: 'alert',
+        role: "alert",
     },
 };
 export const Positive = {
     args: {
-        variant: 'positive',
+        variant: "positive",
         show: true,
-        role: 'alert',
+        role: "alert",
     },
 };
 export const WithDescription = {
     args: {
-        variant: 'info',
+        variant: "info",
         show: true,
-        role: 'alert',
+        role: "alert",
     },
     render(args) {
         return html `
-      <w-alert ${spread(prespread(args))}>
-        <h3>Alert Title</h3>
-        <p>This is a more detailed alert message with additional description.</p>
-      </w-alert>
-    `;
+			<w-alert ${spread(prespread(args))}>
+				<h3>Alert Title</h3>
+				<p>
+					This is a more detailed alert message with additional description.
+				</p>
+			</w-alert>
+		`;
     },
 };

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

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

package/dist/packages/alert/alert.test.js

@@ -1,37 +1,50 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './alert.js';
-test('renders an info', async () => {
-    const page = render(html `<w-alert variant="info" show data-testid="infoMessage">This is information</w-alert>`);
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./alert.js";
+test("renders an info", async () => {
+    const page = render(html `<w-alert variant="info" show data-testid="infoMessage"
+			>This is information</w-alert
+		>`);
     // Verify the icon correct icon is rendered
-    await expect.poll(() => page.getByTestId('infoMessage').element().shadowRoot?.querySelector('w-icon')).toBeVisible();
-    await expect.element(page.getByTestId('infoMessage')).toBeVisible();
-    await expect.element(page.getByText('This is information')).toBeVisible();
+    await expect
+        .poll(() => page
+        .getByTestId("infoMessage")
+        .element()
+        .shadowRoot?.querySelector("w-icon"))
+        .toBeVisible();
+    await expect.element(page.getByTestId("infoMessage")).toBeVisible();
+    await expect.element(page.getByText("This is information")).toBeVisible();
 });
 test('does not render when "show" is not set / or not true', async () => {
-    const component = html `<w-alert variant="warning" data-testid="warningMessage">This is a warning</w-alert>`;
+    const component = html `<w-alert variant="warning" data-testid="warningMessage"
+		>This is a warning</w-alert
+	>`;
     const page = render(component);
-    await expect.element(page.container.querySelector('w-alert')).not.toHaveAttribute('show');
+    await expect
+        .element(page.container.querySelector("w-alert"))
+        .not.toHaveAttribute("show");
 });
-test('defaults to info variant when no variant attribute is set', async () => {
-    const component = html `<w-alert show data-testid="alert">Default alert</w-alert>`;
+test("defaults to info variant when no variant attribute is set", async () => {
+    const component = html `<w-alert show data-testid="alert"
+		>Default alert</w-alert
+	>`;
     const page = render(component);
-    const el = page.getByTestId('alert').element();
+    const el = page.getByTestId("alert").element();
     // The variant attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('variant')).toBe(false);
+    expect(el.hasAttribute("variant")).toBe(false);
     // But the info 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('Info');
+        .toBe("Info");
 });
-test('defaults to hidden (show=false) when show attribute is not set', async () => {
+test("defaults to hidden (show=false) when show attribute is not set", async () => {
     const component = html `<w-alert data-testid="alert">Hidden alert</w-alert>`;
     const page = render(component);
-    const el = page.getByTestId('alert').element();
+    const el = page.getByTestId("alert").element();
     // The show attribute should not be present (to avoid hydration mismatch)
-    expect(el.hasAttribute('show')).toBe(false);
+    expect(el.hasAttribute("show")).toBe(false);
 });

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

@@ -1,2 +1,2 @@
-import { WarpAlert } from './alert.js';
+import { WarpAlert } from "./alert.js";
 export declare const Alert: import("@lit/react").ReactWebComponent<WarpAlert, {}>;

package/dist/packages/alert/react.js

@@ -1,11 +1,11 @@
-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 {
 }
 export const Alert = createComponent({
-    tagName: 'w-alert',
+    tagName: "w-alert",
     elementClass: Component,
     react: React,
 });

package/dist/packages/alert/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}.will-change-height{will-change:height}.border{border-width:1px}.border-l-4{border-left-width:4px}.rounded-4{border-radius:4px}.block{display:block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.static{position:static}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.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-info{color:var(--w-s-color-icon-info)}.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)}.s-border-info-subtle{border-color:var(--w-s-color-border-info-subtle)}.s-border-l-info{border-left-color:var(--w-s-color-border-info)}.s-border-l-negative{border-left-color:var(--w-s-color-border-negative)}.s-border-l-positive{border-left-color:var(--w-s-color-border-positive)}.s-border-l-warning{border-left-color:var(--w-s-color-border-warning)}.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)}.min-w-16{min-width:1.6rem}.w-16{width:1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.mr-8{margin-right:.8rem}.p-16{padding:1.6rem}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}");

package/dist/packages/attention/attention.d.ts

@@ -1,9 +1,9 @@
-import { Directions as CoreDirections } from '@warp-ds/core/attention';
-import { LitElement, nothing } from 'lit';
-import '../icon/icon.js';
-import '../button/button.js';
-import type { AttentionState } from '@warp-ds/core/attention';
-import type { TemplateResult } from 'lit';
+import { Directions as CoreDirections } from "@warp-ds/core/attention";
+import { LitElement, nothing } from "lit";
+import "../icon/icon.js";
+import "../button/button.js";
+import type { AttentionState } from "@warp-ds/core/attention";
+import type { TemplateResult } from "lit";
 export type Directions = CoreDirections;
 /**
  * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
@@ -127,7 +127,7 @@ declare class WarpAttention extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'w-attention': WarpAttention;
+        "w-attention": WarpAttention;
     }
 }
 export { WarpAttention };

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

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

package/dist/packages/attention/attention.hydration.test.js

@@ -1,65 +1,65 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
 // Import the custom element definition
-import './attention.js';
-describe('w-attention React SSR hydration', () => {
+import "./attention.js";
+describe("w-attention React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention');
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention");
         expect(warnings).toEqual([]);
     });
-    test('tooltip hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("tooltip hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             tooltip: true,
-            placement: 'bottom',
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('callout hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("callout hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             callout: true,
-            placement: 'bottom',
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('popover hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("popover hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             popover: true,
-            placement: 'bottom',
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('highlight hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("highlight hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             highlight: true,
-            placement: 'bottom',
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('with show hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("with show hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             tooltip: true,
             show: true,
-            placement: 'bottom',
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('with can-close hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("with can-close hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             callout: true,
-            'can-close': true,
-            placement: 'bottom',
+            "can-close": true,
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });
-    test('with no-arrow hydrates without warnings', async () => {
-        const warnings = await testHydration('w-attention', {
+    test("with no-arrow hydrates without warnings", async () => {
+        const warnings = await testHydration("w-attention", {
             tooltip: true,
-            'no-arrow': true,
-            placement: 'bottom',
+            "no-arrow": true,
+            placement: "bottom",
         });
         expect(warnings).toEqual([]);
     });