@zanichelli/albe-web-components 19.5.0 → 19.6.1

package/dist/esm/z-breadcrumb.entry.js

@@ -211,10 +211,10 @@ const ZBreadcrumb = class {
         ];
     }
     render() {
-        return (h(Host, { key: '84c8968de32dd42b1c186c3e21ef455ed3419b1b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'a33b0ec178cf876482c3c598be9b08f3af192e74', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'ea18e6bec466825e194807d80ecf0c132915b8a4', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '080ce8ea0bc8dd13d94e1ded21878f61a8e1f09e', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'b73a28050ec43c5441b675b497236ae0210b6657' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'ebced04e4063e2db12f1ab2a5fa39fdb447973fa' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-button-sort.entry.js

@@ -41,7 +41,7 @@ const ZButtonSort = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '8bb124d8ffcce4ac1d7c01bc31f9256da769a90b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '6ab1b449e4d9c539683353cdcf8a4c8b3bdfa578', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'd67c255b32c814e0b6afec14c79ba422b8b2a57d', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '77ea4b67643b28db4737dc301bc416595581b93f', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '098881514d797b081e36f7ad66c9f60ea2423b27', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '269e2d1a959dde597965561177dde2374d92a27b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'e33cb753f6c120cdd12f5ea4251ca626cfc28711', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'c852c01e557ca5245352ddcc7e35a9fe2d9710fb', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'abc484df3ccc4a976831c3664e1e451620741419', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'f6325a573dd1f8f2208fb3edd70d176a2b7ad141', name: "caret-up-down", width: 16, height: 16 })));
     }
 };
 ZButtonSort.style = stylesCss();

package/dist/esm/z-chip.entry.js

@@ -17,12 +17,12 @@ const ZChip = class {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '82e7b420794008dd46a89c207a6d72510a28d562', class: {
+        return (h("div", { key: '9a098f7915cfbb84e2290a853fe59b7e30c6f555', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
                 [this.variant]: true,
-            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && h("z-icon", { key: 'c66f7b3473c3f7f2af628645e59a6b9a75eafa8a', name: this.icon }), h("slot", { key: 'a5fbe9ef849681546a521531f0a69ef29fc2bc63' }), this.interactiveIcon && (h("button", { key: 'f4adbbb6472e8a04498811dd0ffa077784cbcba6', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '690dc0bed21c44a3d20628192b0cc99665d90b24', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && h("z-icon", { key: 'e563c31c093f46beeda6e658c5c05e7c16a56204', name: this.icon }), h("slot", { key: '9b186a85b090df0ab12c030ee3a517ef253e62d6' }), this.interactiveIcon && (h("button", { key: '4a5dd47a8ec40062d0b564f165adb81b11a3b4a5', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '092864aef71920ba68f9d778797489e476c51971', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/z-color-picker.entry.js

@@ -194,7 +194,7 @@ const ZColorPicker = class {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: '8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: 'ea14b99e379cb85851c041edc4c4136afd693ba1', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));

package/dist/esm/z-combobox.entry.js

@@ -305,7 +305,7 @@ const ZCombobox = class {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: '6ada0f3dc9aebeb5c97843c18935199f6c981e28', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: 'a2df3543d11b1e568d1aa397a0cc4acd78496a1b', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-cover-hero.entry.js

@@ -40,9 +40,9 @@ const ZCoverHero = class {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'bb147f3b614268218fba165360012031572ec76b' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '94a8612be36a5b2b14c93e68b8b6ecbf2cfb47c9' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '94c697c41b4d98ea9f5be00634a3de1fd214ea72', class: "main-container" }, h("div", { key: 'e1a181735381dbc2472085c7e1d7082e1564185a', class: "cover-container" }, h("slot", { key: '1692cfa7f6a9ee926a262e04e8912a72f5a95cca', name: "cover" })), h("slot", { key: 'c13a059c162d85e46d3f116a8b1fd9e3a6e363f7', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '7b57691247bc581f9c43f36c475892cf7927abbf', class: "main-container" }, h("div", { key: '46ff0b8886b5450e2a2d3a5df5cc4fd3adf5962b', class: "cover-container" }, h("slot", { key: 'c84a53350c2077d1201cd938745cb2e5c797b76b', name: "cover" })), h("slot", { key: '6debb9704761c43ed9c485b66e1e97e41f7780da', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/esm/z-dragdrop-area_2.entry.js

@@ -21,12 +21,12 @@ const ZDragdropArea = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ec92afc8d6998ac3595b4c84121cc80204367bbb', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: 'ccf7bb034552345593b13a996bb80af42d808f41', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '6008c32e681b7c8f9f1063bba50c6106e12599de', class: "dragover-container" }, h("z-button", { key: 'ea4bfd5b7ee6d05241f5efb18844cd8beb10dde2' }, this.dragAndDropLabel)), h("slot", { key: '95aa7512bbbd0efcea3c3dbafecc4b33a1d24f87' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: 'efa401f0a7885029e1c1c403b94daebf7f8d24db', class: "dragover-container" }, h("z-button", { key: 'd302fd74282ea98b68cad4f090a1985f8f70a256' }, this.dragAndDropLabel)), h("slot", { key: 'e558e6fcf2f1ca7dd7b1dc617d3e98879e8c9a04' })));
     }
 };
 ZDragdropArea.style = stylesCss$1();
@@ -991,16 +991,16 @@ const ZModal = class extends ReactiveControllerHost {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '2fd3e4e2ddcca401f85e379b2a3110f53d7a3766', class: {
+        return (h("dialog", { key: '081900076d57b4b96592ec9491b7c46dc705f3bf', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'f0f3eee2e047afb3e71fb0b6f706c2e1aa9a6e84', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '1e13132fada1a6446f21820e0759fc79728e48d3', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '9f3fb52e15a1add072ad479b1e89aa6aa8a66613', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '38b22b4d59913dfa9ace56330e37354406db8533' }, this.modaltitle && h("h1", { key: '7c94dc6d10aca3812dd2ca1ff498ad9d8b34aecc', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '9bc717fd0b831c4de74a38eb92a69a44f51a0a4d', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '346772b20ab0d14758433644330f178bfbf147fd', class: {
+            }, id: this.modalid }, h("header", { key: '3e35e0b3d568b2ebab9bb95cb3493fcb1e1d5b81', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '4da4deaab0437652909b9c8fae45744b9bbd8bb6' }, this.modaltitle && h("h1", { key: 'dd392fffb016cd7300544ac0be8225799ec831f1', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'a3aaffbfbce5f6c6daccee1cd34effe9eeaeb6b6', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'ab70680024e1d43e5b4fdb7348eefeccefa8efdb', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '10bb35f9925f7df7826566181db8bfaf07d665d1', name: "modalContent" }))), h("div", { key: '62fa5aa67f2fe84f88caf0af308ca5c4c0f2162f', class: {
+            }, id: "modal-content" }, h("slot", { key: '1170bba2f95b5936138443a61624ed4906ae57de', name: "modalContent" }))), h("div", { key: 'df1c02457d80a75ffcc46cc670b4220df75c4150', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/esm/z-file.entry.js

@@ -35,7 +35,7 @@ const ZFile = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: '12ffcf9cd4e06418f8ef0c0fe6f901519ea81578' }, this.allowPopover && (h("z-popover", { key: 'b77adda2c9f80584b3e74ab82d5c8b5198b50d88', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '9d0bb9bbdb210ce143a129ca4f46a6409b85b393', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '9d9c8f64f63c4723c2f6540be7d6c534650a847d', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '959647e217388cad43c3bb3536a44ce22b548067', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '1f3779a71046e1f2b90f42fdb4cac9c6f3e5522d' }, this.allowPopover && (h("z-popover", { key: '15979daf21b0aa2595427f753cbf8ced1bd69b17', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '93f097d69920bae187474bec3e66146fac747758', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'f636e2b2116875edd932439ed4170afb69e23027', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '7e200d1d86551cd36d10354323be1e5b0b6e8306', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/z-ghost-loading.entry.js

@@ -7,7 +7,7 @@ const ZGhostLoading = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: '36459896003d9c65cc0e969a184987ddcac8c962' });
+        return h(Host, { key: '15c0d5cc4985a23bd1cba510e6c1d323ac0be0c4' });
     }
 };
 ZGhostLoading.style = stylesCss();

package/dist/esm/z-info-box.entry.js

@@ -13,7 +13,7 @@ const ZInfoBox = class {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: 'c3062d082fff5558ebcc44b6c15feaa9d4fdf9f9', id: this.boxid }, h("slot", { key: 'd4d4b0bdb644a777c22489afa52c990748bf1da7', name: "content" }), this.isclosable && (h("z-icon", { key: '4b02226c9a11e800ad1ac956471683f4546d39c3', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '3cc569ffebd21d03c33f5764291fca612caae620', id: this.boxid }, h("slot", { key: 'a4110163e695bbbfa7e291771e3b531f3f678a3b', name: "content" }), this.isclosable && (h("z-icon", { key: 'bb3ec9d56fa2c52b38ceea0cfaf70a5c04dffd65', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
 };
 ZInfoBox.style = stylesCss();

package/dist/esm/z-info-reveal.entry.js

@@ -53,7 +53,7 @@ const ZInfoReveal = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f9bc69d9bdbc9b2e30687f54877b241b51df3e45', open: this.open }, h("button", { key: 'f0dc5ceaf6f24d5597699b3158074403bac8f641', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '5cddcacfd8d9e5f3dc8a1c171aa50621d6e2b044', name: this.icon }), this.label && h("span", { key: '5417e101306098a399a9f8e6a39d1637be4f8901', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bd57a9686560c17c5d670a6fa87396a509ffb50a', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'bd5fd2a1cf9c2a95fbb9ea966a0f09ec1940c9f9' }), h("button", { key: '73a9178e3ea240abad5d91f2fd82879313d2df24', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'de404809d5ea1fd51b36abc74518448c7502927e', name: "multiply" })))));
+        return (h(Host, { key: '062623399b8e6d19274dd482570f4ae1649ef23b', open: this.open }, h("button", { key: '1fc4f3951ad4055943e7ef8fc61d94cc425e70c2', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '67d263d17b3a238af33c7fd5785a4409b3817eb7', name: this.icon }), this.label && h("span", { key: '8de421e649b240588bd11a87a4f241ddd7bee004', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'd588ee526e87e72712a00b78c9090ed40b6473c9', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'd6739b3a91ba44106ee1f72abd185bf2a7bc5727' }), h("button", { key: '978742081a1d1f51b0e05d99989e0bfc5c7cf276', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'bef98b8858f38d06099d94a33bb8b97c588a8465', name: "multiply" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-input-range.entry.js

@@ -116,7 +116,7 @@ const ZInputRange = class {
         this.needsNativeValueSync = false;
     }
     render() {
-        return (h(Host, { key: '4297a1ce9ebf313882a70733661321a2f5bde38d' }, this.label && (h("label", { key: '933af2d529a852f226e0fe9eb18109fc5b7feccd', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: '5a6a44ec7bc2fe7a292474027c1f39fc6d7cb9aa', class: "input-container body-3" }, h("input", { key: '2759d81abdf6106cd29a261081b2d60495d2fe8d', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '252ee3a382b279cf6bb397d066300dd97cca2537', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: 'e8795cd4df104297809f79f13fdf5317cbb20ec1', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '92186a95ac641beaff9afdd95537f85161ab7186', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: 'd09e29dc8bef5b376a5d04d138f70c5c43f8bebe', class: "edges body-3" }, h("span", { key: 'fea33d9d289b5f31da1b0c756b347fa25892940f', class: "min" }, this.min), h("span", { key: '602ac1fc4957b2262bb2bb2c802898c6296e31f6', class: "max" }, this.max)))));
+        return (h(Host, { key: 'bbe608639444be9549dc727cbdbc68f906b41157' }, this.label && (h("label", { key: 'c2ee1ca74d1c5ccc09fb00b52443b4b97b6dfbfd', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: '5f17e9204d1d07728adac5a237d664f6ec1f10c9', class: "input-container body-3" }, h("input", { key: '8574502254f8f457cce3f9124d8097c850d68fc8', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '843596b2fe410d771ccbeb059d544a3f9daeb302', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: '2be5826efecc132931d123a6be24822b0e224c81', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '92a1578d37eb6ac6823dd5e9e547858e8b6d94ab', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: 'b0ad1133691483dbe2a135762b81311d32b6eba6', class: "edges body-3" }, h("span", { key: '699a22b70647ebf005aca8766e36007dc588cd0c', class: "min" }, this.min), h("span", { key: 'fbe2ea77473fc068c2ba7f9849cbb07225912fff', class: "max" }, this.max)))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/esm/z-logo.entry.js

@@ -14,7 +14,7 @@ const ZLogo = class {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '35e05af6b6f866d00ee18e9f88c56665a70ffaf1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: 'ab19d473781e8ab273d484799ea87324dd9188cd', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
 };
 ZLogo.style = stylesCss();

package/dist/esm/z-menu-section.entry.js

@@ -175,7 +175,7 @@ const ZMenuSection = class {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'fff56aa316372fc2df80738c86be52be59e4deb9', open: this.open }, h("button", { key: '89630a6dc1985a9236dd7f7d0fdd2b5e5b8bd580', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '5b131d904e2154fb8c852a734bcc8dd9b421da65', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '0463aa91e57fa4766c0a11fd3e329752fd770240', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'f919168a46d3d3ebd7c12fce97d84f029ee938bc', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e21f494480c18514ff4081b2aa75a8f856f74cc6', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'e6175335e6b2cff9e1789220c6ff64ca70b1e8b4', open: this.open }, h("button", { key: '097d0ad86fb95b7c29c4dba6c55cad958dad1b6c', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'bb9505220755332d911c976255aac4d228b615b8', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '92c9f44aca699c5604d7c67584698f30b39c7d27', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'fc43a6643a3bb3c6814da59f61a2e1411c5662de', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '4eb19cb44a7fd0f4e083c79bbe755d8016bb2bad', name: "section", onSlotchange: this.onItemsChange }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-navigation-tabs.entry.js

@@ -230,10 +230,10 @@ const ZNavigationTabs = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'e42f29ee8dd02deb457e708d9a81cba1c512e316', class: {
+        return (h(Host, { key: 'c01be594e11d9cf1d698b06c83ec4a888c7af5b4', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '820b7b1f82db2415cf6c689388641eb66b59e37e', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6f61292f4e0587755981a5baff24034c71ef6fcf', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'df2a90ce465c82acb651ae92782edce04aafd55c', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'b441002c32b7de956a388f93568d2404c8faf5db' })), h("button", { key: '83de33b5686491cf99350dc23ab5b34a5c1a2846', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '725767832f004a26638807c64b8b305694499d55', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'aa791c858ad0dd69592c8a3e2edb439bce3168dc', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '50092cbfdfec8f07917d3c6aaed9886aef333ba7', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'c4a2563c2179dc1e345d8793643cf786243d96b6', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '56dfd0a8c140b9d426a3ee5675b7d602b0ca2434' })), h("button", { key: '1ffabd713e915b0973f4f4958564a842cb898c30', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'a0dd7e2d95fab2c2a0cfeeca289b040ee72d5bc8', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-notification.entry.js

@@ -31,7 +31,7 @@ const ZNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'dc72b8c965151d9928aa0ddede2796c09fdc5da5' }, h("div", { key: 'a3492b0ec98ed322e2e6b41b10ae7f7141a794f1', class: "main-container" }, this.contenticonname && (h("z-icon", { key: 'a6754bf4dd0803636e223465e8e0f7d3f0289fd5', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'b0761286fda860b2531b97f3550160cbaba31c69', class: "content-container" }, h("div", { key: 'ea7441390672258a330fb137c17376c0f736b022', class: "content-text" }, h("slot", { key: '63c90279f0a02606bace42317f9329f4a92b0523' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '510ab69472d1e530aef292bfa416f50a7f222d0b', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'c8577b0e8d0cec6573a6b69cd312738d8e866e58', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'b6c163251b82c717b8b6ebe5d50ddbc02f5ea318', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: '3897fea3707c58676c02f631f58d5c00b3f028fb' }, h("div", { key: 'a0b17e87acd277553b7ca9e2f0ab196fe4b883b3', class: "main-container" }, this.contenticonname && (h("z-icon", { key: 'b44db99e2d8f86fba47615d02b6aa39590f48fc9', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '403853f403a68d3b86699c2ff2259f9e23904d9f', class: "content-container" }, h("div", { key: 'be2e44f3642e630a9243321d1e00d0d5fe2eb4cf', class: "content-text" }, h("slot", { key: 'e148f392541b986cfc91e857f8817c164e66fd4d' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '91476468202a8c102657fafade85a96306742971', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '988878e4330ac03f4f732b095f82d976ec60fea0', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '1f9d1caaafa38d826462bfab03588c854ffb3d75', name: "multiply-circle", width: 16, height: 16 }))))));
     }
 };
 ZNotification.style = stylesCss();

package/dist/esm/z-panel-elem.entry.js

@@ -12,12 +12,12 @@ const ZPanelElem = class {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '46e51aca7f95d8725e6dcdc8c59827ff746bb1eb', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '70da90dd66acdd19751cd3b80834d151857497be', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5f44b565c0fffe7056ec217066c9ffd1ad2aa5ec', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'dd425e4fb93951570cd66f605c6e39cb12234646', class: "panel-elem-link" }, h("a", { key: 'ac7e5734b47ead56cc3d2e0ecf7eb81eb3e0dd18', class: {
+        return (h("div", { key: '3d07681afc0fea36faebcb7feb5a8130db27672e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '0ceb3c7b1a4a0b201dee2ae89ac094e4adfdff52', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5fbfffb0c4ab329e207ec4c9eccc87fa7ec85b4a', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'fc374daf3f398ce285209f2c4a11ecd78e2e1af6', class: "panel-elem-link" }, h("a", { key: '1aabbd26a88c3d6b9ae9da80330f882a1bedadf2', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '405152dd34d8aaacee615f0ec8302d2c305e3dc3', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '1ce8a5eda374656fe7bdd750d2be29f65d102395', class: "panel-elem-desc" }, h("slot", { key: 'fb7f00494aad2bc3228fdc2221d329ec52460676', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '2adfbfee7ceeb9f9ca87f5c3684424142dea1752', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '0dffd18adfba92a541a00e80857b7eef8219f8bf', class: "panel-elem-desc" }, h("slot", { key: 'd135bf6110db25151199d167c659e5bcab7acecd', name: this.descrSlotName })))));
     }
 };
 ZPanelElem.style = stylesCss();

package/dist/esm/z-popover.entry.js

@@ -506,7 +506,7 @@ const ZPopover = class {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '7fbbbdd9f347c6b5159070e3c6e59748d6fc93f1', "current-position": this.currentPosition }, h("slot", { key: 'f23968908e927fb14a32b74834918aa837f984cd' })));
+        return (h(Host, { key: '797563b1602bb4c64fb75dabc54286c24b292577', "current-position": this.currentPosition }, h("slot", { key: '84d724dbb9bd512fb2101cf8e27af2b71658a09b' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-result-card.entry.js

@@ -22,7 +22,7 @@ const ZResultCard = class {
             return (h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
         };
         this.renderOperaCard = () => {
-            return (h(Host, null, h("z-book-cover", { cover: this.cover, fallbackCover: this.fallbackCover, multiple: this.hasMultipleCovers, bordered: true }), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
+            return (h(Host, null, h("z-book-cover", { cover: this.cover, coverAlt: this.coverAlt, fallbackCover: this.fallbackCover, multiple: this.hasMultipleCovers, bordered: true }), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
         };
         this.renderInfoCard = () => {
             return (h(Host, { class: "info-card" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link" })), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));

package/dist/esm/z-result-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-result-card.entry.js","sources":["src/components/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/z-result-card/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  min-height: 11.125rem;\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  gap: calc(var(--space-unit) * 2);\n}\n\nz-book-cover {\n  --z-book-cover-stack-shift-x: 6px;\n  --z-book-cover-stack-shift-y: 8px;\n  --z-book-cover-height: 158px;\n  --z-book-cover-border-radius: 0;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  flex-grow: 1;\n  align-items: end;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n/* info-card */\n:host(.info-card) {\n  height: 5rem;\n  gap: calc(var(--space-unit) * 1.5);\n}\n\n:host(.info-card) .info-icon-container {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  padding: var(--space-unit);\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n:host(.info-card) .info-icon {\n  --z-icon-width: 1.125rem;\n  --z-icon-height: 1.125rem;\n\n  fill: var(--color-default-icon);\n}\n\n:host(.info-card) .card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) / 2);\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n:host(.info-card) .card-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n@media (max-width: 767px) {\n  .card-title {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    line-height: 1.4;\n    word-break: break-word;\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard implements ComponentInterface {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /** The title of the card. */\n  @Prop()\n  cardTitle: string;\n\n  /** The subtitle of the card. */\n  @Prop()\n  cardSubtitle: string;\n\n  /** The authors of the opera. */\n  @Prop()\n  authors?: string;\n\n  /** The URL of the cover image of the opera. */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL. */\n  @Prop()\n  fallbackCover?: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /** Enables the \"info\" variant of the card. */\n  @Prop()\n  isInfoCard = false;\n\n  /** [optional] Set a specific heading level as html tag for the title. */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLElement => {\n    const TitleTag = this.titleHtmlTag || \"div\";\n\n    return (\n      <TitleTag\n        class=\"card-title\"\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n      >\n        {this.cardTitle}\n      </TitleTag>\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class=\"card-subtitle\"\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host>\n        <z-book-cover\n          cover={this.cover}\n          fallbackCover={this.fallbackCover}\n          multiple={this.hasMultipleCovers}\n          bordered={true}\n        ></z-book-cover>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host class=\"info-card\">\n        <div class=\"info-icon-container\">\n          <z-icon\n            class=\"info-icon\"\n            name=\"link\"\n          />\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"z-result-card.entry.js","sources":["src/components/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/z-result-card/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  min-height: 11.125rem;\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  gap: calc(var(--space-unit) * 2);\n}\n\nz-book-cover {\n  --z-book-cover-stack-shift-x: 6px;\n  --z-book-cover-stack-shift-y: 8px;\n  --z-book-cover-height: 158px;\n  --z-book-cover-border-radius: 0;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  flex-grow: 1;\n  align-items: end;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n/* info-card */\n:host(.info-card) {\n  height: 5rem;\n  gap: calc(var(--space-unit) * 1.5);\n}\n\n:host(.info-card) .info-icon-container {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  padding: var(--space-unit);\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n:host(.info-card) .info-icon {\n  --z-icon-width: 1.125rem;\n  --z-icon-height: 1.125rem;\n\n  fill: var(--color-default-icon);\n}\n\n:host(.info-card) .card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) / 2);\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n:host(.info-card) .card-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n@media (max-width: 767px) {\n  .card-title {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    line-height: 1.4;\n    word-break: break-word;\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard implements ComponentInterface {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /** The title of the card. */\n  @Prop()\n  cardTitle: string;\n\n  /** The subtitle of the card. */\n  @Prop()\n  cardSubtitle: string;\n\n  /** The authors of the opera. */\n  @Prop()\n  authors?: string;\n\n  /** The URL of the cover image of the opera. */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL. */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Alt text for the cover image. When provided, the image is exposed to assistive technologies. */\n  @Prop()\n  coverAlt?: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /** Enables the \"info\" variant of the card. */\n  @Prop()\n  isInfoCard = false;\n\n  /** [optional] Set a specific heading level as html tag for the title. */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLElement => {\n    const TitleTag = this.titleHtmlTag || \"div\";\n\n    return (\n      <TitleTag\n        class=\"card-title\"\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n      >\n        {this.cardTitle}\n      </TitleTag>\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class=\"card-subtitle\"\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host>\n        <z-book-cover\n          cover={this.cover}\n          coverAlt={this.coverAlt}\n          fallbackCover={this.fallbackCover}\n          multiple={this.hasMultipleCovers}\n          bordered={true}\n        ></z-book-cover>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host class=\"info-card\">\n        <div class=\"info-icon-container\">\n          <z-icon\n            class=\"info-icon\"\n            name=\"link\"\n          />\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/z-select.entry.js

@@ -20,6 +20,8 @@ const ZSelect = class {
         this.disabled = false;
         /** the input is readonly */
         this.readonly = false;
+        /** the input is required */
+        this.required = false;
         /** input helper message (optional) - if set to `false` message won't be displayed */
         this.message = true;
         /** the input has autocomplete option */
@@ -353,7 +355,7 @@ const ZSelect = class {
             h("z-input", { class: {
                     "active-select": this.isOpen,
                     "cursor-select": !this.autocomplete,
-                }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, size: this.size, role: "combobox", "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", "html-aria-autocomplete": this.hasAutocomplete() ? "list" : undefined, onClick: (e) => this.handleInputClick(e), onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => this.handleInputChange(e), onKeyPress: (e) => {
+                }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), required: this.required, status: this.isOpen ? undefined : this.status, size: this.size, role: "combobox", "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", "html-aria-autocomplete": this.hasAutocomplete() ? "list" : undefined, onClick: (e) => this.handleInputClick(e), onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => this.handleInputChange(e), onKeyPress: (e) => {
                     if (!this.hasAutocomplete()) {
                         e.preventDefault();
                         this.scrollToLetter(e.key);
@@ -472,7 +474,7 @@ const ZSelect = class {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: 'f2be06f6abfff472e90031034431f4e7acb27be6', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '0656bc0ce5a7ba47aae6e467ff5291631abb35e5', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {