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

package/dist/esm/z-list_3.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+import { L as ListSize, J as ListType, h as ListDividerType, v as DividerSize } from './index-B2-dCTD2.js';
+
+const stylesCss$2 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
+
+const ZList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = ListSize.MEDIUM;
+        this.listType = ListType.NONE;
+        this.role = "list";
+    }
+    setChildrenSizeType() {
+        const children = this.host.children;
+        for (let i = 0; i < children.length; i++) {
+            children[i].setAttribute("size", this.size);
+            children[i].setAttribute("list-type", this.listType);
+            children[i].setAttribute("list-element-position", (i + 1).toString());
+        }
+    }
+    componentDidLoad() {
+        this.setChildrenSizeType();
+    }
+    render() {
+        return (h(Host, { key: 'f178d7e0463f0e0495aa3029dd8a14b3947770ad' }, h("slot", { key: '9f177d9529829d8eb48329cfc969c739c24c5a52' })));
+    }
+    get host() { return getElement(this); }
+};
+ZList.style = stylesCss$2;
+
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}:host>.grouped-tree-list-header{padding-top:var(--space-unit);padding-bottom:0}";
+
+const ZListGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = ListSize.MEDIUM;
+        this.dividerType = ListDividerType.NONE;
+        this.dividerSize = DividerSize.SMALL;
+        this.dividerColor = "gray200";
+        this.listType = ListType.NONE;
+        this.hasTreeItems = undefined;
+    }
+    componentDidLoad() {
+        const children = this.host.children;
+        for (let i = 0; i < children.length; i++) {
+            if (children.length - 1 > i) {
+                children[i].setAttribute("divider-type", this.dividerType);
+                children[i].setAttribute("divider-size", this.dividerSize);
+                children[i].setAttribute("divider-color", this.dividerColor);
+            }
+            children[i].setAttribute("size", this.size);
+            children[i].setAttribute("list-type", this.listType);
+            children[i].setAttribute("list-element-position", i.toString());
+        }
+    }
+    componentWillLoad() {
+        this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
+    }
+    render() {
+        return (h(Host, { key: '1e3229205e55482b92dc8d0a972d9f9e1805ba56', role: "group" }, h("div", { key: 'ede88ef3d1845e0c432b7a00b8f9dc959ce258e6', class: {
+                "z-list-group-header-container": true,
+                "has-header": this.hasHeader && !this.hasTreeItems,
+                "grouped-tree-list-header": this.hasTreeItems,
+            } }, h("slot", { key: 'd6c2cef7568424ebab1ae5d3dc572d4bc2aba61c', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '5e45b81c54db4f623d366e62817f2a60ede8fa19', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '2a1a7ad0e3f8b56dd4880b8215ab79bd27981804' })));
+    }
+    get host() { return getElement(this); }
+};
+ZListGroup.style = stylesCss$1;
+
+const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.expandable.sc-z-tag-h>z-icon.sc-z-tag{transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag,.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.sc-z-tag-h>z-icon.sc-z-tag:has(+div.sc-z-tag:empty){margin-right:0}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
+
+const ZTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icon = undefined;
+        this.expandable = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {
+                expandable: this.expandable && !!this.icon,
+            } }, this.icon && h("z-icon", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h("div", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h("slot", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));
+    }
+};
+ZTag.style = stylesCss;
+
+export { ZList as z_list, ZListGroup as z_list_group, ZTag as z_tag };
+//# sourceMappingURL=z-list.z-list-group.z-tag.entry.js.map
+
+//# sourceMappingURL=z-list_3.entry.js.map

package/dist/esm/z-list_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-list.z-list-group.z-tag.entry.js","mappings":";;;AAAA,MAAMA,WAAS,GAAG,0GAA0G;;MCE/G,KAAK,GAAA,MAAA;AACd,IAAA,WAAA,CAAA,OAAA,EAAA;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI;AAC7B,QAAA,IAAI,CAAC,IAAI,GAAG,MAAM;AACrB;IACD,mBAAmB,GAAA;AACf,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;AACnC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACtC,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AAC3C,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC;AACpD,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC;;;IAG7E,gBAAgB,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;IAE9B,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC;;;;;;ACpB5I,MAAMA,WAAS,GAAG,+fAA+f;;MCEpgB,UAAU,GAAA,MAAA;AACnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM;AAC3B,QAAA,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI;AACvC,QAAA,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;AAChC;IACD,gBAAgB,GAAA;AACZ,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;AACnC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE;AACzB,gBAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC;AAC1D,gBAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC;AAC1D,gBAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC;;AAEhE,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AAC3C,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC;AACpD,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;;;IAGvE,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;;IAEvE,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;AAC/I,gBAAA,+BAA+B,EAAE,IAAI;gBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;gBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;AAChD,aAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC;;;;;;AChC/U,MAAM,SAAS,GAAG,y9BAAy9B;;MCO99B,IAAI,GAAA,MAAA;AACb,IAAA,WAAA,CAAA,OAAA,EAAA;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC9B;IACD,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC7C,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC;;;;;;;","names":["stylesCss"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list/index.js","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list-group/styles.css?tag=z-list-group&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list-group/index.js","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-tag/index.js"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { ListSize, ListType } from \"../../../beans\";\nexport class ZList {\n    constructor() {\n        this.size = ListSize.MEDIUM;\n        this.listType = ListType.NONE;\n        this.role = \"list\";\n    }\n    setChildrenSizeType() {\n        const children = this.host.children;\n        for (let i = 0; i < children.length; i++) {\n            children[i].setAttribute(\"size\", this.size);\n            children[i].setAttribute(\"list-type\", this.listType);\n            children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n        }\n    }\n    componentDidLoad() {\n        this.setChildrenSizeType();\n    }\n    render() {\n        return (h(Host, { key: 'f178d7e0463f0e0495aa3029dd8a14b3947770ad' }, h(\"slot\", { key: '9f177d9529829d8eb48329cfc969c739c24c5a52' })));\n    }\n    static get is() { return \"z-list\"; }\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            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListSize\",\n                    \"resolved\": \"ListSize.LARGE | ListSize.MEDIUM | ListSize.NONE | ListSize.SMALL | ListSize.X_LARGE\",\n                    \"references\": {\n                        \"ListSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets size of inside elements.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListSize.MEDIUM\"\n            },\n            \"listType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListType\",\n                    \"resolved\": \"ListType.NONE | ListType.ORDERED | ListType.UNORDERED\",\n                    \"references\": {\n                        \"ListType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] type of the list marker for each element\"\n                },\n                \"attribute\": \"list-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListType.NONE\"\n            },\n            \"role\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Sets role of the element.\"\n                },\n                \"attribute\": \"role\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"list\\\"\"\n            }\n        };\n    }\n    static get elementRef() { return \"host\"; }\n}\n//# sourceMappingURL=index.js.map\n",":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .z-list-group-header-container {\n  color: var(--gray700);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb) !important;\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n:host > .z-list-group-header-container.has-header {\n  padding-top: var(--space-unit);\n  padding-bottom: var(--space-unit);\n}\n\n:host > .z-list-group-header-container.has-header > z-divider {\n  margin-top: var(--space-unit);\n}\n\n:host > .grouped-tree-list-header {\n  padding-top: var(--space-unit);\n  padding-bottom: 0;\n}\n","import { h, Host } from \"@stencil/core\";\nimport { DividerSize, ListDividerType, ListSize, ListType } from \"../../../beans\";\nexport class ZListGroup {\n    constructor() {\n        this.size = ListSize.MEDIUM;\n        this.dividerType = ListDividerType.NONE;\n        this.dividerSize = DividerSize.SMALL;\n        this.dividerColor = \"gray200\";\n        this.listType = ListType.NONE;\n        this.hasTreeItems = undefined;\n    }\n    componentDidLoad() {\n        const children = this.host.children;\n        for (let i = 0; i < children.length; i++) {\n            if (children.length - 1 > i) {\n                children[i].setAttribute(\"divider-type\", this.dividerType);\n                children[i].setAttribute(\"divider-size\", this.dividerSize);\n                children[i].setAttribute(\"divider-color\", this.dividerColor);\n            }\n            children[i].setAttribute(\"size\", this.size);\n            children[i].setAttribute(\"list-type\", this.listType);\n            children[i].setAttribute(\"list-element-position\", i.toString());\n        }\n    }\n    componentWillLoad() {\n        this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n    }\n    render() {\n        return (h(Host, { key: '1e3229205e55482b92dc8d0a972d9f9e1805ba56', role: \"group\" }, h(\"div\", { key: 'ede88ef3d1845e0c432b7a00b8f9dc959ce258e6', class: {\n                \"z-list-group-header-container\": true,\n                \"has-header\": this.hasHeader && !this.hasTreeItems,\n                \"grouped-tree-list-header\": this.hasTreeItems,\n            } }, h(\"slot\", { key: 'd6c2cef7568424ebab1ae5d3dc572d4bc2aba61c', name: \"header-title\" }), this.dividerType === ListDividerType.HEADER && (h(\"z-divider\", { key: '5e45b81c54db4f623d366e62817f2a60ede8fa19', color: this.dividerColor, size: this.dividerSize }))), h(\"slot\", { key: '2a1a7ad0e3f8b56dd4880b8215ab79bd27981804' })));\n    }\n    static get is() { return \"z-list-group\"; }\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            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListSize\",\n                    \"resolved\": \"ListSize.LARGE | ListSize.MEDIUM | ListSize.NONE | ListSize.SMALL | ListSize.X_LARGE\",\n                    \"references\": {\n                        \"ListSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets size of inside elements.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListSize.MEDIUM\"\n            },\n            \"dividerType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListDividerType\",\n                    \"resolved\": \"ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE\",\n                    \"references\": {\n                        \"ListDividerType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListDividerType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the position where to insert the divider.\"\n                },\n                \"attribute\": \"divider-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListDividerType.NONE\"\n            },\n            \"dividerSize\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"DividerSize\",\n                    \"resolved\": \"DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL\",\n                    \"references\": {\n                        \"DividerSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::DividerSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the divider size.\"\n                },\n                \"attribute\": \"divider-size\",\n                \"reflect\": true,\n                \"defaultValue\": \"DividerSize.SMALL\"\n            },\n            \"dividerColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the divider color.\"\n                },\n                \"attribute\": \"divider-color\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"gray200\\\"\"\n            },\n            \"listType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListType\",\n                    \"resolved\": \"ListType.NONE | ListType.ORDERED | ListType.UNORDERED\",\n                    \"references\": {\n                        \"ListType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] type of the list marker for each element\"\n                },\n                \"attribute\": \"list-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListType.NONE\"\n            },\n            \"hasTreeItems\": {\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\": \"[optional] check for tree items in grouped lists\"\n                },\n                \"attribute\": \"has-tree-items\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get elementRef() { return \"host\"; }\n}\n//# sourceMappingURL=index.js.map\n",":host {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n\n  display: flex;\n  width: fit-content;\n  max-width: inherit;\n  height: fit-content;\n  max-height: inherit;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-tag-bg, var(--color-hover-primary));\n  border-radius: var(--border-radius);\n  color: var(--z-tag-text-color, var(--color-text-inverse));\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 14px;\n  text-transform: uppercase;\n}\n\n:host(.expandable) > z-icon {\n  transition: margin-right 0.3s ease-out;\n}\n\n:host(:not(.expandable)) > z-icon,\n:host(.expandable:hover) > z-icon {\n  margin-right: var(--space-unit);\n  transition: margin-right 0.3s ease-out 0s;\n}\n\n:host > z-icon:has(+ div:empty) {\n  margin-right: 0;\n}\n\n:host(.expandable) > div {\n  overflow: hidden;\n  max-width: 0;\n  max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n  max-width: 100%;\n  max-height: 100%;\n}\n","import { Host, h } from \"@stencil/core\";\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\nexport class ZTag {\n    constructor() {\n        this.icon = undefined;\n        this.expandable = undefined;\n    }\n    render() {\n        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {\n                expandable: this.expandable && !!this.icon,\n            } }, this.icon && h(\"z-icon\", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h(\"div\", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h(\"slot\", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));\n    }\n    static get is() { return \"z-tag\"; }\n    static get encapsulation() { return \"scoped\"; }\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            \"icon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Tag icon\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false\n            },\n            \"expandable\": {\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\": \"[optional] Hide the text and show it on hover\"\n                },\n                \"attribute\": \"expandable\",\n                \"reflect\": false\n            }\n        };\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/esm/z-menu-deprecated.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-primary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
+
+const ZMenuDeprecated = class {
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+        this.open ? this.opened.emit() : this.closed.emit();
+    }
+    /** Close the floating list when a click is performed outside of this Element. */
+    handleClick(ev) {
+        if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
+            return;
+        }
+        this.reflow();
+        this.open = false;
+        this.closed.emit();
+    }
+    onOpenChanged() {
+        if (this.open) {
+            this.reflow(true);
+        }
+        else {
+            cancelAnimationFrame(this.raf);
+        }
+    }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.floating = false;
+        this.open = false;
+        this.verticalContext = false;
+        this.hasHeader = undefined;
+        this.hasContent = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.checkContent = this.checkContent.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    /**
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
+     */
+    reflow(live = false) {
+        if (this.content) {
+            const { style } = this.content;
+            const { left } = this.hostElement.getBoundingClientRect();
+            const widthPx = getComputedStyle(this.content).width;
+            const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+            const safeScrollbarSpace = 30;
+            style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
+        }
+        if (live) {
+            this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+        }
+    }
+    /**
+     * Check if some content slot is set.
+     */
+    checkContent() {
+        this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
+        this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+    }
+    /**
+     * Set `menuitem` role to all menu items.
+     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     */
+    onItemsChange() {
+        this.checkContent();
+        const items = this.hostElement.querySelectorAll("[slot=item]");
+        items.forEach((item) => {
+            item.setAttribute("role", "menuitem");
+            item.dataset.text = item.textContent;
+        });
+    }
+    renderMenuLabel() {
+        if (this.hasContent) {
+            return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+        }
+        return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    }
+    render() {
+        return (h(Host, { key: '74b5b32d29db7c6e7d241f1583a2df27979fb4f8' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '6bdfeb0e2d900a53e69a15861c1c5d6337fcf972', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: 'da9c528915686f2b5fcface1483822df96abca6b', class: "header" }, h("slot", { key: '692467f0246d129d75525a5097529d8c2a8f6817', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '639ffcb514c6d95d7dca908b2c0cbf142f42a9e3', class: "items", role: "menu" }, h("slot", { key: '783021819f17a536746670de911ebef9665e8e99', name: "item", onSlotchange: this.onItemsChange }))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+};
+ZMenuDeprecated.style = stylesCss;
+
+export { ZMenuDeprecated as z_menu_deprecated };
+//# sourceMappingURL=z-menu-deprecated.entry.js.map
+
+//# sourceMappingURL=z-menu-deprecated.entry.js.map

package/dist/esm/z-menu-deprecated.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-menu-deprecated.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/deprecated/z-menu-deprecated/styles.css?tag=z-menu-deprecated&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/deprecated/z-menu-deprecated/index.js"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  outline: none;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n  font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n  letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n  box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  content: \"\";\n  pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n  height: var(--border-size-small);\n  background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\n  outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n  padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: currentcolor;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import { Host, h } from \"@stencil/core\";\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\nexport class ZMenuDeprecated {\n    toggle() {\n        if (!this.hasContent) {\n            return;\n        }\n        this.open = !this.open;\n        this.open ? this.opened.emit() : this.closed.emit();\n    }\n    /** Close the floating list when a click is performed outside of this Element. */\n    handleClick(ev) {\n        if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {\n            return;\n        }\n        this.reflow();\n        this.open = false;\n        this.closed.emit();\n    }\n    onOpenChanged() {\n        if (this.open) {\n            this.reflow(true);\n        }\n        else {\n            cancelAnimationFrame(this.raf);\n        }\n    }\n    constructor() {\n        this.active = undefined;\n        this.floating = false;\n        this.open = false;\n        this.verticalContext = false;\n        this.hasHeader = undefined;\n        this.hasContent = undefined;\n        this.toggle = this.toggle.bind(this);\n        this.checkContent = this.checkContent.bind(this);\n        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n        this.onItemsChange = this.onItemsChange.bind(this);\n    }\n    componentWillLoad() {\n        this.checkContent();\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    /**\n     * Correctly set position of the floating menu in order to prevent overflow.\n     * @param live Should run the method on every refresh frame.\n     */\n    reflow(live = false) {\n        if (this.content) {\n            const { style } = this.content;\n            const { left } = this.hostElement.getBoundingClientRect();\n            const widthPx = getComputedStyle(this.content).width;\n            const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n            const safeScrollbarSpace = 30;\n            style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n        }\n        if (live) {\n            this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n        }\n    }\n    /**\n     * Check if some content slot is set.\n     */\n    checkContent() {\n        this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n        this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n    }\n    /**\n     * Set `menuitem` role to all menu items.\n     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n     */\n    onItemsChange() {\n        this.checkContent();\n        const items = this.hostElement.querySelectorAll(\"[slot=item]\");\n        items.forEach((item) => {\n            item.setAttribute(\"role\", \"menuitem\");\n            item.dataset.text = item.textContent;\n        });\n    }\n    renderMenuLabel() {\n        if (this.hasContent) {\n            return (h(\"button\", { class: \"menu-label\", \"aria-expanded\": this.open ? \"true\" : \"false\", \"aria-label\": this.open ? \"Chiudi menù\" : \"Apri menù\", onClick: this.toggle }, h(\"div\", { class: \"menu-label-content\" }, h(\"slot\", { onSlotchange: this.onLabelSlotChange }), h(\"z-icon\", { name: this.open ? \"chevron-up\" : \"chevron-down\" }))));\n        }\n        return (h(\"div\", { class: \"menu-label\" }, h(\"div\", { class: \"menu-label-content\" }, h(\"slot\", { onSlotchange: this.onLabelSlotChange }))));\n    }\n    render() {\n        return (h(Host, { key: '74b5b32d29db7c6e7d241f1583a2df27979fb4f8' }, this.renderMenuLabel(), this.hasContent && (h(\"div\", { key: '6bdfeb0e2d900a53e69a15861c1c5d6337fcf972', class: \"content\", ref: (el) => (this.content = el) }, this.hasHeader && (h(\"header\", { key: 'da9c528915686f2b5fcface1483822df96abca6b', class: \"header\" }, h(\"slot\", { key: '692467f0246d129d75525a5097529d8c2a8f6817', name: \"header\", onSlotchange: this.checkContent }))), h(\"div\", { key: '639ffcb514c6d95d7dca908b2c0cbf142f42a9e3', class: \"items\", role: \"menu\" }, h(\"slot\", { key: '783021819f17a536746670de911ebef9665e8e99', name: \"item\", onSlotchange: this.onItemsChange }))))));\n    }\n    static get is() { return \"z-menu-deprecated\"; }\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\": \"Flag to set the active status of the menu.\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true\n            },\n            \"floating\": {\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\": \"Flag to set the display mode of the list.\\nIf true, the list will be absolutely positioned under the menu label,\\nstacked beneath it otherwise.\"\n                },\n                \"attribute\": \"floating\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\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 menu.\"\n                },\n                \"attribute\": \"open\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"verticalContext\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\\nA small border is placed under it as a separator from other elements.\"\n                },\n                \"attribute\": \"vertical-context\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasHeader\": {},\n            \"hasContent\": {}\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 menu 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 menu has been closed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"hostElement\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"open\",\n                \"methodName\": \"onOpenChanged\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"handleClick\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/esm/z-menu-section-deprecated.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}";
+
+const ZMenuSectionDeprecated = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.open = undefined;
+        this.hasContent = undefined;
+    }
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+        this.open ? this.opened.emit() : this.closed.emit();
+    }
+    /** Close the list when a click is performed outside of this Element. */
+    handleClick(ev) {
+        if (!this.open || this.hostElement.contains(ev.target)) {
+            return;
+        }
+        this.open = false;
+        this.closed.emit();
+    }
+    /**
+     * Check if some content slot is set.
+     */
+    checkContent() {
+        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    render() {
+        return (h(Host, { key: 'cb55ccb8c7327254eabaab573f6fb0a5ae2ac361', role: "menu", open: this.open }, h("button", { key: '5065f38502c4bb0167bb7332e0e8ba0dd36541df', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '67a5082482b73f27f8244f730ac88da14d4db6c4', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'b513a5c76223e7a83162cc3b28434c53124b135c', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '4f43962d01e60cea802f06413acae360ead32aa0', class: "items" }, h("slot", { key: '020f1235a37a99e274e9f4d611153f4915c9cd41', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    }
+    get hostElement() { return getElement(this); }
+};
+ZMenuSectionDeprecated.style = stylesCss;
+
+export { ZMenuSectionDeprecated as z_menu_section_deprecated };
+//# sourceMappingURL=z-menu-section-deprecated.entry.js.map
+
+//# sourceMappingURL=z-menu-section-deprecated.entry.js.map

package/dist/esm/z-menu-section-deprecated.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-menu-section-deprecated.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/deprecated/z-menu-section-deprecated/index.js"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import { Host, h } from \"@stencil/core\";\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\nexport class ZMenuSectionDeprecated {\n    constructor() {\n        this.active = undefined;\n        this.open = undefined;\n        this.hasContent = undefined;\n    }\n    toggle() {\n        if (!this.hasContent) {\n            return;\n        }\n        this.open = !this.open;\n        this.open ? this.opened.emit() : this.closed.emit();\n    }\n    /** Close the list when a click is performed outside of this Element. */\n    handleClick(ev) {\n        if (!this.open || this.hostElement.contains(ev.target)) {\n            return;\n        }\n        this.open = false;\n        this.closed.emit();\n    }\n    /**\n     * Check if some content slot is set.\n     */\n    checkContent() {\n        this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\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.innerText) || null;\n    }\n    componentWillLoad() {\n        this.checkContent();\n    }\n    render() {\n        return (h(Host, { key: 'cb55ccb8c7327254eabaab573f6fb0a5ae2ac361', role: \"menu\", open: this.open }, h(\"button\", { key: '5065f38502c4bb0167bb7332e0e8ba0dd36541df', class: \"label\", \"aria-pressed\": this.open ? \"true\" : \"false\", onClick: this.toggle.bind(this) }, h(\"slot\", { key: '67a5082482b73f27f8244f730ac88da14d4db6c4', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h(\"z-icon\", { key: 'b513a5c76223e7a83162cc3b28434c53124b135c', name: this.open ? \"chevron-up\" : \"chevron-down\" })), this.open && (h(\"div\", { key: '4f43962d01e60cea802f06413acae360ead32aa0', class: \"items\" }, h(\"slot\", { key: '020f1235a37a99e274e9f4d611153f4915c9cd41', name: \"item\", onSlotchange: this.checkContent.bind(this) })))));\n    }\n    static get is() { return \"z-menu-section-deprecated\"; }\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        };\n    }\n    static get states() {\n        return {\n            \"open\": {},\n            \"hasContent\": {}\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 elementRef() { return \"hostElement\"; }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"handleClick\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,w8DAAw8D;;MCM78D,sBAAsB,GAAA,MAAA;AAC/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AACI,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC9B;IACD,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB;;AAEJ,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;;AAGvD,IAAA,WAAW,CAAC,EAAE,EAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACpD;;AAEJ,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;AAEtB;;AAEG;IACH,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC;;AAEnF;;;AAGG;AACH,IAAA,iBAAiB,CAAC,EAAE,EAAA;QAChB,MAAM,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;AACpD,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,SAAS,KAAK,IAAI;;IAE5H,iBAAiB,GAAA;QACb,IAAI,CAAC,YAAY,EAAE;;IAEvB,MAAM,GAAA;AACF,QAAA,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;;;;;;;;","x_google_ignoreList":[0,1]}

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

@@ -0,0 +1,191 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+import { K as KeyboardCode } from './index-B2-dCTD2.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 === 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(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }; }
+};
+ZMenuSection.style = stylesCss;
+
+export { ZMenuSection as z_menu_section };
+//# sourceMappingURL=z-menu-section.entry.js.map
+
+//# sourceMappingURL=z-menu-section.entry.js.map