@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.17

package/dist/packages/page-indicator/page-indicator.test.js

@@ -1,161 +1,201 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './page-indicator.js';
-test('renders the correct number of dots', async () => {
-    const component = html `<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>`;
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./page-indicator.js";
+test("renders the correct number of dots", async () => {
+    const component = html `<w-page-indicator
+		page-count="5"
+		selected-page="1"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(5);
 });
-test('renders a single dot when page-count is 1', async () => {
-    const component = html `<w-page-indicator page-count="1" selected-page="1"></w-page-indicator>`;
+test("renders a single dot when page-count is 1", async () => {
+    const component = html `<w-page-indicator
+		page-count="1"
+		selected-page="1"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(1);
 });
-test('has aria-label on the container', async () => {
-    const component = html `<w-page-indicator page-count="5" selected-page="3"></w-page-indicator>`;
+test("has aria-label on the container", async () => {
+    const component = html `<w-page-indicator
+		page-count="5"
+		selected-page="3"
+	></w-page-indicator>`;
     const page = render(component);
     // Check that the container has role="img" and an aria-label attribute
-    await expect.element(page.getByRole('img')).toHaveAttribute('aria-label');
+    await expect.element(page.getByRole("img")).toHaveAttribute("aria-label");
 });
-test('marks the selected dot with correct class', async () => {
-    const component = html `<w-page-indicator page-count="5" selected-page="2"></w-page-indicator>`;
+test("marks the selected dot with correct class", async () => {
+    const component = html `<w-page-indicator
+		page-count="5"
+		selected-page="2"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        const selectedDots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        const selectedDots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--selecteddot");
         return dots?.length === 5 && selectedDots?.length === 1;
     })
         .toBe(true);
 });
-test('selected dot is at correct position', async () => {
-    const component = html `<w-page-indicator page-count="3" selected-page="2"></w-page-indicator>`;
+test("selected dot is at correct position", async () => {
+    const component = html `<w-page-indicator
+		page-count="3"
+		selected-page="2"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        return dots?.[1]?.classList.contains('w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        return dots?.[1]?.classList.contains("w-page-indicator--selecteddot");
     })
         .toBe(true);
 });
-test('validates page-count to minimum of 1', async () => {
-    const component = html `<w-page-indicator page-count="0" selected-page="1"></w-page-indicator>`;
+test("validates page-count to minimum of 1", async () => {
+    const component = html `<w-page-indicator
+		page-count="0"
+		selected-page="1"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(1);
 });
-test('validates page-count for negative values', async () => {
-    const component = html `<w-page-indicator page-count="-5" selected-page="1"></w-page-indicator>`;
+test("validates page-count for negative values", async () => {
+    const component = html `<w-page-indicator
+		page-count="-5"
+		selected-page="1"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(1);
 });
-test('clamps selected-page to valid range (too high)', async () => {
-    const component = html `<w-page-indicator page-count="3" selected-page="10"></w-page-indicator>`;
+test("clamps selected-page to valid range (too high)", async () => {
+    const component = html `<w-page-indicator
+		page-count="3"
+		selected-page="10"
+	></w-page-indicator>`;
     const page = render(component);
     // Should clamp to page 3 (the max) - verify selected dot is at position 3 (index 2)
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        return dots?.[2]?.classList.contains('w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        return dots?.[2]?.classList.contains("w-page-indicator--selecteddot");
     })
         .toBe(true);
 });
-test('clamps selected-page to valid range (too low)', async () => {
-    const component = html `<w-page-indicator page-count="3" selected-page="0"></w-page-indicator>`;
+test("clamps selected-page to valid range (too low)", async () => {
+    const component = html `<w-page-indicator
+		page-count="3"
+		selected-page="0"
+	></w-page-indicator>`;
     const page = render(component);
     // Should clamp to page 1 (the min) - verify selected dot is at position 1 (index 0)
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        return dots?.[0]?.classList.contains('w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        return dots?.[0]?.classList.contains("w-page-indicator--selecteddot");
     })
         .toBe(true);
 });
-test('handles decimal page-count by flooring', async () => {
-    const component = html `<w-page-indicator page-count="3.7" selected-page="1"></w-page-indicator>`;
+test("handles decimal page-count by flooring", async () => {
+    const component = html `<w-page-indicator
+		page-count="3.7"
+		selected-page="1"
+	></w-page-indicator>`;
     const page = render(component);
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(3);
 });
-test('handles decimal selected-page by flooring', async () => {
-    const component = html `<w-page-indicator page-count="5" selected-page="2.9"></w-page-indicator>`;
+test("handles decimal selected-page by flooring", async () => {
+    const component = html `<w-page-indicator
+		page-count="5"
+		selected-page="2.9"
+	></w-page-indicator>`;
     const page = render(component);
     // Should floor to page 2 - verify selected dot is at position 2 (index 1)
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        return dots?.[1]?.classList.contains('w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        return dots?.[1]?.classList.contains("w-page-indicator--selecteddot");
     })
         .toBe(true);
 });
-test('updates when selected-page changes', async () => {
-    const container = document.createElement('div');
+test("updates when selected-page changes", async () => {
+    const container = document.createElement("div");
     document.body.appendChild(container);
-    container.innerHTML = '<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>';
-    const element = container.querySelector('w-page-indicator');
+    container.innerHTML =
+        '<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>';
+    const element = container.querySelector("w-page-indicator");
     // Wait for initial render
     await element.updateComplete;
     // Verify initial state - first dot is selected
-    const dots = element.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-    expect(dots?.[0]?.classList.contains('w-page-indicator--selecteddot')).toBe(true);
+    const dots = element.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+    expect(dots?.[0]?.classList.contains("w-page-indicator--selecteddot")).toBe(true);
     // Change selected page
-    element.setAttribute('selected-page', '3');
+    element.setAttribute("selected-page", "3");
     await element.updateComplete;
     // Verify updated state - third dot is now selected
-    expect(dots?.[0]?.classList.contains('w-page-indicator--selecteddot')).toBe(false);
-    expect(dots?.[2]?.classList.contains('w-page-indicator--selecteddot')).toBe(true);
+    expect(dots?.[0]?.classList.contains("w-page-indicator--selecteddot")).toBe(false);
+    expect(dots?.[2]?.classList.contains("w-page-indicator--selecteddot")).toBe(true);
     // Cleanup
     document.body.removeChild(container);
 });
-test('defaults to page-count=1 and selected-page=1 when no attributes are set', async () => {
+test("defaults to page-count=1 and selected-page=1 when no attributes are set", async () => {
     const component = html `<w-page-indicator></w-page-indicator>`;
     const page = render(component);
     // Should render a single dot (default page-count=1)
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        return element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot').length;
+        const element = page.container.querySelector("w-page-indicator");
+        return element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot")
+            .length;
     })
         .toBe(1);
     // The single dot should be selected (default selected-page=1)
     await expect
         .poll(() => {
-        const element = page.container.querySelector('w-page-indicator');
-        const dots = element?.shadowRoot?.querySelectorAll('.w-page-indicator--dot');
-        return dots?.[0]?.classList.contains('w-page-indicator--selecteddot');
+        const element = page.container.querySelector("w-page-indicator");
+        const dots = element?.shadowRoot?.querySelectorAll(".w-page-indicator--dot");
+        return dots?.[0]?.classList.contains("w-page-indicator--selecteddot");
     })
         .toBe(true);
     // Verify no attributes are reflected (to avoid hydration mismatch)
-    const element = page.container.querySelector('w-page-indicator');
-    expect(element.hasAttribute('page-count')).toBe(false);
-    expect(element.hasAttribute('selected-page')).toBe(false);
+    const element = page.container.querySelector("w-page-indicator");
+    expect(element.hasAttribute("page-count")).toBe(false);
+    expect(element.hasAttribute("selected-page")).toBe(false);
 });

package/dist/packages/page-indicator/react.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpPageIndicator } from './page-indicator.js';
+import React from "react";
+import { WarpPageIndicator } from "./page-indicator.js";
 export declare const PageIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<WarpPageIndicator>, "ref">, "selected-page" | "page-count"> & {
     selectedPage?: number;
     pageCount?: number;

package/dist/packages/page-indicator/react.js

@@ -1,18 +1,18 @@
-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 {
 }
 const BasePageIndicator = createComponent({
-    tagName: 'w-page-indicator',
+    tagName: "w-page-indicator",
     elementClass: Component,
     react: React,
 });
 export const PageIndicator = React.forwardRef(({ selectedPage, pageCount, ...props }, ref) => React.createElement(BasePageIndicator, {
     ...props,
-    ...(selectedPage !== undefined ? { 'selected-page': selectedPage } : {}),
-    ...(pageCount !== undefined ? { 'page-count': pageCount } : {}),
+    ...(selectedPage !== undefined ? { "selected-page": selectedPage } : {}),
+    ...(pageCount !== undefined ? { "page-count": pageCount } : {}),
     ref,
 }));
-PageIndicator.displayName = 'PageIndicator';
+PageIndicator.displayName = "PageIndicator";

package/dist/packages/page-indicator/style.js

@@ -1,26 +1,26 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  .w-page-indicator {
-    display: grid;
-    justify-content: center;
-    height: max-content;
-    pointer-events: none;
-  }
+	.w-page-indicator {
+		display: grid;
+		justify-content: center;
+		height: max-content;
+		pointer-events: none;
+	}
 
-  .w-page-indicator--container {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 8px;
-  }
+	.w-page-indicator--container {
+		display: grid;
+		grid-auto-flow: column;
+		gap: 8px;
+	}
 
-  .w-page-indicator--dot {
-    background-color: var(--w-s-color-background-disabled);
-    border-radius: 5px;
-    width: 10px;
-    height: 10px;
-  }
+	.w-page-indicator--dot {
+		background-color: var(--w-s-color-background-disabled);
+		border-radius: 5px;
+		width: 10px;
+		height: 10px;
+	}
 
-  .w-page-indicator--selecteddot {
-    background-color: var(--w-s-color-icon-selected);
-  }
+	.w-page-indicator--selecteddot {
+		background-color: var(--w-s-color-icon-selected);
+	}
 `;

package/dist/packages/pagination/pagination.a11y.test.d.ts

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

package/dist/packages/pagination/pagination.a11y.test.js

@@ -1,36 +1,70 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './pagination.js';
-describe('w-pagination accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
-            const page = render(html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`);
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./pagination.js";
+describe("w-pagination accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
+            const page = render(html `<w-pagination
+					current-page="5"
+					pages="10"
+					base-url="/page/"
+				></w-pagination>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('first page (no first or previous links) has no violations', async () => {
-            const page = render(html `<w-pagination current-page="1" pages="10" base-url="/page/"></w-pagination>`);
+        test("first page (no first or previous links) has no violations", async () => {
+            const page = render(html `<w-pagination
+					current-page="1"
+					pages="10"
+					base-url="/page/"
+				></w-pagination>`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('page links expose accessible names', async () => {
-            const page = render(html `<w-pagination current-page="3" pages="5" base-url="/page/"></w-pagination>`);
-            await expect.element(page.getByRole('link', { name: 'Page 3' })).toBeVisible();
-            await expect.element(page.getByRole('link', { name: 'Page 2' })).toBeVisible();
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("page links expose accessible names", async () => {
+            const page = render(html `<w-pagination
+					current-page="3"
+					pages="5"
+					base-url="/page/"
+				></w-pagination>`);
+            await expect
+                .element(page.getByRole("link", { name: "Page 3" }))
+                .toBeVisible();
+            await expect
+                .element(page.getByRole("link", { name: "Page 2" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('current page is exposed via aria-current', async () => {
-            const page = render(html `<w-pagination current-page="4" pages="8" base-url="/page/"></w-pagination>`);
-            await expect.element(page.getByRole('link', { name: 'Page 4' })).toHaveAttribute('aria-current', 'page');
-            await expect.element(page.getByRole('link', { name: 'Page 3' })).not.toHaveAttribute('aria-current', 'page');
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("current page is exposed via aria-current", async () => {
+            const page = render(html `<w-pagination
+					current-page="4"
+					pages="8"
+					base-url="/page/"
+				></w-pagination>`);
+            await expect
+                .element(page.getByRole("link", { name: "Page 4" }))
+                .toHaveAttribute("aria-current", "page");
+            await expect
+                .element(page.getByRole("link", { name: "Page 3" }))
+                .not.toHaveAttribute("aria-current", "page");
         });
-        test('navigation controls have accessible names', async () => {
-            const page = render(html `<w-pagination current-page="4" pages="8" base-url="/page/"></w-pagination>`);
-            await expect.element(page.getByRole('link', { name: 'First page' })).toBeVisible();
-            await expect.element(page.getByRole('link', { name: 'Previous page' })).toBeVisible();
-            await expect.element(page.getByRole('link', { name: 'Next page' })).toBeVisible();
+        test("navigation controls have accessible names", async () => {
+            const page = render(html `<w-pagination
+					current-page="4"
+					pages="8"
+					base-url="/page/"
+				></w-pagination>`);
+            await expect
+                .element(page.getByRole("link", { name: "First page" }))
+                .toBeVisible();
+            await expect
+                .element(page.getByRole("link", { name: "Previous page" }))
+                .toBeVisible();
+            await expect
+                .element(page.getByRole("link", { name: "Next page" }))
+                .toBeVisible();
         });
     });
 });

package/dist/packages/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 /**
  * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
  *
@@ -41,7 +41,7 @@ declare class WarpPagination extends LitElement {
 }
 declare global {
     interface GlobalEventHandlersEventMap {
-        'page-click': CustomEvent<{
+        "page-click": CustomEvent<{
             clickedPage: string;
         }>;
     }

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

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

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

@@ -1,37 +1,37 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './pagination.js';
-describe('w-pagination React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./pagination.js";
+describe("w-pagination React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-pagination', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-pagination", {});
         expect(warnings).toEqual([]);
     });
-    test('with base-url and pages hydrates without warnings', async () => {
-        const warnings = await testHydration('w-pagination', {
-            'base-url': '/page/',
+    test("with base-url and pages hydrates without warnings", async () => {
+        const warnings = await testHydration("w-pagination", {
+            "base-url": "/page/",
             pages: 10,
-            'current-page': 1,
+            "current-page": 1,
         });
         expect(warnings).toEqual([]);
     });
-    test('with current page hydrates without warnings', async () => {
-        const warnings = await testHydration('w-pagination', {
-            'base-url': '/page/',
+    test("with current page hydrates without warnings", async () => {
+        const warnings = await testHydration("w-pagination", {
+            "base-url": "/page/",
             pages: 10,
-            'current-page': 5,
+            "current-page": 5,
         });
         expect(warnings).toEqual([]);
     });
-    test('with visible pages hydrates without warnings', async () => {
-        const warnings = await testHydration('w-pagination', {
-            'base-url': '/page/',
+    test("with visible pages hydrates without warnings", async () => {
+        const warnings = await testHydration("w-pagination", {
+            "base-url": "/page/",
             pages: 20,
-            'current-page': 10,
-            'visible-pages': 5,
+            "current-page": 10,
+            "visible-pages": 5,
         });
         expect(warnings).toEqual([]);
     });