@brandsync/wc 1.18.0 → 1.20.0

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: 'e0b7a524e5dee62d3938a5123d442bbed1dc7343', "aria-label": this.navLabel }, h("ul", { key: 'f4f7a7b9fade966be1cfec316f2fd7d9ac6bf07d', part: "list", class: "bs-pagination__list" }, h("li", { key: 'bc4c790a0c8044292226a51a80c1386227216f59', part: "item", class: "bs-pagination__item" }, h("button", { key: '555d5aac5bbe09201113e679dc15c605f73d9c01', 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: '3e0b6b85c01e65fef17d58842f8c28e3dbfa735c', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: '73ac62d07eb2291ae51a40d666c6e5584d32114d' }))), 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: 'a17911f50aef86dbeadeff8b78c9a7bf0ec7af38', part: "item", class: "bs-pagination__item" }, h("button", { key: '222299e7a5037a045e228fdbf37942bb00067d18', 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: '7c69b46ac6ee810a733b463090301e277e421f9d', part: "ripple", centered: true }), h(ChevronRightIcon, { key: '2f4a37edd28e4430b25e7b20ee37c0704667ce16' }))))));
     }
     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: '60037b8ebeead636ca7cfb1d1fb5656662053854', class: "bs-popover" }, h("div", { key: '216a52057acbae40f00d5c7e09ad7141fe356a3b', 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: '08bd0b15dbf67de5fbfa5323570886f2ea7a5468', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '5e409b359b7afcf4da286cfb66a264897698018d', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: '35a194b6369502fa0da50795aff5ee418376d009' }))));
     }
     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);
+    });
+});

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

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+  --bs-presence-duration: var(--bs-duration-default);
+  --bs-presence-easing: var(--bs-easing-standard);
+  --bs-presence-distance: var(--bs-spacing-400);
+  /* No brandsync token for a unitless scale factor. 0.96 is visible in the playground
+     without the content jumping. */
+  --bs-presence-scale: 0.96;
+}
+
+:host([duration='instant']) {
+  --bs-presence-duration: var(--bs-duration-instant);
+}
+:host([duration='fast']) {
+  --bs-presence-duration: var(--bs-duration-fast);
+}
+:host([duration='default']) {
+  --bs-presence-duration: var(--bs-duration-default);
+}
+:host([duration='slow']) {
+  --bs-presence-duration: var(--bs-duration-slow);
+}
+:host([duration='slower']) {
+  --bs-presence-duration: var(--bs-duration-slower);
+}
+
+:host([easing='standard']) {
+  --bs-presence-easing: var(--bs-easing-standard);
+}
+:host([easing='decelerate']) {
+  --bs-presence-easing: var(--bs-easing-decelerate);
+}
+:host([easing='accelerate']) {
+  --bs-presence-easing: var(--bs-easing-accelerate);
+}
+:host([easing='linear']) {
+  --bs-presence-easing: var(--bs-easing-linear);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --bs-presence-duration: var(--bs-duration-instant);
+  }
+}
+
+.bs-presence {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.bs-presence--closed.bs-presence--collapse {
+  grid-template-rows: 0fr;
+}
+
+.bs-presence--collapse .bs-presence__clip {
+  overflow: hidden;
+}
+
+.bs-presence__clip {
+  min-height: 0;
+  opacity: 1;
+  transform: none;
+}
+
+.bs-presence--closed .bs-presence__clip {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bs-presence--slide-up.bs-presence--closed .bs-presence__clip {
+  transform: translateY(var(--bs-presence-distance));
+}
+
+.bs-presence--slide-down.bs-presence--closed .bs-presence__clip {
+  transform: translateY(calc(var(--bs-presence-distance) * -1));
+}
+
+.bs-presence--scale.bs-presence--closed .bs-presence__clip {
+  transform: scale(var(--bs-presence-scale));
+}

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

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+const PRESETS = ['fade', 'slide-up', 'slide-down', 'scale', 'collapse'];
+/**
+ * Shows and hides slotted content with a short enter/exit transition.
+ *
+ * The motion uses the shared duration and easing tokens (`--bs-duration-*`, `--bs-easing-*`).
+ * Under `prefers-reduced-motion: reduce` those durations are already `0ms`, and this component
+ * forces `--bs-presence-duration` to `--bs-duration-instant` as well, so the content snaps
+ * instead of moving.
+ *
+ * ## When to use
+ * - Revealing a block that does not have its own enter/exit (a card, a form section, a panel).
+ * - Comparing duration and easing tokens while designing a screen.
+ *
+ * ## When not to use
+ * - Loading placeholders (`bs-skeleton`), spinners (`bs-spinner`), or progress.
+ * - Dialog, snackbar, toast, and command palette — those components own their motion.
+ *
+ * @slot - The content to show and hide.
+ * @part content - The element that transitions. Style it with `::part(content)`.
+ * @prop --bs-presence-duration - Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+ * @prop --bs-presence-easing - Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+ * @prop --bs-presence-distance - Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+ * @prop --bs-presence-scale - Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
+ */
+export class BsPresence {
+    el;
+    /** When true, the slotted content is shown. Flipping this plays the exit or enter transition. */
+    active = false;
+    /** Which transition to play. */
+    preset = 'fade';
+    /** Length of the transition, mapped to a `--bs-duration-*` token. */
+    duration = 'default';
+    /** Curve of the transition, mapped to a `--bs-easing-*` token. */
+    easing = 'standard';
+    /** Fires once when the transition to the new `active` state finishes. Payload is that state. */
+    bsTransitionEnd;
+    clip;
+    shell;
+    /**
+     * CSS class changes inside this shadow root will play the exit and then not the entrance
+     * (Chromium drops the reverse transition). The Web Animations API plays both directions.
+     * A 0ms duration — including `prefers-reduced-motion` — snaps and emits here.
+     */
+    onActiveChange(active) {
+        const clip = this.clip;
+        const shell = this.shell;
+        clip?.getAnimations().forEach(animation => animation.cancel());
+        shell?.getAnimations().forEach(animation => animation.cancel());
+        const ms = this.motionDuration();
+        if (!clip || ms === 0) {
+            this.bsTransitionEnd.emit(active);
+            return;
+        }
+        const style = getComputedStyle(this.el);
+        const easing = style.getPropertyValue('--bs-presence-easing').trim() || 'ease';
+        const distance = style.getPropertyValue('--bs-presence-distance').trim() || '0px';
+        const scale = style.getPropertyValue('--bs-presence-scale').trim() || '1';
+        const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
+        const hidden = preset === 'slide-up'
+            ? `translateY(${distance})`
+            : preset === 'slide-down'
+                ? `translateY(calc(${distance} * -1))`
+                : preset === 'scale'
+                    ? `scale(${scale})`
+                    : 'none';
+        const shown = { opacity: 1, transform: 'none' };
+        const concealed = { opacity: 0, transform: hidden };
+        const animation = clip.animate(active ? [concealed, shown] : [shown, concealed], { duration: ms, easing, fill: 'both' });
+        if (preset === 'collapse' && shell) {
+            shell.animate(active
+                ? [{ gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }]
+                : [{ gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }], { duration: ms, easing, fill: 'both' });
+        }
+        animation.onfinish = () => {
+            animation.cancel();
+            shell?.getAnimations().forEach(running => running.cancel());
+            if (this.active === active)
+                this.bsTransitionEnd.emit(active);
+        };
+    }
+    motionDuration() {
+        const value = getComputedStyle(this.el).getPropertyValue('--bs-presence-duration').trim();
+        if (value.endsWith('ms'))
+            return parseFloat(value);
+        if (value.endsWith('s'))
+            return parseFloat(value) * 1000;
+        return 0;
+    }
+    render() {
+        const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
+        return (h(Host, { key: '9d25523c831b2851a7fb0f2c012361ddb6726e73', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: '14726f5a42d6821866737b46f23cd4b103ca5649', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: '35619f949a9e75db1c25ebca2c05d9e629d2ba51', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '65da3ddd001ae35ae919550b10c1118285bbaffa' })))));
+    }
+    static get is() { return "bs-presence"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-presence.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-presence.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the slotted content is shown. Flipping this plays the exit or enter transition."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "preset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresencePreset",
+                    "resolved": "\"collapse\" | \"fade\" | \"scale\" | \"slide-down\" | \"slide-up\"",
+                    "references": {
+                        "BsPresencePreset": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresencePreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which transition to play."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "preset",
+                "defaultValue": "'fade'"
+            },
+            "duration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresenceDuration",
+                    "resolved": "\"default\" | \"fast\" | \"instant\" | \"slow\" | \"slower\"",
+                    "references": {
+                        "BsPresenceDuration": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresenceDuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Length of the transition, mapped to a `--bs-duration-*` token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "duration",
+                "defaultValue": "'default'"
+            },
+            "easing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresenceEasing",
+                    "resolved": "\"accelerate\" | \"decelerate\" | \"linear\" | \"standard\"",
+                    "references": {
+                        "BsPresenceEasing": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresenceEasing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Curve of the transition, mapped to a `--bs-easing-*` token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "easing",
+                "defaultValue": "'standard'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsTransitionEnd",
+                "name": "bsTransitionEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires once when the transition to the new `active` state finishes. Payload is that state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "onActiveChange"
+            }];
+    }
+}