@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/collection/components/z-input-message/index.js

@@ -17,7 +17,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '94ef5066088cb9eed13a07ea360427f99504352c' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '657b2370b4f114a60d57d0aeb0c42076a0a6d05c', name: this.statusIcons[this.status] }), h("span", { key: 'e999e55f209f358943ff20d86967f9e7bd9d876b', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: 'ab7d91f7f574f9fb29ab684cae2de0c0dd64f580' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '592524f507e1d6cefb43815648880507e10806f2', name: this.statusIcons[this.status] }), h("span", { key: '96ca6506cfaa10d936543d9f370bcb58fa318b59', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '2faf5f56df6dbfff397a42f15f18b496e407da11', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: 'ed2dc5272d8e229b9d329b5425611ee504286a75', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { KeyboardCode } from "../../beans";
 /**
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
@@ -22,6 +23,103 @@ export class ZMenu {
         this.open = false;
         this.closed.emit();
     }
+    canvasOpenStatusChanged(e) {
+        this.currentCanvasOpenStatus = e.detail;
+    }
+    handleKeyDown(e) {
+        if (e.code === KeyboardCode.ENTER) {
+            return;
+        }
+        if (this.open && !this.currentCanvasOpenStatus) {
+            this.handleNavigationSideArrow(e);
+        }
+        this.handleArrowsNav(e);
+    }
+    handleNavigationSideArrow(e) {
+        if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {
+            return;
+        }
+        if (e.code === KeyboardCode.ARROW_RIGHT) {
+            const nextElement = this.hostElement.nextElementSibling;
+            if (!nextElement) {
+                const firstMenuItem = this.firstElMenu.shadowRoot.querySelector(".menu-label");
+                firstMenuItem.focus();
+                this.open = false;
+            }
+            if (nextElement && nextElement.tagName === "Z-MENU") {
+                const menuButton = nextElement.shadowRoot.querySelector(".menu-label");
+                menuButton.focus();
+                if (nextElement.children.length > 1) {
+                    nextElement.setAttribute("open", "true");
+                }
+                this.open = false;
+            }
+        }
+        else if (e.code === KeyboardCode.ARROW_LEFT) {
+            const prevElement = this.hostElement.previousElementSibling;
+            if (prevElement.tagName !== "Z-MENU") {
+                const lastElMenuItem = this.lastElMenu.shadowRoot.querySelector(".menu-label");
+                lastElMenuItem.focus();
+                this.open = false;
+            }
+            if (prevElement && prevElement.tagName === "Z-MENU") {
+                const menuButton = prevElement.shadowRoot.querySelector(".menu-label");
+                menuButton.focus();
+                if (prevElement.children.length > 1) {
+                    prevElement.setAttribute("open", "true");
+                }
+                this.open = false;
+            }
+        }
+    }
+    handleArrowsNav(e) {
+        const menuItems = Array.from(this.hostElement.querySelectorAll("[slot='item']"));
+        const newMenuItems = menuItems.map((el) => {
+            if (el.tagName === "Z-MENU-SECTION") {
+                return el.shadowRoot.querySelector("button");
+            }
+            return el;
+        });
+        if (this.open) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {
+                let nextFocusableItem;
+                // INFO: reset focus on all menu items
+                newMenuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
+                if (e.code === KeyboardCode.ARROW_DOWN) {
+                    nextFocusableItem = this.getNextItem(newMenuItems, 1);
+                }
+                else if (e.code === KeyboardCode.ARROW_UP) {
+                    nextFocusableItem = this.getNextItem(newMenuItems, -1);
+                }
+                if (nextFocusableItem) {
+                    nextFocusableItem.setAttribute("tabindex", "0");
+                    nextFocusableItem.focus();
+                }
+            }
+            else if (e.code === KeyboardCode.ESC) {
+                this.focusToParentAndCloseMenu();
+            }
+            else if (e.shiftKey && e.code === KeyboardCode.TAB) {
+                this.focusToParentAndCloseMenu();
+            }
+        }
+    }
+    getNextItem(menuItems, direction) {
+        if (this.currentIndex === -1) {
+            this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;
+            return menuItems[this.currentIndex];
+        }
+        this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;
+        return menuItems[this.currentIndex];
+    }
+    focusToParentAndCloseMenu() {
+        const menuButton = this.hostElement.shadowRoot.querySelector(".menu-label");
+        menuButton.focus();
+        this.currentIndex = -1;
+        this.open = false;
+    }
     onOpenChanged() {
         if (this.open) {
             this.reflow(true);
@@ -31,8 +129,10 @@ export class ZMenu {
         }
     }
     constructor() {
+        this.currentIndex = -1;
+        this.currentCanvasOpenStatus = false;
         this.active = undefined;
-        this.floating = false;
+        this.floating = true;
         this.open = false;
         this.verticalContext = false;
         this.hasHeader = undefined;
@@ -43,6 +143,9 @@ export class ZMenu {
         this.onItemsChange = this.onItemsChange.bind(this);
     }
     componentWillLoad() {
+        const menuItems = Array.from(this.hostElement.parentElement.querySelectorAll('[slot="menu"]'));
+        this.firstElMenu = menuItems[0];
+        this.lastElMenu = menuItems[menuItems.length - 1];
         this.checkContent();
     }
     /**
@@ -86,17 +189,25 @@ export class ZMenu {
         const items = this.hostElement.querySelectorAll("[slot=item]");
         items.forEach((item) => {
             item.setAttribute("role", "menuitem");
+            item.setAttribute("tabindex", "-1");
             item.dataset.text = item.textContent;
         });
     }
+    focusFirstItemOnKeyUp() {
+        const firstElement = this.hostElement.querySelectorAll("[slot='item']")[0];
+        if (firstElement) {
+            firstElement.focus();
+            this.currentIndex = 0;
+        }
+    }
     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", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+            return (h("div", { class: "menu-wrapper" }, h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle, onKeyUp: this.focusFirstItemOnKeyUp.bind(this) }, 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", { onSlotchange: this.onLabelSlotChange }))));
+        return (h("div", { class: "menu-wrapper" }, h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange })))));
     }
     render() {
-        return (h(Host, { key: '675f13eb3d814743037d5e791afd82d8737ba57d' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '50ef2a4dbf031fa211bc818b7704d46acbe63446', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '9ed7520b00334a598c7664e0ccb1c4f8bfe3b858', class: "header" }, h("slot", { key: '6a41d2d5802d54bf192fd7f03586df1c933a7877', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '7aa4c1c061559caac915866d1ae2acfe02dc3a8a', class: "items", role: "menu" }, h("slot", { key: '8494b984ad295b61d2cad61a25571220e74b8dff', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: 'e2ab0535d927c4ef1dbaf75746a1e7ee1a87858a' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '3f0a5da5e77bd229ff0ee232afbbf0273d4245cf', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '4264de0204704ad5f16cb1b0617532220ab121fb', class: "header" }, h("slot", { key: '6b88411ff1c87fa1d12f2e6dedcec19605921df9', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '4fab11ecc9b79b5b95d3238da7f25b05b6e36ec9', class: "items", role: "menu" }, h("slot", { key: '42d1e2006d0588e337a5cb9df4688081e128c9f9', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     static get is() { return "z-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -145,7 +256,7 @@ export class ZMenu {
                 },
                 "attribute": "floating",
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "open": {
                 "type": "boolean",
@@ -238,6 +349,18 @@ export class ZMenu {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "canvasOpenStatusChanged",
+                "method": "canvasOpenStatusChanged",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3G;;;;;GAKG;AAMH,MAAM,OAAO,KAAK;IA6CR,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACtD,CAAC;IAED,iFAAiF;IAEjF,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAiB,CAAC,EAAE,CAAC;YACpF,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,aAAa;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;wBA9DY,KAAK;oBAIV,KAAK;+BAOM,KAAK;;;QAoDrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,CAAC;IACxD,CAAC;IAED;;;OAGG;IACK,MAAM,CAAC,IAAI,GAAG,KAAK;QACzB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC,OAAO,CAAC;YAC7B,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;YACrD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACpE,MAAM,kBAAkB,GAAG,EAAE,CAAC;YAC9B,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,GAAG,KAAK,GAAG,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC;QACzF,CAAC;QACD,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC;QAC7E,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC;IAChG,CAAC;IAED;;;OAGG;IACK,aAAa;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAc,aAAa,CAAC,CAAC;QAC5E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,CACL,cACE,KAAK,EAAC,YAAY,mBACH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC/B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACnD,OAAO,EAAE,IAAI,CAAC,MAAM;gBAEpB,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,YAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAS;oBACnD,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACvD,CACC,CACV,CAAC;QACJ,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;YACrB,WAAK,KAAK,EAAC,oBAAoB;gBAC7B,YAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAS,CAC/C,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,EAAE;YAEtB,IAAI,CAAC,UAAU,IAAI,CAClB,4DACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;gBAE/B,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,KAAK,EAAC,QAAQ;oBACpB,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,IAAI,CAAC,YAAY,GACzB,CACD,CACV;gBAED,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM;oBAEX,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,aAAa,GAC1B,CACJ,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() hostElement: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = false;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <button\n          class=\"menu-label\"\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          onClick={this.toggle}\n        >\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n            <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n          </div>\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"menu-label\">\n        <div class=\"menu-label-content\">\n          <slot onSlotchange={this.onLabelSlotChange}></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() hostElement: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private currentIndex = -1;\n\n  private currentCanvasOpenStatus = false;\n\n  private firstElMenu: HTMLMenuElement;\n\n  private lastElMenu: HTMLMenuElement;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Listen(\"canvasOpenStatusChanged\", {target: \"document\"})\n  canvasOpenStatusChanged(e: CustomEvent): void {\n    this.currentCanvasOpenStatus = e.detail;\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ENTER) {\n      return;\n    }\n\n    if (this.open && !this.currentCanvasOpenStatus) {\n      this.handleNavigationSideArrow(e);\n    }\n\n    this.handleArrowsNav(e);\n  }\n\n  private handleNavigationSideArrow(e: KeyboardEvent): void {\n    if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {\n      return;\n    }\n\n    if (e.code === KeyboardCode.ARROW_RIGHT) {\n      const nextElement = this.hostElement.nextElementSibling;\n\n      if (!nextElement) {\n        const firstMenuItem = this.firstElMenu.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        firstMenuItem.focus();\n        this.open = false;\n      }\n\n      if (nextElement && nextElement.tagName === \"Z-MENU\") {\n        const menuButton = nextElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        menuButton.focus();\n\n        if (nextElement.children.length > 1) {\n          nextElement.setAttribute(\"open\", \"true\");\n        }\n        this.open = false;\n      }\n    } else if (e.code === KeyboardCode.ARROW_LEFT) {\n      const prevElement = this.hostElement.previousElementSibling;\n      if (prevElement.tagName !== \"Z-MENU\") {\n        const lastElMenuItem = this.lastElMenu.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        lastElMenuItem.focus();\n        this.open = false;\n      }\n      if (prevElement && prevElement.tagName === \"Z-MENU\") {\n        const menuButton = prevElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        menuButton.focus();\n        if (prevElement.children.length > 1) {\n          prevElement.setAttribute(\"open\", \"true\");\n        }\n        this.open = false;\n      }\n    }\n  }\n\n  private handleArrowsNav(e: KeyboardEvent): void {\n    const menuItems = Array.from(this.hostElement.querySelectorAll(\"[slot='item']\")) as HTMLElement[];\n    const newMenuItems = menuItems.map((el) => {\n      if (el.tagName === \"Z-MENU-SECTION\") {\n        return el.shadowRoot.querySelector(\"button\");\n      }\n\n      return el;\n    });\n\n    if (this.open) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {\n        let nextFocusableItem: HTMLElement;\n        // INFO: reset focus on all menu items\n        newMenuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n\n        if (e.code === KeyboardCode.ARROW_DOWN) {\n          nextFocusableItem = this.getNextItem(newMenuItems, 1);\n        } else if (e.code === KeyboardCode.ARROW_UP) {\n          nextFocusableItem = this.getNextItem(newMenuItems, -1);\n        }\n\n        if (nextFocusableItem) {\n          nextFocusableItem.setAttribute(\"tabindex\", \"0\");\n          nextFocusableItem.focus();\n        }\n      } else if (e.code === KeyboardCode.ESC) {\n        this.focusToParentAndCloseMenu();\n      } else if (e.shiftKey && e.code === KeyboardCode.TAB) {\n        this.focusToParentAndCloseMenu();\n      }\n    }\n  }\n\n  private getNextItem(menuItems: HTMLElement[], direction: number): HTMLElement {\n    if (this.currentIndex === -1) {\n      this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;\n\n      return menuItems[this.currentIndex];\n    }\n\n    this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;\n\n    return menuItems[this.currentIndex];\n  }\n\n  private focusToParentAndCloseMenu(): void {\n    const menuButton = this.hostElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n    menuButton.focus();\n    this.currentIndex = -1;\n    this.open = false;\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    const menuItems = Array.from(this.hostElement.parentElement.querySelectorAll('[slot=\"menu\"]'));\n    this.firstElMenu = menuItems[0] as HTMLMenuElement;\n    this.lastElMenu = menuItems[menuItems.length - 1] as HTMLMenuElement;\n\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.setAttribute(\"tabindex\", \"-1\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private focusFirstItemOnKeyUp(): void {\n    const firstElement = this.hostElement.querySelectorAll(\"[slot='item']\")[0] as HTMLElement;\n    if (firstElement) {\n      firstElement.focus();\n      this.currentIndex = 0;\n    }\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <div class=\"menu-wrapper\">\n          <button\n            class=\"menu-label\"\n            aria-expanded={this.open ? \"true\" : \"false\"}\n            aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n            onClick={this.toggle}\n            onKeyUp={this.focusFirstItemOnKeyUp.bind(this)}\n          >\n            <div class=\"menu-label-content\">\n              <slot onSlotchange={this.onLabelSlotChange}></slot>\n              <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n            </div>\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"menu-wrapper\">\n        <div class=\"menu-label\">\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -10,15 +10,17 @@ describe("Suite test ZMenu", () => {
       </z-menu>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-menu role="menu">
-        <mock:shadow-root>
+    <z-menu floating="" role="menu">
+      <mock:shadow-root>
+        <div class="menu-wrapper">
           <div class="menu-label">
             <div class="menu-label-content">
               <slot></slot>
             </div>
           </div>
-        </mock:shadow-root>
-        <h3>Menu label</h3>
+        </div>
+      </mock:shadow-root>
+      <h3>Menu label</h3>
     </z-menu>`);
     });
     it("Test render ZMenu with items", async () => {
@@ -32,14 +34,16 @@ describe("Suite test ZMenu", () => {
       </z-menu>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-menu role="menu">
+      <z-menu floating="" role="menu">
         <mock:shadow-root>
-          <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
-            <div class="menu-label-content">
-              <slot></slot>
-              <z-icon name="chevron-down"></z-icon>
-            </div>
-          </button>
+          <div class="menu-wrapper">
+            <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
+              <div class="menu-label-content">
+                <slot></slot>
+                <z-icon name="chevron-down"></z-icon>
+              </div>
+            </button>
+          </div>
           <div class="content">
             <div class="items" role="menu">
               <slot name="item"></slot>
@@ -55,44 +59,56 @@ describe("Suite test ZMenu", () => {
     it("Test render ZMenu with submenu", async () => {
         const page = await newSpecPage({
             components: [ZMenu, ZMenuSection],
-            html: `<z-menu role="menu">
+            html: `<z-menu floating="" role="menu">
         <h3>Menu label</h3>
         <a href="#" slot="item">Item 1</a>
         <z-menu-section slot="item">
           <h3>Item 2</h2>
-          <a href="#" slot="item">Item 2.1</a>
-          <a href="#" slot="item">Item 2.2</a>
+          <a href="#" slot="section">Item 2.1</a>
+          <a href="#" slot="section">Item 2.2</a>
         </z-menu-section>
       </z-menu>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-menu role="menu">
-        <mock:shadow-root>
+    <z-menu floating="" role="menu">
+      <mock:shadow-root>
+        <div class="menu-wrapper">
           <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
             <div class="menu-label-content">
               <slot></slot>
               <z-icon name="chevron-down"></z-icon>
             </div>
           </button>
-          <div class="content">
-            <div class="items" role="menu">
-              <slot name="item"></slot>
-            </div>
+        </div>
+        <div class="content">
+          <div class="items" role="menu">
+            <slot name="item"></slot>
           </div>
+        </div>
+      </mock:shadow-root>
+      <h3>
+        Menu label
+      </h3>
+      <a href="#" slot="item">
+        Item 1
+      </a>
+      <z-menu-section role="menu" slot="item">
+        <mock:shadow-root>
+          <button aria-pressed="false" class="label">
+            <slot></slot>
+            <z-icon name="chevron-down"></z-icon>
+          </button>
         </mock:shadow-root>
-        <h3>Menu label</h3>
-        <a href="#" slot="item">Item 1</a>
-        <z-menu-section role="menu" slot="item">
-          <mock:shadow-root>
-            <button aria-pressed="false" class="label">
-              <slot></slot>
-              <z-icon name="chevron-down"></z-icon>
-            </button>
-          </mock:shadow-root>
-          <h3>Item 2</h3>
-          <a href="#" slot="item">Item 2.1</a>
-          <a href="#" slot="item">Item 2.2</a>
-        </z-menu-section>
+        <h3>
+          Item 2
+        </h3>
+        <a href="#" slot="section">
+          Item 2.1
+        </a>
+        <a href="#" slot="section">
+          Item 2.2
+        </a>
+      </z-menu-section>
     </z-menu>`);
     });
     it("Test ZMenu toggle events", async () => {

package/dist/collection/components/z-menu/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;cAUpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;gBAKI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;cAmBpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;;;;gBAQI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZMenuSection} from \"../z-menu-section\";\n\nimport {ZMenu} from \"./index\";\n\ndescribe(\"Suite test ZMenu\", () => {\n  it(\"Test render ZMenu label only\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <div class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with submenu\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section slot=\"item\">\n          <h3>Item 2</h2>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section role=\"menu\" slot=\"item\">\n          <mock:shadow-root>\n            <button aria-pressed=\"false\" class=\"label\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </button>\n          </mock:shadow-root>\n          <h3>Item 2</h3>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section>\n    </z-menu>`);\n  });\n\n  it(\"Test ZMenu toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <div slot=\"item\">item</div>\n      </z-menu>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;cAYpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;gBAKI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;cAqBpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;;;;gBAQI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwCpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZMenuSection} from \"../z-menu-section\";\n\nimport {ZMenu} from \"./index\";\n\ndescribe(\"Suite test ZMenu\", () => {\n  it(\"Test render ZMenu label only\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-menu floating=\"\" role=\"menu\">\n      <mock:shadow-root>\n        <div class=\"menu-wrapper\">\n          <div class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n      <h3>Menu label</h3>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu floating=\"\" role=\"menu\">\n        <mock:shadow-root>\n          <div class=\"menu-wrapper\">\n            <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n              <div class=\"menu-label-content\">\n                <slot></slot>\n                <z-icon name=\"chevron-down\"></z-icon>\n              </div>\n            </button>\n          </div>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with submenu\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu floating=\"\" role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section slot=\"item\">\n          <h3>Item 2</h2>\n          <a href=\"#\" slot=\"section\">Item 2.1</a>\n          <a href=\"#\" slot=\"section\">Item 2.2</a>\n        </z-menu-section>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-menu floating=\"\" role=\"menu\">\n      <mock:shadow-root>\n        <div class=\"menu-wrapper\">\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n        </div>\n        <div class=\"content\">\n          <div class=\"items\" role=\"menu\">\n            <slot name=\"item\"></slot>\n          </div>\n        </div>\n      </mock:shadow-root>\n      <h3>\n        Menu label\n      </h3>\n      <a href=\"#\" slot=\"item\">\n        Item 1\n      </a>\n      <z-menu-section role=\"menu\" slot=\"item\">\n        <mock:shadow-root>\n          <button aria-pressed=\"false\" class=\"label\">\n            <slot></slot>\n            <z-icon name=\"chevron-down\"></z-icon>\n          </button>\n        </mock:shadow-root>\n        <h3>\n          Item 2\n        </h3>\n        <a href=\"#\" slot=\"section\">\n          Item 2.1\n        </a>\n        <a href=\"#\" slot=\"section\">\n          Item 2.2\n        </a>\n      </z-menu-section>\n    </z-menu>`);\n  });\n\n  it(\"Test ZMenu toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <div slot=\"item\">item</div>\n      </z-menu>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}

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

@@ -2,7 +2,7 @@ import { html } from "lit";
 import "../z-menu-section/index";
 import "./index";
 const StoryMeta = {
-    title: "ZMenu",
+    title: "Zmenu/ZMenu",
     component: "z-menu",
     args: {
         active: false,
@@ -33,12 +33,12 @@ export const FloatingContentLayout = {
         <h3>Item 3</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.2</a
         >
       </z-menu-section>
@@ -46,12 +46,12 @@ export const FloatingContentLayout = {
         <h3>Item 4</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.2</a
         >
       </z-menu-section>
@@ -90,12 +90,12 @@ export const WithHeader = {
         <h3>Item 3</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.2</a
         >
       </z-menu-section>

package/dist/collection/components/z-menu/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,KAAK;KACvB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6C1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,UAAU,CAAC;SACtB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI;yBACK,IAAI,CAAC,eAAe;;;;;;;;GAQ1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenu} from \".\";\nimport \"../z-menu-section/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZMenu\",\n  component: \"z-menu\",\n  args: {\n    active: false,\n    floating: true,\n    verticalContext: false,\n  },\n} satisfies Meta<ZMenu>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenu>;\n\nexport const FloatingContentLayout = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const WithHeader = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <img\n        slot=\"header\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h4 slot=\"header\">Menu header</h4>\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 4</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const ActiveWithoutItems = {\n  parameters: {\n    controls: {\n      exclude: [\"floating\"],\n    },\n  },\n  render: (args) => html`\n    <z-menu\n      .active=${true}\n      .verticalContext=${args.verticalContext}\n    >\n      <a\n        href=\"https://cataas.com/cat/gif\"\n        target=\"_blank\"\n        >Click me</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,KAAK;KACvB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6C1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,UAAU,CAAC;SACtB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI;yBACK,IAAI,CAAC,eAAe;;;;;;;;GAQ1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenu} from \".\";\nimport \"../z-menu-section/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"Zmenu/ZMenu\",\n  component: \"z-menu\",\n  args: {\n    active: false,\n    floating: true,\n    verticalContext: false,\n  },\n} satisfies Meta<ZMenu>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenu>;\n\nexport const FloatingContentLayout = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const WithHeader = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <img\n        slot=\"header\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h4 slot=\"header\">Menu header</h4>\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 4</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const ActiveWithoutItems = {\n  parameters: {\n    controls: {\n      exclude: [\"floating\"],\n    },\n  },\n  render: (args) => html`\n    <z-menu\n      .active=${true}\n      .verticalContext=${args.verticalContext}\n    >\n      <a\n        href=\"https://cataas.com/cat/gif\"\n        target=\"_blank\"\n        >Click me</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-menu/styles.css

@@ -2,12 +2,14 @@
 ::slotted(*),
 * {
   box-sizing: border-box;
+  outline: none;
 }
 
 :host {
   position: relative;
   display: inline-flex;
   flex-direction: column;
+  flex-shrink: 0;
 
   --z-menu-label-color: var(--color-default-text);
 }
@@ -23,6 +25,7 @@
 }
 
 .menu-label {
+  width: 100%;
   padding: 0;
   border: 0;
   margin: 0;
@@ -33,32 +36,43 @@
   text-align: left;
 }
 
+.menu-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.menu-wrapper:focus-visible,
+.menu-label-content:focus-visible,
+button:focus-visible {
+  outline: none;
+}
+
 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;
+  height: 30px;
   align-items: center;
 }
 
 :host(:is([active], [open])) .menu-label-content,
 .menu-label:focus-within .menu-label-content {
+  color: var(--color-primary01);
   font-weight: var(--font-bd);
 }
 
 :host(:is([active], [open])) .menu-label-content ::slotted(*),
-.menu-label:focus-within .menu-label-content ::slotted(*) {
+.menu-label:focus-within .menu-label-content ::slotted(*),
+.menu-label:focus-within .menu-label-content z-icon {
+  color: var(--color-primary01);
   letter-spacing: normal;
 }
 
@@ -121,14 +135,13 @@ when placed below the real text using `flex-direction: column`. */
 .menu-label .menu-label-content ::slotted(*) {
   display: inline-flex;
   width: 100%;
+  min-width: fit-content;
   margin: 0;
   appearance: none;
   color: var(--z-menu-label-color);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-5);
+  font-size: var(--font-size-3);
   font-weight: inherit;
-  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */
-  line-height: 1.2;
   outline: none;
 }