@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.21

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

@@ -4,24 +4,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
-import { state } from 'lit/decorators.js';
-import './page-indicator.js';
-export default {
-    component: 'w-page-indicator',
-    title: 'Navigation/PageIndicator',
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html, LitElement } from "lit";
+import { state } from "lit/decorators.js";
+import "./page-indicator.js";
+const { events, args, argTypes } = getStorybookHelpers("w-page-indicator");
+const meta = {
+    component: "w-page-indicator",
+    title: "Navigation/PageIndicator",
     render: ({ pageCount, selectedPage }) => html `
-    <w-page-indicator page-count=${pageCount} selected-page=${selectedPage}></w-page-indicator>
-  `,
-    argTypes: {
-        pageCount: {
-            control: { type: 'number' },
-        },
-        selectedPage: {
-            control: { type: 'number' },
+		<w-page-indicator
+			page-count=${pageCount}
+			selected-page=${selectedPage}
+		></w-page-indicator>
+	`,
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
         },
     },
 };
+export default meta;
 export const Default = {
     args: {
         pageCount: 5,
@@ -29,9 +34,14 @@ export const Default = {
     },
 };
 export const InsideContainer = () => html `
-  <div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
-    <w-page-indicator page-count="5" selected-page="1" style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
-  </div>
+	<div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
+		<w-page-indicator
+			page-count="5"
+			selected-page="1"
+			style="padding-bottom: 12px; align-self: end;"
+		>
+		</w-page-indicator>
+	</div>
 `;
 class PageIndicatorChangePage extends LitElement {
     constructor() {
@@ -60,28 +70,49 @@ class PageIndicatorChangePage extends LitElement {
     }
     render() {
         return html `
-      <div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
-        <div style="align-self: center; justify-self: center;">Page ${this.page}</div>
-        <w-page-indicator page-count="5" selected-page=${this.page} style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
-      </div>
-    `;
+			<div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
+				<div style="align-self: center; justify-self: center;">
+					Page ${this.page}
+				</div>
+				<w-page-indicator
+					page-count="5"
+					selected-page=${this.page}
+					style="padding-bottom: 12px; align-self: end;"
+				>
+				</w-page-indicator>
+			</div>
+		`;
     }
 }
 __decorate([
     state()
 ], PageIndicatorChangePage.prototype, "page", void 0);
-if (!customElements.get('page-indicator-change-page')) {
-    customElements.define('page-indicator-change-page', PageIndicatorChangePage);
+if (!customElements.get("page-indicator-change-page")) {
+    customElements.define("page-indicator-change-page", PageIndicatorChangePage);
 }
-export const InsideContainerChangePage = () => html ` <page-indicator-change-page></page-indicator-change-page> `;
+export const InsideContainerChangePage = () => html `
+	<page-indicator-change-page></page-indicator-change-page>
+`;
 export const InsideContainer10Pages = () => html `
-  <div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
-    <w-page-indicator page-count="10" selected-page="3" style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
-  </div>
+	<div style="display: grid; height: 10vh; border: 1px solid lightgrey;">
+		<w-page-indicator
+			page-count="10"
+			selected-page="3"
+			style="padding-bottom: 12px; align-self: end;"
+		>
+		</w-page-indicator>
+	</div>
 `;
 export const OutsideContainer = () => html `
-  <div style="height: 11vh; border: 1px solid lightgrey;">
-    <div style="height: 5vh; border-bottom: 1px solid #e6e6e6; margin-bottom: 10px;"></div>
-    <w-page-indicator page-count="5" selected-page="1" style="padding-top: 16px;"> </w-page-indicator>
-  </div>
+	<div style="height: 11vh; border: 1px solid lightgrey;">
+		<div
+			style="height: 5vh; border-bottom: 1px solid #e6e6e6; margin-bottom: 10px;"
+		></div>
+		<w-page-indicator
+			page-count="5"
+			selected-page="1"
+			style="padding-top: 16px;"
+		>
+		</w-page-indicator>
+	</div>
 `;

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

@@ -1 +1 @@
-import './page-indicator.js';
+import "./page-indicator.js";

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.
  *
@@ -12,30 +12,22 @@ declare class WarpPagination extends LitElement {
      *
      * The page number is appended to this URL.
      */
-    baseUrl: string;
+    baseUrl: string | undefined;
     /**
      * The total number of pages.
      */
     pages: number;
     /**
      * The currently active page number.
-     *
-     * @default 1
      */
     currentPageNumber: number;
     /**
      * The maximum number of page numbers visible.
-     *
-     * @default 7
      */
     visiblePages: number;
     static styles: import("lit").CSSResult[];
     constructor();
     /** @internal */
-    get _currentPage(): number;
-    /** @internal */
-    get _visiblePages(): number;
-    /** @internal */
     get shouldShowShowFirstPageButton(): boolean;
     /** @internal */
     get shouldShowPreviousPageButton(): boolean;
@@ -47,4 +39,11 @@ declare class WarpPagination extends LitElement {
     get visiblePageNumbers(): number[];
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "page-click": CustomEvent<{
+            clickedPage: string;
+        }>;
+    }
+}
 export { WarpPagination };