@zanichelli/albe-web-components 19.6.1 → 20.0.0

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

@@ -74,7 +74,7 @@ const ZTh = class {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '25ff71c64f855e0245527ad385b724d28ddfa08c', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'adaf75e819e1692cd89903665e8e04d81500fbd6', class: "cell--content" }, h("slot", { key: '6d7b2ed1bc4c4aeedc75af807fddd1478fe460eb' }), this.showSorting && (h("button", { key: 'a6d100b0cebfb956df0b8b052867ab05e0f0f268', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'e2d0cb1d16ca0160266cbff0eb3d1f0e7e8da99e', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '7b2c8be782cd2e06bec91068b5f4e0c0d15fcf06', class: "cell--menu-container" }, h("z-button", { key: '76881e9c6280fa0eeca09ea062850afc10ce87af', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'e9eb5e63d106dc3d0785fe2986caf9fa70105134', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '3a8aa0c828cabbdc7ffac2cc33f8fba5508652ae', name: "contextual-menu" })))))));
+        return (h(Host, { key: '8e83039c2100fa4df3e205d6a4819cdc32b4789e', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '18c67051c7eed356980c97b08bd4981b5d8c9b18', class: "cell--content" }, h("slot", { key: '05c6564192e37a01c6f79c81db4b7732dcc30451' }), this.showSorting && (h("button", { key: '45f0e2087f6050567bf7978f8421a146912e2cfd', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'e53ad878d055d82b518212c99385b4d394503bf9', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '660f2abf11cc879c3a5855149fbbfc7b57578b6a', class: "cell--menu-container" }, h("z-button", { key: '37905939b31eeb5051ce5824787309629a935f14', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '369c0918f021e0699c2178b2b023126fce518073', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b3364b3d95e4cd92fefce41bfcbb995b2b5eef70', name: "contextual-menu" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const ZThead = class {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'da659da3d9e19e184e1aa6549daedabb101ce389', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '8f2f180a4a539234d6c29f1f8266eae3b5f3d21a' })));
+        return (h(Host, { key: 'd7fa2e798c78f08c9ead7330d1b0d0893e197d56', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '57ced6d7b8cf3859959f80d1af3eb72b17d69eb0' })));
     }
     get host() { return getElement(this); }
 };

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

@@ -43,7 +43,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: '2db7d7d32d1141d4d1af80be7b491eb4204e0320', name: "toasts" });
+        return h("slot", { key: '1b22ad1308d152ae0a89b6e0d711765fc400458b', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -4198,19 +4198,19 @@ const ZToastNotification = class {
         }
     }
     render() {
-        return (h(Host, { key: '2153aaf3bd237468bf2f63534a145ec917c39d73', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: '203e3a531f9a178cb4a87598b7916d9313faefe6', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: '087703ec0d04f6d6a430fd58335392ca63328314', class: "toast-notification-container" }, h("div", { key: 'bca3315b0e1dfe7298941fcac2a76dcb5012f403', class: "toast-notification-content" }, h("div", { key: '6659341a2a78966c8f0876069d828ac344c6d55d', class: "toast-notification-text" }, this.heading && h("span", { key: 'acc832d48232f9f3e2ab6591c3e8589b9274368c', class: "title" }, this.heading), h("span", { key: 'a771954ce07ea0d8b59fd4801d0a08f47b01b369', class: "message" }, h("slot", { key: 'c1c035d7f0c5dad5224bd1fcdc9c6714618e0b94', name: "message" }, this.message && h("span", { key: '620a03bec453fa7273ddc6e0ec36f64ae2a161ce', innerHTML: purify.sanitize(this.message) })))), h("div", { key: '9938abc7188174c6f5de6dbaf9df8bf35a432046', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'e58bd461c216163cd219350a2ca4f58a2e7cf4b9', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'f18b9d257ab683ce63db3c3f56b76fb985e5dc5c', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: 'f1aa2db8b0e25347d79f64bd99d3fa5ed0cdebbc', class: "toast-notification-container" }, h("div", { key: 'a9d16a63c9007b3dbe1f245d9063c3510f1518b8', class: "toast-notification-content" }, h("div", { key: '4ab0c13ca3f0bd80d95e0cb3199e3045e60c9a60', class: "toast-notification-text" }, this.heading && h("span", { key: 'b7dab9b4238d7e0f5d0db2184a2c9ca9bc0c8234', class: "title" }, this.heading), h("span", { key: '6afb9e5be183e6b040e6219940b00c48ea702fb1', class: "message" }, h("slot", { key: 'ee7feb8ab40d6e81dec9998a2ae13b4c03cf0327', name: "message" }, this.message && h("span", { key: '4adfbad2e2647b31a165e0a2d5164de7b283a3b7', innerHTML: purify.sanitize(this.message) })))), h("div", { key: 'ed3b21c702a6e4cadc10dd21b8a685c0b9c7a5cc', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '0ece97a1a9773fc44347c64d5d413e35403212c9', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'fd8e0a5fc8a6f59567f9938b53356ca545fd5eb0', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: 'a745a5efd0c858fc5551c557e845815ad6ff9c53', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '778c9689d5b1b6286c08c58c50ad93cc8fc35358', name: "multiply-circled" }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toggle-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-BcDWN4F1.js';
 import { k as LabelPosition } from './index-DdetsoIY.js';
-import { r as randomId } from './utils-CEdyahRZ.js';
+import { r as randomId } from './utils-CJc3A9NX.js';
 import './breakpoints-Q-tWjk7P.js';
 
 const stylesCss = () => `.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}`;
@@ -32,14 +32,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'b88394ed133b9f44f9c1de65628260259e841733' }, h("input", { key: '663c03657be7d0f8470226a11c8a804b2b9cbf86', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '5c234abf4e80459e82df5ae500e257325de80b75', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '0370a36488a57e5ac92c296ce0fcc140cc8c56eb' }, h("input", { key: '3364210d02cebfd7d2ad14407a557c52aa82686a', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '07519e6cbe8f44d131909d1023b602e74b6cdf80', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '8a8c27808c25b96294c0ee32bc5b0463d961aeb5' }, h("slot", { key: 'a44db8068a726de440173f0779fea34860239ee8' })), h("span", { key: '039860e84314b571f982e4a34bd0f7f257f1acf8', class: {
+            } }, h("span", { key: '3d460ac03c1788fdf99f116e8792f2b0f95f1857' }, h("slot", { key: '0eb371292202e3eefd737ed79f3acefeda2fab91' })), h("span", { key: '5912b4da7abed8f994dd7224a09872d5c173160a', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '4fa9b0bb08311cde64570f5cc1de3eb958633cdf', class: "circle" }, this.checked && (h("z-icon", { key: '7f44edf1a91ad6a5c2c1e1d2dc7e9eaf202f14b8', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '893ebce8124fdbcd00fbaf0976757a15b59a5b6e', class: "circle" }, this.checked && (h("z-icon", { key: 'f6d826da0f8c46f1e64fc0efa2a55fda64685f55', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = stylesCss();

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
 import { P as PopoverPosition, g as KeyboardCode } from './index-DdetsoIY.js';
-import { a as containsElement } from './utils-CEdyahRZ.js';
+import { a as containsElement } from './utils-CJc3A9NX.js';
 import './breakpoints-Q-tWjk7P.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);position:relative;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(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);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-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;
@@ -187,10 +187,10 @@ const ZTool = class {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '877a963cd0017bb4ee4ceee41269a7221c9b5657', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '277956460cb28d4fa82751858e6ec223c60c3742', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : 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 }, h("z-icon", { key: '7adc9e77129028185370b067f087190c30ce65b1', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '1ad7d42bea522fe09f192f6a5437a56aa1c0dfce', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'aa411388fce8b01983fed63a1c27505a53604a8c', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '018b555d82f0fe05cf1029eabaf645f14f793079', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (h(Host, { key: '6d82ae454718b00d21e6193325bc223de3409f7a', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '79735e5831762281fef55e7033c6660a8b97de74', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : 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 }, h("z-icon", { key: '79be05619def07fd8a73812a8905f15f719fce83', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '9b5aa9d7f06b1ff6408f485c910a905c4c62d3e4', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: '82c6f40fc3a4d4932ea9ef8e05f02c2c8d5eaddf', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '33dcbe345ca34c79720ed7a17eda2f5ab0561e90', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'cc57b7897e2341151ffa771a0c1d7ed22052faf7' })))));
+            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: '1a42cca4cd67850cff48043819e144fc2b6ea47e' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -129,7 +129,7 @@ const ZToolbar = class {
         }
     }
     render() {
-        return (h(Host, { key: '27daf25d9526b2eb37ddcec6e3e577b913fae833', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: 'e84a997b04d17fe916ba25ea296c1459228226af', onSlotchange: () => {
+        return (h(Host, { key: 'c4ccefdf38a239462ed209be1f5982fc4d805493', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '97f941c2bb8862f5bcb78bbad6fba1f729d497a5', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));

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

@@ -26,7 +26,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'f043ce5196097912206ba7430623947af5c453a8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '9589232709b125e27eee40bfa68c497626cb55bf' })));
+        return (h("z-popover", { key: 'fc20f5c5d66fb5b9dabd41dfb986b28fbedfad9d', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '5c5a2e8be7183824b50fa87d18b6f26e4bb2c0f7' })));
     }
 };
 ZTooltip.style = stylesCss();

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
-import { r as randomId } from './utils-CEdyahRZ.js';
+import { r as randomId } from './utils-CJc3A9NX.js';
 import './z-td.entry.js';
 import './z-th.entry.js';
 import './index-DdetsoIY.js';
@@ -68,7 +68,7 @@ const ZTr = class {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '554aceba8b99d8655ecc8a94af9db10d031b10af', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '43b0dea34f2a462e2f0f0eb3412cbde4cb68685c', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'b9dbe2ceeae6650956992c47e605928108597541', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '49adad5b59d11110633b82d3880f5c91392034f1', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '47d28d342352b04c53c3e9f4e770c2a919571150', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '3cb8eca4fb990d843d1f811b8274196123aa5937', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '75b2709b15c266ccbdef64b1b610775271d8578e', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '5952a68ab36814d24e490cb183ed36ef476f3174', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '80c7b7130eb34822abbb6804d1d613f87bf0dc35', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '037ae6901e951599464a876b8c6f5c779f5f070e', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'bc0e8dc8b429911c1e958005c4447bad6d25a504', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '2f9a60636fa6f29279a82eb99ba3ed8034708db4', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-tree-list.entry.js

@@ -98,7 +98,7 @@ const ZTreeList = class {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'f8d5b24a7d7dab5b6dba9c06b363c4015448f982', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'e793e18b4d75c537cb5faeb5f839ad5bda28e60b', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '266f20dbd53ba5e756e0fec544179e6bb319bd18', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '349d5a894c529036329f17c79b319e64e2c86731', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-visually-hidden.entry.js

@@ -7,7 +7,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: 'c0d4c33ff0e304a0e2c6b1f708fb48aaa3f45fc5' });
+        return h("slot", { key: '7223868f33657302203a2a24df8b3250d81c42cc' });
     }
 };
 ZVisuallyHidden.style = stylesCss();

package/dist/types/components/date-picker/z-date-picker/index.d.ts

@@ -5,7 +5,7 @@ export declare class ZDatePicker implements ComponentInterface {
     /** unique id */
     datePickerId: string;
     /** z-input aria label */
-    ariaLabel: string;
+    htmlAriaLabel?: string;
     /** z-input label */
     label?: string;
     /** [Optional] datepicker mode: date, datetime, only months */

package/dist/types/components/list/z-list/index.d.ts

@@ -3,18 +3,16 @@ import { ListSize, ListType } from "../../../beans";
 export declare class ZList implements ComponentInterface {
     host: HTMLZListElement;
     /**
-     * [optional] Sets size of inside elements.
+     * [optional] Size of the list elements.
      */
     size?: ListSize;
     /**
-     * [optional] type of the list marker for each element
+     * [optional] Type of the list marker for each element.
      */
     listType?: ListType;
-    /**
-     * Sets role of the element.
-     */
-    role: string;
-    private setChildrenSizeType;
-    componentDidLoad(): void;
+    htmlRole: string;
+    /** Watch for changes in the role native attribute */
+    onRoleChange(newValue: string): void;
+    setChildrenProps(): void;
     render(): HTMLZListElement;
 }

package/dist/types/components/list/z-list-element/index.d.ts

@@ -65,13 +65,10 @@ export declare class ZListElement implements ComponentInterface {
      * [optional] Sets element as tree item.
      */
     hasTreeItems?: boolean;
-    /**
-     * Sets element role.
-     */
-    role: string;
     /** set tabindex to Host tag (optional). Defaults to 0. */
     htmlTabindex?: number | null;
     showInnerContent: boolean;
+    htmlRole: string;
     private openElementConfig;
     /**
      * Constructor.
@@ -79,23 +76,20 @@ export declare class ZListElement implements ComponentInterface {
     constructor();
     /**
      * Handler for click on element. If element is expandable, change state.
-     * @returns void
      */
     private handleClick;
     private handleKeyDown;
+    onRoleChange(newValue: string): void;
     /**
      * Renders button to expand element.
-     * @returns expadable button
      */
     private renderExpandableButton;
     /**
      * Renders expanded content if element is expandable.
-     * @returns expanded content
      */
     private renderExpandedContent;
     /**
      * Renders content of the z-list-element
-     * @returns list content
      */
     private renderContent;
     render(): HTMLZListElementElement;

package/dist/types/components/list/z-list-group/index.d.ts

@@ -26,12 +26,10 @@ export declare class ZListGroup implements ComponentInterface {
      * [optional] check for tree items in grouped lists
      */
     hasTreeItems?: boolean;
-    /**
-     * Sets element role.
-     */
-    role: string;
+    htmlRole: string;
     private hasHeader;
-    componentDidLoad(): void;
+    onRoleChange(newValue: string): void;
+    setChildrenProps(): void;
     componentWillLoad(): void;
     render(): HTMLZListGroupElement;
 }

package/dist/types/components/z-button/index.d.ts

@@ -5,15 +5,10 @@ import { ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition } from
  */
 export declare class ZButton implements ComponentInterface {
     hostElement: HTMLZButtonElement;
-    /** defines a string value that labels the internal interactive element. Used for accessibility. */
-    ariaLabel: string | undefined;
-    /**
-     * Use `htmlrole` instead.
-     * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
-     */
-    role: string;
-    /** defines role attribute, used for accessibility. */
-    htmlrole?: string;
+    /** `aria-label` for the internal button element. Mostly needed when no text is present, like for an icon-only button. */
+    htmlAriaLabel?: string;
+    /** `role` attribute for the internal button element. Used for accessibility. */
+    htmlRole?: string;
     /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */
     href?: string;
     /** HTML a target attribute. */

package/dist/types/components/z-chip/index.d.ts

@@ -12,8 +12,8 @@ export declare class ZChip implements ComponentInterface {
     interactiveIcon?: string;
     /** set z-chip as disabled */
     disabled?: boolean;
-    /** z-chip aria-label string */
-    ariaLabel: string;
+    /** `aria-label` for the icon button */
+    htmlAriaLabel?: string;
     /** click on interactive icon */
     interactiveIconClick: EventEmitter;
     render(): HTMLDivElement;

package/dist/types/components/z-info-box/index.d.ts

@@ -1,14 +1,26 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { IconName } from "../../constants/iconset";
 /**
  * @slot content - set the info box content
  */
 export declare class ZInfoBox implements ComponentInterface {
     /** info box unique id */
     boxid: string;
-    /** render close icon flag */
+    /** render close icon */
     isclosable: boolean;
+    /** Aria label for the close button */
+    closeButtonAriaLabel: string;
+    /**
+     * Name of the icon to display on the top left of the info box.
+     * The icon's color will be inherited from the border color set through the `--z-info-box--border-color` CSS variable, if set.
+     * Otherwise it can be customized using the `--z-info-box--left-icon-color` CSS variable.
+     * If none of them is set, the icon will be colored using the `--color-primary01-icon` token.
+     */
+    leftIcon: IconName;
     /** emitted on close icon click */
-    infoBoxClose: EventEmitter;
+    infoBoxClose: EventEmitter<{
+        boxid: string;
+    }>;
     private emitInfoBoxClose;
     render(): HTMLDivElement;
 }

package/dist/types/components/z-info-reveal/index.d.ts

@@ -16,8 +16,8 @@ export declare class ZInfoReveal implements ComponentInterface {
     position?: InfoRevealPosition;
     /** Label of the trigger button. */
     label?: string;
-    /** Aria label of the trigger button. It will be only used when `label` prop is empty. */
-    ariaLabel: string;
+    /** `aria-label` of the trigger button. It will be used only when the `label` prop is empty. */
+    htmlAriaLabel: string;
     /** Size of the trigger button */
     size?: ControlSize;
     /** Whether the info panel is open. */

package/dist/types/components/z-input/index.d.ts

@@ -4,25 +4,25 @@ export declare class ZInput implements ComponentInterface {
     hostElement: HTMLZInputElement;
     /** the id of the input element */
     htmlid: string;
-    /** input types */
+    /** Input type */
     type: InputType;
-    /** the input name */
+    /** the input `name` attribute */
     name?: string;
     /** the input label */
     label?: string;
-    /** the input aria-label */
-    ariaLabel: string;
-    /** the input aria-expaded: available for text, password, number, email */
-    htmlAriaExpanded: string;
-    /** the input aria-controls (optional): available for text, password, number, email */
+    /** the input `aria-label` */
+    htmlAriaLabel?: string;
+    /** the input `aria-expanded`: available for text, password, number, email */
+    htmlAriaExpanded?: string;
+    /** the input `aria-controls` (optional): available for text, password, number, email */
     htmlAriaControls?: string;
-    /** the input aria-autocomplete (optional): available for text, password, number, email */
+    /** the input `aria-autocomplete` (optional): available for text, password, number, email */
     htmlAriaAutocomplete?: string;
-    /** the input aria-activedescendant (optional): available for text, password, number, email */
+    /** the input `aria-activedescendant` (optional): available for text, password, number, email */
     htmlAriaActivedescendant?: string;
-    /** the input aria-describedby (optional) */
-    htmlAriaDescribedBy?: string;
-    /** the input aria-labelledby (optional) */
+    /** the input `aria-describedby` (optional) */
+    htmlAriaDescribedby?: string;
+    /** the input `aria-labelledby` (optional) */
     htmlAriaLabelledby?: string;
     /** the input value */
     value?: string;
@@ -46,8 +46,8 @@ export declare class ZInput implements ComponentInterface {
     labelPosition?: LabelPosition;
     /** the input has autocomplete option (optional): available for text, password, number, email */
     autocomplete?: string;
-    /** the input role */
-    role: string;
+    /** the input `role` */
+    htmlRole?: string;
     /** render clear icon when typing (optional): available for text */
     hasclearicon?: boolean;
     /** render icon (optional): available for text */

package/dist/types/components/z-input-message/index.d.ts

@@ -3,17 +3,14 @@ import { InputStatus } from "../../beans";
 export declare class ZInputMessage implements ComponentInterface {
     /** input helper message */
     message: string;
-    /** the id of the message element (optional)*/
+    /** the id of the message element (optional) */
     htmlId?: string;
-    /** the role to set when both the message and the status are populated (optional)*/
+    /** the role to set when both the message and the status are populated (optional) */
     htmlRole: null | string;
     /** input status (optional) */
     status?: InputStatus;
     /** input disabled status (optional) */
     disabled?: boolean;
     private statusIcons;
-    statusRole: {};
-    onMessageChange(): void;
-    componentWillLoad(): void;
     render(): HTMLZInputMessageElement;
 }

package/dist/types/components/z-navigation-tabs/index.d.ts

@@ -9,7 +9,7 @@ export declare class ZNavigationTabs implements ComponentInterface {
     /**
      * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
      */
-    ariaLabel: string;
+    htmlAriaLabel?: string;
     /**
      * Navigation tabs orientation.
      */

package/dist/types/components/z-select/index.d.ts

@@ -10,8 +10,8 @@ export declare class ZSelect implements ComponentInterface {
     name?: string;
     /** the input label */
     label?: string;
-    /** the input aria-label */
-    ariaLabel: string;
+    /** the input `aria-label` */
+    htmlAriaLabel?: string;
     /** the input is disabled */
     disabled?: boolean;
     /** the input is readonly */