@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/packages/pageindicator/index.js

@@ -1,48 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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 { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { map } from 'lit/directives/map.js';
-import { range } from 'lit/directives/range.js';
-import { styles } from './style.js';
-class WarpPageIndicator extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Currently selected page (1-based index) */
-        this.selectedPage = 1;
-        /** Total number of pages */
-        this.pageCount = 1;
-    }
-    static { this.styles = [styles]; }
-    render() {
-        return html `
-      <div class="w-pageindicator">
-        <div class="w-pageindicator--container">
-          ${map(range(this.pageCount), (i) => {
-            const isSelected = i === this.selectedPage - 1;
-            const classes = {
-                'w-pageindicator--dot': true,
-                'w-pageindicator--selecteddot': isSelected,
-            };
-            return html `<div class="${classMap(classes)}"></div>`;
-        })}
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Number, attribute: 'selected-page' })
-], WarpPageIndicator.prototype, "selectedPage", void 0);
-__decorate([
-    property({ type: Number, attribute: 'page-count' })
-], WarpPageIndicator.prototype, "pageCount", void 0);
-if (!customElements.get('w-pageindicator')) {
-    customElements.define('w-pageindicator', WarpPageIndicator);
-}
-export { WarpPageIndicator };

package/dist/packages/pageindicator/pageindicator.stories.js

@@ -1,71 +0,0 @@
-import { html, LitElement } from 'lit';
-import './index.js';
-export default {
-    component: 'w-pageindicator',
-    title: 'Navigation/PageIndicator',
-    render: ({ pageCount, selectedPage }) => html `
-    <w-pageindicator page-count=${pageCount} selected-page=${selectedPage}></w-pageindicator>
-  `,
-    argTypes: {
-        pageCount: {
-            control: { type: 'number' },
-        },
-        selectedPage: {
-            control: { type: 'number' },
-        },
-    },
-};
-export const Default = {
-    args: {
-        pageCount: 5,
-        selectedPage: 1,
-    },
-};
-export const InsideContainer = () => html `
-  <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
-    <w-pageindicator page-count="5" selected-page="1" style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
-  </div>
-`;
-class PageIndicatorChangePage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.page = 1;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.startPageChanger();
-    }
-    startPageChanger() {
-        setInterval(() => {
-            if (this.page > 4) {
-                this.page = 1;
-            }
-            else {
-                this.page = this.page + 1;
-            }
-        }, 1000);
-    }
-    render() {
-        return html `
-      <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
-        <div style="align-self: center; justify-self: center;">Page ${this.page}</div>
-        <w-pageindicator page-count="5" selected-page=${this.page} style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
-      </div>
-    `;
-    }
-}
-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 InsideContainer10Pages = () => html `
-  <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
-    <w-pageindicator page-count="10" selected-page="3" style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
-  </div>
-`;
-export const OutsideContainer = () => html `
-  <div style="height: 450px; border: 1px solid lightgrey;">
-    <div style="height: 300px; border-bottom: 1px solid #e6e6e6;"></div>
-    <w-pageindicator page-count="5" selected-page="1" style="padding-top: 16px;"> </w-pageindicator>
-  </div>
-`;

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

@@ -1,32 +0,0 @@
-import { LitElement } from 'lit';
-import '@warp-ds/icons/elements/chevron-double-left-16';
-import '@warp-ds/icons/elements/chevron-left-16';
-import '@warp-ds/icons/elements/chevron-right-16';
-/**
- * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
- *
- * @fires {CustomEvent} page-click - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
- */
-declare class WarpPagination extends LitElement {
-    #private;
-    baseUrl: string;
-    pages: number;
-    currentPageNumber: number;
-    visiblePages: number;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    /** @internal */
-    get shouldShowShowFirstPageButton(): boolean;
-    /** @internal */
-    get shouldShowPreviousPageButton(): boolean;
-    /** @internal */
-    get shouldShowNextPageButton(): boolean;
-    /** @internal */
-    get currentPageIndex(): number;
-    /** @internal */
-    get visiblePageNumbers(): number[];
-    render(): import("lit").TemplateResult<1>;
-}
-export { WarpPagination };

package/dist/packages/pagination/index.js

@@ -1,199 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
-// @warp-css;
-import { html, LitElement, nothing, css } from 'lit';
-import { i18n } from '@lingui/core';
-import { property } from 'lit/decorators.js';
-import '@warp-ds/icons/elements/chevron-double-left-16';
-import '@warp-ds/icons/elements/chevron-left-16';
-import '@warp-ds/icons/elements/chevron-right-16';
-import { activateI18n } from '../i18n.js';
-import { reset } from '../styles.js';
-import { messages as daMessages } from './locales/da/messages.mjs';
-import { messages as enMessages } from './locales/en/messages.mjs';
-import { messages as fiMessages } from './locales/fi/messages.mjs';
-import { messages as nbMessages } from './locales/nb/messages.mjs';
-import { messages as svMessages } from './locales/sv/messages.mjs';
-import { styles } from './styles';
-const iconSuffix = i18n._({
-    id: 'pagination.aria.icon-suffix',
-    message: 'icon',
-    comment: 'Suffix added at the end of icon titles when img semantics are lost on an html element',
-});
-const baseItemStyles = 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding';
-/**
- * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
- *
- * @fires {CustomEvent} page-click - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
- */
-class WarpPagination extends LitElement {
-    static { this.styles = [
-        reset,
-        styles,
-        css `
-      w-icon-chevron-left-16,
-      w-icon-chevron-double-left-16,
-      w-icon-chevron-right-16 {
-        height: 16px;
-      }
-    `,
-    ]; }
-    constructor() {
-        super();
-        this.currentPageNumber = 1;
-        this.visiblePages = 7;
-        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
-    }
-    /** @internal */
-    get shouldShowShowFirstPageButton() {
-        return this.currentPageNumber - 2 > 0;
-    }
-    /** @internal */
-    get shouldShowPreviousPageButton() {
-        return this.currentPageNumber - 1 > 0;
-    }
-    /** @internal */
-    get shouldShowNextPageButton() {
-        return this.currentPageNumber < this.pages;
-    }
-    /** @internal */
-    get currentPageIndex() {
-        return this.currentPageNumber - 1;
-    }
-    /** @internal */
-    get visiblePageNumbers() {
-        if (this.pages <= this.visiblePages) {
-            // Show all pages if total pages is less than or equal to visible pages
-            return Array.from({ length: this.pages }, (_, i) => i + 1);
-        }
-        const half = Math.floor(this.visiblePages / 2);
-        let start = Math.max(1, this.currentPageNumber - half);
-        const end = Math.min(this.pages, start + this.visiblePages - 1);
-        // Adjust start if we're near the end
-        if (end - start + 1 < this.visiblePages) {
-            start = Math.max(1, end - this.visiblePages + 1);
-        }
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }
-    #dispatchClickPage(e) {
-        const clickedPage = e.target.getAttribute('data-page-number');
-        this.dispatchEvent(new CustomEvent('page-click', {
-            detail: { clickedPage },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        const visiblePages = this.visiblePageNumbers;
-        return html `<nav class="flex items-center justify-center p-8" @click="${this.#dispatchClickPage}">
-      <h1 class="sr-only">
-        ${i18n._({
-            id: 'pagination.aria.pagination',
-            message: 'Pages',
-            comment: 'Default screenreader message for pagination container in the pagination component',
-        })}
-      </h1>
-      <div class="flex items-center s-text-link">
-        ${this.shouldShowShowFirstPageButton
-            ? html `<a
-              data-page-number="1"
-              href="${this.baseUrl}1"
-              class="${baseItemStyles +
-                ' s-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]'}">
-              <span class="sr-only"
-                >${i18n._({
-                id: 'pagination.aria.first-page',
-                message: 'First page',
-                comment: 'Default screenreader message for first page link in the pagination component',
-            })},</span
-              >
-              <w-icon-chevron-double-left-16 class="pointer-events-none flex items-center"></w-icon-chevron-double-left-16>
-              <span class="sr-only">${iconSuffix}</span>
-            </a>`
-            : nothing}
-        ${this.shouldShowPreviousPageButton
-            ? html `<a
-              data-page-number="${this.currentPageNumber - 1}"
-              href="${this.baseUrl}${this.currentPageNumber - 1}"
-              class="${baseItemStyles +
-                ' s-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]'}">
-              <span class="sr-only"
-                >${i18n._({
-                id: 'pagination.aria.prev-page',
-                message: 'Previous page',
-                comment: 'Default screenreader message for previous page link in the pagination component',
-            })},</span
-              >
-              <w-icon-chevron-left-16 class="pointer-events-none flex items-center"></w-icon-chevron-left-16>
-              <span class="sr-only">${iconSuffix}</span>
-            </a>`
-            : nothing}
-        ${visiblePages.map((pageNumber) => {
-            const isCurrentPage = pageNumber === this.currentPageNumber;
-            const url = `${this.baseUrl}${pageNumber}`;
-            let styles = baseItemStyles;
-            if (isCurrentPage) {
-                styles += ' s-bg-primary s-text-inverted';
-            }
-            else {
-                styles +=
-                    ' hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]';
-            }
-            const ariaLabel = i18n._({
-                id: 'pagination.aria.page',
-                message: 'Page {currentPage}',
-                values: { currentPage: pageNumber },
-                comment: 'Default screenreader message for page link in the pagination component',
-            });
-            return html `<a
-            data-page-number="${pageNumber}"
-            aria-label="${ariaLabel}"
-            href="${url}"
-            class="${styles}"
-            aria-current="${isCurrentPage ? 'page' : ''}"
-            >${pageNumber}</a
-          >`;
-        })}
-        ${this.shouldShowNextPageButton
-            ? html `<a
-              data-page-number="${this.currentPageNumber + 1}"
-              href="${this.baseUrl}${this.currentPageNumber + 1}"
-              class="${baseItemStyles +
-                ' s-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]'}">
-              <span class="sr-only">
-                ${i18n._({
-                id: 'pagination.aria.next-page',
-                message: 'Next page',
-                comment: 'Default screenreader message for next page link in the pagination component',
-            })},</span
-              >
-              <w-icon-chevron-right-16 class="pointer-events-none flex items-center"></w-icon-chevron-right-16>
-              <span class="sr-only">${iconSuffix}</span>
-            </a>`
-            : nothing}
-      </div>
-    </nav>`;
-    }
-}
-__decorate([
-    property({ type: String, reflect: true, attribute: 'base-url' })
-], WarpPagination.prototype, "baseUrl", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], WarpPagination.prototype, "pages", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'current-page' })
-], WarpPagination.prototype, "currentPageNumber", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'visible-pages' })
-], WarpPagination.prototype, "visiblePages", void 0);
-if (!customElements.get('w-pagination')) {
-    customElements.define('w-pagination', WarpPagination);
-}
-export { WarpPagination };

package/dist/packages/pagination/locales/da/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Næste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/en/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"First page\"],\"pagination.aria.icon-suffix\":[\"icon\"],\"pagination.aria.next-page\":[\"Next page\"],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Pages\"],\"pagination.aria.prev-page\":[\"Previous page\"]}");

package/dist/packages/pagination/locales/fi/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Ensimmäinen sivu\"],\"pagination.aria.icon-suffix\":[\"kuvake\"],\"pagination.aria.next-page\":[\"Seuraava sivu\"],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sivut\"],\"pagination.aria.prev-page\":[\"Edellinen sivu\"]}");

package/dist/packages/pagination/locales/nb/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Neste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/sv/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Första sidan\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Nästa sida\"],\"pagination.aria.page\":[\"Sida \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sidor\"],\"pagination.aria.prev-page\":[\"Föregående sida\"]}");

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { Pagination } from './react';
-declare const _default: {
-    title: string;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpPagination>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
-        onPageClick?: (e: Event) => void;
-        'onpage-click'?: (e: Event) => void;
-    } & Partial<Omit<import(".").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPagination>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import(".").WarpPagination, {
-        onPageClick: string;
-        'onpage-click': string;
-    }>;
-};
-export default _default;
-export type Story = StoryObj<typeof Pagination>;
-export declare const BasicPagination: Story;
-export declare const MiddlePageSelected: Story;
-export declare const LastPageSelected: Story;
-export declare const ManyPagesWithLimitedVisible: Story;
-export declare const SinglePage: Story;

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

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

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

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpPagination } from './index.js';
-import './index.js';
-declare const args: Partial<WarpPagination> & {
-    [key: string]: any;
-};
-declare const meta: Meta<typeof args>;
-export default meta;
-type Story = StoryObj<typeof args>;
-export declare const BasicPagination: Story;
-export declare const MiddlePageSelected: Story;
-export declare const LastPageSelected: Story;
-export declare const ManyPagesWithLimitedVisible: Story;
-export declare const SinglePage: Story;

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

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

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

@@ -1 +0,0 @@
-import './index.js';

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

@@ -1,76 +0,0 @@
-import { userEvent } from '@vitest/browser/context';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './index.js';
-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');
-});
-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);
-});
-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();
-});
-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 page = render(component);
-        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>`;
-    const page = render(component);
-    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>`;
-    const page = render(component);
-    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>`;
-    const page = render(component);
-    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>`;
-    const page = render(component);
-    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>`;
-    const page = render(component);
-    await expect.poll(() => page.getByText('14').query()).toBeInTheDocument();
-    let clickedPage = null;
-    page
-        .getByTestId('pagination')
-        .element()
-        .addEventListener('click', (e) => {
-        e.preventDefault();
-    });
-    page
-        .getByTestId('pagination')
-        .element()
-        .addEventListener('page-click', (e) => {
-        clickedPage = e.detail.clickedPage;
-    });
-    const element = page.getByLabelText('page 14');
-    await userEvent.click(element);
-    await vi.waitFor(() => {
-        if (clickedPage === null) {
-            throw new Error('clickedPage was not set');
-        }
-    }, {
-        interval: 100,
-    });
-    expect(clickedPage).toEqual('14');
-});

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

@@ -1,5 +0,0 @@
-import { WarpPagination } from './index.js';
-export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {
-    onPageClick: string;
-    'onpage-click': string;
-}>;

package/dist/packages/pagination/styles.js

@@ -1,2 +0,0 @@
-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}.flex{display:flex}.inline-flex{display:inline-flex}.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}.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)}`;