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

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { KeyboardCode } from "../../beans";
 /**
  * A component to create submenus inside the ZMenu.
  * @slot - Label of the menu section.
@@ -6,10 +7,90 @@ import { Host, h } from "@stencil/core";
  */
 export class ZMenuSection {
     constructor() {
+        this.currentIndex = -1;
+        this.currentCanvasOpenStatus = false;
         this.active = undefined;
         this.open = undefined;
         this.hasContent = undefined;
     }
+    canvasOpenStatusChanged(e) {
+        this.currentCanvasOpenStatus = e.detail;
+    }
+    handleKeyDown(e) {
+        if (e.code === KeyboardCode.ENTER) {
+            return;
+        }
+        if (this.open && !this.currentCanvasOpenStatus) {
+            this.handleNavigationSideArrow(e);
+        }
+        this.handleArrowsNav(e);
+    }
+    handleNavigationSideArrow(e) {
+        if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {
+            return;
+        }
+        if (e.code === KeyboardCode.ARROW_RIGHT) {
+            const nextElement = this.hostElement.parentElement.nextElementSibling;
+            if (nextElement) {
+                const menuButton = nextElement.shadowRoot.querySelector(".menu-label");
+                console.log(this.hostElement.parentElement);
+                menuButton.focus();
+            }
+            this.open = false;
+            nextElement.setAttribute("open", "true");
+        }
+        else if (e.code === KeyboardCode.ARROW_LEFT) {
+            const prevElement = this.hostElement.parentElement.previousElementSibling;
+            if (prevElement) {
+                const menuButton = prevElement.shadowRoot.querySelector(".menu-label");
+                menuButton.focus();
+            }
+            prevElement.setAttribute("open", "true");
+            this.open = false;
+        }
+    }
+    handleArrowsNav(e) {
+        const menuItems = Array.from(this.hostElement.querySelectorAll('[slot="section"]'));
+        if (this.open) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {
+                let nextFocusableItem;
+                // INFO: reset focus on all menu items
+                menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
+                if (e.code === KeyboardCode.ARROW_DOWN) {
+                    nextFocusableItem = this.getNextItem(menuItems, 1);
+                }
+                else if (e.code === KeyboardCode.ARROW_UP) {
+                    nextFocusableItem = this.getNextItem(menuItems, -1);
+                }
+                if (nextFocusableItem) {
+                    nextFocusableItem.setAttribute("tabindex", "0");
+                    nextFocusableItem.focus();
+                }
+            }
+            else if (e.code === KeyboardCode.ESC) {
+                this.focusToParentAndCloseMenu();
+            }
+            else if (e.shiftKey && e.code === KeyboardCode.TAB) {
+                this.focusToParentAndCloseMenu();
+            }
+        }
+    }
+    getNextItem(menuItems, direction) {
+        if (this.currentIndex === -1) {
+            this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;
+            return menuItems[this.currentIndex];
+        }
+        this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;
+        return menuItems[this.currentIndex];
+    }
+    focusToParentAndCloseMenu() {
+        const menuButton = this.hostElement.shadowRoot.querySelector("button");
+        menuButton.focus();
+        this.currentIndex = -1;
+        this.open = false;
+    }
     toggle() {
         if (!this.hasContent) {
             return;
@@ -29,7 +110,7 @@ export class ZMenuSection {
      * Check if some content slot is set.
      */
     checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+        this.hasContent = this.hostElement.querySelectorAll('[slot="section"]').length > 0;
     }
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
@@ -39,11 +120,18 @@ export class ZMenuSection {
         const labelElement = ev.target.assignedElements()[0];
         labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
     }
+    focusFirstSectionItemOnKeyUp() {
+        const firstElement = this.hostElement.querySelectorAll('[slot="section"]')[0];
+        if (firstElement) {
+            firstElement.focus();
+            this.currentIndex = 0;
+        }
+    }
     componentWillLoad() {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '7261f7c68d7e097fe0a70e6f8c0b513958605dbd', role: "menu", open: this.open }, h("button", { key: '74fd64a789a7f9ea93ec118dc2978809e70c5312', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'b8e32ae6fc27571d5318eb71ceddea6d87ca3ffa', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '5500c12ff4f374564c03e887a69ceba287a8d577', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'ff66588a6fa8fe8968ec9d7e12d6fac3bb1bb45f', class: "items" }, h("slot", { key: 'de19fdba5a89f0a048b6f8e824feacaa80bbe3fc', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '1370ec8c9379a204ed8bfb387ef53f6ad976ce0f', role: "menu", open: this.open }, h("button", { key: '4a474f4f47b9f72f3621a4c1f043f287ebf98d66', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this), onKeyUp: this.focusFirstSectionItemOnKeyUp.bind(this) }, h("slot", { key: '1332d96212421fd936b1ee1e295c856219bfb1cc', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '04b94f8f22bd56d16f7cdb3f394024c5726435e5', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '01353c9f9b57cce04361849e79c3264f5f106472', class: "items" }, h("slot", { key: '29379c69dff6189d4226246eb859dad6c67ca0ec', name: "section", onSlotchange: this.checkContent.bind(this) })))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +208,18 @@ export class ZMenuSection {
     static get elementRef() { return "hostElement"; }
     static get listeners() {
         return [{
+                "name": "canvasOpenStatusChanged",
+                "method": "canvasOpenStatusChanged",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "click",
                 "method": "handleClick",
                 "target": "document",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEpG;;;;GAIG;AAMH,MAAM,OAAO,YAAY;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACtD,CAAC;IAED,wEAAwE;IAExE,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClF,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;gBAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACxE;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,OAAO;gBAChB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzC;;;;GAIG;AAMH,MAAM,OAAO,YAAY;;QAqBf,iBAAY,GAAG,CAAC,CAAC,CAAC;QAElB,4BAAuB,GAAG,KAAK,CAAC;;;;;IAGxC,uBAAuB,CAAC,CAAc;QACpC,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC1C,CAAC;IAGD,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/C,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;IAEO,yBAAyB,CAAC,CAAgB;QAChD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YAC9E,OAAO;QACT,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,WAAW,EAAE,CAAC;YACxC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC;YACtE,IAAI,WAAW,EAAE,CAAC;gBAChB,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;gBACtF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;gBAC5C,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;YACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC;aAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC;YAC1E,IAAI,WAAW,EAAE,CAAC;gBAChB,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;gBACtF,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;YACD,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAgB;QACtC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAkB,CAAC;QACrG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC;gBAC3E,IAAI,iBAA8B,CAAC;gBACnC,sCAAsC;gBACtC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;gBAE9E,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;oBACvC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;gBACrD,CAAC;qBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC;oBAC5C,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;gBACtD,CAAC;gBAED,IAAI,iBAAiB,EAAE,CAAC;oBACtB,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;oBAChD,iBAAiB,CAAC,KAAK,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;gBACvC,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACnC,CAAC;iBAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;gBACrD,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,SAAwB,EAAE,SAAiB;QAC7D,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YAE/D,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC;QAE1F,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtC,CAAC;IAEO,yBAAyB;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC;QACtF,UAAU,CAAC,KAAK,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACtD,CAAC;IAED,wEAAwE;IAExE,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACrF,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;IAC9D,CAAC;IAEO,4BAA4B;QAClC,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAgB,CAAC;QAC7F,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC;gBAErD,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACxE;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,OAAO;gBAChB,6DACE,IAAI,EAAC,SAAS,EACd,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private currentIndex = -1;\n\n  private currentCanvasOpenStatus = false;\n\n  @Listen(\"canvasOpenStatusChanged\", {target: \"document\"})\n  canvasOpenStatusChanged(e: CustomEvent): void {\n    this.currentCanvasOpenStatus = e.detail;\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ENTER) {\n      return;\n    }\n\n    if (this.open && !this.currentCanvasOpenStatus) {\n      this.handleNavigationSideArrow(e);\n    }\n\n    this.handleArrowsNav(e);\n  }\n\n  private handleNavigationSideArrow(e: KeyboardEvent): void {\n    if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {\n      return;\n    }\n    if (e.code === KeyboardCode.ARROW_RIGHT) {\n      const nextElement = this.hostElement.parentElement.nextElementSibling;\n      if (nextElement) {\n        const menuButton = nextElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        console.log(this.hostElement.parentElement);\n        menuButton.focus();\n      }\n      this.open = false;\n      nextElement.setAttribute(\"open\", \"true\");\n    } else if (e.code === KeyboardCode.ARROW_LEFT) {\n      const prevElement = this.hostElement.parentElement.previousElementSibling;\n      if (prevElement) {\n        const menuButton = prevElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        menuButton.focus();\n      }\n      prevElement.setAttribute(\"open\", \"true\");\n      this.open = false;\n    }\n  }\n\n  private handleArrowsNav(e: KeyboardEvent): void {\n    const menuItems = Array.from(this.hostElement.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    if (this.open) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {\n        let nextFocusableItem: HTMLElement;\n        // INFO: reset focus on all menu items\n        menuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n\n        if (e.code === KeyboardCode.ARROW_DOWN) {\n          nextFocusableItem = this.getNextItem(menuItems, 1);\n        } else if (e.code === KeyboardCode.ARROW_UP) {\n          nextFocusableItem = this.getNextItem(menuItems, -1);\n        }\n\n        if (nextFocusableItem) {\n          nextFocusableItem.setAttribute(\"tabindex\", \"0\");\n          nextFocusableItem.focus();\n        }\n      } else if (e.code === KeyboardCode.ESC) {\n        this.focusToParentAndCloseMenu();\n      } else if (e.shiftKey && e.code === KeyboardCode.TAB) {\n        this.focusToParentAndCloseMenu();\n      }\n    }\n  }\n\n  private getNextItem(menuItems: HTMLElement[], direction: number): HTMLElement {\n    if (this.currentIndex === -1) {\n      this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;\n\n      return menuItems[this.currentIndex];\n    }\n\n    this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;\n\n    return menuItems[this.currentIndex];\n  }\n\n  private focusToParentAndCloseMenu(): void {\n    const menuButton = this.hostElement.shadowRoot.querySelector(\"button\") as HTMLElement;\n    menuButton.focus();\n    this.currentIndex = -1;\n    this.open = false;\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"section\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  private focusFirstSectionItemOnKeyUp(): void {\n    const firstElement = this.hostElement.querySelectorAll('[slot=\"section\"]')[0] as HTMLElement;\n    if (firstElement) {\n      firstElement.focus();\n      this.currentIndex = 0;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n          onKeyUp={this.focusFirstSectionItemOnKeyUp.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"section\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-menu-section/index.spec.js

@@ -6,9 +6,9 @@ describe("Suite test ZMenuSection", () => {
             components: [ZMenuSection],
             html: `<z-menu-section>
         <h3>Menu section label</h3>
-        <a href="#" slot="item">Item 1</a>
-        <a href="#" slot="item">Item 2</a>
-        <a href="#" slot="item">Item 3</a>
+        <a href="#" slot="section">Item 1</a>
+        <a href="#" slot="section">Item 2</a>
+        <a href="#" slot="section">Item 3</a>
       </z-menu-section>`,
         });
         expect(page.root).toEqualHtml(`
@@ -20,16 +20,16 @@ describe("Suite test ZMenuSection", () => {
           </button>
         </mock:shadow-root>
         <h3>Menu section label</h3>
-        <a href="#" slot="item">Item 1</a>
-        <a href="#" slot="item">Item 2</a>
-        <a href="#" slot="item">Item 3</a>
+        <a href="#" slot="section">Item 1</a>
+        <a href="#" slot="section">Item 2</a>
+        <a href="#" slot="section">Item 3</a>
     </z-menu-section>`);
     });
     it("Test ZMenuSection toggle events", async () => {
         const page = await newSpecPage({
             components: [ZMenuSection],
             html: `<z-menu-section>
-        <div slot="item">item</div>
+        <div slot="section">item</div>
       </z-menu-section>`,
         });
         const menu = page.rootInstance;

package/dist/collection/components/z-menu-section/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;;;;wBAKY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;sBAYZ,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;wBAEY;SACnB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZMenuSection} from \"./index\";\n\ndescribe(\"Suite test ZMenuSection\", () => {\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <h3>Menu section label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n      </z-menu-section>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-section role=\"menu\">\n        <mock:shadow-root>\n          <button aria-pressed=\"false\" class=\"label\">\n            <slot></slot>\n            <z-icon name=\"chevron-down\"></z-icon>\n          </button>\n        </mock:shadow-root>\n        <h3>Menu section label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n    </z-menu-section>`);\n  });\n\n  it(\"Test ZMenuSection toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <div slot=\"item\">item</div>\n      </z-menu-section>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;;;;wBAKY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;sBAYZ,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;wBAEY;SACnB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZMenuSection} from \"./index\";\n\ndescribe(\"Suite test ZMenuSection\", () => {\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <h3>Menu section label</h3>\n        <a href=\"#\" slot=\"section\">Item 1</a>\n        <a href=\"#\" slot=\"section\">Item 2</a>\n        <a href=\"#\" slot=\"section\">Item 3</a>\n      </z-menu-section>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-section role=\"menu\">\n        <mock:shadow-root>\n          <button aria-pressed=\"false\" class=\"label\">\n            <slot></slot>\n            <z-icon name=\"chevron-down\"></z-icon>\n          </button>\n        </mock:shadow-root>\n        <h3>Menu section label</h3>\n        <a href=\"#\" slot=\"section\">Item 1</a>\n        <a href=\"#\" slot=\"section\">Item 2</a>\n        <a href=\"#\" slot=\"section\">Item 3</a>\n    </z-menu-section>`);\n  });\n\n  it(\"Test ZMenuSection toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <div slot=\"section\">item</div>\n      </z-menu-section>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/z-menu-section/index.stories.js

@@ -14,17 +14,17 @@ export const WithItems = {
       <h3>Label</h3>
       <a
         href=""
-        slot="item"
+        slot="section"
         >Item 1</a
       >
       <a
         href=""
-        slot="item"
+        slot="section"
         >Item 2</a
       >
       <a
         href=""
-        slot="item"
+        slot="seection"
         active
         >Item 3 - active</a
       >

package/dist/collection/components/z-menu-section/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;GAGtC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSection} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZMenu/ZMenuSection\",\n  component: \"z-menu-section\",\n  args: {\n    active: false,\n  },\n} satisfies Meta<ZMenuSection>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSection>;\n\nexport const WithItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        active\n        >Item 3 - active</a\n      >\n    </z-menu-section>\n  `,\n} satisfies Story;\n\nexport const WithoutItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n    </z-menu-section>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;GAGtC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSection} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZMenu/ZMenuSection\",\n  component: \"z-menu-section\",\n  args: {\n    active: false,\n  },\n} satisfies Meta<ZMenuSection>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSection>;\n\nexport const WithItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 2</a\n      >\n      <a\n        href=\"\"\n        slot=\"seection\"\n        active\n        >Item 3 - active</a\n      >\n    </z-menu-section>\n  `,\n} satisfies Story;\n\nexport const WithoutItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n    </z-menu-section>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-menu-section/styles.css

@@ -101,7 +101,7 @@ when placed below the real text using `flex-direction: column`. */
   padding-bottom: calc(var(--space-unit) * 1.5);
 }
 
-.items > ::slotted([slot="item"]) {
+.items > ::slotted([slot="section"]) {
   display: inline-flex;
   padding: calc(var(--space-unit) / 2);
   margin: 0;
@@ -110,14 +110,14 @@ when placed below the real text using `flex-direction: column`. */
   outline: none;
 }
 
-.items > ::slotted([slot="item"]:focus:focus-visible) {
+.items > ::slotted([slot="section"]:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
   color: var(--color-secondary01);
 }
 
-.items > ::slotted([slot="item"]:hover),
-.items > ::slotted([slot="item"]:focus:focus-visible),
-.items > ::slotted([slot="item"][active]) {
+.items > ::slotted([slot="section"]:hover),
+.items > ::slotted([slot="section"]:focus:focus-visible),
+.items > ::slotted([slot="section"][active]) {
   color: var(--color-secondary01);
   font-weight: var(--font-bd);
 }

package/dist/collection/components/z-modal/index.js

@@ -111,16 +111,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '15eba99f071f5b0b57743e44b916c4ea6970f07a', class: {
+        return (h("dialog", { key: 'a1e93e72fa4aa80d94192e1fb18bca7a50ad0aa3', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '82ac5037fd70c3661dce7bd34300dd249aa1e052', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '5346f87a3812911b434a2b9b95691e86ecaeb853', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '4885ed46b798305fc01456487c500aa89fbced3e', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '87d47369f0bb766cead5aee4889b0f7fbf96ded3' }, this.modaltitle && h("h1", { key: '79974d32cd15dc7c423f7cdd570f7eeb88c66b3f', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'da3e80cba34e51cf4c635839e7e989872144625f', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'a4fea6c1784848e10390553f879873a7140d87d3', class: {
+            }, id: this.modalid }, h("header", { key: 'ae7f3aa101e7a55276c4a07a58fd126da494ba83', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '6938cbb56171186773c6b2d14323bde7d2f40761' }, this.modaltitle && h("h1", { key: '0cc3ee46b3598ec91465c1f8668b399c0c32034f', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '453e07da973d95eed5e66c4768c86cfe47cadbf3', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'bb5a5facd7b854e172a4f0502f97a6fffc03552a', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '2ff2465682aeb86fac11b7dd3edd788946295bc7', name: "modalContent" }))), h("div", { key: '1ad45c5b879fd7ae2d3d3560e7ad4199e8c0268d', class: {
+            }, id: "modal-content" }, h("slot", { key: '3c2b58be34c464e06065258e710853e716d415df', name: "modalContent" }))), h("div", { key: '2b0e3e016ba08aeb65307ead19d9ca2ca408a85d', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-navigation-tabs/index.js

@@ -204,10 +204,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '0dfbe739542add5d05e82462f9ca115734f75ab7', class: {
+        return (h(Host, { key: '16294d384c48cb2380178445630240fcc6f085cc', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'a679c4104ef79c5245a205e634872992ad6b7702', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '13b64410e78d66d28b9a2a870535a393b5361f06', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ae01aa47ea6620209017d612b3b6e1b0664efcba', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'bd1f92fef8fde67a415964efd61b89d9895192a7' })), h("button", { key: '0b7a9b4ecf5773f576f25468a8f64118b57c4480', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '91686040ca32ff9136c6a96ce70ed3ca20a6b753', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '98eae832700569a7f2539aa51cee7c07ac2f3815', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '21ddd942ac5c9a7cfdf53e1c31788268b7932f03', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'd2582f956ec466d672bdf43494f96d1b2ee73485', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '3cfbaf5ef02b8964b1b497deef2b8e95b6ef94e0' })), h("button", { key: '6cc204b98252d19cdd79bdf2f9f1824c2f69d559', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '7bc36b5cdb865c759e0bb37362a820557e079be4', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-notification/index.js

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '49e877c8628f367adc596b40d5f12d5e66f78ed0' }, this.contenticonname && (h("z-icon", { key: '56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea', class: "content-container" }, h("div", { key: '2637553cf2f72a948014110e96559d15c45513fa', class: "content-text" }, h("slot", { key: '1e60cbb429a9620b88d7cb90df90874d3e454f48' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '844e0ba5cef8b13f9d91d5c09472893de5127cc4', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '8761fc65bd1b44b38a219e80d8f12b10a898cefe', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '7bd949a2c0abf7431765f28542443c9110097ab3', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'bf9ead754226002371eb0669770d24c0230bcf92' }, this.contenticonname && (h("z-icon", { key: '322709ad12acd8a885214809012178649b172bd8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'd68ea8f5984fee4d906a05f93f9cf3ef4dae932c', class: "content-container" }, h("div", { key: 'd67f12dcbcf7075cbc0e111db260dce207e3411a', class: "content-text" }, h("slot", { key: '6e23a5b287e328657e1848dc1944b3a1ddc065be' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '68da7a70a5dec9113c021c915594c2e8424c21be', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '342853024b8a9bfce814282471d8d8e9e9f6b522', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'ce20a4b279bc3cb3d4b0dd7bf4c61fe9b3837556', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-offcanvas/index.js

@@ -25,7 +25,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '69d5f44707b4971fd19969ed8ff8b44cc5e8dad2', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '7b4045fe3c4bbc5dcd298683d445aa4800825fd7', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '90f6a83e5710059f24a4f99aea8e2f48786fb74f', role: "presentation", class: "canvas-content" }, h("slot", { key: 'ae14e2f2ea5771bb97dd58a986cde3b31e07c77f', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: 'd9bc6afc4d788a7b0011494b5951294a08ab8812', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '44382bb203dff02051742ab75321405ea88a40ce', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'a3e8b0892f68a7123535e7a15f56909e7e2fc971', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '5ccd9e46853a37b08f1ba3f6e8350037777eb9d2', role: "presentation", class: "canvas-content" }, h("slot", { key: '033b592b1d74f97fc46e7f93ae7e1a88e44f328d', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: '30719eb0832c6dd4f8d49bae817514414a64f794', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-panel-elem/index.js

@@ -16,11 +16,11 @@ export class ZPanelElem {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: 'bbae0bd29656529b2019a66668d6dfbf66b9b0a1', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '620411ca326a5975d3cc21549cfc51a7d7eea519', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '79a77af32280e5f1e58f794f07c1365da1fa30a7', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '67ad3e575caab6d93bf8d0a17de138ae59fffb35', class: "panel-elem-link" }, h("a", { key: 'f79f44642cbceefd484bbe63e4af6ea03d197fec', class: {
+        return (h("div", { key: '7364ce8b1efc2b30e792693a93f41834a65dd7c6', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '815580b59284ea71764fd9f18b98be4ab69ff1e5', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'a736866758f35a8284310a5bc81d08f166aec78c', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '1d154781e2bf59a9a6b1c8ddff324e035095c5ec', class: "panel-elem-link" }, h("a", { key: '3531d557c2145fa3fb96f13c2952d4c2c6e366b8', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '0f112223c94273b9baa33da513c60a51dba33e7b', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '4ae5da7e8a2a92be4c801790a90b6907e7ffe6b3', class: "panel-elem-desc" }, h("slot", { key: '4c4e6872a2fe1cb443002a004b5aa1ce18a8f96f', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'dd6a4750589fe913eeb211025beebb3da7cfc8fd', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: 'b2cbea114008c9f5c6a560c0e52f60ff9e6f7722', class: "panel-elem-desc" }, h("slot", { key: '73a350ea0ca8bc51e56a5a2879651883669a79b4', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-popover/index.js

@@ -301,7 +301,7 @@ export class ZPopover {
         this.onOpen();
     }
     render() {
-        return h("slot", { key: '06ccad911be5d149ace59bb4cd239648a9eeb5da' });
+        return h("slot", { key: '3c34ab8733a93885e6e2a9fd8b0f3607cafca402' });
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-searchbar/index.js

@@ -223,7 +223,7 @@ export class ZSearchbar {
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: '9b84ef94161485bb7213116bbab6273d33e8e5cd', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '59f83333716c7914ad437f0c494916f8ba8c0240', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: 'af318a5b693c0048c368776744d9090bdebe6c8c', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'aba6d0bd87ba308a8f664ca5f86e5d0b96c734af', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-section-title/index.js

@@ -18,7 +18,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'aae886e9941d8767af39a351671a7aaaf844176a' }, h("slot", { key: '08a1466c1d96e8f2dc754d3566bc2567bfd26dfd', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'ab9e30f7c179c37482d84db65729a3fa78fd9e06', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '4cad003315cf3df2e0dd6a7391035fd8e056e8b0', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '6e99ca4877aba8c76e4484be6fced23aa5b8e165', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '5718215a4b4b42735d8045c3de73998189f38bf7' }, h("slot", { key: '99e51ba27a27a3100ae7fc88df7537624f8682bb', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'd62ca69ea2ecdbb75ef8c034ca6beffc6041ede0', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'cb8a5a51554a90e8749d664f3d6d19af67e5afeb', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: 'bdf9d80c19154f8f89947d277f6a7234986b605e', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-select/index.js

@@ -314,7 +314,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (h("div", { key: '9746ad38f69cb9f568cd1ef2e36937ae0f13bfed', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '7cff5f68badfbedf3c8f6e9a5d8bbdaa89ed8a98', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: 'ae03554e1bb63eebca8f51d3cae23b885ee79428', class: {
+        return (h(Host, { key: '06ee6c9f26ddc014c08c34bb81ddd990aa7c0282', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/collection/components/z-stepper/index.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: '80b89caa35e9adb82ad413783b16eae491a26f48', role: "list" }, h("slot", { key: '140e35a55637873b1eee70d5a7a8c2b03af3eed7' })));
+        return (h(Host, { key: '5fbfa9cc1b0e6f672f054427828d56560059c160', role: "list" }, h("slot", { key: 'd2c5abd53c5c9e8569696aafb6101b7878e1a10c' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-stepper-item/index.js

@@ -15,7 +15,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: 'd760ab7aef2991d5ffc8754e4e03263c4c476a6d', role: "listitem" }, h("button", Object.assign({ key: '7fca3fa04459cdea8813db6382726cc601e4e3f8', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'c727b40105af8807c1b7fddf19243147bc2acdab', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'f8d063aeeac60eb9adeaf65774b60ff07bb1c9ba' }, h("slot", { key: 'b0bd5470c318acc8037abb11b974a4cc1f057fd8' })))));
+        return (h(Host, { key: '0994d3d3a8e89f1a93f17cb71baff1c1581bf7e4', role: "listitem" }, h("button", Object.assign({ key: '14becf7e97de2bd909f61cc3aa09b64b45f7ab30', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '69f3cd00d2eeaafa65037d939218b2665d34b62b', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '8d2ed47daa09ae26562bac42d262ba7c4c5320a4' }, h("slot", { key: '48004d92935fa78bd48df08a9eb3db11662a171b' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-tag/index.js

@@ -11,9 +11,9 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: '2b457c2a7462afa36499c0991a32436751b2b6d1', class: {
+        return (h(Host, { key: 'dab9210f7c3cfc75d0c009f4bc8a1841bdbc371b', class: {
                 expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: '3f6b461a15c9221c658221894f62895bdbd8e108', name: this.icon }), h("div", { key: '0bb11571e1f99587a62e9d345fc731bf795656e5' }, h("slot", { key: '46ccbc8282a3611e7a3188651bbe96df1aacb5b2' }))));
+            } }, this.icon && h("z-icon", { key: 'e7dc02062a4c525977b3734540dd1c2f4b5375a3', name: this.icon }), h("div", { key: '9b72b749cddf039f2c92345e9b02061c322c3e58' }, h("slot", { key: 'df6fe3eaea544ad012168bce4049d0d7fa239944' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-toast-notification/index.js

@@ -171,7 +171,7 @@ export class ZToastNotification {
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: 'bf20c69f253b702092fe078443eedb9e86fe223a', style: {
+        return (h(Host, { key: '3553c94f59787f1fdbb0ea349578c61ebbda1c21', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/collection/components/z-toast-notification-list/index.js

@@ -36,7 +36,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: 'ead27e0dd8742e6008aa4fc6ffa4129cae868af8', name: "toasts" });
+        return h("slot", { key: 'c358a615637656bb5b4cd475af919c495a278da5', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-button/index.js

@@ -15,10 +15,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '809ca74c63187ce21d411516d595bda6ed5b082b', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: 'a0335db670898e98b232857bd9f878f9f6bceaa0', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '66af2faa257599724f2506230eae3c0c612c0700', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '353df156fc85eb6824152ec2a5578426263627b7', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-switch/index.js

@@ -22,14 +22,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '1435f2d332c0a6ba1845640836e129eee281f1b0' }, h("input", { key: 'baea7ca82f300316bd418cadfc82718da7dc2f18', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '510a2f196cd5f67af2602c5c6e948e2f63395f6f', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'cd90ad41b289f192e485c0cce90ae2a8057ddd7d' }, h("input", { key: '5cc5e59f8cc0cc0548b072e41149cf7dc31bbcd8', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '9774cc39f7ebe6bd02c5ce0e05d1b53075f4e426', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'e32ef84026463fb9a99bcb303d0097ffed6ee994' }, h("slot", { key: '07344703d351893b5ab39e4e4a617e4038f1042a' })), h("span", { key: 'cec720a047a8fbc016048e9139639e04233f8f24', class: {
+            } }, h("span", { key: '074941585b8a5862f04bd2d404ab74c86bcaa250' }, h("slot", { key: '7fe6486df9479e76a7783646aed3e620f7f1d0f2' })), h("span", { key: 'd4bf4b3febdab1bf8e88c12e1c7aa421b020997c', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '4639384b98d6de8009678681d71d1097b2c687e6', class: "circle" }, this.checked && (h("z-icon", { key: 'd34f45d60cece7a6969be1a03ad51be4ab0b0f04', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'c46c06ff10a35060945b9298a551cf66508a5450', class: "circle" }, this.checked && (h("z-icon", { key: '7ed667dc510d42e3e001ad8cb82b5c5f9d012583', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-tooltip/index.js

@@ -20,7 +20,7 @@ export class ZTooltip {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'ed88c22d97e3e84963b0d3b7c6ee03d401aa5ce8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '6b3cd438f4ab6cfb3459f67f9e8ea81b554a3ccb' })));
+        return (h("z-popover", { key: '2df25a3fa481ccc045d4a49f464c06d9d9c3e555', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '136991637393809eba3d6c6fad0f44209b8c8960' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-visually-hidden/index.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class ZVisuallyHidden {
     render() {
-        return h("slot", { key: 'ae350dcba13aae6abc2f746555896c973baea496' });
+        return h("slot", { key: 'a99984e228cda9c10f7f96987a24ea9e1d695951' });
     }
     static get is() { return "z-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -33,7 +33,7 @@ export class ZMyzCardComponent {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: '254e3f158fbaa9eae4c801cd491abe9227fdd1fb', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '52145b4e99ae3616f767760faf97433d1e3047d8' })));
+        return (h("div", { key: '0513da0ab64e0db2c6f075c435ef3a9249501609', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '3b208fff53e518e4e291e2aa3c0b70d939419690' })));
     }
     static get is() { return "z-myz-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -46,7 +46,7 @@ export class ZMyzCardAlert {
         }
     }
     render() {
-        return (h("div", { key: 'ee3f657b10628aa1d8b655fbad1f7f2d55d0cfcc', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'f90c4944719e9d9842a159727be73e7d877aca9a', type: this.getAlertType() }, h("div", { key: '414b27076e7e807f79987b8d1bf57724ff7aba21', class: "relative-container" }, h("z-icon", { key: '4a17b0046552751eb1b4f78b666038a34950f669', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'dc7059e99b1cb56c47f0ce112f2dcabf0cdafb47', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'fe84b58a497310f2936b14fd06808717a572feb5', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: 'e488b304fcdd145b3ce0ba375d36a997a646eec9', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '256f5d68375a9c8c187785cfdbd6272b8cc449f9', type: this.getAlertType() }, h("div", { key: '9f3d7e43b28f3fc92bf1e627475af9a9f0464799', class: "relative-container" }, h("z-icon", { key: '6c9e26abc686e0d6020d7c6398a8575e6e8ac543', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'b4b997286c4e5250c5b856f0d375ad49162c92df', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '18020fe9e8180577a168a25c0ba17464cedf70c0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardBody {
     render() {
-        return (h("div", { key: '6eaaf5ff0351e8844d3aa616e473712dafcff7fd' }, h("slot", { key: '2984020a0568593cf9dd47aac83c4890c53d7460', name: "alert" }), h("slot", { key: '85e70e9dcd8068d00bdb40e71acaffae88326225', name: "cover" })));
+        return (h("div", { key: 'dccc73da3128968555dc65848994a4f11ee6cea4' }, h("slot", { key: 'bc8948b5bd03b6c49db50a8aa0d46b1078ca328e', name: "alert" }), h("slot", { key: '747327ca24dba0f35ec49d1f85600a5eada44c9e', name: "cover" })));
     }
     static get is() { return "z-myz-card-body"; }
     static get encapsulation() { return "shadow"; }