npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0 → 16.3.1 - Mend

@zanichelli/albe-web-components 16.3.0 → 16.3.1

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

Files changed (1042) hide show

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

@@ -2,156 +2,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index$1 = require('./index-e801ae96.js');
+const index$1 = require('./index-96af6326.js');
 const index = require('./index-bab7a651.js');
-const stylesCss = ":host,::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)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{width:100%;padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;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;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 z-icon{color:var(--color-primary01);letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}: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%;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-3);font-weight:inherit;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:currentcolor}.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\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;width:100%;padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}.menu-wrapper{display:flex;align-items:center}button.menu-label{cursor:pointer}.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center;border-bottom:var(--border-size-large) solid transparent}: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 z-icon{color:var(--color-primary01);letter-spacing:normal}:host([vertical-context]) .menu-label-content{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host([vertical-context]) .menu-label-content ::slotted(*){padding:0}:host(:is([active],[open])) .menu-label .menu-label-content,.menu-label .menu-label-content:hover,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}:host([vertical-context]:is([active],[open])) .menu-label .menu-label-content::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-secondary01);content:\"\"}::slotted([data-text]:not([slot]))::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]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 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.5}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot=\"item\"]:not(z-menu-section):last-of-type){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuStyle0 = stylesCss;
+const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
 const ZMenu = class {
+    get focusableItem() {
+        return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));
+    }
     toggle() {
         if (!this.hasContent) {
             return;
         }
         this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
-    }
-    /** Close the floating list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
-            return;
-        }
-        this.reflow();
-        this.open = false;
-        this.closed.emit();
-    }
-    canvasOpenStatusChanged(e) {
-        this.currentCanvasOpenStatus = e.detail;
-    }
-    handleKeyDown(e) {
-        if (e.code === index.KeyboardCode.ENTER) {
-            return;
-        }
-        if (this.open && !this.currentCanvasOpenStatus) {
-            this.handleNavigationSideArrow(e);
-        }
-        this.handleArrowsNav(e);
-    }
-    handleNavigationSideArrow(e) {
-        if (e.code !== index.KeyboardCode.ARROW_RIGHT && e.code !== index.KeyboardCode.ARROW_LEFT) {
-            return;
-        }
-        if (e.code === index.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 === index.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 === index.KeyboardCode.ARROW_DOWN || e.code === index.KeyboardCode.ARROW_UP) {
-                let nextFocusableItem;
-                // INFO: reset focus on all menu items
-                newMenuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
-                if (e.code === index.KeyboardCode.ARROW_DOWN) {
-                    nextFocusableItem = this.getNextItem(newMenuItems, 1);
-                }
-                else if (e.code === index.KeyboardCode.ARROW_UP) {
-                    nextFocusableItem = this.getNextItem(newMenuItems, -1);
-                }
-                if (nextFocusableItem) {
-                    nextFocusableItem.setAttribute("tabindex", "0");
-                    nextFocusableItem.focus();
-                }
-            }
-            else if (e.code === index.KeyboardCode.ESC) {
-                this.focusToParentAndCloseMenu();
-            }
-            else if (e.shiftKey && e.code === index.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);
-        }
-        else {
-            cancelAnimationFrame(this.raf);
-        }
-    }
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.opened = index$1.createEvent(this, "opened", 7);
-        this.closed = index$1.createEvent(this, "closed", 7);
-        this.currentIndex = -1;
-        this.currentCanvasOpenStatus = false;
-        this.active = undefined;
-        this.floating = true;
-        this.open = false;
-        this.verticalContext = false;
-        this.hasHeader = undefined;
-        this.hasContent = undefined;
-        this.toggle = this.toggle.bind(this);
-        this.checkContent = this.checkContent.bind(this);
-        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
-        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();
     }
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
@@ -160,15 +26,16 @@ const ZMenu = class {
     onLabelSlotChange(ev) {
         const labelElement = ev.target.assignedElements()[0];
         labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+        this.setLabelA11yAttrs();
     }
     /**
      * Correctly set position of the floating menu in order to prevent overflow.
      * @param live Should run the method on every refresh frame.
      */
     reflow(live = false) {
-        if (this.content) {
+        if (this.content && this.hasContent) {
             const { style } = this.content;
-            const { left } = this.hostElement.getBoundingClientRect();
+            const { left } = this.host.getBoundingClientRect();
             const widthPx = getComputedStyle(this.content).width;
             const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
             const safeScrollbarSpace = 30;
@@ -182,41 +49,222 @@ 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.host.querySelectorAll("[slot=header]").length;
+        this.hasContent = !!this.host.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).
+     * Set `menuitem` role to all menu items (ZMenuSection items already have it).
+     * Set -1 to the tabindex of the items and 0 to the first one.
      */
+    setItemsA11yAttrs() {
+        this.items.forEach((item, index) => {
+            const tabindex = index === 0 ? 0 : -1;
+            if (isZMenuSection(item)) {
+                item.htmlTabindex = tabindex;
+            }
+            else {
+                item.setAttribute("role", "menuitem");
+                item.tabIndex = tabindex;
+            }
+        });
+    }
     onItemsChange() {
         this.checkContent();
-        const items = this.hostElement.querySelectorAll("[slot=item]");
-        items.forEach((item) => {
-            item.setAttribute("role", "menuitem");
-            item.setAttribute("tabindex", "-1");
-            item.dataset.text = item.textContent;
+        this.items = Array.from(this.host.children).filter(({ slot }) => slot === "item");
+        this.setItemsA11yAttrs();
+        this.items.forEach((item) => {
+            if (!isZMenuSection(item)) {
+                item.dataset.text = item.textContent;
+            }
         });
     }
-    focusFirstItemOnKeyUp() {
-        const firstElement = this.hostElement.querySelectorAll("[slot='item']")[0];
-        if (firstElement) {
-            firstElement.focus();
-            this.currentIndex = 0;
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     * If the receiver is a ZMenuSection and it's open, focus its first focusable item.
+     */
+    moveFocus(receiver, current) {
+        if (isZMenuSection(receiver)) {
+            receiver.setFocus();
+        }
+        else {
+            receiver.tabIndex = 0;
+            setTimeout(() => {
+                receiver.focus();
+            }, 100);
+        }
+        if (!current) {
+            return;
+        }
+        if (isZMenuSection(current)) {
+            current.htmlTabindex = -1;
+        }
+        else {
+            current.tabIndex = -1;
         }
     }
-    renderMenuLabel() {
+    onLabelKeydown(ev) {
+        if (ev.key === index.KeyboardCode.ENTER || ev.key === index.KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+        }
+        if (!this.verticalContext) {
+            return;
+        }
+        if (ev.key === index.KeyboardCode.ARROW_RIGHT && !this.open) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = true;
+            return;
+        }
+        if (ev.key === index.KeyboardCode.ARROW_LEFT && this.open) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = false;
+        }
+    }
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        const label = this.hasContent ? this.labelButton : this.host.firstElementChild;
+        label.focus();
+    }
+    /** Focus the last item. */
+    async focusLastItem() {
+        this.htmlTabindex = 0;
+        this.moveFocus(this.items[this.items.length - 1]);
+    }
+    onOpenChanged() {
+        this.setItemsA11yAttrs();
+        if (!this.open) {
+            cancelAnimationFrame(this.raf);
+            this.closed.emit();
+            this.items.forEach((item) => {
+                if (isZMenuSection(item) && item.open) {
+                    item.open = false;
+                }
+            });
+            return;
+        }
+        this.opened.emit();
+        if (this.floating) {
+            this.reflow(true);
+        }
+    }
+    setLabelA11yAttrs() {
+        if (this.hasContent && !this.labelButton) {
+            return;
+        }
         if (this.hasContent) {
-            return (index$1.h("div", { class: "menu-wrapper" }, index$1.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) }, index$1.h("div", { class: "menu-label-content" }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange }), index$1.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })))));
+            this.labelButton.tabIndex = this.htmlTabindex;
+            return;
         }
-        return (index$1.h("div", { class: "menu-wrapper" }, index$1.h("div", { class: "menu-label" }, index$1.h("div", { class: "menu-label-content" }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange })))));
+        const slottedLabel = this.host.firstElementChild;
+        slottedLabel.role = "menuitem";
+        slottedLabel.tabIndex = this.htmlTabindex;
+    }
+    onKeyDown(ev) {
+        if (!this.hasContent) {
+            return;
+        }
+        switch (ev.key) {
+            case index.KeyboardCode.ESC:
+                ev.stopPropagation();
+                ev.preventDefault();
+                this.open = false;
+                this.setFocus();
+                break;
+            case index.KeyboardCode.ARROW_DOWN: {
+                if (this.verticalContext && document.activeElement === this.host && !this.open) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    this.moveFocus(this.items[0]);
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex + 1];
+                if (this.verticalContext && !receiver) {
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                // if the last item is already focused, navigate to the first one
+                this.moveFocus(receiver !== null && receiver !== void 0 ? receiver : this.items[0], this.focusableItem);
+                break;
+            }
+            case index.KeyboardCode.ARROW_UP: {
+                if (this.verticalContext && document.activeElement === this.host) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    // open the menu and focus the last item
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    this.moveFocus(this.items[this.items.length - 1], this.focusableItem);
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex - 1];
+                if (!receiver && this.verticalContext) {
+                    this.setFocus();
+                    break;
+                }
+                if (isZMenuSection(receiver) && receiver.open) {
+                    isZMenuSection(this.focusableItem)
+                        ? (this.focusableItem.htmlTabindex = -1)
+                        : (this.focusableItem.tabIndex = -1);
+                    receiver.focusLastItem();
+                    break;
+                }
+                // if the first item is already focused, navigate to the last one
+                this.moveFocus(receiver !== null && receiver !== void 0 ? receiver : this.items[this.items.length - 1], this.focusableItem);
+                break;
+            }
+        }
+    }
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.opened = index$1.createEvent(this, "opened", 7);
+        this.closed = index$1.createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.floating = true;
+        this.open = false;
+        this.verticalContext = false;
+        this.htmlTabindex = -1;
+        this.hasHeader = undefined;
+        this.hasContent = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.checkContent = this.checkContent.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+    }
+    connectedCallback() {
+        this.onItemsChange();
+        this.setLabelA11yAttrs();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'e2ab0535d927c4ef1dbaf75746a1e7ee1a87858a' }, this.renderMenuLabel(), this.hasContent && (index$1.h("div", { key: '3f0a5da5e77bd229ff0ee232afbbf0273d4245cf', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index$1.h("header", { key: '4264de0204704ad5f16cb1b0617532220ab121fb', class: "header" }, index$1.h("slot", { key: '6b88411ff1c87fa1d12f2e6dedcec19605921df9', name: "header", onSlotchange: this.checkContent }))), index$1.h("div", { key: '4fab11ecc9b79b5b95d3238da7f25b05b6e36ec9', class: "items", role: "menu" }, index$1.h("slot", { key: '42d1e2006d0588e337a5cb9df4688081e128c9f9', name: "item", onSlotchange: this.onItemsChange }))))));
+        if (!this.hasContent) {
+            return (index$1.h("div", { class: "menu-wrapper" }, index$1.h("div", { class: "menu-label" }, index$1.h("div", { class: "menu-label-content" }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange })))));
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "menu-wrapper" }, index$1.h("button", { ref: (el) => (this.labelButton = el), class: "menu-label", "aria-expanded": `${!!this.open}`, "aria-haspopup": `${this.hasContent}`, "aria-label": this.open ? "Chiudi menù" : "Apri menù", role: "menuitem", tabindex: this.htmlTabindex, onClick: this.toggle, onKeyDown: this.onLabelKeydown }, index$1.h("div", { class: "menu-label-content" }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange }), index$1.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })))), index$1.h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index$1.h("header", { class: "header" }, index$1.h("slot", { name: "header", onSlotchange: this.checkContent }))), index$1.h("div", { class: "items", role: "menu" }, index$1.h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
     }
-    get hostElement() { return index$1.getElement(this); }
+    get host() { return index$1.getElement(this); }
     static get watchers() { return {
-        "open": ["onOpenChanged"]
+        "open": ["onOpenChanged"],
+        "htmlTabindex": ["setLabelA11yAttrs"]
     }; }
 };
 ZMenu.style = ZMenuStyle0;

package/dist/cjs/z-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n outline: none;\n}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n flex-shrink: 0;\n\n --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n width: 100%;\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n outline: none;\n text-align: left;\n}\n\n.menu-wrapper {\n display: flex;\n align-items: center;\n}\n\n.menu-wrapper:focus-visible,\n.menu-label-content:focus-visible,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n height: 30px;\n align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content z-icon {\n color: var(--color-primary01);\n letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(:not([slot]):focus:focus-visible) {\n box-shadow: none !important;\n}\n\n/* border /\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n content: \"\";\n pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n height: var(--border-size-small);\n background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n}\n\n/ Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n min-width: fit-content;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: inherit;\n outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(),\n.menu-label .menu-label-content z-icon {\n padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","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"],"version":3}
1	+ {"file":"z-menu.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n outline: none;\n}\n\n:host {\n --z-menu-label-color: ;\n\n position: relative;\n display: inline-flex;\n height: fit-content;\n flex-direction: column;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n position: relative;\n width: 100%;\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n text-align: left;\n}\n\n.menu-wrapper {\n display: flex;\n align-items: center;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n align-items: center;\n border-bottom: var(--border-size-large) solid transparent;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content z-icon {\n color: var(--color-primary01);\n letter-spacing: normal;\n}\n\n:host([vertical-context]) .menu-label-content {\n padding: var(--space-unit) 0;\n border-width: var(--border-size-small);\n border-color: var(--color-surface03);\n}\n\n:host([vertical-context]) .menu-label-content ::slotted() {\n padding: 0;\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content,\n.menu-label .menu-label-content:hover,\n.menu-label:focus-within .menu-label-content {\n border-color: var(--color-secondary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label .menu-label-content::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n content: \"\";\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text]:not([slot]))::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text]:not([slot]))::after {\n display: none;\n }\n}\n\n::slotted([data-text]:not([slot])) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n min-width: fit-content;\n padding-bottom: 2px;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color, var(--color-default-text));\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: inherit;\n line-height: 1.5;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) * 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: 0 calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: var(--space-unit) 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:not(z-menu-section):last-of-type) {\n border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst isZMenuSection = (el: HTMLElement \| HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n el?.tagName === \"Z-MENU-SECTION\";\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. Set the `active` HTML attribute on the element to highlight it. 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() host: 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 (usually 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 /\n Tabindex value to set on the menu label.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n /\n @Prop()\n htmlTabindex = -1;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\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 labelButton: HTMLButtonElement;\n\n private content: HTMLElement;\n\n private items: (HTMLElement \| HTMLZMenuSectionElement)[];\n\n /* Animation frame request id. /\n private raf: number;\n\n private get focusableItem(): HTMLZMenuSectionElement \| HTMLElement \| null {\n return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n }\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\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 this.setLabelA11yAttrs();\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 && this.hasContent) {\n const {style} = this.content;\n const {left} = this.host.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.host.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length \|\| this.hasHeader;\n }\n\n /\n Set `menuitem` role to all menu items (ZMenuSection items already have it).\n * Set -1 to the tabindex of the items and 0 to the first one.\n /\n private setItemsA11yAttrs(): void {\n this.items.forEach((item, index) => {\n const tabindex = index === 0 ? 0 : -1;\n if (isZMenuSection(item)) {\n item.htmlTabindex = tabindex;\n } else {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = tabindex;\n }\n });\n }\n\n private onItemsChange(): void {\n this.checkContent();\n this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n this.setItemsA11yAttrs();\n this.items.forEach((item) => {\n if (!isZMenuSection(item)) {\n item.dataset.text = item.textContent;\n }\n });\n }\n\n /\n Move focus and adjust the tabindex value of `receiver` and `current` elements,\n * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n /\n private moveFocus(\n receiver: HTMLElement \| HTMLZMenuSectionElement,\n current?: HTMLElement \| HTMLZMenuSectionElement\n ): void {\n if (isZMenuSection(receiver)) {\n receiver.setFocus();\n } else {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n }\n if (!current) {\n return;\n }\n\n if (isZMenuSection(current)) {\n current.htmlTabindex = -1;\n } else {\n current.tabIndex = -1;\n }\n }\n\n private onLabelKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ENTER \|\| ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n ev.stopPropagation();\n this.toggle();\n }\n\n if (!this.verticalContext) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_LEFT && this.open) {\n ev.preventDefault();\n ev.stopPropagation();\n this.open = false;\n }\n }\n\n /* Set tabindex of the label to 0, then focus it. /\n @Method()\n async setFocus(): Promise<void> {\n this.htmlTabindex = 0;\n const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n label.focus();\n }\n\n /* Focus the last item. */\n @Method()\n async focusLastItem(): Promise<void> {\n this.htmlTabindex = 0;\n this.moveFocus(this.items[this.items.length - 1]);\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.setItemsA11yAttrs();\n if (!this.open) {\n cancelAnimationFrame(this.raf);\n this.closed.emit();\n this.items.forEach((item) => {\n if (isZMenuSection(item) && item.open) {\n item.open = false;\n }\n });\n\n return;\n }\n\n this.opened.emit();\n if (this.floating) {\n this.reflow(true);\n }\n }\n\n @Watch(\"htmlTabindex\")\n setLabelA11yAttrs(): void {\n if (this.hasContent && !this.labelButton) {\n return;\n }\n\n if (this.hasContent) {\n this.labelButton.tabIndex = this.htmlTabindex;\n\n return;\n }\n\n const slottedLabel = this.host.firstElementChild as HTMLElement;\n slottedLabel.role = \"menuitem\";\n slottedLabel.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n onKeyDown(ev: KeyboardEvent): void {\n if (!this.hasContent) {\n return;\n }\n\n switch (ev.key) {\n case KeyboardCode.ESC:\n ev.stopPropagation();\n ev.preventDefault();\n this.open = false;\n this.setFocus();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (this.verticalContext && document.activeElement === this.host && !this.open) {\n break;\n }\n\n if (document.activeElement === this.host) {\n if (!this.open) {\n this.open = true;\n }\n ev.stopPropagation();\n ev.preventDefault();\n this.moveFocus(this.items[0]);\n break;\n }\n\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (this.verticalContext && !receiver) {\n break;\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n // if the last item is already focused, navigate to the first one\n this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (this.verticalContext && document.activeElement === this.host) {\n break;\n }\n\n if (document.activeElement === this.host) {\n // open the menu and focus the last item\n if (!this.open) {\n this.open = true;\n }\n ev.stopPropagation();\n ev.preventDefault();\n this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n break;\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n if (!receiver && this.verticalContext) {\n this.setFocus();\n break;\n }\n\n if (isZMenuSection(receiver) && receiver.open) {\n isZMenuSection(this.focusableItem)\n ? (this.focusableItem.htmlTabindex = -1)\n : (this.focusableItem.tabIndex = -1);\n receiver.focusLastItem();\n break;\n }\n\n // if the first item is already focused, navigate to the last one\n this.moveFocus(receiver ?? this.items[this.items.length - 1], this.focusableItem);\n break;\n }\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 this.onLabelKeydown = this.onLabelKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n this.setLabelA11yAttrs();\n }\n\n render(): HTMLDivElement \| HTMLZMenuElement {\n if (!this.hasContent) {\n return (\n <div class=\"menu-wrapper\">\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange} />\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class=\"menu-wrapper\">\n <button\n ref={(el) => (this.labelButton = el)}\n class=\"menu-label\"\n aria-expanded={`${!!this.open}`}\n aria-haspopup={`${this.hasContent}`}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.toggle}\n onKeyDown={this.onLabelKeydown}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange} />\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n </div>\n\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 />\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-alert.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 const index$1 = require('./index-bab7a651.js');
 const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
@@ -56,7 +56,7 @@ const ZMyzCardAlert = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'e488b304fcdd145b3ce0ba375d36a997a646eec9', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '256f5d68375a9c8c187785cfdbd6272b8cc449f9', type: this.getAlertType() }, index.h("div", { key: '9f3d7e43b28f3fc92bf1e627475af9a9f0464799', class: "relative-container" }, index.h("z-icon", { key: '6c9e26abc686e0d6020d7c6398a8575e6e8ac543', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'b4b997286c4e5250c5b856f0d375ad49162c92df', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: '18020fe9e8180577a168a25c0ba17464cedf70c0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (index.h("div", { key: 'fdf3b3e5397d3dd7efc7d97473a4cc62f9a02d44', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: 'ffa276128f4f85801b8c6595edafa793e62c09bf', type: this.getAlertType() }, index.h("div", { key: 'f1f95d118588729d146322f9c223f53b4a0804e9', class: "relative-container" }, index.h("z-icon", { key: 'd9169d7b7f5542ec967993850503a2834d18cb37', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'd9fe4a9a0c925e5cf2dce5cc50974c02d63c497b', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: '4e537fe8adb30714f0cb27a96ad99a6cf49f2acc', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 const index$1 = require('./index-bab7a651.js');
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
@@ -27,7 +27,7 @@ const ZMyzCardDictionary = class {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (index.h("div", { key: 'd86e3c2140c9100c3bac377380a4fff77d089153' }, index.h("z-myz-card", { key: '34a3f2a9bfe747865ad3a4dca7f0ec106b1fe567' }, index.h("z-myz-card-header", { key: 'dc172fabf38338d7fd89af67a80da6918a1c0918', titolo: this.name }), index.h("div", { key: '8d0b945f35287a60658cf37b15440f8b66c98b65', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '7b205650b760c3fb8f7d538bbfe5d2a73e237992', class: "front" }, index.h("z-myz-card-body", { key: 'c8fe772333350bc8ef4643f04e0585b80fea7e83' }, index.h("z-myz-card-cover", { key: 'a1b65f443fdf541dee8b21fb3709362ed6eaff4f', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: 'e5b8bb0a7543a5f1e3954564f4cd28c11963b0aa', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: 'ce3cfb76aac872409b162b80c6659799c17ea6ed', class: "back" }, index.h("slot", { key: 'eafdc479751d3326775dd01f1ced2ac9a9df189f', name: "info" }))), index.h("slot", { key: '4e4d018a5ca6c9282985d7fb978abb738675fa52' }))));
+        return (index.h("div", { key: '5f4b35325a1b33b49f10e1c0009ba0aef368bda3' }, index.h("z-myz-card", { key: '25c1f34f2ebe744132822f8637a54feaeff0fa7a' }, index.h("z-myz-card-header", { key: '0b0b1144271c7f5b75bc05bd7fd6e80d9f20244e', titolo: this.name }), index.h("div", { key: '508459cbf9949b90b7266be3b2d42a3474a05882', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '4416070294cbee0ecb0751afa54943a58fdb2816', class: "front" }, index.h("z-myz-card-body", { key: 'cef16ad669fcc00368191d71aae674210ec96781' }, index.h("z-myz-card-cover", { key: '559ae7ae9c8473b70793e086731e95bd93017989', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: '31808feee0e2aaa301f654d710eeb02bebc31c55', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: 'e4086e4ac6cc3d81505174eb274a4057aee9e462', class: "back" }, index.h("slot", { key: '670b96387b02d5a9b2d4c23512cb57a0301e4bc6', name: "info" }))), index.h("slot", { key: 'e1fc9e4977bfb1668fbb51ad54e49d5e0f26749c' }))));
     }
 };
 ZMyzCardDictionary.style = ZMyzCardDictionaryStyle0;

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";
 const ZMyzCardFooterSectionsStyle0 = stylesCss;
@@ -12,7 +12,7 @@ const ZMyzCardFooterSections = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '460ccb7066c598d7712f468b8b77850190fd6088' }, index.h("footer", { key: '14789b182cd02636149dd501d8963e23bf9893ff' }, index.h("div", { key: 'f618c2e4c24c9488aa6090c6629d846c72b9868c', class: "top" }, index.h("slot", { key: '9fdbc5aeb537308c6a0a1197de2490749d8710a8', name: "top" })), index.h("div", { key: '900ff46313ca3d71e7e501f6c7d9e531ec41cdfb', class: "bottom" }, index.h("slot", { key: 'abac3671bea6c55bb0e18d6c05899e4ae9be3895', name: "bottom" })))));
+        return (index.h("div", { key: '0344c4e070449ed8a08e4dded7a71e6ac4911928' }, index.h("footer", { key: '96a2a91d1471369f14930a65a30cd7e2a1cefe89' }, index.h("div", { key: 'e5a888a9b4b7f7304180d312180f1f9b21b8c815', class: "top" }, index.h("slot", { key: 'e58c11948649ca7810f507bbddf84dd37bb631df', name: "top" })), index.h("div", { key: '2167d5af09430d8c3dbf018aabd8d610274e9615', class: "bottom" }, index.h("slot", { key: 'd3e0867c0d92f240d83954e127a5c2342139d8d0', name: "bottom" })))));
     }
 };
 ZMyzCardFooterSections.style = ZMyzCardFooterSectionsStyle0;