@zanichelli/albe-web-components 19.4.0 → 19.6.0

package/dist/esm/z-app-header_12.entry.js

@@ -1,9 +1,9 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, d as getElement } from './index-BcDWN4F1.js';
-import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant, c as ButtonType, a0 as IconPosition, D as DividerSize, h as DividerOrientation, k as LabelPosition, I as InputType, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-B3nR3-Jw.js';
+import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant, c as ButtonType, a1 as IconPosition, D as DividerSize, h as DividerOrientation, k as LabelPosition, I as InputType, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-DdetsoIY.js';
 import { B as Breakpoints } from './breakpoints-Q-tWjk7P.js';
-import { a as containsElement, r as randomId, d as boolean, s as getTabbableElements, v as handleEnterKeydSubmit } from './utils-C9lc3rtK.js';
+import { a as containsElement, r as randomId, d as boolean, s as getTabbableElements, v as handleEnterKeydSubmit } from './utils-CEdyahRZ.js';
 import { C as COLOR_INDICATOR_ICONS, I as ICONS } from './iconset-AwzX9V8L.js';
-import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller--oxj7x8w.js';
+import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller-C_qN1xPW.js';
 
 const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 
@@ -274,7 +274,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '6ea43dd25c57ed4292a243326d7c8af37e88175a', "menu-length": this.menuLength }, h("div", { key: '2909e033b13f3c3703ba3402dddd58ab93de9d83', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'f4db1b9e05adb9ec6abfc5be7d7eb03d23cdadeb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'd654db6c1f20676c702ffd55896f74dc83b008ae', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '9baf1c16220364d06665b2e77f3f40c22abf9312', name: "top-subtitle" }))), h("div", { key: 'cd2665cc5b5e3528080ae049ff5c1b1b259387f8', class: "heading-title" }, h("slot", { key: 'b52786726e900d20c4f7251650fe828075e656ca', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'fbb0a8b9d580ffef099072782f9efded6ae448ba', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'e4d4bc464bcb11330a096582abf0ad7b4f95aed0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'eb712a6bd2324625dbb4647aa3e91e3c1bf21340', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '90d4f9eb7b361eb8e394a504d3779ea80241bc32', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -335,8 +335,9 @@ const ZButton = class {
         var _a, _b;
         const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
         const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
-        if (this.href) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+        const shouldRenderAsLink = normalizedRole === "link";
+        if (this.href || shouldRenderAsLink) {
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href || "#", target: this.target }), this.renderIcon(), h("slot", null)));
         }
         return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }
@@ -357,7 +358,7 @@ const ZDivider = class {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '43a290ca09c39c630779133fa5fd9912fca785e0', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -411,7 +412,7 @@ const ZIcon = class {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: '7c57cd059787e6ec7d12b0aceb02f8b6bb5b79a2', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -594,7 +595,8 @@ const ZInput = class {
             ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
             : {};
         const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
+        const required = this.required ? { "aria-required": "true" } : {};
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid), required);
     }
     getFocusBlurAttributes() {
         return {
@@ -643,7 +645,7 @@ const ZInput = class {
             } }, h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
-        return (h("button", { type: "button", class: "input-icon toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
+        return (h("button", { type: "button", class: "input-icon toggle-password-icon", disabled: this.disabled, "aria-label": "mostra password", "aria-pressed": !this.passwordHidden ? "true" : "false", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
     }
     renderMessage() {
         if (boolean(this.message) === false) {
@@ -665,7 +667,8 @@ const ZInput = class {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        const ariaRequired = this.required ? { "aria-required": "true" } : {};
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -674,7 +677,8 @@ const ZInput = class {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        const ariaRequired = this.required ? { "aria-required": "true" } : {};
+        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes(), ariaRequired)), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -696,7 +700,7 @@ const ZInput = class {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '2536f6387f2325190522fc8cc4f788147bead800' }, input);
+        return h(Host, { key: '7a98a32f222c422a2f253f0cadd78cf27e0c8913' }, input);
     }
     get hostElement() { return getElement(this); }
 };
@@ -725,7 +729,7 @@ const ZInputMessage = class {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '575ca29cba9f2d617b8b2c65bb054204e7aa411c' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: '6b9a19626fac468cdf5773aebd66cba90489eaa3', name: this.statusIcons[this.status] }), h("span", { key: 'c951a0146f5fe8def8428aee39ce923b24aa23bb', id: this.htmlId, innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: 'a35cc36ee979d11215b973a0f11e2c8f59105a50' }, this.statusRole, { id: this.htmlId }), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'be5aa19afcdddefe15f252b8ea175b0615a5e983', name: this.statusIcons[this.status] }), h("span", { key: 'b1d11a0a9694e604b6aa252c2d8a77143288ad99', innerHTML: this.message })));
     }
     static get watchers() { return {
         "message": [{
@@ -771,7 +775,7 @@ const ZList = class {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: '2aac86dccac20cc21ec7c1341a99298f8523af49' }, h("slot", { key: '207231c63243efcd61917a9b4aa3394e22379bbd' })));
+        return (h(Host, { key: 'f9a6d8006b845e618b0aff2c8b0ed3568c438e4d' }, h("slot", { key: 'd9b7fd704481fdc6870d8269833ddacb035cb1b4' })));
     }
     get host() { return getElement(this); }
 };
@@ -938,7 +942,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (h(Host, { key: '9a06293fba7e3b74fe169d1d3e927a4abd7b17f1', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'c962c30a71313bd84b1075ad03a96e4b5de77a42', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'ccca86019dec23767ae7bcf5af988c7f2366d850', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'f8f1b6053d0fe0415b520c4f1deaba92e24019b8', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '211b41c7cce6dd3c94d770da67d42203fc776d7e', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'a79eb753f19c45eb6c87cbf592e9e6196f7188f3', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c0ec5ddcbdb6b5cea2fe6fa5ec548ca0979fb8bd', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '50a40995617a49ae25c8351bdcef0ed8cbe791cf', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return getElement(this); }
 };
@@ -991,11 +995,11 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'cd9bd738252e44011edad7b468ad711a2ef83f12' }, h("div", { key: 'd2c2e41d50b4884b438ae7b25e9e2b06260df6ac', class: {
+        return (h(Host, { key: '08d721c30d9c6f11e4628990bcdb3c6a0f948ef7' }, h("div", { key: '9148e5ba5b02120034499ee9e3ba304a2c7a59bc', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'c47a8ea2508c87bbd0688248dcae0350d159350a', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'c0586eee517b42aaf76507286bd086abaecb8013', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '5f558529f5de2f4b62403d239e8424eea6259fd3' })));
+            } }, h("slot", { key: 'c7e244b995fd510f0de3fe5b56fab29645e498e3', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'b7b215bb4fb5d788f51d939277dd63304fecaf50', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '4b84ad375fca78efccb67e39fdb84ea2786951ab' })));
     }
     get host() { return getElement(this); }
 };
@@ -1085,8 +1089,8 @@ const ZOffcanvas = class extends ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (h(Host, { key: '7296200f4eb4aa2f332af790ea04d6e6e78e824c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: '8aef7db88fcecdc89484aad70c3a30973dbf17d8', class: "canvas-container" }, h("div", { key: 'ca715459c24fe5256987efd279db222446186692', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'a365eb11a346deaa1d93deee0e0625858070296e', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '4e918c25bda62190bc87720ceb3269d99bd4ad5d', class: "backdrop", onClick: (ev) => {
+        return (h(Host, { key: '51b926901186e062a9c9bb092db3429a7ac305eb', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: '353b8acace02902509f4ae502718aa7e8c6ee1e2', class: "canvas-container" }, h("div", { key: '2a18631be55b973bd8a3853284d3e1be5c6e6f23', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: '9bd16e9e5b133a17eb3b53d2e1cb89c367e40f84', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '5e31cd8fcd36857ad313f9e99691147d08858819', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1104,7 +1108,7 @@ const ZOffcanvas = class extends ReactiveControllerHost {
 };
 ZOffcanvas.style = stylesCss$4();
 
-const stylesCss$3 = () => `:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;
+const stylesCss$3 = () => `:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;align-items:flex-end;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;
 
 const stylesCss$2 = () => `.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}`;
 
@@ -1316,17 +1320,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '511bdb107a222201f119e5d9fc0e936adb2e9658', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'b31f7c2ece0d26218f8d586217180061ee84a02f', class: "input-container" }, h("z-input", { key: 'c2d0d0f22126a5676949664e21f37c6450e6e645', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (h(Host, { key: '612cbac3edf6d67856efc5b7eff0fc30d5646e7f', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'ddbdeb53bc40923281a6b83a71912668a7f67a3f', class: "input-container" }, h("z-input", { key: '5cdb21ccde59c92d9752c15c8891b642cd72cf21', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
             }, onFocus: () => (this.showResults = true), 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 || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: 'acbce883c61063828aa863072282a806da42abef', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "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")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (h("div", { key: '186b6d67d30f51df48ef9d5666e7d7472f07d144', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "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")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'dda2667e972cbe44b36f35b53363020ca96de5dc', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'b532793e35d1868ed23771b6ec1203c9e62180ee', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1353,10 +1357,10 @@ const ZTag = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd5f0ba8914c2d1503af21e5ee3ebcf81c35e9475', class: {
+        return (h(Host, { key: '273eb9a78f7f39ed81015bbe235b46d8582536dc', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: 'c15ecbd499567cfbd03a2f64117858676dc6e353', name: this.icon }), h("div", { key: '6b22a48ec600929db078c2fdb692c828ac3bf6e3' }, h("slot", { key: '6566b710bdb7a0fa765628e2dad24ad4b0bc9bd8' }))));
+            } }, this.icon && h("z-icon", { key: '5e40ec0815396062058b551eaaa473d4334c82d9', name: this.icon }), h("div", { key: 'af9ed36756ea11b9b50f7c155e546b0e369e73a3' }, h("slot", { key: 'eeb87108d276c593c17dfa0aec905a75cf0f826d' }))));
     }
     get host() { return getElement(this); }
 };