@zanichelli/albe-web-components 19.5.0 → 19.6.0

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

@@ -276,7 +276,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (index$1.h(index$1.Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, index$1.h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), index$1.h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, index$1.h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (index$1.h(index$1.Host, { key: '6ea43dd25c57ed4292a243326d7c8af37e88175a', "menu-length": this.menuLength }, index$1.h("div", { key: '2909e033b13f3c3703ba3402dddd58ab93de9d83', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: 'f4db1b9e05adb9ec6abfc5be7d7eb03d23cdadeb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'd654db6c1f20676c702ffd55896f74dc83b008ae', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '9baf1c16220364d06665b2e77f3f40c22abf9312', name: "top-subtitle" }))), index$1.h("div", { key: 'cd2665cc5b5e3528080ae049ff5c1b1b259387f8', class: "heading-title" }, index$1.h("slot", { key: 'b52786726e900d20c4f7251650fe828075e656ca', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: 'fbb0a8b9d580ffef099072782f9efded6ae448ba', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'e4d4bc464bcb11330a096582abf0ad7b4f95aed0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: 'eb712a6bd2324625dbb4647aa3e91e3c1bf21340', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: '90d4f9eb7b361eb8e394a504d3779ea80241bc32', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -337,8 +337,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 (index$1.h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), index$1.h("slot", null)));
+        const shouldRenderAsLink = normalizedRole === "link";
+        if (this.href || shouldRenderAsLink) {
+            return (index$1.h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href || "#", target: this.target }), this.renderIcon(), index$1.h("slot", null)));
         }
         return (index$1.h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), index$1.h("slot", null)));
     }
@@ -359,7 +360,7 @@ const ZDivider = class {
         this.orientation = index.DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (index$1.h(index$1.Host, { key: '43a290ca09c39c630779133fa5fd9912fca785e0', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -413,7 +414,7 @@ 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: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "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: '7c57cd059787e6ec7d12b0aceb02f8b6bb5b79a2', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -596,7 +597,8 @@ const ZInput = class {
             ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
             : {};
         const ariaInvalid = this.status === index.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 {
@@ -645,7 +647,7 @@ const ZInput = class {
             } }, index$1.h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
-        return (index$1.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) }, index$1.h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
+        return (index$1.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) }, index$1.h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
     }
     renderMessage() {
         if (utils.boolean(this.message) === false) {
@@ -667,7 +669,8 @@ const ZInput = class {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (index$1.h("div", { class: "checkbox-wrapper" }, index$1.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())), index$1.h("label", { htmlFor: this.htmlid, class: {
+        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.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes())), index$1.h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === index.LabelPosition.RIGHT,
                 "before": this.labelPosition === index.LabelPosition.LEFT,
@@ -676,7 +679,8 @@ const ZInput = class {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (index$1.h("div", { class: "radio-wrapper" }, index$1.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())), index$1.h("label", { htmlFor: this.htmlid, class: {
+        const ariaRequired = this.required ? { "aria-required": "true" } : {};
+        return (index$1.h("div", { class: "radio-wrapper" }, index$1.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)), index$1.h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === index.LabelPosition.RIGHT,
                 "before": this.labelPosition === index.LabelPosition.LEFT,
@@ -698,7 +702,7 @@ const ZInput = class {
             default:
                 input = this.renderInputText(this.type);
         }
-        return index$1.h(index$1.Host, { key: '2536f6387f2325190522fc8cc4f788147bead800' }, input);
+        return index$1.h(index$1.Host, { key: '7a98a32f222c422a2f253f0cadd78cf27e0c8913' }, input);
     }
     get hostElement() { return index$1.getElement(this); }
 };
@@ -727,7 +731,7 @@ const ZInputMessage = class {
         this.onMessageChange();
     }
     render() {
-        return (index$1.h(index$1.Host, Object.assign({ key: '575ca29cba9f2d617b8b2c65bb054204e7aa411c' }, this.statusRole), this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: '6b9a19626fac468cdf5773aebd66cba90489eaa3', name: this.statusIcons[this.status] }), index$1.h("span", { key: 'c951a0146f5fe8def8428aee39ce923b24aa23bb', id: this.htmlId, innerHTML: this.message })));
+        return (index$1.h(index$1.Host, Object.assign({ key: 'a35cc36ee979d11215b973a0f11e2c8f59105a50' }, this.statusRole, { id: this.htmlId }), this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: 'be5aa19afcdddefe15f252b8ea175b0615a5e983', name: this.statusIcons[this.status] }), index$1.h("span", { key: 'b1d11a0a9694e604b6aa252c2d8a77143288ad99', innerHTML: this.message })));
     }
     static get watchers() { return {
         "message": [{
@@ -773,7 +777,7 @@ const ZList = class {
         this.setChildrenSizeType();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2aac86dccac20cc21ec7c1341a99298f8523af49' }, index$1.h("slot", { key: '207231c63243efcd61917a9b4aa3394e22379bbd' })));
+        return (index$1.h(index$1.Host, { key: 'f9a6d8006b845e618b0aff2c8b0ed3568c438e4d' }, index$1.h("slot", { key: 'd9b7fd704481fdc6870d8269833ddacb035cb1b4' })));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -940,7 +944,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (index$1.h(index$1.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 }, index$1.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" }, index$1.h("div", { key: 'ccca86019dec23767ae7bcf5af988c7f2366d850', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: 'f8f1b6053d0fe0415b520c4f1deaba92e24019b8', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (index$1.h(index$1.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 }, index$1.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" }, index$1.h("div", { key: 'c0ec5ddcbdb6b5cea2fe6fa5ec548ca0979fb8bd', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: '50a40995617a49ae25c8351bdcef0ed8cbe791cf', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -993,11 +997,11 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'cd9bd738252e44011edad7b468ad711a2ef83f12' }, index$1.h("div", { key: 'd2c2e41d50b4884b438ae7b25e9e2b06260df6ac', class: {
+        return (index$1.h(index$1.Host, { key: '08d721c30d9c6f11e4628990bcdb3c6a0f948ef7' }, index$1.h("div", { key: '9148e5ba5b02120034499ee9e3ba304a2c7a59bc', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, index$1.h("slot", { key: 'c47a8ea2508c87bbd0688248dcae0350d159350a', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: 'c0586eee517b42aaf76507286bd086abaecb8013', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: '5f558529f5de2f4b62403d239e8424eea6259fd3' })));
+            } }, index$1.h("slot", { key: 'c7e244b995fd510f0de3fe5b56fab29645e498e3', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: 'b7b215bb4fb5d788f51d939277dd63304fecaf50', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: '4b84ad375fca78efccb67e39fdb84ea2786951ab' })));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -1087,8 +1091,8 @@ const ZOffcanvas = class extends reactiveController.ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '7296200f4eb4aa2f332af790ea04d6e6e78e824c', "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: '8aef7db88fcecdc89484aad70c3a30973dbf17d8', class: "canvas-container" }, index$1.h("div", { key: 'ca715459c24fe5256987efd279db222446186692', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: 'a365eb11a346deaa1d93deee0e0625858070296e', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
-            this.showBackdrop && (index$1.h("div", { key: '4e918c25bda62190bc87720ceb3269d99bd4ad5d', class: "backdrop", onClick: (ev) => {
+        return (index$1.h(index$1.Host, { key: '51b926901186e062a9c9bb092db3429a7ac305eb', "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: '353b8acace02902509f4ae502718aa7e8c6ee1e2', class: "canvas-container" }, index$1.h("div", { key: '2a18631be55b973bd8a3853284d3e1be5c6e6f23', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: '9bd16e9e5b133a17eb3b53d2e1cb89c367e40f84', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
+            this.showBackdrop && (index$1.h("div", { key: '5e31cd8fcd36857ad313f9e99691147d08858819', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1106,7 +1110,7 @@ const ZOffcanvas = class extends reactiveController.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;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$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}`;
 
@@ -1318,17 +1322,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index$1.h(index$1.Host, { key: '511bdb107a222201f119e5d9fc0e936adb2e9658', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: 'b31f7c2ece0d26218f8d586217180061ee84a02f', class: "input-container" }, index$1.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 (index$1.h(index$1.Host, { key: '612cbac3edf6d67856efc5b7eff0fc30d5646e7f', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: 'ddbdeb53bc40923281a6b83a71912668a7f67a3f', class: "input-container" }, index$1.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) => {
                 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: 'acbce883c61063828aa863072282a806da42abef', 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: '186b6d67d30f51df48ef9d5666e7d7472f07d144', 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: '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)) && (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: '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 index$1.getElement(this); }
     static get watchers() { return {
@@ -1355,10 +1359,10 @@ const ZTag = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'd5f0ba8914c2d1503af21e5ee3ebcf81c35e9475', class: {
+        return (index$1.h(index$1.Host, { key: '273eb9a78f7f39ed81015bbe235b46d8582536dc', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && index$1.h("z-icon", { key: 'c15ecbd499567cfbd03a2f64117858676dc6e353', name: this.icon }), index$1.h("div", { key: '6b22a48ec600929db078c2fdb692c828ac3bf6e3' }, index$1.h("slot", { key: '6566b710bdb7a0fa765628e2dad24ad4b0bc9bd8' }))));
+            } }, this.icon && index$1.h("z-icon", { key: '5e40ec0815396062058b551eaaa473d4334c82d9', name: this.icon }), index$1.h("div", { key: 'af9ed36756ea11b9b50f7c155e546b0e369e73a3' }, index$1.h("slot", { key: 'eeb87108d276c593c17dfa0aec905a75cf0f826d' }))));
     }
     get host() { return index$1.getElement(this); }
 };