@brandsync/wc 0.0.12 → 0.1.0

package/dist/collection/components/bs-input/bs-input.stories.js

@@ -97,26 +97,27 @@ export const Required = {
     args: { required: true },
 };
 export const Search = {
-    render: () => html `<bs-input type="search" label="Search" placeholder="Search..."></bs-input>`,
+    render: args => html `<bs-input type="search" label="Search" placeholder="Search..." error=${args.error}></bs-input>`,
 };
 export const NumberInput = {
     name: 'Number',
-    render: () => html `<bs-input type="number" label="Quantity" value="1" min="0" max="10" step="1"></bs-input>`,
+    render: args => html `<bs-input type="number" label="Quantity" value="1" min="0" max="10" step="1" error=${args.error}></bs-input>`,
 };
 export const Password = {
-    render: () => html `<bs-input type="password" label="Password" placeholder="Enter your password"></bs-input>`,
+    render: args => html `<bs-input type="password" label="Password" placeholder="Enter your password" error=${args.error}></bs-input>`,
 };
 export const DateInput = {
     name: 'Date',
-    render: () => html `<bs-input type="date" label="Date of birth"></bs-input>`,
+    render: args => html `<bs-input type="date" label="Date of birth" error=${args.error}></bs-input>`,
 };
 export const Dropdown = {
-    render: () => html `
+    render: args => html `
     <bs-input
       type="dropdown"
       label="Country"
       placeholder="Select a country"
       value="Denmark"
+      error=${args.error}
       .options=${[
         { label: 'Denmark', value: 'dk' },
         { label: 'Sweden', value: 'se' },
@@ -126,10 +127,11 @@ export const Dropdown = {
   `,
 };
 export const Select = {
-    render: () => html `
+    render: args => html `
     <bs-input
       type="select"
       label="Role"
+      error=${args.error}
       .options=${[
         { label: 'Admin', value: 'admin' },
         { label: 'Editor', value: 'editor' },
@@ -140,19 +142,20 @@ export const Select = {
 };
 export const TextArea = {
     name: 'Text area',
-    render: () => html `<bs-input type="textarea" label="Comments" rows="4" placeholder="Type your comments here..."></bs-input>`,
+    render: args => html `<bs-input type="textarea" label="Comments" rows="4" placeholder="Type your comments here..." error=${args.error}></bs-input>`,
 };
 export const Chip = {
-    render: () => html `<bs-input type="chip" label="Tags" .chips=${['design', 'frontend']} placeholder="Add a tag..."></bs-input>`,
+    render: args => html `<bs-input type="chip" label="Tags" .chips=${['design', 'frontend']} placeholder="Add a tag..." error=${args.error}></bs-input>`,
 };
 export const Initials = {
-    render: () => html `<bs-input type="initials" label="Name" .titleOptions=${['Mrs.', 'Mr.', 'Dr.']} placeholder="Full name"></bs-input>`,
+    render: args => html `<bs-input type="initials" label="Name" .titleOptions=${['Mrs.', 'Mr.', 'Dr.']} placeholder="Full name" error=${args.error}></bs-input>`,
 };
 export const Country = {
-    render: () => html `
+    render: args => html `
     <bs-input
       type="country"
       label="Phone number"
+      error=${args.error}
       .countryOptions=${[
         { code: 'DK', label: 'Denmark' },
         { code: 'US', label: 'United States' },
@@ -163,5 +166,5 @@ export const Country = {
   `,
 };
 export const Pin = {
-    render: () => html `<bs-input type="pin" label="Verification code" length="4"></bs-input>`,
+    render: args => html `<bs-input type="pin" label="Verification code" length="4" error=${args.error}></bs-input>`,
 };

package/dist/collection/components/bs-menu/bs-menu.js

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: 'b39f37927ff53201d71b40612720ceb8bb0eda27', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'b6a89f46892cf4e204edc58fe61ab69837514571' })));
+        return (h("div", { key: 'bc71082acfa568690283c2ec3b63aae4a20324a5', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'febe3b20843441e630d68a215191f2b73b3aab20' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '1ca79f8c38bb2d8b4dc0d6edfaeafa4b7be1aee9', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '2efc2485a3ae52e3ee5ca4b622ca853aa6ce8abf', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '8e426c1974fd8c9d1bd6fb97eb62ccb8e1770f05', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2b799a8cfc0a546b53cbe2f65847b255e53b4dcc', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '0babde24dcc1265ef9a9e1517701c913a70a6f78' }))));
+        return (h("button", { key: 'c9334385fe956335f2ed9d55338a2198f16f1712', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'a00e7ce2d8d632442736d975149a6d7b449779bb', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '568de93e2c15385c3244cb79cba8b0982d9469b0', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '85954b9c36d0418af5468a7514ca3e0d2d51619c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '72d5df4c8c3201418e634ffb28a80b3830ca2a65' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-pagination/bs-pagination.cmp.test.js

@@ -0,0 +1,102 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-pagination', () => {
+    it('defaults to page 1 of 1', async () => {
+        const { root } = await render(h("bs-pagination", null));
+        expect(root).toEqualAttribute('current-page', '1');
+        const pages = root.shadowRoot.querySelectorAll('[part~="page"]');
+        expect(pages.length).toBe(1);
+        expect(pages[0]).toHaveTextContent('1');
+    });
+    it('matches the Figma spec exactly: page 1 of 12 shows 1 2 3 ... 12', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 12, currentPage: 1 }));
+        const items = Array.from(root.shadowRoot.querySelectorAll('[part="list"] > li')).map(li => li.textContent.trim());
+        // First and last <li> are the prev/next buttons (no text content, icon-only).
+        expect(items).toEqual(['', '1', '2', '3', '', '12', '']);
+    });
+    it('renders every page number with no ellipsis when totalPages is small', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 5, currentPage: 1 }));
+        expect(root.shadowRoot.querySelectorAll('[part="ellipsis"]').length).toBe(0);
+        const pages = Array.from(root.shadowRoot.querySelectorAll('[part~="page"]')).map(el => el.textContent.trim());
+        expect(pages).toEqual(['1', '2', '3', '4', '5']);
+    });
+    it('shows both ellipses when the current page is in the middle', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 12, currentPage: 6 }));
+        expect(root.shadowRoot.querySelectorAll('[part="ellipsis"]').length).toBe(2);
+        const pages = Array.from(root.shadowRoot.querySelectorAll('[part~="page"]')).map(el => el.textContent.trim());
+        expect(pages).toEqual(['1', '5', '6', '7', '12']);
+    });
+    it('shows only a leading ellipsis when the current page is near the end', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 12, currentPage: 12 }));
+        const pages = Array.from(root.shadowRoot.querySelectorAll('[part~="page"]')).map(el => el.textContent.trim());
+        expect(pages).toEqual(['1', '10', '11', '12']);
+        expect(root.shadowRoot.querySelectorAll('[part="ellipsis"]').length).toBe(1);
+    });
+    it('marks the current page with aria-current and the "current" part', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 3, currentPage: 2 }));
+        const current = root.shadowRoot.querySelector('[part~="current"]');
+        expect(current).not.toBeNull();
+        expect(current).toEqualAttribute('aria-current', 'page');
+        expect(current.textContent.trim()).toBe('2');
+    });
+    it('disables the previous button on the first page and the next button on the last page', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 3, currentPage: 1 }));
+        expect(root.shadowRoot.querySelector('[part="prev"]')).toHaveAttribute('disabled');
+        expect(root.shadowRoot.querySelector('[part="next"]')).not.toHaveAttribute('disabled');
+    });
+    it('updates currentPage and emits bsPageChange when a page button is clicked', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-pagination", { totalPages: 3, currentPage: 1 }));
+        const changeSpy = spyOnEvent('bsPageChange');
+        const pageButtons = root.shadowRoot.querySelectorAll('[part~="page"]');
+        pageButtons[1].click();
+        await waitForChanges();
+        expect(root).toEqualAttribute('current-page', '2');
+        expect(changeSpy).toHaveReceivedEventDetail(2);
+    });
+    it('advances/retreats a page via the next/prev buttons and emits bsPageChange', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-pagination", { totalPages: 3, currentPage: 2 }));
+        const changeSpy = spyOnEvent('bsPageChange');
+        root.shadowRoot.querySelector('[part="next"]').click();
+        await waitForChanges();
+        expect(root).toEqualAttribute('current-page', '3');
+        expect(changeSpy).toHaveReceivedEventDetail(3);
+        root.shadowRoot.querySelector('[part="prev"]').click();
+        await waitForChanges();
+        expect(root).toEqualAttribute('current-page', '2');
+        expect(changeSpy).toHaveReceivedEventDetail(2);
+    });
+    it('does not emit bsPageChange when clicking the already-current page', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-pagination", { totalPages: 3, currentPage: 2 }));
+        const changeSpy = spyOnEvent('bsPageChange');
+        const current = root.shadowRoot.querySelector('[part~="current"]');
+        current.click();
+        await waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+    });
+    describe('invalid input hardening', () => {
+        it('falls back to the default siblingCount when the attribute is an empty string', async () => {
+            // Reproduces a real bug: a Storybook control left unset produced `sibling-count=""` (Stencil
+            // can't parse that as a number), which corrupted the page list into two adjacent `...`s with
+            // pages 2/3 missing entirely, instead of falling back to siblingCount's own default of 1.
+            const container = document.createElement('div');
+            container.innerHTML = '<bs-pagination total-pages="12" current-page="1" sibling-count=""></bs-pagination>';
+            document.body.appendChild(container);
+            const el = container.querySelector('bs-pagination');
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            const pages = Array.from(el.shadowRoot.querySelectorAll('[part~="page"]')).map(node => node.textContent.trim());
+            expect(pages).toEqual(['1', '2', '3', '12']);
+            expect(el.shadowRoot.querySelectorAll('[part="ellipsis"]').length).toBe(1);
+            container.remove();
+        });
+        it('treats a non-finite totalPages as 1 rather than producing NaN comparisons', async () => {
+            const { root } = await render(h("bs-pagination", { totalPages: NaN, currentPage: 1 }));
+            const pages = Array.from(root.shadowRoot.querySelectorAll('[part~="page"]')).map(el => el.textContent.trim());
+            expect(pages).toEqual(['1']);
+        });
+    });
+    it('reflects custom previousLabel/nextLabel as aria-label', async () => {
+        const { root } = await render(h("bs-pagination", { previousLabel: "Go back", nextLabel: "Go forward" }));
+        expect(root.shadowRoot.querySelector('[part="prev"]')).toEqualAttribute('aria-label', 'Go back');
+        expect(root.shadowRoot.querySelector('[part="next"]')).toEqualAttribute('aria-label', 'Go forward');
+    });
+});

package/dist/collection/components/bs-pagination/bs-pagination.css

@@ -0,0 +1,120 @@
+/**
+ * @prop --bs-pagination-gap: Gap between items. Aliased to --bs-spacing-50.
+ * @prop --bs-pagination-size: Width/height of each control (prev/next/page/ellipsis). Aliased to --bs-spacing-550 (44px, exact match to Figma).
+ * @prop --bs-pagination-radius: Corner radius of each control. Aliased to --bs-border-radius-100.
+ * @prop --bs-pagination-font-size: Aliased to --bs-font-size-md.
+ * @prop --bs-pagination-line-height: Aliased to --bs-line-height-body-md.
+ * @prop --bs-pagination-color: Icon/page-number color, unselected. Aliased to --bs-text-secondary.
+ * @prop --bs-pagination-color-disabled: Prev/next icon color when at the first/last page. Aliased to --bs-icon-disabled.
+ * @prop --bs-pagination-hover: Background of an unselected page button on hover. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-pagination-pressed: Background of an unselected page button when pressed. Aliased to --bs-color-neutral-container-pressed.
+ * @prop --bs-pagination-current-bg: Background of the current page's button. Aliased to --bs-color-primary-default.
+ * @prop --bs-pagination-current-bg-hover: Background of the current page's button on hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-pagination-current-bg-pressed: Background of the current page's button when pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-pagination-current-color: Text color of the current page's button. Aliased to --bs-text-on-action.
+ * @prop --bs-pagination-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-block;
+
+  --bs-pagination-gap: var(--bs-spacing-50);
+  --bs-pagination-size: var(--bs-spacing-550);
+  --bs-pagination-radius: var(--bs-border-radius-100);
+
+  --bs-pagination-font-size: var(--bs-font-size-md);
+  --bs-pagination-line-height: var(--bs-line-height-body-md);
+
+  --bs-pagination-color: var(--bs-text-secondary);
+  --bs-pagination-color-disabled: var(--bs-icon-disabled);
+  --bs-pagination-hover: var(--bs-color-neutral-container-hover);
+  --bs-pagination-pressed: var(--bs-color-neutral-container-pressed);
+
+  --bs-pagination-current-bg: var(--bs-color-primary-default);
+  --bs-pagination-current-bg-hover: var(--bs-color-primary-hover);
+  --bs-pagination-current-bg-pressed: var(--bs-color-primary-pressed);
+  --bs-pagination-current-color: var(--bs-text-on-action);
+
+  --bs-pagination-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+.bs-pagination__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--bs-pagination-gap);
+  font-family: inherit;
+}
+
+.bs-pagination__item {
+  display: flex;
+}
+
+.bs-pagination__control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-pagination-size);
+  height: var(--bs-pagination-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--bs-pagination-radius);
+  background: transparent;
+  color: var(--bs-pagination-color);
+  font-family: inherit;
+  font-size: var(--bs-pagination-font-size);
+  line-height: calc(var(--bs-pagination-line-height) * 1px);
+  cursor: pointer;
+}
+
+.bs-pagination__control svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-pagination__control:disabled {
+  color: var(--bs-pagination-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-pagination__page:not(:disabled):hover {
+  background: var(--bs-pagination-hover);
+}
+
+.bs-pagination__page:not(:disabled):active {
+  background: var(--bs-pagination-pressed);
+}
+
+.bs-pagination__control:focus-visible {
+  outline: 2px solid var(--bs-pagination-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-pagination__page--current {
+  background: var(--bs-pagination-current-bg);
+  color: var(--bs-pagination-current-color);
+}
+
+.bs-pagination__page--current:hover {
+  background: var(--bs-pagination-current-bg-hover);
+}
+
+.bs-pagination__page--current:active {
+  background: var(--bs-pagination-current-bg-pressed);
+}
+
+.bs-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-pagination-size);
+  height: var(--bs-pagination-size);
+  color: var(--bs-pagination-color);
+}
+
+.bs-pagination__ellipsis svg {
+  width: 24px;
+  height: 24px;
+}

package/dist/collection/components/bs-pagination/bs-pagination.js

@@ -0,0 +1,233 @@
+import { h } from "@stencil/core";
+/**
+ * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+ * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+ * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+ * input) is a structurally different composite widget and isn't covered by this component.
+ *
+ * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+ * where to collapse into `...` itself, the consumer never builds the button list by hand.
+ *
+ * ## When to use
+ * - Paging through a large, ordered result set (a table, a search results list) where jumping
+ *   directly to a specific page number is useful.
+ *
+ * ## When not to use
+ * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+ * - A huge page count where users realistically only ever go forward/back one page at a time --
+ *   plain prev/next controls (no numbers) are simpler there.
+ *
+ * @part list - The `<ul>` element.
+ * @part item - Each `<li>` in the list.
+ * @part prev - The previous-page button.
+ * @part next - The next-page button.
+ * @part page - Each page-number button.
+ * @part current - The current page's button (in addition to `page`).
+ * @part ellipsis - Each collapsed-range indicator.
+ */
+export class BsPagination {
+    /** Total number of pages. Must be a positive integer -- there's always at least one page. */
+    totalPages = 1;
+    /** The active page (1-indexed). Mutable + reflected so clicking a page button updates it
+     * directly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for
+     * the consumer to react to (e.g. fetching that page's data). */
+    currentPage = 1;
+    /** How many page numbers to show on each side of the current page before collapsing the rest
+     * into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows
+     * `1 2 3 ... 12`). */
+    siblingCount = 1;
+    /** Accessible name for the previous-page button. */
+    previousLabel = 'Previous page';
+    /** Accessible name for the next-page button. */
+    nextLabel = 'Next page';
+    /** Fires whenever the active page changes as a result of the user clicking a page/prev/next
+     * button -- not when `currentPage` is set programmatically from outside. */
+    bsPageChange;
+    // Defends against any non-finite/negative input reaching the render/list-building logic below --
+    // e.g. an HTML attribute that failed to parse as a number resolves to an empty string, which
+    // Stencil can't coerce into a valid `number` prop, leaving it `undefined`/`null` rather than
+    // falling back to the class field's own default. `undefined * 2` is `NaN`, which silently
+    // corrupted every comparison in `getPageList` (confirmed: it rendered as two adjacent `...`s with
+    // pages 2/3 missing, not a crash) -- exactly the kind of quiet, hard-to-notice breakage a boundary
+    // check here prevents outright. Computed once and reused by both `getPageList` and `render`'s
+    // disabled checks, rather than repeating the same fallback logic in two places.
+    get safeTotalPages() {
+        return Number.isFinite(this.totalPages) && this.totalPages >= 1 ? this.totalPages : 1;
+    }
+    get safeSiblingCount() {
+        return Number.isFinite(this.siblingCount) && this.siblingCount >= 0 ? this.siblingCount : 1;
+    }
+    goToPage(page) {
+        if (page === this.currentPage || page < 1 || page > this.safeTotalPages)
+            return;
+        this.currentPage = page;
+        this.bsPageChange.emit(page);
+    }
+    getPageList() {
+        const { currentPage } = this;
+        const totalPages = this.safeTotalPages;
+        const siblingCount = this.safeSiblingCount;
+        const totalNumbersToShowBeforeCollapsing = siblingCount * 2 + 5;
+        if (totalNumbersToShowBeforeCollapsing >= totalPages) {
+            return range(1, totalPages);
+        }
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        const showLeftEllipsis = leftSiblingIndex > 2;
+        const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+        if (!showLeftEllipsis && showRightEllipsis) {
+            const leftItemCount = siblingCount * 2 + 1;
+            return [...range(1, leftItemCount), 'ellipsis', totalPages];
+        }
+        if (showLeftEllipsis && !showRightEllipsis) {
+            const rightItemCount = siblingCount * 2 + 1;
+            return [1, 'ellipsis', ...range(totalPages - rightItemCount + 1, totalPages)];
+        }
+        return [1, 'ellipsis', ...range(leftSiblingIndex, rightSiblingIndex), 'ellipsis', totalPages];
+    }
+    render() {
+        const pageList = this.getPageList();
+        return (h("nav", { key: '5c11c5d41a0ea748a6564dd6afe95acd1e1f7233', "aria-label": "Pagination" }, h("ul", { key: 'bbb88ec648d773e31cdfb5afadba74f465510acb', part: "list", class: "bs-pagination__list" }, h("li", { key: '7eb6c6c6b4e4f129d1b0ad09d6ad33bd1e529c39', part: "item", class: "bs-pagination__item" }, h("button", { key: '1b30bbf87077802e5fb70d0b5d5bde9b1556efbe', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'e5f834332744d5caace2ff2da50dc9ea0fad6c51' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '5e52c579ff5c2501470af0749f44dddf97bf268c', part: "item", class: "bs-pagination__item" }, h("button", { key: '6ae764d141460b432834dc79be6e094149e6f7c5', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'c4e25fa5b69848ca35b9e907b0f90d0a2d8fbf14' }))))));
+    }
+    static get is() { return "bs-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of pages. Must be a positive integer -- there's always at least one page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active page (1-indexed). Mutable + reflected so clicking a page button updates it\ndirectly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for\nthe consumer to react to (e.g. fetching that page's data)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "siblingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many page numbers to show on each side of the current page before collapsing the rest\ninto `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows\n`1 2 3 ... 12`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sibling-count",
+                "defaultValue": "1"
+            },
+            "previousLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the previous-page button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous-label",
+                "defaultValue": "'Previous page'"
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the next-page button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-label",
+                "defaultValue": "'Next page'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPageChange",
+                "name": "bsPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the active page changes as a result of the user clicking a page/prev/next\nbutton -- not when `currentPage` is set programmatically from outside."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+function range(start, end) {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, i) => start + i);
+}
+const ChevronLeftIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ChevronRightIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const EllipsisIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-pagination/bs-pagination.stories.js

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-pagination',
+    parameters: { docs: { description: { component: componentDescription('bs-pagination') } } },
+    render: args => html `
+    <bs-pagination
+      total-pages=${args.totalPages}
+      current-page=${args.currentPage}
+      sibling-count=${args.siblingCount}
+      @bsPageChange=${(ev) => console.log('bsPageChange', ev.detail)}
+    ></bs-pagination>
+  `,
+    argTypes: {
+        totalPages: { control: { type: 'number', min: 1 }, description: propDescription('bs-pagination', 'totalPages') },
+        currentPage: { control: { type: 'number', min: 1 }, description: propDescription('bs-pagination', 'currentPage') },
+        siblingCount: { control: { type: 'number', min: 0 }, description: propDescription('bs-pagination', 'siblingCount') },
+    },
+    args: {
+        totalPages: 12,
+        currentPage: 1,
+        siblingCount: 1,
+    },
+};
+export default meta;
+// Matches the Figma spec's own example exactly: 1 2 3 ... 12.
+export const Default = {};
+export const MiddlePage = {
+    name: 'Middle page (both ellipses)',
+    args: { currentPage: 6 },
+};
+export const LastPage = {
+    name: 'Last page',
+    args: { currentPage: 12 },
+};
+export const FewPages = {
+    name: 'Few pages (no ellipsis)',
+    args: { totalPages: 5, currentPage: 1 },
+};
+export const WiderSiblingCount = {
+    name: 'Wider sibling count',
+    args: { currentPage: 6, siblingCount: 2 },
+};

package/dist/collection/components/bs-radio/bs-radio.js

@@ -51,7 +51,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: 'da5cdc3a3661ed9d2f10741e46f87cc9beb9dbfd', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '431a861dbbd5ea993272714e5c366eaea3a0bd8d', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '525d9b9d3d980a70af93a7ee800043ce0ba8d98e', class: "bs-radio__hit-area" }, h("span", { key: '8c19cc4f2eb771fe82d4cb20376563b61da0f69e', class: "bs-radio__state-layer" }, h("span", { key: '33829a5a6c179a8bc3289f4a25fe65ddbcce5c96', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '36fc0fa7d46a6bd32879c83a3d084afb282fd39d', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'efc3e222bae86289767794a23ede57b349567238', part: "label", class: "bs-radio__label" }, h("slot", { key: 'd4842d16ecade0d79572bf53a37549f017f846dd' }))));
+        return (h("label", { key: '4c6ce599b279240445e60b89fc909f55e105cc69', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '26ca5de7011a9c0b1d2d61c35e8859ebe5e2041f', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '3cd825f6153e79c6aede28a9ebb9f4d9ee3b2d6e', class: "bs-radio__hit-area" }, h("span", { key: '3a1e5b58a14a6f94770ae9dca5a541ade38efcfc', class: "bs-radio__state-layer" }, h("span", { key: '83391c2364a58a1cb1582fca112abd77886e5b10', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '799e979b2b299f05b535a66604fa7c975fd43456', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '89271b1d0c8460b4fce80a21b3c3fe2029630046', part: "label", class: "bs-radio__label" }, h("slot", { key: 'e5401f3f384330a51e51b7309a459bcb237e9034' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-slider/bs-slider.js

@@ -199,7 +199,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '85529486524fc9859b4b1706a69e70f46537ab77', class: rootClasses }, this.showLabel && (h("div", { key: '4871263c05627057e838478048caed54554db6fc', class: "bs-slider__header" }, h("span", { key: '91ef26112441bdd1bdc7b4b0d1653c81db88bf4a', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '336901d2c9195c4415fce9fe9c683c51b652feb8', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '49330dd4efe29c2f4d27ded8a5ed812b5a98d6af', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '6daa487800d4303d2d43c7d526bd457d3caddf7f', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '94e7804dd4e03881c5b53e3eb60ad6d4908b3c6d', class: rootClasses }, this.showLabel && (h("div", { key: '5a175e2c755c316e31637a99f32bbee4529a060e', class: "bs-slider__header" }, h("span", { key: '31c8b1ee83e4f86d9df201bb3e98be143c1bb4fb', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '3e76e43398df4e013544e14cda18d61297f586c1', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '68b68fb76315c024e8a58ef6e69ef5d3bcef8b8a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '37cd8e768c6c374f972ab7e00893193eeaaa14ec', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }