@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/menu/menu.css

@@ -7,25 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
-:host(.legacy) ::slotted(*),
-:host(.legacy) * {
-  --padding-start: 10px;
-  --padding-end: 10px;
-  --padding-top: 10px;
-  --padding-bottom: 10px;
-  --secondary-padding-top: 10px;
-  --secondary-padding-bottom: 10px;
-  --secondary-bg-color: #fff;
-  --bg-color-hover: #f2f7f9;
-  --bg-color-focus: #f2f7f9;
-  --bg-color-selected: #f2f7f9;
-  --color-hover: #007495;
-  --color-selected: #007495;
-  --color-focus: #007495;
-  --focus-outline: none;
-  display: block;
+[hidden] {
+  display: none !important;
 }
-
 :host {
   /**
    * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'
@@ -36,15 +20,21 @@
    * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0
    * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0
 
+   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #f2f7f9;
    * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #f2f7f9;
+   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #f2f7f9;
+
+   * @prop --color-hover: text hover color of nav-items. Defaults to #007495
+   * @prop --color-selected: text selected color of nav-items. Defaults to #007495
    * @prop --color-focus: text focus color of nav-items. Defaults to #007495
 
    * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'
+   * @prop --font-size: default font-size for all items. Defaults .9em;
   */
-  --padding-start: 10px;
-  --padding-end: 10px;
-  --padding-top: 10px;
-  --padding-bottom: 10px;
+  --padding-start: var(--nano-spacing-medium, 16px);
+  --padding-end: var(--nano-spacing-medium, 16px);
+  --padding-top: var(--nano-spacing-small, 8px);
+  --padding-bottom: var(--nano-spacing-small, 8px);
   --secondary-padding-top: 0;
   --secondary-padding-bottom: 0;
   --bg-color-hover: #f2f7f9;
@@ -54,13 +44,14 @@
   --color-selected: #007495;
   --color-focus: #007495;
   --focus-outline: none;
+  --font-size: 0.9em;
   display: block;
 }
 
 .menu {
+  font-size: var(--font-size, 0.9em);
   -ms-scroll-chaining: none;
       overscroll-behavior: none;
-  font-size: 0.9em;
   min-width: var(--width);
   position: relative;
 }
@@ -68,23 +59,24 @@
   outline: none;
 }
 
-.menu::slotted(*:not(nano-nav-item)) {
-  margin-left: var(--padding-start);
-  margin-right: var(--padding-end);
-  margin-top: var(--padding-top);
-  margin-bottom: var(--padding-bottom);
+::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: block;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu::slotted(*:not(nano-nav-item)) {
-    margin-left: unset;
-    margin-right: unset;
+  ::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {
+    padding-left: unset;
+    padding-right: unset;
     /* autoprefixer: ignore next */
-    -webkit-margin-start: var(--padding-start);
+    -webkit-padding-start: var(--padding-start);
     /* autoprefixer: ignore next */
-    margin-inline-start: var(--padding-start);
+    padding-inline-start: var(--padding-start);
     /* autoprefixer: ignore next */
-    -webkit-margin-end: var(--padding-end);
+    -webkit-padding-end: var(--padding-end);
     /* autoprefixer: ignore next */
-    margin-inline-end: var(--padding-end);
+    padding-inline-end: var(--padding-end);
   }
 }

package/dist/collection/components/menu/menu.js

@@ -1,32 +1,31 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Component, Event, Method, h, Host, Element, } from '@stencil/core';
-import { getTextContent, scrollIntoView, getDirectChildren } from '../../utils';
+import { Component, Event, Method, h, Host, Element, Prop, Listen, } from '@stencil/core';
+import { getTextContent, getDirectChildren, getActiveElement, } from '../../utils';
 const CANSHADOW = !!document.head.attachShadow;
 /**
- * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+ * Manages focus state / active.
+ * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.
  */
 export class Menu {
   constructor() {
     this.ignoreMouseEvents = false;
     this.typeToSelect = '';
+    this._hasFocus = false;
+    /** changes the role of the underlying control - sometimes required for semantics */
+    this.type = 'menu';
     this.handleFocus = () => {
-      const item = this.getActiveItem();
-      if (!item) {
-        this.setActiveItem(this.getItems()[0]);
-      }
+      this.setActiveFocusItem(this.selectedItem || this.getItems[0]);
+      this._hasFocus = true;
       this.nanoFocus.emit();
     };
-    this.handleBlur = () => {
-      //this.setActiveItem();
-      // this.nanoBlur.emit();
-    };
     this.handleClick = (event) => {
       const target = event.target;
       const item = target.closest('nano-nav-item');
       if (item && !item.disabled) {
-        this.nanoSelect.emit({ item });
+        this.nanoSelect.emit(item);
       }
     };
     this.handleKeyDown = (event) => {
@@ -39,15 +38,17 @@ export class Menu {
       // Make a selection when pressing enter
       switch (event.key) {
         case ' ':
-          let ele = this.getActiveItem();
-          ele.click();
+          if (this.activeItem)
+            this.activeItem.click();
           break;
         case 'ArrowDown':
         case 'ArrowUp':
+        case 'PageDown':
+        case 'PageUp':
         case 'Home':
         case 'End':
-          const items = this.getItems();
-          const selectedItem = this.getActiveItem();
+          const items = this.getItems;
+          const selectedItem = this.activeItem;
           let index = items.indexOf(selectedItem);
           if (items.length) {
             event.preventDefault();
@@ -57,33 +58,34 @@ export class Menu {
             else if (event.key === 'ArrowUp') {
               index--;
             }
-            else if (event.key === 'Home') {
+            else if (event.key === 'Home' || event.key === 'PageUp') {
               index = 0;
             }
-            else if (event.key === 'End') {
+            else if (event.key === 'End' || event.key === 'PageDown') {
               index = items.length - 1;
             }
             if (index < 0)
-              index = 0;
-            if (index > items.length - 1)
               index = items.length - 1;
-            this.setActiveItem(items[index]);
-            this.scrollItemIntoView(items[index]);
+            if (index > items.length - 1)
+              index = 0;
+            this.setActiveFocusItem(items[index]);
+            if (items[index])
+              items[index].scrollIntoView({ block: 'nearest' });
             return;
           }
           break;
       }
       // Handle type-to-search behavior when non-control characters are entered
-      if (event.key === ' ' || /^[\d\w]$/i.test(event.key)) {
+      if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {
         clearTimeout(this.typeToSelectTimeout);
         this.typeToSelectTimeout = setTimeout(() => (this.typeToSelect = ''), 750);
         this.typeToSelect += event.key;
-        const items = this.getItems();
+        const items = this.getItems;
         for (const item of items) {
           const slot = item.shadowRoot.querySelector('slot:not([name])');
           const label = getTextContent(slot).toLowerCase().trim();
           if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
-            item.setFocus();
+            this.setActiveFocusItem(item);
             break;
           }
         }
@@ -91,62 +93,182 @@ export class Menu {
     };
     this.handleMouseOver = (event) => {
       const target = event.target;
-      const item = target.closest('nano-nav-item');
+      const item = target.closest('nano-nav-item') || target.closest('nano-option');
       if (item && !this.ignoreMouseEvents) {
-        this.setActiveItem(item);
+        this.setActiveFocusItem(item);
       }
     };
   }
-  connectedCallback() { }
+  // Public API
+  /** get the focus state of the menu @readonly */
+  get hasFocus() {
+    return this._hasFocus;
+  }
+  // Public Methods
   /** Sets focus on the menu. */
   async setFocus() {
-    this.menu.focus();
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus)
+      this.menu.focus({ preventScroll: true });
   }
   /** Removes focus from the menu. */
   async removeFocus() {
-    this.menu.blur();
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.blur)
+      this.menu.blur();
+  }
+  /** Sets the current active item */
+  async showActiveElement() {
+    if (this.selectedItem)
+      this.selectedItem.scrollIntoView({ block: 'nearest' });
+  }
+  /** Removes any active item's state */
+  async resetActiveItem() {
+    this.getItems
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', '-1'));
   }
-  getItems() {
+  // Private methods
+  get getItems() {
     let items;
     let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');
     if (opened.length) {
       const ctx = opened[opened.length - 1];
-      items = Array.from(ctx.querySelectorAll('nano-nav-item'));
+      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));
     }
     else {
-      items = getDirectChildren(this.el, 'nano-nav-item');
+      items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');
     }
-    return items.filter((el) => !el.disabled);
+    return items.filter((el) => !el.disabled && !el.hidden);
   }
-  getActiveItem() {
-    return this.el.querySelector('nano-nav-item.has-focus');
+  get activeItem() {
+    const activeElement = getActiveElement();
+    return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
+      i === activeElement ||
+      i.classList.contains('has-focus'));
   }
-  setActiveItem(item) {
-    if (item)
-      item.setFocus();
+  get selectedItem() {
+    const activeElement = getActiveElement();
+    return this.getItems.find((i) => i.selected || i === activeElement);
+  }
+  async setActiveFocusItem(item, focus = true) {
+    const items = this.getItems;
+    let activeItem = !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;
+    items
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
+    if (!focus)
+      return;
+    if (activeItem) {
+      activeItem.setFocus
+        ? activeItem.setFocus()
+        : activeItem.focus();
+    }
     else
-      this.el.setFocus();
+      this.menu.focus();
   }
-  scrollItemIntoView(item) {
-    if (item) {
-      scrollIntoView(item, this.menu);
+  // Event Handlers
+  handleBlur(e) {
+    if (!this.hasFocus)
+      return;
+    const kev = e;
+    let found;
+    if (kev.key) {
+      if (kev.key !== 'Tab')
+        return;
+      found =
+        getActiveElement() &&
+          getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
+    }
+    else
+      found = !!e.composedPath().find((el) => el === this.el);
+    if (!found) {
+      this.resetActiveItem();
+      this._hasFocus = false;
+      this.nanoBlur.emit();
     }
   }
+  // Component Lifecycle
   render() {
     return (h(Host, { class: {
         legacy: !CANSHADOW,
       } },
-      h("nav", { ref: (el) => (this.menu = el), part: "base", class: "menu", tabIndex: -1, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver },
+      h("div", { onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, role: this.type, ref: (el) => (this.menu = el), part: "base", class: {
+          menu: true,
+          ['menu--' + this.type]: true,
+          'menu--has-focus': this.hasFocus,
+        }, tabIndex: -1 },
         h("slot", null))));
   }
   static get is() { return "nano-menu"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["menu.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["menu.css"]
   }; }
+  static get properties() { return {
+    "hasFocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "get the focus state of the menu @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "has-focus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'menu' | 'listbox'",
+        "resolved": "\"listbox\" | \"menu\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "changes the role of the underlying control - sometimes required for semantics"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'menu'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "an accessible label"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
   static get events() { return [{
       "method": "nanoFocus",
       "name": "nanoFocus",
@@ -188,9 +310,16 @@ export class Menu {
         "text": "Emitted when a menu item is selected."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "HTMLNanoOptionElement | HTMLNanoNavItemElement",
+        "resolved": "HTMLNanoNavItemElement | HTMLNanoOptionElement",
+        "references": {
+          "HTMLNanoOptionElement": {
+            "location": "global"
+          },
+          "HTMLNanoNavItemElement": {
+            "location": "global"
+          }
+        }
       }
     }]; }
   static get methods() { return {
@@ -225,8 +354,53 @@ export class Menu {
         "text": "Removes focus from the menu.",
         "tags": []
       }
+    },
+    "showActiveElement": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the current active item",
+        "tags": []
+      }
+    },
+    "resetActiveItem": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Removes any active item's state",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "mousedown",
+      "method": "handleBlur",
+      "target": "body",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "keydown",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }
 //# sourceMappingURL=menu.js.map

package/dist/collection/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n} from '@stencil/core';\nimport { getTextContent, scrollIntoView, getDirectChildren } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  scoped: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter;\n\n  connectedCallback() {}\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    this.menu.focus();\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    this.menu.blur();\n  }\n\n  private getItems() {\n    let items: HTMLNanoNavItemElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item'\n      ) as HTMLNanoNavItemElement[];\n    }\n    return items.filter((el) => !el.disabled);\n  }\n\n  private getActiveItem() {\n    return this.el.querySelector(\n      'nano-nav-item.has-focus'\n    ) as HTMLNanoNavItemElement;\n  }\n\n  private setActiveItem(item?: HTMLNanoNavItemElement) {\n    if (item) item.setFocus();\n    else this.el.setFocus();\n  }\n\n  private scrollItemIntoView(item: HTMLNanoNavItemElement) {\n    if (item) {\n      scrollIntoView(item, this.menu);\n    }\n  }\n\n  private handleFocus = () => {\n    const item = this.getActiveItem();\n    if (!item) {\n      this.setActiveItem(this.getItems()[0]);\n    }\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    //this.setActiveItem();\n    // this.nanoBlur.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit({ item });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        let ele = this.getActiveItem();\n        ele.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems();\n        const selectedItem = this.getActiveItem();\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home') {\n            index = 0;\n          } else if (event.key === 'End') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = 0;\n          if (index > items.length - 1) index = items.length - 1;\n\n          this.setActiveItem(items[index]);\n          this.scrollItemIntoView(items[index]);\n\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[\\d\\w]$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems();\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          item.setFocus();\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveItem(item);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <nav\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class=\"menu\"\n          tabIndex={-1}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n        >\n          <slot />\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-drawer/menu-drawer.css

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 :host(.legacy) ::slotted(*),
 :host(.legacy) * {
   --global-nav-height: 61px;

package/dist/collection/components/nav-item/nav-item.css

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 :host {
   opacity: inherit;
   display: block;

package/dist/collection/components/nav-item/nav-item.js

@@ -271,7 +271,7 @@ export class NavItem {
         'nano-menu-drawer': this.isInMenuDrawer,
         'nano-menu': this.isInMenu,
         legacy: this.isLegacy,
-      }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick },
+      }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: "menuitem" },
       h("div", { class: {
           'nav-item': true,
           'secondary-open': this.open,
@@ -488,7 +488,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -508,7 +508,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -528,7 +528,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -548,7 +548,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }