@zanichelli/albe-web-components 7.2.0 → 7.3.0

package/dist/collection/components/buttons/z-chip/styles.css

@@ -1,4 +1,4 @@
-:host > button {
+:host > .z-chip-container {
   display: inline-flex;
   align-items: center;
   padding: 0 calc(var(--space-unit) * 1.5);
@@ -12,46 +12,53 @@
   font-weight: var(--font-sb);
 }
 
-:host > button:not(:disabled) > z-icon:last-child:hover {
+:host > .z-chip-container:not([aria-disabled]) button > z-icon:last-child:hover {
   color: var(--color-hover-primary);
   fill: var(--color-hover-primary);
 }
 
-:host > button:hover:not(:disabled) > z-icon:first-child {
+:host > .z-chip-container:hover:not([aria-disabled]) > z-icon:first-child {
   fill: var(--color-icon02);
 }
 
-:host > button > z-icon.icon-sx {
+:host > .z-chip-container > button {
+  padding: 0;
+  border: none;
+  margin-left: var(--space-unit);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+:host > .z-chip-container > z-icon.icon-sx {
   margin-right: calc(var(--space-unit) / 2);
 }
 
-:host > button > z-icon:last-child {
-  margin-left: var(--space-unit);
-  cursor: pointer;
+:host > .z-chip-container > button > z-icon:last-child {
   fill: var(--color-primary01);
 }
 
-:host > button:disabled,
-:host > button:disabled > z-icon {
+:host > .z-chip-container[aria-disabled],
+:host > .z-chip-container[aria-disabled] > z-icon,
+:host > .z-chip-container[aria-disabled] > button > z-icon {
   color: var(--color-disabled03);
   fill: var(--color-disabled03);
 }
 
-:host > button:disabled > z-icon {
+:host > .z-chip-container[aria-disabled] > button > z-icon {
   cursor: auto;
 }
 
-:host > button:disabled {
+:host > .z-chip-container[aria-disabled] {
   border: var(--border-size-small) solid var(--color-disabled01);
 }
 
-:host > button:focus:focus-visible,
-:host > div:focus:focus-visible {
+:host > .z-chip-container > button:focus:focus-visible {
+  border-radius: 100%;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
-:host > button:hover:not(:disabled):active:hover > z-icon:last-child {
+:host > button:hover:not(:disabled):active:hover > button > z-icon:last-child {
   color: var(--color-primary01);
   fill: var(--color-primary01);
 }
@@ -76,21 +83,21 @@
 }
 
 /* :host type */
-:host > button.default,
+:host > .z-chip-container.default,
 :host > div.default {
   min-height: 44px;
   border-radius: 22px;
   line-height: 44px;
 }
 
-:host > button.medium,
+:host > .z-chip-container.medium,
 :host > div.medium {
   min-height: 40px;
   border-radius: 22px;
   line-height: 40px;
 }
 
-:host > button.small,
+:host > .z-chip-container.small,
 :host > div.small {
   min-height: 36px;
   border-radius: 22px;
@@ -99,7 +106,7 @@
 
 /* Desktop breakpoint */
 @media only screen and (min-width: 1152px) {
-  :host > button {
+  :host > .z-chip-container {
     font-size: 12px;
   }
 
@@ -108,21 +115,21 @@
   }
 
   /* :host type */
-  :host > button.default,
+  :host > .z-chip-container.default,
   :host > div.default {
     min-height: 32px;
     border-radius: 16px;
     line-height: 32px;
   }
 
-  :host > button.medium,
+  :host > .z-chip-container.medium,
   :host > div.medium {
     min-height: 28px;
     border-radius: 16px;
     line-height: 28px;
   }
 
-  :host > button.small,
+  :host > .z-chip-container.small,
   :host > div.small {
     min-height: 24px;
     border-radius: 16px;

package/dist/collection/components/buttons/z-toggle-button/index.js

@@ -5,6 +5,8 @@ export class ZToggleButton {
     this.isdisabled = false;
     /** open by default (optional) */
     this.opened = false;
+    /**  aria-label for the button */
+    this.ariaLabel = "";
   }
   emitToggleClick() {
     if (this.isdisabled) {
@@ -17,7 +19,7 @@ export class ZToggleButton {
     return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
         "isopen": this.opened,
         "avoid-clicks": this.avoidclick,
-      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+      }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
   }
   static get is() { return "z-toggle-button"; }
   static get encapsulation() { return "shadow"; }
@@ -102,6 +104,24 @@ export class ZToggleButton {
         "attribute": "opened",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "aria-label for the button"
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/buttons/z-toggle-button/styles.css

@@ -15,7 +15,6 @@ button {
   font-weight: var(--font-sb);
   outline: none;
   text-transform: uppercase;
-  transition: all 200ms linear;
 }
 
 button::-moz-focus-inner {
@@ -28,8 +27,7 @@ button:hover {
 }
 
 button:focus {
-  border-color: var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
   color: var(--myz-blue);
   fill: var(--myz-blue);
 }

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -78,7 +78,7 @@
 }
 
 :host(:not([disabled]):focus-within) .indicator {
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
 }
 
 :host([disabled]) .indicator {

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { ButtonVariant, ListDividerType } from "../../../beans";
+import { ButtonVariant, ListDividerType, ControlSize, } from "../../../beans";
 import { handleEnterKeydSubmit, randomId } from "../../../utils/utils";
 /**
  * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
@@ -22,6 +22,12 @@ 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;
@@ -134,13 +140,16 @@ 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 }));
+      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value, size: this.size }));
   }
   renderButton() {
     if (!this.showSearchButton) {
       return null;
     }
-    return (h("z-button", { disabled: this.preventSubmit, variant: ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
+    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);
   }
   renderResults() {
     if (!this.showResults ||
@@ -448,6 +457,70 @@ 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,3 +209,26 @@
     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}` }, 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}`, 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 }))));
   }
   static get is() { return "z-list-element"; }
   static get encapsulation() { return "shadow"; }

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

@@ -11,15 +11,21 @@ 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() {
-    this.modalClose.emit({ modalid: this.modalid });
+    if (this.closable) {
+      this.modalClose.emit({ modalid: this.modalid });
+    }
   }
   emitModalHeaderActive() {
     this.modalHeaderActive.emit({ modalid: this.modalid });
   }
   emitBackgroundClick() {
-    this.modalBackgroundClick.emit({ modalid: this.modalid });
+    if (this.closable) {
+      this.modalBackgroundClick.emit({ modalid: this.modalid });
+    }
   }
   componentDidLoad() {
     this.open();
@@ -32,7 +38,9 @@ export class ZModal {
   /** close modal */
   async close() {
     var _a;
-    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+    if (this.closable) {
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+    }
   }
   /**
    * Get a list of focusable elements in the dialog.
@@ -67,8 +75,21 @@ 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() }, 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: () => {
+    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: () => {
         this.emitBackgroundClick();
         this.close();
       } })));
@@ -173,6 +194,24 @@ 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,8 +68,6 @@ 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";
     /**
@@ -88,11 +86,17 @@ export class ZAppHeader {
       });
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
-    this.collectMenuElements.bind(this);
+    this.collectMenuElements = this.collectMenuElements.bind(this);
   }
   emitStickingEvent() {
     this.sticking.emit(this._stuck);
   }
+  openDrawer() {
+    this.drawerOpen = true;
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
+  }
   componentDidLoad() {
     this.collectMenuElements();
     this.onStuckMode();
@@ -147,19 +151,14 @@ export class ZAppHeader {
       return;
     }
     const elements = this.menuElements;
-    for (let i = 0, len = elements.length; i < len; i++) {
-      elements[i].open = false;
-      elements[i].floating = !this.drawerOpen;
-    }
+    elements.forEach((element) => {
+      element.open = false;
+      element.floating = !this.drawerOpen;
+      element.verticalContext = 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)))))));
-  }
-  openDrawer() {
-    this.drawerOpen = true;
-  }
-  closeDrawer() {
-    this.drawerOpen = false;
+    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)))))));
   }
   static get is() { return "z-app-header"; }
   static get encapsulation() { return "shadow"; }
@@ -240,7 +239,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\n\n**Optional**"
+          "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"
         },
         "attribute": "flow",
         "reflect": true,

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

@@ -38,9 +38,8 @@
   --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);
 

package/dist/collection/components/navigation/z-menu/index.js

@@ -10,16 +10,18 @@ export class ZMenu {
      * 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;
     /**
-     * The opening state of the menu.
-     * @default 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.
      */
-    this.open = false;
+    this.verticalContext = 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() {
@@ -49,6 +51,14 @@ export class ZMenu {
   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.
@@ -70,27 +80,29 @@ export class ZMenu {
    * 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 === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute("role", "menuitem"));
+    const items = this.hostElement.querySelectorAll("[slot=item]");
+    items.forEach((item) => {
+      item.setAttribute("role", "menuitem");
+      item.dataset.text = item.textContent;
+    });
   }
   renderMenuLabel() {
     if (this.hasContent) {
-      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
     }
-    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null))));
+    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
   }
   render() {
-    return (h(Host, null, this.renderMenuLabel(), h("div", { class: "content", ref: (el) => {
-        this.content = el;
-      }, hidden: !this.open }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
+    return (h(Host, null, this.renderMenuLabel(), this.hasContent && (h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
   }
   static get is() { return "z-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -134,10 +146,7 @@ export class ZMenu {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
+          "tags": [],
           "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
         },
         "attribute": "floating",
@@ -155,15 +164,30 @@ export class ZMenu {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
+          "tags": [],
           "text": "The opening state of the menu."
         },
         "attribute": "open",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "verticalContext": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
+        },
+        "attribute": "vertical-context",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }