@brandsync/wc 1.17.0 → 1.19.0

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

@@ -15,6 +15,7 @@ import { h } from "@stencil/core";
  * @part track - The visual pill-shaped track.
  * @part knob - The sliding circular knob.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties are documented via @prop comments in
 // bs-switch.css, not here.
@@ -64,18 +65,11 @@ export class BsSwitch {
         this.bsChange.emit(checked);
     };
     render() {
-        const trackClasses = [
-            'bs-switch__track',
-            `bs-switch__track--${this.size}`,
-            this.checked ? 'bs-switch__track--checked' : '',
-            this.disabled ? 'bs-switch__track--disabled' : '',
-        ]
+        const trackClasses = ['bs-switch__track', `bs-switch__track--${this.size}`, this.checked ? 'bs-switch__track--checked' : '', this.disabled ? 'bs-switch__track--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
-            .filter(Boolean)
-            .join(' ');
-        return (h("label", { key: '49f1cfc9d185ab00f7186dc032b791a23ca26f70', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8c20d342f636a06e7506008c00b612746e5c5698', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'd1fcfa9efbe5a3bffe23c597770b330622729a62', part: "track", class: trackClasses }, h("span", { key: '54d63b56c139c5b67bff4a61496914b641e498c3', part: "knob", class: knobClasses })), h("span", { key: 'd4ddc5b7e7ca13c74f4693f645fbe375447fe86b', part: "label", class: "bs-switch__label" }, h("slot", { key: '866fd38ac545d1ad19494b267594d7e4aab4b0b1' }))));
+        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : ''].filter(Boolean).join(' ');
+        return (h("label", { key: 'a4fe8b335679d3a8c4cebc519988e9ba65440dda', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'bf619000f211f5aecda3f6c5da4e05a11e9b135e', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '7f596412be6ae523cb3a41e5672d0a11552f77ba', part: "track", class: trackClasses }, h("span", { key: 'e9ff90d5719c1a3f98564b79a93e0c4d8fe82932', part: "knob", class: knobClasses }, h("bs-ripple", { key: 'bef6b2607487617f53d37ece4f48ae09792564d1', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: '703eb9020f0ee4f887a0b50ef0d711ee34abf1d5', part: "label", class: "bs-switch__label" }, h("slot", { key: '91b178c4820f52eda9414b3ba0763c4fb1192015' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.css

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

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -29,6 +29,7 @@ import { h } from "@stencil/core";
  * @part tab - The button element.
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop
 // comments in bs-inline-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS
@@ -94,7 +95,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'ec19773b2ad2363cb5f6dc1f3f845db3755c3d13', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '561fa96dd2f01fe03b1bdb30675be98aec9e33ef', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'c1f0d97a04e41fccd22fb412b3019fd0d63b0cc6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '07f4873273ef9e91c472344bbdf97b6915d4b14f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '3bc180fa828034358155abd397aa68661f09fcf3', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '8dc1570ed12bc71fd69e9fee3fe1159006785b52', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'd7548736d118b53c5b0e3fa36af2e3ff8c7a6b5f', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'd5f1355d7b9fe756edc2a503bf32c9feafcb3ffc', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'ed0d0de3d21804e233b0593b96aebb9bbd07ac80', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6ab027e86d0d3d1c47e3e22bb53e7f846b32031c', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '90b51e5ead7fb092ee1ee2f81b68709550b00b32', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,6 +31,7 @@ import { h } from "@stencil/core";
  * @part label - The label wrapper.
  * @part badge - The badge wrapper.
  * @part indicator - The selection/hover underline indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in
 // bs-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not
@@ -107,7 +108,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '9041f39829dd71f2dd2d54a5c2e8329f6fe8e11a', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: 'a57aec34d30bcaf112aa7f5d4530a4d64f2101a7', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'a60bd8b1c3b46de2ce9c33ba4f667bc815badcf6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd64146a811bbec39d7a9abe85446340b6d2d8988', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'eb7a7f6d6999e6b0e8677fbb6e87ccba699f3977', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'f281adb319e2653ebd2e4ef770750aafa30a9a82', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'fd72ae0865d4cd6cecc8ace8a8da056574f71d3b', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '4a278ac85059a94677816b87df1ff343da5c5f65', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '429e88b9d5240c88eccd55d73f1fd13dd918931c', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'f652c878d5ce6401b848977600648a9d17abd075', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'bf04470844364ec3600b1aa1ad933d4b11c7e0be', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '8eded138d47876050c0fd4051b8d602a1d60d107', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '4e8d274150281ad1c770b903bec1f92b1ec1da44', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'ff20a9b4917fdf7552f152d9bc89a28ca1391adc', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'ea55bb9b1bb8566125285b3621cd28f52d62ad9e', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'd3871776604036d6d0889f30edd566e2ed5c5339', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '610cb54103452951824c47da54d6ad32602ec66d', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -135,7 +135,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'eb523e0109735c416498c91955787b00c0d5402d', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '506c2e41eb12e830793431ec474d1ec286a12016', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'a2aea116ff595f33d3d29bc37920f5596458f3d4', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '16d36488b01cda28a2214152b2cbd76b0d8c045a', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: 'b10beb8dd035f96558d0cc1c62d8a9a852372e76', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b75d31cab0ab45200526e32a4fd80ec4bbd0b93f', class: "bs-timepicker__body" }, h("div", { key: 'c76189d083c5e6294fdc3eb1584af65926a27b91', part: "header", class: "bs-timepicker__header" }, h("div", { key: 'd45ff2bd2e9f0057d2fce6235ecec2bc0e2a3904', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '316576f63687c47440950845933e6236bec58c32', class: "bs-timepicker__format" }, h("span", { key: 'cc5785121a7437e85589e96499744ff963b99566' }, this.formatLabel), h("bs-switch", { key: 'b0b9fd4459092130c4f57a33a7ff3c3cfd8f8b96', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '8c14c3d42847b567d2abe2a476f9437a20f908c6', class: "bs-timepicker__divider" }), h("div", { key: '24368cea251d0075d4a5c6df2968ff68fc7def5d', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: 'f5ac1c36851ccf6af8ff21c929177e91a04d1a32', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '0c6a2dc94536c5111c0e8587750b21f843a04861', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '2d31480fbd0194ee9d6c9e60b25975654ad9952b', cx: "2", cy: "10", r: "2" }), h("circle", { key: '193b270a5c49634359a3fe93729ed3723177ca49', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '2fd70fb4b969a3c078a673df95315e32ee5e9612', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: 'b1fee3176c728113e01b14515e910f7026b2c40e', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '29246aa5712a7f1e391338a579f3d7660a7a8b66', class: "bs-timepicker__body" }, h("div", { key: '0ccbf049e87278cc973262f45025843eccc4e050', part: "header", class: "bs-timepicker__header" }, h("div", { key: 'e039bff5a90391b009739a2747255dfa21961394', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '7f7be2239e319dc2052891a8199bc1d0cc9bb516', class: "bs-timepicker__format" }, h("span", { key: 'a9acefb7f828b6740df0ef4f8c29c9f12c951f91' }, this.formatLabel), h("bs-switch", { key: '4a0ed6ac9b476ac690897f5fc97461a2ba1d9187', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '615e0947d07879b5096520f6a6131b5d7126bd5a', class: "bs-timepicker__divider" }), h("div", { key: 'bec825c705ecb1dcf49527df3ffda30f06815f8d', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: 'b1afee8b925ce49e44e6d2389ac03697b108dbc4', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'a716d2643c7a0ea095380283f535f5cd44a77ba9', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'f271946fadd8f8f8e3086c731af9501461e6ef26', cx: "2", cy: "10", r: "2" }), h("circle", { key: 'e661d9d6b96598430853eefca97bccf6138c00b8', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: 'be80bc06f68362e85510a9450d693483e9bb2d3c', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: 'a49af89bf97bd9127917a37d65f192b023b7535f', class: "bs-timepicker__divider" }), h("div", { key: '67c33e73ebff80a943a78d455d0325a905839d4a', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '4307ff06608b43825fb3618bad115f6ff0249ec9', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '336fbe75a702f49a8640bd4be98826910f2e1a1f', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'e3f5ed344ef98046ea70b97aee10ac63f8fb631a', class: "bs-timepicker__divider" }), h("div", { key: '8b8b51a4e2f105a87031a20c4f468547c5785f08', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'cfe71e9a9aac09fd0be9535bbbbaf230f9d84a6a', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '2c5ad6714d50a248641c0de155c14dcee3857f1e', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '962b8e77c2a88c3454e5979e133a0afabdc0647d', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'b8412715dc7f6c5562ca4405cfcf032885ed34fb', class: "bs-toast__content" }, h("span", { key: '7cb72a3a3a8338b272b6bd55d31c4524fcc1cb95', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '1497ae74f4214bb0b604da2fe3027d195c025af0', state: this.state })), h("span", { key: 'b6a425877af268bc3625c4fe8904fd278e85652a', part: "message", class: "bs-toast__message" }, h("slot", { key: 'ff37e67ce2652237f85f10a7a8e2596f348d2e67' }))), h("div", { key: '375891513e9d63651f88d9c943ec177ab359cdf6', class: "bs-toast__actions" }, h("button", { key: 'f19133e7fece3fe4ef7bf9477483110183e511cb', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '9379d93d62c959a607ee30c35d999a997da39b72' })))));
+        return (h("div", { key: 'ea3ed372472902ee9cf1e141906dec39991a6ac5', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'b5cd7562bf23e9b62101d6c6fbd7d0c4c34263ef', class: "bs-toast__content" }, h("span", { key: '3f8503c548a6d25eb2322d0df601c7a32047285c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '455b38877ab4e0d48a5ff02f17eb6e8f248c52ce', state: this.state })), h("span", { key: '1f2f0013b4171170d5739ad614711f8a91f35fa7', part: "message", class: "bs-toast__message" }, h("slot", { key: '1298f3d0fbb25843418b8e730d3ed84264e86759' }))), h("div", { key: 'b6c64714995f907901e78ed3c99bc03bbdaee468', class: "bs-toast__actions" }, h("button", { key: '5d92217352987cdd55b4ce5c7f49d7f44c766fe8', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: 'cb983078424ad5b520dffeda81d8bcafd1b9cf2b' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '4d7f71a8f113cf7d7ddca55936612df27557141f', class: "bs-tooltip" }, h("span", { key: 'e9dcb1f16b34377edbc52f8cbf2bae0c431680e0', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'c8fe41efa7ea8d43cbec1e832562f67f06eecc19', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'cbc53c4425dd8aafa4fb4ebc4381f17bc622222c' }))));
+        return (h("div", { key: 'c2d5db93c82893e1fda6baab1b3d238cb18a258c', class: "bs-tooltip" }, h("span", { key: '028716108a7e548e8e5747cb36349f386d279380', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '09d56d5c90014d5bfe752de30fbe50f02a63343c', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '473eb298bd6b402555d0b42922dbf9ee1384785e' }))));
     }
     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: '6e7f5e9019ed6184d1981e71a47e056d9c00b92a', 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: '4ed822a023c8b5f8c74f21f1e4f962e701a89517' }), h("div", { key: '2246032cca29561ded2e48ff26272b88ed4b4a40', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '40347ad8cd72910b16c9bf2cbd5f15c2a1688f0d' }, this.text))));
+        const show = (this.visible && !!this.text) || (this.closing && !!this.text);
+        return (h("div", { key: '06db867226380b3fcee2542a04b9697426a0107f', 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: '7f86ca80968a51df576aafb577457bcbbd4c4a6a' }), h("div", { key: '6d5c5600ea220ca7b6189f05a83b93fce16584cb', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show, ref: el => (this.tipEl = el) }, h("bs-tooltip", { key: 'feb9d57972b2d8e7e21846b0cf39a532b0004f9b', 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: 'fb73a8063a6a5b82df89fe43fe8e2101f676ef1b', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'b72a24a057489b00bfc0966ff98328a174f54a14' })));
+        return (h("div", { key: '7d6223a9fa7bf6b434d3051a4a48e88c4006d907', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: '0cd83d4fe6acfda0d4c4ab789af4b2f5fc1c12d7' })));
     }
     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: 'ec3feab142de28ddd1e474d1bbb0b338b4350a8c', 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: '711521ffa3cd3f46a90ef102d0e552992bcbb495', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: 'd72150c1b891962f1a5228d4e4ee85822bb20b3e', part: "container", class: {
+        return (h(Host, { key: '12205542fd8cd7558c9fb3e421c92c06d1809e40', 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: '11d9fe5a0ed281f9ad898bf5221dd00f22e2701d', class: "bs-tree-item__row", style: { '--bs-tree-item-level': String(this.level) } }, h("div", { key: '4ffe7bf7fb24d06fdcde825b9b72370538543854', 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: 'f788c92178c2f8ddb4aae5472f0625073b043811', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '18d5ef1a4dd6aa4d1095c9239952171bdbe917c9' }))), h("span", { key: '7f78d1c1fd7e6ac20bb0780c454b47ac09ee9fcb', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '98f4d7812c832edb394ac26ba707d12761a45b7e', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: '5a9d10638edf2b1c269c3df5d08f82f5fe2795f6', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '5e7e2ffbbb9a81b25b6eadf08d4db3e55cbbd919', part: "label", class: "bs-tree-item__label" }, h("slot", { key: 'bd5f92d093ebcc75b0d7f683f0e234e5757c06d0', name: "label" }, this.label))))), showChildren && (h("div", { key: '605a2bfdf479903c96750bd11d2e99044b38bc5c', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'ee652e9cc80780f30eec5f18a9d5a7e27e9f2395' })))));
+            }, onClick: this.onRowClick }, !this.disabled && h("bs-ripple", { key: '3469a524f59373948dafd9b16bb7eedf1a6f1000', part: "ripple" }), isParent && (h("span", { key: 'd4365c571e5fd5388debcc09e92d4c7fc5bfbe6c', part: "caret", class: { 'bs-tree-item__caret': true, 'bs-tree-item__caret--open': this.expanded }, "aria-hidden": "true", onClick: this.onCaretClick }, h(CaretRightIcon, { key: '1f68d7131a8e9e24bdca9d42c82c1af9af8bb09d' }))), h("span", { key: 'f525e26ee5ff9a0ca603e5e96ae7156da97f0fa0', class: "bs-tree-item__content" }, this.showIcon && (h("span", { key: '81a0810e006cf932cbfc141b87673f7602f19727', part: "icon", class: "bs-tree-item__icon", "aria-hidden": "true" }, h("slot", { key: 'f51ed15e89cbaa18f0f6e70e62f050399d6b339a', name: "icon" }, isParent ? h(FolderIcon, null) : h(FileIcon, null)))), h("span", { key: '181ccdf186bc1d0138094fb689366881301c1960', part: "label", class: "bs-tree-item__label" }, h("slot", { key: 'cc449375c076dc296a1c5047d7aa0d4b27cdc592', name: "label" }, this.label))))), showChildren && (h("div", { key: '535958746bc51e1efde29862f54413b2c9e6b51d', part: "group", class: "bs-tree-item__group", role: "group" }, h("slot", { key: 'f0fc63938c90ea7ebb620db8f2abdf5eedb7f2d1' })))));
     }
     static get is() { return "bs-tree-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.js

@@ -50,7 +50,7 @@ export class BsWhatsNewEntry {
     hasImage = false;
     render() {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 3));
-        return (h("div", { key: 'ba59c32f90076f9faba57d1d1424c31af93ad240', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: '9a6440e38742503ec18082d4dbefab9869595865', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: 'bf497ffc620943d72c51439c39301cdf96a03720', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '8e854f17bcb076e301d2cb0a16427be230a994b6', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '2569be36e5869d3c29dc7a233930f99e82776f35', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'f833cdf102d376ecc296fb636ce24493dc0715ba', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '17773eb42eb20a1dc729c7026b8b80735092ad2a', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: 'b217d2bfa06a46f53416cbdef847edb2475e54b2', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '8c7a4695302ac3b66c9f4365242c690ada0859a9', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '098bab050181c7cbce9353e86b31d8d5fc71bc37', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'a455f4ce7519409bead2de900d20a4e8c0cff87f', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: 'af8d18c4893ac8048c1646d9d44cdd0ad7bcc3cc', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'aa1c74a5a7786032205569c58ffd5f46eae3efa6', d: "M5 12H19" }), h("path", { key: '38c809d94d7b789cbc2eb7b65408c878c82d1c43', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: 'dd61984417895380ec5b80b3b03b329bcae068ec', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: '94bd61474a16e5bb5f139017903ccd2c7a00a29e', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'f19308efc7626e97d1f3b6200cc619f1c6cfef53', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: 'f296dc3fe97ec2c88e56f08a4aa599326d8ab31f', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '2182add62fff635204bc82fc7244a0c9e86f402c', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: 'd0d7fe472b04e36cebfce769b41b0ec0a03c1189', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'f0cecdf0217e1d37de21391aaed2ec9f8e84e2db', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: 'a91c74c0749d4c3e8753f0ae099db3527b4708bf', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '27df8b523ae98ba0ae50bd351b71d33d33fcec79', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '0569d8579c03f7acabc42735c7698692cc8e0f7c', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: 'b3044456157b53439ca1c1cb48974ec300a938de', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'd57c182eb2a655c1dbff70c97f5aa98327dbb03e', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '106945e585e6b38071a0041aa9ab56b48d47a517', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'b5a1586a5a2e2831191082d1818971d8c29a54b3', d: "M5 12H19" }), h("path", { key: '273362647cd1098d2d865c9249b3f416d924c54f', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '29d89b64905a1e0bde5e43540602134fb972cc6a', part: "divider", class: "bs-whats-new-entry__divider" })));
     }
     static get is() { return "bs-whats-new-entry"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -234,11 +234,11 @@ export class BsNavigationDrawer {
     };
     render() {
         const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
-        return (h(Host, { key: 'a99687c2e283dd7214da7c679895b4107866575d', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: '481a1aa4bb2de83774618492feab43ff8d3489eb', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: '789650b9923a97a1c1d3d75e7d51d2fa4e20c880', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (h(Host, { key: '49c52b23f8cd7ded807c916a3d9ca7baae3f10ba', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'b852ee92942a375d441320a95c1bd11a07754624', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'f5e2aa57f8757f2fbd8dd305aac40504e90fec3f', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
             // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
             // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
             // scrimmed, Escape closes -- rather than announced through aria-modal.
-            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '04ca8b13c5f7b81db8a12037e6d4d8b1fea705a0', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'e611e23d4f13523917b84cb88af726ad33e02be7', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'f377511b1a52cbeef534d081ec916c3c90dc91e7', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '7aa4cc0e092f5e5fb8a00f28731e7518fdd5bca3', variant: "mark", background: this.logoBackground }))), h("div", { key: '72ca104a6ce1613addbf5a416942bfcee2f59352', class: "bs-navigation-drawer__title-row" }, h("span", { key: '2f0ff9abb324762dd38775482de3d6d2e953e452', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '0e6956a9f29a8a481a51527b3db5da790940b59c', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'bfbcc299cb91987f531e0188d0b2bf068bc36d62' })))), h("div", { key: '2b719ad1dc761ff6bd9f182151f9bb8c0cb9228f', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '8c02fd031b1ce2bd38f709e640900489a7dde3c9', name: "search" })), h("button", { key: '070ec9a6e1892f1f903cbfa555e927db371e1166', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'a933a7d7615ad5d8be9cc11a98f835d1bc220f1e' })), h("div", { key: '5ab908c14933442dda5c11d159276d98a721edef', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'ffa0d44d5d18821ae4199aa38cfbb563806fea54' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '505457c0e4ef405aae32ede16e34195996d46a2f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '7f18718b910241ce69d796853b0abdf451a89ac6', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '05d02bf25de16dcb7c02b71c385277eafef9ac28', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '63f77b0363d7d262ac87c482e2aa48aee1edc612', variant: "mark", background: this.logoBackground }))), h("div", { key: 'db96e7dc889e58231b1112b9badd7e282c9a6d07', class: "bs-navigation-drawer__title-row" }, h("span", { key: '8d8f37baf13a92325dd1f2912831a5fffcbe2ac8', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '2f8cfcec017a5f4af5963367c0331b09ee6dd5e4', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '6e6e1d837f20f6837fe2b77cfd7f0c873747e7de' })))), h("div", { key: '3b758c225881964df28f99c6fe477260df86eed6', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'cbb3553aa7b80985b58494395a3595fff0fb868d', name: "search" })), h("button", { key: '4661d0113e00a3dbf5e6d06609bd563d7cac9800', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '6ff77355d5132b608056e8ca7188a37962d6e1e4' })), h("div", { key: '369e4c1c9a17cddf4954b3d666c6c55335bc7876', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '56a50dc4c123db7cb2efa15c39cc6f49e819ee3f' })))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js

@@ -131,7 +131,7 @@ export class BsNavigationDrawerItem {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: 'f10fc5a19900625f99f9bd982825c50cf2197c0a', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'fbc480d7b4b1737ae36b1a573a42c87bf6c23111', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '23f08e194c7fb599cfea429d7f46129668f7cad4', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'c4e2e9147212a9220208bb51e9dd8ddcb16b75d0', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '230567543ee35b7578f942b87226cf7acc9175fc', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '5d7aebda3ca725a2b64585bf9ad89ec88cd71a65' })), this.expandable && (h("span", { key: '1e10ca3a3c3d3237f25cc7a46b65b9f980564899', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '0885df5c87838808f51ae1adbcf10d9515961922' })))), this.expandable && (h("span", { key: '85527320ae9041c8a1ef1163a037a28ac1f92649', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '9a9dfe8dba053b15e8ec2fc47c1fcf04c5bb31be', name: "children" })))));
+        return (h("div", { key: 'd9db10cc12e5bb94ef9d4ee56717e05dfb6c81d5', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'a8e08b999c594e581cf7bc2f9dd50b63dd6fd5b7', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '6f57eb21aade5519a8235c9e90c32a700eaef7a4', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '26028625770be92dc2761cf596b2bc4a4d0bfb57', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '1cbdceae85fe3260092c893131ad3b326d487220', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '1ebf7621f785f2c74a35ef74c4f636d5a38825c1' })), this.expandable && (h("span", { key: 'fbbad51caf5dbe3e16e4441ccc5c491c84d96d16', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '2d70a545c6dba957f610448bec41073b686ce393' })))), this.expandable && (h("span", { key: '59d66b9003e99d048a755200ce29bbae7baa37d1', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '46409b5c795e13a3f49bd9c034c2ebc20a27ecf2', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.cmp.test.js

@@ -1,5 +1,6 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
 import { page } from "vitest/browser";
+import axe from "axe-core";
 describe('bs-navigation-header', () => {
     it('renders a <header> landmark with the logo by default', async () => {
         const { root } = await render(h("bs-navigation-header", null));
@@ -143,3 +144,81 @@ describe('bs-navigation-header: width and small screens', () => {
         });
     });
 });
+describe('bs-navigation-header: menu slot', () => {
+    it('renders the slotted element below the bar, spanning the header width', async () => {
+        const { root, waitForChanges } = await render(h("bs-navigation-header", null, h("div", { slot: "menu", id: "panel", style: { height: '120px' } }, "Panel")));
+        await waitForChanges();
+        const bar = root.shadowRoot.querySelector('header').getBoundingClientRect();
+        const hostRect = root.getBoundingClientRect();
+        const panel = root.querySelector('#panel').getBoundingClientRect();
+        const wrapper = root.shadowRoot.querySelector('[part="menu"]');
+        expect(root.shadowRoot.querySelector('slot[name="menu"]').assignedElements()[0].id).toBe('panel');
+        expect(Math.round(panel.top)).toBe(Math.round(bar.bottom));
+        expect(Math.round(panel.width)).toBe(Math.round(hostRect.width));
+        expect(getComputedStyle(wrapper).zIndex).not.toBe('auto');
+        // overlays: the host's own height is still just the bar
+        expect(Math.round(hostRect.height)).toBe(Math.round(bar.height));
+    });
+    it('stretches a slotted bs-mega-menu to the header width', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { width: '1500px' } }, h("bs-navigation-header", null, h("bs-mega-menu", { slot: "menu", id: "mm", label: "Menu" }))));
+        await waitForChanges();
+        const host = root.querySelector('bs-navigation-header').getBoundingClientRect();
+        expect(Math.round(root.querySelector('#mm').getBoundingClientRect().width)).toBe(Math.round(host.width));
+    });
+    it('adds no layout when the slot is empty', async () => {
+        const { root: withSlot, waitForChanges } = await render(h("bs-navigation-header", null));
+        await waitForChanges();
+        const wrapper = withSlot.shadowRoot.querySelector('[part="menu"]');
+        expect(wrapper.getBoundingClientRect().height).toBe(0);
+        expect(getComputedStyle(wrapper).position).toBe('absolute');
+        const bar = withSlot.shadowRoot.querySelector('header').getBoundingClientRect();
+        expect(Math.round(withSlot.getBoundingClientRect().height)).toBe(Math.round(bar.height));
+    });
+    it('adds no layout when the slotted panel is hidden', async () => {
+        const { root, waitForChanges } = await render(h("bs-navigation-header", null, h("bs-mega-menu", { slot: "menu", hidden: true, label: "Menu" })));
+        await waitForChanges();
+        const bar = root.shadowRoot.querySelector('header').getBoundingClientRect();
+        expect(Math.round(root.getBoundingClientRect().height)).toBe(Math.round(bar.height));
+        expect(root.shadowRoot.querySelector('[part="menu"]').getBoundingClientRect().height).toBe(0);
+    });
+    it('has no axe violations with the slot empty or filled', async () => {
+        for (const filled of [false, true]) {
+            const { root, waitForChanges } = await render(h("bs-navigation-header", { ariaLabel: "Main" }, filled && h("bs-mega-menu", { slot: "menu", id: "m", label: "Sales menu" })));
+            await waitForChanges();
+            const results = await axe.run(root);
+            expect(results.violations.map(v => v.id)).toEqual([]);
+        }
+    });
+});
+describe('bs-navigation-header: mobile', () => {
+    it('scrolls wide `left` content inside itself instead of widening the page (375px)', async () => {
+        await withViewport(375, 800, async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-header", null, h("div", { slot: "left", style: { display: 'flex', gap: '8px', width: '620px', flexShrink: '0', height: '24px' } }), h("bs-avatar", { slot: "right", type: "initials", initials: "SL", ariaLabel: "User" })));
+            await waitForChanges();
+            const left = root.shadowRoot.querySelector('[part="left"]');
+            expect(getComputedStyle(left).overflowX).toBe('auto');
+            expect(left.getBoundingClientRect().right).toBeLessThanOrEqual(375);
+            expect(left.scrollWidth).toBeGreaterThan(left.clientWidth);
+            expect(document.documentElement.scrollWidth).toBeLessThanOrEqual(window.innerWidth);
+        });
+    });
+    it('does not scroll `left` on desktop', async () => {
+        await withViewport(1280, 800, async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-header", null));
+            await waitForChanges();
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="left"]')).overflowX).toBe('visible');
+            expect(getComputedStyle(root.shadowRoot.querySelector('[part="menu"]')).overflowY).toBe('visible');
+        });
+    });
+    it('limits the menu slot to the viewport and scrolls it internally at 375px', async () => {
+        await withViewport(375, 600, async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-header", null, h("div", { slot: "menu", id: "tall", style: { height: '2000px' } })));
+            await waitForChanges();
+            const wrapper = root.shadowRoot.querySelector('[part="menu"]');
+            const bar = root.shadowRoot.querySelector('header').getBoundingClientRect();
+            expect(getComputedStyle(wrapper).overflowY).toBe('auto');
+            expect(Math.round(wrapper.getBoundingClientRect().height)).toBe(Math.round(window.innerHeight - bar.height));
+            expect(wrapper.scrollHeight).toBeGreaterThan(wrapper.clientHeight);
+        });
+    });
+});