@brandsync/wc 1.19.0 → 1.20.0

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;
+}

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

@@ -15,10 +15,12 @@ import { h } from "@stencil/core";
  * - A full-page error with a status code -- use `bs-error-page`.
  * - A transient message -- use `bs-toast` or `bs-snackbar`.
  *
+ * @slot illustration - A larger illustration or image that replaces the icon tile (use with `size="page"`).
  * @slot icon - The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
  * @slot - The description (overrides the `description` prop).
  * @slot action - An optional action, e.g. `<bs-button variant="outlined">`.
  * @part container - The centered column.
+ * @part illustration - The illustration wrapper (only rendered while the `illustration` slot is filled).
  * @part icon - The icon tile (`bs-icon-tile`).
  * @part heading - The heading element.
  * @part description - The description paragraph.
@@ -26,6 +28,7 @@ import { h } from "@stencil/core";
  * @prop --bs-empty-state-padding-y - Vertical padding. Aliased to `--bs-spacing-700` (56px).
  * @prop --bs-empty-state-padding-x - Horizontal padding. Aliased to `--bs-spacing-300` (24px).
  * @prop --bs-empty-state-gap - Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+ * @prop --bs-empty-state-heading-size - Aliased to `--bs-font-size-xl` (`--bs-font-size-3xl` at `size="page"`).
  * @prop --bs-empty-state-heading-color - Aliased to `--bs-text-default`.
  * @prop --bs-empty-state-description-color - Aliased to `--bs-text-secondary`.
  */
@@ -39,7 +42,10 @@ export class BsEmptyState {
     intent = 'default';
     /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
     headingLevel = 3;
+    /** `panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height. */
+    size = 'panel';
     hasIcon = false;
+    hasIllustration = false;
     hasDescriptionSlot = false;
     hasAction = false;
     observer;
@@ -55,13 +61,14 @@ export class BsEmptyState {
         const nodes = Array.from(this.el.childNodes);
         const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
         this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasIllustration = nodes.some(n => slotOf(n) === 'illustration');
         this.hasAction = nodes.some(n => slotOf(n) === 'action');
         this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
     }
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: '7c9a598641c29fd747d042759d1b84401a2102d5', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'a11aa98623be1b76678092fc1a81dec33fb77e63', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'f91436013c89319f2a06ae38f12c655d023bf485', name: "icon" })), this.heading && (h(Heading, { key: 'c93b6af8f937dafa8e1047384ed1246b7db6df4c', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '05a336857bb29e1df9405cf8cb5d0ae0f6d28f74', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '02dbc3448e2cbe706c3db1c9bfbf70e8c129c36f', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '42f3ec130d476919046540406af68d686d425c19', name: "action" })))));
+        return (h("div", { key: '3639ba86bf80fa1bceb453455c0e619739302895', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: '18d951ff64f7ced418f4943c7827539bf07c994a', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '010e3f521741a0f2ba2ed314f87165c1b3d3b384', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '53d8df33337004dd2a0ae9153c8603c37c2750e9', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '167f4b5ac23b721a489cdf0051b8a2bf151b9bc0', name: "action" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -161,12 +168,33 @@ export class BsEmptyState {
                 "reflect": false,
                 "attribute": "heading-level",
                 "defaultValue": "3"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'panel' | 'page'",
+                    "resolved": "\"page\" | \"panel\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'panel'"
             }
         };
     }
     static get states() {
         return {
             "hasIcon": {},
+            "hasIllustration": {},
             "hasDescriptionSlot": {},
             "hasAction": {}
         };

package/dist/collection/components/bs-empty-state/bs-empty-state.stories.js

@@ -10,16 +10,18 @@ const meta = {
         description: { control: 'text' },
         intent: { control: 'select', options: ['default', 'success', 'warning', 'error', 'brand', 'information'] },
         headingLevel: { control: 'select', options: [2, 3, 4, 5, 6] },
+        size: { control: 'select', options: ['panel', 'page'] },
     },
     args: {
         heading: 'No events match these filters',
         description: 'Try a wider date range or clear filters.',
         intent: 'default',
         headingLevel: 3,
+        size: 'panel',
     },
     render: args => html `
     <div style="width: 480px">
-      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent} .headingLevel=${args.headingLevel}>
+      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent} size=${args.size} .headingLevel=${args.headingLevel}>
         ${SEARCH_ICON}
         <bs-button slot="action" variant="outlined">Clear filters</bs-button>
       </bs-empty-state>
@@ -50,3 +52,24 @@ export const WithoutAction = {
     </div>
   `,
 };
+export const PageSize = {
+    name: 'Page size',
+    args: { size: 'page', headingLevel: 2, heading: 'Nothing here yet', description: 'Create your first project to get started.' },
+    render: args => html `
+    <bs-empty-state heading=${args.heading} description=${args.description} size="page" .headingLevel=${args.headingLevel}>
+      ${SEARCH_ICON}
+      <bs-button slot="action">Create project</bs-button>
+    </bs-empty-state>
+  `,
+};
+export const WithIllustration = {
+    name: 'With illustration',
+    render: args => html `
+    <div style="width: 480px">
+      <bs-empty-state heading=${args.heading} description=${args.description} size="page">
+        <svg slot="illustration" width="160" height="120" viewBox="0 0 160 120" fill="none" aria-hidden="true"><rect x="10" y="20" width="140" height="80" rx="8" stroke="currentColor" stroke-width="2" /><path d="M10 45h140" stroke="currentColor" stroke-width="2" /></svg>
+        <bs-button slot="action" variant="outlined">Clear filters</bs-button>
+      </bs-empty-state>
+    </div>
+  `,
+};

package/dist/collection/components/bs-error-page/bs-error-page.js

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: 'b236e353ba68c47c300ca7bc8c87744b056261d3', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'dd65a6504d533bbaa7be0134a3853f041836c536', class: "bs-error-page__body" }, h("div", { key: '450194e7695bbea5076ca9ce060f5f5aa0eb6aac', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '5a49ef75e17d2a565d34678792a83b62e64b2f4e', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '06b3356dbc54741538ddeb633a99184c1d4f3e8d', name: "icon" }, d.glyph())), code && (h("span", { key: 'c11c2bdd41d504a5305164df96601b5ef2794027', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'a20c05d36c8b9e9d64119df40ffb8eb8da44dd06', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: '366cbecd6b82bb83a2b137b35bbf0520a2364e44', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a71c32a3588e38592d3b20dd723ed4b4e17b7d94', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4fef13ed699b7df97916eb09686dc7e0b5ac90aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '87d6403fcebf8345fae40329d509f41c6d2d7bfe', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '587457fde4a8a9e0485a88905d9ca9aed7822b13', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '902640ac8d0645646fcd75d9bae72f0adb96d2ee', class: "bs-error-page__body" }, h("div", { key: '161a5ec1c4af4fad776f8fb70b4ba36e57e652f8', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '129fc2c5d79f48d74aa619052df56e4af880e956', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'af0d768b53efd2cc8ab4c4bc3390c9edf896c573', name: "icon" }, d.glyph())), code && (h("span", { key: '819358ee0eacb2d378b049970eca9e845c891317', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '701eb1787e0beedb193ea73de528bde3a53104bb', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'fe1e33d40cfc18493851ec9f244c81472e4a3a27', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '567627956a37daa24bc9ac571505370dcc2c05a6', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4190ca2af4469e31d15c3487d29da438b16f64cd', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '1dde6d7782f1d74ded03accbc04f6799790653c4', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
     static get is() { return "bs-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: 'dca680bf51b270a837fe7e8b59ec0e68aab5ccb2', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '6553299e75c11c86f5d87a797066977712b40cec', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'f7807bf5237e14f230084ec31777c417efdf1715', name: "icon" }, h(UploadIcon, { key: '8070074c0c7ae30980632842609160604147fa15' }))), h("div", { key: '2d8635c020ee47ff7f69662f5cb3ceae51d7c700', class: "bs-file-upload__content" }, h("div", { key: 'a7274934366c0c99ec9691f3f34c7664a5e0dacf', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'd8bc7716995b017e7c7d9452d0cd57cbbb20cbaa', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '2b42c3ef723f3d196ffb015fafec77a80c90a053', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'c1a2f9de60ef0b22f04a104fb582abfce703d7d2', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '8330b08007a1c6f9e1a4e161ab31da694ff10a23', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: 'b444692d61263c742166a4a436e8fe0999ba2410', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'b0d5e476e0489b7fe598f9933076cfa43d4e6757', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'c0a42996503983e8bd899fd0f582d69df5ef6fbe', name: "icon" }, h(UploadIcon, { key: '0c00aec36659e9ddaebcb2fc544be85011cad571' }))), h("div", { key: 'f9b691faa0c924cf8d0f055c4f3bc5aaa1db70f1', class: "bs-file-upload__content" }, h("div", { key: 'dd15e2cdd12785a070cc4d0d4e53eb0e0e2cde1e', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'd02aafd376d43de1853f4aef16a53b6cabf96f59', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '2d1b2195352c65a01a18e914f89e8bb84d7d8e68', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '34608882d553c6a8d8f7f3cf16157e0164b6c087', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '48f5bf76a00bd12fe2f2f3f25e639d0fa7eeeb78', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: 'aff0de0cc425f2bea76407bd4e805ba7662816f1', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'e27d9ccd7f23a1a97eae0af9fa93fd5a45305bce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '16e52a05a81a1c89e1f74d9e48311a0663d60dec', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '7b0dd4283f8412c51e3d74e6b3659c769e205c38', class: "bs-file-upload-item__content" }, h("div", { key: '70f55bffad0b17cd2808d26c7117d00b1f1385ec', class: "bs-file-upload-item__meta" }, h("span", { key: '759c23ce263cfab9230cb0b8a5d5322f0af46ca5', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '9667c0fbb54d59d6e1803fabaea475f321bfd985', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '6dc6d78f8bceee678d18aae7747193e32d4bc637', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '7c45a43dd6901078911b6709d75b5394cae77626', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '9911abe4b2876c1afd6aa2c788a92b9737a17b74', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '704e42a69efba6dba851247be97778a43aac238a', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'd834ed0a69876994d4693e261eda30e636f57d5f', class: "bs-file-upload-item__content" }, h("div", { key: 'b22f1d39328698c9b9a847288f1585962ffbd646', class: "bs-file-upload-item__meta" }, h("span", { key: 'e82780922ed2e79adff9eb73a8b8ed55100ae58b', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'cb8a4ba77ce49b4147b22293937ef6533aa62776', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'b07f558ddbaa346ad64abc08f372eb464062425a', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }