@brandsync/wc 0.0.11 → 0.1.0

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.cmp.test.js

@@ -0,0 +1,76 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-radio', () => {
+    it('renders an unchecked native radio by default', async () => {
+        const { root } = await render(h("bs-radio", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', 'radio');
+        expect(input.checked).toBe(false);
+        expect(root.shadowRoot.querySelector('[part="dot"]')).toBeNull();
+    });
+    it('reflects the checked prop to the native input and shows the center dot', async () => {
+        const { root } = await render(h("bs-radio", { checked: true }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="circle"]')).toHaveClass('bs-radio__circle--selected');
+        expect(root.shadowRoot.querySelector('[part="dot"]')).not.toBeNull();
+    });
+    it('clicking the input checks it and emits bsChange with the value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-radio", { value: "one" }));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail('one');
+    });
+    it('passes name and value attributes through to the native input', async () => {
+        const { root } = await render(h("bs-radio", { name: "fruit", value: "apple" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('name', 'fruit');
+        expect(input).toEqualAttribute('value', 'apple');
+    });
+    // NOTE: each <bs-radio> has its own shadow root, so its native <input> lives in its own separate
+    // DOM tree. Per the HTML spec, a "radio button group" is scoped to a single tree -- shadow DOM
+    // boundaries mean same-`name` inputs in *different* <bs-radio> instances are NOT part of the same
+    // native radio group, so clicking one does not natively uncheck another. This is a real, tested
+    // limitation of composing native <input type="radio"> inside separate shadow roots, not a bug in
+    // this component -- see bs-radio.mdx's Accessibility section for the documented gap. Within a
+    // single instance's own shadow root the native input still behaves like a normal radio input.
+    it('same-name bs-radio instances do NOT natively uncheck each other, since each lives in its own shadow root', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-radio", { name: "fruit", value: "apple" }), h("bs-radio", { name: "fruit", value: "banana" })));
+        const [first, second] = Array.from(root.querySelectorAll('bs-radio'));
+        const firstInput = first.shadowRoot.querySelector('input');
+        const secondInput = second.shadowRoot.querySelector('input');
+        firstInput.click();
+        await waitForChanges();
+        expect(firstInput.checked).toBe(true);
+        secondInput.click();
+        await waitForChanges();
+        expect(secondInput.checked).toBe(true);
+        // Real (shadow-DOM-scoped) native behavior: the first input is untouched, not unchecked.
+        expect(firstInput.checked).toBe(true);
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the native input', async () => {
+            const { root } = await render(h("bs-radio", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toHaveAttribute('disabled');
+        });
+        it('prevents toggling via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-radio", { disabled: true }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.checked).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-radio", null, "Option A"));
+        expect(root).toHaveTextContent('Option A');
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(label.querySelector('slot')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,164 @@
+/**
+ * @prop --bs-radio-size: Diameter of the visual radio ring. Aliased to --bs-spacing-300.
+ * @prop --bs-radio-border-width: Width of the ring border.
+ * @prop --bs-radio-state-layer-size: Diameter of the hover/focus/pressed halo behind the ring.
+ * @prop --bs-radio-hit-area-size: Diameter of the layout box the state layer is centered in.
+ * @prop --bs-radio-gap: Gap between the ring and the label text. Aliased to --bs-spacing-100.
+ */
+:host {
+  display: inline-block;
+
+  --bs-radio-size: var(--bs-spacing-300);
+  --bs-radio-border-width: 2px;
+  --bs-radio-state-layer-size: 40px;
+  --bs-radio-hit-area-size: 48px;
+  --bs-radio-gap: var(--bs-spacing-100);
+}
+
+.bs-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-radio-gap);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.bs-radio--disabled {
+  cursor: not-allowed;
+}
+
+/* The native input is visually hidden but stays in the layout/focus/keyboard chain -- opacity: 0
+   (not display: none) so it can still receive and show focus. Covers the whole label (same
+   pattern as bs-checkbox) so clicking anywhere -- ring or label text -- toggles it. */
+.bs-radio__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.bs-radio__input:disabled {
+  cursor: not-allowed;
+}
+
+/* Outer clickable-area layout box -- just sizes/centers the state layer, carries no styling of
+   its own (the real hit target is the absolutely-positioned input above, covering the whole
+   label). */
+.bs-radio__hit-area {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-radio-hit-area-size);
+  height: var(--bs-radio-hit-area-size);
+}
+
+/* State layer -- the soft hover/focus/pressed background wash, distinct from the ring's own
+   border color. */
+.bs-radio__state-layer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-radio-state-layer-size);
+  height: var(--bs-radio-state-layer-size);
+  border-radius: 50%;
+  background: var(--bs-radio-bg-default);
+}
+
+.bs-radio__circle {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-radio-size);
+  height: var(--bs-radio-size);
+  border: var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);
+  border-radius: 50%;
+  background: transparent;
+}
+
+.bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-default);
+}
+
+.bs-radio__dot {
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background: var(--bs-radio-icon-checked);
+}
+
+/* Hover/focus/pressed -- keyed off the hidden native input's pseudo-classes, since it sits on top
+   of and covers the whole label, so it always reflects the user's actual pointer/keyboard target. */
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot {
+  background: var(--bs-radio-icon-hover);
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-focus);
+  outline: 2px solid var(--bs-radio-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-focus);
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-focus);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-pressed);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-pressed);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-pressed);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-disabled);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-border-disabled);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot {
+  background: var(--bs-radio-icon-disabled);
+}
+
+.bs-radio__label {
+  font-size: var(--bs-font-size-md);
+  color: var(--bs-radio-label-default);
+}
+
+.bs-radio--disabled .bs-radio__label {
+  color: var(--bs-radio-label-disabled);
+}