@zanichelli/albe-web-components 16.3.0 → 16.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,KAAK;KACvB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6C1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,UAAU,CAAC;SACtB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI;yBACK,IAAI,CAAC,eAAe;;;;;;;;GAQ1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenu} from \".\";\nimport \"../z-menu-section/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"Zmenu/ZMenu\",\n  component: \"z-menu\",\n  args: {\n    active: false,\n    floating: true,\n    verticalContext: false,\n  },\n} satisfies Meta<ZMenu>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenu>;\n\nexport const FloatingContentLayout = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <h3>Menu 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      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const WithHeader = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <img\n        slot=\"header\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h4 slot=\"header\">Menu header</h4>\n      <h3>Menu 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      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 4</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const ActiveWithoutItems = {\n  parameters: {\n    controls: {\n      exclude: [\"floating\"],\n    },\n  },\n  render: (args) => html`\n    <z-menu\n      .active=${true}\n      .verticalContext=${args.verticalContext}\n    >\n      <a\n        href=\"https://cataas.com/cat/gif\"\n        target=\"_blank\"\n        >Click me</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-menu/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;KACf;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6C5B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,UAAU,CAAC;SACtB;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;sBACE,IAAI;;;;;;;GAOvB;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenu} from \".\";\nimport \"../z-menu-section/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"Zmenu/ZMenu\",\n  component: \"z-menu\",\n  args: {\n    active: false,\n    floating: true,\n  },\n} satisfies Meta<ZMenu>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenu>;\n\nexport const FloatingContentLayout = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n    >\n      <h3>Menu 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      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const WithHeader = {\n  render: (args) => html`\n    <z-menu\n      .active=${args.active}\n      .floating=${args.floating}\n    >\n      <img\n        slot=\"header\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h4 slot=\"header\">Menu header</h4>\n      <h3>Menu 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      <z-menu-section slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 4</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n\nexport const ActiveWithoutItems = {\n  parameters: {\n    controls: {\n      exclude: [\"floating\"],\n    },\n  },\n  render: () => html`\n    <z-menu .active=${true}>\n      <a\n        href=\"https://cataas.com/cat/gif\"\n        target=\"_blank\"\n        >Click me</a\n      >\n    </z-menu>\n  `,\n} satisfies Story;\n"]}

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

@@ -6,12 +6,12 @@
 }
 
 :host {
+  --z-menu-label-color: ;
+
   position: relative;
   display: inline-flex;
+  height: fit-content;
   flex-direction: column;
-  flex-shrink: 0;
-
-  --z-menu-label-color: var(--color-default-text);
 }
 
 ::slotted(a) {
@@ -25,6 +25,7 @@
 }
 
 .menu-label {
+  position: relative;
   width: 100%;
   padding: 0;
   border: 0;
@@ -32,7 +33,6 @@
   background: transparent;
   border-radius: 0;
   color: inherit;
-  outline: none;
   text-align: left;
 }
 
@@ -41,26 +41,19 @@
   align-items: center;
 }
 
-.menu-wrapper:focus-visible,
-.menu-label-content:focus-visible,
-button:focus-visible {
-  outline: none;
-}
-
 button.menu-label {
   cursor: pointer;
 }
 
 .menu-label:focus-within {
-  z-index: 1;
   box-shadow: var(--shadow-focus-primary);
 }
 
 .menu-label .menu-label-content {
   position: relative;
   display: flex;
-  height: 30px;
   align-items: center;
+  border-bottom: var(--border-size-large) solid transparent;
 }
 
 :host(:is([active], [open])) .menu-label-content,
@@ -76,32 +69,32 @@ button.menu-label {
   letter-spacing: normal;
 }
 
-:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {
-  box-shadow: none !important;
+:host([vertical-context]) .menu-label-content {
+  padding: var(--space-unit) 0;
+  border-width: var(--border-size-small);
+  border-color: var(--color-surface03);
 }
 
-/* border */
-: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 ::slotted(*) {
+  padding: 0;
 }
 
-: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,
+.menu-label .menu-label-content:hover,
+.menu-label:focus-within .menu-label-content {
+  border-color: var(--color-secondary01);
 }
 
-: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 {
+:host([vertical-context]:is([active], [open])) .menu-label .menu-label-content::after,
+:host([vertical-context]) .menu-label:hover::after,
+:host([vertical-context]) .menu-label:focus-within .menu-label-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   height: var(--border-size-large);
   background-color: var(--color-secondary01);
+  content: "";
 }
 
 /* Prevents layout shifts on font-weight changes.
@@ -110,7 +103,7 @@ so the needed space is correctly calculated before any hover/active state change
 font-weight of the real text.
 The hidden text has an height of 0px so it can expand the width without changing the height
 when placed below the real text using `flex-direction: column`. */
-::slotted([data-text])::after {
+::slotted([data-text]:not([slot]))::after {
   height: 0;
   content: attr(data-text);
   content: attr(data-text) / "";
@@ -122,12 +115,12 @@ when placed below the real text using `flex-direction: column`. */
 }
 
 @media speech {
-  ::slotted([data-text])::after {
+  ::slotted([data-text]:not([slot]))::after {
     display: none;
   }
 }
 
-::slotted([data-text]) {
+::slotted([data-text]:not([slot])) {
   display: inline-flex;
   flex-direction: column;
 }
@@ -136,18 +129,14 @@ when placed below the real text using `flex-direction: column`. */
   display: inline-flex;
   width: 100%;
   min-width: fit-content;
+  padding-bottom: 2px;
   margin: 0;
   appearance: none;
-  color: var(--z-menu-label-color);
+  color: var(--z-menu-label-color, var(--color-default-text));
   font-family: var(--font-family-sans);
   font-size: var(--font-size-3);
   font-weight: inherit;
-  outline: none;
-}
-
-.menu-label .menu-label-content ::slotted(*),
-.menu-label .menu-label-content z-icon {
-  padding: var(--space-unit) 0;
+  line-height: 1.5;
 }
 
 .menu-label .menu-label-content z-icon {
@@ -163,14 +152,14 @@ when placed below the real text using `flex-direction: column`. */
   display: none;
 }
 
-:host([floating]) .content {
+:host([floating]:not([vertical-context])) .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);
+  padding: 0 calc(var(--space-unit) * 2);
   box-shadow: var(--shadow-2);
 }
 
@@ -209,8 +198,7 @@ when placed below the real text using `flex-direction: column`. */
   width: 100%;
   margin: 0;
   font-size: var(--font-size-3);
-  line-height: 1.25;
-  outline: none;
+  line-height: 1.5;
 }
 
 .items > ::slotted([slot="item"]:focus:focus-visible) {
@@ -218,8 +206,12 @@ when placed below the real text using `flex-direction: column`. */
 }
 
 .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);
+  padding: var(--space-unit) 0;
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
+}
+
+:host(:not([vertical-context])) .items > ::slotted([slot="item"]:not(z-menu-section):last-of-type) {
+  border-bottom: 0;
 }
 
 .items > ::slotted([slot="item"]:hover),

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

@@ -6,111 +6,29 @@ import { KeyboardCode } from "../../beans";
  * @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.
  */
 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;
+    get focusableItem() {
+        return this.items.find(({ tabIndex }) => tabIndex === 0);
     }
     toggle() {
-        if (!this.hasContent) {
+        if (!this.hasItems) {
             return;
         }
         this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
+        this.setFocus();
     }
-    /** Close the list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.open || this.hostElement.contains(ev.target)) {
+    setItemsA11yAttrs() {
+        if (!this.hasItems) {
             return;
         }
-        this.open = false;
-        this.closed.emit();
+        this.items.forEach((item, index) => {
+            item.setAttribute("role", "menuitem");
+            item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+        });
     }
-    /**
-     * Check if some content slot is set.
-     */
-    checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="section"]').length > 0;
+    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()`.
@@ -118,20 +36,127 @@ export class ZMenuSection {
      */
     onLabelSlotChange(ev) {
         const labelElement = ev.target.assignedElements()[0];
-        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+        }
+    }
+    /**
+     * 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;
+        }
+    }
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        setTimeout(() => {
+            this.label.focus();
+        }, 100);
+    }
+    /** Focus the last item. */
+    async focusLastItem() {
+        this.htmlTabindex = 0;
+        this.moveFocus(this.items[this.items.length - 1]);
     }
-    focusFirstSectionItemOnKeyUp() {
-        const firstElement = this.hostElement.querySelectorAll('[slot="section"]')[0];
-        if (firstElement) {
-            firstElement.focus();
-            this.currentIndex = 0;
+    onOpenChange() {
+        if (!this.open) {
+            this.closed.emit();
+            this.setItemsA11yAttrs();
+        }
+        else {
+            this.opened.emit();
+        }
+    }
+    onTabindexChange() {
+        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.label.focus();
+                this.open = false;
+                break;
+            case KeyboardCode.ARROW_RIGHT:
+                if (this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = true;
+                break;
+            case KeyboardCode.ARROW_DOWN: {
+                if (!this.open) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(this.items[0]);
+                    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);
+                }
+                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.setFocus();
+                }
+                break;
+            }
         }
     }
-    componentWillLoad() {
-        this.checkContent();
+    constructor() {
+        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.onLabelKeydown = this.onLabelKeydown.bind(this);
+        this.onItemsKeydown = this.onItemsKeydown.bind(this);
+    }
+    connectedCallback() {
+        this.onItemsChange();
     }
     render() {
-        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) })))));
+        return (h(Host, { key: '387e43b42ac8233f88d329a592bef924ebcf9ee9', open: this.open }, h("button", { key: 'd6014cdeb9a6ff2b4e95c43db7d2bae2b4d1c811', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.toggle, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'd0065cf62f83d83df43b5c2413d3e13b23a1bb6a', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'e6adc51de79f1fbcb76b025cd6226388ff4d90f0', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '151f31f24ec306ce4cb45b70b8ae5a6023fd063d', class: "items", role: "menu" }, h("slot", { key: 'd4d67539788121360de0e4dabf51ba22086c1345', name: "section", onSlotchange: this.onItemsChange })))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -163,13 +188,48 @@ export class ZMenuSection {
                 },
                 "attribute": "active",
                 "reflect": true
+            },
+            "htmlTabindex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tabindex value to set on the label button.\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu)."
+                },
+                "attribute": "html-tabindex",
+                "reflect": false,
+                "defaultValue": "-1"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The opening state of the section."
+                },
+                "attribute": "open",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "open": {},
-            "hasContent": {}
+            "hasItems": {},
+            "items": {}
         };
     }
     static get events() {
@@ -205,26 +265,61 @@ export class ZMenuSection {
                 }
             }];
     }
-    static get elementRef() { return "hostElement"; }
-    static get listeners() {
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set tabindex of the label to 0, then focus it.",
+                    "tags": []
+                }
+            },
+            "focusLastItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the last item.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
         return [{
-                "name": "canvasOpenStatusChanged",
-                "method": "canvasOpenStatusChanged",
-                "target": "document",
-                "capture": false,
-                "passive": false
+                "propName": "open",
+                "methodName": "onOpenChange"
             }, {
+                "propName": "htmlTabindex",
+                "methodName": "onTabindexChange"
+            }];
+    }
+    static get listeners() {
+        return [{
                 "name": "keydown",
-                "method": "handleKeyDown",
+                "method": "onItemsKeydown",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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":"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","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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-menu-section/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, 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() host: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Tabindex value to set on the label button.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  /** The opening state of the section. */\n  @Prop({mutable: true})\n  open: boolean;\n\n  @State()\n  hasItems: boolean;\n\n  @State()\n  items: HTMLElement[];\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 label: HTMLButtonElement;\n\n  private get focusableItem(): HTMLElement {\n    return this.items.find(({tabIndex}) => tabIndex === 0);\n  }\n\n  private toggle(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.setFocus();\n  }\n\n  private setItemsA11yAttrs(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.items.forEach((item, index) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\");\n    });\n  }\n\n  private onItemsChange(): void {\n    this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    this.hasItems = this.items.length > 0;\n    this.setItemsA11yAttrs();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   */\n  private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n    receiver.tabIndex = 0;\n    setTimeout(() => {\n      receiver.focus();\n    }, 100);\n    if (current) {\n      current.tabIndex = -1;\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    setTimeout(() => {\n      this.label.focus();\n    }, 100);\n  }\n\n  /** Focus the last item. */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    this.htmlTabindex = 0;\n    this.moveFocus(this.items[this.items.length - 1]);\n  }\n\n  @Watch(\"open\")\n  onOpenChange(): void {\n    if (!this.open) {\n      this.closed.emit();\n      this.setItemsA11yAttrs();\n    } else {\n      this.opened.emit();\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  onTabindexChange(): void {\n    this.label.tabIndex = this.htmlTabindex;\n  }\n\n  @Listen(\"keydown\")\n  private onItemsKeydown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.label.focus();\n        this.open = false;\n        break;\n      case KeyboardCode.ARROW_RIGHT:\n        if (this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = true;\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (!this.open) {\n          break;\n        }\n        if (document.activeElement === this.host) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(this.items[0]);\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex + 1];\n        if (receiver) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(receiver, this.focusableItem);\n        }\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (!this.open || document.activeElement === this.host) {\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex - 1];\n        ev.preventDefault();\n        ev.stopPropagation();\n        if (receiver) {\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          // since there isn't a previous item to focus, give the focus to the label element\n          this.setFocus();\n        }\n        break;\n      }\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    this.onItemsKeydown = this.onItemsKeydown.bind(this);\n  }\n\n  connectedCallback(): void {\n    this.onItemsChange();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host open={this.open}>\n        <button\n          ref={(el) => (this.label = el)}\n          class=\"label\"\n          aria-haspopup={`${this.hasItems}`}\n          aria-expanded={`${!!this.open}`}\n          role=\"menuitem\"\n          tabindex={this.htmlTabindex}\n          onClick={this.toggle}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"section\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}