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

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { PageIndicator } from './react';
+import React from "react";
+import { PageIndicator } from "./react";
 export default {
-    title: 'Navigation/PageIndicator',
-    render: ({ pageCount, selectedPage }) => React.createElement(PageIndicator, { pageCount: pageCount, selectedPage: selectedPage }),
+    title: "Navigation/PageIndicator",
+    render: ({ pageCount, selectedPage }) => (React.createElement(PageIndicator, { pageCount: pageCount, selectedPage: selectedPage })),
     component: PageIndicator,
 };
 export const Default = {
@@ -11,10 +11,10 @@ export const Default = {
         selectedPage: 1,
     },
 };
-export const InsideContainer = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
-    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
-export const InsideContainer10Pages = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
-    React.createElement(PageIndicator, { pageCount: 10, selectedPage: 3, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
-export const OutsideContainer = () => (React.createElement("div", { style: { height: '450px', border: '1px solid lightgrey' } },
-    React.createElement("div", { style: { height: '300px', borderBottom: '1px solid #e6e6e6' } }),
-    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingTop: '16px' } }, ' ')));
+export const InsideContainer = () => (React.createElement("div", { style: { display: "grid", height: "60vh", border: "1px solid lightgrey" } },
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingBottom: "12px", alignSelf: "end" } }, " ")));
+export const InsideContainer10Pages = () => (React.createElement("div", { style: { display: "grid", height: "60vh", border: "1px solid lightgrey" } },
+    React.createElement(PageIndicator, { pageCount: 10, selectedPage: 3, style: { paddingBottom: "12px", alignSelf: "end" } }, " ")));
+export const OutsideContainer = () => (React.createElement("div", { style: { height: "450px", border: "1px solid lightgrey" } },
+    React.createElement("div", { style: { height: "300px", borderBottom: "1px solid #e6e6e6" } }),
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingTop: "16px" } }, " ")));

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

@@ -1,6 +1,6 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { PageIndicator } from './react.js';
-describeReactSsrAttributeMapping('PageIndicator', PageIndicator, [
-    { propName: 'selectedPage', attrName: 'selected-page', value: 1 },
-    { propName: 'pageCount', attrName: 'page-count', value: 5 },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { PageIndicator } from "./react.js";
+describeReactSsrAttributeMapping("PageIndicator", PageIndicator, [
+    { propName: "selectedPage", attrName: "selected-page", value: 1 },
+    { propName: "pageCount", attrName: "page-count", value: 5 },
 ]);

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

@@ -1,31 +1,13 @@
-import './page-indicator.js';
-declare const _default: {
-    component: string;
-    title: string;
-    render: ({ pageCount, selectedPage }: {
-        pageCount: any;
-        selectedPage: any;
-    }) => import("lit").TemplateResult<1>;
-    argTypes: {
-        pageCount: {
-            control: {
-                type: string;
-            };
-        };
-        selectedPage: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {
-        pageCount: number;
-        selectedPage: number;
-    };
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpPageIndicator } from "./page-indicator.js";
+import "./page-indicator.js";
+declare const args: Partial<WarpPageIndicator> & {
+    [key: string]: any;
 };
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Default: Story;
 export declare const InsideContainer: () => import("lit").TemplateResult<1>;
 export declare const InsideContainerChangePage: () => import("lit").TemplateResult<1>;
 export declare const InsideContainer10Pages: () => import("lit").TemplateResult<1>;

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,12 @@
-import React from 'react';
-import { WarpPageIndicator } from './page-indicator.js';
+import React from "react";
+import type { WarpPageIndicator } from "./page-indicator.js";
+/**
+ * A page indicator component that displays a series of dots representing pages.
+ *
+ * One dot is highlighted to indicate the currently selected page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
+ */
 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,25 @@
-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,
 });
+/**
+ * A page indicator component that displays a series of dots representing pages.
+ *
+ * One dot is highlighted to indicate the currently selected page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
+ */
 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";