@brandsync/wc 1.18.0 → 1.20.0

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 /**
  * An overlay dialog that interrupts the current flow for a focused task or confirmation.
  * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -32,8 +33,13 @@ import { h } from "@stencil/core";
  * @part close - The close button (inline in the header, or floating -- see the class doc above).
  * @part body - The body content wrapper.
  * @part footer - The footer wrapper (only visible when the footer slot has content).
+ *
+ * Opening fades the backdrop in and lifts the dialog into place; closing plays the same motion in
+ * reverse before the dialog is removed. Length, curve and travel are `--bs-dialog-duration`,
+ * `--bs-dialog-easing` and `--bs-dialog-distance`. Under `prefers-reduced-motion: reduce` it is instant.
  */
 export class BsDialog {
+    el;
     /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
      * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
     open = false;
@@ -67,6 +73,42 @@ export class BsDialog {
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
+    /** True while the exit motion plays after `open` went false, so the dialog stays mounted for it. */
+    closing = false;
+    backdropRef;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next) {
+        this.motionRun++;
+        cancelMotion(this.backdropRef, this.dialogRef);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasOpen && readMotion(this.el, 'bs-dialog').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    playEnter() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-dialog');
+        if (ms === 0)
+            return;
+        play(this.backdropRef, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        play(this.dialogRef, [{ opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }, { opacity: 1, transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-dialog');
+        const run = ++this.motionRun;
+        Promise.all([
+            play(this.backdropRef, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            play(this.dialogRef, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     dialogRef;
     previouslyFocused;
     previousBodyOverflow;
@@ -99,6 +141,14 @@ export class BsDialog {
         }
     }
     componentDidRender() {
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && !this.wasOpen) {
             this.previouslyFocused = document.activeElement;
             // Deferred to the next frame -- calling .focus() synchronously here, in the same task as
@@ -130,13 +180,13 @@ export class BsDialog {
         }
     }
     render() {
-        if (!this.open) {
+        if (!this.open && !this.closing) {
             return null;
         }
         // The close button floats (absolute, over the top of the dialog) whenever there's a hero image
         // to sit over, or the centered layout has no header row to put an inline close button in.
         const floatingClose = this.centered || this.hasImage;
-        return (h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+        return (h("div", { ref: el => (this.backdropRef = el), part: "backdrop", class: `bs-dialog__backdrop ${this.open ? '' : 'bs-dialog__backdrop--closing'}`, onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
     }
     static get is() { return "bs-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -263,7 +313,8 @@ export class BsDialog {
         return {
             "hasFooter": {},
             "hasImage": {},
-            "hasIcon": {}
+            "hasIcon": {},
+            "closing": {}
         };
     }
     static get events() {
@@ -284,6 +335,13 @@ export class BsDialog {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -28,7 +28,7 @@ export class BsDivider {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: '858582c09f3f2712a3ee9d51a80a1f53b2a29dfb', ...a11y }, h("div", { key: '184d290fbfdabab256850af57792e7d6c5ebf563', class: "line", part: "line" })));
+        return (h(Host, { key: 'bf2c91df3dccb2fc5d546c0d119aebc8c7f9a7b1', ...a11y }, h("div", { key: '9bc6e29a09dcf9240a457a324d24e4dcb659870f', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,135 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+const setup = (props = {}) => render(h("div", null, h("bs-dropdown", { ...props }, h("bs-button", { slot: "trigger" }, "Actions"), h("bs-menu", null, h("bs-menu-item", null, "Edit"), h("bs-menu-item", { disabled: true }, "Archive"), h("bs-menu-item", null, "Delete"))), h("button", { id: "outside" }, "outside")));
+const parts = (root) => {
+    const dd = root.querySelector('bs-dropdown');
+    const trigger = dd.querySelector('[slot="trigger"]');
+    const items = Array.from(dd.querySelectorAll('bs-menu-item'));
+    const btn = (i) => items[i].shadowRoot.querySelector('button');
+    return { dd, trigger, items, btn };
+};
+const inner = (t) => t.shadowRoot.querySelector('button');
+const settle = async (waitForChanges) => {
+    await waitForChanges();
+    await wait(60);
+    await waitForChanges();
+};
+describe('bs-dropdown', () => {
+    it('is closed by default and marks the trigger as a menu button', async () => {
+        const { root, waitForChanges } = await setup();
+        await waitForChanges();
+        const { dd, trigger } = parts(root);
+        expect(dd.open).toBe(false);
+        expect(inner(trigger)).toEqualAttribute('aria-haspopup', 'menu');
+        expect(inner(trigger)).toEqualAttribute('aria-expanded', 'false');
+    });
+    it('opens on trigger click, syncs aria-expanded, emits bsOpen and focuses the first enabled item', async () => {
+        const { root, waitForChanges, spyOnEvent } = await setup();
+        const { dd, trigger, btn } = parts(root);
+        const spy = spyOnEvent('bsOpen');
+        trigger.click();
+        await settle(waitForChanges);
+        expect(dd.open).toBe(true);
+        expect(dd).toHaveAttribute('open');
+        expect(inner(trigger)).toEqualAttribute('aria-expanded', 'true');
+        expect(spy).toHaveReceivedEvent();
+        expect(btn(0).matches(':focus')).toBe(true);
+    });
+    it('opens on ArrowDown from the trigger', async () => {
+        const { root, waitForChanges } = await setup();
+        const { dd, trigger } = parts(root);
+        trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }));
+        await settle(waitForChanges);
+        expect(dd.open).toBe(true);
+    });
+    it('navigates with arrow keys (skipping disabled) and Home/End', async () => {
+        const { root, waitForChanges } = await setup({ open: true });
+        const { btn } = parts(root);
+        await settle(waitForChanges);
+        const key = (i, k) => btn(i).dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true }));
+        key(0, 'ArrowDown');
+        expect(btn(2).matches(':focus')).toBe(true);
+        key(2, 'Home');
+        expect(btn(0).matches(':focus')).toBe(true);
+        key(0, 'End');
+        expect(btn(2).matches(':focus')).toBe(true);
+    });
+    it('closes on Escape and returns focus to the trigger, emitting bsClose', async () => {
+        const { root, waitForChanges, spyOnEvent } = await setup({ open: true });
+        const { dd, trigger, btn } = parts(root);
+        await settle(waitForChanges);
+        const spy = spyOnEvent('bsClose');
+        expect(btn(0).matches(':focus')).toBe(true);
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await settle(waitForChanges);
+        expect(dd.open).toBe(false);
+        expect(spy).toHaveReceivedEvent();
+        expect(trigger.matches(':focus-within')).toBe(true);
+        expect(inner(trigger)).toEqualAttribute('aria-expanded', 'false');
+    });
+    it('closes on outside click', async () => {
+        const { root, waitForChanges } = await setup({ open: true });
+        const { dd } = parts(root);
+        await settle(waitForChanges);
+        root.querySelector('#outside').click();
+        await settle(waitForChanges);
+        expect(dd.open).toBe(false);
+    });
+    it('closes on Tab and moves focus to the trigger', async () => {
+        const { root, waitForChanges } = await setup({ open: true });
+        const { dd, trigger, btn } = parts(root);
+        await settle(waitForChanges);
+        btn(0).dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, composed: true }));
+        await settle(waitForChanges);
+        expect(dd.open).toBe(false);
+        expect(trigger.matches(':focus-within')).toBe(true);
+    });
+    it('closes after an item is activated and still emits bsSelect', async () => {
+        const { root, waitForChanges, spyOnEvent } = await setup({ open: true });
+        const { dd, btn } = parts(root);
+        await settle(waitForChanges);
+        const spy = spyOnEvent('bsSelect');
+        btn(2).click();
+        await settle(waitForChanges);
+        expect(spy).toHaveReceivedEvent();
+        expect(dd.open).toBe(false);
+    });
+    it('does not close when a disabled item is clicked', async () => {
+        const { root, waitForChanges } = await setup({ open: true });
+        const { dd, btn } = parts(root);
+        await settle(waitForChanges);
+        btn(1).click();
+        await settle(waitForChanges);
+        expect(dd.open).toBe(true);
+    });
+    it('flips to the top placement near the bottom of the viewport', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { height: '100vh', display: 'flex', alignItems: 'flex-end' } }, h("bs-dropdown", null, h("bs-button", { slot: "trigger" }, "Actions"), h("bs-menu", null, h("bs-menu-item", null, "One"), h("bs-menu-item", null, "Two")))));
+        const dd = root.querySelector('bs-dropdown');
+        dd.querySelector('[slot="trigger"]').click();
+        await settle(waitForChanges);
+        const popover = dd.shadowRoot.querySelector('bs-popover');
+        expect(popover.getAttribute('data-placement')).toMatch(/^top-/);
+    });
+    it('works inside another shadow root', async () => {
+        const { root, waitForChanges } = await render(h("div", null));
+        const sr = root.attachShadow({ mode: 'open' });
+        sr.innerHTML = `<bs-dropdown><bs-button slot="trigger">Go</bs-button><bs-menu><bs-menu-item>A</bs-menu-item></bs-menu></bs-dropdown>`;
+        const dd = sr.querySelector('bs-dropdown');
+        await settle(waitForChanges);
+        dd.querySelector('[slot="trigger"]').click();
+        await settle(waitForChanges);
+        expect(dd.open).toBe(true);
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await settle(waitForChanges);
+        expect(dd.open).toBe(false);
+    });
+    it('passes axe when open', async () => {
+        const { root, waitForChanges } = await setup({ open: true });
+        await settle(waitForChanges);
+        // bs-popover puts aria-haspopup/aria-expanded on its role-less trigger wrapper div (pre-existing, flagged
+        // by aria-allowed-attr); every other rule must pass.
+        const results = await axe.run(root, { rules: { 'aria-allowed-attr': { enabled: false } } });
+        expect(results.violations.map(v => v.id)).toEqual([]);
+    });
+});

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

@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}

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

@@ -0,0 +1,218 @@
+import { h } from "@stencil/core";
+/**
+ * A menu trigger: a button (slot `trigger`) that opens a `bs-menu` of `bs-menu-item`s in an anchored,
+ * viewport-aware popup, with the menu keyboard pattern and focus management built in.
+ *
+ * Opens on click, Enter, Space (via the trigger button) and ArrowDown. On open focus moves to the
+ * first enabled menu item; Up/Down/Home/End move between items (handled by `bs-menu`). The dropdown
+ * closes on outside click, Escape (focus returns to the trigger), Tab, and after an item is activated.
+ * The trigger gets `aria-haspopup="menu"` and `aria-expanded` kept in sync.
+ *
+ * Composed from `bs-popover` (anchor positioning, flipping, outside-click and Escape dismissal, open
+ * motion), `bs-menu` and `bs-menu-item` (slotted by you), and a `bs-button` / `bs-icon-button` trigger.
+ *
+ * ## When to use
+ * - A header or toolbar action that reveals a short list of commands ("More", "Account", "Sort by").
+ *
+ * ## When not to use
+ * - Free-form popup content such as forms or arbitrary panels (use `bs-popover`).
+ * - Choosing a value for a form field (use `bs-select`).
+ *
+ * @slot trigger - The control that toggles the menu (a `bs-button` or `bs-icon-button`).
+ * @slot - Default slot: a `bs-menu` containing `bs-menu-item`s.
+ * @part popover - The underlying `bs-popover`; tune the popup with `::part(popover) { --bs-popover-min-width: ...; }`.
+ */
+export class BsDropdown {
+    el;
+    /** Whether the menu is shown. */
+    open = false;
+    /** Where the menu sits relative to the trigger; flips to stay in the viewport. */
+    placement = 'bottom-start';
+    /** Emitted after the menu opens. */
+    bsOpen;
+    /** Emitted after the menu closes (outside click, Escape, Tab, item activation or `open = false`). */
+    bsClose;
+    triggerSlot;
+    focusRun = 0;
+    onOpenChange(next) {
+        this.syncTrigger();
+        if (next) {
+            this.bsOpen.emit();
+            const run = ++this.focusRun;
+            const popover = this.el.shadowRoot?.querySelector('bs-popover');
+            Promise.resolve(popover?.componentOnReady?.()).then(() => requestAnimationFrame(() => run === this.focusRun && this.focusFirstItem()));
+        }
+        else {
+            this.focusRun++;
+            this.bsClose.emit();
+            // Focus was inside the menu (Escape, item activation, Tab): hand it back to the trigger.
+            if (this.el.matches(':focus-within'))
+                this.focusTrigger();
+        }
+    }
+    componentDidLoad() {
+        this.syncTrigger();
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    /** Close after an item is activated; the item still emits its own `bsSelect` for the consumer. */
+    onItemSelect() {
+        this.open = false;
+    }
+    /** Tab leaves the menu: close it and continue tabbing from the trigger. */
+    onKeyDown(ev) {
+        if (ev.key !== 'Tab' || !this.open)
+            return;
+        this.focusTrigger();
+        this.open = false;
+    }
+    trigger() {
+        return this.triggerSlot?.assignedElements({ flatten: true })[0];
+    }
+    syncTrigger = () => {
+        const t = this.trigger();
+        if (!t)
+            return;
+        if (t.tagName.startsWith('BS-')) {
+            // bs-button / bs-icon-button forward these to their inner <button>; an attribute on the host would sit on a role-less element.
+            const b = t;
+            b.ariaHasPopup = 'menu';
+            b.ariaExpanded = String(this.open);
+        }
+        else {
+            t.setAttribute('aria-haspopup', 'menu');
+            t.setAttribute('aria-expanded', String(this.open));
+        }
+    };
+    focusTrigger() {
+        this.trigger()?.focus();
+    }
+    focusFirstItem() {
+        const items = Array.from(this.el.querySelectorAll('bs-menu-item'));
+        items.find(i => !i.disabled)?.shadowRoot?.querySelector('button')?.focus();
+    }
+    onPopoverOpenChange = (ev) => {
+        ev.stopPropagation();
+        this.open = ev.detail;
+    };
+    render() {
+        return (h("bs-popover", { key: '7b5cb4aea4925c40686923285cff718c7f7de32a', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: '3956aee129e6e424508b5b9385d282c2782d44a8', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: '05d1a35099d008d7ba33334a487f56b3cad3f293' })));
+    }
+    static get is() { return "bs-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDropdownPlacement",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "BsDropdownPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-dropdown/bs-dropdown.tsx",
+                            "id": "src/components/bs-dropdown/bs-dropdown.tsx::BsDropdownPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the menu sits relative to the trigger; flips to stay in the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsOpen",
+                "name": "bsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the menu opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the menu closes (outside click, Escape, Tab, item activation or `open = false`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsSelect",
+                "method": "onItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-dropdown',
+    parameters: { docs: { description: { component: componentDescription('bs-dropdown') } } },
+    render: args => html `
+    <div style="padding: 24px 160px 160px;">
+      <bs-dropdown ?open=${args.open} placement=${args.placement}>
+        <bs-button slot="trigger" variant="neutral">Actions</bs-button>
+        <bs-menu>
+          <bs-menu-item>Edit</bs-menu-item>
+          <bs-menu-item>Duplicate</bs-menu-item>
+          <bs-menu-item disabled>Archive</bs-menu-item>
+          <bs-menu-item>Delete</bs-menu-item>
+        </bs-menu>
+      </bs-dropdown>
+    </div>
+  `,
+    argTypes: {
+        open: { control: 'boolean' },
+        placement: { control: 'select', options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'] },
+    },
+    args: { open: false, placement: 'bottom-start' },
+};
+export default meta;
+export const Default = {};
+export const Open = { args: { open: true } };
+export const BottomEnd = { name: 'Placement bottom-end', args: { open: true, placement: 'bottom-end' } };
+export const FlipsNearViewportEdge = {
+    name: 'Flips near the viewport edge',
+    render: () => html `
+    <div style="min-height: 320px; display: flex; align-items: flex-end;">
+      <bs-dropdown open>
+        <bs-button slot="trigger" variant="neutral">Opens upward</bs-button>
+        <bs-menu>
+          <bs-menu-item>Edit</bs-menu-item>
+          <bs-menu-item>Delete</bs-menu-item>
+        </bs-menu>
+      </bs-dropdown>
+    </div>
+  `,
+};

package/dist/collection/components/bs-empty-state/bs-empty-state.cmp.test.js

@@ -99,4 +99,19 @@ describe('bs-empty-state', () => {
         expect(d.textContent.trim()).toBe('Try a wider date range.');
         expect(d.getBoundingClientRect().height).toBeGreaterThan(0);
     });
+    it('defaults to size panel and size page enlarges padding and heading', async () => {
+        const { root, waitForChanges } = await render(h("bs-empty-state", { heading: "H" }));
+        expect(root).toEqualAttribute('size', 'panel');
+        const padPanel = parseFloat(getComputedStyle(q(root, '[part="container"]')).paddingTop);
+        const fsPanel = parseFloat(getComputedStyle(q(root, '[part="heading"]')).fontSize);
+        root.setAttribute('size', 'page');
+        await waitForChanges();
+        expect(parseFloat(getComputedStyle(q(root, '[part="container"]')).paddingTop)).toBeGreaterThan(padPanel);
+        expect(parseFloat(getComputedStyle(q(root, '[part="heading"]')).fontSize)).toBeGreaterThan(fsPanel);
+    });
+    it('an illustration replaces the icon tile', async () => {
+        const { root } = await render(h("bs-empty-state", { heading: "H", size: "page" }, h("img", { slot: "illustration", alt: "", src: "data:image/gif;base64,R0lGODlhAQABAAAAACw=" })));
+        expect(q(root, '[part="illustration"]')).not.toBeNull();
+        expect(q(root, '[part="icon"]')).toBeNull();
+    });
 });

package/dist/collection/components/bs-empty-state/bs-empty-state.css

@@ -5,6 +5,7 @@
   /* Figma: 24px; --bs-spacing-300 is 24px. */
   --bs-empty-state-padding-x: var(--bs-spacing-300);
   --bs-empty-state-gap: var(--bs-spacing-150);
+  --bs-empty-state-heading-size: var(--bs-font-size-xl);
   --bs-empty-state-heading-color: var(--bs-text-default);
   --bs-empty-state-description-color: var(--bs-text-secondary);
 }
@@ -24,7 +25,7 @@
   align-self: stretch;
   color: var(--bs-empty-state-heading-color);
   font-family: inherit;
-  font-size: var(--bs-font-size-xl);
+  font-size: var(--bs-empty-state-heading-size);
   font-weight: var(--bs-font-weight-bold);
   line-height: 24px;
 }
@@ -43,3 +44,31 @@
   display: flex;
   justify-content: center;
 }
+
+/* size="page": a whole-view empty state. */
+:host([size='page']) {
+  --bs-empty-state-padding-y: var(--bs-spacing-1200);
+  --bs-empty-state-heading-size: var(--bs-font-size-3xl);
+}
+:host([size='page']) .bs-empty-state {
+  min-height: 60vh;
+  justify-content: center;
+}
+:host([size='page']) .bs-empty-state__heading {
+  line-height: 1.25;
+}
+:host([size='page']) .bs-empty-state__description {
+  align-self: center;
+  max-width: 56ch;
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+.bs-empty-state__illustration {
+  display: flex;
+  justify-content: center;
+}
+.bs-empty-state__illustration ::slotted(*) {
+  max-width: 100%;
+  height: auto;
+}