@nova-design-system/nova-webcomponents 3.0.0-beta.17

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

@@ -0,0 +1,355 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot trigger - Button to toggle the menu popover.
+ * @slot content - Use an <ul></ul> tag for the slot, and place <nv-menuitem> elements inside.
+ */
+export class NvMenu {
+    constructor() {
+        this.isHandlingKeyDown = false;
+        this.isHandlingClick = false;
+        this.open = false;
+        this.nested = false;
+        this.disableCloseOnSelect = false;
+        this.placement = this.nested ? 'right-start' : 'bottom-end';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens the menu.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        this.open = false;
+    }
+    handleMenuItemSelect(menuItem, event) {
+        // If the element is disabled, stop propagation
+        if (menuItem.hasAttribute('disabled')) {
+            event.stopPropagation();
+            return;
+        }
+        // Emit the menuitemSelected event for the selected item
+        const itemId = menuItem.id;
+        if (itemId) {
+            this.menuitemSelected.emit({ itemId });
+        }
+        // Prevent event propagation to avoid multiple triggers
+        event.stopPropagation();
+        if (!this.disableCloseOnSelect) {
+            this.open = false;
+        }
+    }
+    handleMenuClick(event) {
+        if (this.isHandlingClick) {
+            return;
+        }
+        this.isHandlingClick = true;
+        const target = event.target;
+        const menuItem = target.closest('nv-menuitem');
+        if (menuItem &&
+            menuItem.tagName === 'NV-MENUITEM' &&
+            !menuItem.hasAttribute('has-submenu')) {
+            this.handleMenuItemSelect(menuItem, event);
+        }
+        this.isHandlingClick = false;
+    }
+    handleKeydown(event) {
+        if (!this.open)
+            return;
+        if (this.isHandlingKeyDown) {
+            return;
+        }
+        this.isHandlingKeyDown = true;
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            event.key === 'Escape') {
+            event.preventDefault();
+        }
+        if (event.key === 'Escape' && !this.nested) {
+            this.close();
+            this.triggerElement.focus();
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        if (event.key === 'Enter') {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement.tagName === 'NV-MENUITEM' &&
+                !activeElement.hasAttribute('has-submenu')) {
+                event.preventDefault();
+                this.handleMenuItemSelect(activeElement, event);
+            }
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        const menuContent = this.el.querySelector('[slot="content"]');
+        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        let currentIndex = menuItems.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            currentIndex = menuItems.indexOf(document.activeElement.parentElement);
+        if (currentIndex === -1 &&
+            menuItems.find(item => item.matches('nv-menu[open]'))) {
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            menuItems.forEach(item => {
+                if (item.matches('nv-menu'))
+                    item.close();
+            });
+        }
+        if (event.key === 'ArrowDown') {
+            let nextIndex = (currentIndex + 1) % menuItems.length;
+            while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {
+                nextIndex = (nextIndex + 1) % menuItems.length;
+            }
+            const nextFocusable = menuItems[nextIndex];
+            if (nextFocusable.matches('nv-menuitem'))
+                nextFocusable.focus();
+            else if (nextFocusable.matches('nv-menu'))
+                nextFocusable.querySelector('nv-menuitem').focus();
+        }
+        if (event.key === 'ArrowUp') {
+            let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+            while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {
+                prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;
+            }
+            const prevFocusable = menuItems[prevIndex];
+            if (prevFocusable.matches('nv-menuitem'))
+                prevFocusable.focus();
+            else if (prevFocusable.matches('nv-menu'))
+                prevFocusable.querySelector('nv-menuitem').focus();
+        }
+        if (event.key === 'ArrowRight') {
+            const submenu = menuItems[currentIndex];
+            if (!submenu.matches('nv-menu')) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            submenu.show();
+        }
+        if (event.key === 'ArrowLeft' && this.nested) {
+            if (menuItems.find(item => item.matches('nv-menu[open]'))) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            this.close();
+            this.triggerElement.focus();
+        }
+        this.isHandlingKeyDown = false;
+    }
+    handleOpenChanged(event) {
+        if (event.target === this.el.querySelector('nv-popover')) {
+            this.open = event.detail;
+        }
+        const triggerHasFocus = this.triggerElement === document.activeElement;
+        const triggerHasFocusVisible = this.triggerElement.matches(':focus-visible');
+        if (triggerHasFocus && triggerHasFocusVisible)
+            this.focusFirstItem();
+    }
+    focusFirstItem() {
+        const firstButton = this.popoverElement.querySelector('nv-menuitem');
+        if (firstButton) {
+            requestAnimationFrame(() => firstButton.focus());
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '5a3a0645d952724b5c2ddd1f2578201568bf827b' }, h("slot", { key: '65506a9b7035ef645daa87079339ad7e7cd76377', name: "trigger" }), h("nv-popover", { key: 'f5998e3d878671d09ea684de2a54bca504513f48', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, h("slot", { key: '267e0e587177bdb8b6ce9b10f36c43158547d5b2', name: "content" }))));
+    }
+    static get is() { return "nv-menu"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to toggle the initial visibility of the menu, by default the menu\nis hidden."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "nested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this if the menu is nested inside another menu. This will prevent the\nparent menu from closing when the child menu is opened."
+                },
+                "attribute": "nested",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableCloseOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to disable the menu from closing automatically when a menu item is\nselected."
+                },
+                "attribute": "disable-close-on-select",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides where the menu shows up next to the button it\u2019s linked to (above,\nbelow, to the sides). If there isn\u2019t enough room, it will adjust its\nposition on the axis to fit on the screen, so users can always see it."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "this.nested ? 'right-start' : 'bottom-end'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "menuitemSelected",
+                "name": "menuitemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted from nv-menuitem elements with the corresponding id when the menu\nitem is selected."
+                },
+                "complexType": {
+                    "original": "MenuitemSelectedEventDetail",
+                    "resolved": "{ itemId?: string; }",
+                    "references": {
+                        "MenuitemSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../nv-menuitem/nv-menuitem",
+                            "id": "src/components/nv-menuitem/nv-menuitem.tsx::MenuitemSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the menu.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the menu.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleMenuClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "openChanged",
+                "method": "handleOpenChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-menu.js","sourceRoot":"","sources":["../../../src/components/nv-menu/nv-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\n\n/**\n * @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an &lt;ul&gt;&lt;/ul&gt; tag for the slot, and place &lt;nv-menuitem&gt; elements inside.\n */\n@Component({\n  tag: 'nv-menu',\n  styleUrl: 'nv-menu.scss',\n  shadow: false,\n})\nexport class NvMenu {\n  @Element() el: HTMLNvMenuElement;\n  private triggerElement!: HTMLElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private isHandlingKeyDown: boolean = false;\n  private isHandlingClick: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this to toggle the initial visibility of the menu, by default the menu\n   * is hidden.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Use this if the menu is nested inside another menu. This will prevent the\n   * parent menu from closing when the child menu is opened.\n   */\n  @Prop()\n  readonly nested: boolean = false;\n\n  /**\n   * Use this to disable the menu from closing automatically when a menu item is\n   * selected.\n   */\n  @Prop()\n  readonly disableCloseOnSelect: boolean = false;\n\n  /**\n   * Decides where the menu shows up next to the button it’s linked to (above,\n   * below, to the sides). If there isn’t enough room, it will adjust its\n   * position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted from nv-menuitem elements with the corresponding id when the menu\n   * item is selected.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  private handleMenuItemSelect(menuItem: HTMLElement, event: Event) {\n    // If the element is disabled, stop propagation\n    if (menuItem.hasAttribute('disabled')) {\n      event.stopPropagation();\n      return;\n    }\n\n    // Emit the menuitemSelected event for the selected item\n    const itemId = menuItem.id;\n    if (itemId) {\n      this.menuitemSelected.emit({ itemId });\n    }\n\n    // Prevent event propagation to avoid multiple triggers\n    event.stopPropagation();\n\n    if (!this.disableCloseOnSelect) {\n      this.open = false;\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleMenuClick(event: MouseEvent) {\n    if (this.isHandlingClick) {\n      return;\n    }\n    this.isHandlingClick = true;\n\n    const target = event.target as HTMLElement;\n    const menuItem = target.closest('nv-menuitem');\n    if (\n      menuItem &&\n      menuItem.tagName === 'NV-MENUITEM' &&\n      !menuItem.hasAttribute('has-submenu')\n    ) {\n      this.handleMenuItemSelect(menuItem, event);\n    }\n\n    this.isHandlingClick = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    if (!this.open) return;\n\n    if (this.isHandlingKeyDown) {\n      return;\n    }\n    this.isHandlingKeyDown = true;\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'Escape'\n    ) {\n      event.preventDefault();\n    }\n\n    if (event.key === 'Escape' && !this.nested) {\n      this.close();\n      this.triggerElement.focus();\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      const activeElement = document.activeElement as HTMLNvMenuitemElement;\n      if (\n        activeElement &&\n        activeElement.tagName === 'NV-MENUITEM' &&\n        !activeElement.hasAttribute('has-submenu')\n      ) {\n        event.preventDefault();\n        this.handleMenuItemSelect(activeElement, event);\n      }\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    const menuContent = this.el.querySelector('[slot=\"content\"]');\n    const menuItems = (\n      Array.from(menuContent.childNodes) as Array<\n        HTMLNvMenuitemElement | HTMLNvMenuElement\n      >\n    ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n    let currentIndex = menuItems.indexOf(\n      document.activeElement as HTMLNvMenuitemElement,\n    );\n    if (currentIndex === -1)\n      currentIndex = menuItems.indexOf(\n        document.activeElement.parentElement as HTMLNvMenuitemElement,\n      );\n    if (\n      currentIndex === -1 &&\n      menuItems.find(item => item.matches('nv-menu[open]'))\n    ) {\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      menuItems.forEach(item => {\n        if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n      });\n    }\n\n    if (event.key === 'ArrowDown') {\n      let nextIndex = (currentIndex + 1) % menuItems.length;\n      while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n        nextIndex = (nextIndex + 1) % menuItems.length;\n      }\n      const nextFocusable = menuItems[nextIndex];\n      if (nextFocusable.matches('nv-menuitem')) nextFocusable.focus();\n      else if (nextFocusable.matches('nv-menu'))\n        nextFocusable.querySelector('nv-menuitem').focus();\n    }\n\n    if (event.key === 'ArrowUp') {\n      let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n      while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n        prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n      }\n      const prevFocusable = menuItems[prevIndex];\n      if (prevFocusable.matches('nv-menuitem')) prevFocusable.focus();\n      else if (prevFocusable.matches('nv-menu'))\n        prevFocusable.querySelector('nv-menuitem').focus();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const submenu = menuItems[currentIndex];\n      if (!submenu.matches('nv-menu')) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n\n      (submenu as HTMLNvMenuElement).show();\n    }\n\n    if (event.key === 'ArrowLeft' && this.nested) {\n      if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      this.close();\n      this.triggerElement.focus();\n    }\n\n    this.isHandlingKeyDown = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (event.target === this.el.querySelector('nv-popover')) {\n      this.open = event.detail;\n    }\n\n    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\n\n    if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n  }\n\n  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"click\"\n          triggerElement={this.triggerElement}\n          placement={this.placement}\n          nested={this.nested}\n          open={this.open}\n        >\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-menuitem/nv-menuitem.css

@@ -0,0 +1,29 @@
+nv-menuitem {
+  display: flex;
+  align-items: center;
+  max-width: 300px;
+  width: 100vw;
+  font-size: var(--menu-contextual-item-font-size);
+  font-weight: var(--menu-contextual-item-font-weight);
+  color: var(--components-menu-contextual-item-content);
+  border-radius: var(--menu-contextual-item-radius);
+  gap: var(--menu-contextual-item-gap-x);
+  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);
+  transition: background-color 150ms ease-out;
+  cursor: pointer;
+}
+nv-menuitem:hover, nv-menuitem:focus, nv-menuitem:focus-within {
+  background-color: var(--components-menu-contextual-item-background-hover);
+  color: var(--components-menu-contextual-item-content-hover);
+}
+nv-menuitem kbd {
+  color: var(--components-menu-contextual-item-shortcut);
+}
+nv-menuitem [data-scope=text] {
+  margin-right: auto;
+}
+nv-menuitem[disabled]:not([disabled=false]) {
+  cursor: unset;
+  background-color: unset;
+  color: var(--components-menu-contextual-item-content-disabled);
+}

package/dist/collection/components/nv-menuitem/nv-menuitem.docs.js

@@ -0,0 +1,6 @@
+const NvMenuitemDocs = {
+    component: 'nv-menuitem',
+    skip: true,
+};
+export default NvMenuitemDocs;
+//# sourceMappingURL=nv-menuitem.docs.js.map

package/dist/collection/components/nv-menuitem/nv-menuitem.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-menuitem.docs.js","sourceRoot":"","sources":["../../../src/components/nv-menuitem/nv-menuitem.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,cAAc,GAAoC;IACtD,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvMenuitemDocs: NovaDocs<Components.NvMenuitem> = {\n  component: 'nv-menuitem',\n  skip: true,\n};\n\nexport default NvMenuitemDocs;\n"]}

package/dist/collection/components/nv-menuitem/nv-menuitem.js

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - The content to render, usually just text
+ */
+export class NvMenuitem {
+    constructor() {
+        this.icon = undefined;
+        this.disabled = false;
+        this.shortcut = undefined;
+        this.hasSubmenu = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '45f0235ad70e94c32498584b38da8528b76e7986', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'fb70b1d5249b850dc69fd777f75f17dec6d65a43', name: this.icon }), h("span", { key: '7d66467d43ee486a187b6da0559d28fe4db1aa8b', "data-scope": "text" }, h("slot", { key: '1525c465235670b1396a74d53244f54b6e8b400d' })), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cfc92cdc9ea84dec4494a4aab43f98fa1f92f2e7' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1002e887cc7a41858e36c1499aebe85cd320af2d', name: "chevron-right" })));
+    }
+    static get is() { return "nv-menuitem"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-menuitem.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-menuitem.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${IconName}`",
+                    "resolved": "\"home\" | \"photo\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"color-picker\" | \"color-swatch\" | \"compass\" | \"contract\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"engine\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gift\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"helicopter\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-off\" | \"map-pin\" | \"map\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship\" | \"shopping-cart\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"speakerphone\" | \"stack\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-minus\" | \"user-plus\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wallet\" | \"wand\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world\" | \"writing\" | \"x\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading."
+                },
+                "attribute": "icon",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the item, preventing user interaction."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "shortcut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a shortcut key for the action represented in the menu item."
+                },
+                "attribute": "shortcut",
+                "reflect": true
+            },
+            "hasSubmenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the menu item has a submenu, the a caret icon will be displayed."
+                },
+                "attribute": "has-submenu",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-menuitem.js.map

package/dist/collection/components/nv-menuitem/nv-menuitem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-menuitem.js","sourceRoot":"","sources":["../../../src/components/nv-menuitem/nv-menuitem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMlE;;GAEG;AAMH,MAAM,OAAO,UAAU;;;wBAiBQ,KAAK;;0BAYH,KAAK;;IAEpC,uBAAuB;IACvB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;YACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;YAClD,2EAAiB,MAAM;gBACrB,8DAAa,CACR;YACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO;YAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = { itemId?: HTMLElement['id'] };\n\n/**\n * @slot default - The content to render, usually just text\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n        <span data-scope=\"text\">\n          <slot></slot>\n        </span>\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-popover/nv-popover.css

@@ -0,0 +1,42 @@
+nv-popover {
+  display: inline-block;
+  position: relative;
+}
+nv-popover:has([fluid]:not([fluid=false])) {
+  display: block;
+}
+nv-popover [data-scope=popover] {
+  width: max-content;
+  background-color: var(--components-popover-background);
+  border-color: var(--components-popover-border);
+  font-weight: var(--font-weight-medium-emphasis);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--popover-radius);
+  padding: var(--popover-padding-y) var(--popover-padding-x);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity);
+}
+nv-popover [data-scope=arrow] {
+  background-color: var(--components-popover-background);
+  position: absolute;
+  border-color: var(--components-popover-border);
+  border-width: 1px;
+  border-style: solid;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+  border-radius: 1px;
+}
+nv-popover [slot=content] {
+  position: relative;
+  z-index: 1;
+}
+nv-popover slot-fb {
+  display: none;
+}