@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,345 @@
+import { h } from "@stencil/core";
+const OVERFLOW_ATTR = 'data-bs-toolbar-overflowed';
+/**
+ * A bar of related controls (buttons, toggles, selects) with a left and a right group, grouped
+ * separators, a single tab stop and arrow-key navigation between the controls (WAI-ARIA toolbar
+ * pattern). Optionally, controls that do not fit collapse into a "more" menu.
+ *
+ * Keyboard: the toolbar is ONE tab stop. Left/Right arrows (Up/Down when `orientation="vertical"`,
+ * mirrored in RTL) move focus between the controls and wrap; Home/End jump to the first/last. The
+ * control last focused is the one Tab returns to. Disabled controls are skipped.
+ *
+ * Direct children of the `left`/`right` slots are the toolbar's controls. A slotted `bs-divider` is a
+ * separator: the toolbar sets its `orientation` perpendicular to its own and skips it when navigating.
+ *
+ * ## When to use
+ * - Several related actions that act on the same content (a text editor's formatting row, a table's
+ *   bulk actions, a viewer's zoom controls).
+ *
+ * ## When not to use
+ * - Navigating between pages or sections -- use `bs-tabs`, `bs-navigation-header` or a nav.
+ * - A single action or a form's submit row -- place the `bs-button`s directly.
+ * - A menu of actions that opens on demand -- use `bs-popover` with `bs-menu`.
+ *
+ * ## Overflow
+ * With `overflow` set (horizontal only), controls from the end of the bar that do not fit are hidden and
+ * listed in a `bs-menu` behind a "more" button; choosing an entry activates the original control. An
+ * entry's text is the control's `data-label`, else its `aria-label`, else its text content, else `title`:
+ * give icon-only controls one of these.
+ *
+ * Composition: built from `bs-icon-button`, `bs-popover`, `bs-menu` and `bs-menu-item` (overflow) and
+ * expects `bs-button`, `bs-icon-button`, `bs-divider` etc. as slotted content.
+ *
+ * @slot left - The left (leading) group of controls.
+ * @slot right - The right (trailing) group of controls; pushed to the far end of the bar.
+ * @part container - The element carrying `role="toolbar"`.
+ * @part left - The wrapper around the `left` slot.
+ * @part right - The wrapper around the `right` slot.
+ * @part overflow - The overflow `bs-popover` (only rendered when `overflow` is set).
+ */
+// Note: CSS Custom Properties (--bs-toolbar-*) are documented via @prop comments in bs-toolbar.css.
+export class BsToolbar {
+    el;
+    /** Accessible name of the toolbar (`aria-label`). Required for a good experience, and essential
+     * when a page has more than one toolbar -- say what it controls ("Text formatting"). */
+    label;
+    /** Direction of the bar. Sets `aria-orientation`, switches which arrow keys navigate, and sets the
+     * orientation of slotted `bs-divider`s to the perpendicular one. */
+    orientation = 'horizontal';
+    /** Collapse controls that do not fit into a "more" menu (see Overflow in the description).
+     * Horizontal toolbars only; ignored when `orientation="vertical"`. */
+    overflow = false;
+    /** Accessible name and tooltip of the overflow button. */
+    overflowLabel = 'More actions';
+    overflowed = [];
+    activeEl;
+    resizeObserver;
+    containerEl;
+    triggerEl;
+    popoverEl;
+    componentDidLoad() {
+        this.syncItems();
+        this.observe();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    connectedCallback() {
+        // Re-attached after a disconnect (componentDidLoad only runs once).
+        if (this.containerEl)
+            this.observe();
+    }
+    onConfigChange() {
+        this.syncItems();
+        this.observe();
+    }
+    observe() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (!this.overflowActive() || typeof ResizeObserver === 'undefined' || !this.containerEl)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.syncItems());
+        this.resizeObserver.observe(this.containerEl);
+    }
+    overflowActive() {
+        return this.overflow && this.orientation === 'horizontal';
+    }
+    /** Every direct child of the two groups, in visual order (left group, then right group). */
+    children() {
+        const slots = Array.from(this.el.shadowRoot?.querySelectorAll('slot') ?? []);
+        return slots.flatMap(s => s.assignedElements({ flatten: true }));
+    }
+    isDivider(el) {
+        return el.tagName === 'BS-DIVIDER';
+    }
+    /** Controls that arrow keys can land on: not separators, not disabled, not collapsed into the menu. */
+    navigable() {
+        const items = this.children().filter(c => !this.isDivider(c) && !c.disabled && c.getAttribute('aria-disabled') !== 'true' && !c.hasAttribute(OVERFLOW_ATTR) && !c.hidden);
+        if (this.triggerEl && this.overflowed.length > 0)
+            items.push(this.triggerEl);
+        return items;
+    }
+    labelOf(el) {
+        return (el.dataset.label || el.getAttribute('aria-label') || el.textContent?.trim() || el.getAttribute('title') || '').trim();
+    }
+    /** Single pass: perpendicular dividers, overflow partitioning, roving tabindex. */
+    syncItems = () => {
+        const perpendicular = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        this.children().forEach(c => {
+            if (this.isDivider(c))
+                c.orientation = perpendicular;
+        });
+        this.updateOverflow();
+        this.syncRoving();
+    };
+    updateOverflow() {
+        const items = this.children();
+        items.forEach(c => c.removeAttribute(OVERFLOW_ATTR));
+        if (!this.overflowActive() || !this.containerEl) {
+            if (this.overflowed.length)
+                this.overflowed = [];
+            return;
+        }
+        const container = this.containerEl;
+        // Reserve room for the "more" button while measuring.
+        if (this.popoverEl)
+            this.popoverEl.hidden = false;
+        const collapsed = [];
+        for (let i = items.length - 1; i >= 0 && container.scrollWidth > container.clientWidth + 0.5; i--) {
+            items[i].setAttribute(OVERFLOW_ATTR, '');
+            if (!this.isDivider(items[i]))
+                collapsed.unshift(items[i]);
+        }
+        // Do not leave a separator dangling at the end of what is still visible.
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i].hasAttribute(OVERFLOW_ATTR))
+                continue;
+            if (this.isDivider(items[i]) && collapsed.length)
+                items[i].setAttribute(OVERFLOW_ATTR, '');
+            else
+                break;
+        }
+        if (this.popoverEl)
+            this.popoverEl.hidden = collapsed.length === 0;
+        const next = collapsed.map(el => ({ el, label: this.labelOf(el) }));
+        const same = next.length === this.overflowed.length && next.every((n, i) => n.el === this.overflowed[i].el && n.label === this.overflowed[i].label);
+        if (!same)
+            this.overflowed = next;
+    }
+    /** Roving tabindex: exactly one control is in the tab order. */
+    syncRoving() {
+        const nav = this.navigable();
+        const all = [...this.children().filter(c => !this.isDivider(c)), ...(this.triggerEl ? [this.triggerEl] : [])];
+        if (!this.activeEl || !nav.includes(this.activeEl))
+            this.activeEl = nav[0];
+        all.forEach(c => c.setAttribute('tabindex', c === this.activeEl ? '0' : '-1'));
+    }
+    componentDidRender() {
+        // The trigger/popover only exist after a render; re-sync tabindex for them.
+        this.syncRoving();
+    }
+    onFocusIn(ev) {
+        const path = ev.composedPath();
+        const hit = this.navigable().find(c => path.includes(c));
+        if (hit && hit !== this.activeEl) {
+            this.activeEl = hit;
+            this.syncRoving();
+        }
+    }
+    onKeyDown(ev) {
+        const vertical = this.orientation === 'vertical';
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        const prevKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        if (![prevKey, nextKey, 'Home', 'End'].includes(ev.key))
+            return;
+        // An open overflow menu uses its own arrow keys.
+        if (this.popoverEl?.open)
+            return;
+        const nav = this.navigable();
+        const path = ev.composedPath();
+        const current = nav.findIndex(c => path.includes(c));
+        if (current === -1)
+            return;
+        // Controls that use the arrow keys themselves (text fields, selects) keep them.
+        const origin = path[0];
+        if (origin?.matches?.('input:not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select') && ev.key !== 'Home' && ev.key !== 'End')
+            return;
+        ev.preventDefault();
+        let next = current;
+        if (ev.key === nextKey)
+            next = (current + 1) % nav.length;
+        else if (ev.key === prevKey)
+            next = (current - 1 + nav.length) % nav.length;
+        else if (ev.key === 'Home')
+            next = 0;
+        else
+            next = nav.length - 1;
+        this.activeEl = nav[next];
+        this.syncRoving();
+        nav[next].focus();
+    }
+    activate(entry) {
+        if (this.popoverEl)
+            this.popoverEl.open = false;
+        const inner = entry.el.shadowRoot?.querySelector('button, a');
+        (inner ?? entry.el).click();
+    }
+    render() {
+        const showOverflow = this.overflowActive();
+        return (h("div", { key: '93257f14c9265acd97ba79c3f0fb194ed5d6a9c1', part: "container", role: "toolbar", "aria-label": this.label, "aria-orientation": this.orientation, class: `bs-toolbar bs-toolbar--${this.orientation}`, ref: el => (this.containerEl = el) }, h("div", { key: 'c7354cad6a03fb6f2fa844a37212612111619451', part: "left", class: "bs-toolbar__group bs-toolbar__group--left" }, h("slot", { key: 'f5c27b8a5e4402c1d2e29435b9037980cac485e7', name: "left", onSlotchange: this.syncItems })), h("div", { key: '22e411c3e07a31a5227fcc4acbb6ab86d7a26969', part: "right", class: "bs-toolbar__group bs-toolbar__group--right" }, h("slot", { key: 'c5233aab6977a57022bd98cb3f439808680997db', name: "right", onSlotchange: this.syncItems })), showOverflow && (h("bs-popover", { key: '0f2e2537a2a1ec1d5617bb149a57f4ecba5b4943', part: "overflow", class: "bs-toolbar__overflow", placement: "bottom-end", hidden: this.overflowed.length === 0, ref: el => (this.popoverEl = el) }, h("bs-icon-button", { key: '5fc3dd6a5e2022a1fb6e550fd24ac5c37eab4ba0', slot: "trigger", variant: "subtle", size: "md", ariaLabel: this.overflowLabel, title: this.overflowLabel, ref: el => (this.triggerEl = el) }, h(MoreIcon, { key: '860ac10129d78cf94554c8a21a98dd02aec17372' })), h("bs-menu", { key: '29900699fb44356d6d0e3ff2b8f2bebb3c14395f' }, this.overflowed.map(entry => (h("bs-menu-item", { onBsSelect: () => this.activate(entry) }, entry.label))))))));
+    }
+    static get is() { return "bs-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the toolbar (`aria-label`). Required for a good experience, and essential\nwhen a page has more than one toolbar -- say what it controls (\"Text formatting\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsToolbarOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsToolbarOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-toolbar/bs-toolbar.tsx",
+                            "id": "src/components/bs-toolbar/bs-toolbar.tsx::BsToolbarOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of the bar. Sets `aria-orientation`, switches which arrow keys navigate, and sets the\norientation of slotted `bs-divider`s to the perpendicular one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "overflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapse controls that do not fit into a \"more\" menu (see Overflow in the description).\nHorizontal toolbars only; ignored when `orientation=\"vertical\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overflow",
+                "defaultValue": "false"
+            },
+            "overflowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name and tooltip of the overflow button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-label",
+                "defaultValue": "'More actions'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overflowed": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "overflow",
+                "methodName": "onConfigChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+const MoreIcon = () => (h("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", "aria-hidden": "true" }, h("circle", { cx: "5", cy: "12", r: "1.75" }), h("circle", { cx: "12", cy: "12", r: "1.75" }), h("circle", { cx: "19", cy: "12", r: "1.75" })));

package/dist/collection/components/bs-toolbar/bs-toolbar.stories.js

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-toolbar',
+    parameters: { docs: { description: { component: componentDescription('bs-toolbar') } } },
+    render: args => html `
+    <bs-toolbar label=${args.label} orientation=${args.orientation} ?overflow=${args.overflow} overflow-label=${args.overflowLabel}>
+      <bs-button slot="left" variant="subtle" size="sm">Bold</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm">Italic</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm">Underline</bs-button>
+      <bs-divider slot="left"></bs-divider>
+      <bs-button slot="left" variant="subtle" size="sm">Link</bs-button>
+      <bs-button slot="left" variant="subtle" size="sm" disabled>Image</bs-button>
+      <bs-button slot="right" variant="outlined" size="sm">Preview</bs-button>
+      <bs-button slot="right" size="sm">Publish</bs-button>
+    </bs-toolbar>
+  `,
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-toolbar', 'label') },
+        orientation: { control: 'select', options: ['horizontal', 'vertical'], description: propDescription('bs-toolbar', 'orientation') },
+        overflow: { control: 'boolean', description: propDescription('bs-toolbar', 'overflow') },
+        overflowLabel: { control: 'text', description: propDescription('bs-toolbar', 'overflowLabel') },
+    },
+    args: { label: 'Text formatting', orientation: 'horizontal', overflow: false, overflowLabel: 'More actions' },
+};
+export default meta;
+export const Default = {};
+export const Vertical = {
+    args: { orientation: 'vertical' },
+};
+export const WithOverflow = {
+    name: 'With overflow',
+    args: { overflow: true },
+    render: args => html `
+    <p>Resize the frame: controls that do not fit move into the "more" menu.</p>
+    <div style="width: 360px; resize: horizontal; overflow: hidden; border: 1px dashed var(--bs-border-default); padding: 4px;">
+      <bs-toolbar label=${args.label} ?overflow=${args.overflow} overflow-label=${args.overflowLabel}>
+        <bs-button slot="left" variant="subtle" size="sm">Bold</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Italic</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Underline</bs-button>
+        <bs-divider slot="left"></bs-divider>
+        <bs-button slot="left" variant="subtle" size="sm">Link</bs-button>
+        <bs-button slot="left" variant="subtle" size="sm">Image</bs-button>
+        <bs-button slot="right" variant="subtle" size="sm">Preview</bs-button>
+        <bs-button slot="right" variant="subtle" size="sm">Share</bs-button>
+      </bs-toolbar>
+    </div>
+  `,
+};

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '924b224f9594aca557bc767d61cb8e1b6fd8c6d5', class: "bs-tooltip" }, h("span", { key: 'c97417a9d17c35e0b100f5e2c2f548abbfc23338', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '498e53eaed40ea87de2cf30d5dbe4359d24e8506', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '268d910b87e4d7b67f9288bdd16d26bfc468d9da' }))));
+        return (h("div", { key: '7438b2bc709f2d62040070103f75a4dd0e726114', class: "bs-tooltip" }, h("span", { key: 'cd88ccd274ee0350e98ea445389fcd84ab7d02dc', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'c3729dae5e62fd114a16f6ab4fa4022d85b7fc7b', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '37b8b395d40fb5736780013d968be1ff5ce428fc' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tooltip-trigger/bs-tooltip-trigger.cmp.test.js

@@ -10,7 +10,7 @@ describe('bs-tooltip-trigger', () => {
         expect(tip(root).querySelector('bs-tooltip')).toHaveTextContent('Hint');
     });
     it('shows on mouseenter and hides on mouseleave', async () => {
-        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint" }, h("button", null, "Go")));
+        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint", style: { '--bs-tooltip-trigger-duration': '0ms' } }, h("button", null, "Go")));
         wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
         await waitForChanges();
         expect(tip(root).hasAttribute('hidden')).toBe(false);
@@ -19,7 +19,7 @@ describe('bs-tooltip-trigger', () => {
         expect(tip(root).hasAttribute('hidden')).toBe(true);
     });
     it('shows on focus and dismisses with Escape', async () => {
-        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint" }, h("button", null, "Go")));
+        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint", style: { '--bs-tooltip-trigger-duration': '0ms' } }, h("button", null, "Go")));
         wrap(root).dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
         await waitForChanges();
         expect(tip(root).hasAttribute('hidden')).toBe(false);
@@ -70,4 +70,55 @@ describe('bs-tooltip-trigger', () => {
                 expect(t.left).toBeGreaterThanOrEqual(w.right);
         });
     }
+    describe('show/hide motion', () => {
+        const wait = (ms) => new Promise(r => setTimeout(r, ms));
+        const bubble = (root) => tip(root).querySelector('bs-tooltip');
+        const make = (duration, placement = 'bottom') => render(h("bs-tooltip-trigger", { text: "Hint", placement: placement, style: { '--bs-tooltip-trigger-duration': duration } }, h("button", null, "Go")));
+        it('fades in over the configured duration', async () => {
+            const { root, waitForChanges } = await make('150ms');
+            wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            const anims = bubble(root).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+        });
+        it('stays shown while it fades out, then hides', async () => {
+            const { root, waitForChanges } = await make('150ms');
+            wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            await wait(250);
+            wrap(root).dispatchEvent(new MouseEvent('mouseleave'));
+            await waitForChanges();
+            expect(tip(root).hasAttribute('hidden')).toBe(false);
+            const anims = bubble(root).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+            await wait(400);
+            await waitForChanges();
+            expect(tip(root).hasAttribute('hidden')).toBe(true);
+        });
+        it('cancels the exit when the pointer comes back', async () => {
+            const { root, waitForChanges } = await make('300ms');
+            wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            await wait(400);
+            wrap(root).dispatchEvent(new MouseEvent('mouseleave'));
+            await waitForChanges();
+            wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            await wait(500);
+            await waitForChanges();
+            expect(tip(root).hasAttribute('hidden')).toBe(false);
+        });
+        it('runs no animation and hides at once when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await make('0ms');
+            wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            expect(bubble(root).getAnimations().length).toBe(0);
+            wrap(root).dispatchEvent(new MouseEvent('mouseleave'));
+            await waitForChanges();
+            expect(bubble(root).getAnimations().length).toBe(0);
+            expect(tip(root).hasAttribute('hidden')).toBe(true);
+        });
+    });
 });

package/dist/collection/components/bs-tooltip-trigger/bs-tooltip-trigger.css

@@ -2,6 +2,9 @@
   display: inline-block;
   --bs-tooltip-trigger-offset: var(--bs-spacing-100);
   --bs-tooltip-trigger-z-index: var(--bs-z-index-popover);
+  --bs-tooltip-trigger-duration: var(--bs-duration-fast);
+  --bs-tooltip-trigger-easing: var(--bs-easing-standard);
+  --bs-tooltip-trigger-distance: var(--bs-spacing-50);
 }
 
 .bs-tooltip-trigger {

package/dist/collection/components/bs-tooltip-trigger/bs-tooltip-trigger.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let tooltipTriggerId = 0;
 /**
  * Wraps a trigger element and shows a `bs-tooltip` on hover or keyboard focus, after an optional
@@ -17,8 +18,15 @@ let tooltipTriggerId = 0;
  * @part tooltip - The positioned tooltip wrapper (role="tooltip").
  * @prop --bs-tooltip-trigger-offset - Gap between trigger and tooltip. Aliased to `--bs-spacing-100`.
  * @prop --bs-tooltip-trigger-z-index - Stacking order. Aliased to `--bs-z-index-popover`.
+ * @prop --bs-tooltip-trigger-duration - Length of the show/hide motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-tooltip-trigger-easing - Curve of the show/hide motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-tooltip-trigger-distance - How far the tooltip nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The tooltip fades in while drifting a few pixels away from the trigger into place, and fades back out toward it. Under
+ * `prefers-reduced-motion: reduce` (or a duration of `0ms`) it appears and disappears instantly.
  */
 export class BsTooltipTrigger {
+    el;
     /** Tooltip message. */
     text = '';
     /** Milliseconds to wait before showing the tooltip. */
@@ -26,6 +34,57 @@ export class BsTooltipTrigger {
     /** Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'. */
     placement = 'bottom';
     visible = false;
+    /** True while the exit motion plays after `visible` went false, so the tooltip stays shown for it. */
+    closing = false;
+    bubbleEl;
+    tipEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onVisibleChange(next) {
+        this.motionRun++;
+        cancelMotion(this.bubbleEl);
+        this.closing = false;
+        if (next) {
+            this.enterPending = true;
+        }
+        else if (this.text && this.tipEl && !this.tipEl.hidden && readMotion(this.el, 'bs-tooltip-trigger').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    /** The tooltip drifts away from the trigger it hangs off: below it drops from above, above it rises from below, and so on. */
+    offset(distance) {
+        switch (this.placement) {
+            case 'top':
+                return `translateY(${distance}px)`;
+            case 'start':
+                return `translateX(${distance}px)`;
+            case 'end':
+                return `translateX(${-distance}px)`;
+            default:
+                return `translateY(${-distance}px)`;
+        }
+    }
+    componentDidRender() {
+        if (this.exitPending) {
+            this.exitPending = false;
+            if (this.closing && !this.visible) {
+                const { ms, easing, distance } = readMotion(this.el, 'bs-tooltip-trigger');
+                const run = ++this.motionRun;
+                play(this.bubbleEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: this.offset(distance) }], 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-tooltip-trigger');
+            if (ms > 0 && this.visible)
+                play(this.bubbleEl, [{ opacity: 0, transform: this.offset(distance) }, { opacity: 1, transform: 'none' }], ms, easing);
+        }
+    }
     tooltipId = `bs-tooltip-trigger-${++tooltipTriggerId}`;
     timer;
     disconnectedCallback() {
@@ -47,8 +106,8 @@ export class BsTooltipTrigger {
             this.hide();
     };
     render() {
-        const show = this.visible && !!this.text;
-        return (h("div", { key: '24d2d838ba7e3ff7c7ea29da91548a2217fd78fa', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: 'b911c44e690a3e4dcf64ab7dc78bf18a2f39c8d4' }), h("div", { key: '3a8533fe8853c39f51f1808400b3e6bdf91e2576', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: 'b0ab6217c11a8839c0b4fe7762ae33b0d9dc1e1a' }, this.text))));
+        const show = (this.visible && !!this.text) || (this.closing && !!this.text);
+        return (h("div", { key: '0c851c6c284a63da84ff11fd411764c705513245', part: "trigger", class: "bs-tooltip-trigger", "aria-describedby": this.tooltipId, onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide, onKeyDown: this.onKeyDown }, h("slot", { key: '3653d362eafdd977e8b9d250d1852195e7ba270f' }), h("div", { key: '64619b9d59eb00b3e453d6bb924ad982a7e2bec6', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: 'a160e7016cf49323d410dc10930d6994e8f41c3f', ref: el => (this.bubbleEl = el) }, this.text))));
     }
     static get is() { return "bs-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +193,15 @@ export class BsTooltipTrigger {
     }
     static get states() {
         return {
-            "visible": {}
+            "visible": {},
+            "closing": {}
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "onVisibleChange"
+            }];
+    }
 }

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

@@ -189,7 +189,7 @@ export class BsTree {
         e.preventDefault();
     }
     render() {
-        return (h("div", { key: '586069268f0b5e3a8a855bf1ee67584460c8e8b6', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'd78f0e9a2ec38295bbddc42fb12d27e874ff0ebf' })));
+        return (h("div", { key: '019cf7e2aaefd8b3f51c40ea0570fa9b89b5e649', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'ffe3e5e88c82965542974fa1433c43310d197c66' })));
     }
     static get is() { return "bs-tree"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,6 +63,8 @@
 }
 
 .bs-tree-item__container {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   flex: 1;
   min-width: 0;

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

@@ -21,6 +21,7 @@ import { Host, h } from "@stencil/core";
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
  * @part group - The `role="group"` wrapper around the child items (while expanded).
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsTreeItem {
     el;
@@ -92,11 +93,11 @@ export class BsTreeItem {
         const isParent = this.hasChildren;
         const managed = !!this.el.closest('bs-tree');
         const showChildren = isParent && this.expanded;
-        return (h(Host, { key: '4e4e36591f3757bf89b769b79cd09096d557a961', role: "treeitem", "aria-level": String(this.level), "aria-expanded": isParent ? String(this.expanded) : null, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : null, ...(managed || this.disabled ? {} : { tabindex: '0' }) }, h("div", { key: 'd6eadb88384d6c463937033e48fe301717dd9f3e', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: '66da380c06c54b824ac3a447044894c22428edf8', part: "container", class: {
+        return (h(Host, { key: '6f3c66ebc9521308d5d62c2bf99686aa9a6b81bf', role: "treeitem", "aria-level": String(this.level), "aria-expanded": isParent ? String(this.expanded) : null, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : null, ...(managed || this.disabled ? {} : { tabindex: '0' }) }, h("div", { key: '8e12e8462f1a44affa4497aea0e9a0479b803856', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: 'f741901613fc37b68543bdd9653fee29e4f796fc', part: "container", class: {
                 'bs-tree-item__container': true,
                 'bs-tree-item__container--selected': this.selected,
                 'bs-tree-item__container--disabled': this.disabled,
-            }, onClick: this.onRowClick }, isParent && (h("span", { key: '6600cfd9aa01bf0f0a3f0458e661e8be30f9e649', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: 'c0eecda85015fa0c2dc4e8c2f0b4561fdd037305' }))), h("span", { key: '83bc2d33e7f7f34a1ee682bfb93a633b65257842', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '06411b06381b28c86d0332f7ec51a58b868e2ace', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: '5762de30314db63f9c262bbb84af36ea3605a8d6', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '7576371cfccb855e4fb57ced1c63c241833e4ec3', part: "label", class: "bs-tree-item__label" }, h("slot", { key: '4459a19608ca7d7f98fa7b84a9e1cb08573176ff', name: "label" }, this.label))))), showChildren && (h("div", { key: 'c7d2b82efbd0622845b95fae4e04608e13bd685d', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: '3edd6e523532400ec89928284bc73146a1bdf391' })))));
+            }, onClick: this.onRowClick }, !this.disabled && h("bs-ripple", { key: 'ecf50e0d6aa5301e1d20c35315472df2350c7096', part: "ripple" }), isParent && (h("span", { key: 'd74db0427a8aabf2af0ea5bd43eaefd7945e014f', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '2f4e12fe239b2527406204e0e3a7f41648dfa4d5' }))), h("span", { key: '4da3bb534d15625c414df6997b7dc7a290b66a29', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '17031fb35aabc2e10d030c4434a4e6134d87a76a', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: 'a8893678e82949127398b93cbfd0ab5e6bd83a2c', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: 'ff63bf09058f4e09bde9adcccdc57a0a6b9ffa37', part: "label", class: "bs-tree-item__label" }, h("slot", { key: '556b43ed85f0996034a0ca8b214cca6cc619ed26', name: "label" }, this.label))))), showChildren && (h("div", { key: 'd4d5ffa0b6b9697dd39cc89bb15a752647abb0b6', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'eaec9a53f467af86637e040358bf75eff76dd139' })))));
     }
     static get is() { return "bs-tree-item"; }
     static get encapsulation() { return "shadow"; }