@brandsync/wc 1.12.0 → 1.13.0

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

@@ -107,7 +107,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: '6cb94a173877a8e339585dd41bfca7cdb5152277', 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: '87fc3d0b1e958295bb3ff41c3a4f6a76803c4b31', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '5fb74ca62c8f60b50d7f53cd5b77b02cfb547365', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '4774748fa4d8d5f441914aaca0cc8729c3d85857', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '87d793b4e8088f51ff64dd388f3769aebd5c507d', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'ddfc8532be46adab986a6f4a6b0e46d2c8fcc8f4', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '729a03df8dbca1814725d06ceb23d1d1c694cc63', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'd873545b4148383e3df42fe1ff76aab027d4a0f8', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '445a6cb3dd289641e7499a612e90a1916b6e85b7', 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: 'c14a3671a22711ff388dc5dbd08ed7d337e97f3d', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '0baa4ff03cfc81ca1c76d10f77997fc85b55d403', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '710df7af9639d65a2d4cb750f73a2369607931ad', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'b60afb9f8478feb6fbc9fa5d6a7b402029238807', onSlotchange: this.onLabelSlotchange })), h("span", { key: '7621d5e89eacbe23e66451f294db0012c7fbd18b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '9c26f2322701714939b072431e9f9aa91cffc778', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '77f31d38361e15b81a72acbf43e2ab6d852b835d', 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: 'e7f42dc2b8504a99f03c35fa3617155ac430def0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'a9a96d3fca150110a8490b42d516db9609677903', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'dcee9772097aec3389f8a87e4bb29ea88cef5298', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'dd253eade8f13fd774fb688e01abc8cc05b6af81', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,6 +62,10 @@ export class BsTimepicker {
     /** Label of the Cancel button. */
     cancelLabel = 'Cancel';
     /** Accessible name of the hour spinner. */
+    /** Verb prefix of each column's increment button name ("Increase hour"). */
+    increaseLabel = 'Increase';
+    /** Verb prefix of each column's decrement button name ("Decrease hour"). */
+    decreaseLabel = 'Decrease';
     hourLabel = 'Hour';
     /** Accessible name of the minute spinner. */
     minuteLabel = 'Minute';
@@ -193,17 +197,17 @@ export class BsTimepicker {
         const [min, max] = this.bounds(col);
         const n = this.shown(col);
         const stepLabel = (dir) => `${dir} ${label.toLowerCase()}`;
-        return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Increase'), 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('Decrease'), 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" })))));
+        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: 'e0545d99e052005bcad5509f81505f628adb5dc4', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '664c7184dcefe5c63f03afad3953787cbc3064cc', class: "bs-timepicker__body" }, h("div", { key: '602d4f0ca6975b22daa7c7a37a6d53a259c39768', part: "header", class: "bs-timepicker__header" }, h("div", { key: '1650464c84e066f14f6343f18f779e35932535c3', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'debc6155ccf39b90f281d49240203d642fb5039d', class: "bs-timepicker__format" }, h("span", { key: '147a6d85b4f0922b5c7d96ebef88b3c70d1fbe05' }, this.formatLabel), h("bs-switch", { key: 'ddb0be1751ce8246acbfd6c187e66fb6bc878cd5', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '35f13bd74133f2c1109df96aafdc456178e4a32f', class: "bs-timepicker__divider" }), h("div", { key: '9c979a8d3300a8f5dba7d8df784dc8ef691a40a6', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '5b4af0371fd816067b92854da2b35e5a7de8e4ea', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'a70450b5068add559c48e795ce6aca204b30d02d', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '26a760f4d4712eca3df48b97bde276ce241511d5', cx: "2", cy: "10", r: "2" }), h("circle", { key: '3c6eb56e2736353dc5e5bc4a1d6ef64242f6a367', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '948e724c331008bbd00fd84c516d02e919e622e1', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: '2033e822eb65c41caeb338bd7b0ea569e775b715', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '952ccde08ccf1c56404c9364c16980c5008abb62', class: "bs-timepicker__body" }, h("div", { key: '39b3370e55682275901c68c84ad8db8142525d31', part: "header", class: "bs-timepicker__header" }, h("div", { key: '77858996498a08dc30cad647eec89ec975db71a9', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'f29d33b987ae0a5d1448f0636787b1b1abc79187', class: "bs-timepicker__format" }, h("span", { key: '975b259c50cc3f10366327a75da5e1293ee803f3' }, this.formatLabel), h("bs-switch", { key: 'db35c8e82b52549e5d63e3eb5188f094f3ac56ae', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'bb8875c816372d424f8bbba86d6a1e0bc409f5b2', class: "bs-timepicker__divider" }), h("div", { key: '2dfdd3a449ad53f6d6af142007f73486ce9d852e', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '05a3adb45f35c3bd51a275d38cae8f9fe4f3afbf', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b51e22b366c29a293b99ea91f46872f767295d4f', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '33e566b81ad2e96bf0033ed43f2b70dfe54371f2', cx: "2", cy: "10", r: "2" }), h("circle", { key: '4210a5cd7058385bd983225951d94aeda4aa9c06', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '8f557a95389fbbc579539744230933000a559526', 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: '08b57e8c0b895e272d98386fe5b2ac2e55a87de0', class: "bs-timepicker__divider" }), h("div", { key: '5b1af1da10c4333ef6b826eaafd75fa12ef2e785', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'ad24615dbe6ae46e00ca558f71cee030504573a5', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'f76cd192e1e7e0bb524080cf54a655c5b4508a3c', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'fa37a2d7ac535f62e3c7d56eebee4bf6a6dbba5c', class: "bs-timepicker__divider" }), h("div", { key: 'f0c0e549ae1282ee4e93504163c279a9ccd6f241', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '301330874cad2f9beb3b82e580c24168fc5b0052', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'bf193dbb17a2c71c16b574b31035f1752c89765b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -379,6 +383,46 @@ export class BsTimepicker {
                 "attribute": "cancel-label",
                 "defaultValue": "'Cancel'"
             },
+            "increaseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Verb prefix of each column's increment button name (\"Increase hour\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "increase-label",
+                "defaultValue": "'Increase'"
+            },
+            "decreaseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Verb prefix of each column's decrement button name (\"Decrease hour\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decrease-label",
+                "defaultValue": "'Decrease'"
+            },
             "hourLabel": {
                 "type": "string",
                 "mutable": false,
@@ -391,7 +435,7 @@ export class BsTimepicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible name of the hour spinner."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,

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

@@ -18,6 +18,8 @@ export class BsToast {
     /** Semantic state. Each state has its own icon and matching container/text tokens -- there is
      * no neutral/default state. */
     state = 'info';
+    /** Accessible name of the dismiss button. */
+    dismissLabel = 'Dismiss';
     /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
      * the consumer is expected to do that (or hide it) in response to this event. */
     bsDismiss;
@@ -25,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'fcf10204b781318554bd1d1b65b3b003759f47ca', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77a9fc881d530b43aa93cd71ab00d79a402ac5df', class: "bs-toast__content" }, h("span", { key: '18b4ffee843c2f9f235477e729a7a5bca1044595', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '62a78820785f12ccfa503d7690ae99d2b3b47aa2', state: this.state })), h("span", { key: 'b17882e4d5f4afe5bcfa5704b515c145df94799b', part: "message", class: "bs-toast__message" }, h("slot", { key: '678d2256cc21e6e07b099d417837b5891e7d6021' }))), h("div", { key: 'aba935f0a62a599b9eacfed9d13598f70a941283', class: "bs-toast__actions" }, h("button", { key: 'a9ee43cf75eca8e737d5e59507408de7f8bffaf1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '4e4c5a25e6b25da2362385f1be5c4b86f02bbeb0' })))));
+        return (h("div", { key: '376303627d6ffb7b0003dc83e874784ede700486', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '767b01d764404a3b801d451ea2b2f52bcccb8425', class: "bs-toast__content" }, h("span", { key: '701619d874f9849da38d4e1c19503ea93773cd75', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b3dfc1ae57ed798985074d4572349da5875c1e0a', state: this.state })), h("span", { key: 'e41d7a06af64543073371b57d02439ca93068261', part: "message", class: "bs-toast__message" }, h("slot", { key: '5e4e717afea3ad71c66a06a8c0ab265b8a850fa1' }))), h("div", { key: 'daa05fc5a4911cdadd52169377b8bb72bf0e11f7', class: "bs-toast__actions" }, h("button", { key: '0a2dad22af165429ef95db499f44ee6568a51bfb', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '74b90cc634d5bec5e8e0d64bf1e4ad347d41a533' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +68,26 @@ export class BsToast {
                 "reflect": false,
                 "attribute": "state",
                 "defaultValue": "'info'"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the dismiss button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss'"
             }
         };
     }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '8fdc149cce564aa5531956eda52b81bedd9db1bb', class: "bs-tooltip" }, h("span", { key: '34234ea02b510a5a728bb97d259cfbd2c8f7f7b2', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '04d825a91dc6753a90b7daaf370e575c9ddee6d1', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '81b8681507245e597177d169c1925dfb65aaeeab' }))));
+        return (h("div", { key: 'cd34354a526f3bfe60473dcccd3199149cb8dd62', class: "bs-tooltip" }, h("span", { key: '17943240c38e9c9ebaf80860462afaab841c8049', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '6c2a1c40f7d6ce8b2d14eddb143fe90bb896077c', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '3b3f22ea81394e4ee95e3e78400599cd570f5d98' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,73 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const tip = (root) => root.shadowRoot.querySelector('[part="tooltip"]');
+const wrap = (root) => root.shadowRoot.querySelector('[part="trigger"]');
+describe('bs-tooltip-trigger', () => {
+    it('is hidden by default and linked via aria-describedby', async () => {
+        const { root } = await render(h("bs-tooltip-trigger", { text: "Hint" }, h("button", null, "Go")));
+        expect(tip(root).hasAttribute('hidden')).toBe(true);
+        expect(tip(root)).toEqualAttribute('role', 'tooltip');
+        expect(wrap(root).getAttribute('aria-describedby')).toBe(tip(root).id);
+        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")));
+        wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(false);
+        wrap(root).dispatchEvent(new MouseEvent('mouseleave'));
+        await waitForChanges();
+        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")));
+        wrap(root).dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(false);
+        wrap(root).dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(true);
+    });
+    it('respects delay', async () => {
+        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint", delay: 50 }, h("button", null, "Go")));
+        wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(true);
+        await new Promise(r => setTimeout(r, 80));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(false);
+    });
+    it('cancels a pending show when the pointer leaves before the delay', async () => {
+        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint", delay: 50 }, h("button", null, "Go")));
+        wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+        wrap(root).dispatchEvent(new MouseEvent('mouseleave'));
+        await new Promise(r => setTimeout(r, 80));
+        await waitForChanges();
+        expect(tip(root).hasAttribute('hidden')).toBe(true);
+    });
+    it('defaults placement to bottom, below the trigger', async () => {
+        const { root, waitForChanges } = await render(h("bs-tooltip-trigger", { text: "Hint" }, h("button", null, "Go")));
+        expect(root.placement).toBe('bottom');
+        wrap(root).dispatchEvent(new MouseEvent('mouseenter'));
+        await waitForChanges();
+        const t = tip(root).getBoundingClientRect();
+        const w = wrap(root).getBoundingClientRect();
+        expect(t.top).toBeGreaterThanOrEqual(w.bottom);
+    });
+    for (const placement of ['top', 'start', 'end']) {
+        it(`positions the tooltip on the ${placement} side`, async () => {
+            const { root, waitForChanges } = await render(h("div", { style: { padding: '200px' } }, h("bs-tooltip-trigger", { text: "Hint", placement: placement }, h("button", null, "Go"))));
+            const host = root.querySelector('bs-tooltip-trigger');
+            const hw = host.shadowRoot.querySelector('[part="trigger"]');
+            hw.dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            const t = host.shadowRoot.querySelector('[part="tooltip"]').getBoundingClientRect();
+            const w = hw.getBoundingClientRect();
+            if (placement === 'top')
+                expect(t.bottom).toBeLessThanOrEqual(w.top);
+            if (placement === 'start')
+                expect(t.right).toBeLessThanOrEqual(w.left);
+            if (placement === 'end')
+                expect(t.left).toBeGreaterThanOrEqual(w.right);
+        });
+    }
+});

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

@@ -0,0 +1,52 @@
+:host {
+  display: inline-block;
+  --bs-tooltip-trigger-offset: var(--bs-spacing-100);
+  --bs-tooltip-trigger-z-index: var(--bs-z-index-popover);
+}
+
+.bs-tooltip-trigger {
+  position: relative;
+  display: inline-block;
+}
+
+.bs-tooltip-trigger__tooltip {
+  position: absolute;
+  top: calc(100% + var(--bs-tooltip-trigger-offset));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--bs-tooltip-trigger-z-index);
+  width: max-content;
+  pointer-events: none;
+}
+
+.bs-tooltip-trigger__tooltip[hidden] {
+  display: none;
+}
+
+:host([placement='top']) .bs-tooltip-trigger__tooltip {
+  top: auto;
+  bottom: calc(100% + var(--bs-tooltip-trigger-offset));
+}
+
+:host([placement='start']) .bs-tooltip-trigger__tooltip,
+:host([placement='end']) .bs-tooltip-trigger__tooltip {
+  top: 50%;
+  left: auto;
+}
+
+:host([placement='start']) .bs-tooltip-trigger__tooltip {
+  right: calc(100% + var(--bs-tooltip-trigger-offset));
+  transform: translateY(-50%);
+}
+
+:host([placement='end']) .bs-tooltip-trigger__tooltip {
+  left: calc(100% + var(--bs-tooltip-trigger-offset));
+  transform: translateY(-50%);
+}
+
+/* bs-tooltip only draws an upward arrow (below-trigger layout); hide it for other sides. */
+:host([placement='top']) bs-tooltip::part(arrow),
+:host([placement='start']) bs-tooltip::part(arrow),
+:host([placement='end']) bs-tooltip::part(arrow) {
+  display: none;
+}

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

@@ -0,0 +1,140 @@
+import { h } from "@stencil/core";
+let tooltipTriggerId = 0;
+/**
+ * Wraps a trigger element and shows a `bs-tooltip` on hover or keyboard focus, after an optional
+ * delay. Escape dismisses it. The tooltip is linked to the trigger with `aria-describedby`.
+ *
+ * Composed from `bs-tooltip`.
+ *
+ * ## When to use
+ * - A short hint for an icon button or truncated label.
+ *
+ * ## When not to use
+ * - Interactive content or long text (use `bs-popover`).
+ *
+ * @slot - Default slot: the trigger element.
+ * @part trigger - The wrapper around the trigger; carries aria-describedby.
+ * @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`.
+ */
+export class BsTooltipTrigger {
+    /** Tooltip message. */
+    text = '';
+    /** Milliseconds to wait before showing the tooltip. */
+    delay = 0;
+    /** Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'. */
+    placement = 'bottom';
+    visible = false;
+    tooltipId = `bs-tooltip-trigger-${++tooltipTriggerId}`;
+    timer;
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+    }
+    show = () => {
+        clearTimeout(this.timer);
+        if (this.delay > 0)
+            this.timer = setTimeout(() => (this.visible = true), this.delay);
+        else
+            this.visible = true;
+    };
+    hide = () => {
+        clearTimeout(this.timer);
+        this.visible = false;
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.visible)
+            this.hide();
+    };
+    render() {
+        const show = this.visible && !!this.text;
+        return (h("div", { key: '2fc1cae6e9561dcb1849011c40771038efd0f546', 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: 'ceb7dd09728db2917e47db7178b543a8766a9147' }), h("div", { key: '8a1809cc681b826a44de2d49a672933d48a2163b', part: "tooltip", id: this.tooltipId, class: "bs-tooltip-trigger__tooltip", role: "tooltip", hidden: !show }, h("bs-tooltip", { key: '00df96c8a33440e72bd46ada9aca02ba75fb1cd5' }, this.text))));
+    }
+    static get is() { return "bs-tooltip-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tooltip-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tooltip-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds to wait before showing the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "0"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTooltipTriggerPlacement",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {
+                        "BsTooltipTriggerPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-tooltip-trigger/bs-tooltip-trigger.tsx",
+                            "id": "src/components/bs-tooltip-trigger/bs-tooltip-trigger.tsx::BsTooltipTriggerPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+}

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

@@ -0,0 +1,21 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-tooltip-trigger',
+    parameters: { docs: { description: { component: componentDescription('bs-tooltip-trigger') } } },
+    render: args => html `
+    <div style="padding: 24px;">
+      <bs-tooltip-trigger text=${args.text} delay=${args.delay}>
+        <bs-button>Hover or focus me</bs-button>
+      </bs-tooltip-trigger>
+    </div>
+  `,
+    argTypes: {
+        text: { control: 'text' },
+        delay: { control: 'number' },
+    },
+    args: { text: 'Extra information', delay: 0 },
+};
+export default meta;
+export const Default = {};
+export const Delayed = { args: { delay: 500 } };

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: 'f3b59b9886ee7dc0cff3ce37ef361081d268c301', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: '849ff3110f9b5e8862d2e8743c69e37a3913ba3f', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '1e3ab58124be4aac1785ac5094f607eebba06ada', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '351f70bd49e94fd4848e34d2b134dda0a76aa3ce', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '9e5341acb5e4b5628ad9c567ca30d87f03c7c511', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'cca65aff39503436f75f7e1a6eada38975985b63', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '9c4e28e9687456fbe4b40fdba7e22dc162ea26c7', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '4e698f6b9cd3bc68c4723877a6c257c2cdafb5a4', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '60e73438ed675a12159986ae8352b1c5b2735fb1', 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: 'ddf69ede4112a2da4554b0ed4dae5664f739c055', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'a6465a5bfab7ee0ccf8e26eb6221e566ad483b2e', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: 'd45596c561a1366f54beaf3c5ba62084581742fe', 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: 'a87b5824ff0fe97c7c025096e432948864e1d19b', d: "M5 12H19" }), h("path", { key: '96659132bb0262ed354a33c2c33d48dde199a95b', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '25381aa31681ccdb1e18fe74a019bd57e1fa8a62', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: 'ff956b15aeb7267e70e15fd447d7ccc02bdf488f', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: '7bd5e8ea1e0a3628ece59407cc58354c3d30426e', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '6ae5623bf2e65c1d7a52ec93f0801c9ea188de08', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '741b8fbb241b9ee321a8e77fbb81550d8a61cf21', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: 'caa348708573629d60ccf047357dd086f2c7350e', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: 'a5671ad6a6ec951b4cb20ae5dfb6dbcd1e6b3006', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '10953346635c715ca0eb5c82f2b281a5a7113a90', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '63764e4700d494eb78c0fe0c9c203575ddced731', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: 'b81d30298930bb2f1aa3ac3256ece61f700d0480', 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: '5a0c0096dd06fb735ec4f5f897c9a392d37aa723', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: 'dc86c02b65b3dca892873b08f3b541d92db9058c', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '2b6bdb66eff8f452bec1ea47e5c2ec6cb4854b8b', 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: '67299241e7a3d29adfd9b97512b3e6ee49f833c7', d: "M5 12H19" }), h("path", { key: 'd7e8ee2608e3345b0ab0aa1988d6da42b1f14ecf', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '3c7d0fb5f1aebc224de840c68bb66f1bbc9b540e', 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

@@ -73,6 +73,12 @@ export class BsNavigationDrawer {
      * a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a
      * rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`. */
     collapsible = true;
+    /** Accessible name of the collapse toggle while the drawer is expanded. */
+    collapseLabel = 'Collapse';
+    /** Accessible name of the collapse toggle while the drawer is collapsed. */
+    expandLabel = 'Expand';
+    /** Accessible name of the search trigger. */
+    searchLabel = 'Search';
     /** Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected
      * -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above
      * for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own
@@ -228,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: '521147bfafef13a89a56f343cbe4b285fd006639', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'cc9f73d195a4073d735c707fffafde33a2d19d3b', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: '467266e407fe4106bc677b04e0b553374b8fbaeb', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (h(Host, { key: 'e968fe7b53118c3c7a790d640c42870eafde4399', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: '2779ef664093e7439a5af96d17921e015240bc1e', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: '939895e91353feb4b213b1219a610780f70a69e9', 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: '4ff34d1ac08f81a00332547c84cfdf6ed92b5b79', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '71705d5d76425fd296489f4dbe01beed4940ee47', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '563b51505b802c687256b71bdb573d19130f3f8c', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: 'd7a4e74152e8e1dcff9411f8328f546127499cee', variant: "mark", background: this.logoBackground }))), h("div", { key: '25e35b5ea15ca7b5a807a655c97a399b18bfced2', class: "bs-navigation-drawer__title-row" }, h("span", { key: '810858e4f00a7e734543cfd0502a0a2facdc7744', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '7d00c956e442aabe7578724bff8a29b98d96cb04', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'a394a7cfa1fa4e68ab6bbaf06299bb46c891e251' })))), h("div", { key: '1a68784b97eb72c6bbfa597d244c9e6444960843', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '0712fdc0632d153d6adf9aaaa153d6cd2e2759d3', name: "search" })), h("button", { key: '92848c768f51ffc6b32d926ad9ae9ab722647531', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '32c2d99598015b95e79d2a88d75c68bf5e41f4f0' })), h("div", { key: '0beae420879d2b3488134c4586509cce316072c9', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'aa01f41986235a8d4cfe8d5b477fa77d584bc8d7' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '53ca093c161021ba1f8549ff969560968b39c2d5', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '6166408f8acf95f9bcb069c513c857608357e0c1', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '9ca4a65ea05110d158273703a9085a5ef89964b4', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '31d54855aa0f529e2c739b25ebe34c1076ccf350', variant: "mark", background: this.logoBackground }))), h("div", { key: '7bdea3c4d784670f3fecdff8c211bdd82cf0448a', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'bc2297655109ec140ca626c3cde5a6a74d79d0b0', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'ca81bfae546d50fd79576918c88be5adc89adbbb', 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: '2ea855c83eef0901aa39f633d07cc91c54872a37' })))), h("div", { key: 'ae34f590f34f8cfd027d715f4ff1ddbb46aae391', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '4dd811fdfcd60a59cddb8b50c048f27583dd0947', name: "search" })), h("button", { key: 'f364a533ca3ef62c85b90b9481c2a9cf1a731e05', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '0d5ba9b9631baa75fd5c198b85da436dda988542' })), h("div", { key: 'b78d387d26bf047766558ddbb82bb797e6262c5b', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '6d0e7f8a1885839d737fe1883cb81cc4e7750170' })))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -288,6 +294,66 @@ export class BsNavigationDrawer {
                 "attribute": "collapsible",
                 "defaultValue": "true"
             },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the collapse toggle while the drawer is expanded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label",
+                "defaultValue": "'Collapse'"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the collapse toggle while the drawer is collapsed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label",
+                "defaultValue": "'Expand'"
+            },
+            "searchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the search trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-label",
+                "defaultValue": "'Search'"
+            },
             "collapsed": {
                 "type": "boolean",
                 "mutable": true,

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: '51630ca979a030ee03a3c11352fd088621281bf9', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'd1e7d4ce9986b0b109cf120654612f28d5419528', 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: '76efeab68b534e27ee36ca785ab45409d076e773', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'a07c99f227906bcb65ddc8e7fc51899b61e7a530', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '0b05f0fa744bfd8f5462b028e2fba26508fe119b', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '702286fcffb4021fe048b5cd33b91ad41d335a3d' })), this.expandable && (h("span", { key: '3ce575babd8db5d37f25302e0979696b974f76ff', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: 'b5e915df678f8fc7468aa72d17b638d46c13d40e' })))), this.expandable && (h("span", { key: '2533a38344615f4edd4e6e704f2d23c327f8a990', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'f1d717e3cb69aa6002ff5ba6ac4879d565ab59dd', name: "children" })))));
+        return (h("div", { key: '2b7837f89946d774a7c6bf6134fe03a62bed79aa', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'cebf928c1e885475888eadbea33aeb2af60a7443', 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: 'f8e4029d48812fc0be2329d5b8f302b74ca9689f', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '409ca913c113ce786b3f4f484d7ea9771909c00a', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '56a14dcab7c950d2ab6b57fe74341d1df35ef73b', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: 'b00be42b3c445777489bd0ad932980a8742aa089' })), this.expandable && (h("span", { key: '6a78c1753ae1b0e784258ac5bcd476521b2c70ab', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '720c5f0985638d83c45813cf0c9ec124f9202b8d' })))), this.expandable && (h("span", { key: '8a48654707a75fd986d0a0fb12a23466656e21a5', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '95644fd25b27916348a15faaf9721ca4ff086c06', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }