@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

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

@@ -0,0 +1,227 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { K as KeyboardCode } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.js';
+
+const stylesCss = ":host{display: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)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::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.5}.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[hidden]{display:none}::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot=\"section\"]:last-of-type){border:none}::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot=\"section\"]:hover),::slotted([slot=\"section\"]:focus:focus-visible),::slotted([slot=\"section\"]:active),::slotted([slot=\"section\"][active]),::slotted([slot=\"section\"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}";
+
+const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection extends H {
+    get focusableItem() {
+        return this.items.find(({ tabIndex }) => tabIndex === 0);
+    }
+    toggle() {
+        if (!this.hasItems) {
+            return;
+        }
+        this.open = !this.open;
+    }
+    setItemsA11yAttrs() {
+        if (!this.hasItems) {
+            return;
+        }
+        this.items.forEach((item) => {
+            item.setAttribute("role", "menuitem");
+            item.tabIndex = -1;
+        });
+    }
+    onItemsChange() {
+        this.items = Array.from(this.host.querySelectorAll('[slot="section"]'));
+        this.hasItems = this.items.length > 0;
+        this.setItemsA11yAttrs();
+    }
+    /**
+     * 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;
+    }
+    onLabelClick() {
+        this.toggle();
+        this.setFocus();
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+            if (this.open) {
+                this.focustFirstItem();
+            }
+        }
+    }
+    /**
+     * 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.
+     */
+    moveFocus(receiver, current) {
+        receiver.tabIndex = 0;
+        setTimeout(() => {
+            receiver.focus();
+        }, 100);
+        if (current) {
+            current.tabIndex = -1;
+        }
+    }
+    focustFirstItem() {
+        this.moveFocus(this.items[0]);
+    }
+    /** Focus the last item. */
+    async focusLastItem() {
+        this.moveFocus(this.items[this.items.length - 1]);
+    }
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        setTimeout(() => {
+            this.label.focus();
+        }, 100);
+    }
+    onOpenChange() {
+        if (!this.open) {
+            this.setItemsA11yAttrs();
+            this.closed.emit();
+        }
+        else {
+            this.opened.emit();
+        }
+    }
+    onTabindexChange() {
+        if (!this.label) {
+            return;
+        }
+        this.label.tabIndex = this.htmlTabindex;
+    }
+    onItemsKeydown(ev) {
+        switch (ev.key) {
+            case KeyboardCode.ESC:
+            case KeyboardCode.ARROW_LEFT:
+                if (!this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.moveFocus(this.label, this.focusableItem);
+                this.open = false;
+                break;
+            case KeyboardCode.ARROW_RIGHT:
+                if (this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = true;
+                this.focustFirstItem();
+                break;
+            case KeyboardCode.ARROW_DOWN: {
+                if (!this.open) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.focustFirstItem();
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex + 1];
+                if (receiver) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                else {
+                    this.htmlTabindex = 0;
+                    this.focusableItem.tabIndex = -1;
+                }
+                break;
+            }
+            case KeyboardCode.ARROW_UP: {
+                if (!this.open || document.activeElement === this.host) {
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex - 1];
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (receiver) {
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                else {
+                    // since there isn't a previous item to focus, give the focus to the label element
+                    this.focusableItem.tabIndex = -1;
+                    this.setFocus();
+                }
+                break;
+            }
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.htmlTabindex = -1;
+        this.open = undefined;
+        this.hasItems = undefined;
+        this.items = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onLabelClick = this.onLabelClick.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+        this.onItemsKeydown = this.onItemsKeydown.bind(this);
+    }
+    connectedCallback() {
+        this.onItemsChange();
+    }
+    render() {
+        return (h(Host, { key: 'b308fce3890a3094dca7d5de4f5837b47d6f2796', open: this.open }, h("button", { key: 'dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '8338d8b57893c110475fe980320310236abb3446', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '4df11f5eaa5226c24930527caba7f0bfa048946a', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '8393b22b945ec02e32e78248090505a012529253', name: "section", onSlotchange: this.onItemsChange }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }; }
+    static get style() { return stylesCss; }
+}, [1, "z-menu-section", {
+        "active": [516],
+        "htmlTabindex": [2, "html-tabindex"],
+        "open": [1028],
+        "hasItems": [32],
+        "items": [32],
+        "focusLastItem": [64],
+        "setFocus": [64]
+    }, [[0, "keydown", "onItemsKeydown"]], {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu-section", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenuSection$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const ZMenuSection = ZMenuSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenuSection, defineCustomElement };
+//# sourceMappingURL=z-menu-section.js.map
+
+//# sourceMappingURL=z-menu-section.js.map

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

@@ -0,0 +1 @@
+{"file":"z-menu-section.js","mappings":"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","names":["ZMenuSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu-section/index.js"],"sourcesContent":[":host {\n  display: 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.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: var(--space-unit) 0;\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n  border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\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::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.5;\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[hidden] {\n  display: none;\n}\n\n::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n  outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n  border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { KeyboardCode } from \"../../beans\";\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\nexport class ZMenuSection {\n    get focusableItem() {\n        return this.items.find(({ tabIndex }) => tabIndex === 0);\n    }\n    toggle() {\n        if (!this.hasItems) {\n            return;\n        }\n        this.open = !this.open;\n    }\n    setItemsA11yAttrs() {\n        if (!this.hasItems) {\n            return;\n        }\n        this.items.forEach((item) => {\n            item.setAttribute(\"role\", \"menuitem\");\n            item.tabIndex = -1;\n        });\n    }\n    onItemsChange() {\n        this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]'));\n        this.hasItems = this.items.length > 0;\n        this.setItemsA11yAttrs();\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    onLabelSlotChange(ev) {\n        const labelElement = ev.target.assignedElements()[0];\n        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;\n    }\n    onLabelClick() {\n        this.toggle();\n        this.setFocus();\n    }\n    onLabelKeydown(ev) {\n        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n            ev.preventDefault();\n            ev.stopPropagation();\n            this.toggle();\n            if (this.open) {\n                this.focustFirstItem();\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     */\n    moveFocus(receiver, current) {\n        receiver.tabIndex = 0;\n        setTimeout(() => {\n            receiver.focus();\n        }, 100);\n        if (current) {\n            current.tabIndex = -1;\n        }\n    }\n    focustFirstItem() {\n        this.moveFocus(this.items[0]);\n    }\n    /** Focus the last item. */\n    async focusLastItem() {\n        this.moveFocus(this.items[this.items.length - 1]);\n    }\n    /** Set tabindex of the label to 0, then focus it. */\n    async setFocus() {\n        this.htmlTabindex = 0;\n        setTimeout(() => {\n            this.label.focus();\n        }, 100);\n    }\n    onOpenChange() {\n        if (!this.open) {\n            this.setItemsA11yAttrs();\n            this.closed.emit();\n        }\n        else {\n            this.opened.emit();\n        }\n    }\n    onTabindexChange() {\n        if (!this.label) {\n            return;\n        }\n        this.label.tabIndex = this.htmlTabindex;\n    }\n    onItemsKeydown(ev) {\n        switch (ev.key) {\n            case KeyboardCode.ESC:\n            case KeyboardCode.ARROW_LEFT:\n                if (!this.open) {\n                    break;\n                }\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.moveFocus(this.label, this.focusableItem);\n                this.open = false;\n                break;\n            case KeyboardCode.ARROW_RIGHT:\n                if (this.open) {\n                    break;\n                }\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.open = true;\n                this.focustFirstItem();\n                break;\n            case KeyboardCode.ARROW_DOWN: {\n                if (!this.open) {\n                    break;\n                }\n                if (document.activeElement === this.host) {\n                    ev.preventDefault();\n                    ev.stopPropagation();\n                    this.focustFirstItem();\n                    break;\n                }\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                const receiver = this.items[currentIndex + 1];\n                if (receiver) {\n                    ev.preventDefault();\n                    ev.stopPropagation();\n                    this.moveFocus(receiver, this.focusableItem);\n                }\n                else {\n                    this.htmlTabindex = 0;\n                    this.focusableItem.tabIndex = -1;\n                }\n                break;\n            }\n            case KeyboardCode.ARROW_UP: {\n                if (!this.open || document.activeElement === this.host) {\n                    break;\n                }\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                const receiver = this.items[currentIndex - 1];\n                ev.preventDefault();\n                ev.stopPropagation();\n                if (receiver) {\n                    this.moveFocus(receiver, this.focusableItem);\n                }\n                else {\n                    // since there isn't a previous item to focus, give the focus to the label element\n                    this.focusableItem.tabIndex = -1;\n                    this.setFocus();\n                }\n                break;\n            }\n        }\n    }\n    constructor() {\n        this.active = undefined;\n        this.htmlTabindex = -1;\n        this.open = undefined;\n        this.hasItems = undefined;\n        this.items = undefined;\n        this.toggle = this.toggle.bind(this);\n        this.onItemsChange = this.onItemsChange.bind(this);\n        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n        this.onLabelClick = this.onLabelClick.bind(this);\n        this.onLabelKeydown = this.onLabelKeydown.bind(this);\n        this.onItemsKeydown = this.onItemsKeydown.bind(this);\n    }\n    connectedCallback() {\n        this.onItemsChange();\n    }\n    render() {\n        return (h(Host, { key: 'b308fce3890a3094dca7d5de4f5837b47d6f2796', open: this.open }, h(\"button\", { key: 'dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6', ref: (el) => (this.label = el), class: \"label\", \"aria-haspopup\": `${!!this.hasItems}`, \"aria-expanded\": `${!!this.open}`, role: \"menuitem\", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h(\"slot\", { key: '74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h(\"z-icon\", { key: '8338d8b57893c110475fe980320310236abb3446', name: this.open ? \"chevron-up\" : \"chevron-down\" })), h(\"div\", { key: '4df11f5eaa5226c24930527caba7f0bfa048946a', class: \"items\", role: \"menu\", hidden: !this.open }, h(\"slot\", { key: '8393b22b945ec02e32e78248090505a012529253', name: \"section\", onSlotchange: this.onItemsChange }))));\n    }\n    static get is() { return \"z-menu-section\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Active state\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true\n            },\n            \"htmlTabindex\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Tabindex value to set on the label button.\\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\"\n                },\n                \"attribute\": \"html-tabindex\",\n                \"reflect\": false,\n                \"defaultValue\": \"-1\"\n            },\n            \"open\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The opening state of the section.\"\n                },\n                \"attribute\": \"open\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasItems\": {},\n            \"items\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"opened\",\n                \"name\": \"opened\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The section has been opened.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"closed\",\n                \"name\": \"closed\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The section has been closed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"focusLastItem\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Focus the last item.\",\n                    \"tags\": []\n                }\n            },\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Set tabindex of the label to 0, then focus it.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"open\",\n                \"methodName\": \"onOpenChange\"\n            }, {\n                \"propName\": \"htmlTabindex\",\n                \"methodName\": \"onTabindexChange\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"keydown\",\n                \"method\": \"onItemsKeydown\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/z-menu.js

@@ -0,0 +1,354 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { K as KeyboardCode } from './p-Bla2iV_L.js';
+import { c as containsElement } from './p-D6oPathC.js';
+import { d as defineCustomElement$2 } from './p-DexdQ2O9.js';
+
+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;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:calc(var(--border-size-small) * -1);left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:\"\"}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::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;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::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}.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\"]:last-child){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active),.items>::slotted([slot=\"item\"][active]),.items>::slotted([slot=\"item\"][data-active]){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
+
+const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
+const ZMenu$1 = /*@__PURE__*/ proxyCustomElement(class ZMenu extends H {
+    get focusableItem() {
+        return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));
+    }
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+    }
+    /**
+     * 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;
+        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.floating) {
+            return;
+        }
+        if (this.content && this.hasContent) {
+            const { style } = this.content;
+            const { left } = this.host.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.host.querySelectorAll("[slot=header]").length;
+        this.hasContent = !!this.host.querySelectorAll("[slot=item]").length || this.hasHeader;
+    }
+    setItemTabindex(item, tabIndex) {
+        if (isZMenuSection(item)) {
+            item.htmlTabindex = tabIndex;
+        }
+        else {
+            item.tabIndex = tabIndex;
+        }
+    }
+    /**
+     * 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;
+            this.setItemTabindex(item, tabindex);
+            if (!isZMenuSection(item)) {
+                item.setAttribute("role", "menuitem");
+            }
+        });
+    }
+    onItemsChange() {
+        this.checkContent();
+        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;
+            }
+        });
+    }
+    /**
+     * 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;
+        }
+        this.setItemTabindex(current, -1);
+    }
+    onLabelClick() {
+        this.toggle();
+        this.setFocus();
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+            if (this.open) {
+                this.moveFocus(this.items[0]);
+            }
+            return;
+        }
+        if (!this.verticalContext) {
+            return;
+        }
+        if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = true;
+            this.moveFocus(this.items[0]);
+        }
+    }
+    /** 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() {
+        const lastItem = this.items[this.items.length - 1];
+        if (isZMenuSection(lastItem) && lastItem.open) {
+            lastItem.focusLastItem();
+            return;
+        }
+        this.moveFocus(lastItem);
+    }
+    onOpenChanged() {
+        if (!this.open) {
+            cancelAnimationFrame(this.raf);
+            this.closed.emit();
+            this.items.forEach((item) => {
+                if (isZMenuSection(item) && item.open) {
+                    item.open = false;
+                }
+            });
+            return;
+        }
+        this.setItemsA11yAttrs();
+        this.opened.emit();
+        if (this.floating) {
+            this.reflow(true);
+        }
+    }
+    setLabelA11yAttrs() {
+        if (this.hasContent && this.labelButton) {
+            this.labelButton.tabIndex = this.htmlTabindex;
+            return;
+        }
+        const slottedLabel = this.host.firstElementChild;
+        slottedLabel.role = "menuitem";
+        slottedLabel.tabIndex = this.htmlTabindex;
+    }
+    /**
+     * Set tabindex to -1 to all siblings of the clicked item.
+     */
+    onItemClick(ev) {
+        const clickedItem = this.items.find((item) => containsElement(item, ev.target));
+        if (clickedItem) {
+            this.items.forEach((item) => {
+                if (item === clickedItem) {
+                    return;
+                }
+                if (isZMenuSection(item)) {
+                    item.htmlTabindex = -1;
+                }
+                else {
+                    item.tabIndex = -1;
+                }
+            });
+        }
+    }
+    onKeyDown(ev) {
+        var _a;
+        if (!this.hasContent) {
+            return;
+        }
+        switch (ev.key) {
+            case KeyboardCode.ESC:
+                if (!this.open) {
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                this.open = false;
+                this.setFocus();
+                break;
+            case KeyboardCode.ARROW_DOWN: {
+                if (document.activeElement === this.host) {
+                    if (this.verticalContext && !this.open) {
+                        break;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    this.moveFocus(this.items[0]);
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                if (this.verticalContext && currentIndex === this.items.length - 1) {
+                    // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it
+                    this.setItemTabindex(this.items[currentIndex], -1);
+                    this.htmlTabindex = 0;
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                const receiver = this.items[currentIndex + 1];
+                // 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 KeyboardCode.ARROW_UP: {
+                if (document.activeElement === this.host) {
+                    if (this.verticalContext) {
+                        break;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    // open the menu and focus the last item
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    this.moveFocus(this.items[this.items.length - 1], this.focusableItem);
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                if (currentIndex === 0 && this.verticalContext) {
+                    this.setItemTabindex(this.focusableItem, -1);
+                    this.setFocus();
+                    break;
+                }
+                const receiver = (_a = this.items[currentIndex - 1]) !== null && _a !== void 0 ? _a : this.items[this.items.length - 1];
+                // if the receiver is a ZMenuSection and it's open, focus its last item
+                if (isZMenuSection(receiver) && receiver.open) {
+                    this.setItemTabindex(this.focusableItem, -1);
+                    receiver.focusLastItem();
+                    break;
+                }
+                this.moveFocus(receiver, this.focusableItem);
+                break;
+            }
+            case KeyboardCode.ARROW_LEFT:
+                if (!this.open || !this.verticalContext) {
+                    break;
+                }
+                // close the menu and focus the label
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = false;
+                this.setFocus();
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.items = [];
+        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.onLabelClick = this.onLabelClick.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+    }
+    componentWillLoad() {
+        this.setLabelA11yAttrs();
+        this.onItemsChange();
+    }
+    render() {
+        if (!this.hasContent) {
+            return (h("div", { class: "menu-label" }, h("slot", { onSlotchange: this.onLabelSlotChange })));
+        }
+        return (h(Host, null, 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.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChanged"],
+        "htmlTabindex": ["setLabelA11yAttrs"]
+    }; }
+    static get style() { return stylesCss; }
+}, [1, "z-menu", {
+        "active": [516],
+        "floating": [516],
+        "open": [1540],
+        "verticalContext": [516, "vertical-context"],
+        "htmlTabindex": [2, "html-tabindex"],
+        "hasHeader": [32],
+        "hasContent": [32],
+        "setFocus": [64],
+        "focusLastItem": [64]
+    }, [[4, "click", "onItemClick"], [0, "keydown", "onKeyDown"]], {
+        "open": ["onOpenChanged"],
+        "htmlTabindex": ["setLabelA11yAttrs"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenu$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const ZMenu = ZMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenu, defineCustomElement };
+//# sourceMappingURL=z-menu.js.map
+
+//# sourceMappingURL=z-menu.js.map