@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.8 → 0.1.1

package/dist/cjs/z-menu-section.cjs.entry.js

@@ -1,193 +0,0 @@
-'use strict';
-
-var index$1 = require('./index-B_IQfJ7S.js');
-var index = require('./index-GMHChntS.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 = class {
-    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 === index.KeyboardCode.ENTER || ev.key === index.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 index.KeyboardCode.ESC:
-            case index.KeyboardCode.ARROW_LEFT:
-                if (!this.open) {
-                    break;
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.moveFocus(this.label, this.focusableItem);
-                this.open = false;
-                break;
-            case index.KeyboardCode.ARROW_RIGHT:
-                if (this.open) {
-                    break;
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.open = true;
-                this.focustFirstItem();
-                break;
-            case index.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 index.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(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.opened = index$1.createEvent(this, "opened", 7);
-        this.closed = index$1.createEvent(this, "closed", 7);
-        this.active = undefined;
-        this.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 (index$1.h(index$1.Host, { key: 'b308fce3890a3094dca7d5de4f5837b47d6f2796', open: this.open }, index$1.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 }, index$1.h("slot", { key: '74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa', onSlotchange: this.onLabelSlotChange }), this.hasItems && index$1.h("z-icon", { key: '8338d8b57893c110475fe980320310236abb3446', name: this.open ? "chevron-up" : "chevron-down" })), index$1.h("div", { key: '4df11f5eaa5226c24930527caba7f0bfa048946a', class: "items", role: "menu", hidden: !this.open }, index$1.h("slot", { key: '8393b22b945ec02e32e78248090505a012529253', name: "section", onSlotchange: this.onItemsChange }))));
-    }
-    get host() { return index$1.getElement(this); }
-    static get watchers() { return {
-        "open": ["onOpenChange"],
-        "htmlTabindex": ["onTabindexChange"]
-    }; }
-};
-ZMenuSection.style = stylesCss;
-
-exports.z_menu_section = ZMenuSection;
-//# sourceMappingURL=z-menu-section.entry.cjs.js.map
-
-//# sourceMappingURL=z-menu-section.cjs.entry.js.map

package/dist/cjs/z-menu-section.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-menu-section.entry.cjs.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ioEAAioE;;MCOtoE,YAAY,GAAA,MAAA;AACrB,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,KAAK,CAAC,CAAC;;IAE5D,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB;;AAEJ,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;IAE1B,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB;;QAEJ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;AACrC,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AACtB,SAAC,CAAC;;IAEN,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QACvE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QACrC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B;;;AAGG;AACH,IAAA,iBAAiB,CAAC,EAAE,EAAA;QAChB,MAAM,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;QACpD,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,WAAW;;IAEpH,YAAY,GAAA;QACR,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE;;AAEnB,IAAA,cAAc,CAAC,EAAE,EAAA;AACb,QAAA,IAAI,EAAE,CAAC,GAAG,KAAKA,kBAAY,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,kBAAY,CAAC,KAAK,EAAE;YAChE,EAAE,CAAC,cAAc,EAAE;YACnB,EAAE,CAAC,eAAe,EAAE;YACpB,IAAI,CAAC,MAAM,EAAE;AACb,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;gBACX,IAAI,CAAC,eAAe,EAAE;;;;AAIlC;;;AAGG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAA;AACvB,QAAA,QAAQ,CAAC,QAAQ,GAAG,CAAC;QACrB,UAAU,CAAC,MAAK;YACZ,QAAQ,CAAC,KAAK,EAAE;SACnB,EAAE,GAAG,CAAC;QACP,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,CAAC,QAAQ,GAAG,EAAE;;;IAG7B,eAAe,GAAA;QACX,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;AAGjC,IAAA,MAAM,aAAa,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;;;AAGrD,IAAA,MAAM,QAAQ,GAAA;AACV,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC;QACrB,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;SACrB,EAAE,GAAG,CAAC;;IAEX,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;aAEjB;AACD,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;;IAG1B,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb;;QAEJ,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY;;AAE3C,IAAA,cAAc,CAAC,EAAE,EAAA;AACb,QAAA,QAAQ,EAAE,CAAC,GAAG;YACV,KAAKA,kBAAY,CAAC,GAAG;YACrB,KAAKA,kBAAY,CAAC,UAAU;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACZ;;gBAEJ,EAAE,CAAC,cAAc,EAAE;gBACnB,EAAE,CAAC,eAAe,EAAE;gBACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC;AAC9C,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;gBACjB;YACJ,KAAKA,kBAAY,CAAC,WAAW;AACzB,gBAAA,IAAI,IAAI,CAAC,IAAI,EAAE;oBACX;;gBAEJ,EAAE,CAAC,cAAc,EAAE;gBACnB,EAAE,CAAC,eAAe,EAAE;AACpB,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI;gBAChB,IAAI,CAAC,eAAe,EAAE;gBACtB;AACJ,YAAA,KAAKA,kBAAY,CAAC,UAAU,EAAE;AAC1B,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACZ;;gBAEJ,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE;oBACtC,EAAE,CAAC,cAAc,EAAE;oBACnB,EAAE,CAAC,eAAe,EAAE;oBACpB,IAAI,CAAC,eAAe,EAAE;oBACtB;;AAEJ,gBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;gBAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;gBAC7C,IAAI,QAAQ,EAAE;oBACV,EAAE,CAAC,cAAc,EAAE;oBACnB,EAAE,CAAC,eAAe,EAAE;oBACpB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC;;qBAE3C;AACD,oBAAA,IAAI,CAAC,YAAY,GAAG,CAAC;AACrB,oBAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,EAAE;;gBAEpC;;AAEJ,YAAA,KAAKA,kBAAY,CAAC,QAAQ,EAAE;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE;oBACpD;;AAEJ,gBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;gBAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;gBAC7C,EAAE,CAAC,cAAc,EAAE;gBACnB,EAAE,CAAC,eAAe,EAAE;gBACpB,IAAI,QAAQ,EAAE;oBACV,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC;;qBAE3C;;AAED,oBAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,EAAE;oBAChC,IAAI,CAAC,QAAQ,EAAE;;gBAEnB;;;;AAIZ,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AACI,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE;AACtB,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;QACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;QAClD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AACvD;IACD,iBAAiB,GAAA;QACb,IAAI,CAAC,aAAa,EAAE;;IAExB,MAAM,GAAA;AACF,QAAA,QAAQC,SAAC,CAACC,YAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAED,SAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,CAAG,EAAA,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAE,eAAe,EAAE,CAAA,EAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,EAAEA,SAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAIA,SAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,EAAE,CAAC,CAAC,EAAEA,SAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAEA,SAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;;;;;;;;;;;;","names":["KeyboardCode","h","Host"],"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/cjs/z-menu-section.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-menu-section.entry.cjs.js","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"],"names":["KeyboardCode","h","Host"],"mappings":"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","x_google_ignoreList":[0,1]}

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

@@ -1,319 +0,0 @@
-'use strict';
-
-var index$1 = require('./index-B_IQfJ7S.js');
-var index = require('./index-GMHChntS.js');
-var utils = require('./utils-KpWnWsPi.js');
-require('./breakpoints-B7vFm-3T.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 = class {
-    get focusableItem() {
-        return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));
-    }
-    toggle() {
-        if (!this.hasContent) {
-            return;
-        }
-        this.open = !this.open;
-    }
-    /**
-     * 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 === index.KeyboardCode.ENTER || ev.key === index.KeyboardCode.SPACE) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.toggle();
-            if (this.open) {
-                this.moveFocus(this.items[0]);
-            }
-            return;
-        }
-        if (!this.verticalContext) {
-            return;
-        }
-        if (ev.key === index.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) => utils.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 index.KeyboardCode.ESC:
-                if (!this.open) {
-                    break;
-                }
-                ev.stopPropagation();
-                ev.preventDefault();
-                this.open = false;
-                this.setFocus();
-                break;
-            case index.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 index.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 index.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(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.opened = index$1.createEvent(this, "opened", 7);
-        this.closed = index$1.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 (index$1.h("div", { class: "menu-label" }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange })));
-        }
-        return (index$1.h(index$1.Host, null, index$1.h("button", { ref: (el) => (this.labelButton = el), class: "menu-label", "aria-expanded": `${!!this.open}`, "aria-haspopup": `${this.hasContent}`, "aria-label": this.open ? "Chiudi menù" : "Apri menù", role: "menuitem", tabIndex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, index$1.h("slot", { onSlotchange: this.onLabelSlotChange }), index$1.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), index$1.h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index$1.h("header", { class: "header" }, index$1.h("slot", { name: "header", onSlotchange: this.checkContent }))), index$1.h("div", { class: "items", role: "menu" }, index$1.h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
-    }
-    get host() { return index$1.getElement(this); }
-    static get watchers() { return {
-        "open": ["onOpenChanged"],
-        "htmlTabindex": ["setLabelA11yAttrs"]
-    }; }
-};
-ZMenu.style = stylesCss;
-
-exports.z_menu = ZMenu;
-//# sourceMappingURL=z-menu.entry.cjs.js.map
-
-//# sourceMappingURL=z-menu.cjs.entry.js.map