@brandsync/wc 1.18.0 → 1.19.0

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect, afterEach } from "@stencil/vitest";
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 describe('bs-dialog', () => {
     afterEach(() => {
         document.querySelectorAll('button[data-test-trigger]').forEach(el => el.remove());
@@ -98,6 +99,9 @@ describe('bs-dialog', () => {
         await waitForChanges();
         expect(closeSpy).toHaveReceivedEventTimes(1);
         expect(root).not.toHaveAttribute('open');
+        // Closing plays a short exit motion, then the dialog is removed.
+        await new Promise(resolve => setTimeout(resolve, 450));
+        await waitForChanges();
         expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
     });
     it('closes when the backdrop itself is clicked, but not when the dialog inside it is clicked', async () => {
@@ -159,4 +163,32 @@ describe('bs-dialog', () => {
         await waitForChanges();
         expect(document.activeElement).toBe(trigger);
     });
+    describe('open/close motion', () => {
+        it('stays mounted while the exit plays, then unmounts', async () => {
+            const { root, waitForChanges } = await render(h("bs-dialog", { open: true, style: { '--bs-dialog-duration': '150ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="dialog"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[part="backdrop"]')).toHaveClass('bs-dialog__backdrop--closing');
+            await wait(400);
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
+        });
+        it('unmounts immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-dialog", { open: true, style: { '--bs-dialog-duration': '0ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
+        });
+        it('re-opening mid-exit keeps the dialog', async () => {
+            const { root, waitForChanges } = await render(h("bs-dialog", { open: true, style: { '--bs-dialog-duration': '300ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            root.open = true;
+            await waitForChanges();
+            await wait(500);
+            expect(root.shadowRoot.querySelector('[part="dialog"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[part="backdrop"]')).not.toHaveClass('bs-dialog__backdrop--closing');
+        });
+    });
 });

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

@@ -1,3 +1,14 @@
+/**
+ * @prop --bs-dialog-duration: Length of the open/close motion. Aliased to --bs-duration-default.
+ * @prop --bs-dialog-easing: Curve of the open/close motion. Aliased to --bs-easing-standard.
+ * @prop --bs-dialog-distance: How far the dialog lifts while it fades in/out. Aliased to --bs-spacing-200.
+ */
+:host {
+  --bs-dialog-duration: var(--bs-duration-default);
+  --bs-dialog-easing: var(--bs-easing-standard);
+  --bs-dialog-distance: var(--bs-spacing-200);
+}
+
 .bs-dialog__backdrop {
   position: fixed;
   inset: 0;
@@ -8,6 +19,11 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.bs-dialog__backdrop--closing {
+  /* The dialog is on its way out: clicks must not land on it, or on the page behind through it. */
+  pointer-events: none;
+}
+
 .bs-dialog__dialog {
   position: relative;
   display: flex;

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: 'e075bd62e465491383d5377676b87c297f32f623', ...a11y }, h("div", { key: '0eb6f8b8b36d4da2ead95d19193e111060ca0b10', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class BsEmptyState {
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: 'dabc994fcb254cb35958f8bde54d7935bb6ff70a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'efec1cc06eb3447fbd81b12634c12ee96f9fd0d2', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'd8a7482e2b32f6361b82232652edcc1aadb74a5b', name: "icon" })), this.heading && (h(Heading, { key: '6625baa3d00097951042608aeb888f7c1665e987', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'c367d9d3aa154e8413c04ca47de7cd9f5eed6883', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '7b9b78de4e71e6d07d94d4595290492542d7bf62', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '7b57218ca03edfd6f972a2bb6ce458db8dc33d9a', name: "action" })))));
+        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" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }

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: '4214c79438721c66089be3a4ae64fcd6bdcbdea6', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '39b2a7292d488442fc2465635a5be9dd704dc42e', class: "bs-error-page__body" }, h("div", { key: 'beb353eefb6b77b03fe7d1ea3894b6a625eebe06', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '516a9c87ddb3ac5140d2880d4638eb5eca01db73', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '3c3029ce78413f49c4bb839260c432848329b428', name: "icon" }, d.glyph())), code && (h("span", { key: 'fc4058b507c0b60ca417f09f7838664716b17fc3', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'b914f77506217b401e26694205104d623596d270', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b6dc2e92b34960f754a54b31a659337135e63607', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e4f85bf6e86a80fbf1bd09fc77e16768c435a97b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a1469448cfbf1edb0bb8fe1d613101782dc87145', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'e8f32f0cc84051d02418bb48bc6116675ec55097', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        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)))));
     }
     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: '5312a866a1db63fd378f265fc200a509bfd50ce1', 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: '7276ccfa10a086d933b5563a208393a75e0dd821', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'e828eaa70303c82cb2bea5e647807079946b62e7', name: "icon" }, h(UploadIcon, { key: 'bd6ee5b8b20996ee68f972cb79db7c47f645c4d3' }))), h("div", { key: '784440974685713b31ba97642b931b99e64433a3', class: "bs-file-upload__content" }, h("div", { key: 'c7568214218e02ecb794f3429b843462f88bf216', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '4872f617be4f30b9ab98aeca2dca7012d9391905', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'd8f446f1f8690ec773b094aeeb66af49ec1de291', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'bb0634e3e0dcb4a4ef59fa7c5daeaacbff5bceda', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'f55602446ec222ca46b7dab95aaff26d6d5b1632', 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: '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 })));
     }
     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: '26933845798c1cee2739c2a5a3d402175244717b', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'b7312bfd0a7bcbeac8e098be4cb6d565283f2e0f', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '69350d5224f540e0f4d5033e3ac92ccff397b565', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'fbe429e0dd56af6fe5d955ce384a335c9ce3843a', class: "bs-file-upload-item__content" }, h("div", { key: 'b45f5b5500d760dcfb0d8fe3e87638db9325ae99', class: "bs-file-upload-item__meta" }, h("span", { key: '7e5a8cd3ccca37c88182d0e430841f36f29f56e7', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '114e9167c4542c9e071ebb21ee77d25d5c9221b4', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'f6a9a212a6436ac50eaab6b0224b58245171a7de', 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: '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))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-global-search/bs-global-search.js

@@ -342,10 +342,10 @@ export class BsGlobalSearch {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: '122fd2e1440ff04e7aeb9e12b8071287c9eae7ec', class: "bs-global-search" }, h("div", { key: 'dc2a228d802815873904ca8f0504f71f8ce73dd0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '350322cbdeccd18ac2456fb358ec83589aa835c8', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c250dc78b38158f9529dbd9c2bd1f2f3e9c107a4', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '17c81ab7633498a3de7853a33b2d31db8b304633', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '591953d910a7986705dde045c325c3043df1387b', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'fc76b4785031c6ed1b3e3ba5668dfaacdbc0faa4', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-global-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: 'cd02b8630bd31c42ffdf9a594a0808aa5f2cea92', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
+            } }, h("slot", { key: 'ff6f7beebdd212901e3b071f0c02270df6494219' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -46,8 +46,8 @@ export class BsIconTile {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: '72226f2004fa4334e1b270d790e182b0c5b9dd05', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '126fdd0362b424918cff1e84d95a40b529693a57', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '7d5ea3f933dd8fada375e98110ceddc55176c792', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '7902e66e2e74303c43dae40fae7993b71dff7ace', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '4a97955f0d4aa46206d85209fa1c8cde20c664aa', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }

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

@@ -397,10 +397,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '3c0ea65d5b8852b14e1295d6a6a33aef95d02d01', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'a462df7f8f0e0a78a90cadb6453cbccd120e9baf', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '13e99193d9906c7c7534df1c9bd6395f1a758524', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'ac14aa6322a8ce40624cdc392dde96b7bad298a8', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '7aebd73c573b3fb1b26ea0ca0959db890073d9f5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '40bb309ab983fbccd797e878aa78e612e65c6b56', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class BsKey {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("kbd", { key: '45bd298f9fcf91ac4a6fd1c10c879a9373c53fae', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '019bb8652eef6eafbe3d11ac0a179aa06a853e99', part: "label", class: "bs-key__label" }, h("slot", { key: '9b4e0c377ad3a6ab51125894aca36164e3f4546c' }, this.label))), h("span", { key: '2d8618a0a71f799d6b4c3c8ecd3364d2a744879d', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '9c7bf13a4ddf4ad57fcee6c81653783eb0bde3c4', name: "icon", onSlotchange: this.onIconSlotChange }))));
+        return (h("kbd", { key: 'e84e287f0dd4b06bc63839a8b8bfccfac064bdd2', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '625fff9396a1d12863cb7eacfd0adf021a70835d', part: "label", class: "bs-key__label" }, h("slot", { key: '62f75a400443b6719994800e0050469d16939197' }, this.label))), h("span", { key: '3a989710a0d213de963feb4c51eb950fa46add68', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '62ca858bdc844d645701096b6b72ef6291abceb9', name: "icon", onSlotchange: this.onIconSlotChange }))));
     }
     static get is() { return "bs-key"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key-caps/bs-key-caps.js

@@ -41,7 +41,7 @@ export class BsKeyCaps {
     render() {
         const keys = this.keyList();
         const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
-        return (h("span", { key: 'a5a71f50df215bafb5225553a3822048470b0df6', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '3efb98fca94e15103658c10444000b60665ddd31' })));
+        return (h("span", { key: '53c116e6e8a19e8d02f1c0062054ba2446f7e7fc', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '05d08db73dd84fdc420ea4346bf5b6b4431c5ffc' })));
     }
     static get is() { return "bs-key-caps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js

@@ -129,10 +129,10 @@ export class BsKeyboardShortcuts {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (h("bs-card", { key: '7e825a3d2c214a2228c8b302bc6530ca23427b2f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '8595c3352463214acefb820a23a9adbdd66e6b76', class: "bs-keyboard-shortcuts__body" }, h("div", { key: 'bbdb0c462e6958d6fbeca96bd5ffb5dc99bdaf19', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '95641e98b3795b85caa6e70ebd9bd2deeecdc2aa', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'b1160b8146645716ea1b675c480f42675a4d6f29', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '18f2516e9113b2c335587bd3d17c49099496f1ec', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '299d3fa12acc958389b7cd6b7ec9c2cefe12ed43', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '80365f19a624d950cfa678b1d2cb7a2eb7dbeb33', name: "heading" }, this.heading)), h("bs-icon-button", { key: '2e43986aac1914ab56527ac09e08889fbe6ca0ef', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'cd655a49a3142304b168c8a8f25c89b63c0fbc79', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '7a39bf4eb97bde3d6d81d3db53fea3589af6e8c9', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: 'b86dc235443e567aede36a767ddc015481ef08fa', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '4fe525465a7dbae779af2aa9596669d06a8c7f71', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '2821019a258b02c2d37679360001cd6ba390d304', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '58f8f4dca914d41ad2b9b8883a117d4b865b4faa', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '41cfb03e58e546ed639a38452524b775065f1027', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'a974154d5c9388fc5fa6b4b077f148fbe37340c4', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '636f5d35847c6bd0dcfc2d0f00b4d126bb764fbc', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (h("bs-card", { key: '79e5266a0337b073391c6c82c629086f3f5a6dce', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: 'ad81f8b924d8d2d5462efd14e3201746fb00d04b', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '54a8c9ea691523fe7f4c3f41157ffcaa814fff91', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: 'd11295fa495307b9d2117b5efda0be187eabbafb', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'ff8e19a76fc9c2d21605d9d7e5642465a0b0977b', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: 'e71f72087979fd4114439ca7db3722e5eba298d4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'b5fb4a70cedbf7104abdc873c147e1f0986cfcd5', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: 'c4d748a98ef98e02a26476c4c8b853d3e77bad11', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'aff51431172e892da6de1181bf3344eca2909e76', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'eb80c782f7af169f434b4ff142c961f85eef3306', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'c576a6aeca7ad33fb18922d6f6b327ac6e2aab5d', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '200bfa90b61cc7a8ecdde7f373fd6b0c7f438e7c', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '41584586700e0589f078e996ab54497401c87059', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '4987a67e712f50b2259c2a4cd2d945adc14a2786', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '410cc42bbb55207ec1f8c6f18c6a6ed07eab58b5', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '55cf6495958aa22f6470fd852ca4fae07195b5bc', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7538cbce99447c3ac03c1dedceff7a4a84941f2', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '993d7c182bce54e4a0faad2873ab9a8a3257bfd7', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (h("div", { key: '05833326cdbea5dbb994fd584bc54866c14cf615', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'eeb752068052c3f27cbfa0893f03a22f04328489', name: "footer" }, h("span", { key: '55c95afd62dae51c2b82362210e558fad904f7b7' }, this.footerPrefix), h("bs-key", { key: 'b9f8ef5cd3b3e5e2fce7a99bd2b29d751a764901', label: this.footerKey }), h("span", { key: '13b4719f50cd4d3fadc2802cb22d31f04e775798' }, this.footerText)))))));
+        })))))), this.showFooterHint && (h("div", { key: '4b980ff2fa253a36021615fe9a9203707a728b64', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'b72e0707aef77ffd10c192a622a2c0bc6f387b29', name: "footer" }, h("span", { key: '1324c58fd399271b2f0d983306b39f734e6e2d7f' }, this.footerPrefix), h("bs-key", { key: '47d4279c83abd23982bb4030582a7c21262e99ce', label: this.footerKey }), h("span", { key: '8ab0550e4d65d4c85e8ff3395f5bc230f9faacf8' }, this.footerText)))))));
     }
     static get is() { return "bs-keyboard-shortcuts"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,7 +97,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '3483a207be9fb42c6d6c4e2385b3d03e3351b05c', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'cc497c226b4fc18f04121a3aff3fe5e10891bf82', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '9956c0d827c6ea78a2ed0a93e823555eac9af301', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '054ef607c962bdb4171e2b3818928f7e1765f692', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,6 +27,8 @@
 }
 
 .bs-list-item {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

@@ -50,6 +50,7 @@ import { Host, h } from "@stencil/core";
  * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
  * @prop --bs-list-item-image-width - Leading image width. 72px.
  * @prop --bs-list-item-image-height - Leading image height. 56px.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsListItem {
     el;
@@ -101,7 +102,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: 'eac7aeec4fedc05af55c5ca7a78efb693199de3a', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '3ba832febb95adfc10481b0b1d70cc4448f0a9dd', part: "container", class: "bs-list-item" }, h("div", { key: 'd528d17243f6185d164c5f6964abe4b1d8143d5b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '60efa1761cc46a7790986689acbada2f99d94add', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '4af6ee3b0969aeecdc2ead6b63be52b90927b713', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '57481516f3d3ed73854a58fa870d40d760252b99', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'acb37f4ec42b1c4c49d82cd21a89353a48ff3fcc', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'b9e310fd74f06b1114b2ecf64b6c7de8b63a4c61', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '7bb751ff77d29cd6f1852c90f5e71f855b222345', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '2bf6cb3dedfe1dcf868aba049f3718083ec63830', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '5cf7ede0e83b1040210346bdf7e7e6a5c7d06cfd', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'fb103f9892eebfd9a481c8d4b60e7504cb19311e', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c33fa8a2aaa5a446adde56c7c8d4bfece8ef1dc9', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'a4036266a279faf010db1b74aafec4e82574e921', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '5536afa9b97d2813b04ae1b81731a9a9598f326a', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'b88b81c3aa539eb54f275ec26c63049e9f3c8163', part: "ripple" }), h("div", { key: 'c297bb864a5744e51ef7053e1ee965cd5bb4184b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '7f67174fcaff9518c2b5b6303b0ea817f1a151c0', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: 'dc21fd490e75685ca49619f4eafb76e175c4d15d', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '857cb18376ff874ae8f651f4b354a7e01c4992d0', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '0c21f5a9300f1ef3ebd633e22467f05ccc4d4bc7', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '0b5aa6198aec09d9a4a7cd3086407e71bd3daf99', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'ce13d14cb3d11f7ec93782dae33e83e802f56e5b', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '723bf038e7b070a17080c15183a8ea1b3b4abe79', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '48057fb7c77264a761185f029a3f8a8c55f3eed4', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'b13854ebfc8bfe7571f91ffd0b1d15043c4edf5d', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '386a20723c7b54845ef2fff0b2292828775f3c06', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-mega-menu/bs-mega-menu.cmp.test.js

@@ -128,4 +128,77 @@ describe('bs-mega-menu', () => {
             expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
         }
     });
+    describe('open/close motion', () => {
+        const wait = (ms) => new Promise(r => setTimeout(r, ms));
+        const panel = (el) => q(el, '[part="panel"]');
+        it('stays visible with no open prop (the hidden-only contract)', async () => {
+            const { el } = await make();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).getAnimations().length).toBe(0);
+        });
+        it('is removed while open is false and shown with an enter animation of the configured duration', async () => {
+            const { el, waitForChanges } = await make();
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+        });
+        it('plays an exit of the configured duration, is inert meanwhile, then is removed', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(true);
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+            await wait(400);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('cancels the exit when it opens again', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '300ms');
+            el.open = false;
+            await waitForChanges();
+            el.open = true;
+            await waitForChanges();
+            await wait(500);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('runs no animation and changes at once when the duration is 0ms', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '0ms');
+            el.open = false;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).not.toBe('none');
+        });
+        it('still hides instantly with the hidden attribute while open is true', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.hidden = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+        });
+        it('has no axe violations while open', async () => {
+            const { el } = await make({ open: true });
+            await wait(300);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
 });

package/dist/collection/components/bs-mega-menu/bs-mega-menu.css

@@ -15,9 +15,13 @@
   --bs-mega-menu-heading-color: var(--bs-text-muted);
   --bs-mega-menu-text-color: var(--bs-text-default);
   --bs-mega-menu-muted-color: var(--bs-text-secondary);
+  --bs-mega-menu-duration: var(--bs-duration-default);
+  --bs-mega-menu-easing: var(--bs-easing-standard);
+  --bs-mega-menu-distance: var(--bs-spacing-100);
 }
 
-:host([hidden]) {
+:host([hidden]),
+:host([data-closed]) {
   display: none;
 }