@brandsync/wc 1.12.0 → 1.13.0

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

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+/**
+ * A single chat message bubble. User messages align to the end with a primary-tinted bubble;
+ * assistant messages align to the start on a neutral bubble. The consumer renders the content
+ * (e.g. markdown) into the default slot.
+ *
+ * Composed from: `bs-card` (the bubble surface).
+ *
+ * ## When to use
+ * - One entry per turn in a chat transcript, usually inside `bs-message-list`.
+ *
+ * ## When not to use
+ * - For transient notices or system banners -- use `bs-toast` / `bs-composer-status-banner`.
+ *
+ * @slot - The message content. The consumer renders markdown/rich content here.
+ * @slot avatar - Optional avatar (e.g. `bs-avatar`) beside the bubble.
+ * @slot footer - Optional content below the bubble (e.g. `bs-chatbot-response-action`).
+ * @slot timestamp - Overrides the default `<time>` element rendered from `timestamp`.
+ * @part container - The bubble (`bs-card`).
+ * @part avatar - The avatar wrapper.
+ * @part content - The message content wrapper.
+ * @part footer - The footer wrapper.
+ * @part timestamp - The timestamp wrapper.
+ * @prop --bs-message-gap - Gap between avatar and message column. Aliased to `--bs-spacing-100`.
+ * @prop --bs-message-max-width - Max width of the message column. Defaults to `80%`.
+ * @prop --bs-message-padding - Bubble padding. Aliased to `--bs-spacing-150`.
+ * @prop --bs-message-radius - Bubble corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-message-user-bg - User bubble background. Aliased to `--bs-color-primary-container`.
+ * @prop --bs-message-user-color - User bubble text color. Aliased to `--bs-text-default`.
+ * @prop --bs-message-assistant-bg - Assistant bubble background. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-message-assistant-color - Assistant bubble text color. Aliased to `--bs-text-default`.
+ * @prop --bs-message-error-bg - Error bubble background. Aliased to `--bs-color-error-container`.
+ * @prop --bs-message-error-color - Error bubble text color. Aliased to `--bs-text-error`.
+ * @prop --bs-message-pending-opacity - Bubble opacity while pending. Defaults to `0.6`.
+ * @prop --bs-message-timestamp-color - Timestamp color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-message-timestamp-font-size - Timestamp font size. Aliased to `--bs-font-size-xs`.
+ */
+export class BsMessage {
+    /** Who sent the message. Controls alignment and colour. */
+    role = 'assistant';
+    /** Human-readable timestamp text shown inside a `<time>` element. Omit to render none. */
+    timestamp;
+    /** Machine-readable value for the `<time>` element's `datetime` attribute. */
+    datetime;
+    /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
+    status = 'default';
+    render() {
+        return (h("div", { key: '76e0e1d307de73bca97c5a79b3ff607278311d3e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: '00c91e1ab7a3cf9e81401e36b50b331c0d7d2735', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'a3b0577cbafcd699ecf37c3299757f76e88cd572', name: "avatar" })), h("div", { key: '10b3dc86e24ae0860fffccedb5aaa9fed78f44c5', class: "bs-message__column" }, h("bs-card", { key: '3a88a28a5e9cb9898562860daf576b4280a8e601', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: '95a9c8394c55789cbf7a976b16466d7a9593fae6', part: "content", class: "bs-message__content" }, h("slot", { key: '81c214388b65904f4e15bfae23ddbc34ed35e267' }))), h("div", { key: '27768ab59923180c6f31f7bce893fefa11c967d1', part: "footer", class: "bs-message__footer" }, h("slot", { key: '606f025032c40e01c2490b1d18441c1d2557beac', name: "footer" })), h("div", { key: '79acf174363c391a37ca1907ececf87c9c1cdb45', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '08060d46ea218a3c9315bd2fc89165c605e54ddd', name: "timestamp" }, this.timestamp && h("time", { key: 'a9829bf9725b3c41eb5032427822a2d6fbb2cb6f', dateTime: this.datetime }, this.timestamp))))));
+    }
+    static get is() { return "bs-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMessageRole",
+                    "resolved": "\"assistant\" | \"user\"",
+                    "references": {
+                        "BsMessageRole": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-message/bs-message.tsx",
+                            "id": "src/components/bs-message/bs-message.tsx::BsMessageRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Who sent the message. Controls alignment and colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "role",
+                "defaultValue": "'assistant'"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp"
+            },
+            "datetime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Machine-readable value for the `<time>` element's `datetime` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "datetime"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMessageStatus",
+                    "resolved": "\"default\" | \"error\" | \"pending\"",
+                    "references": {
+                        "BsMessageStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-message/bs-message.tsx",
+                            "id": "src/components/bs-message/bs-message.tsx::BsMessageStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,33 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-message',
+    parameters: { docs: { description: { component: componentDescription('bs-message') } } },
+    render: args => html `
+    <bs-message role=${args.role} timestamp=${args.timestamp} datetime=${args.datetime} status=${args.status}>
+      Here is a short answer to your question.
+    </bs-message>
+  `,
+    argTypes: {
+        role: { control: 'inline-radio', options: ['user', 'assistant'], description: propDescription('bs-message', 'role') },
+        timestamp: { control: 'text', description: propDescription('bs-message', 'timestamp') },
+        datetime: { control: 'text', description: propDescription('bs-message', 'datetime') },
+        status: { control: 'inline-radio', options: ['default', 'error', 'pending'], description: propDescription('bs-message', 'status') },
+    },
+    args: { role: 'assistant', timestamp: '10:42', datetime: '2026-01-01T10:42:00Z', status: 'default' },
+};
+export default meta;
+export const Default = {};
+export const User = { args: { role: 'user' } };
+export const Pending = { args: { role: 'user', status: 'pending' } };
+export const ErrorState = { name: 'Error', args: { role: 'user', status: 'error' } };
+export const WithAvatarAndFooter = {
+    name: 'With avatar and footer',
+    render: args => html `
+    <bs-message role=${args.role} timestamp=${args.timestamp}>
+      <bs-avatar slot="avatar"></bs-avatar>
+      Here is a short answer to your question.
+      <bs-chatbot-response-action slot="footer"></bs-chatbot-response-action>
+    </bs-message>
+  `,
+};

package/dist/collection/components/bs-message-list/bs-message-list.cmp.test.js

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const nextMutation = () => new Promise(r => setTimeout(r, 0));
+const tall = () => h("div", { style: { height: '300px' } });
+const renderList = (extra = {}) => render(h("bs-message-list", { style: { display: 'block', height: '200px' }, ...extra }, tall(), tall()));
+const viewportOf = (root) => root.shadowRoot.querySelector('.bs-message-list__viewport');
+const scrollTo = (el, top) => {
+    el.scrollTop = top;
+    el.dispatchEvent(new Event('scroll'));
+};
+const appendMessage = async (root, waitForChanges) => {
+    root.appendChild(document.createElement('bs-message'));
+    await nextMutation();
+    await waitForChanges();
+};
+describe('bs-message-list', () => {
+    it('renders a polite log region', async () => {
+        const { root } = await renderList();
+        expect(root.shadowRoot.querySelector('[role="log"]')).toEqualAttribute('aria-live', 'polite');
+    });
+    it('does not show the scroll button initially', async () => {
+        const { root } = await renderList();
+        expect(root.shadowRoot.querySelector('[part="scroll-to-latest"]')).toBeNull();
+    });
+    it('shows the scroll button when new content arrives while scrolled up', async () => {
+        const { root, waitForChanges } = await renderList();
+        scrollTo(viewportOf(root), 0);
+        await appendMessage(root, waitForChanges);
+        const btn = root.shadowRoot.querySelector('[part="scroll-to-latest"]');
+        expect(btn).not.toBeNull();
+        expect(btn.ariaLabel).toBe('Scroll to latest message');
+    });
+    it('does not show the button when the user is near the bottom', async () => {
+        const { root, waitForChanges } = await renderList();
+        const viewport = viewportOf(root);
+        scrollTo(viewport, viewport.scrollHeight);
+        await appendMessage(root, waitForChanges);
+        expect(root.shadowRoot.querySelector('[part="scroll-to-latest"]')).toBeNull();
+    });
+    it('uses a custom scrollToLatestLabel', async () => {
+        const { root, waitForChanges } = await renderList({ 'scroll-to-latest-label': 'Jump down' });
+        scrollTo(viewportOf(root), 0);
+        await appendMessage(root, waitForChanges);
+        const btn = root.shadowRoot.querySelector('[part="scroll-to-latest"]');
+        expect(btn.ariaLabel).toBe('Jump down');
+    });
+    it('scrollToLatest() scrolls, hides the button and emits bsScrollToLatest', async () => {
+        const { root, waitForChanges, spyOnEvent } = await renderList();
+        const spy = spyOnEvent('bsScrollToLatest');
+        const viewport = viewportOf(root);
+        scrollTo(viewport, 0);
+        await appendMessage(root, waitForChanges);
+        await root.scrollToLatest();
+        await waitForChanges();
+        expect(viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight).toBeLessThanOrEqual(1);
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(root.shadowRoot.querySelector('[part="scroll-to-latest"]')).toBeNull();
+    });
+});

package/dist/collection/components/bs-message-list/bs-message-list.css

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+  position: relative;
+  min-height: 0;
+  --bs-message-list-gap: var(--bs-spacing-200);
+  --bs-message-list-padding: var(--bs-spacing-200);
+  --bs-message-list-button-offset: var(--bs-spacing-200);
+}
+
+.bs-message-list {
+  position: relative;
+  height: 100%;
+}
+
+.bs-message-list__viewport {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-message-list-gap);
+  height: 100%;
+  padding: var(--bs-message-list-padding);
+  overflow-y: auto;
+}
+
+/* Messages keep their natural height and the viewport scrolls, instead of flex-shrinking them. */
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+.bs-message-list__viewport:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: -2px;
+}
+
+.bs-message-list__scroll {
+  position: absolute;
+  inset-block-end: var(--bs-message-list-button-offset);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}

package/dist/collection/components/bs-message-list/bs-message-list.js

@@ -0,0 +1,161 @@
+import { h } from "@stencil/core";
+/** Distance (px) from the bottom within which the list counts as "at the bottom". */
+const NEAR_BOTTOM_THRESHOLD = 48;
+/**
+ * Scrollable chat transcript container (`role="log"`, `aria-live="polite"`) for `bs-message`
+ * children. It keeps itself pinned to the newest message while the user is near the bottom; when
+ * the user has scrolled up and new content arrives, it shows a "scroll to latest" button instead
+ * of yanking the viewport.
+ *
+ * Composed from: `bs-icon-button` (the scroll-to-latest control).
+ *
+ * ## When to use
+ * - Holding the messages of a chat conversation.
+ *
+ * ## When not to use
+ * - For generic scrollable lists -- this is built around append-at-the-bottom transcripts.
+ *
+ * @slot - `bs-message` elements.
+ * @part viewport - The scrollable region.
+ * @part scroll-to-latest - The scroll-to-latest `bs-icon-button`.
+ * @prop --bs-message-list-gap - Gap between messages. Aliased to `--bs-spacing-200`.
+ * @prop --bs-message-list-padding - Padding inside the scroll area. Aliased to `--bs-spacing-200`.
+ * @prop --bs-message-list-button-offset - Distance of the scroll-to-latest button from the bottom edge. Aliased to `--bs-spacing-200`.
+ */
+export class BsMessageList {
+    host;
+    /** Accessible name of the scroll-to-latest button. */
+    scrollToLatestLabel = 'Scroll to latest message';
+    /** True while the user is scrolled away from the bottom and new content has arrived. */
+    showScrollButton = false;
+    /** Fires when the scroll-to-latest button is activated or `scrollToLatest()` is called. */
+    bsScrollToLatest;
+    viewport;
+    observer;
+    stickToBottom = true;
+    /** Scrolls to the newest message and re-enables auto-follow. */
+    async scrollToLatest() {
+        this.scrollToBottom();
+        this.stickToBottom = true;
+        this.showScrollButton = false;
+        this.bsScrollToLatest.emit();
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(this.onMutation);
+        this.observer.observe(this.host, { childList: true, subtree: true, characterData: true });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    componentDidLoad() {
+        this.scrollToBottom();
+    }
+    isNearBottom() {
+        const v = this.viewport;
+        if (!v)
+            return true;
+        return v.scrollHeight - v.scrollTop - v.clientHeight <= NEAR_BOTTOM_THRESHOLD;
+    }
+    scrollToBottom() {
+        if (this.viewport)
+            this.viewport.scrollTop = this.viewport.scrollHeight;
+    }
+    onScroll = () => {
+        this.stickToBottom = this.isNearBottom();
+        if (this.stickToBottom)
+            this.showScrollButton = false;
+    };
+    onMutation = () => {
+        if (this.stickToBottom) {
+            this.scrollToBottom();
+        }
+        else {
+            this.showScrollButton = true;
+        }
+    };
+    render() {
+        return (h("div", { key: '3298d4991c4c335e7efcff0e363a8c097452c832', class: "bs-message-list" }, h("div", { key: '7ad06a6bce1ae78b1a0779172d479c9f46a08e9b', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '274329a2ffa9207023177bca19a44d029150511c' })), this.showScrollButton && (h("bs-icon-button", { key: '7aff39c002edca1724ab94add005431f7e453b57', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '85d406797de8e14957f078fa9ca3e9f5947c2586', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '4dd14212d3c5501ab6be3aae51e1cc80f143bf8a', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+    }
+    static get is() { return "bs-message-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-message-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-message-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scrollToLatestLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the scroll-to-latest button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-to-latest-label",
+                "defaultValue": "'Scroll to latest message'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showScrollButton": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsScrollToLatest",
+                "name": "bsScrollToLatest",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the scroll-to-latest button is activated or `scrollToLatest()` is called."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "scrollToLatest": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls to the newest message and re-enables auto-follow.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/bs-message-list/bs-message-list.stories.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-message-list',
+    parameters: { docs: { description: { component: componentDescription('bs-message-list') } } },
+    render: args => html `
+    <bs-message-list scroll-to-latest-label=${args.scrollToLatestLabel} style="height: 320px; border: 1px solid var(--bs-border-default);">
+      ${Array.from({ length: 12 }, (_, i) => html `<bs-message role=${i % 2 ? 'assistant' : 'user'} timestamp="10:${String(i).padStart(2, '0')}">Message number ${i + 1}</bs-message>`)}
+    </bs-message-list>
+  `,
+    argTypes: {
+        scrollToLatestLabel: { control: 'text', description: propDescription('bs-message-list', 'scrollToLatestLabel') },
+    },
+    args: { scrollToLatestLabel: 'Scroll to latest message' },
+};
+export default meta;
+export const Default = {};

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

@@ -99,4 +99,9 @@ describe('bs-pagination', () => {
         expect(root.shadowRoot.querySelector('[part="prev"]')).toEqualAttribute('aria-label', 'Go back');
         expect(root.shadowRoot.querySelector('[part="next"]')).toEqualAttribute('aria-label', 'Go forward');
     });
+    it('applies navLabel and pageLabel overrides', async () => {
+        const { root } = await render(h("bs-pagination", { totalPages: 5, navLabel: "Sidenummerering", pageLabel: "G\u00E5 til side" }));
+        expect(root.shadowRoot.querySelector('nav')).toEqualAttribute('aria-label', 'Sidenummerering');
+        expect(root.shadowRoot.querySelector('[aria-label="Gå til side 2"]')).not.toBeNull();
+    });
 });

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

@@ -36,6 +36,10 @@ export class BsPagination {
      * into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows
      * `1 2 3 ... 12`). */
     siblingCount = 1;
+    /** Accessible name of the pagination landmark. */
+    navLabel = 'Pagination';
+    /** Prefix of each page button's accessible name ("Go to page 3"). */
+    pageLabel = 'Go to page';
     /** Accessible name for the previous-page button. */
     previousLabel = 'Previous page';
     /** Accessible name for the next-page button. */
@@ -87,7 +91,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'd0fec9b9d17ddc5b338ed77c4e97a7006d7e665e', "aria-label": "Pagination" }, h("ul", { key: '82fff342952ea13a84f97e549039edd18a8b6626', part: "list", class: "bs-pagination__list" }, h("li", { key: '124c33b04fe0dcdef83f8ff9c4d539518c7557d7', part: "item", class: "bs-pagination__item" }, h("button", { key: '4d702cb7cdeb7df86c4844b313943cf8d8c607d5', 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: '6c747a6bcdf0a9a4a2dfb8260ff85ad95eb1acdf' }))), 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: '987698c1f798053e6f9e7ac63373c04e68868d0f', part: "item", class: "bs-pagination__item" }, h("button", { key: '95220bdb47507697a0742dbfad4fa0d37d7b4d55', 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: 'd6bdac44109e11fa11c2f7d32ed732c5364e6513' }))))));
+        return (h("nav", { key: 'e5a681ef3a6ad9256b7d86bca4848f07f45bd68c', "aria-label": this.navLabel }, h("ul", { key: '6e7c8b544db575ac9681d56f2a328e63965f6f8e', part: "list", class: "bs-pagination__list" }, h("li", { key: 'd9d899eaa3ab46136a8d8f0d7807ff47142241a7', part: "item", class: "bs-pagination__item" }, h("button", { key: '534929e47bac4665187919708832743de124769f', 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: 'badb293c1e204d4a6d95773ec841a9ea187d7461' }))), 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": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'b0b053124a350cf380b2e4482d658bdd3b990312', part: "item", class: "bs-pagination__item" }, h("button", { key: '9c1fa207fd0d1989e19da1e3e55c057b3ba17cb6', 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: '437791d5fe13908ce80632783bdce7afc660876c' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -163,6 +167,46 @@ export class BsPagination {
                 "attribute": "sibling-count",
                 "defaultValue": "1"
             },
+            "navLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the pagination landmark."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nav-label",
+                "defaultValue": "'Pagination'"
+            },
+            "pageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of each page button's accessible name (\"Go to page 3\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-label",
+                "defaultValue": "'Go to page'"
+            },
             "previousLabel": {
                 "type": "string",
                 "mutable": false,