@brandsync/wc 1.17.0 → 1.19.0

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

@@ -0,0 +1,177 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { componentDescription } from "../../stories-utils";
+import exportIcon from "@phosphor-icons/core/assets/regular/download-simple.svg?inline";
+import plusIcon from "@phosphor-icons/core/assets/regular/plus.svg?inline";
+import moreIcon from "@phosphor-icons/core/assets/bold/dots-three-bold.svg?inline";
+import mailIcon from "@phosphor-icons/core/assets/regular/envelope-simple.svg?inline";
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own. */
+export const ICONS = { export: exportIcon, plus: plusIcon, more: moreIcon, mail: mailIcon };
+/** Sample data (invented for the stories and tests; not real invoices, customers or amounts). */
+export const SAMPLE = {
+    heading: 'Invoices',
+    listMeta: '214 invoices · 38 open · 5 overdue',
+    customerMeta: 'Nordlys Handel AS · 4 250,00 kr',
+};
+/** An icon painted from a monochrome SVG URL in the surrounding text colour, sized by the slot (1em). */
+const icon = (url) => {
+    const mask = `url("${url}") center / contain no-repeat`;
+    return html `<span aria-hidden="true" style=${styleMap({ display: 'block', width: '100%', height: '100%', background: 'currentColor', '-webkit-mask': mask, mask })}></span>`;
+};
+const trail = (record) => html `
+  <bs-breadcrumbs slot="breadcrumb" label="Breadcrumb">
+    <bs-breadcrumb href="#sales">Sales</bs-breadcrumb>
+    <bs-breadcrumb href="#invoices" ?current=${!record}>Invoices</bs-breadcrumb>
+    ${record ? html `<bs-breadcrumb current>INV-2041</bs-breadcrumb>` : ''}
+  </bs-breadcrumbs>
+`;
+const status = html `<bs-chip-informative slot="status" color="error" size="sm">Overdue</bs-chip-informative>`;
+const more = html `<bs-icon-button slot="actions" variant="outlined" size="sm" aria-label="More actions" style="--bs-icon-button-icon-size-sm: var(--bs-scale-250)">${icon(ICONS.more)}</bs-icon-button>`;
+const listActions = html `
+  <bs-button slot="actions" variant="outlined" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.export)}</span>Export</bs-button>
+  <bs-button slot="actions" variant="primary" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.plus)}</span>New invoice</bs-button>
+  ${more}
+`;
+const recordActions = html `
+  <bs-button slot="actions" variant="outlined" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.mail)}</span>Send reminder</bs-button>
+  <bs-button slot="actions" variant="primary" size="sm">Register payment</bs-button>
+  ${more}
+`;
+const tabs = html `
+  <bs-tabs slot="tabs" type="bs-tab" value="overview">
+    <bs-tab value="overview" selected>Overview</bs-tab>
+    <bs-tab value="lines">Lines</bs-tab>
+    <bs-tab value="payments">Payments</bs-tab>
+    <bs-tab value="activity">Activity</bs-tab>
+    <bs-tab value="attachments">Attachments</bs-tab>
+  </bs-tabs>
+`;
+const meta = {
+    title: 'Components/bs-page-header',
+    excludeStories: /^[A-Z0-9_]+$/,
+    parameters: { layout: 'fullscreen', docs: { description: { component: componentDescription('bs-page-header') } } },
+    argTypes: {
+        heading: { control: 'text' },
+        headingLevel: { control: { type: 'number', min: 1, max: 6 } },
+        meta: { control: 'text' },
+        compact: { control: 'boolean' },
+        back: { control: 'boolean' },
+        favoritable: { control: 'boolean' },
+        favorite: { control: 'boolean' },
+        backLabel: { control: 'text' },
+        favoriteLabel: { control: 'text' },
+    },
+    args: { heading: SAMPLE.heading, headingLevel: 1, meta: SAMPLE.listMeta, compact: false, back: false, favoritable: false, favorite: false, backLabel: 'Back', favoriteLabel: 'Favourite' },
+    render: args => html `
+    <bs-page-header
+      .heading=${args.heading}
+      .headingLevel=${args.headingLevel}
+      .meta=${args.meta}
+      .compact=${args.compact}
+      .back=${args.back}
+      .favoritable=${args.favoritable}
+      .favorite=${args.favorite}
+      .backLabel=${args.backLabel}
+      .favoriteLabel=${args.favoriteLabel}
+    >
+      ${trail(false)} ${listActions}
+    </bs-page-header>
+  `,
+};
+export default meta;
+/** Type "List page": breadcrumb, title, a meta line and the page actions on the right. */
+export const ListPage = { name: 'List page' };
+/** Type "Record": back button, status chip and favourite toggle beside the title; the meta line lines up with the title. */
+export const Record = {
+    args: { back: true, favoritable: true, meta: SAMPLE.listMeta },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions}
+    </bs-page-header>
+  `,
+};
+/** Type "Record with tabs": a `bs-tabs` row under the meta line with a full-width divider below it. */
+export const RecordWithTabs = {
+    name: 'Record with tabs',
+    args: { back: true, favoritable: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions} ${tabs}
+    </bs-page-header>
+  `,
+};
+/** Type "Sticky compact": one row with an inline meta and a level 2 shadow. Scroll the box: the header stays at the top. */
+export const StickyCompact = {
+    name: 'Sticky compact',
+    args: { compact: true, back: true, meta: SAMPLE.customerMeta },
+    render: args => html `
+    <div
+      role="region"
+      aria-label="Scrollable page (sample)"
+      tabindex="0"
+      style="height: 360px; overflow: auto; scroll-padding-top: 80px; background: var(--bs-surface-base);"
+    >
+      <bs-page-header compact .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back>
+        ${status} ${recordActions}
+      </bs-page-header>
+      <div style="padding: var(--bs-spacing-300) var(--bs-spacing-200); font-family: sans-serif; color: var(--bs-text-secondary);">
+        ${Array.from({ length: 14 }, (_, i) => html `<p>Page content (sample), paragraph ${i + 1}. The compact header stays at the top while this scrolls.</p>`)}
+      </div>
+    </div>
+  `,
+};
+/** A favourited record: the star is filled and the button reports `aria-pressed="true"`. */
+export const Favourited = {
+    args: { back: true, favoritable: true, favorite: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions}
+    </bs-page-header>
+  `,
+};
+/** No actions and no status: the title block and the meta line only. */
+export const NoActions = {
+    name: 'No actions',
+    render: args => html `<bs-page-header .heading=${args.heading} .meta=${args.meta}>${trail(false)}</bs-page-header>`,
+};
+/** A long title wraps inside the title block; the status, favourite toggle and actions stay in place. */
+export const LongTitle = {
+    name: 'Long title',
+    args: {
+        back: true,
+        favoritable: true,
+        heading: 'Invoice INV-2041 for Nordlys Handel AS, delivery of seasonal goods for the autumn campaign and winter stock',
+        meta: 'Issued 3 September · due 3 October · 4 250,00 kr',
+    },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable>${trail(true)} ${status} ${recordActions}</bs-page-header>
+  `,
+};
+const PHONE_VIEWPORT = {
+    options: { phone375: { name: 'Phone (375px)', styles: { width: '375px', height: '812px' }, type: 'mobile' } },
+};
+/** The Record with tabs at 375px: actions wrap below the title, buttons are 44px tall, the tabs scroll inside their row. */
+export const Mobile = {
+    parameters: { layout: 'fullscreen', viewport: PHONE_VIEWPORT },
+    globals: { viewport: { value: 'phone375', isRotated: false } },
+    args: { back: true, favoritable: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable>${trail(true)} ${status} ${recordActions} ${tabs}</bs-page-header>
+  `,
+};
+/** Wired up: click back or the star; the last event is printed below. `bsFavoriteChange` is cancelable. */
+export const Interactive = {
+    args: { back: true, favoritable: true },
+    render: args => {
+        const wrap = document.createElement('div');
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;padding:8px 16px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Click the back arrow or the star.';
+        const ph = document.createElement('bs-page-header');
+        Object.assign(ph, { heading: args.heading, meta: args.meta, back: true, favoritable: true });
+        ph.addEventListener('bsBack', () => (out.textContent = 'bsBack'));
+        ph.addEventListener('bsFavoriteChange', e => (out.textContent = `bsFavoriteChange favorite=${e.detail.favorite}`));
+        wrap.append(ph, out);
+        return wrap;
+    },
+};

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: '8f88672d0c1402df24990f7632d4f2180627a624', "aria-label": this.navLabel }, h("ul", { key: '3b1359e867cfab58a215c521f4d46df75d3b9e0a', part: "list", class: "bs-pagination__list" }, h("li", { key: '462c761e4cd0938802ef0ede5e8fdcf072bed7dc', part: "item", class: "bs-pagination__item" }, h("button", { key: '01c0f0eeee2644def4f41aaec427bc77b0a3d948', 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: '6c4587384f3b0a6ff8431d6a6f637bdebf134707' }))), 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: 'cb2ac831de208292505cf53c7c4c1baedb639e1c', part: "item", class: "bs-pagination__item" }, h("button", { key: '3cf295a9a8457013da89db054e863f8bc9fcdf75', 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: 'ead52f0b11ae9253828f41def167536914b3ac90' }))))));
+        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: 'da517e23c7a7028088ce255b01d7e1a2e6517804', class: "bs-popover" }, h("div", { key: '6acca226b72b7c22f77e7e507c26a56d5e5d56a3', 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: '877e07422f0e85bfe3b85d0029b1df425516aaf2', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: 'f9da851d41e4bdbf6bcd41dcf2e3de7a6f2c61b6', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: 'd3dc628e79868aab472a6cd6e074e2d7d880ffb0' }))));
+        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);
+    });
+});

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