@actabldesign/bellhop-core 0.3.0 → 0.3.1

package/dist/collection/components/bh-breadcrumbs/bh-breadcrumbs.js

@@ -50,6 +50,7 @@ export class BhBreadcrumbs {
      */
     bhChange;
     openDropdownIndex = null;
+    hasStartContent = false;
     dropdownQuery = "";
     /** Last-selected option id per item index, so selection sticks without a re-render from the consumer */
     dropdownSelections = {};
@@ -101,6 +102,10 @@ export class BhBreadcrumbs {
             this.bhItemClick.emit(item);
         }
     }
+    handleStartSlotChange = (event) => {
+        const slot = event.target;
+        this.hasStartContent = slot.assignedElements().length > 0;
+    };
     handleHomeClick = () => {
         this.bhItemClick.emit(HOME_BREADCRUMB_ITEM);
     };
@@ -173,6 +178,9 @@ export class BhBreadcrumbs {
             }, key: option.id, onClick: () => this.handleOptionSelect(item, option, index), role: "option", type: "button" }, option.icon && (h("span", { class: "material-symbols-outlined" }, option.icon)), h("span", null, option.label))))))));
     }
     renderBreadcrumbItem(item, index) {
+        if (item.slotName) {
+            return (h("div", { class: "breadcrumb-slot-item", key: index, part: "slot-item" }, h("slot", { name: item.slotName })));
+        }
         if (item.dropdown?.length) {
             return this.renderDropdownItem(item, index);
         }
@@ -187,9 +195,11 @@ export class BhBreadcrumbs {
     render() {
         const { displayItems, showEllipsis, collapsedItems } = this.displayData;
         const overflowLabel = resolveI18n("bh-breadcrumbs", "overflowAriaLabelTemplate", this.overflowAriaLabelTemplate, "Show {{count}} hidden items").replace("{{count}}", String(collapsedItems.length));
-        return (h("nav", { key: '56966b43b17d99a593dd49ad60fc0d58b8277e5d', "aria-label": resolveI18n("bh-breadcrumbs", "breadcrumbAriaLabel", this.breadcrumbAriaLabel, "Breadcrumb"), class: "breadcrumbs", onKeyDown: this.handleKeyDown, part: "nav" }, h("div", { key: 'cc964e1c00640c648a920054a452e9cafe8a78db', class: "breadcrumbs-container", part: "container" }, this.showHome && (h("div", { key: '30fa03d35c755a4a5a97b2bcc41b74acebba150f', class: "breadcrumb-item" }, h("bh-button-icon", { key: 'b127f1a3870d256542e6ff8e152e34f1b1093d24', "aria-label": resolveI18n("bh-breadcrumbs", "homeAriaLabel", this.homeAriaLabel, "Home"), hierarchy: "tertiary", iconName: "cottage", onClick: this.handleHomeClick, size: "xs" }))), this.showHome &&
+        return (h("nav", { key: 'd9cb90c45ee093c5c4e4866fd5a4bf8e8f27fdcc', "aria-label": resolveI18n("bh-breadcrumbs", "breadcrumbAriaLabel", this.breadcrumbAriaLabel, "Breadcrumb"), class: "breadcrumbs", onKeyDown: this.handleKeyDown, part: "nav" }, h("div", { key: 'f2582eaf25b5c4c1875d4ad16775f1bc18856fdc', class: "breadcrumbs-container", part: "container" }, h("div", { key: '13f2f7cdd0d62fd5e16916d84ec3bf61944ca77f', class: "breadcrumb-start", part: "start" }, h("slot", { key: '7ff95646edddc588f1f67a5d3b2261d54bba97e0', name: "start", onSlotchange: this.handleStartSlotChange })), this.hasStartContent &&
+            (this.showHome || displayItems.length > 0 || showEllipsis) &&
+            this.renderSeparator(), this.showHome && (h("div", { key: '3aac672d0d7b1f9452909736190fd7e8fc90d7ce', class: "breadcrumb-item" }, h("bh-button-icon", { key: '9de5438731f689a95f12d02b1a4a92a54d4a7906', "aria-label": resolveI18n("bh-breadcrumbs", "homeAriaLabel", this.homeAriaLabel, "Home"), hierarchy: "tertiary", iconName: "cottage", onClick: this.handleHomeClick, size: "xs" }))), this.showHome &&
             (displayItems.length > 0 || showEllipsis) &&
-            this.renderSeparator(), showEllipsis && displayItems.length > 0 && (h(Fragment, { key: '07b012c3b6434053f2d5f6749d9297ddc70fe361' }, h("div", { key: 'eeba0b525ce5df68f869d7888840941837d02593', class: "breadcrumb-item" }, this.renderBreadcrumbItem(displayItems[0], 0)), this.renderSeparator(), h("div", { key: '8a1bf31016951cabc19a979c8fa8de91a57f36c5', class: "breadcrumb-item", part: "item" }, h("button", { key: 'f61306ddeeb8bf9e8e6f5b47feb5ea95d3fe4948', "aria-label": overflowLabel, class: "breadcrumb-button breadcrumb-ellipsis", onClick: this.handleEllipsisClick, onKeyDown: this.handleEllipsisKeyDown, part: "ellipsis-button", title: overflowLabel, type: "button" }, h("span", { key: '0faf5dcd8c4e9ef2499fbd7910f1eb1772168d10', class: "breadcrumb-text", part: "text" }, "..."))), this.renderSeparator(), displayItems.slice(1).map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index + 1}` }, this.renderBreadcrumbItem(item, index + 1)), index < displayItems.slice(1).length - 1 &&
+            this.renderSeparator(), showEllipsis && displayItems.length > 0 && (h(Fragment, { key: 'c1653191bf2907dbd5d766670dfa40a814caaceb' }, h("div", { key: '7a09f1af2b8251ad7a3bfd5a932cfe206047eba9', class: "breadcrumb-item" }, this.renderBreadcrumbItem(displayItems[0], 0)), this.renderSeparator(), h("div", { key: 'eb4bc8c0f62172df697fbe5c7fdd20d368a5e36f', class: "breadcrumb-item", part: "item" }, h("button", { key: 'ffc550c65f950da959790794fe3c5a8a6e302096', "aria-label": overflowLabel, class: "breadcrumb-button breadcrumb-ellipsis", onClick: this.handleEllipsisClick, onKeyDown: this.handleEllipsisKeyDown, part: "ellipsis-button", title: overflowLabel, type: "button" }, h("span", { key: 'ad45203c999416f1d3e67092b042397c504c8dde', class: "breadcrumb-text", part: "text" }, "..."))), this.renderSeparator(), displayItems.slice(1).map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index + 1}` }, this.renderBreadcrumbItem(item, index + 1)), index < displayItems.slice(1).length - 1 &&
             this.renderSeparator()))))), !showEllipsis &&
             displayItems.map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index}` }, this.renderBreadcrumbItem(item, index)), index < displayItems.length - 1 && this.renderSeparator()))))));
     }
@@ -359,6 +369,7 @@ export class BhBreadcrumbs {
         return {
             "_i18nVersion": {},
             "openDropdownIndex": {},
+            "hasStartContent": {},
             "dropdownQuery": {},
             "dropdownSelections": {}
         };
@@ -376,7 +387,7 @@ export class BhBreadcrumbs {
                 },
                 "complexType": {
                     "original": "BreadcrumbItem",
-                    "resolved": "{ label: string; path?: string | undefined; isActive?: boolean | undefined; dropdown?: BreadcrumbDropdownOption[] | undefined; dropdownSearchable?: boolean | undefined; }",
+                    "resolved": "{ label: string; path?: string | undefined; isActive?: boolean | undefined; dropdown?: BreadcrumbDropdownOption[] | undefined; dropdownSearchable?: boolean | undefined; slotName?: string | undefined; }",
                     "references": {
                         "BreadcrumbItem": {
                             "location": "local",

package/dist/collection/components/bh-button/bh-button-icon/bh-button-icon.js

@@ -151,7 +151,7 @@ export class BhButtonIcon {
             "button-icon-disabled": this.disabled,
             "button-icon-loading": this.loading,
         };
-        return (h("button", { key: 'a568ffb31c8ee7c508e8f3330b1c4fa6691a1a76', "aria-busy": this.loading ? "true" : undefined, "aria-describedby": this.describedBy, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.hasPopup ? String(this.expanded) : undefined, "aria-haspopup": this.hasPopup && this.popupType ? this.popupType : undefined, "aria-label": this.ariaLabel || this.iconName, "aria-pressed": this.toggle ? String(this.pressed) : undefined, class: buttonClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, disabled: this.disabled, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTouchEnd: this.handleTouchEnd, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, part: "button", role: this.toggle ? "button" : undefined, tabindex: this.disabled ? -1 : 0, type: this.type }, this.loading ? (h("bh-loader-spinner", { size: "sm", variant: this.hierarchy === "primary" ? "white" : "default" })) : (h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
+        return (h("button", { key: '0c19bb2ed14337271c6146bbf94e975735f0ccb0', "aria-busy": this.loading ? "true" : undefined, "aria-describedby": this.describedBy, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.hasPopup ? String(this.expanded) : undefined, "aria-haspopup": this.hasPopup && this.popupType ? this.popupType : undefined, "aria-label": this.ariaLabel || this.iconName, "aria-pressed": this.toggle ? String(this.pressed) : undefined, class: buttonClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, disabled: this.disabled, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTouchEnd: this.handleTouchEnd, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, part: "button", role: this.toggle ? "button" : undefined, tabindex: this.disabled ? -1 : 0, type: this.type }, this.loading ? (h("bh-loader-spinner", { size: "sm", variant: this.hierarchy === "primary" ? "white" : "default" })) : (h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
     }
     static get is() { return "bh-button-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-button/bh-button.js

@@ -252,7 +252,7 @@ export class BhButton {
         const buttonClasses = mergeClasses(baseClasses, focusClasses, {
             [`btn-icon-${this.icon}`]: true,
         });
-        return (h("button", { key: 'e8e6a016ae510192dc75f4cd3f21703962981cfe', "aria-atomic": "true", "aria-busy": ariaBusy(this.loading), "aria-describedby": this.describedBy, "aria-disabled": ariaDisabled(this.disabled), "aria-expanded": this.hasPopup ? ariaExpanded(this.expanded) : undefined, "aria-haspopup": this.hasPopup && this.popupType ? this.popupType : undefined, "aria-label": this.ariaLabel || undefined, "aria-live": "off", "aria-pressed": ariaPressed(this.toggle, this.pressed), "aria-roledescription": this.roleDescription, class: buttonClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, disabled: this.disabled, onBlur: this.handleBlurEvent, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onKeyUp: this.handleKeyUp, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTouchEnd: this.handleTouchEnd, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, part: "button", role: this.buttonRole || (this.toggle ? "button" : undefined), tabindex: tabIndexForDisabled(this.disabled), type: this.type }, showLeadingIcon && (h("span", { key: 'd3a03f70eee24d71988939ef1d72f4b6b39ed947', class: `btn-icon ${this.getIconSizeClass()}`, part: "icon" }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), h("span", { key: '21d9fc3b16cb49ad0639cd4e03c02ffb160f599a', class: `btn-label ${this.getTextSizeClass()}`, part: "label" }, h("slot", { key: '42e37cd8a5a1cc890cd2efeedfffdb87b749d428' }, this.label)), showTrailingIcon && (h("span", { key: '3ce2b1626ae8276da70be34e63e2c3582e53a883', class: `btn-icon ${this.getIconSizeClass()}`, part: "icon" }, h("span", { key: '45c2e8d25eae239d5a570da726455bda63c8fdb1', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+        return (h("button", { key: '4d51d6fa002703616c1772bc94821f050942227a', "aria-atomic": "true", "aria-busy": ariaBusy(this.loading), "aria-describedby": this.describedBy, "aria-disabled": ariaDisabled(this.disabled), "aria-expanded": this.hasPopup ? ariaExpanded(this.expanded) : undefined, "aria-haspopup": this.hasPopup && this.popupType ? this.popupType : undefined, "aria-label": this.ariaLabel || undefined, "aria-live": "off", "aria-pressed": ariaPressed(this.toggle, this.pressed), "aria-roledescription": this.roleDescription, class: buttonClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, disabled: this.disabled, onBlur: this.handleBlurEvent, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onKeyUp: this.handleKeyUp, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTouchEnd: this.handleTouchEnd, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, part: "button", role: this.buttonRole || (this.toggle ? "button" : undefined), tabindex: tabIndexForDisabled(this.disabled), type: this.type }, showLeadingIcon && (h("span", { key: 'a590f7ccd123ef9f1fdb1e603359e9daecc8980d', class: `btn-icon ${this.getIconSizeClass()}`, part: "icon" }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), h("span", { key: '76a35460fca9bbe0b5718cddfa181bf918b91500', class: `btn-label ${this.getTextSizeClass()}`, part: "label" }, h("slot", { key: '8a55cf75feb637e230020d2abaa1b75672302100' }, this.label)), showTrailingIcon && (h("span", { key: '87246a5b2fb7e7338a01251e4564c98af0208af9', class: `btn-icon ${this.getIconSizeClass()}`, part: "icon" }, h("span", { key: 'aac0889ad057a049eba0aa72ad35cf373e2c0048', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
     }
     static get is() { return "bh-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-card/bh-card-content/bh-card-content.js

@@ -26,7 +26,7 @@ export class BhCardContent {
             "card-content": true,
             [`card-content-padding-${this.padding}`]: true,
         };
-        return (h(Host, { key: '5c4d1b560078bed8d6c718dfd405647e63ade30f' }, this.showDivider && (h("div", { key: '00dcd0d2b0e3897da9b2fb6d701e433c04be7996', class: "card-content-divider", part: "divider" })), h("div", { key: '88a097b954224f47852fc868e072dbde0af6d91d', class: contentClasses, part: "content" }, h("slot", { key: 'eb3270881b7fc477cca4d52692b17c8970799a83' }))));
+        return (h(Host, { key: '4050a64922f3a7a003841d29280b93022a4e3d68' }, this.showDivider && (h("div", { key: 'cdea7a3fc20ebe1542e9f228bf6de4fa9c2767f8', class: "card-content-divider", part: "divider" })), h("div", { key: '427b580123407b5a5882dbb9b133fe40d29a5e4a', class: contentClasses, part: "content" }, h("slot", { key: '71b4063ff9525de41e7d4cd219d70437c408a3c0' }))));
     }
     static get is() { return "bh-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-card/bh-card-footer/bh-card-footer.js

@@ -26,7 +26,7 @@ export class BhCardFooter {
             "card-footer-content": true,
             [`card-footer-align-${this.alignment}`]: true,
         };
-        return (h(Host, { key: '9352bd6d7f6449e7b0c289728fc68a16bb6e05de' }, h("div", { key: 'd439ad44e000451a37a5b1a70018a5438fa2bca1', class: "card-footer", part: "footer" }, this.showDivider && (h("div", { key: '1cd72006711a7b981c06ecf2eeb7d80a42453f44', class: "card-footer-divider", part: "divider" })), h("div", { key: '6379b4bb8e4db8295acd53be6fc5139c23ab18bf', class: footerContentClasses, part: "content" }, h("div", { key: '5ac9d2e90a73ddd870b77860b7b34be500dfbc0d', class: "card-footer-primary-actions" }, h("slot", { key: '283286116b57e740bb2efb02cee70e0d9a5de943', name: "primary-actions" })), h("div", { key: 'fc70ffc11c4360b2bde0aba0dd58ae4c3ee4bcf7', class: "card-footer-secondary-actions" }, h("slot", { key: '2369db56f57d52704cfe1cd05419f2b6acee41b4', name: "secondary-actions" }))))));
+        return (h(Host, { key: '236a3945387aa7b7c0414383af9d320a5a1e7bb8' }, h("div", { key: 'a1d7b7dd892abf5065e27da9032837ef930a42cf', class: "card-footer", part: "footer" }, this.showDivider && (h("div", { key: '45992a08fbb9e5896bf94972f1597f57788b0418', class: "card-footer-divider", part: "divider" })), h("div", { key: '00745982160b90af6f908ceb49fb7bcadd1d1e55', class: footerContentClasses, part: "content" }, h("div", { key: 'e51af94107ec9f13cd0f08c090639256d45528bd', class: "card-footer-primary-actions" }, h("slot", { key: 'c3fca58447b034b92a862c3d793b44e0afc6098b', name: "primary-actions" })), h("div", { key: '70e2955b01da30857abb6de5770b35e2b8ead2f3', class: "card-footer-secondary-actions" }, h("slot", { key: '6e8d9b426e6d57455432f4a8a7444804cb7ba4bc', name: "secondary-actions" }))))));
     }
     static get is() { return "bh-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-card/bh-card-header/bh-card-header.js

@@ -74,7 +74,7 @@ export class BhCardHeader {
     }
     handleDropdownClick = () => { };
     render() {
-        return (h(Host, { key: 'a12910207996dc8ad29f3e4345e3317c63602420' }, h("div", { key: '09c295344f9c9a972252315c0911f901cfe45b73', class: "card-header", part: "header" }, h("div", { key: 'f13e59fc4dd7a4c8f8ec0bb3e8346e8dd5298264', class: "card-header-content", part: "content" }, h("div", { key: 'cb2f4ad51159b3c4282f4bfc76dd59ef69e5545b', class: "card-header-text-container", part: "text-container" }, h("div", { key: '6801991500045e517f851be5de075fe12f8b0754', class: "card-header-title-row" }, this.showFeaturedIcon && (h("bh-featured-icon", { key: '957b67176d395b80453634251368939c2801d890', color: this.featuredIconColor, icon: this.featuredIcon, iconStyle: this.featuredIconStyle, size: "sm" })), this.showTitle && (h("span", { key: '0c3175e30642bb65114a9aeb47418437f5d91608', class: "card-header-title" }, resolveI18n("bh-card-header", "headerTitle", this.headerTitle, "Card title"))), this.showBadge && this.badgeText && (h("bh-badge", { key: 'e11727981c522a7519d6fed4f4ada8f142c65637', emphasis: "medium", label: this.badgeText, size: "sm", variant: "blue" }))), this.showSupportingText && (h("div", { key: '05655aee55b795ec5a7ade11c3f62a979a5e985d', class: "card-header-supporting-row" }, this.showFeaturedIcon && h("div", { key: 'caed4447a2ee2629112531529efdfc0a46f09e98', class: "card-header-spacer" }), h("span", { key: '4344b9b087c74090bdd07f26b2f5f872be5640bf', class: "card-header-supporting-text" }, resolveI18n("bh-card-header", "supportingText", this.supportingText, "Card description"))))), this.showDropdown && (h("bh-button-icon", { key: 'b2fcc718b2e41552fdc4981f6243ad349e67464e', ariaLabel: "More options", hierarchy: "quaternary", iconName: "more_vert", onBhClick: this.handleDropdownClick, size: "sm" }))), h("slot", { key: 'ad6e9ed6888ecd62a76a16a66d6c2e8eaea64ee4', name: "tabs" }), this.showDivider && h("div", { key: '0ba1ff3858830ac20bf8fdfd7cd7435add9ae53e', class: "card-header-divider" }))));
+        return (h(Host, { key: 'd673f2fc9a15a8faf5480cb3a3b096b9803546d0' }, h("div", { key: 'c03f54e19cba4a6b2556b4c237877bceeed682d7', class: "card-header", part: "header" }, h("div", { key: '272eb0ebfbbe2ab8d2c1636de340cae474d3bce9', class: "card-header-content", part: "content" }, h("div", { key: '1cdd79d5d32b39183de3e52d395be8f7365ca8ef', class: "card-header-text-container", part: "text-container" }, h("div", { key: '792c35548b328ea59d4b99943b84efac7f148bd3', class: "card-header-title-row" }, this.showFeaturedIcon && (h("bh-featured-icon", { key: 'c6f6a3e358435ff53b172d797d1dfe1595cb6680', color: this.featuredIconColor, icon: this.featuredIcon, iconStyle: this.featuredIconStyle, size: "sm" })), this.showTitle && (h("span", { key: 'bba0977d87b6259bf39062e79cd08aeb174fa7fc', class: "card-header-title" }, resolveI18n("bh-card-header", "headerTitle", this.headerTitle, "Card title"))), this.showBadge && this.badgeText && (h("bh-badge", { key: '17e15b5b243b8e0133754b128d492760685f602b', emphasis: "medium", label: this.badgeText, size: "sm", variant: "blue" }))), this.showSupportingText && (h("div", { key: 'c4b0c2f46a08e7e737fa191f803b3505df3ed605', class: "card-header-supporting-row" }, this.showFeaturedIcon && h("div", { key: 'ad94dbff5123a1d98cc81617c1b483b669f9978c', class: "card-header-spacer" }), h("span", { key: '289225d6cf026969a756066595292a67301a64f4', class: "card-header-supporting-text" }, resolveI18n("bh-card-header", "supportingText", this.supportingText, "Card description"))))), this.showDropdown && (h("bh-button-icon", { key: '0702ef0228262400adcb36fccdc9117f979773de', ariaLabel: "More options", hierarchy: "quaternary", iconName: "more_vert", onBhClick: this.handleDropdownClick, size: "sm" }))), h("slot", { key: '8ab0ff933c820e5bf0da6f4df351a097d05b50e0', name: "tabs" }), this.showDivider && h("div", { key: 'd46267ac7983f1e47249544d10dbe57b18f0c124', class: "card-header-divider" }))));
     }
     static get is() { return "bh-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-card/bh-card.js

@@ -211,7 +211,7 @@ export class BhCard {
             "card-draggable": this.dragEnabled,
             ...focusClasses,
         };
-        return (h(Host, { key: '5ba6685bb70c6b213b51aab807263bfe40448a82' }, h("div", { key: 'e2741be9a43974145f5ecc332adf8cb461171648', "aria-atomic": String(this.ariaAtomic), "aria-describedby": this.ariaDescribedBy, "aria-dropeffect": this.dragEnabled ? "move" : undefined, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-grabbed": this.dragEnabled ? "false" : undefined, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-live": this.ariaLive, "aria-pressed": this.role === "button" ? String(this.ariaPressed) : undefined, "aria-roledescription": this.ariaRoleDescription, "aria-selected": this.selectable ? String(this.selected) : undefined, class: cardClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, draggable: this.dragEnabled, onBlur: this.handleBlur, onClick: this.handleClick, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "base", role: this.role || undefined, tabindex: this.selectable || this.role === "button" ? 0 : undefined }, this.showHeader && (h("div", { key: 'abaabb9f32107ff8a76f3f66e064f8ffcaab51b4', class: "card-header-slot", part: "header" }, h("slot", { key: '41691b941bdab612262d84042d47712b3f5ef514', name: "header" }))), h("div", { key: '0e853c1da559fe75a281398f72110216feb18fd3', class: "card-content", part: "content", style: contentStyle }, h("slot", { key: '701911914064c5a69f762f876ee7aac2d2ea563e' }), !this.hasContent && (h("div", { key: 'b3f7b79f256fd1fe1562aeb3f86269f957917172', class: "card-content-placeholder" }, h("span", { key: 'b92704802010d53ca69d754a6a4b9a6fe4661a61', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: 'b493b0c11fb02e1cddb6dd5bd1ef6c93388398b3', class: "card-footer-slot", part: "footer" }, h("slot", { key: '26c7d95f74b1b7c39efd698b4e11818abbc7cd63', name: "footer" }))))));
+        return (h(Host, { key: 'c9dc86b35d4f9535ec093c1f7d0d761d77e62f26' }, h("div", { key: 'c2d813585335e994f8f99b94aa3eb04702764244', "aria-atomic": String(this.ariaAtomic), "aria-describedby": this.ariaDescribedBy, "aria-dropeffect": this.dragEnabled ? "move" : undefined, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-grabbed": this.dragEnabled ? "false" : undefined, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-live": this.ariaLive, "aria-pressed": this.role === "button" ? String(this.ariaPressed) : undefined, "aria-roledescription": this.ariaRoleDescription, "aria-selected": this.selectable ? String(this.selected) : undefined, class: cardClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": this.focusState.isFocused, "data-hovered": this.focusState.isHovered, draggable: this.dragEnabled, onBlur: this.handleBlur, onClick: this.handleClick, onDblClick: this.handleDoubleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "base", role: this.role || undefined, tabindex: this.selectable || this.role === "button" ? 0 : undefined }, this.showHeader && (h("div", { key: '4fd61b7ba2443ce9866b2b76e0fe01703293583b', class: "card-header-slot", part: "header" }, h("slot", { key: 'd635ccfb2607a8a579bbd2cbba5f205b72b39716', name: "header" }))), h("div", { key: 'a91feda047159bc98a809513977a871b45fcb4ad', class: "card-content", part: "content", style: contentStyle }, h("slot", { key: '63284996f37a196d4632ad29e9887d8d00b9b7ba' }), !this.hasContent && (h("div", { key: '9cefba952c2f71a29ca08cbadee50769681fe36b', class: "card-content-placeholder" }, h("span", { key: '655334ff224e59cd43f3e56bf3ff64e4a38f4d16', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: 'f5da3fbf516694c59122ba75f2eee1053eb2a352', class: "card-footer-slot", part: "footer" }, h("slot", { key: 'a38535924f63df83876c92ad3e52169ff1c84fd4', name: "footer" }))))));
     }
     static get is() { return "bh-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-bar-chart/bh-bar-chart.js

@@ -251,7 +251,7 @@ export class BhBarChart {
     };
     render() {
         const processedData = this.processData();
-        return (h(Host, { key: '4d0480d6140e744255e2335090cebc69042f29a6' }, h("div", { key: '40b95ccf681d97b54f5376d74ba43205091ac55b', class: {
+        return (h(Host, { key: '8b47527eb278b71ffbb786697e7f09fba39365e7' }, h("div", { key: '26f988f02923c782f36eb4d6653a7a51fcbc91e2', class: {
                 "bar-chart": true,
                 [this.variant]: true,
                 [this.orientation]: true,
@@ -262,7 +262,7 @@ export class BhBarChart {
             } })))))))) : (h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (h("div", { class: "bar-row horizontal", key: i, onClick: (e) => this.handleColumnClick(e, bar, i), onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseLeave: (e) => this.handleColumnLeave(e, bar, i), onMouseMove: this.handleColumnMove }, bar.segments.map((segment, segIndex) => (h("div", { class: "bar-segment horizontal", key: segIndex, style: {
                 width: `${(segment.value / bar.totalValue) * 100}%`,
                 backgroundColor: segment.color,
-            } }))))))))), h("bh-chart-tooltip", { key: 'b980b600f61e671df3fd7ddf00d7eba799f7802a', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, showTotal: this.showTooltipTotal, total: this.tooltipTotal, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
+            } }))))))))), h("bh-chart-tooltip", { key: 'fb810fcde8a557567f020d34d8ca6622330acb27', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, showTotal: this.showTooltipTotal, total: this.tooltipTotal, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
     }
     static get is() { return "bh-bar-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-chart-tooltip/bh-chart-tooltip.js

@@ -87,14 +87,14 @@ export class BhChartTooltip {
         reportComponentError("bh-chart-tooltip", error);
     }
     render() {
-        return (h(Host, { key: '05bcd401118604130d6b906f35425da00c95223d' }, h("div", { key: '9209f409ea387c36b75d14c54f1dc74e327982ef', "aria-hidden": this.visible ? undefined : "true", class: {
+        return (h(Host, { key: 'd5f7fac4d429e88941da67424275d484d2cfedcd' }, h("div", { key: '399c090f95c8ddd3f6b2680ea506df920b056fa9', "aria-hidden": this.visible ? undefined : "true", class: {
                 "chart-tooltip": true,
                 visible: this.visible,
                 "storybook-mode": this.storybookMode,
             }, part: "tooltip", style: {
                 left: `${this.safeX}px`,
                 top: `${this.safeY}px`,
-            } }, h("div", { key: '617e4d7d3eff7bfe47c6c28644defd725edc3856', class: "tooltip-content", part: "content" }, this.header && h("div", { key: '156120f30b05285a39eb8974cae643cbf65bafce', class: "tooltip-header" }, this.header), h("div", { key: 'a3f679b2475bd4c2dbf849d7a14c7a5517712ba7', class: "tooltip-items" }, this.items.map((item, index) => (h("div", { class: "tooltip-item", key: index }, item.color && (h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (h("span", { class: "tooltip-label" }, item.label, ":")), h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (h("div", { key: '969baf267ec4ec5b172d6d74b8f16544c78aabdf', class: "tooltip-total" }, h("span", { key: 'f09ff7c4e1e83aaa2ebb76e3a773c4215ad6733b', class: "total-label" }, "Total:"), h("span", { key: '4db9cfb55d5d1e72f0f3ed0241a9444edeb9f27d', class: "total-value" }, this.total)))))));
+            } }, h("div", { key: '8b32cb27fbfc42bf5cc42e12e06c491c29b7f582', class: "tooltip-content", part: "content" }, this.header && h("div", { key: 'f4430f54448aa62dd8575e005de4d094a216d034', class: "tooltip-header" }, this.header), h("div", { key: 'fae580500c4ccde9bead1673cf862bb0e67a6377', class: "tooltip-items" }, this.items.map((item, index) => (h("div", { class: "tooltip-item", key: index }, item.color && (h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (h("span", { class: "tooltip-label" }, item.label, ":")), h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (h("div", { key: '1164b336605e46a6f25eb4c61e74f2c9dd73d357', class: "tooltip-total" }, h("span", { key: '13c20395c26f67346253f4b6b3cb228a1aeb6cf9', class: "total-label" }, "Total:"), h("span", { key: '503f2e1e85589eb62003c5313621cd48199f8f5d', class: "total-value" }, this.total)))))));
     }
     static get is() { return "bh-chart-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-gauge-chart/bh-gauge-chart.js

@@ -121,10 +121,10 @@ export class BhGaugeChart {
         const valuePath = percentage > 0
             ? this.createArc(center, center, radius, this.startAngle, valueEndAngle)
             : "";
-        return (h(Host, { key: 'fcf2f2c00bdd3f020c38a69927c28178bde3339d' }, h("div", { key: '1d6679e08f04a982e17c0ce2142957f00937e82a', "aria-label": this.getComputedAriaLabel(), "aria-valuemax": this.data.max, "aria-valuemin": 0, "aria-valuenow": this.data.value, class: {
+        return (h(Host, { key: '08cac2c567cfbf6189396c13ed63b0c0cecf4966' }, h("div", { key: '39648c460dfe98461eddfa96147adc74f5d8bbf2', "aria-label": this.getComputedAriaLabel(), "aria-valuemax": this.data.max, "aria-valuemin": 0, "aria-valuenow": this.data.value, class: {
                 "gauge-chart-container": true,
                 "gauge-chart-animated": this.animated,
-            }, onClick: this.handleClick, part: "container", role: "meter" }, h("div", { key: '26349aadff8e05e4c07da378e584d5ce4c03d1e0', class: "gauge-svg-wrapper", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: 'eeb94ad2127141d0ae7118a84068e77cd537d4ff', class: "gauge-svg", height: this.size, viewBox: `0 0 ${this.size} ${this.size}`, width: this.size }, h("path", { key: '196f43a3b8e3fea83ab4ccddbb19018541744041', class: "gauge-track", d: trackPath, fill: "none", stroke: this.trackColor, "stroke-linecap": "round", "stroke-width": this.strokeWidth }), valuePath && (h("path", { key: 'e72e3168ad0efd4db34a3433dff99e0c560c3aa2', class: "gauge-fill", d: valuePath, fill: "none", stroke: this.color, "stroke-linecap": "round", "stroke-width": this.strokeWidth }))), h("div", { key: '1bfe7abd7c55c40d5845f62807e56a9ff3798724', class: "gauge-center-text", part: "center-text" }, h("span", { key: 'e0f253bec25ae3a53bac8a352bc090c14e807609', class: "gauge-value" }, displayValue))), this.chartTitle && (h("div", { key: '8c284d9ea7afd45c820c2e6d478e2143c3bb2846', class: "gauge-title", part: "title" }, this.chartTitle)), this.description && (h("div", { key: '9aaaeebd64475490be5167b62bf1817b74b3f4ba', class: "gauge-description", part: "description" }, this.description)))));
+            }, onClick: this.handleClick, part: "container", role: "meter" }, h("div", { key: '14831d7460d19f814cae15b9527149d270a0d880', class: "gauge-svg-wrapper", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: 'd33792f43acc78b65df4a4c5a2c986b6f95e45c4', class: "gauge-svg", height: this.size, viewBox: `0 0 ${this.size} ${this.size}`, width: this.size }, h("path", { key: '5a847a1002d4c683aec3622f24a7ee72896a2b72', class: "gauge-track", d: trackPath, fill: "none", stroke: this.trackColor, "stroke-linecap": "round", "stroke-width": this.strokeWidth }), valuePath && (h("path", { key: '4e0ff2fd972877df2bfa6a4180efbbca9dec87b9', class: "gauge-fill", d: valuePath, fill: "none", stroke: this.color, "stroke-linecap": "round", "stroke-width": this.strokeWidth }))), h("div", { key: 'd20b04ba88da9acc2e3c20c7d571be848f17894a', class: "gauge-center-text", part: "center-text" }, h("span", { key: 'd9aa3e7755a275dd807e4e4d17cb8311bb9490d0', class: "gauge-value" }, displayValue))), this.chartTitle && (h("div", { key: 'c67aabbd140ea3171bbc8acd6ccfb953bc87d5ff', class: "gauge-title", part: "title" }, this.chartTitle)), this.description && (h("div", { key: '3cecfe813eaac69f80a950633396c56d575a661a', class: "gauge-description", part: "description" }, this.description)))));
     }
     static get is() { return "bh-gauge-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-line-chart/bh-line-chart.js

@@ -299,10 +299,10 @@ export class BhLineChart {
         return (h("div", { class: "line-chart-legend", part: "legend" }, this.data.series.map((series, si) => (h("div", { class: "legend-item", key: series.name }, h("span", { class: "legend-dot", style: { backgroundColor: this.getSeriesColor(series, si) } }), h("span", { class: "legend-label" }, series.name))))));
     }
     render() {
-        return (h(Host, { key: '339f71fb621eb75b37da50f016b3146de28926b5' }, h("div", { key: 'e26559ed20d32438c518c4c8d9b81b76af7395f9', class: {
+        return (h(Host, { key: '3df2eff8c7b872a3899d816019cea6df2ccfc286' }, h("div", { key: '377eaed61df5041bbbf731952d0f547143d68755', class: {
                 "line-chart": true,
                 "line-chart-animated": this.animated,
-            }, part: "container" }, this.renderLegend(), h("svg", { key: 'b8c709af761d3e0a7cfe6b46c74f95d35ccca868', "aria-label": resolveI18n("bh-line-chart", "ariaLabel", this.ariaLabel, "Line chart"), class: "line-chart-svg", height: this.height, role: "img", viewBox: `0 0 ${this.width} ${this.height}`, width: this.width }, this.renderGrid(), this.renderAxes(), this.renderSeries(), this.renderHoverColumns())), h("bh-chart-tooltip", { key: 'ad577abb4627a6081e464ac47c76433302a99ae3', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
+            }, part: "container" }, this.renderLegend(), h("svg", { key: '581e67c536caae9a770867edd6db96b6439ece0e', "aria-label": resolveI18n("bh-line-chart", "ariaLabel", this.ariaLabel, "Line chart"), class: "line-chart-svg", height: this.height, role: "img", viewBox: `0 0 ${this.width} ${this.height}`, width: this.width }, this.renderGrid(), this.renderAxes(), this.renderSeries(), this.renderHoverColumns())), h("bh-chart-tooltip", { key: '923fc6f0be04dcd9f22ae4fa4aa0a9ac5f680909', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
     }
     static get is() { return "bh-line-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-pie-chart/bh-pie-chart.js

@@ -271,12 +271,12 @@ export class BhPieChart {
     render() {
         const segments = this.getSegments();
         const innerRadius = this.getInnerRadius();
-        return (h(Host, { key: '3bc0a9b002ee92bc89f81948734ddaf04087f90f' }, h("div", { key: 'd7ba440a122b50800c3bb0e35321563ea7c30392', class: {
+        return (h(Host, { key: '32e213722ad430ed2b9e4b235d44d43893a0640a' }, h("div", { key: 'd3d031c4e3b35f84cdd11f3f91f235b190a89dfb', class: {
                 "pie-chart-wrapper": true,
                 [`legend-${this.legendPosition}`]: this.showLegend,
-            } }, h("div", { key: 'd913f5ed492560051e84de771cf729762d9398fb', class: "pie-chart-container", part: "container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: '47f04a124612d37d93b68a99ee87b6b475df2899', "aria-label": resolveI18n("bh-pie-chart", "ariaLabel", undefined, "Pie chart"), class: "pie-chart-svg", height: this.size, role: "img", viewBox: "0 0 160 160", width: this.size }, h("circle", { key: '15c6dd28189ca2e1f392b018ae17ffe5bcf278af', class: "pie-background", cx: "80", cy: "80", fill: "transparent", r: "80" }), segments.map((segment, index) => (h("g", { class: "pie-segment-group", key: index }, h("path", { class: { "pie-segment": true, animated: this.animated }, d: segment.path, fill: segment.color, onClick: (e) => this.handleSegmentClick(e, segment), onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: (e) => this.handleSegmentLeave(e, segment), style: {
+            } }, h("div", { key: '6e465a575be22db278fa1d7a4292bbf50075007b', class: "pie-chart-container", part: "container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: 'a0abc090cb119e67b7dfb17ab403a3add4e34e1a', "aria-label": resolveI18n("bh-pie-chart", "ariaLabel", undefined, "Pie chart"), class: "pie-chart-svg", height: this.size, role: "img", viewBox: "0 0 160 160", width: this.size }, h("circle", { key: '3e9d942315f0c22c637d5e76dcabf3a300e7b0a7', class: "pie-background", cx: "80", cy: "80", fill: "transparent", r: "80" }), segments.map((segment, index) => (h("g", { class: "pie-segment-group", key: index }, h("path", { class: { "pie-segment": true, animated: this.animated }, d: segment.path, fill: segment.color, onClick: (e) => this.handleSegmentClick(e, segment), onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: (e) => this.handleSegmentLeave(e, segment), style: {
                 animationDelay: this.animated ? `${index * 0.03}s` : "0s",
-            } })))), this.hole !== "none" && (h("circle", { key: '6b65df0fa5c286d510434902912b1391b2d708f8', class: "pie-inner-hole", cx: "80", cy: "80", fill: "white", r: innerRadius }))), this.renderCenterText()), this.renderLegend(segments)), h("bh-chart-tooltip", { key: '81321a1817182e939856c6dcd8ff3700c5920a0d', "aria-hidden": this.tooltipVisible ? undefined : "true", items: this.tooltipSegment
+            } })))), this.hole !== "none" && (h("circle", { key: '6b1fbf81da9588ab088329c32bf3aa9b3d29f2f4', class: "pie-inner-hole", cx: "80", cy: "80", fill: "white", r: innerRadius }))), this.renderCenterText()), this.renderLegend(segments)), h("bh-chart-tooltip", { key: '39bce63e5b0eab31b002a481b6e9dc9580ce211a', "aria-hidden": this.tooltipVisible ? undefined : "true", items: this.tooltipSegment
                 ? [
                     {
                         label: this.tooltipSegment.name,

package/dist/collection/components/bh-chart/bh-progress-bar/bh-progress-bar.js

@@ -84,16 +84,16 @@ export class BhProgressBar {
         const percentage = this.getPercentage();
         const { label, formattedValue, value, sublabel } = this.data;
         const displayValue = formattedValue || String(value);
-        return (h(Host, { key: '9a7299faa2a64f46b786a25fb409674648483bac' }, h("div", { key: '4c05fe6effcc097f014d007db744ddd4542312a7', "aria-label": this.getAriaLabel(), "aria-valuemax": this.data.max, "aria-valuemin": 0, "aria-valuenow": this.data.value, class: {
+        return (h(Host, { key: '48d7e391cdc1b39313ad50b8fed3b6700dd97f5e' }, h("div", { key: '3a0a5e832c961546425faf75c5072b52346825b9', "aria-label": this.getAriaLabel(), "aria-valuemax": this.data.max, "aria-valuemin": 0, "aria-valuenow": this.data.value, class: {
                 "progress-bar-container": true,
                 "progress-bar-animated": this.animated,
-            }, onClick: this.handleClick, part: "container", role: "meter" }, this.showLabel && label && (h("div", { key: 'b011d9fb700057c3210de759cd88e92f1d16c97f', class: "progress-label", part: "label" }, label)), this.showValue && (h("div", { key: '12e3d82a7b0db913b09092856334bd2b3849fc5f', class: "progress-value", part: "value" }, displayValue)), h("div", { key: 'e5f0663411ceef624cacc3b15245f01d00996d22', class: "progress-track-row" }, h("div", { key: 'fb4afbd4ebf62d9d51428a5166f516c7f997a5eb', class: "progress-track", part: "track", style: {
+            }, onClick: this.handleClick, part: "container", role: "meter" }, this.showLabel && label && (h("div", { key: '7d7af6542e816dfab62460ec549e1baa16c1674e', class: "progress-label", part: "label" }, label)), this.showValue && (h("div", { key: '4d6d062b185a81d3014047234c446adafb499add', class: "progress-value", part: "value" }, displayValue)), h("div", { key: '492f2236640812d7acb5a908c33ee16ec496dd05', class: "progress-track-row" }, h("div", { key: '2496c9a4bd3a6dc6f49bdd5c94864e71c2e2ae6c', class: "progress-track", part: "track", style: {
                 height: `${this.height}px`,
                 backgroundColor: this.trackColor,
-            } }, h("div", { key: '743ee8f143f09fcc52819a41eb1c0a9ea5340db7', class: "progress-fill", part: "fill", style: {
+            } }, h("div", { key: '200a05ac521da65eb4d633102b6ea52317c746c8', class: "progress-fill", part: "fill", style: {
                 width: `${percentage}%`,
                 backgroundColor: this.color,
-            } })), this.showPercentage && (h("span", { key: '76671bf3760eea5675780eeac930459b31834e1e', class: "progress-percentage", part: "percentage" }, percentage, "%"))), this.showSublabel && sublabel && (h("div", { key: '9093c370961d79dea8bc49584ed84e402b45d7b9', class: "progress-sublabel", part: "sublabel" }, sublabel)))));
+            } })), this.showPercentage && (h("span", { key: '3a59357896ea81e2f077d2f96b37477e24380297', class: "progress-percentage", part: "percentage" }, percentage, "%"))), this.showSublabel && sublabel && (h("div", { key: '3db6988ad6a79534987b2ff4f82408ecc20674fb', class: "progress-sublabel", part: "sublabel" }, sublabel)))));
     }
     static get is() { return "bh-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-radar-chart/bh-radar-chart.js

@@ -230,10 +230,10 @@ export class BhRadarChart {
         })));
     }
     render() {
-        return (h(Host, { key: 'dfbf8e4d04f19fc35634fcf2d1b40af500fbd68a' }, h("div", { key: 'd38a4cba5756448585cf9c9efa61784099b7797a', class: {
+        return (h(Host, { key: 'd107776c86a650f7a6684f5a284fcf4ead2d18d7' }, h("div", { key: 'd93136a5ec66d04f8fd0944562b284ab06ccf348', class: {
                 "radar-chart": true,
                 "radar-chart-animated": this.animated,
-            }, part: "container" }, h("svg", { key: '8e39acb0c48dd35971ba5445843417719a2290d9', "aria-label": resolveI18n("bh-radar-chart", "ariaLabel", this.ariaLabel, "Radar chart"), class: "radar-chart-svg", height: this.size, role: "img", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size }, this.renderGrid(), this.renderAxes(), this.renderSeries())), h("bh-chart-tooltip", { key: 'fb75b85aacf0894a8d5d5c561a5fb80b6fc97c53', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
+            }, part: "container" }, h("svg", { key: '5a374b7232e4368a85b34da38f134d547ffb3454', "aria-label": resolveI18n("bh-radar-chart", "ariaLabel", this.ariaLabel, "Radar chart"), class: "radar-chart-svg", height: this.size, role: "img", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size }, this.renderGrid(), this.renderAxes(), this.renderSeries())), h("bh-chart-tooltip", { key: 'aa6ff63acbf09782254c0f512a7a4340c7f795a3', "aria-hidden": this.tooltipVisible ? undefined : "true", header: this.tooltipHeader, items: this.tooltipItems, visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY })));
     }
     static get is() { return "bh-radar-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chart/bh-trend-chart/bh-trend-chart.js

@@ -177,12 +177,12 @@ export class BhTrendChart {
         const strokeColor = this.getStrokeColor();
         const fillColor = this.getFillColor();
         const gradientId = `gradient-${this.trend}`;
-        return (h(Host, { key: '891d00a4cd6c0afdb9dbb52264240b00d1aec631' }, h("div", { key: '99b965b31154d00c9066eabf82baeda8ead609fc', class: {
+        return (h(Host, { key: 'ea8d6b51e373124621786bbd4ca7c62df12bd9c6' }, h("div", { key: 'e9153f8a5efc172330635244a1c4744109a09e8b', class: {
                 "trend-chart": true,
                 [`trend-chart-${this.trend}`]: true,
                 [`trend-chart-${this.variant}`]: true,
                 "trend-chart-animated": this.animated,
-            }, part: "container" }, h("svg", { key: '088d8161d858439fcfb4049ba103823680c5503b', "aria-label": `Trend chart showing ${this.trend} trend`, class: "chart-svg", height: this.height, role: "img", viewBox: `0 0 ${this.width} ${this.height}`, width: this.width }, h("defs", { key: '3730bddd827b87be9f6bcaf60a76d736eeec54a2' }, h("linearGradient", { key: '1e03f1589f33bfeb226153a87063d1637a51b1c3', id: gradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%" }, h("stop", { key: 'd5d534e531bb91eb63f5a639641e7fe7757c3b16', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === "fill-only" ? 0.4 : 0.2 }), h("stop", { key: '3ef26715490791b7a159981cc7e4668c97ebd4d4', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === "fill-only" ? 0.1 : 0.05 }))), backgroundPath && this.variant !== "line-only" && (h("path", { key: '5ac817e4e88dbb51cfc9c5114a9f8133e46f84f8', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== "fill-only" && (h("path", { key: '211b73e4ed129224a53790abb958585254bd02e3', class: "chart-line", d: pathData, fill: "none", onMouseEnter: this.handleLineHover, stroke: strokeColor, "stroke-width": "2" })), backgroundPath && this.variant !== "line-only" && (h("path", { key: '22cb3c45185eb54424ca1334a4c8a51fc6077ddd', class: "chart-background-hover", d: backgroundPath, fill: "transparent", onMouseEnter: this.handleLineHover })), points.map((point, index) => (h("circle", { class: "chart-point", cx: point.x, cy: point.y, fill: strokeColor, key: index, onClick: (e) => this.handlePointClick(e, this.data[index], index, point.x, point.y), onMouseEnter: (e) => this.handlePointHover(e, this.data[index], index, point.x, point.y), onMouseLeave: (e) => this.handlePointLeave(e, this.data[index], index, point.x, point.y), opacity: "0", r: "6" })))))));
+            }, part: "container" }, h("svg", { key: '9f809a7f4d5f81182b172904ad83366675fe7b55', "aria-label": `Trend chart showing ${this.trend} trend`, class: "chart-svg", height: this.height, role: "img", viewBox: `0 0 ${this.width} ${this.height}`, width: this.width }, h("defs", { key: '12b674338f78e3046948a0db5c5f3bab546962ab' }, h("linearGradient", { key: 'cb1e1f2bd78cabcbcd04b16dec7c52ff98ba5dac', id: gradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%" }, h("stop", { key: '6e8e2ff7be1a4f400024d2e16827e00b3c6b5178', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === "fill-only" ? 0.4 : 0.2 }), h("stop", { key: '9ed743ef3ca3ce5163182f4a72851c47ba0b90a5', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === "fill-only" ? 0.1 : 0.05 }))), backgroundPath && this.variant !== "line-only" && (h("path", { key: '70e5d76147769bfc2139c26635406bc18d6b88d1', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== "fill-only" && (h("path", { key: 'c80a4d83bcf81dec0523f27e59d9b26be8a3bfd0', class: "chart-line", d: pathData, fill: "none", onMouseEnter: this.handleLineHover, stroke: strokeColor, "stroke-width": "2" })), backgroundPath && this.variant !== "line-only" && (h("path", { key: '53dc5a1878481379e089b9f24a2e2d16d1b9294d', class: "chart-background-hover", d: backgroundPath, fill: "transparent", onMouseEnter: this.handleLineHover })), points.map((point, index) => (h("circle", { class: "chart-point", cx: point.x, cy: point.y, fill: strokeColor, key: index, onClick: (e) => this.handlePointClick(e, this.data[index], index, point.x, point.y), onMouseEnter: (e) => this.handlePointHover(e, this.data[index], index, point.x, point.y), onMouseLeave: (e) => this.handlePointLeave(e, this.data[index], index, point.x, point.y), opacity: "0", r: "6" })))))));
     }
     static get is() { return "bh-trend-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chat/bh-chat-message/bh-chat-message.js

@@ -96,13 +96,13 @@ export class BhChatMessage {
         const isIncoming = this.type === "incoming";
         const isTyping = this.variant === "typing";
         const isFile = this.variant === "file";
-        return (h(Host, { key: '341c5703824126dd302c4218aae10bf3a8b07a5f' }, h("div", { key: '295aa5b9a485e7e29f5721ad5927faa6ccee6cda', "aria-label": isTyping
+        return (h(Host, { key: 'bdf15f0729d39f2e8d0191fcfa6e621d3d857d9e' }, h("div", { key: 'b2f43fdbcc83b5056ef308dcfb160c8ef7d801aa', "aria-label": isTyping
                 ? `${this.author || "Someone"} is typing`
                 : `Message from ${this.author || "Unknown"}`, class: {
                 "chat-message": true,
                 [`chat-message-${this.type}`]: true,
                 [`chat-message-${this.variant}`]: true,
-            }, part: "container", role: "article" }, !isTyping && (h("div", { key: '05aa026eaed2801724bfa28f97e8fe980f546827', class: "chat-message-header", part: "header" }, h("span", { key: '5cb34b62fa1af6a8af1ba35a3fcec0808159ba3f', class: "chat-message-author", part: "author" }, this.author), h("span", { key: '3e1fbebcec1ac33496afb441b2ca43581dcf8772', class: "chat-message-timestamp", part: "timestamp" }, this.timestamp))), h("div", { key: 'ba18836ef02418230a48caaaf6bd6d9bc741a059', class: "chat-message-body-row" }, isIncoming && !isTyping && this.avatarSrc && this.renderAvatar(), isTyping && (h("div", { key: '4f033a7c8d00a16ce7a00a643f02b955fe1469b9', class: "chat-message-typing-wrapper" }, isIncoming && this.renderAvatar(), h("div", { key: '50102be237b8b441cd75288185bf136d5cd9eb75', class: "chat-message-typing-content" }, h("span", { key: '67e39cb2cda78a2a0826c7adf2726655885da4fa', class: "chat-message-author", part: "author" }, this.author), this.renderTyping()))), !(isTyping || isFile) && (h("div", { key: '8e242c254e6896b62048bf3ca825d4b4ebd10214', class: "chat-message-bubble", part: "bubble" }, h("slot", { key: 'd0df09a2eaf26d4357b31b1f07c3495eac38500e' }), this.renderMenuButton())), !isTyping && isFile && (h("div", { key: '0f995e228f684a1208932bc0aea2584b49e0ec35', class: "chat-message-file-wrapper" }, this.renderFileAttachment(), this.renderMenuButton()))), !isTyping && (h("div", { key: '9318479a76abff8788167cd4181e4c152c6ce91e', class: "chat-message-reactions", part: "reactions" }, h("slot", { key: '06761a09cb04446505d4e8f5a2734047144777e2', name: "reactions" }), this.renderReactionButtons())))));
+            }, part: "container", role: "article" }, !isTyping && (h("div", { key: '39b88cd29fde262db550aab188a9837abecb7ab8', class: "chat-message-header", part: "header" }, h("span", { key: '6b55496792b2ef8b499e0cfb8b3cf882a918c62d', class: "chat-message-author", part: "author" }, this.author), h("span", { key: '87ab6612df8f8274dcf261840f380ecbd5e656cb', class: "chat-message-timestamp", part: "timestamp" }, this.timestamp))), h("div", { key: 'eba524017ed96e21d0bc332047a90ef826d8570d', class: "chat-message-body-row" }, isIncoming && !isTyping && this.avatarSrc && this.renderAvatar(), isTyping && (h("div", { key: '39fc2af5eae0bd602ccee935cf5dbb70b8ce1685', class: "chat-message-typing-wrapper" }, isIncoming && this.renderAvatar(), h("div", { key: '952e42b7c1c46a591c0e090de571c9bfbe0feae9', class: "chat-message-typing-content" }, h("span", { key: 'af6b1628d87b7ef4886d315b1669f35ee49363b6', class: "chat-message-author", part: "author" }, this.author), this.renderTyping()))), !(isTyping || isFile) && (h("div", { key: 'd8d176a18f38b5bab28bc4da3c37735b8bad88b0', class: "chat-message-bubble", part: "bubble" }, h("slot", { key: '37fd94fba76e348f86bac27add7588e7a55f744f' }), this.renderMenuButton())), !isTyping && isFile && (h("div", { key: 'e6f2161e7fab20ff4a4f2f4906ae1b745f17d533', class: "chat-message-file-wrapper" }, this.renderFileAttachment(), this.renderMenuButton()))), !isTyping && (h("div", { key: 'a576787986f12f2a7ce31ea1059a12281645bc8c', class: "chat-message-reactions", part: "reactions" }, h("slot", { key: '72b891bbd7d5e3b5a880f14080d66ef78c90f4b5', name: "reactions" }), this.renderReactionButtons())))));
     }
     static get is() { return "bh-chat-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-chat/bh-chat-reaction/bh-chat-reaction.js

@@ -29,11 +29,11 @@ export class BhChatReaction {
     };
     render() {
         const showCount = this.count > 1;
-        return (h(Host, { key: '3ba9f7f34b4332122a13566778074289855c5a6e' }, h("button", { key: '523bfb96b27dc6939dd90b1c35e5e483471c3e97', "aria-label": `${this.emoji} reaction${showCount ? `, ${this.count}` : ""}`, "aria-pressed": String(this.active), class: {
+        return (h(Host, { key: 'fcc74eb4fd29905d7155c864c1fc507e5117591a' }, h("button", { key: '0f3d5061afca42cd7d047fce4cfc30c3508d5027', "aria-label": `${this.emoji} reaction${showCount ? `, ${this.count}` : ""}`, "aria-pressed": String(this.active), class: {
                 "chat-reaction": true,
                 "chat-reaction-active": this.active,
                 "chat-reaction-with-count": showCount,
-            }, onClick: this.handleClick, part: "badge", type: "button" }, h("span", { key: '9aa97a68a72971dcd4f785747d7c6df7c49f6344', class: "chat-reaction-emoji", part: "emoji" }, this.emoji), showCount && (h("span", { key: '5ea676cf3cca06b210bc9dd77adb29e5407a80c2', class: "chat-reaction-count", part: "count" }, this.count)))));
+            }, onClick: this.handleClick, part: "badge", type: "button" }, h("span", { key: '8a5397739451b02203a8207bfbdcd3f03e6d5304', class: "chat-reaction-emoji", part: "emoji" }, this.emoji), showCount && (h("span", { key: 'c846e7ba4d863b194a0d84df03a53fdb66faf45f', class: "chat-reaction-count", part: "count" }, this.count)))));
     }
     static get is() { return "bh-chat-reaction"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-close-button/bh-close-button.js

@@ -4,7 +4,7 @@ export class BhCloseButton {
     darkBackground = false;
     disabled = false;
     render() {
-        return (h(Host, { key: '94983c98db255689852e7a5f24b3698b96f41127' }, h("bh-button-icon", { key: '280a8cd4eec9047e0efee474121a2559ad7f57ca', ariaLabel: this.ariaLabel, disabled: this.disabled, hierarchy: "quaternary", iconName: "close", size: "sm" })));
+        return (h(Host, { key: '1b329426bf09f1fee1b00e20c5ebf5f76e7d471d' }, h("bh-button-icon", { key: '91098fe34d4b19eca617dd8e1da33113ebd4161e', ariaLabel: this.ariaLabel, disabled: this.disabled, hierarchy: "quaternary", iconName: "close", size: "sm" })));
     }
     static get is() { return "bh-close-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-command-bar/bh-command-bar.css

@@ -0,0 +1,181 @@
+:host {
+  display: contents;
+}
+
+.command-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bh-z-index-modal-backdrop, 1040);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  background: var(--color-surface-overlay, rgba(12, 17, 29, 0.6));
+}
+
+.command-panel {
+  display: flex;
+  flex-direction: column;
+  width: var(--bh-command-bar-width, 560px);
+  max-width: calc(100vw - 2 * var(--spacing-xl, 20px));
+  max-height: var(--bh-command-bar-max-height, 60vh);
+  overflow: hidden;
+  background: var(--color-bg-primary, #fff);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-xl, 0 20px 24px -4px rgba(16, 24, 40, 0.1));
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-lg, 16px);
+  border-bottom: 1px solid var(--color-border-secondary, #eaecf0);
+}
+
+.search-icon {
+  font-size: var(--icon-size-md, 20px);
+  color: var(--color-text-tertiary, #667085);
+}
+
+.search-input {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-md-size, 1rem);
+  color: var(--color-text-primary, #101828);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.search-input::placeholder {
+  color: var(--color-text-placeholder, #667085);
+}
+
+.sections {
+  overflow-y: auto;
+}
+
+.section {
+  padding: var(--spacing-sm, 8px) 0;
+}
+.section:not(:last-child) {
+  border-bottom: 1px solid var(--color-border-secondary, #eaecf0);
+}
+
+.section-heading {
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-xs-size, 0.75rem);
+  font-weight: var(--weight-medium, 500);
+  color: var(--color-text-tertiary, #667085);
+}
+
+.section-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  gap: var(--spacing-md, 12px);
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  text-align: left;
+  font-family: var(--font-inter, inherit);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.item.active {
+  background: var(--color-bg-secondary, #f9fafb);
+}
+
+:host([size=md]) .item {
+  padding-top: var(--spacing-md, 12px);
+  padding-bottom: var(--spacing-md, 12px);
+}
+
+.item-icon {
+  flex-shrink: 0;
+  font-size: var(--icon-size-md, 20px);
+  color: var(--color-text-secondary, #475467);
+}
+
+.item-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-xxs, 2px);
+  min-width: 0;
+}
+
+.item-title-row {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+  align-items: baseline;
+  min-width: 0;
+}
+
+.item-label {
+  font-size: var(--text-sm-size, 0.875rem);
+  font-weight: var(--weight-medium, 500);
+  color: var(--color-text-primary, #101828);
+  white-space: nowrap;
+}
+
+.item-path {
+  overflow: hidden;
+  font-size: var(--text-sm-size, 0.875rem);
+  color: var(--color-text-interactive, #175cd3);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-description {
+  font-size: var(--text-sm-size, 0.875rem);
+  color: var(--color-text-secondary, #475467);
+}
+
+.item-shortcut {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.empty {
+  padding: var(--spacing-3xl, 40px) var(--spacing-lg, 16px);
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-sm-size, 0.875rem);
+  color: var(--color-text-secondary, #475467);
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  gap: var(--spacing-lg, 16px);
+  align-items: center;
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  border-top: 1px solid var(--color-border-secondary, #eaecf0);
+}
+
+.footer-hint {
+  display: inline-flex;
+  gap: var(--spacing-xs, 4px);
+  align-items: center;
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-xs-size, 0.75rem);
+  color: var(--color-text-secondary, #475467);
+}
+
+.footer-back {
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.footer-settings {
+  margin-left: auto;
+}

package/dist/collection/components/bh-command-bar/bh-command-bar.figma.js

@@ -0,0 +1,9 @@
+import figma, { html } from "@figma/code-connect/html";
+// "Command bar" component set → bh-command-bar
+figma.connect("https://www.figma.com/design/pMWBF5MOupzrME0nwR7Z3u/2.-Components---Bellhop?node-id=7918-9810", {
+    props: {},
+    example: () => html `<bh-command-bar
+        hotkey="cmd+k"
+        sections='[{"id":"commands","heading":"Commands","items":[{"id":"switch","label":"Switch property","icon":"swap_horiz","shortcut":"cmd+p"}]}]'
+      ></bh-command-bar>`,
+});