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

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,5 @@
-import { WarpIcon } from './icon.js';
+import type { WarpIcon } from "./icon.js";
+/**
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
+ */
 export declare const Icon: import("@lit/react").ReactWebComponent<WarpIcon, {}>;

package/dist/packages/icon/react.js

@@ -1,11 +1,14 @@
-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 {
 }
+/**
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
+ */
 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.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Here we try to detect whether a visitor uses their keyboard to interact with the page.
+ *
+ * We consider it a keyboard interaction when:
+ *
+ * - We detect a Tab keyboard event.
+ * - We detect an Enter keyboard event.
+ * - We detect a Space keyboard event.
+ *
+ * We remove the "keyboard interaction flag" on click events.
+ *
+ * @throws Throws if `window` is not defined.
+ */
+export declare function addListener(): void;
+/**
+ * Removes the global keyboard even listener.
+ *
+ * You most likely won't need this outside of testing.
+ *
+ * @throws Throws if `window` is not defined.
+ */
+export declare function removeListener(): void;

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

@@ -0,0 +1,38 @@
+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.wKeyboardinteraction = "true";
+    }
+}
+/**
+ * Here we try to detect whether a visitor uses their keyboard to interact with the page.
+ *
+ * We consider it a keyboard interaction when:
+ *
+ * - We detect a Tab keyboard event.
+ * - We detect an Enter keyboard event.
+ * - We detect a Space keyboard event.
+ *
+ * We remove the "keyboard interaction flag" on click events.
+ *
+ * @throws Throws if `window` is not defined.
+ */
+export function addListener() {
+    document.addEventListener("keydown", keyboardListener);
+    document.addEventListener("pointerdown", pointerListener);
+}
+/**
+ * Removes the global keyboard even listener.
+ *
+ * You most likely won't need this outside of testing.
+ *
+ * @throws Throws if `window` is not defined.
+ */
+export function removeListener() {
+    document.removeEventListener("keydown", keyboardListener);
+    document.removeEventListener("pointerdown", pointerListener);
+}

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

@@ -1,16 +1,16 @@
-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.
+ * Link component to use when creating links that look like buttons.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
  */
 declare class WarpLink extends LitElement {
     /** @internal */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -24,7 +24,7 @@ declare class WarpLink extends LitElement {
      *
      * @throws {Error} Throws an error if an unsupported value is provided.
      */
-    variant: ButtonVariant;
+    variant: ButtonVariant | undefined;
     /**
      * Render a smaller version
      */
@@ -32,7 +32,7 @@ declare class WarpLink extends LitElement {
     /**
      * The URL the link points to
      */
-    href: string;
+    href: string | undefined;
     /**
      * Applies disabled styling, but you need to disable clicks on your own.
      *
@@ -42,13 +42,13 @@ declare class WarpLink extends LitElement {
     /**
      * Where to display the linked URL (e.g. `_blank`)
      */
-    target: string;
+    target: string | undefined;
     /**
      * Relationship of the linked URL.
      *
      * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
      */
-    rel: string;
+    rel: string | undefined;
     /**
      * Makes the link take up the full width of its parent
      */
@@ -58,4 +58,9 @@ declare class WarpLink extends LitElement {
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-link": WarpLink;
+    }
+}
 export { WarpLink };

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([]);