@zanichelli/albe-web-components 19.1.4-RC1 → 19.2.1-RC

package/dist/collection/components/deprecated/z-menu-deprecated/index.js

@@ -96,7 +96,7 @@ export class ZMenuDeprecated {
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: '74b5b32d29db7c6e7d241f1583a2df27979fb4f8' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '6bdfeb0e2d900a53e69a15861c1c5d6337fcf972', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: 'da9c528915686f2b5fcface1483822df96abca6b', class: "header" }, h("slot", { key: '692467f0246d129d75525a5097529d8c2a8f6817', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '639ffcb514c6d95d7dca908b2c0cbf142f42a9e3', class: "items", role: "menu" }, h("slot", { key: '783021819f17a536746670de911ebef9665e8e99', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: '7b64ae06d79dd727299f86cb7f9d50a851776b90' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '9922d654e0e78bef5763af1a89ff838c86a1fe30', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: 'c08ed7a8634b0cdc71b0052f4327134bdc5c8736', class: "header" }, h("slot", { key: '0a107099ee3c2de8727e6ea4f863ba46c67c1859', name: "header", onSlotchange: this.checkContent }))), h("div", { key: 'fa85f72658bb7f7a710ddf4fd7891e9e379845a0', class: "items", role: "menu" }, h("slot", { key: 'cc8b6625acaad177c516cc415a841662ce654c28', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     static get is() { return "z-menu-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js

@@ -43,7 +43,7 @@ export class ZMenuSectionDeprecated {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: 'cb55ccb8c7327254eabaab573f6fb0a5ae2ac361', role: "menu", open: this.open }, h("button", { key: '5065f38502c4bb0167bb7332e0e8ba0dd36541df', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '67a5082482b73f27f8244f730ac88da14d4db6c4', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'b513a5c76223e7a83162cc3b28434c53124b135c', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '4f43962d01e60cea802f06413acae360ead32aa0', class: "items" }, h("slot", { key: '020f1235a37a99e274e9f4d611153f4915c9cd41', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '6cc06eccce2d2c9611936c2b804f3c7744774aad', role: "menu", open: this.open }, h("button", { key: '2cc287717a677392b5084f61b6eca0fd88dc13c0', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '2b3d76700bea806f8b0db6a9d3fd915885b275c2', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '16162d96f5d3d3fb475db88525ce9e23e34a08c6', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '801f6e8e3f54fc7a64e3b6388f4c4d7297a3e757', class: "items" }, h("slot", { key: '875889ac362c006c632db4eb04f32e228f7cb13c', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     static get is() { return "z-menu-section-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-section-title/index.js

@@ -18,7 +18,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: '461f6c104cfc920716e772e582fcd194f5e29dc3' }, h("slot", { key: '320b69756d8c3a9ce18a48e04947cc4547bd94a9', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '94c5b68ec254d01fc66517f3a7ec0867cb29ac45', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '058143cf64d7660d5172c265d97ea0ed412a9173', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '98fa18966e3ae3338939b1b2b8882f12a31de76a', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: 'b42238fc6f9ecdd6b773746c1d97d2ac2d3d5c31' }, h("slot", { key: 'da33aa876ed2469b5cddf5f1dc34914afb87110f', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'e8c76d87a57c34b802e467cd9e5b4212a3464350', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'd65a8312c2b71b0976c63c2de93d7a35bf675736', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '9e70bb6279e893957314eda5344ffc1a7289315a', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-upload/z-dragdrop-area/index.js

@@ -12,12 +12,12 @@ export class ZDragdropArea {
         }
     }
     render() {
-        return (h(Host, { key: '190dcbcc79e4443895774274715076523f618cf2', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: '32b072c1d8a73bfe406e587c2e9e0c7d43424615', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '4d80939d13543b91165c7fdb14f5ec8037464ffe', class: "dragover-container" }, h("z-button", { key: '0957633378fc64a9efa91e6cf3748480572f05b8' }, this.dragAndDropLabel)), h("slot", { key: '128c06ec19a231080cafc23108f5a82398626fc5' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '8312cab9a38f7c4258ef705945717fb8b8ef4b92', class: "dragover-container" }, h("z-button", { key: '36bdf4d0361043294b29c5e7a7102344f74c2b67' }, this.dragAndDropLabel)), h("slot", { key: '8e60d77a01a662095594b085656492e96ac3b445' })));
     }
     static get is() { return "z-dragdrop-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-upload/z-file/index.js

@@ -32,7 +32,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b7c1c1769e8ad69c813738b1ad1ed614a42e196e' }, this.allowPopover && (h("z-popover", { key: 'eaad804518f26a1a839bc8ff14896207ee90bad8', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'eb9671344deee0deafdff01be57cd5dbf948a614', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '7c890fb667a33cd00290d02e42313be683e2215e', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'f0a0464a0b8a3f98e94de5a4673589518f24c2a0', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '7f9738fc5ab5714736fc9ce5f83cb31f41b0e099' }, this.allowPopover && (h("z-popover", { key: 'd5baa113aa7e90938197d6cbd4d90b6a952e4cc7', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'f4fc4a0a02c3475713b76ad1ece29dff2d514369', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '301e251425be64a0484dc397e3222d3790e14a80', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '5d3f8d4bdf1550b72e44aeed32a4cb59da15f5e8', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list/z-list/index.js

@@ -18,7 +18,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'f178d7e0463f0e0495aa3029dd8a14b3947770ad' }, h("slot", { key: '9f177d9529829d8eb48329cfc969c739c24c5a52' })));
+        return (h(Host, { key: '004f6ec917edd3b8a3f0f50809543a7cb357daba' }, h("slot", { key: '6f55271632a504df1e044da28be26cf2e5e7fb1b' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-list-element/index.js

@@ -119,7 +119,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '12acb475e6134ca269fa048ec922b41f853e4f44', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '01120e1b207b2d2271e9c71d5bc04a97842b92ed', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '97e8f8a0cffd91ce225f95eb64fc032d69b530cf', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'b6daab61d570d5b9aaf9ab8b735e7704e5075f7c', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '09936377d5e836f011cac004f095e0d4f243c64a', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '9ba1d277209e3d02c1ad34cfb92e5979aa7f2df1', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '8c53a9715bb89aa6f7f7c8746352ce90679f8bba', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '0ca76d1b451f74ccafe0d00985b7d33e3f1cde59', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-list-group/index.js

@@ -26,11 +26,11 @@ export class ZListGroup {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: '1e3229205e55482b92dc8d0a972d9f9e1805ba56', role: "group" }, h("div", { key: 'ede88ef3d1845e0c432b7a00b8f9dc959ce258e6', class: {
+        return (h(Host, { key: '97c6cc961737aca6748a6083c59d041b86b17fef', role: "group" }, h("div", { key: 'b7a78fae5613cef55da4bf6ff348344e6b4b06fa', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'd6c2cef7568424ebab1ae5d3dc572d4bc2aba61c', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '5e45b81c54db4f623d366e62817f2a60ede8fa19', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '2a1a7ad0e3f8b56dd4880b8215ab79bd27981804' })));
+            } }, h("slot", { key: 'fbc9339b158e2ba25f9119d0548b6ab10cefd450', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '70e44c839e49f99e4589bc2ec7482761d6130445', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'd3fbc2ccaa3c9f45a3bb02ed793555d84fa5790c' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-tree-list/index.js

@@ -94,7 +94,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: '860eebd2ba1f46fb493bc07eb245596a9dc8be99', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6a5876f627d499e9c04464383463f97d5caa1272', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '2dec1105883f67ec44180943079ad9bc3386102a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'bbe5bf141b17412719b230c4848a5aa2385a8adc', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     static get is() { return "z-tree-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-td/index.js

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'c9c2a31f99dc72acd54744c8c1abdbb56b0a7df3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'f503630802052c5c3566b725aba40ea0923d60da', class: "cell--content" }, h("slot", { key: 'e26dc22a7b21eef5475d10124312384593957bf8' }), this.showMenu && (h("div", { key: '4c7204766c53e4502ff24e51e9ea751620246278', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d0f59414241c2b195dd45cf74f678b15e957cac', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '68d2f577c442c9a72009dd6365cd4182e9333d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c90cf570174b2e2af659ae02e217d725a1951cb4', name: "contextual-menu" })))))));
+        return (h(Host, { key: '293116a05abf815d72c5febe88387a672bc44a32', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '2edc2b6dcc67342e33dbb9dd7115ecc851c3fc73', class: "cell--content" }, h("slot", { key: 'a5bb48ca5dc5e37ce0b152c02c697cc421b60989' }), this.showMenu && (h("div", { key: 'e72f327a63b7b76e99b50b1ca8d9a971bd731ce3', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'cf6c1dc39f04221e9a96e405ad44e2e089e5787e', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '149e73ef108f4c4e02c254a047dd1f500049015a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '115d26fe844d42fd2de0cbf2e241be44ae35e46d', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/index.js

@@ -50,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '80d84d10038bfd5171b1596db3175c4e915e3c81', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'b98f5cbe6c9fa873e39f46ba701c76755a4f9da7', class: "cell--content" }, h("slot", { key: 'f7d2b12496eb334bf07fcfc80e42cacf95a2b6c7' }), this.showSorting && (h("button", { key: '000518536845b9b1383d2aa90a655000a2d0cc0b', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '61cedbe8a54e51cac9d94f00e4d9d84dbcc1b48d', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '3c2ac483288672ac1c65dc3586fb9b346abe53e9', class: "cell--menu-container" }, h("z-button", { key: '6a495a201dc8343267ef8892bc97150c2d4ec4fc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'b97a3477c4f63bccb2445304676ad2127a26d9df', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'd51ba2caa4e7929e3aedf3beec9b95f4c9b1cf24', name: "contextual-menu" })))))));
+        return (h(Host, { key: '03fc52e539b5d4b353707a3065be9d522c0aed93', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '2253ed45163efb0508ef0c291d33f386c53d8fbb', class: "cell--content" }, h("slot", { key: '3d17a384cb6d39c3672eb2c6c44a0e491214ed50' }), this.showSorting && (h("button", { key: 'e32ce07f7193628e19e0e20bcc56fe309c48c6f3', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '6a96bf249ecb191f6f0b71ce8b5186ee1e109a91', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'a490f573b3d07dc6ca74190cb81be4075fc85d97', class: "cell--menu-container" }, h("z-button", { key: 'ae1cd376be6fb4e13674277ab927d9542a469bbc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'bb9ee43bf68dce8a8046b88bf9bf993ff519816d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b1d46d09c33c4f957ea1d6984428b2ba55763e66', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-table/index.js

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '6749b44ab2c28b92e6b282487bf9f23c40cead58', expandable: this.expandable }, h("div", { key: '633237695b09182263ac74b5118d533a8cae33b8', class: "table", role: "table" }, h("slot", { key: 'f46d287050238e137ababadae8b8eb1ffdb96c7b' }))));
+        return (h(Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tbody/index.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: 'c14251b56741e89faba797de5c531dc539b4561b', role: "rowgroup" }, h("slot", { key: '3d2168a3fdc01ff6f68f19f3c346d6732fb7aab0' })));
+        return (h(Host, { key: 'a23a8d2225c5872c1ad1f646944b3ad4ba79f5fd', role: "rowgroup" }, h("slot", { key: '984be981a195644ec52026d7cc012326480210a6' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'a7106c5ef3c347b7cc797a6cd1031e5d29cf2ae3', role: "rowgroup", tabIndex: -1 }, h("slot", { key: 'cd4f042bdfd7df449603fbcb49cf4b78da6f4d36' })));
+        return (h(Host, { key: 'f8e7bef1397f6a4d7f776321421eb8f8c69ceb7d', role: "rowgroup", tabIndex: -1 }, h("slot", { key: 'd0e56e8d36cc4ca21d79b9d2a2546b19a0ac27e0' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js

@@ -9,7 +9,7 @@ export class ZThead {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: '17fe1d87112460ce7b7dd16e72cb3be1b92c7eb3', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'ef0c0e95a383057b7ed5964f7c24cb8a59b31808' })));
+        return (h(Host, { key: 'd975481f3702161c0d76f42c47d6194c39d08f42', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '97e675dc4bbefd4aac970d10dc4499c4bc80ac23' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js

@@ -57,7 +57,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '5a8cbf39900a7569b0fb31d225be6fade59c82ea', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '75f7a74a6eda8f50d40beedbe387da74d58c276b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'd34b5aa1778f3d830fd80354c79cd93a9b703737', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fef99c968e191fe7970665b9a45721fada207db0', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'f1cf676da370f0c2500914decdc5f09e1e647b7f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cd09d8ed8cf0a33137d4d1d91ec9720227f359ba', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'c1edcb26241c7528d544f61ab75d2920b545e62d', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '8bb2db80cfdd9dd4065466a97381dfacd4ef5395', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '1ab915207f73524dc1dbffe3d79190ee4c177c62', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '419b53264646264a73687faa3ee007531e0c3ac9', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '048a03b706c82e5dfb2f55001b24864bf5bad97c', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c44fd9d9808651d63d9eb5f25fe8a0c31faadfe8', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-accordion/index.js

@@ -26,12 +26,17 @@ export class ZAccordion {
         this.highlight = false;
         this.variant = AccordionVariant.DEFAULT;
         this.shadow = true;
+        this.hasSlottedTags = false;
     }
     onDisabledChange() {
         if (this.isDisabled) {
             this.open = false;
         }
     }
+    /** Check if there is any content in the "tag" slot. */
+    checkSlottedTags() {
+        this.hasSlottedTags = !!this.host.querySelector('[slot="tag"]');
+    }
     /**
      * Handle `details` element toggle.
      * If currently disabled, prevent toggling by forcing the `open` state to `false`.
@@ -46,8 +51,11 @@ export class ZAccordion {
         this.open = this.detailsElm.open;
         this.toggled.emit(this.open);
     }
+    componentWillLoad() {
+        this.checkSlottedTags();
+    }
     render() {
-        return (h("details", { key: '75f8a546aa49db6a078ee035a359ea512da290a1', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '83cf68bd5d118bb43dce8aed36776bdb6f31df24', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'b718c6923a9176504f1c4f05e706938fc44aabe9', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '5db96b4f3f565e6e746fa1d339edb72839900a7e', class: "z-accordion-label" }, this.label), h("span", { key: 'f6b7bc7ce502d25be290af4ac3f257b8f2d88142', class: "z-accordion-tags" }, h("slot", { key: '304b3ac5f1cd58e9e3532e4e47109fb569d7a14a', name: "tag" })), h("z-icon", { key: 'ad373df60eafcabe0f707a74cff5bacdaeccb531', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '3997863313ebf787bdc1ef101fb46ab4ed9fac00', class: "z-accordion-content", part: "content" }, h("slot", { key: '1870a604a2949390f50ef03e5d9f3a407a494023' })))));
+        return (h("details", { key: 'f7e5933db8c37cfe6e39d2ff41a0d1611784e668', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '6109ae145d22b879326c0b6493886e8e93587157', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'aa81dc1a116fb11a36e3f3339e02f2206a0b1ce4', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'c7473044308125b98ec5df1774023b0bf51170bb', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '1f991e11f91086616d7eb03ea6b4fdc8b8e6d424', class: "z-accordion-tags" }, h("slot", { key: '9d38da3a3809a5fbc5484b05f22a53fe4e448e76', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '248043a90d91b3fe718314f006aa2b2f32629b2c', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '815910f6f281bfe790576ffe4c179ad01a3b23ae', class: "z-accordion-content", part: "content" }, h("slot", { key: '8b7a54bbec50cc7c6034f184f08307f2697a39f3' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -219,6 +227,11 @@ export class ZAccordion {
             }
         };
     }
+    static get states() {
+        return {
+            "hasSlottedTags": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "toggled",
@@ -237,6 +250,7 @@ export class ZAccordion {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "isDisabled",

package/dist/collection/components/z-accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          <span class=\"z-accordion-tags\">\n            <slot name=\"tag\" />\n          </span>\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAmBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;8BAGY,KAAK;;IASpB,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID,uDAAuD;IAC/C,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBAClD,IAAI,CAAC,cAAc,IAAI,CACtB,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DACE,IAAI,EAAC,KAAK,EACV,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAC3C,CACG,CACR;gBACD,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  @Element() host: HTMLZAccordionElement;\n\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  @State()\n  private hasSlottedTags = false;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /** Check if there is any content in the \"tag\" slot. */\n  private checkSlottedTags(): void {\n    this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n  }\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  componentWillLoad(): void {\n    this.checkSlottedTags();\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          {this.hasSlottedTags && (\n            <span class=\"z-accordion-tags\">\n              <slot\n                name=\"tag\"\n                onSlotchange={() => this.checkSlottedTags()}\n              />\n            </span>\n          )}\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-accordion/index.stories.js

@@ -57,7 +57,7 @@ const StoryMeta = {
         "--z-accordion-content-bg": null,
         "--z-accordion-content-fg": null,
         "--z-accordion-hover-color": null,
-        "--z-accordion-highlight-color": null,
+        "--z-accordion-highlight-color": "var(--color-primary01)",
         "--z-accordion-right-padding": "var(--space-unit)",
         "--z-accordion-left-padding": "calc(var(--space-unit) * 2)",
         "--z-accordion-label-font-weight": "var(--font-sb)",
@@ -111,9 +111,9 @@ export const Stack = {
         "--z-accordion-highlight-color4": cssPropsArgs["--z-accordion-highlight-color"],
     },
     args: {
-        "--z-accordion-highlight-color2": null,
-        "--z-accordion-highlight-color3": null,
-        "--z-accordion-highlight-color4": null,
+        "--z-accordion-highlight-color2": "var(--color-primary01)",
+        "--z-accordion-highlight-color3": "var(--color-primary01)",
+        "--z-accordion-highlight-color4": "var(--color-primary01)",
     },
     parameters: {
         controls: {

package/dist/collection/components/z-accordion/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n  \"--z-accordion-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-disabled-label-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"isDisabled\",\n      truthy: true,\n    },\n  },\n  \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n  \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-highlight-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"highlight\",\n      truthy: true,\n    },\n  },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n  CSSVarsArguments<\n    | keyof typeof cssPropsArgs\n    | `z-accordion-${\"left\" | \"right\"}-padding`\n    | \"z-accordion-label-font-weight\"\n    | `z-accordion-highlight-color${number | undefined}`\n  >;\n\n/**\n * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n */\nconst StoryMeta = {\n  title: \"ZAccordion\",\n  component: \"z-accordion\",\n  argTypes: {\n    ...cssPropsArgs,\n    icon: {\n      options: [null, ...Object.keys(ICONS).sort()],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"—\",\n        },\n      },\n    },\n    shadow: {\n      if: {\n        arg: \"variant\",\n        eq: AccordionVariant.BACKGROUND,\n      },\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    variant: {\n      options: Object.values(AccordionVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    \"--z-accordion-bg\": null,\n    \"--z-accordion-label-color\": null,\n    \"--z-accordion-disabled-label-color\": null,\n    \"--z-accordion-content-bg\": null,\n    \"--z-accordion-content-fg\": null,\n    \"--z-accordion-hover-color\": null,\n    \"--z-accordion-highlight-color\": null,\n    \"--z-accordion-right-padding\": \"var(--space-unit)\",\n    \"--z-accordion-left-padding\": \"calc(var(--space-unit) * 2)\",\n    \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n    \"highlight\": false,\n    \"icon\": null,\n    \"isDisabled\": false,\n    \"label\": \"Text label\",\n    \"open\": false,\n    \"shadow\": true,\n    \"size\": ControlSize.BIG,\n    \"variant\": AccordionVariant.DEFAULT,\n  },\n  render: (args: Args): TemplateResult =>\n    html`<z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/**\n * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n  argTypes: {\n    \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n  },\n  args: {\n    \"--z-accordion-highlight-color2\": null,\n    \"--z-accordion-highlight-color3\": null,\n    \"--z-accordion-highlight-color4\": null,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"open\"],\n    },\n  },\n  render: (args) =>\n    html`${[\n      StoryMeta.render(args),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n      }),\n    ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n  render: (args) => html`\n    <z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      <z-tag slot=\"tag\">Tag 1</z-tag>\n      <z-tag slot=\"tag\">Tag 2</z-tag>\n      <z-tag slot=\"tag\">Tag 3</z-tag>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n  \"--z-accordion-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-disabled-label-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"isDisabled\",\n      truthy: true,\n    },\n  },\n  \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n  \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-highlight-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"highlight\",\n      truthy: true,\n    },\n  },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n  CSSVarsArguments<\n    | keyof typeof cssPropsArgs\n    | `z-accordion-${\"left\" | \"right\"}-padding`\n    | \"z-accordion-label-font-weight\"\n    | `z-accordion-highlight-color${number | undefined}`\n  >;\n\n/**\n * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n */\nconst StoryMeta = {\n  title: \"ZAccordion\",\n  component: \"z-accordion\",\n  argTypes: {\n    ...cssPropsArgs,\n    icon: {\n      options: [null, ...Object.keys(ICONS).sort()],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"—\",\n        },\n      },\n    },\n    shadow: {\n      if: {\n        arg: \"variant\",\n        eq: AccordionVariant.BACKGROUND,\n      },\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    variant: {\n      options: Object.values(AccordionVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    \"--z-accordion-bg\": null,\n    \"--z-accordion-label-color\": null,\n    \"--z-accordion-disabled-label-color\": null,\n    \"--z-accordion-content-bg\": null,\n    \"--z-accordion-content-fg\": null,\n    \"--z-accordion-hover-color\": null,\n    \"--z-accordion-highlight-color\": \"var(--color-primary01)\",\n    \"--z-accordion-right-padding\": \"var(--space-unit)\",\n    \"--z-accordion-left-padding\": \"calc(var(--space-unit) * 2)\",\n    \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n    \"highlight\": false,\n    \"icon\": null,\n    \"isDisabled\": false,\n    \"label\": \"Text label\",\n    \"open\": false,\n    \"shadow\": true,\n    \"size\": ControlSize.BIG,\n    \"variant\": AccordionVariant.DEFAULT,\n  },\n  render: (args: Args): TemplateResult =>\n    html`<z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/**\n * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n  argTypes: {\n    \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n  },\n  args: {\n    \"--z-accordion-highlight-color2\": \"var(--color-primary01)\",\n    \"--z-accordion-highlight-color3\": \"var(--color-primary01)\",\n    \"--z-accordion-highlight-color4\": \"var(--color-primary01)\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"open\"],\n    },\n  },\n  render: (args) =>\n    html`${[\n      StoryMeta.render(args),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n      }),\n    ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n  render: (args) => html`\n    <z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      <z-tag slot=\"tag\">Tag 1</z-tag>\n      <z-tag slot=\"tag\">Tag 2</z-tag>\n      <z-tag slot=\"tag\">Tag 3</z-tag>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-accordion/styles.css

@@ -177,6 +177,8 @@ summary z-icon.z-accordion-chevron {
 
 :host([variant="background"]) .z-accordion-content {
   padding-right: calc(var(--space-unit) * 2);
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
 }
 
 :host([is-disabled]) .z-accordion-label {
@@ -224,37 +226,3 @@ summary z-icon.z-accordion-chevron {
     --z-icon-height: 18px;
   }
 }
-
-/* Style for sibling accordions in a stack context */
-
-z-accordion + z-accordion {
-  border-top: none;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"] {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
-  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
-  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
-}

package/dist/collection/components/z-anchor-navigation/index.js

@@ -51,7 +51,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '91fa327dc685a23f2f645feb80957eab8ce2a486', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '3455aa67a11adaa0cb0f8571997a0a118ded5635', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '3e7ee00cbb6b5c3e353738c68d41c0392ce41ec0', ref: (el) => (this.nav = el) }, h("slot", { key: '35b61d7535025bd4daa6981bfbac5d249bfc59eb' }))));
+        return (h(Host, { key: 'd019c9a42fbdf7987ad2115fac3803e35e2c838a', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'cca133f6627d30ef523923dd288c351fe73a37d8', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'ae497ef7b0c4a54445aadadf90c5e2e0119a2d11', ref: (el) => (this.nav = el) }, h("slot", { key: 'b0aad81924302ff9b73ac6a8fceaa07a7aefac13' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-app-header/index.js

@@ -257,7 +257,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'a0bd0524157668d1ed6132f581596e91feef9c37', "menu-length": this.menuLength }, h("div", { key: 'a91c0c19ea534e7707dff0700fc3da571c3ff440', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'b19a7bbbc84d0fe7a516b0bdfb191572162ec79c', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '5769e4b6a5aaef8d99133268e8dba7769cdad8ed', class: "top-subtitle" }, h("slot", { key: '9f5979f6a544049f53dd07a59c7524192aaef936', name: "top-subtitle" }))), h("div", { key: '4a3a22a01bbe11e460ef6f72b4eed08e17743013', class: "heading-title" }, h("slot", { key: '6cd7e4dbfdaddb8a2716e8168fc1bba4121c4291', name: "menu-button" }, this.renderMenuButton()), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '7401663bd3b0cd3fe228789ca856e002a04d3581', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '685e52ce6b58cd839c34d7e5ab69c775604853e0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9b5d50462dcc1c2fde87c9ee7a7ba62d96b6c252', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9965ec165c2e2f20e96a70f121856bf7382e1ecb', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a823113610378e9d634bf1779f5be2f5dc0c39f1', "menu-length": this.menuLength }, h("div", { key: 'c93cc0d8ef6cfba9875b2a4be50f065a4c276329', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '5138c2f0828d182ca610696b341f7292a12dc29b', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '3ccea8b1134d18c47e7736683090a5cff1f5805c', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7f2e046036bb62644b4d20ebcea6879d146f7900', name: "top-subtitle" }))), h("div", { key: 'a6be051f516f7e23348c7e3781463048f49c4fb5', class: "heading-title" }, h("slot", { key: '561fab39ded745bfc44a3ed6b16df481771b71eb', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'd0339b71194c5b61da665a3ccf38f9188a6b11c9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '016d2598ab5e436713dc70a100100ecc7490729e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '8cef304ecced8d2f4f6ba454db5c7ef74fcaed87', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9bd29440ce257ab3b6f58567713823c2047d7b2c', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }