@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,193 @@
+import { h } from "@stencil/core";
+import { BRANDSYNC_LOGO_FULL_LIGHT_SVG } from "./brandsync-logo-full-light";
+import { BRANDSYNC_LOGO_FULL_DARK_SVG } from "./brandsync-logo-full-dark";
+import { BRANDSYNC_LOGO_MARK_SVG } from "./brandsync-logo-mark";
+/**
+ * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+ * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+ * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+ * down to a narrowed box, rather than using a real icon-only asset).
+ *
+ * ## When to use
+ * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+ *
+ * ## When not to use
+ * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+ *   own inline Genie asset), not this one.
+ *
+ * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+ * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+ * the icon-only mark at different responsive breakpoints -- renamed here to
+ * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+ * renders), not literally a device/breakpoint switch.
+ *
+ * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+ * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+ * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+ * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+ * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+ * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+ * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+ * is already designed for whatever surface it's placed on.
+ *
+ * @part logo - The rendered SVG/image's wrapper.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in bs-logo.css,
+// not here -- see bs-navigation-header.css's identical note.
+export class BsLogo {
+    /** How much of the logo to render. `full` is the icon + "EG BrandSync" wordmark (190.977x44
+     * natural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a
+     * consumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class
+     * doc above. */
+    variant = 'full';
+    /**
+     * Which pre-built asset to use for `variant="full"` -- Figma ships a genuinely separate,
+     * differently-drawn dark-background asset (every wordmark path filled solid white, and the
+     * icon's outer shape a single solid-white path instead of the light version's two-path
+     * white-fill-plus-border-ring), not a CSS currentColor swap of identical paths.
+     *
+     * `"auto"` (default) renders both assets and lets CSS pick one via
+     * `--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in
+     * `src/global/base.css`, flipped by the same `[data-theme="dark"]` attribute every other
+     * `--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring
+     * needed, the same way a consuming app's own dark mode already re-themes every other part of
+     * this library via ordinary CSS custom property inheritance. Set `"light"`/`"dark"` explicitly
+     * to pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise
+     * dark-themed.
+     *
+     * Has no effect on `variant="mark"`: Figma's component set only has one real designed instance
+     * of the icon-only mark (`Device="Tab and mobile"`, `Background="Default"`) -- there's no
+     * separate dark version of it, so the mark renders identically regardless of this prop.
+     */
+    background = 'auto';
+    /** `variant="custom"` only: the image URL to render (e.g. a URL your app already fetched from a
+     * logo API). Ignored for `full`/`mark`. */
+    src = null;
+    /**
+     * `variant="custom"` only: accessible alt text for the image -- a product logo is meaningful
+     * content (whose brand is this?), not decorative, so set this to something real (e.g. the
+     * product/company name). Falls back to `alt=""` (marking the image decorative to assistive
+     * tech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no
+     * `alt` attribute at all is a harder accessibility failure than one explicitly marked
+     * decorative, but an empty fallback is still worse than a real name, so don't rely on it.
+     * Ignored for `full`/`mark` (those already carry their own fixed `aria-label="BrandSync"`).
+     */
+    alt = null;
+    render() {
+        if (this.variant === 'custom') {
+            return h("img", { part: "logo", class: "bs-logo bs-logo--custom", src: this.src ?? undefined, alt: this.alt ?? '' });
+        }
+        if (this.variant === 'mark') {
+            return h("div", { part: "logo", class: "bs-logo bs-logo--mark", role: "img", "aria-label": "BrandSync", innerHTML: BRANDSYNC_LOGO_MARK_SVG });
+        }
+        return (h("div", { part: "logo", class: `bs-logo bs-logo--full bs-logo--bg-${this.background}`, role: "img", "aria-label": "BrandSync" }, h("div", { class: "bs-logo__asset bs-logo__asset--light", innerHTML: BRANDSYNC_LOGO_FULL_LIGHT_SVG }), h("div", { class: "bs-logo__asset bs-logo__asset--dark", innerHTML: BRANDSYNC_LOGO_FULL_DARK_SVG })));
+    }
+    static get is() { return "bs-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoVariant",
+                    "resolved": "\"custom\" | \"full\" | \"mark\"",
+                    "references": {
+                        "BsLogoVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'full'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoBackground",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {
+                        "BsLogoBackground": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "'auto'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "null"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "null"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,69 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['full', 'mark', 'custom'];
+const backgrounds = ['auto', 'light', 'dark'];
+const meta = {
+    title: 'Components/bs-logo',
+    parameters: { docs: { description: { component: componentDescription('bs-logo') } } },
+    render: args => html `<bs-logo variant=${args.variant} background=${args.background} src=${args.src} alt=${args.alt}></bs-logo>`,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-logo', 'variant') },
+        background: { control: 'select', options: backgrounds, description: propDescription('bs-logo', 'background') },
+        src: { control: 'text', description: propDescription('bs-logo', 'src') },
+        alt: { control: 'text', description: propDescription('bs-logo', 'alt') },
+    },
+    args: {
+        variant: 'full',
+        background: 'auto',
+        src: '',
+        alt: '',
+    },
+};
+export default meta;
+export const Full = {
+    name: 'Full (light)',
+};
+// `data-theme="dark"` is set on a wrapper scoped to just this story, NOT via a globals override on
+// the toolbar's Theme switch -- that switch's decorator (see .storybook/preview.ts) sets the
+// attribute on the shared document root, which breaks down on this component's Docs page (every
+// story renders together in one document there, so one story forcing a document-wide theme while
+// its siblings render under the *other* theme thrashes). A local wrapper gets the identical CSS
+// custom property cascade (tokens.css's dark block matches any `[data-theme="dark"]` element, not
+// specifically <html>) without touching shared state. background is left at its "auto" default
+// (via args below) so this demonstrates the logo following the ambient theme on its own, the same
+// way every other --bs-* token already does (see the CSS bridge in src/global/base.css).
+export const FullAutoDark = {
+    name: 'Full (auto, dark theme)',
+    render: args => html `
+    <div data-theme="dark" style="background: var(--bs-surface-base); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+// Pins the dark asset explicitly via background="dark", regardless of the page's own theme --
+// for a consumer that places this on a dark surface without setting [data-theme="dark"] itself.
+// Rendered on a manually dark canvas (not the global theme switch) to prove the override doesn't
+// depend on that switch at all.
+export const FullDark = {
+    name: 'Full (dark, explicit)',
+    args: { background: 'dark' },
+    render: args => html `
+    <div style="background: var(--bs-surface-inverse); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+export const Mark = {
+    name: 'Mark',
+    args: { variant: 'mark' },
+};
+// A consumer-supplied logo (e.g. fetched at runtime from a service like brand.dev) instead of the
+// built-in BrandSync assets -- this component only renders the image, it never fetches it itself.
+export const Custom = {
+    name: 'Custom (consumer-supplied image)',
+    args: {
+        variant: 'custom',
+        src: 'https://placehold.co/160x44/0062c1/white?text=Acme+Co',
+        alt: 'Acme Co',
+    },
+};

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: 'de85d799d52e31750a00fa46133f72e1d97e3887', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'a3f900ca080c3ec56a2fee46efcef6fe94f7fa1d' })));
+        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: '510e40e5cc85e4ff0e32caee98a341758b2c61ab', 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: '877d2a8d0fee3b7f2f867cb1c0ad08eefa0cea3c', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '7ede0107a9f47c1cf5f4a19323c74139f91c2bbd', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'af85d8ca9c528a9a52a297a4f8071d9a7b50d2df', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '50cd5face3d9aaa3f9ae127af317d4e5cac0febf' }))));
+        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;
+}