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

package/dist/components/nv-menu.js

@@ -0,0 +1,216 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-632bedb8.js';
+import { d as defineCustomElement$2 } from './p-c711fe67.js';
+
+const nvMenuCss = "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)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
+const NvMenuStyle0 = nvMenuCss;
+
+const NvMenu$1 = /*@__PURE__*/ proxyCustomElement(class NvMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.menuitemSelected = createEvent(this, "menuitemSelected", 7);
+        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" }))));
+    }
+    get el() { return this; }
+    static get style() { return NvMenuStyle0; }
+}, [4, "nv-menu", {
+        "open": [1540],
+        "nested": [4],
+        "disableCloseOnSelect": [4, "disable-close-on-select"],
+        "placement": [1],
+        "show": [64],
+        "close": [64]
+    }, [[2, "click", "handleMenuClick"], [0, "keydown", "handleKeydown"], [0, "openChanged", "handleOpenChanged"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-menu", "nv-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvMenu$1);
+            }
+            break;
+        case "nv-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvMenu = NvMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvMenu, defineCustomElement };
+
+//# sourceMappingURL=nv-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-menu.js","mappings":"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","names":["NvMenu"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)  \n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)  \n          var(--menu-contextual-divider-padding-x)  \n          var(--menu-contextual-divider-padding-bottom)  \n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n    \n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","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"],"version":3}

package/dist/components/nv-menuitem.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvMenuitem extends Components.NvMenuitem, HTMLElement {}
+export const NvMenuitem: {
+    prototype: NvMenuitem;
+    new (): NvMenuitem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-menuitem.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { d as defineCustomElement$2 } from './p-6146d4b0.js';
+
+const nvMenuitemCss = "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)}";
+const NvMenuitemStyle0 = nvMenuitemCss;
+
+const NvMenuitem$1 = /*@__PURE__*/ proxyCustomElement(class NvMenuitem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        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" })));
+    }
+    get el() { return this; }
+    static get style() { return NvMenuitemStyle0; }
+}, [4, "nv-menuitem", {
+        "icon": [513],
+        "disabled": [516],
+        "shortcut": [513],
+        "hasSubmenu": [516, "has-submenu"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-menuitem", "nv-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-menuitem":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvMenuitem$1);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvMenuitem = NvMenuitem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvMenuitem, defineCustomElement };
+
+//# sourceMappingURL=nv-menuitem.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-menuitem.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;MCafA,YAAU;;;;;wBAiBQ,KAAK;;0BAYH,KAAK;;;;;IAMpC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClD,2EAAiB,MAAM,IACrB,8DAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvMenuitem"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","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"],"version":3}

package/dist/components/nv-popover.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvPopover extends Components.NvPopover, HTMLElement {}
+export const NvPopover: {
+    prototype: NvPopover;
+    new (): NvPopover;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-popover.js

@@ -0,0 +1,8 @@
+import { N as NvPopover$1, d as defineCustomElement$1 } from './p-c711fe67.js';
+
+const NvPopover = NvPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvPopover, defineCustomElement };
+
+//# sourceMappingURL=nv-popover.js.map

package/dist/components/nv-popover.js.map

@@ -0,0 +1 @@
+{"file":"nv-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nv-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvRow extends Components.NvRow, HTMLElement {}
+export const NvRow: {
+    prototype: NvRow;
+    new (): NvRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-row.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+
+const nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";
+const NvRowStyle0 = nvRowCss;
+
+const NvRow$1 = /*@__PURE__*/ proxyCustomElement(class NvRow extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'b6a2c143bf767ab622d0305574be11c71a770421' }, h("slot", { key: '8665290a25fdb12165d52436fc64d1a11ff93814' })));
+    }
+    static get style() { return NvRowStyle0; }
+}, [4, "nv-row"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-row"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-row":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvRow$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvRow = NvRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvRow, defineCustomElement };
+
+//# sourceMappingURL=nv-row.js.map

package/dist/components/nv-row.js.map

@@ -0,0 +1 @@
+{"file":"nv-row.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+IAA+I,CAAC;AACjK,oBAAe,QAAQ;;MCSVA,OAAK;;;;;;;IAIhB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["NvRow"],"sources":["src/components/nv-row/nv-row.scss?tag=nv-row","src/components/nv-row/nv-row.tsx"],"sourcesContent":["nv-row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-right: calc(var(--spacing-4) * -1);\n  margin-left: calc(var(--spacing-4) * -1);\n  row-gap: var(--spacing-4);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nv-stack.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvStack extends Components.NvStack, HTMLElement {}
+export const NvStack: {
+    prototype: NvStack;
+    new (): NvStack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-stack.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+
+const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
+const NvStackStyle0 = nvStackCss;
+
+const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.gutter = 2;
+        this.fill = undefined;
+        this.flex = undefined;
+        this.full = undefined;
+        this.vertical = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '4c8889bb870137f5c3aa8fc499c26fc77bc6fba1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'dbd5b334a0e6ee5aa3bbc0431d44d81933f1c05c' })));
+    }
+    static get style() { return NvStackStyle0; }
+}, [4, "nv-stack", {
+        "gutter": [514],
+        "fill": [516],
+        "flex": [516],
+        "full": [516],
+        "vertical": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-stack":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvStack$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvStack = NvStack$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvStack, defineCustomElement };
+
+//# sourceMappingURL=nv-stack.js.map

package/dist/components/nv-stack.js.map

@@ -0,0 +1 @@
+{"file":"nv-stack.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B,CAAC;AAC19B,sBAAe,UAAU;;MCWZA,SAAO;;;;sBASQ,CAAC;;;;;;;;;IAoC3B,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EAC1D,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EACzD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvStack"],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nv-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTooltip extends Components.NvTooltip, HTMLElement {}
+export const NvTooltip: {
+    prototype: NvTooltip;
+    new (): NvTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-tooltip.js

@@ -0,0 +1,61 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { d as defineCustomElement$2 } from './p-c711fe67.js';
+
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const NvTooltipStyle0 = nvTooltipCss;
+
+const NvTooltip$1 = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.message = undefined;
+        this.placement = 'bottom';
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === null;
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '7fbaa673028556f15b8c15a863f066d79b7b844e' }, h("slot", { key: 'b9007b3c3326ed7bb3bea05c2b2ad90d49b25a45' }), h("nv-popover", { key: '9a72b61bf4af4a769ba5ad991925bc982a440f93', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'aa7d584e0db97792915f5460a7760ad16f45c5ba', slot: "content" }, this.message), h("slot", { key: 'fc32501ada94b526adf6e9fcb71ec355f72a163d', name: "content" }))));
+    }
+    get el() { return this; }
+    static get style() { return NvTooltipStyle0; }
+}, [4, "nv-tooltip", {
+        "message": [1],
+        "placement": [1],
+        "enterDelay": [2, "enter-delay"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-tooltip", "nv-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTooltip$1);
+            }
+            break;
+        case "nv-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTooltip = NvTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTooltip, defineCustomElement };
+
+//# sourceMappingURL=nv-tooltip.js.map

package/dist/components/nv-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"nv-tooltip.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,gvBAAgvB,CAAC;AACtwB,wBAAe,YAAY;;MCWdA,WAAS;;;;;yBAqBY,QAAQ;0BAQV,CAAC;;;;;IAM/B,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;YAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;SAC5C,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTooltip"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow: 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  [data-scope=\"popover\"] {\n    @include tooltip-styles();\n  }\n\n  [data-scope=\"arrow\"] {\n    @include arrow-styles();\n  }\n}\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n  private triggerElement!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === null;\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n}\n"],"version":3}