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

package/dist/components/z-breadcrumb.js

@@ -207,10 +207,10 @@ const ZBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class ZBreadcrumb extends
         ];
     }
     render() {
-        return (h(Host, { key: 'bba9d5bf2b1316c4e29eebcc00cb23c3e6635a36', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '4d916bcbb730f4e3cd0d051b630336db7222aa30', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '103caf1740a6663402282211d961204bce9b8a70', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '6fea4845c60c77671d59abc70d9b4d10ce33c0f7', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '654d8e9cad8417a155f1bc349b7b16687c8db96e' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '608d68e56a5810e77358afc316d5d4d721155628' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-button-sort.js

@@ -45,7 +45,7 @@ const ZButtonSort$1 = /*@__PURE__*/ proxyCustomElement(class ZButtonSort extends
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: 'ec1021febf46cd3a012af1142e74157e16e6b363', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '84013f6114589408dc62323285a1441c94fc9ddf', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'bc938175d5453e7c59f577b92452d63658417e0a', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '10fba0801dcbc47569e79c81179d7a485dc3582e', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '51035628c557620d4681db63a6a1b6080b57275a', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: 'b6c328214c3d75310976a734cdaff34a47f5822c', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '4bc5edbe60157542dbea6e1cc8d9e7d1da76ab38', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'ae64bab422698547fe8767adb0793fa43741b754', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f109549ca43596ae840703a3444e5a2b6efbc9e6', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '3e81d1762cd1f385d72eb2079a41f13583fa036b', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get style() { return ZButtonSortStyle0; }
 }, [1, "z-button-sort", {

package/dist/components/z-combobox.js

@@ -266,7 +266,7 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '118ffd4229b6b7f060d9b28ace7d5a59796620b9', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '4d1d99f8d0f180054a363b17d478098380677de2', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/z-cover-hero.js

@@ -31,9 +31,9 @@ const ZCoverHero$1 = /*@__PURE__*/ proxyCustomElement(class ZCoverHero extends H
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '782c8ef237b2744069752392ab29176ae65bf798' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '0442ee31b5680684016e70c34f6fe5e2c3b9fce2' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '97f1b49350218a75b19946a46190c63c15f70058', class: "main-container" }, h("div", { key: '2dc3210d8807b998ad1823bb2776d59a762f15dd', class: "cover-container" }, h("slot", { key: '2ab5b85aa02c25ee81ecafb3db91e0e57df549b3', name: "cover" })), h("slot", { key: 'a77f81fef651d1aae577079c4918cb26fb9af328', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '06709aca22e8f925ed0a3fcb3f0bd4f6e25f5893', class: "main-container" }, h("div", { key: '1e963192dbb9782b11f196f21a9722accc42999d', class: "cover-container" }, h("slot", { key: '698d87aaf8c141a3a781e238e9b13619cc4c60d3', name: "cover" })), h("slot", { key: '5f92a6143b679620fdfe5149b2af891da718665d', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/components/z-file-upload.js

@@ -206,7 +206,7 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
         }))))));
     }
     render() {
-        return (h(Host, { key: '30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85' }, h("div", { key: 'b95129c709a9161cb1c08bc39a308196fc26644d', class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '2e0db26fa301fa0141ac14fe92f2a222f2a5f2c8', modalid: `file-upload-${this.type}-error-modal`, tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+        return (h(Host, { key: '7520b5da6e58534cb4c732d0745424b9b6de6991' }, h("div", { key: 'fbdd488d4cfe2cc3a01f0d2e4abfea6df3b6c8c8', class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '26e02bd9c532f2c4b38ab94854875d8b8aba9058', modalid: `file-upload-${this.type}-error-modal`, tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
     }
     get el() { return this; }
     static get style() { return ZFileUploadStyle0; }

package/dist/components/z-file.js

@@ -42,7 +42,7 @@ const ZFile$1 = /*@__PURE__*/ proxyCustomElement(class ZFile extends HTMLElement
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: '03c2efd6f2abf7ba920eb9ac47f268ade6ec1404' }, this.allowPopover && (h("z-popover", { key: 'f916e0f4aed0a9c7d2a8ff59ee0a073baff02ad5', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '1f364c21b8bd45ff52c23a40df45ee1684271122', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '0c69ec654a4fb7f251bdd904ffec476c911e545a', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'b71ea54ee7156bfb324f7d5f2fa71d9b50c167bf', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: 'fd8490c60c3266c39e2b4fa7b3cc4097da8222cf' }, this.allowPopover && (h("z-popover", { key: 'af7c9370bdaa644ecfb50e1ae69fd425b1347b36', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'faa8e08ffbae25222396effe24db44e53ccfb892', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ed790fdb2b1639e4f44cde4da98daa101a44abb0', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '0bae3bda90db4e3793a22629b30439017e3543a3', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return this; }
     static get style() { return ZFileStyle0; }

package/dist/components/z-info-box.js

@@ -17,7 +17,7 @@ const ZInfoBox$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoBox extends HTMLE
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '52cbca4a972a1fb53f65bf86428ee23f8933b616', id: this.boxid }, h("slot", { key: '3b83aa34338ceb6c11f74a316bf50dd77bd0c662', name: "content" }), this.isclosable && (h("z-icon", { key: '2b3f8bbb5ce69105bddac3253047199028f4e2c0', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '7b95574bc12ca15eb80f5a710f75e8bcff2ea0cd', id: this.boxid }, h("slot", { key: 'fcd4a9ae4a4efdae1e6a7aa89c77104344122a1a', name: "content" }), this.isclosable && (h("z-icon", { key: '9a757d25f508088be59f2c51ea5ac5c6067f579a', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get style() { return ZInfoBoxStyle0; }
 }, [1, "z-info-box", {

package/dist/components/z-info-reveal.js

@@ -49,7 +49,7 @@ const ZInfoReveal$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends
         }
     }
     render() {
-        return (h(Host, { key: '45471ff481d7ce13ff05da131b5de64fadaf68d9', open: this.open }, h("button", { key: '8677715bec503a1bd07f6df15932a98417599495', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '48e14ecbee56d2dc6b9b297f8daa171c34c2a98d', name: this.icon }), this.label && h("span", { key: '89e72867433abd07cb334120558ccdc02a5bbb81', class: "z-info-reveal-label" }, this.label)), h("div", { key: '06268f048b3d6244f940900ca114dfcad5417849', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '3698cbc239ab16b04226e7e9f1619014500b30f6' }), h("button", { key: '7e03364aeb76b404d4ed78d640de500b95f68769', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '524131a6b9b100729c10657c778bc6bb1daf6946', name: "multiply" })))));
+        return (h(Host, { key: 'f6264a965cec2cac4e38ce1ffb8e6738f3b1fcd4', open: this.open }, h("button", { key: 'fdeac683e761204c28a6f9a017062a2bf86a06d6', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'ea75d8979c67562f88768aa02e237883f0ea89f8', name: this.icon }), this.label && h("span", { key: '4e37cd8bdb878f083682f65ac592b15af04d48e4', class: "z-info-reveal-label" }, this.label)), h("div", { key: '1808554bf404059a691058c5069c7e3bddf8e50f', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'b1aca025f4e3fe0e27ebe28b0faaf37971cb2c32' }), h("button", { key: '9037710ed3fc0f2972dbe263b0d5df120373b34a', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'f0cc7e4778dfa59623c32b02c69b0aed00892aeb', name: "multiply" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-logo.js

@@ -23,7 +23,7 @@ const ZLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZLogo extends HTMLElement
         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 style() { return ZLogoStyle0; }
 }, [1, "z-logo", {

package/dist/components/z-menu-deprecated.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMenuDeprecated extends Components.ZMenuDeprecated, HTMLElement {}
+export const ZMenuDeprecated: {
+    prototype: ZMenuDeprecated;
+    new (): ZMenuDeprecated;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-menu-deprecated.js

@@ -0,0 +1,144 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--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{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){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%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill: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 ZMenuDeprecatedStyle0 = stylesCss;
+
+const ZMenuDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuDeprecated extends HTMLElement {
+    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();
+    }
+    onOpenChanged() {
+        if (this.open) {
+            this.reflow(true);
+        }
+        else {
+            cancelAnimationFrame(this.raf);
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.floating = false;
+        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() {
+        this.checkContent();
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    /**
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
+     */
+    reflow(live = false) {
+        if (this.content) {
+            const { style } = this.content;
+            const { left } = this.hostElement.getBoundingClientRect();
+            const widthPx = getComputedStyle(this.content).width;
+            const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+            const safeScrollbarSpace = 30;
+            style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
+        }
+        if (live) {
+            this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+        }
+    }
+    /**
+     * 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;
+    }
+    /**
+     * Set `menuitem` role to all menu items.
+     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     */
+    onItemsChange() {
+        this.checkContent();
+        const items = this.hostElement.querySelectorAll("[slot=item]");
+        items.forEach((item) => {
+            item.setAttribute("role", "menuitem");
+            item.dataset.text = item.textContent;
+        });
+    }
+    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-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    }
+    render() {
+        return (h(Host, { key: '3db9cc8073a46a7160e9cdd10ca8e56017fa17e3' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '1ba60c68bbb101a557bab3609640b6f0729b0791', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '08a6e9093b5f38d61ad5dc7c52749df71de26218', class: "header" }, h("slot", { key: '3c0cc8a49f9d83ca592f144d2e63e3bbb82f44a8', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '2f8d351c4fd22ff30d6f6d1899e5c3f5875b2cc5', class: "items", role: "menu" }, h("slot", { key: '4f411874aea00060bc7a1333bfed808c92d96bdd', name: "item", onSlotchange: this.onItemsChange }))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+    static get style() { return ZMenuDeprecatedStyle0; }
+}, [1, "z-menu-deprecated", {
+        "active": [516],
+        "floating": [516],
+        "open": [1540],
+        "verticalContext": [516, "vertical-context"],
+        "hasHeader": [32],
+        "hasContent": [32]
+    }, [[4, "click", "handleClick"]], {
+        "open": ["onOpenChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu-deprecated", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu-deprecated":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenuDeprecated$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMenuDeprecated = ZMenuDeprecated$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenuDeprecated, defineCustomElement };
+
+//# sourceMappingURL=z-menu-deprecated.js.map

package/dist/components/z-menu-deprecated.js.map

@@ -0,0 +1 @@
+{"file":"z-menu-deprecated.js","mappings":"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","names":["ZMenuDeprecated"],"sources":["src/components/deprecated/z-menu-deprecated/styles.css?tag=z-menu-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-deprecated/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\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  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\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\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}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\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  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  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-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\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\";\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-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuDeprecated {\n  @Element() hostElement: HTMLZMenuDeprecatedElement;\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}

package/dist/components/z-menu-section-deprecated.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMenuSectionDeprecated extends Components.ZMenuSectionDeprecated, HTMLElement {}
+export const ZMenuSectionDeprecated: {
+    prototype: ZMenuSectionDeprecated;
+    new (): ZMenuSectionDeprecated;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-menu-section-deprecated.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const ZMenuSectionDeprecatedStyle0 = stylesCss;
+
+const ZMenuSectionDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSectionDeprecated extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.open = undefined;
+        this.hasContent = undefined;
+    }
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+        this.open ? this.opened.emit() : this.closed.emit();
+    }
+    /** Close the list when a click is performed outside of this Element. */
+    handleClick(ev) {
+        if (!this.open || this.hostElement.contains(ev.target)) {
+            return;
+        }
+        this.open = false;
+        this.closed.emit();
+    }
+    /**
+     * Check if some content slot is set.
+     */
+    checkContent() {
+        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    render() {
+        return (h(Host, { key: '9f5e6272fec856fc30b8f00632105cf2d41f53cc', role: "menu", open: this.open }, h("button", { key: '31fbf5069fe344a43e5835f14459300dcf3359ac', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '789bf049b23b099e4fb07f12a3fa5a80a221f833', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'ffc7213860bca2db3fc12d575aaf26a0c598caaa', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '14cc6b2bb5f80030df79598464af61c4e375293b', class: "items" }, h("slot", { key: '830b84cf4ce1028c7cfed3ec5051f206f742e66f', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    }
+    get hostElement() { return this; }
+    static get style() { return ZMenuSectionDeprecatedStyle0; }
+}, [1, "z-menu-section-deprecated", {
+        "active": [516],
+        "open": [32],
+        "hasContent": [32]
+    }, [[4, "click", "handleClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu-section-deprecated", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu-section-deprecated":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenuSectionDeprecated$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMenuSectionDeprecated = ZMenuSectionDeprecated$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenuSectionDeprecated, defineCustomElement };
+
+//# sourceMappingURL=z-menu-section-deprecated.js.map

package/dist/components/z-menu-section-deprecated.js.map

@@ -0,0 +1 @@
+{"file":"z-menu-section-deprecated.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,88DAA88D,CAAC;AACj+D,qCAAe,SAAS;;MCWXA,wBAAsB;;;;;;;;;;;IAqBzB,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACrD;;IAID,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAKO,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACjF;;;;;IAMO,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;KAC7D;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,EAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAAI,CACxE,EACR,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,OAAO,IAChB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMenuSectionDeprecated"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\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:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent 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  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\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.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section 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 list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\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?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-menu-section.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as KeyboardCode } from './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
 
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"section\"]:hover),.items>::slotted([slot=\"section\"]:focus:focus-visible),.items>::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuSectionStyle0 = stylesCss;
 
 const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection extends HTMLElement {
@@ -11,10 +12,90 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
         this.__attachShadow();
         this.opened = createEvent(this, "opened", 7);
         this.closed = createEvent(this, "closed", 7);
+        this.currentIndex = -1;
+        this.currentCanvasOpenStatus = false;
         this.active = undefined;
         this.open = undefined;
         this.hasContent = undefined;
     }
+    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.parentElement.nextElementSibling;
+            if (nextElement) {
+                const menuButton = nextElement.shadowRoot.querySelector(".menu-label");
+                console.log(this.hostElement.parentElement);
+                menuButton.focus();
+            }
+            this.open = false;
+            nextElement.setAttribute("open", "true");
+        }
+        else if (e.code === KeyboardCode.ARROW_LEFT) {
+            const prevElement = this.hostElement.parentElement.previousElementSibling;
+            if (prevElement) {
+                const menuButton = prevElement.shadowRoot.querySelector(".menu-label");
+                menuButton.focus();
+            }
+            prevElement.setAttribute("open", "true");
+            this.open = false;
+        }
+    }
+    handleArrowsNav(e) {
+        const menuItems = Array.from(this.hostElement.querySelectorAll('[slot="section"]'));
+        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
+                menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
+                if (e.code === KeyboardCode.ARROW_DOWN) {
+                    nextFocusableItem = this.getNextItem(menuItems, 1);
+                }
+                else if (e.code === KeyboardCode.ARROW_UP) {
+                    nextFocusableItem = this.getNextItem(menuItems, -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("button");
+        menuButton.focus();
+        this.currentIndex = -1;
+        this.open = false;
+    }
     toggle() {
         if (!this.hasContent) {
             return;
@@ -34,7 +115,7 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
      * Check if some content slot is set.
      */
     checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+        this.hasContent = this.hostElement.querySelectorAll('[slot="section"]').length > 0;
     }
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
@@ -44,11 +125,18 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
         const labelElement = ev.target.assignedElements()[0];
         labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
     }
+    focusFirstSectionItemOnKeyUp() {
+        const firstElement = this.hostElement.querySelectorAll('[slot="section"]')[0];
+        if (firstElement) {
+            firstElement.focus();
+            this.currentIndex = 0;
+        }
+    }
     componentWillLoad() {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '7261f7c68d7e097fe0a70e6f8c0b513958605dbd', role: "menu", open: this.open }, h("button", { key: '74fd64a789a7f9ea93ec118dc2978809e70c5312', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'b8e32ae6fc27571d5318eb71ceddea6d87ca3ffa', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '5500c12ff4f374564c03e887a69ceba287a8d577', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'ff66588a6fa8fe8968ec9d7e12d6fac3bb1bb45f', class: "items" }, h("slot", { key: 'de19fdba5a89f0a048b6f8e824feacaa80bbe3fc', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '1370ec8c9379a204ed8bfb387ef53f6ad976ce0f', role: "menu", open: this.open }, h("button", { key: '4a474f4f47b9f72f3621a4c1f043f287ebf98d66', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this), onKeyUp: this.focusFirstSectionItemOnKeyUp.bind(this) }, h("slot", { key: '1332d96212421fd936b1ee1e295c856219bfb1cc', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '04b94f8f22bd56d16f7cdb3f394024c5726435e5', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '01353c9f9b57cce04361849e79c3264f5f106472', class: "items" }, h("slot", { key: '29379c69dff6189d4226246eb859dad6c67ca0ec', name: "section", onSlotchange: this.checkContent.bind(this) })))));
     }
     get hostElement() { return this; }
     static get style() { return ZMenuSectionStyle0; }
@@ -56,7 +144,7 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
         "active": [516],
         "open": [32],
         "hasContent": [32]
-    }, [[4, "click", "handleClick"]]]);
+    }, [[4, "canvasOpenStatusChanged", "canvasOpenStatusChanged"], [0, "keydown", "handleKeyDown"], [4, "click", "handleClick"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;