@brandsync/wc 1.12.1 → 1.13.0

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,

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

@@ -0,0 +1,107 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const setup = () => render(h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", null, "Content")));
+describe('bs-popover', () => {
+    it('is closed by default with aria wiring on the trigger wrapper', async () => {
+        const { root } = await setup();
+        const trigger = root.shadowRoot.querySelector('[part="trigger"]');
+        const popup = root.shadowRoot.querySelector('[part="popup"]');
+        expect(trigger).toEqualAttribute('aria-expanded', 'false');
+        expect(trigger).toEqualAttribute('aria-haspopup', 'true');
+        expect(trigger.getAttribute('aria-controls')).toBe(popup.id);
+        expect(popup.hasAttribute('hidden')).toBe(true);
+    });
+    it('toggles on trigger click and emits bsOpenChange', async () => {
+        const { root, waitForChanges, spyOnEvent } = await setup();
+        const spy = spyOnEvent('bsOpenChange');
+        const trigger = root.shadowRoot.querySelector('[part="trigger"]');
+        trigger.click();
+        await waitForChanges();
+        expect(root.open).toBe(true);
+        expect(root).toHaveAttribute('open');
+        expect(trigger).toEqualAttribute('aria-expanded', 'true');
+        expect(spy).toHaveReceivedEventDetail(true);
+        trigger.click();
+        await waitForChanges();
+        expect(root.open).toBe(false);
+    });
+    it('closes on outside click', async () => {
+        const { root, waitForChanges } = await setup();
+        root.open = true;
+        await waitForChanges();
+        document.body.click();
+        await waitForChanges();
+        expect(root.open).toBe(false);
+    });
+    it('stays open when clicking inside the popup', async () => {
+        const { root, waitForChanges } = await setup();
+        root.open = true;
+        await waitForChanges();
+        root.querySelector('div').click();
+        await waitForChanges();
+        expect(root.open).toBe(true);
+    });
+    it('closes on Escape and returns focus to the trigger', async () => {
+        const { root, waitForChanges } = await setup();
+        root.open = true;
+        await waitForChanges();
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(root.open).toBe(false);
+        expect(document.activeElement).toBe(root.querySelector('button'));
+    });
+    it('defaults placement to bottom-start', async () => {
+        const { root } = await setup();
+        expect(root.placement).toBe('bottom-start');
+    });
+    it('moves focus to the first focusable element in the popup on open', async () => {
+        const { root, waitForChanges } = await render(h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", null, h("button", { id: "first" }, "One"))));
+        root.open = true;
+        await waitForChanges();
+        expect(document.activeElement).toBe(root.querySelector('#first'));
+        root.open = false;
+        await waitForChanges();
+        expect(document.activeElement).toBe(root.querySelector('button[slot="trigger"]'));
+    });
+    it('focuses the popup container when nothing inside is focusable', async () => {
+        const { root, waitForChanges } = await setup();
+        root.open = true;
+        await waitForChanges();
+        expect(root.shadowRoot.activeElement).toBe(root.shadowRoot.querySelector('[part="popup"]'));
+    });
+    it('opens and focuses on ArrowDown from the trigger', async () => {
+        const { root, waitForChanges } = await render(h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("button", { id: "item" }, "Item")));
+        const trigger = root.shadowRoot.querySelector('[part="trigger"]');
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true });
+        trigger.dispatchEvent(ev);
+        await waitForChanges();
+        expect(ev.defaultPrevented).toBe(true);
+        expect(root.open).toBe(true);
+        expect(document.activeElement).toBe(root.querySelector('#item'));
+    });
+    it('reflects data-placement and keeps the preferred side when there is room', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { paddingTop: '200px', paddingLeft: '200px' } }, h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", { style: { height: '50px', width: '100px' } }, "Content"))));
+        const pop = root.querySelector('bs-popover');
+        pop.open = true;
+        await waitForChanges();
+        expect(pop.getAttribute('data-placement')).toBe('bottom-start');
+    });
+    it('flips to top when the popup would overflow the bottom of the viewport', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { position: 'fixed', left: '20px', bottom: '10px' } }, h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", { style: { height: '150px', width: '100px' } }, "Content"))));
+        const pop = root.querySelector('bs-popover');
+        pop.open = true;
+        await waitForChanges();
+        expect(pop.getAttribute('data-placement')).toBe('top-start');
+        const rect = pop.shadowRoot.querySelector('[part="popup"]').getBoundingClientRect();
+        expect(rect.bottom).toBeLessThanOrEqual(window.innerHeight);
+    });
+    it('flips to end alignment when overflowing the right edge, and re-measures on resize', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { position: 'fixed', right: '10px', top: '20px' } }, h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", { style: { height: '40px', width: '300px' } }, "Content"))));
+        const pop = root.querySelector('bs-popover');
+        pop.open = true;
+        await waitForChanges();
+        expect(pop.getAttribute('data-placement')).toBe('bottom-end');
+        window.dispatchEvent(new Event('resize'));
+        await waitForChanges();
+        expect(pop.getAttribute('data-placement')).toBe('bottom-end');
+    });
+});

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

@@ -0,0 +1,61 @@
+:host {
+  display: inline-block;
+  position: relative;
+  --bs-popover-bg: var(--bs-surface-raised);
+  --bs-popover-radius: var(--bs-border-radius-100);
+  --bs-popover-shadow: var(--bs-shadow-md);
+  --bs-popover-offset: var(--bs-spacing-100);
+  --bs-popover-min-width: var(--bs-scale-1600);
+  --bs-popover-z-index: var(--bs-z-index-popover);
+}
+
+.bs-popover__trigger {
+  display: inline-block;
+}
+
+.bs-popover__popup {
+  position: absolute;
+  z-index: var(--bs-popover-z-index);
+  min-width: var(--bs-popover-min-width);
+  background: var(--bs-popover-bg);
+  border-radius: var(--bs-popover-radius);
+  box-shadow: var(--bs-popover-shadow);
+  top: calc(100% + var(--bs-popover-offset));
+  left: 0;
+}
+
+.bs-popover__popup {
+  outline: none;
+}
+
+.bs-popover__popup[hidden] {
+  display: none;
+}
+
+:host([data-placement='bottom-start']) .bs-popover__popup {
+  top: calc(100% + var(--bs-popover-offset));
+  bottom: auto;
+  left: 0;
+  right: auto;
+}
+
+:host([data-placement='bottom-end']) .bs-popover__popup {
+  top: calc(100% + var(--bs-popover-offset));
+  bottom: auto;
+  left: auto;
+  right: 0;
+}
+
+:host([data-placement='top-start']) .bs-popover__popup {
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: calc(100% + var(--bs-popover-offset));
+}
+
+:host([data-placement='top-end']) .bs-popover__popup {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: calc(100% + var(--bs-popover-offset));
+}