@brandsync/wc 1.19.0 → 1.20.1

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

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+/**
+ * A key/value list of `bs-description-item` pairs (term and detail), for record summaries, settings read-outs
+ * and metadata panels. Terms and details use real `dt`/`dd` semantics.
+ *
+ * ## When to use
+ * - A read-only summary of one record: "Owner", "Created", "Status" with their values.
+ *
+ * ## When not to use
+ * - A list of records with media and actions -- use `bs-list`.
+ * - Editable fields -- use form components.
+ * - Several records compared across columns -- use `bs-data-table`.
+ *
+ * Built from `bs-description-item` children (light DOM; the list never moves nodes). Each item holds its own
+ * `dl`; the list sets the layout on them and draws dividers.
+ *
+ * @slot - The `bs-description-item` children.
+ * @part list - The list container (`role="group"`).
+ * @prop --bs-description-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-description-list-gap - Gap between items. `0`.
+ */
+export class BsDescriptionList {
+    el;
+    /** `stacked` puts each term above its detail; `horizontal` puts them side by side in two columns. */
+    layout = 'stacked';
+    /** Draws a 1px separator between items. */
+    dividers = false;
+    /** Accessible name of the group. */
+    ariaLabel = null;
+    onLayout() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    sync() {
+        Array.from(this.el.children)
+            .filter(c => c.tagName === 'BS-DESCRIPTION-ITEM')
+            .forEach(i => (i.layout = this.layout));
+    }
+    render() {
+        return (h("div", { key: '626f9b04c01bffb558e69260c934484464fbe261', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'c895fdcbbbe761f6323b706dcadafe07556a3583', onSlotchange: () => this.sync() })));
+    }
+    static get is() { return "bs-description-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-description-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-description-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'stacked' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`stacked` puts each term above its detail; `horizontal` puts them side by side in two columns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'stacked'"
+            },
+            "dividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draws a 1px separator between items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dividers",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "onLayout"
+            }];
+    }
+}

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

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-description-list',
+    parameters: { docs: { description: { component: componentDescription('bs-description-list') } } },
+    argTypes: {
+        layout: { control: 'select', options: ['stacked', 'horizontal'] },
+        dividers: { control: 'boolean' },
+    },
+    args: { layout: 'horizontal', dividers: true },
+    render: args => html `
+    <bs-description-list style="width: 480px" aria-label="Project details" layout=${args.layout} ?dividers=${args.dividers}>
+      <bs-description-item term="Owner" description="Sam Lee"></bs-description-item>
+      <bs-description-item term="Created" description="12 March 2026"></bs-description-item>
+      <bs-description-item term="Status"><bs-tag color="success">Active</bs-tag></bs-description-item>
+      <bs-description-item term="Description" description="A short description of the project that may wrap onto several lines when the container is narrow."></bs-description-item>
+    </bs-description-list>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Stacked = { args: { layout: 'stacked', dividers: false } };
+export const WithRichContent = {
+    name: 'With rich content',
+    render: () => html `
+    <bs-description-list style="width: 480px" aria-label="Contact" layout="horizontal">
+      <bs-description-item term="Email"><a href="mailto:sam@example.com">sam@example.com</a></bs-description-item>
+      <bs-description-item>
+        <span slot="term">Topics</span>
+        <span style="display:flex;gap:4px"><bs-tag>Design</bs-tag><bs-tag color="info">Research</bs-tag></span>
+      </bs-description-item>
+    </bs-description-list>
+  `,
+};

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: 'e075bd62e465491383d5377676b87c297f32f623', ...a11y }, h("div", { key: '0eb6f8b8b36d4da2ead95d19193e111060ca0b10', 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,133 @@
+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);
+        const results = await axe.run(root);
+        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;
+}