@zanichelli/albe-web-components 19.1.3 → 19.1.4-RC1

package/dist/cjs/z-myz-card-alert.cjs.entry.js

@@ -56,7 +56,7 @@ const ZMyzCardAlert = class {
         }
     }
     render() {
-        return (index.h("div", { key: '73de41fcf16d7def773d63fb87b1d3a39e0619cf', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '8ed39f9dea3fc6fc2575e8e731a433ed3b5eb3e6', type: this.getAlertType() }, index.h("div", { key: 'efb81456a561b50027667a7aa58583b353f84a07', class: "relative-container" }, index.h("z-icon", { key: '4e6f621da2fa1d95422e4ad734836403b554a9b9', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'f73f48f20ec198e2ae08c212f9647436fdddcd3d', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: 'abbbc3d619829044615657d29f6af4849f9ff27f', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (index.h("div", { key: '78631a84365b1c5c436dde0fd52b2c2866deebfe', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '8e54a3f758e17f6fff72efdd994c00a237965153', type: this.getAlertType() }, index.h("div", { key: '17029eac681c851ce079a4471b229f105ac018ad', class: "relative-container" }, index.h("z-icon", { key: 'bbbe8c42c16d3571e5acdd56d3c2332a2eb36c18', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: '7ca5d395e3631b20f50b9cd62724a56721f3ec77', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: 'ac7627ad12844fa386e550d48ac0267579e3a2e0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js

@@ -27,7 +27,7 @@ const ZMyzCardDictionary = class {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (index.h("div", { key: 'a0474433057659bcb67ef2b797a6047f90bd5440' }, index.h("z-myz-card", { key: 'efa1f2c8832fd2cc1ea057840059be67a16e3fdd' }, index.h("z-myz-card-header", { key: '38eef5801a486eb0d4b024fb7a050c76ad8af298', titolo: this.name }), index.h("div", { key: '415afa8d0500dbd40c5075e0cb46219656234d99', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '4b6a60e5e0f601204c6a44a61eae4150958176cd', class: "front" }, index.h("z-myz-card-body", { key: 'd1a4b3b1427fb158876b4c16673bc00b931cccb5' }, index.h("z-myz-card-cover", { key: 'f665c202781a4524654428400f31382a8f74b890', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: '40c8d21689a0aec3f2f195aa6128db28331be614', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: '58d51c4badd5807b9e918eb31e0194d3191b7c10', class: "back" }, index.h("slot", { key: '1e44e28b5a96e398e9c14234933aa54ad361fa1f', name: "info" }))), index.h("slot", { key: '796b2270fc63bd5f25905c5f823d05c7237d18da' }))));
+        return (index.h("div", { key: '4a22e906f15a897300c47195338a4ac7a8d097e0' }, index.h("z-myz-card", { key: '10ed7010f036216a498600fd7203ffb12c9dcdbe' }, index.h("z-myz-card-header", { key: 'df5a2bacb28913152f3f26172c6de9ea284722b1', titolo: this.name }), index.h("div", { key: 'df91b83426145ccf632233e2c0443e4f48c8b435', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: 'dfc0904493c116f39fd773fa93bac35eb8291c56', class: "front" }, index.h("z-myz-card-body", { key: '92c03400d1bafe40b1832cc5385d234acdcb589d' }, index.h("z-myz-card-cover", { key: 'de77df38946fa1dfcea760e46c371474bc034515', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: 'c01d012aab0f5fe885482b3cc56614f1944faa95', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: '8ce8e9790fa052fc7fcbd82063b77bbce10e2eb4', class: "back" }, index.h("slot", { key: '8f8136511b5e5e297d09e40f244d77df22e90dfb', name: "info" }))), index.h("slot", { key: 'bb52dcbe9f214bb84159a0d271d16a35978b82ac' }))));
     }
 };
 ZMyzCardDictionary.style = ZMyzCardDictionaryStyle0;

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js

@@ -12,7 +12,7 @@ const ZMyzCardFooterSections = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '8752f5693a9cd8561849f630067c1de37e4756bd' }, index.h("footer", { key: '081a20bcf923efe3b769e4e8d1f5b2199a8d8b81' }, index.h("div", { key: '72bfc00be9c66460dbcace344f6c0e9f8cd8e9b9', class: "top" }, index.h("slot", { key: '38eda715a4be3c715bdf4eb75c4332dd8d65e39b', name: "top" })), index.h("div", { key: '0f29a8ecb2233df5ad28ab834bed3056e4e4c1e5', class: "bottom" }, index.h("slot", { key: '48aab990a4c8444c625ae8ac14f06f460c4abdae', name: "bottom" })))));
+        return (index.h("div", { key: '4376492df8f4ac40ddb747fbb84702d7306a087d' }, index.h("footer", { key: '65ad57d32ecfa342c12900d2341c120fb2b13287' }, index.h("div", { key: 'a76dc6bd6b6e0702a0290f19226a5545993b8d87', class: "top" }, index.h("slot", { key: 'bce482d729d4f3d3e74eee129994e7d4593e6c8e', name: "top" })), index.h("div", { key: '8e440e41d186ffc5673bf0dcf0dc99fff504c043', class: "bottom" }, index.h("slot", { key: '8b685dd25a9049c960aa2272ced67556a3490654', name: "bottom" })))));
     }
 };
 ZMyzCardFooterSections.style = ZMyzCardFooterSectionsStyle0;

package/dist/cjs/z-myz-card-footer.cjs.entry.js

@@ -64,7 +64,7 @@ const ZMyzCardFooter = class {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (index.h("div", { key: '7b0479b93d61f8d182ad5269333630361c652797', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: '59324b2757ba2f9332ea06bdfb11a85732466ec3', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: '3f1c486e9a8e7f6db48f6a5cd8eda7f8e052bcf0', class: "toggle" }, index.h("slot", { key: 'a4f3634cf6be3d79a8453f1529928cecb3babfef', name: "toggle" })), this.titolo && index.h("p", { key: '933b6baf1071591e1335396e66e9080ff165866e', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: '834e49c6d7c0ae61ff5822649f3c67001c645d23', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '584ea59693ce6c16a54493c16ea050ea01a3be3c' }, index.h("p", { key: 'e2fec0db112fe8ef05d8673f0a1e79f24a57f302', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: '2d6a3fbf5689c100fbed7333ad8a357e26d54970', title: this.getTitleAuthors() }, index.h("span", { key: 'e67cfd15c8103539a836db83d2b4d02f4c8aaf93', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: 'baf170aabdb3814b6d594a55e1e5d13757d31df9', class: "year-isbn" }, index.h("span", { key: '177324ca661350ebfa145715fc52ec58199e61fc', class: "isbn" }, index.h("span", { key: 'a78a8007d945837cc78d6df7a6ab2b91ad5f74fd' }, index.h("span", { key: '64173a3d213eb147b18bc801719b7e9c481c5a04', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: 'e7c65aff9800a923085af1c793a3127423490493', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: 'c8d251da5c5f4dc121295415a14ccdf66f2f77a0', name: "list" })))), this.customContent && index.h("slot", { key: '659c4589702dd06ea81a9041c6e14a724992618b', name: "content" })));
+        return (index.h("div", { key: '83e5307ed8967021822985e89efa8558d0018e72', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: 'cf70e9a043cb396ae4aabc3f8e01d1dcfa3d5665', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: 'd6bdb1b37ad753489715fafdc5304de27bf85edc', class: "toggle" }, index.h("slot", { key: 'b35d85cf87e3cd59d9989c1c7d4d7139fbc4d549', name: "toggle" })), this.titolo && index.h("p", { key: '36ad25e514b88f22927ee74d4a0a81ccfe52cc62', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: '56c2b85852b762e305a69a7f977f2a8fb7ec12a3', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '1cbc7add9f6238292fc9ea7567a51ccfc62b46c7' }, index.h("p", { key: 'c0404f81e382330d6e56320f02aceee17e085926', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: '0ec1e3a90d09bc379b34269b276da18e3a4f9388', title: this.getTitleAuthors() }, index.h("span", { key: '8d65743c8185c0ee4eb3c071f535eb5cda8dabab', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: '744e7e705826acfc3f2a9f9305250a0ecb293274', class: "year-isbn" }, index.h("span", { key: '9d29d231ed9186ffeb7376cf947613a581b626da', class: "isbn" }, index.h("span", { key: 'b3f8863a8d5e21438dfcaef4394c2f92ae513913' }, index.h("span", { key: 'b88062286041d060510ff4d17362a2f29485d15f', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: 'ded3e83f86629e34067e1dd316e54427b65cac6f', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: 'a5239567c931b5b880eef53a09e934dd8e7b65de', name: "list" })))), this.customContent && index.h("slot", { key: '42670c82172f6f86102f0d51209e2297cdf2c338', name: "content" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-myz-card-icon.cjs.entry.js

@@ -15,7 +15,7 @@ const ZMyzCardIcon = class {
         this.ariaLabel = "";
     }
     render() {
-        return (index.h("button", { key: '511b34381c62707a1408a9769536d3d0ba3223bb', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: 'a935b5d22370a4e7a35a458a6c92ee0aa1a7918a' }, index.h("z-icon", { key: '91f7d3cb733dff820b3429d1efea2c790d739df2', name: this.icon, width: 16, height: 16 }))));
+        return (index.h("button", { key: '9635ccd0f31e2fdf3e23cb14093b5eba6849c398', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: 'de736d5eb1390564e2ffafb5a250594c8cf7a880' }, index.h("z-icon", { key: 'f93ea254dc71bf5ffae324ebab7bc467f511e403', name: this.icon, width: 16, height: 16 }))));
     }
 };
 ZMyzCardIcon.style = ZMyzCardIconStyle0;

package/dist/cjs/z-myz-card-info.cjs.entry.js

@@ -122,7 +122,7 @@ const ZMyzCardInfo = class {
         return (index.h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, index.h("span", { class: "license-heading" }, index.h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", index.h("b", null, this.cardData.offlineLicense.expiration), index.h("br", null), "Installazioni disponibili: ", index.h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (index.h("div", { key: 'b92068a65906ed7ea0aad97d591085fdc7959bfa' }, this.renderCloseIcon(), index.h("div", { key: 'c96a25a92165b7a7741413e3aa85e42d4f3dcf82', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: '9b2ce0862ca8c6910bff49675c264b5fb06065e7', class: "cta-wrapper" }, index.h("slot", { key: '1de5c2a82c9058ff8a09ef78954ad7f423f5c46e' }))));
+        return (index.h("div", { key: 'd1cea01909cd1c227b51cdc35de24751da0a0018' }, this.renderCloseIcon(), index.h("div", { key: '07fb4515f7735245515acf5b0b8685198aa2249a', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: 'cbaf2982c5ca62b1049ee900af1611ba01aa50fc', class: "cta-wrapper" }, index.h("slot", { key: '13033a69da6547029197f008abe3f9953eb09c12' }))));
     }
 };
 ZMyzCardInfo.style = ZMyzCardInfoStyle0;

package/dist/cjs/z-myz-card-list.cjs.entry.js

@@ -32,7 +32,7 @@ const ZMyzCardList = class {
         });
     }
     render() {
-        return index.h("ul", { key: 'c91dbbb86c76aea64ed1faeb614d13d0f42ca93f' }, this.renderList(JSON.parse(this.listdata)));
+        return index.h("ul", { key: '9ddf6f6fb65ea56c128db833841501fc03559231' }, this.renderList(JSON.parse(this.listdata)));
     }
 };
 ZMyzCardList.style = ZMyzCardListStyle0;

package/dist/cjs/z-myz-card_4.cjs.entry.js

@@ -39,7 +39,7 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (index.h("div", { key: '81d1355f5ad97b198aafb1e1c445767ff2936b3c', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'c3c4eab6b92d210be789058e26a6e20eef4031d9' })));
+        return (index.h("div", { key: '7adb7b75ea965adc868514cf96d3098522d6b4bb', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'b1a3947eee9d39c8677e3e37b9f5a9da6887e7a1' })));
     }
 };
 ZMyzCardComponent.style = ZMyzCardStyle0;
@@ -52,7 +52,7 @@ const ZMyzCardBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'fa79fd3dd81f58ff58a1bc673d1d7b78e0bb8c84' }, index.h("slot", { key: '6d7442c02f0745bead9ec4ace4ea071ee31b469a', name: "alert" }), index.h("slot", { key: '59354a946c976a2bdf15ba4e66a99ec89ab14aaa', name: "cover" })));
+        return (index.h("div", { key: '0d02c2eac0ea628074ca649483b983e9c32673b7' }, index.h("slot", { key: '18354bf9d35e688c4ec5d6be8fe4e961dd5152e6', name: "alert" }), index.h("slot", { key: 'e81ab31f9de5bcbfb71b01e4a3578ec990a6cee2', name: "cover" })));
     }
 };
 ZMyzCardBody.style = ZMyzCardBodyStyle0;
@@ -72,7 +72,7 @@ const ZMyzCardCover = class {
         this.img = this.defaultimg;
     }
     render() {
-        return (index.h("img", { key: 'bfd67f7bb591b7058de89b5d551edce98b656248', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (index.h("img", { key: '8e57d894119bd3c99b76a26b87f31856670aabec', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
 ZMyzCardCover.style = ZMyzCardCoverStyle0;
@@ -108,7 +108,7 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (index.h("header", { key: '4ce589cb97427a439ffa4e91b5cd016f78d8a286', class: this.retrieveClass() }, index.h("slot", { key: '1c0b4cdec3f5094fe454f6fecef8e1154d2974cf', name: "aria-heading" }), index.h("span", { key: '2bb144d85f04322e0bfa34326860a35b317d7651', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: 'e8b00795917307c9edd55a16f12363bd905f2411', name: "icon" })));
+        return (index.h("header", { key: '3441319103ffb2f4a1097b78233793b57f5cb601', class: this.retrieveClass() }, index.h("slot", { key: 'bade30d0e781d514d7280971c673091c6831f1a2', name: "aria-heading" }), index.h("span", { key: 'eee042b64a4aa2e01af89f0ebea2a93ef6df7c14', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: 'c94d1b4a500ab3efcb19cdf26652580d0d054a84', name: "icon" })));
     }
 };
 ZMyzCardHeader.style = ZMyzCardHeaderStyle0;

package/dist/cjs/z-myz-list-item.cjs.entry.js

@@ -33,7 +33,7 @@ const ZMyzListItem = class {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (index.h("li", { key: '44f58aa95cb3c8fb30a81a17f94685e803d633c9', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: '9e8b7424522858aca31af76ee63c1d88e9b9d957', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: '3dd34e188f5e2d4f98465155d5bbbd91f5a11d7c', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '60796c84b325243bdd7faf1ce49a725addc247fa' }))));
+        return (index.h("li", { key: 'f005ec38bc4d2531a311c35e46c52a2298519f39', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: 'fafa72132d9d089e54ff91cddce53cbe9dc380bb', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: 'f3315017c1db508f183294607ac2c98d971c3ed0', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: 'bfcf1098a059c5f3a56dfa45d9b1fa76c269cf68' }))));
     }
 };
 ZMyzListItem.style = ZMyzListItemStyle0;

package/dist/cjs/z-myz-list.cjs.entry.js

@@ -26,7 +26,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (index.h("ul", { key: '8180625a6fea4c9e381f4d05d31bd27ab75b0f8c' }, this.list &&
+        return (index.h("ul", { key: '6ec3bbeab4df0bb06bf5dd54f5a8d9e406da4446' }, this.list &&
             this.list.map((bean, i) => (index.h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {

package/dist/cjs/z-otp.cjs.entry.js

@@ -24,7 +24,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (index.h("div", { key: '3280158fc2eb52cab06257cfea6237b04e277514', class: "otp-container" }, index.h("div", { key: 'b237b9c77421eeae14d5bac7e079b4f6b667ceed', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (index.h("div", { key: 'a990fff0baff0fea6c5728f5f27ce7463f190270', class: "otp-container" }, index.h("div", { key: 'c2f05fb85c20ebcf1b14729fdbaec8712dfd8c06', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp = class {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: 'd74fcd0805c2bbfa9cf993cf88fbaabf632412a8', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: '52e8e505f1817635f529b8a1dc971f94655f0ffd', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/cjs/z-tool.cjs.entry.js

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-96af6326.js');
+const index$1 = require('./index-97a4c18d.js');
+
+const stylesCss = ":host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host([active]) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}@media (hover: hover){:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}.z-tool:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary01);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-popover-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));z-index:2;font-family:var(--font-family-sans)}@media (max-width: 767px){.z-tool-tooltip{display:none !important}}:host{position:var(--z-tool-host-position, relative)}.z-tool-submenu{position:var(--z-tool-submenu-position, absolute);z-index:1;top:var(--z-tool-submenu-top, calc(100% + 4px));bottom:var(--z-tool-submenu-bottom, auto);left:var(--z-tool-submenu-left, 50%);display:none;transform:var(--z-tool-submenu-transform, translateX(-50%))}.z-tool-submenu-open{display:block}";
+const ZToolStyle0 = stylesCss;
+
+const ZTool = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleSubmenu = index.createEvent(this, "toggleSubmenu", 7);
+        this.handleTooltipOpen = () => {
+            //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus
+            //This control will be removed in future versions when nested tooltips will be supported
+            if (!this.tooltip || this.isNested) {
+                return;
+            }
+            clearTimeout(this.hoverDelay);
+            this.hoverDelay = setTimeout(() => {
+                this.tooltipOpen = true;
+            }, 1000);
+        };
+        this.handleTooltipClose = () => {
+            if (!this.tooltip) {
+                return;
+            }
+            clearTimeout(this.hoverDelay);
+            this.tooltipOpen = false;
+        };
+        this.handleClick = () => {
+            if (this.disabled) {
+                return;
+            }
+            if (this.hasSlottedContent) {
+                this.open = !this.open;
+                if (this.open) {
+                    this.focusNestedToolbar();
+                }
+            }
+        };
+        this.icon = undefined;
+        this.tooltip = undefined;
+        this.tooltipPosition = index$1.PopoverPosition.TOP;
+        this.htmlAriaLabel = undefined;
+        this.active = false;
+        this.disabled = false;
+        this.open = false;
+        this.tooltipOpen = false;
+        this.hasSlottedContent = false;
+        this.isNested = false;
+    }
+    handleOpenChange() {
+        this.toggleSubmenu.emit(this.open);
+    }
+    focusNestedToolbar() {
+        requestAnimationFrame(() => {
+            var _a;
+            const nestedToolbar = this.hostElement.querySelector("z-toolbar");
+            if (nestedToolbar) {
+                const firstTool = nestedToolbar.querySelector("z-tool");
+                if (firstTool) {
+                    const button = (_a = firstTool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
+                    if (button) {
+                        button.focus();
+                    }
+                }
+            }
+        });
+    }
+    checkIfNested() {
+        let parent = this.hostElement.parentElement;
+        while (parent) {
+            if (parent.tagName.toLowerCase() === "z-tool") {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    componentWillLoad() {
+        this.hasSlottedContent = this.hostElement.children.length > 0;
+        this.isNested = this.checkIfNested();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.hoverDelay);
+    }
+    render() {
+        return (index.h(index.Host, { key: '29475c2061b8031c6d742e0b67bdcaa657acf269', nested: this.isNested }, index.h("button", { key: '7b2c77c12e7d62a0560a8c71d8660e45927d4024', class: "z-tool", type: "button", "aria-pressed": this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '4c4b2d93bb5d8869cff58970f6c1a52ae82041e9', ref: (el) => (this.iconRef = el), name: this.icon })), this.tooltip && !this.isNested && (index.h("z-popover", { key: '87078924f19cbd8ec1efeaa460fad64d3d45701d', class: "z-tool-tooltip", bindTo: this.iconRef, open: this.tooltipOpen, position: this.tooltipPosition, showArrow: true, center: true, closable: false }, index.h("span", { key: 'a11623609058d4106f18ed8d523e32ee102afaa7', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("div", { key: 'c22cf9f4ffe622afc11be4e94722d5232df7dd58', class: {
+                "z-tool-submenu": true,
+                "z-tool-submenu-open": this.open,
+            } }, index.h("slot", { key: '0e789c315bbcdc50c6ffbb32d225be7f12b9cd59' })))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+ZTool.style = ZToolStyle0;
+
+exports.z_tool = ZTool;
+
+//# sourceMappingURL=z-tool.cjs.entry.js.map

package/dist/cjs/z-tool.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-tool.entry.cjs.js","mappings":"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","names":["PopoverPosition","h","Host"],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n.z-tool {\n  --z-tool-size: calc(var(--space-unit) * 5.5);\n  --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n  display: inline-flex;\n  width: var(--z-tool-size);\n  height: var(--z-tool-size);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\n:host([active]) .z-tool {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .z-tool:hover {\n    background-color: var(--color-primary03);\n  }\n}\n\n:host([disabled]) .z-tool {\n  color: var(--color-disabled01-icon);\n  cursor: not-allowed;\n}\n\n.z-tool:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n  outline: none;\n}\n\nz-icon {\n  --z-icon-width: var(--z-tool-icon-size);\n  --z-icon-height: var(--z-tool-icon-size);\n\n  display: block;\n  fill: var(--color-default-icon);\n}\n\n:host([disabled]) z-icon {\n  fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n  --z-popover-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n  z-index: 2;\n  font-family: var(--font-family-sans);\n}\n\n@media (max-width: 767px) {\n  .z-tool-tooltip {\n    display: none !important;\n  }\n}\n\n:host {\n  position: var(--z-tool-host-position, relative);\n}\n\n.z-tool-submenu {\n  position: var(--z-tool-submenu-position, absolute);\n  z-index: 1;\n  top: var(--z-tool-submenu-top, calc(100% + 4px));\n  bottom: var(--z-tool-submenu-bottom, auto);\n  left: var(--z-tool-submenu-left, 50%);\n  display: none;\n  transform: var(--z-tool-submenu-transform, translateX(-50%));\n}\n\n.z-tool-submenu-open {\n  display: block;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * ZTool component.\n * @slot - Optional slot for nested content (e.g., a secondary z-toolbar) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTool {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: string;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual selected state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isNested = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  private iconRef?: HTMLElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  private handleTooltipOpen = (): void => {\n    //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus\n    //This control will be removed in future versions when nested tooltips will be supported\n    if (!this.tooltip || this.isNested) {\n      return;\n    }\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  private handleTooltipClose = (): void => {\n    if (!this.tooltip) {\n      return;\n    }\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  private handleClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSlottedContent) {\n      this.open = !this.open;\n      if (this.open) {\n        this.focusNestedToolbar();\n      }\n    }\n  };\n\n  private focusNestedToolbar(): void {\n    requestAnimationFrame(() => {\n      const nestedToolbar = this.hostElement.querySelector(\"z-toolbar\");\n      if (nestedToolbar) {\n        const firstTool = nestedToolbar.querySelector(\"z-tool\");\n        if (firstTool) {\n          const button = firstTool.shadowRoot?.querySelector(\"button\");\n          if (button) {\n            button.focus();\n          }\n        }\n      }\n    });\n  }\n\n  private checkIfNested(): boolean {\n    let parent = this.hostElement.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === \"z-tool\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n\n    return false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = this.checkIfNested();\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host nested={this.isNested}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          aria-pressed={this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n          ></z-icon>\n        </button>\n        {this.tooltip && !this.isNested && (\n          <z-popover\n            class=\"z-tool-tooltip\"\n            bindTo={this.iconRef}\n            open={this.tooltipOpen}\n            position={this.tooltipPosition}\n            showArrow\n            center\n            closable={false}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-popover>\n        )}\n        {this.hasSlottedContent && (\n          <div\n            class={{\n              \"z-tool-submenu\": true,\n              \"z-tool-submenu-open\": this.open,\n            }}\n          >\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-toolbar.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-96af6326.js');
+const index$1 = require('./index-97a4c18d.js');
+
+const stylesCss = ":host,*{box-sizing:border-box}:host{display:inline-flex;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:8;position:relative;display:inline-grid;align-items:stretch;background:repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);column-gap:calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), auto);row-gap:var(--border-size-small);--z-tool-host-position:static;--z-tool-submenu-top:auto;--z-tool-submenu-bottom:calc(100% + calc(var(--space-unit) / 2));--z-tool-submenu-left:0;--z-tool-submenu-transform:none}::slotted(z-divider){display:none !important}::slotted(z-tool){border-radius:var(--border-radius)}}";
+const ZToolbarStyle0 = stylesCss;
+
+const ZToolbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** List of focusable tool elements. */
+        this.toolItems = [];
+        this.htmlAriaLabel = undefined;
+        this.currentFocusIndex = 0;
+    }
+    componentDidLoad() {
+        this.collectToolItems();
+        this.updateTabIndexes();
+        //set css variable --z-toolbar-columns based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows
+        let colBreakpoint = parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns") || "8");
+        colBreakpoint = this.toolItems.length <= colBreakpoint ? this.toolItems.length : colBreakpoint;
+        this.hostElement.style.setProperty("--z-toolbar-columns", colBreakpoint.toString());
+    }
+    /** Collect all z-tool elements in the toolbar (not nested ones). */
+    collectToolItems() {
+        this.toolItems = Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"));
+    }
+    updateTabIndexes() {
+        this.toolItems.forEach((tool, index) => {
+            var _a;
+            const button = (_a = tool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
+            if (button) {
+                button.tabIndex = index === this.currentFocusIndex ? 0 : -1;
+            }
+        });
+    }
+    focusToolAt(index, fallback = "next") {
+        var _a;
+        const tool = this.toolItems[index];
+        if (tool) {
+            const button = (_a = tool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
+            this.currentFocusIndex = index;
+            if (button.disabled || !button) {
+                if (fallback === "next") {
+                    this.focusNextTool();
+                }
+                else {
+                    this.focusPreviousTool();
+                }
+            }
+            else if (button) {
+                button.focus();
+                this.updateTabIndexes();
+            }
+        }
+    }
+    focusNextTool() {
+        const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;
+        this.focusToolAt(nextIndex);
+    }
+    focusPreviousTool() {
+        const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;
+        this.focusToolAt(prevIndex, "previous");
+    }
+    focusParentTool(event) {
+        var _a;
+        const parentTool = this.hostElement.closest("z-tool");
+        if (parentTool) {
+            event.preventDefault();
+            event.stopPropagation();
+            parentTool.open = false;
+            const parentButton = (_a = parentTool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
+            if (parentButton) {
+                parentButton.focus();
+            }
+        }
+    }
+    /** Close all open submenus in the toolbar. */
+    async closeSubmenus() {
+        const tools = this.hostElement.querySelectorAll(":scope > z-tool");
+        tools.forEach((tool) => {
+            if (tool.open) {
+                tool.open = false;
+            }
+        });
+    }
+    closeSibilingSubmenusOnOpen(event) {
+        if (event.detail === true) {
+            const tools = this.hostElement.querySelectorAll(":scope > z-tool");
+            tools.forEach((tool) => {
+                if (tool !== event.target.closest("z-tool") && tool.open) {
+                    tool.open = false;
+                }
+            });
+        }
+    }
+    handleKeyDown(event) {
+        this.collectToolItems();
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        if (!toolElement || !this.toolItems.includes(toolElement)) {
+            return;
+        }
+        const focusedIndex = this.toolItems.indexOf(toolElement);
+        if (focusedIndex !== -1) {
+            this.currentFocusIndex = focusedIndex;
+        }
+        switch (event.key) {
+            case index$1.KeyboardCode.ARROW_RIGHT:
+                event.preventDefault();
+                this.focusNextTool();
+                break;
+            case index$1.KeyboardCode.ARROW_LEFT:
+                event.preventDefault();
+                this.focusPreviousTool();
+                break;
+            case index$1.KeyboardCode.ESC:
+            case index$1.KeyboardCode.TAB:
+                this.focusParentTool(event);
+                break;
+        }
+    }
+    handleFocusIn(event) {
+        // When focus enters the toolbar, update the current focus index
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        if (toolElement && this.toolItems.includes(toolElement)) {
+            const index = this.toolItems.indexOf(toolElement);
+            if (index !== -1 && index !== this.currentFocusIndex) {
+                this.currentFocusIndex = index;
+                this.updateTabIndexes();
+            }
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b03b77a808c6e0c1724e6765210e83bad3a7c4dc', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: '448035bb2842a93ed4e0bb433d1e506007b93519', onSlotchange: () => {
+                this.collectToolItems();
+                this.updateTabIndexes();
+            } })));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+ZToolbar.style = ZToolbarStyle0;
+
+exports.z_toolbar = ZToolbar;
+
+//# sourceMappingURL=z-toolbar.cjs.entry.js.map

package/dist/cjs/z-toolbar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-toolbar.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  padding: 0;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n  height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n  :host {\n    --z-toolbar-columns: 8;\n\n    position: relative;\n    display: inline-grid;\n    align-items: stretch;\n    background: repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n    column-gap: calc(var(--space-unit) / 2);\n    grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), auto);\n    row-gap: var(--border-size-small);\n\n    /* Overrides z-tool submenu positioning */\n    --z-tool-host-position: static;\n    --z-tool-submenu-top: auto;\n    --z-tool-submenu-bottom: calc(100% + calc(var(--space-unit) / 2));\n    --z-tool-submenu-left: 0;\n    --z-tool-submenu-transform: none;\n  }\n\n  ::slotted(z-divider) {\n    display: none !important;\n  }\n\n  ::slotted(z-tool) {\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Element, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * ZToolbar component.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    //set css variable --z-toolbar-columns based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let colBreakpoint = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"8\");\n    colBreakpoint = this.toolItems.length <= colBreakpoint ? this.toolItems.length : colBreakpoint;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", colBreakpoint.toString());\n  }\n\n  /** Collect all z-tool elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      const button = tool.shadowRoot?.querySelector(\"button\");\n      if (button) {\n        button.tabIndex = index === this.currentFocusIndex ? 0 : -1;\n      }\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (tool) {\n      const button = tool.shadowRoot?.querySelector(\"button\");\n      this.currentFocusIndex = index;\n      if (button.disabled || !button) {\n        if (fallback === \"next\") {\n          this.focusNextTool();\n        } else {\n          this.focusPreviousTool();\n        }\n      } else if (button) {\n        button.focus();\n        this.updateTabIndexes();\n      }\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  private focusParentTool(event: KeyboardEvent): void {\n    const parentTool = this.hostElement.closest(\"z-tool\") as HTMLZToolElement;\n    if (parentTool) {\n      event.preventDefault();\n      event.stopPropagation();\n      parentTool.open = false;\n      const parentButton = parentTool.shadowRoot?.querySelector(\"button\");\n      if (parentButton) {\n        parentButton.focus();\n      }\n    }\n  }\n\n  /** Close all open submenus in the toolbar. */\n  @Method()\n  async closeSubmenus(): Promise<void> {\n    const tools = this.hostElement.querySelectorAll<HTMLZToolElement>(\":scope > z-tool\");\n    tools.forEach((tool) => {\n      if (tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  @Listen(\"toggleSubmenu\")\n  closeSibilingSubmenusOnOpen(event: CustomEvent): void {\n    if (event.detail === true) {\n      const tools = this.hostElement.querySelectorAll<HTMLZToolElement>(\":scope > z-tool\");\n      tools.forEach((tool) => {\n        if (tool !== (event.target as HTMLElement).closest(\"z-tool\") && tool.open) {\n          tool.open = false;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    this.collectToolItems();\n\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n      case KeyboardCode.ESC:\n      case KeyboardCode.TAB:\n        this.focusParentTool(event);\n        break;\n    }\n  }\n\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    // When focus enters the toolbar, update the current focus index\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (toolElement && this.toolItems.includes(toolElement)) {\n      const index = this.toolItems.indexOf(toolElement);\n      if (index !== -1 && index !== this.currentFocusIndex) {\n        this.currentFocusIndex = index;\n        this.updateTabIndexes();\n      }\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -21,7 +21,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: 'ab2c260f466a47e9f25154ece6a78197ff23d0fa', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '239e63a0bfececc52c9538df70d0eb7fe63a0060' })));
+        return (index.h("z-popover", { key: 'fe8da17a58d70db3756fb35f8230d95b4546ee8a', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: 'cc8f284849ce1a08a6fdbe2b521006babd87de24' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/collection/collection-manifest.json

@@ -66,6 +66,8 @@
     "components/z-toast-notification-list/index.js",
     "components/z-toggle-button/index.js",
     "components/z-toggle-switch/index.js",
+    "components/z-tool/index.js",
+    "components/z-toolbar/index.js",
     "components/z-tooltip/index.js",
     "snowflakes/myz/card/z-myz-card/index.js",
     "snowflakes/myz/card/z-myz-card-alert/index.js",

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

@@ -0,0 +1,10 @@
+.z-label {
+  display: block;
+  padding-bottom: var(--space-unit);
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-1);
+  font-weight: var(--font-sb);
+  text-align: left;
+  text-transform: uppercase;
+}

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

@@ -12,6 +12,8 @@ export class ZSearchbar {
         this.items = [];
         this.htmlid = `searchbar-${randomId()}`;
         this.preventSubmit = false;
+        this.label = undefined;
+        this.htmlAriaLabel = undefined;
         this.value = undefined;
         this.placeholder = undefined;
         this.autocomplete = false;
@@ -155,7 +157,7 @@ export class ZSearchbar {
             }, htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
-            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), ariaLabel: this.placeholder, size: this.size }));
+            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder }));
     }
     renderButton() {
         if (!this.showSearchButton) {
@@ -182,7 +184,7 @@ export class ZSearchbar {
         if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
             return (h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
         }
-        return (h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
+        return (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
     }
     renderItems() {
         var _a;
@@ -286,18 +288,18 @@ export class ZSearchbar {
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: '5403ffd56eec6183988bb502b0df4a9fc6fb5548', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'b989afbcde29949cf713bacf31bee58cdb33230a', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '80709d742a085bb3045a2a8795e5e77ce8aa9e3e', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'fb03a352402836b09da8b315e84a37c8bee98583', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../css-components/z-label/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../css-components/z-label/styles.css"]
         };
     }
     static get properties() {
@@ -338,6 +340,40 @@ export class ZSearchbar {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "htmlAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-label"
+                },
+                "attribute": "html-aria-label",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": false,