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

package/dist/packages/icon/icon.test.js

@@ -1,63 +1,71 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './icon.js';
-test('renders the icon', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./icon.js";
+test("renders the icon", async () => {
     const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
     const page = render(component);
-    await expect.element(page.getByTestId('icon')).toBeVisible();
+    await expect.element(page.getByTestId("icon")).toBeVisible();
 });
-test('defaults to medium size when no size attribute is set', async () => {
+test("defaults to medium size when no size attribute is set", async () => {
     const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
     const page = render(component);
-    const el = page.getByTestId('icon').element();
+    const el = page.getByTestId("icon").element();
     // The size attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('size')).toBe(false);
+    expect(el.hasAttribute("size")).toBe(false);
     // But the medium size class should still be applied
     await expect
         .poll(() => {
-        const inner = el.shadowRoot?.querySelector('.w-icon');
-        return inner?.classList.contains('w-icon--m');
+        const inner = el.shadowRoot?.querySelector(".w-icon");
+        return inner?.classList.contains("w-icon--m");
     })
         .toBe(true);
 });
-test('defaults to en locale when no locale attribute is set', async () => {
+test("defaults to en locale when no locale attribute is set", async () => {
     const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
     const page = render(component);
-    const el = page.getByTestId('icon').element();
+    const el = page.getByTestId("icon").element();
     // The locale attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('locale')).toBe(false);
+    expect(el.hasAttribute("locale")).toBe(false);
 });
-test('uses specified size when size attribute is set', async () => {
-    const component = html `<w-icon name="Plus" size="small" data-testid="icon"></w-icon>`;
+test("uses specified size when size attribute is set", async () => {
+    const component = html `<w-icon
+		name="Plus"
+		size="small"
+		data-testid="icon"
+	></w-icon>`;
     const page = render(component);
-    const el = page.getByTestId('icon').element();
+    const el = page.getByTestId("icon").element();
     // The size attribute should be reflected
-    expect(el.getAttribute('size')).toBe('small');
+    expect(el.getAttribute("size")).toBe("small");
     // And the small size class should be applied
     await expect
         .poll(() => {
-        const inner = el.shadowRoot?.querySelector('.w-icon');
-        return inner?.classList.contains('w-icon--s');
+        const inner = el.shadowRoot?.querySelector(".w-icon");
+        return inner?.classList.contains("w-icon--s");
     })
         .toBe(true);
 });
-test('uses specified locale when locale attribute is set', async () => {
-    const component = html `<w-icon name="Plus" locale="nb" data-testid="icon"></w-icon>`;
+test("uses specified locale when locale attribute is set", async () => {
+    const component = html `<w-icon
+		name="Plus"
+		locale="nb"
+		data-testid="icon"
+	></w-icon>`;
     const page = render(component);
-    const el = page.getByTestId('icon').element();
+    const el = page.getByTestId("icon").element();
     // The locale attribute should be reflected
-    expect(el.getAttribute('locale')).toBe('nb');
+    expect(el.getAttribute("locale")).toBe("nb");
 });
-test('uses html lang attribute when no locale attribute is set', async () => {
+test("uses html lang attribute when no locale attribute is set", async () => {
     const originalLang = document.documentElement.lang;
     try {
-        document.documentElement.lang = 'fi';
+        document.documentElement.lang = "fi";
         const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
         const page = render(component);
-        const el = page.getByTestId('icon').element();
+        const el = page.getByTestId("icon").element();
         // The component should use the html lang value as its locale
-        expect(el.locale).toBe('fi');
+        expect(el.locale).toBe("fi");
     }
     finally {
         document.documentElement.lang = originalLang;

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

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

package/dist/packages/icon/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 Icon = createComponent({
-    tagName: 'w-icon',
+    tagName: "w-icon",
     elementClass: Component,
     react: React,
 });

package/dist/packages/icon/style.js

@@ -1,27 +1,26 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-:host {
-  display: inline-block;
-}
-.w-icon {
-  --_w-icon-size: var(--w-icon-size, 24px);
-  height: var(--_w-icon-size);
-  width: var(--_w-icon-size);
-  display: flex;
-}
-.w-icon svg {
-  pointer-events: none;
-  height: var(--_w-icon-size);
-  width: var(--_w-icon-size);
-}
-.w-icon--s {
-  --w-icon-size: 16px;
-}
-.w-icon--m {
-  --w-icon-size: 24px;
-}
-.w-icon--l {
-  --w-icon-size: 32px;
-}
-
+	:host {
+		display: inline-block;
+	}
+	.w-icon {
+		--_w-icon-size: var(--w-icon-size, 24px);
+		height: var(--_w-icon-size);
+		width: var(--_w-icon-size);
+		display: flex;
+	}
+	.w-icon svg {
+		pointer-events: none;
+		height: var(--_w-icon-size);
+		width: var(--_w-icon-size);
+	}
+	.w-icon--s {
+		--w-icon-size: 16px;
+	}
+	.w-icon--m {
+		--w-icon-size: 24px;
+	}
+	.w-icon--l {
+		--w-icon-size: 32px;
+	}
 `;

package/dist/packages/interaction-type-detection.js

@@ -1,11 +1,11 @@
-function pointerListener(e) {
-    if (document.documentElement.dataset['keyboardinteraction']) {
-        delete document.documentElement.dataset['keyboardinteraction'];
+function pointerListener() {
+    if (document.documentElement.dataset.wKeyboardinteraction) {
+        delete document.documentElement.dataset.wKeyboardinteraction;
     }
 }
 function keyboardListener(e) {
-    if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
-        document.documentElement.dataset['keyboardinteraction'] = 'true';
+    if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+        document.documentElement.dataset.wKeyboardinteraction = "true";
     }
 }
 /**
@@ -22,8 +22,8 @@ function keyboardListener(e) {
  * @throws Throws if `window` is not defined.
  */
 export function addListener() {
-    document.addEventListener('keydown', keyboardListener);
-    document.addEventListener('pointerdown', pointerListener);
+    document.addEventListener("keydown", keyboardListener);
+    document.addEventListener("pointerdown", pointerListener);
 }
 /**
  * Removes the global keyboard even listener.
@@ -33,6 +33,6 @@ export function addListener() {
  * @throws Throws if `window` is not defined.
  */
 export function removeListener() {
-    document.removeEventListener('keydown', keyboardListener);
-    document.removeEventListener('pointerdown', pointerListener);
+    document.removeEventListener("keydown", keyboardListener);
+    document.removeEventListener("pointerdown", pointerListener);
 }

package/dist/packages/link/link.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet';
+import { LitElement } from "lit";
+type ButtonVariant = "primary" | "secondary" | "negative" | "negativeQuiet" | "utility" | "quiet" | "utilityQuiet" | "overlay" | "overlayInverted" | "overlayQuiet" | "overlayInvertedQuiet";
 /**
  * Buttons are used to perform actions, with different visuals for different needs.
  *

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

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

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

@@ -1,52 +1,52 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './link.js';
-describe('w-link React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./link.js";
+describe("w-link React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {});
         expect(warnings).toEqual([]);
     });
-    test('with href hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
+    test("with href hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
         });
         expect(warnings).toEqual([]);
     });
-    test('primary variant hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
-            variant: 'primary',
+    test("primary variant hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
+            variant: "primary",
         });
         expect(warnings).toEqual([]);
     });
-    test('secondary variant hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
-            variant: 'secondary',
+    test("secondary variant hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
+            variant: "secondary",
         });
         expect(warnings).toEqual([]);
     });
-    test('with target blank hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
-            target: '_blank',
+    test("with target blank hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
+            target: "_blank",
         });
         expect(warnings).toEqual([]);
     });
-    test('small link hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
+    test("small link hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
             small: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('disabled link hydrates without warnings', async () => {
-        const warnings = await testHydration('w-link', {
-            href: 'https://example.com',
+    test("disabled link hydrates without warnings", async () => {
+        const warnings = await testHydration("w-link", {
+            href: "https://example.com",
             disabled: true,
         });
         expect(warnings).toEqual([]);