@brandsync/wc 1.18.0 → 1.19.0

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

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let uid = 0;
 /**
  * The dropdown panel under a navigation header tab: columns of links grouped under headings, an optional
@@ -6,8 +7,13 @@ let uid = 0;
  * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
  *
  * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
- * header's full width, and toggle the host's `hidden` attribute from the tab that
- * opens it; the panel does not open or close itself. Escape inside the panel fires `bsClose` so you can close it.
+ * header's full width, and show it from the tab that opens it; the panel does not open or close itself. Escape
+ * inside the panel fires `bsClose` so you can close it.
+ *
+ * There are two ways to show and hide it. Toggle the host's `hidden` attribute and it appears and disappears at once
+ * (the original contract, unchanged). Or set `open` and it fades and drops in from under the bar, then fades back out
+ * and is removed once the exit finishes. Leave `open` unset to keep using `hidden` only. `hidden` always wins: with it
+ * set the panel is not shown whatever `open` says.
  *
  * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
  * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
@@ -54,12 +60,23 @@ let uid = 0;
  * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
  * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
  * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ * @prop --bs-mega-menu-duration - Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+ * @prop --bs-mega-menu-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-mega-menu-distance - How far the panel drops while it fades. Aliased to `--bs-spacing-100`.
+ *
+ * Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
  */
 export class BsMegaMenu {
     el;
     id = `bs-mm-${++uid}`;
     /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
     type = 'columns';
+    /**
+     * Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`
+     * attribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.
+     * The panel stays in the DOM and is `inert` while it fades out.
+     */
+    open;
     /** The groups of links. JS property only (an array cannot be an attribute). */
     columns = [];
     /** The featured area on the right. JS property only. The `featured` slot overrides it. */
@@ -80,6 +97,43 @@ export class BsMegaMenu {
     bsMenuSelect;
     /** Fires when Escape is pressed inside the panel, so you can close it. */
     bsClose;
+    /** True while the exit motion plays after `open` went false, so the panel stays visible for it. */
+    closing = false;
+    panelEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next, prev) {
+        this.motionRun++;
+        cancelMotion(this.panelEl);
+        this.closing = false;
+        if (next === true) {
+            this.enterPending = true;
+        }
+        else if (next === false && prev === true && !this.el.hidden && readMotion(this.el, 'bs-mega-menu').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    componentDidRender() {
+        if (this.exitPending) {
+            this.exitPending = false;
+            if (this.closing && this.open === false) {
+                const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+                const run = ++this.motionRun;
+                play(this.panelEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${-distance}px)` }], ms, easing, 'forwards').then(() => {
+                    if (run === this.motionRun)
+                        this.closing = false;
+                });
+            }
+        }
+        if (this.enterPending) {
+            this.enterPending = false;
+            const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+            if (ms > 0 && this.open === true)
+                play(this.panelEl, [{ opacity: 0, transform: `translateY(${-distance}px)` }, { opacity: 1, transform: 'none' }], ms, easing);
+        }
+    }
     select(item, ev) {
         const e = this.bsMenuSelect.emit(item);
         if (e.defaultPrevented)
@@ -107,7 +161,8 @@ export class BsMegaMenu {
     render() {
         const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
         const tracks = this.columns.length + (hasFeatured ? 1 : 0);
-        return (h("bs-card", { key: '005653cc6235b7aa26268e3bf97b1a985df89843', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown }, h("div", { key: '22808dd74ea84ae0511dc92e4a3d2d3045a8157c', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: '105dd2102501c21303f0cd115f2a8797a8996195', decorative: true }), h("div", { key: '0f20d9d01cb29d29735612d2708cb48af2e30bf0', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'e2d7e8bf77b15b735015342ef6a21b946cdcf2cb', class: "bs-mega-menu__footer-start" }, h("slot", { key: '1d34e50c301329ea2bd381a08ffab99b9bce5394', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '773eae68920c131c8dea1182a41a78e6ceef4222', class: "bs-mega-menu__footer-end" }, h("slot", { key: '70e2b5dce40e19423b55c1df869d1326f5fdbfa4', name: "footer-end" }, h("span", { key: '10bb8e18aaa162b06209f65f7e9136ff716466f8', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'a9991ceab494255b81fccb97e8290432bcc0cff2', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel })))))));
+        const removed = this.open === false && !this.closing;
+        return (h(Host, { key: '036de0d22f6fd097b063cf3e18db04bbffac3590', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '551c8aa2d4d2dcaca5d50d6fa1b694007685cde9', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: '00fd782414ca6032b20fd5bb9d07c892389dd9fe', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'f1e4ea55ae169e992cf7b48698016cc9c13382ff', decorative: true }), h("div", { key: '4a71517320983a6f01f81fdb44a893750ecc0516', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'b4192ab9c345ce706aaab400c0445b0ac50472f0', class: "bs-mega-menu__footer-start" }, h("slot", { key: 'ebdb724b4546c04243c7c5d65f9b2acfb001df6b', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '78554ecd4de584ed7aedec599f6dd8556f4652cc', class: "bs-mega-menu__footer-end" }, h("slot", { key: '68bd8c2fc4a76dc78e4f0399a875bf509974d760', name: "footer-end" }, h("span", { key: '5a26bb373a4b3a0934df88c2f4b138fe153332e2', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'be2bc62ab7d2aaada1ab1539d341bead5d2f8897', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
     }
     static get is() { return "bs-mega-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +204,25 @@ export class BsMegaMenu {
                 "attribute": "type",
                 "defaultValue": "'columns'"
             },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`\nattribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.\nThe panel stays in the DOM and is `inert` while it fades out."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open"
+            },
             "columns": {
                 "type": "unknown",
                 "mutable": false,
@@ -315,6 +389,11 @@ export class BsMegaMenu {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsMenuSelect",
@@ -355,4 +434,10 @@ export class BsMegaMenu {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
 }

package/dist/collection/components/bs-mega-menu/bs-mega-menu.stories.js

@@ -87,7 +87,7 @@ export const Interactive = {
     },
 };
 /**
- * The consumer-owned trigger for the header's `menu` slot: the "Sales" tab toggles the panel's `hidden`,
+ * The consumer-owned trigger for the header's `menu` slot: the "Sales" tab toggles the panel's `open` (so it fades in and out),
  * keeps `aria-expanded` in step (`aria-controls`/`aria-haspopup` are left off: `bs-tab` does not forward them to
  * its inner button and axe rejects them on the host, see the mdx), closes it on `bsClose` (Escape), on an outside click and on a second
  * click, and returns focus to the tab. `bs-navigation-header` only positions the panel.
@@ -103,20 +103,20 @@ function inNavigationHeader(type, featured) {
     };
     const setOpen = (from, open, restoreFocus = false) => {
         const { tab, menu } = parts(from);
-        menu.hidden = !open;
+        menu.open = open;
         tab.setAttribute('aria-expanded', String(open));
         if (!open && restoreFocus)
             tab.shadowRoot?.querySelector('button')?.focus();
     };
     const onTabClick = (e) => {
         const { root, menu } = parts(e.currentTarget);
-        const opening = menu.hidden;
+        const opening = !menu.open;
         setOpen(root, opening);
         // Outside click closes it; attached once the panel opens, removed when it closes.
         if (opening) {
             const outside = (ev) => {
                 const path = ev.composedPath();
-                if (menu.hidden || !root.isConnected)
+                if (!menu.open || !root.isConnected)
                     return document.removeEventListener('click', outside);
                 if (!path.includes(menu) && !path.includes(e.currentTarget)) {
                     setOpen(root, false);
@@ -141,7 +141,7 @@ function inNavigationHeader(type, featured) {
         <bs-mega-menu
           slot="menu"
           id=${menuId}
-          hidden
+          .open=${false}
           @bsClose=${onClose}
           .type=${type}
           .columns=${columns}

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '850122bbadc472043159746a66002281d53ddd7b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '5a64d51431e7cad88d5a7f4d01aa004098e9b2d2' })));
+        return (h("div", { key: 'b6cc3be6f6df9dab73a50bc0c398ec48e9c81c04', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'ee7a51748f40144e04f9deac9117b175e9cc2f3d' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-block/bs-menu-block.js

@@ -47,10 +47,10 @@ export class BsMenuBlock {
     render() {
         const common = { part: 'container', class: 'bs-menu-block' };
         const body = [
-            h("bs-icon-tile", { key: '6d46f853f1673374675ede6c701e3e01fa5c3a4a', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: '8a24502be4a71f7c6a74f6600ee0f411a37f9d58', class: "bs-menu-block__text" }, h("span", { key: 'fd71ce8072d8bb8b83f5831c9d16ac190b3b2b0f', class: "bs-menu-block__title" }, h("span", { key: '99f4a8008a50274e7306a91b8d57ce8c98782f9b', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'd71237f056ca413aa1b9640df4507d52e94e47b2', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: '857ce6dbdc7885a9099f4e9cd94967ba187ce892', part: "description", class: "bs-menu-block__description" }, this.description))),
+            h("bs-icon-tile", { key: 'f16451b0269c9e2147303016a9a8eff3054804fa', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: 'b0ec2c28feb0db796dd9c252da01db7297680916', class: "bs-menu-block__text" }, h("span", { key: '512bfedc88a49232164be59eba523ca673876f2e', class: "bs-menu-block__title" }, h("span", { key: 'a75951dfa734644f3fbd5abd1f97e51b9a023a36', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'b4769585e7578532a68be1cb19bd1dc0553a7d52', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bc5049f8180aff51f96bad7bfedc6e5b7704f459', part: "description", class: "bs-menu-block__description" }, this.description))),
         ];
-        return (h("button", { key: '6ca8eed231c6b061aab714398975b2f9dc4eb091', ...common, type: "button" }, body));
+        return (h("button", { key: 'f468826125b6743495c96049081f94ea7f372a0d', ...common, type: "button" }, body));
     }
     static get is() { return "bs-menu-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,8 @@
 }
 
 .bs-menu-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-menu-item/bs-menu-item.js

@@ -28,6 +28,7 @@ import { h } from "@stencil/core";
  * @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
  * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
  * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsMenuItem {
     /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by
@@ -47,7 +48,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '6b051d2fd71b1be59a253c9eb10e7a8f1242e110', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '245b088e3d5243d4b6ca8871b087d53174405590', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'f325951ecf61f5b2e39d54fb9dd7deda9fc313cb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2d89029982559af29db78a0ba2fd48ccfbc1c416', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '56681e9c1241233fc36e9bcd5a19c58ef3af5b4b' }))));
+        return (h("button", { key: 'a6022e318de72f62cf5b4be5c924d472221b4cff', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("bs-ripple", { key: '5c330b32fb6450c9015ea5549ec522bbab0a3ac0', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '16fece8c1363813f05410e120be8bdee4281ccfa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'e8ceb7834a709543718dd0145d753fb186a74489', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7ddb04608737ffeb097bebcdb5c00f825e058b9f', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd24f52e58bfb3629ba8512e17e41844ad0b3baab' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: 'c159d43edf61a61bb87fa72c650a8642e0ae154f', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'a503d44dd040849e1db3327f3c33981eea8fcd9d', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'bef63a196f9ffcaeb6b729f2c9b67722e9e5afe1', name: "avatar" })), h("div", { key: 'a27a5dd8bff4350c882eeab12f8ebcf32d629333', class: "bs-message__column" }, h("bs-card", { key: '4dd1f9da16be30b04f1c6bea178600ff11f6b654', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'c4dbf71df32e0b962e20929488952149c88f3b04', part: "content", class: "bs-message__content" }, h("slot", { key: '2b251a032180bc3e1ef4b027179ddde73a7f9dcc' }))), h("div", { key: '749ba9490b9204fe4f514bb5f15190e658309e9b', part: "footer", class: "bs-message__footer" }, h("slot", { key: '43e305fe85d7fcf81afb115d7477035108cece44', name: "footer" })), h("div", { key: '4c224882dbe5d0f01117cd276f5d3050426cd344', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'e9a2ccfb8628e5c3d3840fbda5b70009af6e0c6f', name: "timestamp" }, this.timestamp && h("time", { key: '9b4dc4a6e042367420c8b7355621ad42075f335e', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'db1349965dab9cdb4ca7cddd47d9df6aa21227d2', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd1bee0f3145b3bd789ffe90b2603caefba8fcf1e', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '487a6d52013d52ac80f8906fbccf3017a1dd927d', name: "avatar" })), h("div", { key: 'c0713ad732145108ee0a40991fcc3f7955d6d263', class: "bs-message__column" }, h("bs-card", { key: 'ffa3b7c127f117c61e704e3209b031c0d1e0f385', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'f7b852caaecf770856fdb332db9e3af6540d99c2', part: "content", class: "bs-message__content" }, h("slot", { key: 'd3cacbf1031960c074b67115cdd110910eeb116b' }))), h("div", { key: '7161bd50553b2a2f4047c23501877ede4ff4facf', part: "footer", class: "bs-message__footer" }, h("slot", { key: '7109f10f94523fd2d58b6dd4de2195626b385dfb', name: "footer" })), h("div", { key: 'bf4e8e6c4817d33c69dd12362b397860d70766e9', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '6b70a022b77a2e20d4c0c3524d2ef00b45f1b583', name: "timestamp" }, this.timestamp && h("time", { key: '4e421395a0537ce46369fe9555cf308b052d71f1', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: 'e474c22e93a8559c37efa3e13670bf6f48da5140', class: "bs-message-list" }, h("div", { key: 'f29d2f07b872743353ac0595399f5d87d94b2ace', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '265e61fefe2219e57cb9724f68ca76752849a1f6' })), this.showScrollButton && (h("bs-icon-button", { key: '960398acea1fe8b6cdb00469ee23531b40715ac9', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '748dfcd735223d1482ebe6e0b24383c8018a976f', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'af9d03ca412502d46822588c9bcb303e44dd33c3', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: 'b10cb414ec777f2ee2b793788f1d7cd1c8be7c03', class: "bs-message-list" }, h("div", { key: 'cdc9d56810ccab43ecc5a4f2a8c2fa0d7f87a238', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '54e2d0281818c3f0a6e9b4d8d147b7769b4bfd62' })), this.showScrollButton && (h("bs-icon-button", { key: 'dbe6009a3905d63fd50e69860e1f287a625d6d25', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '000793a84e2f256bcf59cd7e000e54a6dcb0e63d', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '6d8447826dc8ae2534156820f45fe761797bf70a', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -109,7 +109,7 @@ export class BsPageHeader {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
         const showMeta = !!this.meta || this.slotted.meta;
         const hasTabs = this.slotted.tabs && !this.compact;
-        return (h("div", { key: 'c67fc2b33ae942872040751d548fb82702032f9f', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '032d58b0072e17bd8eeb60afb5a719899a56691b', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: 'baed539fafc7704bbcddf66aff9109e0d6366d67', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '7f001cac1f29a8dd805830df98b367cee74fd46f', part: "row", class: "bs-page-header__row" }, h("div", { key: 'c287bdcf1e22feb88bfbc3623cc2ff8765b798d0', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '98d23c039d1f864de2a3a814ffc66c69e613d88d', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: 'dd9d3aec3e3bd8e8d5423b7fbf3d899693f2a47d' }))), h("div", { key: '8b2c60f98bcf538bb6419d37180c87f921d3efc1', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: 'c2b98f908942e93bfd6c8711c7097b77fdf9c449', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '7a0be9e27bd1b1b4fb5ce5122056ea1b79d85e3a', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: 'be19b70ac6c5a0a560bf2d3402c146844b5bb81b', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: '5c4c5aeb64bf508031607455f65c67a7b6fc89ce', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '75d3cbe844e0ecee9ed9f2457591fd418405b931', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: 'a8f6d7929d7c49066f987f9acc665ef42404059b', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: '84a69af01b82f153b965c981d80bda4561b9d8a7', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: 'fdd15239c429c8800b91aac17fff8cd78bbfc589', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: '892ecc16b598a39b706e807c67fb8b4b7a6e7cad', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '7397b2cfc7faca637442ba7d0460a1ec396504a3', part: "divider", class: "bs-page-header__divider", decorative: true })));
+        return (h("div", { key: 'bc53e187af58ecbf3d923e4a7a4c2d6753706664', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '66d18bcfa396e4b65027e204ebe78db904c353f5', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '7160cb117c4a9734c8975ef5dfdd0562465736e7', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '16f1c1ebf185d8900a900a262fcbbdf0b5fd9670', part: "row", class: "bs-page-header__row" }, h("div", { key: '9d97f5e3235be3c947253248c0473aa390da2892', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: 'c9a71a1eea484c739fea7aeb00b218d10db7a30b', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: '196d12852cd144fc95411d06a06f366168733d23' }))), h("div", { key: '763d905494ae6d453a259d70bd1d80baefb7e264', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: '0e533d399af320f3a79659f46c493b4cf1bf2b50', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '396f0352a4c9c84a362fc2266bd69ee695b0f9aa', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '81b8992250fac52af9e9e2ae415aa759122acd94', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: 'b4e5e1d5cb1d680120059455d2a69152dd0bc8d3', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '597180318543618a258ae56f8e9d26a2dc882243', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '18296c20d248dcdf531e1ff0a9b4230c459625e8', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'c4ea0d5ce7c80995be1335fe62f9b76629303722', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '2a942c6f3bef3d546942794368ee22b4f521a4a4', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: 'd870267922ea0ffe8f5fc7503e76c038a7a47406', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '988231057dd030bd096948e6cdab39288784c8c3', part: "divider", class: "bs-page-header__divider", decorative: true })));
     }
     static get is() { return "bs-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,6 +53,8 @@
 }
 
 .bs-pagination__control {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -24,6 +24,7 @@ import { h } from "@stencil/core";
  * @part page - Each page-number button.
  * @part current - The current page's button (in addition to `page`).
  * @part ellipsis - Each collapsed-range indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsPagination {
     /** Total number of pages. Must be a positive integer -- there's always at least one page. */
@@ -91,7 +92,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'ea5d0b85f962dd1e92533f6995072f048b562026', "aria-label": this.navLabel }, h("ul", { key: 'd8bd25cb99175486a7d47b10a01dec6e84d31000', part: "list", class: "bs-pagination__list" }, h("li", { key: 'cb00b60f5a1b2b3b6da3e8ca8c3842694377a60d', part: "item", class: "bs-pagination__item" }, h("button", { key: '567d93ab292428f0f84fa0e006d76214cfc39e22', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'd83a3dc7a3e913a7b302bb9e5beab31c5bc2987c' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '4904d32b1ce60efff4810a0a47453dcf6d1a515b', part: "item", class: "bs-pagination__item" }, h("button", { key: '4eb744abe27134d51fbf80bbedb3d0281afb7f71', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'e7b62fd1cbf5263c94fa3482ebc094b367f5e6ca' }))))));
+        return (h("nav", { key: '574bba698954fefe6083b1c0b46215b53cd929cc', "aria-label": this.navLabel }, h("ul", { key: 'db7a37916e2f2bb8739828936048b9b73af2c93f', part: "list", class: "bs-pagination__list" }, h("li", { key: '25fc9453e309eec5c7226fc3a2255fe20f138ebc', part: "item", class: "bs-pagination__item" }, h("button", { key: '654898cca41f9868f3780b16a01d25e39c76de06', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h("bs-ripple", { key: '544bddaee750f3d18519cf676fccf2788ae65b8f', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: 'c8913363a09dada9765383ab59d309058b272b65' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, h("bs-ripple", { part: "ripple", centered: true }), item)))), h("li", { key: '8ce36f14052801aa1ef9b2f750f6d030de1ed6b1', part: "item", class: "bs-pagination__item" }, h("button", { key: 'a944585c463d4a8035b2932e1a1c881fb5ad68ee', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h("bs-ripple", { key: '3082d79238e9242cbfc52e08be0d53160f85bfed', part: "ripple", centered: true }), h(ChevronRightIcon, { key: 'be4c48d8075ecf6e9389546e63c8e192da50ed30' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 const setup = () => render(h("bs-popover", null, h("button", { slot: "trigger" }, "Open"), h("div", null, "Content")));
 describe('bs-popover', () => {
     it('is closed by default with aria wiring on the trigger wrapper', async () => {
@@ -104,4 +105,23 @@ describe('bs-popover', () => {
         await waitForChanges();
         expect(pop.getAttribute('data-placement')).toBe('bottom-end');
     });
+    describe('open/close motion', () => {
+        it('keeps the popup visible while it fades out, then hides it', async () => {
+            const { root, waitForChanges } = await render(h("bs-popover", { open: true, style: { '--bs-popover-duration': '150ms' } }, h("button", { slot: "trigger" }, "Open"), h("p", null, "Content")));
+            const popup = root.shadowRoot.querySelector('[part="popup"]');
+            expect(popup.hidden).toBe(false);
+            root.open = false;
+            await waitForChanges();
+            expect(popup.hidden).toBe(false);
+            await wait(400);
+            await waitForChanges();
+            expect(popup.hidden).toBe(true);
+        });
+        it('hides immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-popover", { open: true, style: { '--bs-popover-duration': '0ms' } }, h("button", { slot: "trigger" }, "Open"), h("p", null, "Content")));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="popup"]').hidden).toBe(true);
+        });
+    });
 });

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

@@ -7,6 +7,9 @@
   --bs-popover-offset: var(--bs-spacing-100);
   --bs-popover-min-width: var(--bs-scale-1600);
   --bs-popover-z-index: var(--bs-z-index-popover);
+  --bs-popover-duration: var(--bs-duration-fast);
+  --bs-popover-easing: var(--bs-easing-standard);
+  --bs-popover-distance: var(--bs-spacing-50);
 }
 
 .bs-popover__trigger {

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let popoverId = 0;
 /**
  * A trigger plus a popup panel that opens on trigger click and closes on outside click or Escape.
@@ -23,6 +24,12 @@ let popoverId = 0;
  * @prop --bs-popover-offset - Gap between trigger and popup. Aliased to `--bs-spacing-100`.
  * @prop --bs-popover-min-width - Minimum popup width. Aliased to `--bs-scale-1600`.
  * @prop --bs-popover-z-index - Popup stacking order. Aliased to `--bs-z-index-popover`.
+ * @prop --bs-popover-duration - Length of the open/close motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-popover-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-popover-distance - How far the popup nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The popup fades and nudges toward its trigger when it opens and closes. Length, curve and travel are
+ * `--bs-popover-duration`, `--bs-popover-easing` and `--bs-popover-distance`; under `prefers-reduced-motion: reduce` it is instant.
  */
 export class BsPopover {
     el;
@@ -34,12 +41,21 @@ export class BsPopover {
     bsOpenChange;
     popupId = `bs-popover-${++popoverId}`;
     triggerSlot;
+    /** True while the exit motion plays after `open` went false, so the popup stays visible for it. */
+    closing = false;
     popupEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
     needsFocusIn = false;
     escaped = false;
     onOpenChange(next) {
         this.detach();
+        this.motionRun++;
+        cancelMotion(this.popupEl);
         if (next) {
+            this.closing = false;
+            this.enterPending = true;
             document.addEventListener('click', this.onDocClick, true);
             document.addEventListener('keydown', this.onKeyDown);
             window.addEventListener('resize', this.reposition);
@@ -48,7 +64,14 @@ export class BsPopover {
         }
         else {
             this.needsFocusIn = false;
-            this.el.setAttribute('data-placement', this.placement);
+            if (this.popupEl && !this.popupEl.hidden && readMotion(this.el, 'bs-popover').ms > 0) {
+                // Keep the resolved (possibly flipped) placement while the popup fades out; it is reset when the motion ends.
+                this.closing = true;
+                this.exitPending = true;
+            }
+            else {
+                this.el.setAttribute('data-placement', this.placement);
+            }
             const active = this.el.shadowRoot?.activeElement || document.activeElement;
             const focusInside = this.el.contains(document.activeElement) && document.activeElement !== this.triggerSlot?.assignedElements()[0] && !this.isInTrigger(document.activeElement);
             if (this.escaped || (focusInside && active))
@@ -62,10 +85,39 @@ export class BsPopover {
     componentWillLoad() {
         this.el.setAttribute('data-placement', this.placement);
     }
+    /** Slides toward the trigger it hangs off: a popup above its trigger rises from below, one below drops from above. */
+    offset(distance) {
+        const above = (this.el.getAttribute('data-placement') ?? this.placement).startsWith('top');
+        return `translateY(${above ? distance : -distance}px)`;
+    }
+    playEnter() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-popover');
+        if (ms === 0)
+            return;
+        play(this.popupEl, [{ opacity: 0, transform: this.offset(distance) }, { opacity: 1, transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-popover');
+        const run = ++this.motionRun;
+        play(this.popupEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: this.offset(distance) }], ms, easing, 'forwards').then(() => {
+            if (run !== this.motionRun)
+                return;
+            this.closing = false;
+            this.el.setAttribute('data-placement', this.placement);
+        });
+    }
     componentDidRender() {
+        if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (!this.open)
             return;
         this.reposition();
+        if (this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
         if (this.needsFocusIn) {
             this.needsFocusIn = false;
             this.focusPopup();
@@ -152,7 +204,7 @@ export class BsPopover {
         }
     };
     render() {
-        return (h("div", { key: 'a98416df7a3b9edbbac835ea99150bd22e21d0b1', class: "bs-popover" }, h("div", { key: 'd69eb18d28a99bd22d14a40167c1a5f9d4ed09e5', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '3b6242971ba9f2bcccfdddfe15b564b3deef1eec', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '0d815e6f7ec731e5643891784b35df2cb635a6a9', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: '8e455726291b8f4faaaf1f1fee190047cbd9525b' }))));
+        return (h("div", { key: '39151f3b9bf56616c0e96cf0c5312d75331d89bb', class: "bs-popover" }, h("div", { key: 'dd05791d8e55c9abf1447761bd3c411b86bc20f4', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '5aaf9d25f29381bc005e2424a43e806d01a74ec4', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: 'bc734ecdcb751ff09bb5ccdc5829035d8fd56f72', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: 'b10ce9654f2c0f899fded5b13bf0d66f841d3f2e' }))));
     }
     static get is() { return "bs-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -216,6 +268,11 @@ export class BsPopover {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsOpenChange",

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

@@ -0,0 +1,64 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertCssCustomProperties, assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+describe('bs-presence', () => {
+    it('hides slotted content until active', async () => {
+        const { root } = await render(h("bs-presence", null, h("span", null, "Room 214")));
+        expect(root).toEqualAttribute('preset', 'fade');
+        expect(root).toEqualAttribute('duration', 'default');
+        expect(root).toEqualAttribute('easing', 'standard');
+        expect(root).not.toHaveAttribute('active');
+        expect(root).toEqualAttribute('aria-hidden', 'true');
+        expect(root).toHaveAttribute('inert');
+        expect(root).toHaveTextContent('Room 214');
+        const clip = root.shadowRoot.querySelector('.bs-presence__clip');
+        expect(getComputedStyle(clip).opacity).toBe('0');
+    });
+    it('shows content when active', async () => {
+        const { root } = await render(h("bs-presence", { active: true }, h("span", null, "Room 214")));
+        expect(root).toHaveAttribute('active');
+        expect(root).not.toHaveAttribute('aria-hidden');
+        expect(root).not.toHaveAttribute('inert');
+        const clip = root.shadowRoot.querySelector('.bs-presence__clip');
+        expect(getComputedStyle(clip).opacity).toBe('1');
+    });
+    it('applies the preset class', async () => {
+        const { root } = await render(h("bs-presence", { preset: "collapse" }));
+        expect(root.shadowRoot.querySelector('[part="content"]')).toHaveClass('bs-presence--collapse');
+    });
+    it('falls back to fade for an unknown preset', async () => {
+        const { root } = await render(h("bs-presence", { preset: 'bounce' }));
+        expect(root.shadowRoot.querySelector('[part="content"]')).toHaveClass('bs-presence--fade');
+    });
+    it('exposes its customization surface', async () => {
+        const { root } = await render(h("bs-presence", { active: true }));
+        assertShadowParts(root.shadowRoot, ['content']);
+        assertCssCustomProperties(root, ['--bs-presence-duration', '--bs-presence-easing', '--bs-presence-distance', '--bs-presence-scale']);
+    });
+    it('maps duration and easing onto the motion tokens', async () => {
+        const { root } = await render(h("bs-presence", { duration: "slow", easing: "decelerate" }));
+        const style = getComputedStyle(root);
+        const tokens = getComputedStyle(document.documentElement);
+        expect(style.getPropertyValue('--bs-presence-duration').trim()).toBe(tokens.getPropertyValue('--bs-duration-slow').trim());
+        expect(style.getPropertyValue('--bs-presence-easing').trim()).toBe(tokens.getPropertyValue('--bs-easing-decelerate').trim());
+    });
+    it('emits bsTransitionEnd with the state just reached', async () => {
+        const { root } = await render(h("bs-presence", { duration: "instant" }, h("span", null, "Room 214")));
+        const events = [];
+        root.addEventListener('bsTransitionEnd', (event) => events.push(event.detail));
+        root.active = true;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(events).toEqual([true]);
+    });
+    it('emits bsTransitionEnd after a non-zero transition', async () => {
+        const { root } = await render(h("bs-presence", { duration: "fast" }, h("span", null, "Room 214")));
+        const events = [];
+        root.addEventListener('bsTransitionEnd', (event) => events.push(event.detail));
+        root.active = true;
+        await new Promise(resolve => setTimeout(resolve, 250));
+        expect(events).toEqual([true]);
+    });
+    it('passes an axe check while shown', async () => {
+        const { root } = await render(h("bs-presence", { active: true }, h("span", null, "Room 214")));
+        await runAxeCheck(root);
+    });
+});