npm - @zanichelli/albe-web-components - Versions diffs - 20.0.2-RC → 20.0.3 - Mend

@zanichelli/albe-web-components 20.0.2-RC → 20.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (470) hide show

package/dist/cjs/z-app-header_12.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ var utils = require('./utils-BnCPu0Si.js');
 var iconset = require('./iconset-BIdMT0Ke.js');
 var reactiveController = require('./reactive-controller-DJkjAuqS.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}}`;
+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:var(--space-unit) var(--grid-margin);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-end}.heading-container>.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;align-self:self-end;-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)}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;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}.search-slot{margin-left:auto}.search-slot .z-label{padding-bottom:0;margin-bottom:-3px;font-size:10px;line-height:10px}.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)}.heading-block{display:flex;width:100%;flex-direction:column}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}.heading-block>.top-subtitle{margin-top:calc(var(--space-unit) * 0.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9)}: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}z-searchbar{height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}::slotted([slot="top-subtitle"]){margin-top:calc(var(--space-unit) * 0.5);margin-bottom:calc(var(--space-unit) * -0.5)}.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}}`;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 const ZAppHeader = class {
@@ -192,7 +192,12 @@ const ZAppHeader = class {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (index$1.h("z-button", { class: "search-page-button", variant: index.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index.ControlSize.X_SMALL }));
         }
-        return (index$1.h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (index$1.h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, htmlAriaLabel: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+    }
+    renderSearchLabel() {
+        if (this.searchLabel && !this.isMobile && !this.isTablet && !this.enableOffcanvas) {
+            return index$1.h("label", { class: "z-label" }, this.searchLabel);
+        }
     }
     renderProductLogos() {
         return (index$1.h(index$1.Fragment, null, this.enableZLogo && (index$1.h("span", { class: "z-logo" }, index$1.h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (index$1.h("span", { class: "product-logo" }, index$1.h("slot", { name: "product-logo" })))));
@@ -274,9 +279,15 @@ const ZAppHeader = class {
         var _a;
         (_a = this.menuResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
+    renderTopSubtitle() {
+        if (!this.hasSlot("top-subtitle") || (this.enableSearch && this.isMobile)) {
+            return;
+        }
+        return (index$1.h("div", { class: { "top-subtitle": true, "has-product-logo": this.hasSlot("product-logo") } }, index$1.h("slot", { name: "top-subtitle" })));
+    }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (index$1.h(index$1.Host, { key: 'a464234ec0ce538282727aa83c43d30b5ea23ffa', "menu-length": this.menuLength }, index$1.h("div", { key: '0f41b7571c5e1acf4298910ab415ca986616a40e', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '9b9d45789be83c2db23e035a72b60cd4910b68b2', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'bd1196659bc19936603de3994011b82ea7649147', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '5d50957c5b91c138ad21efb849fdd371e93057ae', name: "top-subtitle" }))), index$1.h("div", { key: '47a21fe5a5b508fe23cf4e185813743e8dce0fab', class: "heading-title" }, index$1.h("slot", { key: '1c027312231d68cb2ebc625b6aeed177d2e22cf4', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '6917fa59229dc3d80b5c3ca472bd14b671be9e27', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'e3ac84ff0933a8955fa7433f8ea0ae94e5eec080', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '1f3461f8b2b99d8515774265c07ddcb850ed7757', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'eda425c16602287225554fcca0c65661b46e0366', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (index$1.h(index$1.Host, { key: 'b2b9e7ca77504392b37f3d77b1266df7818cb0cf', "menu-length": this.menuLength }, index$1.h("div", { key: '9e6b112e27f30445a34f1adbe4287ab226421de0', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '44c38afdf95c506ba2d1241b88f86fe9ed2113b7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, index$1.h("div", { key: 'c061f870b799b52b089be972709793ab471a3d98', class: "heading-block" }, index$1.h("div", { key: '77b4f385458a41751e6d2363d9c07aa19e3888fc', class: "heading-title" }, index$1.h("slot", { key: 'eff35b8f35ee97e91dbcc24acc87a28f0b3268d9', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("div", { key: '9db36b58de99fe7e08d50e81c6483705108f2975', class: "title-container" }, !this.isMobile && this.renderTopSubtitle(), index$1.h("slot", { key: 'c6b537b48e4486a1ddc5f5dae27639f91d71ac0b', name: "title" })), index$1.h("div", { key: '416324b5ea6f9a6a3f27212d02710a70953ff0d7', class: "search-slot" }, this.renderSearchLabel(), this.enableSearch && !this.isMobile && this.renderSeachbar())), this.isMobile && this.renderTopSubtitle()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'c7019897ca741018b24fa29bb9bd2e01c20f3de5', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '77c54b43e038bc4f79d213934303801be87ff0ff', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'bde1fc4c59b536c7cee2acd2177c8f8f3615ffe0', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -351,7 +362,7 @@ const ZDivider = class {
         this.orientation = index.DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '372389b3d857bf0c3cc5ad9191224bc1b0c94580', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (index$1.h(index$1.Host, { key: 'f9bb5c1265d8a154ca6cb3bb88150700bfa1bd4e', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -405,12 +416,12 @@ const ZIcon = class {
         return (index$1.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(iconset.ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c64019d3c25828c266b030224a74aaa6c9e8df33', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (index$1.h(index$1.Host, { key: '4c96eeb1ad1423e901821277389c8f01287cd670', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
-const stylesGeneralCss = () => `.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;
+const stylesGeneralCss = () => `.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select):not(.cursor-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary);caret-color:transparent}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;
 const stylesTextCss = () => `.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;
@@ -657,10 +668,16 @@ const ZInput = class {
         this.checked = ev.target.checked;
         this.emitInputCheck(this.checked);
     }
+    getCheckboxAriaChecked() {
+        if (this.indeterminate) {
+            return "mixed";
+        }
+        return this.checked ? "true" : "false";
+    }
     /* START checkbox */
     renderCheckbox() {
         const ariaRequired = this.required ? { "aria-required": "true" } : {};
-        return (index$1.h("div", { class: "checkbox-wrapper" }, index$1.h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.indeterminate ? false : this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes(), { ref: (el) => {
+        return (index$1.h("div", { class: "checkbox-wrapper" }, index$1.h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.indeterminate ? false : this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value, "aria-checked": this.getCheckboxAriaChecked() }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes(), { ref: (el) => {
                 this.inputRef = el;
                 this.syncCheckboxIndeterminate();
             } })), index$1.h("label", { htmlFor: this.htmlid, class: {
@@ -718,7 +735,7 @@ const ZInputMessage = class {
         };
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'acc2b74cb7dfda1d8529785c601d3fd92c2884dc', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: 'b9532d92b1a91d4218c30ed7bb543964c7822b03', name: this.statusIcons[this.status] }), index$1.h("span", { key: '933d1ac0a4194da9ec3f70ca715812d6cf3a7891', innerHTML: this.message })));
+        return (index$1.h(index$1.Host, { key: '9172ac365fc1852474edf21707ed4cb4ba42aa89', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: '92e17ba97e7648ee9974f8e3da732169be30a6f6', name: this.statusIcons[this.status] }), index$1.h("span", { key: '11753702f3a21f1f422f85c1bc4c55719152a2d8', innerHTML: this.message })));
     }
 };
 ZInputMessage.style = stylesCss$8();
@@ -752,7 +769,7 @@ const ZList = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'aeaf7ef699223b8f5da68f49d8eb6ea5ea5cebb1', role: this.htmlRole }, index$1.h("slot", { key: '942882c5e4f03ef9dd64ec255b4cd8b8c5c2c107' })));
+        return (index$1.h(index$1.Host, { key: '98a78ca75d510f3a1d804bbb2e2fc33d815b74b1', role: this.htmlRole }, index$1.h("slot", { key: '6bfc24a0ed5dfc13cffc47eb20ad4475ba598c20' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -926,7 +943,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '08ed403eb2e275906b9cce38cd09d8ad26683efc', "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.htmlRole }, index$1.h("div", { key: '64c3b6826652d98b557f32098ab87b3eccabed93', 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" }, index$1.h("div", { key: '222187f25d69dd2fb6128ce6a0c5c81dd6a05b31', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: '1ff298c5fc086f1e303194b69de2324e5448508f', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (index$1.h(index$1.Host, { key: '6309a4608286747636c1bc81a1783e31224b0ce7', "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.htmlRole }, index$1.h("div", { key: '362e834bcc4b561e9a90c74bb41a3dcd3bf4c3ad', 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" }, index$1.h("div", { key: '9b4bc30d2200b4eb3c9da3030acef0222c690734', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: '09a6e380faaefce03873bc1976bec917c60fd9b9', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -985,11 +1002,11 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6c87868fe2ef8cb8cba06bea94d4eaca25c3f0e7', role: this.htmlRole }, index$1.h("div", { key: 'bf277438554dd56b141040c8af5e2171eeedfdb7', class: {
+        return (index$1.h(index$1.Host, { key: '2c550cf5604ca7c80621970c7b9046b81aee0826', role: this.htmlRole }, index$1.h("div", { key: '7042a6519c28bfa39a1914ddadb811a1e8469fcf', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, index$1.h("slot", { key: 'c3bf82239b5f0418e10bffbc4e1e26e4c3172dab', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: '7127f3a0d6f501f305431d57068da428ccf8b90b', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: '7dfc72c7992c5f28fce1a204ebabfa2a012b7708' })));
+            } }, index$1.h("slot", { key: 'fe5be90d287663bcdf69a6763012d9a364a7ff50', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: '0717918b0003188cfef8e35de12ba54f79b43bc3', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: 'd4362b569458fad45835fae90d29f294baea0f75' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -1099,8 +1116,8 @@ const ZOffcanvas = class extends reactiveController.ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c3e830f6e06a3f5bfcfa491417b3f4a04c694d22', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "dialog" : null }, index$1.h("div", { key: '70347123fbb93082b6e38ff1de4a6364a4f433fb', class: "canvas-container" }, index$1.h("div", { key: 'ef277c0f8e0fc7c69fbd1c654f67f4ec40aed0ec', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: '1a2a5ff0fba5b2eae9dc90af4a0a238007008e11', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
-            this.showBackdrop && (index$1.h("div", { key: 'fbe7fb00cfcc67e3021fbb50ab042a22d0cc5053', class: "backdrop", onClick: (ev) => {
+        return (index$1.h(index$1.Host, { key: '1d8d592805e988c32fdb618f0c94984d666be230', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "dialog" : null }, index$1.h("div", { key: '099e499d2387ab7ec83931388db2ee8ef07ab183', class: "canvas-container" }, index$1.h("div", { key: 'ff0e669b94a0bb5d204041f17a89098860ddba84', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: 'e9a71a394675ed08e74beb9c097069d0e3099c8d', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
+            this.showBackdrop && (index$1.h("div", { key: '364dc6513badd40238406bb47848e104a2095c87', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1333,17 +1350,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index$1.h(index$1.Host, { key: '82c926179762db33e8d1c425cac474affd59fea6', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '689d1cda6b0c217e5afe892627f31100858c1a72', class: "input-container" }, index$1.h("z-input", { key: 'd596769c9a346c4548c5b71d10bbe9b2456556ee', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (index$1.h(index$1.Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, index$1.h("z-input", { key: 'a4101a49facd4e1407d9f8e25098096426ab547c', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 utils.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) && (index$1.h("div", { key: '954f6984c04ba133c1637220ed47e778d7440e22', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.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) && (index$1.h("div", { key: '1822c6ffbce819bfad2a6c88cc476191afbc8c93', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.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)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.h("z-button", { key: '898d0c61de5c60e3e78be3b2336c1cbb4adcc3e3', 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)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.h("z-button", { key: '61c56c0c72d1d972a7272e90b1f34003aae79a32', 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 index$1.getElement(this); }
     static get watchers() { return {
@@ -1370,10 +1387,10 @@ const ZTag = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '656a936ce4073db7a7895cac9f07e1ba6b9b5c2f', class: {
+        return (index$1.h(index$1.Host, { key: '395a1d2c967fb99bafcea3fa35d56b9aaffe3f4e', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && index$1.h("z-icon", { key: 'df213cce44c020028985d53064c3d0cd1ba645e9', name: this.icon }), index$1.h("div", { key: '2fa92332ae99d54527d7ab347e66f4424d241cf3' }, index$1.h("slot", { key: 'c52c05d031edbe81a9547c72479dae5c8d924a60' }))));
+            } }, this.icon && index$1.h("z-icon", { key: '9cd7c991e5018d8257d9e3644afe5afd417c5b96', name: this.icon }), index$1.h("div", { key: '0eb07e9a40d1dba81b758cb0d988542ca3d19dde' }, index$1.h("slot", { key: '96cce8136e7f0516bbdf488ea122238a6d89adff' }))));
     }
     get host() { return index$1.getElement(this); }
 };