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

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

@@ -1,20 +1,28 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Pagination } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Pagination } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
-        onPageClick?: (e: Event) => void;
-        'onpage-click'?: (e: Event) => void;
-    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+        onPageClick?: ((e: CustomEvent<{
+            clickedPage: string | null;
+        }>) => void) | undefined;
+        "onpage-click"?: ((e: CustomEvent<{
+            clickedPage: string | null;
+        }>) => void) | undefined;
+    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "current-page" | "base-url" | "visible-pages"> & {
         baseUrl?: string;
         currentPageNumber?: number;
         visiblePages?: number;
     } & React.RefAttributes<import("./pagination").WarpPagination>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
-        onPageClick?: (e: Event) => void;
-        'onpage-click'?: (e: Event) => void;
-    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+        onPageClick?: ((e: CustomEvent<{
+            clickedPage: string | null;
+        }>) => void) | undefined;
+        "onpage-click"?: ((e: CustomEvent<{
+            clickedPage: string | null;
+        }>) => void) | undefined;
+    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "current-page" | "base-url" | "visible-pages"> & {
         baseUrl?: string;
         currentPageNumber?: number;
         visiblePages?: number;

package/dist/packages/pagination/pagination.react.stories.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Pagination } from './react';
+import React from "react";
+import { Pagination } from "./react";
 export default {
-    title: 'Navigation/Pagination',
+    title: "Navigation/Pagination",
     render(args) {
         return React.createElement(Pagination, { ...args });
     },
@@ -11,21 +11,21 @@ export const BasicPagination = {
     args: {
         currentPageNumber: 1,
         pages: 5,
-        baseUrl: '/search?page=',
+        baseUrl: "/search?page=",
     },
 };
 export const MiddlePageSelected = {
     args: {
         currentPageNumber: 3,
         pages: 7,
-        baseUrl: '/search?page=',
+        baseUrl: "/search?page=",
     },
 };
 export const LastPageSelected = {
     args: {
         currentPageNumber: 10,
         pages: 10,
-        baseUrl: '/search?page=',
+        baseUrl: "/search?page=",
     },
 };
 export const ManyPagesWithLimitedVisible = {
@@ -33,13 +33,13 @@ export const ManyPagesWithLimitedVisible = {
         currentPageNumber: 15,
         pages: 50,
         visiblePages: 5,
-        baseUrl: '/search?page=',
+        baseUrl: "/search?page=",
     },
 };
 export const SinglePage = {
     args: {
         currentPageNumber: 1,
         pages: 1,
-        baseUrl: '/search?page=',
+        baseUrl: "/search?page=",
     },
 };

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

@@ -1,7 +1,7 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Pagination } from './react.js';
-describeReactSsrAttributeMapping('Pagination', Pagination, [
-    { propName: 'baseUrl', attrName: 'base-url', value: '/search?page=' },
-    { propName: 'currentPageNumber', attrName: 'current-page', value: 2 },
-    { propName: 'visiblePages', attrName: 'visible-pages', value: 5 },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Pagination } from "./react.js";
+describeReactSsrAttributeMapping("Pagination", Pagination, [
+    { propName: "baseUrl", attrName: "base-url", value: "/search?page=" },
+    { propName: "currentPageNumber", attrName: "current-page", value: 2 },
+    { propName: "visiblePages", attrName: "visible-pages", value: 5 },
 ]);

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpPagination } from './pagination.js';
-import './pagination.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpPagination } from "./pagination.js";
+import "./pagination.js";
 declare const args: Partial<WarpPagination> & {
     [key: string]: any;
 };

package/dist/packages/pagination/pagination.stories.js

@@ -1,11 +1,11 @@
-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 './pagination.js';
-const { events, args, argTypes } = getStorybookHelpers('w-pagination');
+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 "./pagination.js";
+const { events, args, argTypes } = getStorybookHelpers("w-pagination");
 const meta = {
-    title: 'Navigation/Pagination',
+    title: "Navigation/Pagination",
     render(args) {
         return html `<w-pagination ${spread(prespread(args))}></w-pagination>`;
     },
@@ -20,37 +20,37 @@ const meta = {
 export default meta;
 export const BasicPagination = {
     args: {
-        'current-page': 1,
+        "current-page": 1,
         pages: 5,
-        'base-url': '/search?page=',
+        "base-url": "/search?page=",
     },
 };
 export const MiddlePageSelected = {
     args: {
-        'current-page': 3,
+        "current-page": 3,
         pages: 7,
-        'base-url': '/search?page=',
+        "base-url": "/search?page=",
     },
 };
 export const LastPageSelected = {
     args: {
-        'current-page': 10,
+        "current-page": 10,
         pages: 10,
-        'base-url': '/search?page=',
+        "base-url": "/search?page=",
     },
 };
 export const ManyPagesWithLimitedVisible = {
     args: {
-        'current-page': 15,
+        "current-page": 15,
         pages: 50,
-        'visible-pages': 5,
-        'base-url': '/search?page=',
+        "visible-pages": 5,
+        "base-url": "/search?page=",
     },
 };
 export const SinglePage = {
     args: {
-        'current-page': 1,
+        "current-page": 1,
         pages: 1,
-        'base-url': '/search?page=',
+        "base-url": "/search?page=",
     },
 };

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

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

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

@@ -1,130 +1,204 @@
-import { i18n } from '@lingui/core';
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import { detectLocale } from '../i18n.js';
-import './pagination.js';
+import { i18n } from "@lingui/core";
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import { detectLocale } from "../i18n.js";
+import "./pagination.js";
 function restoreDocumentLang(lang) {
     document.documentElement.lang = lang;
     i18n.activate(detectLocale());
 }
-test('current page is the active page', async () => {
-    const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+test("current page is the active page", async () => {
+    const component = html `<w-pagination
+		current-page="5"
+		pages="10"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.element(page.getByLabelText('Page 5')).toBeInTheDocument();
-    await expect.element(page.getByLabelText('Page 5')).toHaveAttribute('aria-current', 'page');
+    await expect.element(page.getByLabelText("Page 5")).toBeInTheDocument();
+    await expect
+        .element(page.getByLabelText("Page 5"))
+        .toHaveAttribute("aria-current", "page");
 });
-test('limits the number of displayed pages', async () => {
-    const component = html `<w-pagination current-page="10" pages="20" visible-pages="5" base-url="/page/"></w-pagination>`;
+test("limits the number of displayed pages", async () => {
+    const component = html `<w-pagination
+		current-page="10"
+		pages="20"
+		visible-pages="5"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByRole('link').and(page.getByLabelText('Page ')).all()).toHaveLength(5);
+    await expect
+        .poll(() => page.getByRole("link").and(page.getByLabelText("Page ")).all())
+        .toHaveLength(5);
 });
-test('shows link to first page if current page is page 3 or beyond', async () => {
-    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+test("shows link to first page if current page is page 3 or beyond", async () => {
+    const component = html `<w-pagination
+		current-page="10"
+		pages="20"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('First page')).toBeInTheDocument();
+    await expect.poll(() => page.getByText("First page")).toBeInTheDocument();
 });
-test('does not show link to first page if current page is page 1 or 2', async () => {
+test("does not show link to first page if current page is page 1 or 2", async () => {
     for (let i = 1; i <= 2; i++) {
-        const component = html `<w-pagination current-page="${i}" pages="20" base-url="/page/"></w-pagination>`;
+        const component = html `<w-pagination
+			current-page="${i}"
+			pages="20"
+			base-url="/page/"
+		></w-pagination>`;
         const page = render(component);
-        await expect.poll(() => page.getByText('First page').query()).not.toBeInTheDocument();
+        await expect
+            .poll(() => page.getByText("First page").query())
+            .not.toBeInTheDocument();
     }
 });
-test('shows link to previous page if current page is page 2 or beyond', async () => {
-    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+test("shows link to previous page if current page is page 2 or beyond", async () => {
+    const component = html `<w-pagination
+		current-page="10"
+		pages="20"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('Previous page')).toBeInTheDocument();
+    await expect.poll(() => page.getByText("Previous page")).toBeInTheDocument();
 });
-test('does not show link to previous page if current page is the first page', async () => {
-    const component = html `<w-pagination current-page="1" pages="20" base-url="/page/"></w-pagination>`;
+test("does not show link to previous page if current page is the first page", async () => {
+    const component = html `<w-pagination
+		current-page="1"
+		pages="20"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('Previous page').query()).not.toBeInTheDocument();
+    await expect
+        .poll(() => page.getByText("Previous page").query())
+        .not.toBeInTheDocument();
 });
-test('shows link to next page', async () => {
-    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/"></w-pagination>`;
+test("shows link to next page", async () => {
+    const component = html `<w-pagination
+		current-page="15"
+		pages="20"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('Next page').query()).toBeInTheDocument();
+    await expect
+        .poll(() => page.getByText("Next page").query())
+        .toBeInTheDocument();
 });
-test('does not show link to next page if current page is the last page', async () => {
-    const component = html `<w-pagination current-page="20" pages="20" base-url="/page/"></w-pagination>`;
+test("does not show link to next page if current page is the last page", async () => {
+    const component = html `<w-pagination
+		current-page="20"
+		pages="20"
+		base-url="/page/"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('Next page').query()).not.toBeInTheDocument();
+    await expect
+        .poll(() => page.getByText("Next page").query())
+        .not.toBeInTheDocument();
 });
-test('is able to get the correct data-page-number attribute from the element on click', async () => {
-    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/" data-testid="pagination"></w-pagination>`;
+test("is able to get the correct data-page-number attribute from the element on click", async () => {
+    const component = html `<w-pagination
+		current-page="15"
+		pages="20"
+		base-url="/page/"
+		data-testid="pagination"
+	></w-pagination>`;
     const page = render(component);
-    await expect.poll(() => page.getByText('14').query()).toBeInTheDocument();
+    await expect.poll(() => page.getByText("14").query()).toBeInTheDocument();
     let clickedPage = null;
-    page
-        .getByTestId('pagination')
-        .element()
-        .addEventListener('click', (e) => {
+    const pagination = page.getByTestId("pagination").element();
+    pagination.addEventListener("click", (e) => {
         e.preventDefault();
     });
-    page
-        .getByTestId('pagination')
-        .element()
-        .addEventListener('page-click', (e) => {
+    pagination.addEventListener("page-click", (e) => {
         clickedPage = e.detail.clickedPage;
     });
-    const element = page.getByLabelText('page 14');
+    const element = page.getByLabelText("page 14");
     await userEvent.click(element);
     await vi.waitFor(() => {
         if (clickedPage === null) {
-            throw new Error('clickedPage was not set');
+            throw new Error("clickedPage was not set");
         }
     }, {
         interval: 100,
     });
-    expect(clickedPage).toEqual('14');
+    expect(clickedPage).toEqual("14");
 });
-test('defaults to current-page=1 when no current-page attribute is set', async () => {
-    const component = html `<w-pagination pages="10" base-url="/page/" data-testid="pagination"></w-pagination>`;
+test("defaults to current-page=1 when no current-page attribute is set", async () => {
+    const component = html `<w-pagination
+		pages="10"
+		base-url="/page/"
+		data-testid="pagination"
+	></w-pagination>`;
     const page = render(component);
-    const el = page.getByTestId('pagination').element();
+    const el = page.getByTestId("pagination").element();
     // The current-page attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('current-page')).toBe(false);
+    expect(el.hasAttribute("current-page")).toBe(false);
     // But page 1 should be the active page
-    await expect.element(page.getByLabelText('Page 1')).toHaveAttribute('aria-current', 'page');
+    await expect
+        .element(page.getByLabelText("Page 1"))
+        .toHaveAttribute("aria-current", "page");
 });
-test('defaults to visible-pages=7 when no visible-pages attribute is set', async () => {
-    const component = html `<w-pagination current-page="5" pages="20" base-url="/page/" data-testid="pagination"></w-pagination>`;
+test("defaults to visible-pages=7 when no visible-pages attribute is set", async () => {
+    const component = html `<w-pagination
+		current-page="5"
+		pages="20"
+		base-url="/page/"
+		data-testid="pagination"
+	></w-pagination>`;
     const page = render(component);
-    const el = page.getByTestId('pagination').element();
+    const el = page.getByTestId("pagination").element();
     // The visible-pages attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('visible-pages')).toBe(false);
+    expect(el.hasAttribute("visible-pages")).toBe(false);
     // But 7 pages should be visible (the default)
-    await expect.poll(() => page.getByRole('link').and(page.getByLabelText('Page ')).all()).toHaveLength(7);
+    await expect
+        .poll(() => page.getByRole("link").and(page.getByLabelText("Page ")).all())
+        .toHaveLength(7);
 });
-test('uses the document lang attribute for Norwegian labels', async () => {
+test("uses the document lang attribute for Norwegian labels", async () => {
     const originalLang = document.documentElement.lang;
     try {
-        document.documentElement.lang = 'nb';
-        const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+        document.documentElement.lang = "nb";
+        const component = html `<w-pagination
+			current-page="5"
+			pages="10"
+			base-url="/page/"
+		></w-pagination>`;
         const page = render(component);
-        await expect.element(page.getByLabelText('Side 5')).toHaveAttribute('aria-current', 'page');
-        await expect.element(page.getByText('Første side')).toBeInTheDocument();
-        await expect.element(page.getByText('Forrige side')).toBeInTheDocument();
-        await expect.element(page.getByText('Neste side')).toBeInTheDocument();
-        await expect.element(page.getByText('Side 5')).toBeInTheDocument();
+        await expect
+            .element(page.getByLabelText("Side 5"))
+            .toHaveAttribute("aria-current", "page");
+        await expect.element(page.getByText("Første side")).toBeInTheDocument();
+        await expect.element(page.getByText("Forrige side")).toBeInTheDocument();
+        await expect.element(page.getByText("Neste side")).toBeInTheDocument();
+        await expect.element(page.getByText("Side 5")).toBeInTheDocument();
     }
     finally {
         restoreDocumentLang(originalLang);
     }
 });
-test.skip('updates labels when the document lang attribute changes', async () => {
+test.skip("updates labels when the document lang attribute changes", async () => {
     const originalLang = document.documentElement.lang;
     try {
-        document.documentElement.lang = 'en';
-        const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+        document.documentElement.lang = "en";
+        const component = html `<w-pagination
+			current-page="5"
+			pages="10"
+			base-url="/page/"
+		></w-pagination>`;
         const page = render(component);
-        await expect.element(page.getByLabelText('Page 5')).toHaveAttribute('aria-current', 'page');
-        document.documentElement.lang = 'nb';
-        await expect.poll(() => page.getByLabelText('Side 5').query()).toBeInTheDocument();
-        await expect.element(page.getByLabelText('Side 5')).toHaveAttribute('aria-current', 'page');
-        await expect.element(page.getByText('Første side')).toBeInTheDocument();
+        await expect
+            .element(page.getByLabelText("Page 5"))
+            .toHaveAttribute("aria-current", "page");
+        document.documentElement.lang = "nb";
+        await expect
+            .poll(() => page.getByLabelText("Side 5").query())
+            .toBeInTheDocument();
+        await expect
+            .element(page.getByLabelText("Side 5"))
+            .toHaveAttribute("aria-current", "page");
+        await expect.element(page.getByText("Første side")).toBeInTheDocument();
     }
     finally {
         restoreDocumentLang(originalLang);

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

@@ -1,9 +1,18 @@
-import React from 'react';
-import { WarpPagination } from './pagination.js';
-export declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
-    onPageClick?: (e: Event) => void;
-    'onpage-click'?: (e: Event) => void;
-} & Partial<Omit<WarpPagination, keyof HTMLElement>> & React.RefAttributes<WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+import React from "react";
+import type { WarpPagination } from "./pagination.js";
+/**
+ * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+    onPageClick?: ((e: CustomEvent<{
+        clickedPage: string | null;
+    }>) => void) | undefined;
+    "onpage-click"?: ((e: CustomEvent<{
+        clickedPage: string | null;
+    }>) => void) | undefined;
+} & Partial<Omit<WarpPagination, keyof HTMLElement>> & React.RefAttributes<WarpPagination>, "ref">, "current-page" | "base-url" | "visible-pages"> & {
     baseUrl?: string;
     currentPageNumber?: number;
     visiblePages?: number;

package/dist/packages/pagination/react.js

@@ -1,23 +1,30 @@
-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 BasePagination = createComponent({
-    tagName: 'w-pagination',
+    tagName: "w-pagination",
     elementClass: Component,
     react: React,
     events: {
-        onPageClick: 'page-click',
-        'onpage-click': 'page-click',
+        onPageClick: "page-click",
+        "onpage-click": "page-click",
     },
 });
+/**
+ * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
+ */
 export const Pagination = React.forwardRef(({ baseUrl, currentPageNumber, visiblePages, ...props }, ref) => React.createElement(BasePagination, {
     ...props,
-    ...(baseUrl !== undefined ? { 'base-url': baseUrl } : {}),
-    ...(currentPageNumber !== undefined ? { 'current-page': currentPageNumber } : {}),
-    ...(visiblePages !== undefined ? { 'visible-pages': visiblePages } : {}),
+    ...(baseUrl !== undefined ? { "base-url": baseUrl } : {}),
+    ...(currentPageNumber !== undefined
+        ? { "current-page": currentPageNumber }
+        : {}),
+    ...(visiblePages !== undefined ? { "visible-pages": visiblePages } : {}),
     ref,
 }));
-Pagination.displayName = 'Pagination';
+Pagination.displayName = "Pagination";

package/dist/packages/pagination/styles.js

@@ -1,2 +1,2 @@
-import { css } from 'lit';
-export const styles = css `*,: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}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.font-bold{font-weight:700}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:block{display:block}.md\\:hidden{display:none}}`;
+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}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.font-bold{font-weight:700}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:block{display:block}.md\\:hidden{display:none}}");

package/dist/packages/pill/pill.d.ts

@@ -1,8 +1,10 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 /**
  * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
  *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
+ *
  * @event {CustomEvent} w-pill-click - Fires when the pill itself is clicked.
  * @event {CustomEvent} w-pill-close - Fires when the pill's close button is clicked.
  */
@@ -18,19 +20,19 @@ declare class WarpPill extends LitElement {
     /**
      * @deprecated Used "open-arial-label" instead.
      */
-    openSrLabel: string;
+    openSrLabel: string | undefined;
     /**
      * Label read by screen readers when targeting the pill.
      */
-    openAriaLabel: string;
+    openAriaLabel: string | undefined;
     /**
      * @deprecated Used "close-arial-label" instead.
      */
-    closeSrLabel: string;
+    closeSrLabel: string | undefined;
     /**
      * Label read by screen readers when targeting the close button.
      */
-    closeAriaLabel: string;
+    closeAriaLabel: string | undefined;
     private openFilterSrText;
     private removeFilterSrText;
     static styles: import("lit").CSSResult[];
@@ -42,4 +44,9 @@ declare class WarpPill extends LitElement {
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-pill": WarpPill;
+    }
+}
 export { WarpPill };

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

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