@zanichelli/albe-web-components 7.1.1 → 7.2.0

package/dist/cjs/z-dragdrop-area_2.cjs.entry.js

@@ -48,21 +48,15 @@ const ZModal = class {
     this.closeButtonLabel = "chiudi modale";
     /** add role "alertdialog" to dialog (optional, default is false) */
     this.alertdialog = false;
-    /** if true, the modal is closable (optional, default is true) */
-    this.closable = true;
   }
   emitModalClose() {
-    if (this.closable) {
-      this.modalClose.emit({ modalid: this.modalid });
-    }
+    this.modalClose.emit({ modalid: this.modalid });
   }
   emitModalHeaderActive() {
     this.modalHeaderActive.emit({ modalid: this.modalid });
   }
   emitBackgroundClick() {
-    if (this.closable) {
-      this.modalBackgroundClick.emit({ modalid: this.modalid });
-    }
+    this.modalBackgroundClick.emit({ modalid: this.modalid });
   }
   componentDidLoad() {
     this.open();
@@ -75,9 +69,7 @@ const ZModal = class {
   /** close modal */
   async close() {
     var _a;
-    if (this.closable) {
-      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
-    }
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
   }
   /**
    * Get a list of focusable elements in the dialog.
@@ -112,20 +104,8 @@ const ZModal = class {
       firstFocusableElement.focus();
     }
   }
-  closeButtonSlot() {
-    if (this.closable) {
-      return (index.h("slot", { name: "modalCloseButton" }, index.h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, index.h("z-icon", { name: "multiply-circle-filled" }))));
-    }
-  }
-  handleEscape(e) {
-    if (this.closable)
-      return;
-    e.preventDefault();
-  }
   render() {
-    return (index.h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(),
-      // @ts-ignore
-      onCancel: (e) => this.handleEscape(e) }, index.h("div", { class: "modal-container", id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && index.h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), this.closeButtonSlot()), index.h("div", { class: "modal-content", id: "modal-content" }, index.h("slot", { name: "modalContent" }))), index.h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
+    return (index.h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose() }, index.h("div", { class: "modal-container", id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && index.h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), index.h("slot", { name: "modalCloseButton" }, index.h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, index.h("z-icon", { name: "multiply-circle-filled" })))), index.h("div", { class: "modal-content", id: "modal-content" }, index.h("slot", { name: "modalContent" }))), index.h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
         this.emitBackgroundClick();
         this.close();
       } })));

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

@@ -198,7 +198,7 @@ const ZListElement = class {
     }
   }
   render() {
-    return (index.h(index.Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, index.h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, index.h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index$1.ListDividerType.ELEMENT && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+    return (index.h(index.Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, index.h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, index.h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index$1.ListDividerType.ELEMENT && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/z-menu-section.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:is(:host(:is([active],[open])) .label,.label:hover) ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-icon02)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) * 0.5);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:last-child){padding-bottom:0}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentcolor}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) * 0.5);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:last-child){padding-bottom:0}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover){color:var(--color-secondary01)}";
 
 const ZMenuSection = class {
   constructor(hostRef) {
@@ -31,21 +31,13 @@ const ZMenuSection = class {
    * Check if some content slot is set.
    */
   checkContent() {
-    this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
-  }
-  /**
-   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
-   * @param ev Slotchange event
-   */
-  onLabelSlotChange(ev) {
-    const labelElement = ev.target.assignedElements()[0];
-    labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
   }
   componentWillLoad() {
     this.checkContent();
   }
   render() {
-    return (index.h(index.Host, { role: "menu", open: this.open }, index.h("button", { class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, index.h("slot", { onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (index.h("div", { class: "items" }, index.h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    return (index.h(index.Host, { role: "menu", open: this.open }, index.h("button", { class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, index.h("slot", null), this.hasContent && index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (index.h("div", { class: "items" }, index.h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
   }
   get hostElement() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg);letter-spacing:0.36px}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label .menu-label-content:hover,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label .menu-label-content:hover ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;font-size:var(--font-size-5);font-weight:inherit;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{display:flex;align-items:center;padding:var(--space-unit) 0;border-bottom:var(--border-size-large) solid var(--color-surface05)}:host([active]) .menu-label-content,:host([open]) .menu-label-content,.menu-label:hover .menu-label-content,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}.menu-label ::slotted(*){width:100%;margin:0;appearance:none;font-size:var(--font-size-5);line-height:1.2;outline:none}.menu-label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentcolor}.content{background:var(--color-surface01)}.content[hidden]{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){display:inline-flex;width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01)}";
 
 const ZMenu = class {
   constructor(hostRef) {
@@ -15,18 +15,16 @@ const ZMenu = class {
      * Flag to set the display mode of the list.
      * If true, the list will be absolutely positioned under the menu label,
      * stacked beneath it otherwise.
+     * @default false
      */
     this.floating = false;
-    /** The opening state of the menu. */
-    this.open = false;
     /**
-     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
-     * A small border is placed under it as a separator from other elements.
+     * The opening state of the menu.
+     * @default false
      */
-    this.verticalContext = false;
+    this.open = false;
     this.toggle = this.toggle.bind(this);
     this.checkContent = this.checkContent.bind(this);
-    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
     this.onItemsChange = this.onItemsChange.bind(this);
   }
   toggle() {
@@ -56,14 +54,6 @@ const ZMenu = class {
   componentWillLoad() {
     this.checkContent();
   }
-  /**
-   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
-   * @param ev Slotchange event
-   */
-  onLabelSlotChange(ev) {
-    const labelElement = ev.target.assignedElements()[0];
-    labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
-  }
   /**
    * Correctly set position of the floating menu in order to prevent overflow.
    * @param live Should run the method on every refresh frame.
@@ -85,29 +75,27 @@ const ZMenu = class {
    * Check if some content slot is set.
    */
   checkContent() {
-    this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
-    this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+    this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
   }
   /**
    * Set `menuitem` role to all menu items.
-   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
    */
   onItemsChange() {
     this.checkContent();
-    const items = this.hostElement.querySelectorAll("[slot=item]");
-    items.forEach((item) => {
-      item.setAttribute("role", "menuitem");
-      item.dataset.text = item.textContent;
-    });
+    const items = this.hostElement.querySelectorAll('[slot="item"]');
+    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute("role", "menuitem"));
   }
   renderMenuLabel() {
     if (this.hasContent) {
-      return (index.h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }), index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+      return (index.h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, index.h("div", { class: "menu-label-content" }, index.h("slot", null), index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
     }
-    return (index.h("div", { class: "menu-label" }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    return (index.h("div", { class: "menu-label" }, index.h("div", { class: "menu-label-content" }, index.h("slot", null))));
   }
   render() {
-    return (index.h(index.Host, null, this.renderMenuLabel(), this.hasContent && (index.h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index.h("header", { class: "header" }, index.h("slot", { name: "header", onSlotchange: this.checkContent }))), index.h("div", { class: "items", role: "menu" }, index.h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+    return (index.h(index.Host, null, this.renderMenuLabel(), index.h("div", { class: "content", ref: (el) => {
+        this.content = el;
+      }, hidden: !this.open }, this.hasHeader && (index.h("header", { class: "header" }, index.h("slot", { name: "header", onSlotchange: this.checkContent }))), index.h("div", { class: "items", role: "menu" }, index.h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -7,7 +7,7 @@ const index$1 = require('./index-7a9a8430.js');
 const utils = require('./utils-305151da.js');
 require('./breakpoints-88c4fd6c.js');
 
-const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}:host>div>div.results-wrapper>div.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"])>div>div.results-wrapper>div.results .item,:host([size=\"x-small\"])>div>div.results-wrapper>div.results .item,:host([size=\"small\"])>div>div.results-wrapper>div.results .category-heading,:host([size=\"x-small\"])>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-2)}:host([size=\"small\"])>div>div.results-wrapper>div.results .item:not(.has-category),:host([size=\"x-small\"])>div>div.results-wrapper>div.results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
+const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}:host>div>div.results-wrapper>div.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}";
 
 const ZSearchbar = class {
   constructor(hostRef) {
@@ -31,12 +31,6 @@ const ZSearchbar = class {
     this.sortResultsItems = false;
     /** Show submit button */
     this.showSearchButton = false;
-    /** Set button icon without label*/
-    this.searchButtonIconOnly = false;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = index$1.ControlSize.BIG;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = index$1.ButtonVariant.PRIMARY;
     this.searchString = "";
     this.currResultsCount = 0;
     this.showResults = false;
@@ -149,16 +143,13 @@ const ZSearchbar = class {
   renderInput() {
     return (index.h("z-input", { ref: (val) => {
         this.inputRef = val;
-      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => utils.handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value, size: this.size }));
+      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => utils.handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value }));
   }
   renderButton() {
     if (!this.showSearchButton) {
       return null;
     }
-    const iconProp = this.searchButtonIconOnly ? { icon: "search" } : null;
-    const buttonLabel = this.searchButtonIconOnly ? "" : "CERCA";
-    const defaultProps = Object.assign({ disabled: this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, iconProp);
-    return index.h("z-button", Object.assign({}, defaultProps), buttonLabel);
+    return (index.h("z-button", { disabled: this.preventSubmit, variant: index$1.ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
   }
   renderResults() {
     if (!this.showResults ||

package/dist/collection/collection-manifest.json

@@ -29,9 +29,9 @@
     "./components/navigation/tabs/z-navigation-tab/index.js",
     "./components/navigation/tabs/z-navigation-tab-link/index.js",
     "./components/navigation/tabs/z-navigation-tabs/index.js",
+    "./components/navigation/z-menu/index.js",
     "./components/navigation/z-app-header/index.js",
     "./components/navigation/z-link/index.js",
-    "./components/navigation/z-menu/index.js",
     "./components/navigation/z-menu-section/index.js",
     "./components/notification/z-info-box/index.js",
     "./components/notification/z-notification/index.js",

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { ButtonVariant, ListDividerType, ControlSize, } from "../../../beans";
+import { ButtonVariant, ListDividerType } from "../../../beans";
 import { handleEnterKeydSubmit, randomId } from "../../../utils/utils";
 /**
  * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
@@ -22,12 +22,6 @@ export class ZSearchbar {
     this.sortResultsItems = false;
     /** Show submit button */
     this.showSearchButton = false;
-    /** Set button icon without label*/
-    this.searchButtonIconOnly = false;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ControlSize.BIG;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
     this.searchString = "";
     this.currResultsCount = 0;
     this.showResults = false;
@@ -140,16 +134,13 @@ export class ZSearchbar {
   renderInput() {
     return (h("z-input", { ref: (val) => {
         this.inputRef = val;
-      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value, size: this.size }));
+      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value }));
   }
   renderButton() {
     if (!this.showSearchButton) {
       return null;
     }
-    const iconProp = this.searchButtonIconOnly ? { icon: "search" } : null;
-    const buttonLabel = this.searchButtonIconOnly ? "" : "CERCA";
-    const defaultProps = Object.assign({ disabled: this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, iconProp);
-    return h("z-button", Object.assign({}, defaultProps), buttonLabel);
+    return (h("z-button", { disabled: this.preventSubmit, variant: ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
   }
   renderResults() {
     if (!this.showResults ||
@@ -457,70 +448,6 @@ export class ZSearchbar {
         "attribute": "show-search-button",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "searchButtonIconOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set button icon without label"
-        },
-        "attribute": "search-button-icon-only",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ControlSize",
-          "resolved": "ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL",
-          "references": {
-            "ControlSize": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "ControlSize.BIG"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ButtonVariant",
-          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
-          "references": {
-            "ButtonVariant": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "ButtonVariant.PRIMARY"
       }
     };
   }

package/dist/collection/components/inputs/z-searchbar/styles.css

@@ -209,26 +209,3 @@
     line-height: var(--font-size-6);
   }
 }
-
-:host([size="small"]) > div > div.results-wrapper > div.results .item,
-:host([size="x-small"]) > div > div.results-wrapper > div.results .item,
-:host([size="small"]) > div > div.results-wrapper > div.results .category-heading,
-:host([size="x-small"]) > div > div.results-wrapper > div.results .category-heading {
-  font-size: var(--font-size-2);
-}
-
-:host([size="small"]) > div > div.results-wrapper > div.results .item:not(.has-category),
-:host([size="x-small"]) > div > div.results-wrapper > div.results .item:not(.has-category) {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
-}
-
-:host([size="small"])::part(list-item-container) {
-  min-height: calc(var(--space-unit) * 4.5);
-  padding: 0;
-}
-
-:host([size="x-small"])::part(list-item-container) {
-  min-height: calc(var(--space-unit) * 4);
-  padding: 0;
-}

package/dist/collection/components/list/z-list-element/index.js

@@ -158,7 +158,7 @@ export class ZListElement {
     }
   }
   render() {
-    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   static get is() { return "z-list-element"; }
   static get encapsulation() { return "shadow"; }

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

@@ -11,21 +11,15 @@ export class ZModal {
     this.closeButtonLabel = "chiudi modale";
     /** add role "alertdialog" to dialog (optional, default is false) */
     this.alertdialog = false;
-    /** if true, the modal is closable (optional, default is true) */
-    this.closable = true;
   }
   emitModalClose() {
-    if (this.closable) {
-      this.modalClose.emit({ modalid: this.modalid });
-    }
+    this.modalClose.emit({ modalid: this.modalid });
   }
   emitModalHeaderActive() {
     this.modalHeaderActive.emit({ modalid: this.modalid });
   }
   emitBackgroundClick() {
-    if (this.closable) {
-      this.modalBackgroundClick.emit({ modalid: this.modalid });
-    }
+    this.modalBackgroundClick.emit({ modalid: this.modalid });
   }
   componentDidLoad() {
     this.open();
@@ -38,9 +32,7 @@ export class ZModal {
   /** close modal */
   async close() {
     var _a;
-    if (this.closable) {
-      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
-    }
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
   }
   /**
    * Get a list of focusable elements in the dialog.
@@ -75,20 +67,8 @@ export class ZModal {
       firstFocusableElement.focus();
     }
   }
-  closeButtonSlot() {
-    if (this.closable) {
-      return (h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, h("z-icon", { name: "multiply-circle-filled" }))));
-    }
-  }
-  handleEscape(e) {
-    if (this.closable)
-      return;
-    e.preventDefault();
-  }
   render() {
-    return (h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(),
-      // @ts-ignore
-      onCancel: (e) => this.handleEscape(e) }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), this.closeButtonSlot()), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
+    return (h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose() }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
         this.emitBackgroundClick();
         this.close();
       } })));
@@ -193,24 +173,6 @@ export class ZModal {
         "attribute": "alertdialog",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "closable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "if true, the modal is closable (optional, default is true)"
-        },
-        "attribute": "closable",
-        "reflect": false,
-        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/navigation/z-app-header/index.js

@@ -68,6 +68,8 @@ export class ZAppHeader {
      * - auto: the menu bar is positioned near the title
      * - stack: the menu bar is positioned below the title
      * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+     *
+     * **Optional**
      */
     this.flow = "auto";
     /**
@@ -86,17 +88,11 @@ export class ZAppHeader {
       });
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
-    this.collectMenuElements = this.collectMenuElements.bind(this);
+    this.collectMenuElements.bind(this);
   }
   emitStickingEvent() {
     this.sticking.emit(this._stuck);
   }
-  openDrawer() {
-    this.drawerOpen = true;
-  }
-  closeDrawer() {
-    this.drawerOpen = false;
-  }
   componentDidLoad() {
     this.collectMenuElements();
     this.onStuckMode();
@@ -151,14 +147,19 @@ export class ZAppHeader {
       return;
     }
     const elements = this.menuElements;
-    elements.forEach((element) => {
-      element.open = false;
-      element.floating = !this.drawerOpen;
-      element.verticalContext = this.drawerOpen;
-    });
+    for (let i = 0, len = elements.length; i < len; i++) {
+      elements[i].open = false;
+      elements[i].floating = !this.drawerOpen;
+    }
   }
   render() {
-    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this._stuck && (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title)))))));
+    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this._stuck && (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title)))))));
+  }
+  openDrawer() {
+    this.drawerOpen = true;
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
   }
   static get is() { return "z-app-header"; }
   static get encapsulation() { return "shadow"; }
@@ -239,7 +240,7 @@ export class ZAppHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Control menu bar position in the header.\n- auto: the menu bar is positioned near the title\n- stack: the menu bar is positioned below the title\n- offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu"
+          "text": "Control menu bar position in the header.\n- auto: the menu bar is positioned near the title\n- stack: the menu bar is positioned below the title\n- offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n\n**Optional**"
         },
         "attribute": "flow",
         "reflect": true,

package/dist/collection/components/navigation/z-app-header/styles.css

@@ -38,8 +38,9 @@
   --app-header-typography-11-tracking: calc(-2.2 / 1em);
   --app-header-typography-12-tracking: calc(-2.4 / 1em);
 
-  /* Variable to set stuck header and drawer's top offset.
-  Useful when something is absolutely positioned above the header. */
+  /**
+   * Variable to set stuck header and drawer's top offset. Useful when something is absolutely positioned above the header.
+   */
   --app-header-top-offset: 48px;
   --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);