@nova-design-system/nova-webcomponents 3.0.0-beta.45 → 3.0.0-beta.46

package/dist/components/nv-menu.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$4 } from './p-78b00756.js';
-import { d as defineCustomElement$3 } from './p-863974b2.js';
-import { d as defineCustomElement$2 } from './p-e46c2e31.js';
+import { d as defineCustomElement$4 } from './p-91b58443.js';
+import { d as defineCustomElement$3 } from './p-18bc0291.js';
+import { d as defineCustomElement$2 } from './p-664c5a14.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 *{pointer-events:none}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;
@@ -30,8 +30,8 @@ const NvMenu$1 = /*@__PURE__*/ proxyCustomElement(class NvMenu extends H {
          */
         this.disableCloseOnSelect = false;
         /**
-         * Decides where the menu shows up next to the button it’s linked to (above,
-         * below, to the sides). If there isn’t enough room, it will adjust its
+         * Decides where the menu shows up next to the button it's linked to (above,
+         * below, to the sides). If there isn't enough room, it will adjust its
          * position on the axis to fit on the screen, so users can always see it.
          */
         this.placement = 'bottom-end';
@@ -216,7 +216,7 @@ const NvMenu$1 = /*@__PURE__*/ proxyCustomElement(class NvMenu extends H {
         });
     }
     render() {
-        return (h(Host, { key: '848044034b707f29f791fa984cc51b606498b162' }, h("slot", { key: '385c9081f84034215745ea79d096cf8e3cebbf8e', name: "trigger" }), h("nv-popover", { key: 'b47a09258a76f608e0eba173039ec8ec49b6186a', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: '8334eee36cadee43d5d78d227841b43da86a46c6' }, h("slot", { key: 'a4f260a9161dc239eabfc9c43178b1394721f37d', name: "trigger" }), h("nv-popover", { key: '6f163bc5c02afba3af1e9bb43cf3b6bfec1e9374', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (h("slot", { name: "content" })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1 +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  State,\n  Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * Interface to define the structure of a menu item\n */\ninterface MenuItem {\n  /**\n   * The label of the menu item.\n   */\n  label: string;\n  /**\n   * The value of the menu item.\n   */\n  value?: string;\n  /**\n   * Whether the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the menu item has a submenu.\n   */\n  hasSubmenu?: boolean;\n  /**\n   * The icon of the menu item.\n   */\n  icon?: string;\n  /**\n   * The shortcut of the menu item.\n   */\n  shortcut?: string;\n  /**\n   * Whether the menu item is nested.\n   */\n  nested?: boolean;\n  /**\n   * The submenu items of the menu item.\n   */\n  submenuItems?: MenuItem[];\n}\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\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n  readonly placement: Placement = 'bottom-end';\n\n  /**\n   * (New feature) Items to display in the menu, provided as a JSON string.\n   * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: string;\n\n  /**\n   * Parsed items stored in state.\n   */\n  @State()\n  private parsedItems: MenuItem[] = [];\n\n  /**\n   * Watcher to parse the items when the `items` property changes.\n   * @param {string} newValue - The new value of the `items` property.\n   */\n  @Watch('items')\n  handleItemsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        this.parsedItems = JSON.parse(newValue);\n      } catch (error) {\n        console.error('Error parsing menu items:', error);\n        this.parsedItems = [];\n      }\n    }\n  }\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 and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(\n    event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n  ) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    // If the menu is not open, check if the trigger is focused\n    // and the user presses Enter or ArrowDown, open the menu\n    if (!this.open) {\n      if (\n        (event.key === 'Enter' ||\n          event.key === 'ArrowDown' ||\n          event.key === ' ') &&\n        document.activeElement === this.triggerElement\n      ) {\n        event.preventDefault();\n        this.show();\n        // Then, put the focus on the first menuitem\n        const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n        if (firstMenuItem) {\n          requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n        }\n      }\n      return;\n    }\n\n    if (this.isHandlingKeyDown) return;\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    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')) {\n        nextFocusable.focus();\n      } else if (nextFocusable.matches('nv-menu')) {\n        nextFocusable.querySelector('nv-menuitem').focus();\n      }\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')) {\n        prevFocusable.focus();\n      } else if (prevFocusable.matches('nv-menu')) {\n        prevFocusable.querySelector('nv-menuitem').focus();\n      }\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      (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    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\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    // If the items attribute is provided, parse its value.\n    if (this.items) {\n      this.handleItemsChange(this.items);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Generates menu items from the `items` property.\n   * @param {MenuItem[]} items - The items to display in the menu.\n   * @returns {HTMLElement[]} The rendered items.\n   */\n  private renderMenuItems(items: MenuItem[]) {\n    return items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu\n            nested\n            placement=\"right-start\"\n            items={JSON.stringify(item.submenuItems)}\n          >\n            <nv-menuitem\n              slot=\"trigger\"\n              has-submenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n              label={item.label}\n            ></nv-menuitem>\n          </nv-menu>\n        );\n      }\n      return (\n        <nv-menuitem\n          disabled={item.disabled}\n          icon={item.icon as IconName}\n          shortcut={item.shortcut}\n          id={item.value}\n          name={item.label}\n          label={item.label}\n        ></nv-menuitem>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\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          {this.parsedItems.length > 0 ? (\n            <ul slot=\"content\">{this.renderMenuItems(this.parsedItems)}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"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  State,\n  Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * Interface to define the structure of a menu item\n */\ninterface MenuItem {\n  /**\n   * The label of the menu item.\n   */\n  label: string;\n  /**\n   * The value of the menu item.\n   */\n  value?: string;\n  /**\n   * Whether the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the menu item has a submenu.\n   */\n  hasSubmenu?: boolean;\n  /**\n   * The icon of the menu item.\n   */\n  icon?: string;\n  /**\n   * The shortcut of the menu item.\n   */\n  shortcut?: string;\n  /**\n   * Whether the menu item is nested.\n   */\n  nested?: boolean;\n  /**\n   * The submenu items of the menu item.\n   */\n  submenuItems?: MenuItem[];\n}\n\n/**\n * @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\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\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n  readonly placement: Placement = 'bottom-end';\n\n  /**\n   * (New feature) Items to display in the menu, provided as a JSON string.\n   * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: string;\n\n  /**\n   * Parsed items stored in state.\n   */\n  @State()\n  private parsedItems: MenuItem[] = [];\n\n  /**\n   * Watcher to parse the items when the `items` property changes.\n   * @param {string} newValue - The new value of the `items` property.\n   */\n  @Watch('items')\n  handleItemsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        this.parsedItems = JSON.parse(newValue);\n      } catch (error) {\n        console.error('Error parsing menu items:', error);\n        this.parsedItems = [];\n      }\n    }\n  }\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 and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(\n    event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n  ) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    // If the menu is not open, check if the trigger is focused\n    // and the user presses Enter or ArrowDown, open the menu\n    if (!this.open) {\n      if (\n        (event.key === 'Enter' ||\n          event.key === 'ArrowDown' ||\n          event.key === ' ') &&\n        document.activeElement === this.triggerElement\n      ) {\n        event.preventDefault();\n        this.show();\n        // Then, put the focus on the first menuitem\n        const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n        if (firstMenuItem) {\n          requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n        }\n      }\n      return;\n    }\n\n    if (this.isHandlingKeyDown) return;\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    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')) {\n        nextFocusable.focus();\n      } else if (nextFocusable.matches('nv-menu')) {\n        nextFocusable.querySelector('nv-menuitem').focus();\n      }\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')) {\n        prevFocusable.focus();\n      } else if (prevFocusable.matches('nv-menu')) {\n        prevFocusable.querySelector('nv-menuitem').focus();\n      }\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      (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    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\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    // If the items attribute is provided, parse its value.\n    if (this.items) {\n      this.handleItemsChange(this.items);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Generates menu items from the `items` property.\n   * @param {MenuItem[]} items - The items to display in the menu.\n   * @returns {HTMLElement[]} The rendered items.\n   */\n  private renderMenuItems(items: MenuItem[]) {\n    return items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu\n            nested\n            placement=\"right-start\"\n            items={JSON.stringify(item.submenuItems)}\n          >\n            <nv-menuitem\n              slot=\"trigger\"\n              has-submenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n              label={item.label}\n            ></nv-menuitem>\n          </nv-menu>\n        );\n      }\n      return (\n        <nv-menuitem\n          disabled={item.disabled}\n          icon={item.icon as IconName}\n          shortcut={item.shortcut}\n          id={item.value}\n          name={item.label}\n          label={item.label}\n        ></nv-menuitem>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\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          {this.parsedItems.length > 0 ? (\n            <ul slot=\"content\">{this.renderMenuItems(this.parsedItems)}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-menuitem.js

@@ -1,4 +1,4 @@
-import { N as NvMenuitem$1, d as defineCustomElement$1 } from './p-863974b2.js';
+import { N as NvMenuitem$1, d as defineCustomElement$1 } from './p-18bc0291.js';
 
 const NvMenuitem = NvMenuitem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-popover.js

@@ -1,4 +1,4 @@
-import { N as NvPopover$1, d as defineCustomElement$1 } from './p-e46c2e31.js';
+import { N as NvPopover$1, d as defineCustomElement$1 } from './p-664c5a14.js';
 
 const NvPopover = NvPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-row.js

@@ -11,7 +11,7 @@ const NvRow$1 = /*@__PURE__*/ proxyCustomElement(class NvRow extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd6f9bbc1ed59bfc59a97728896c0443c8e104e59' }, h("slot", { key: '3d9c1c809524d0a4b9d8ad541ead8978d246c998' })));
+        return (h(Host, { key: '0b27560267e6f5186ca4237658ad35f3a436b70d' }, h("slot", { key: 'b2805eb6abe9d02b57f030c91344ecf4927136d8' })));
     }
     static get style() { return NvRowStyle0; }
 }, [4, "nv-row"]);

package/dist/components/nv-stack.js

@@ -20,7 +20,7 @@ const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aef0e6f873f68880d20b5ae9f4f56ece40e8a0ee', 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: 'd003e23ec3c9b4a5c4496bc9f4c170af467b311e' })));
+        return (h(Host, { key: '9869c0eaa423e363482bd4685dbd082dfba017f5', 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: 'd4b597ec95f71c47edf99d58d22c95a5540e904c' })));
     }
     static get style() { return NvStackStyle0; }
 }, [4, "nv-stack", {

package/dist/components/nv-table.js

@@ -312,14 +312,14 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (h(Host, { key: 'bf96a7c40a0960fc68778c33ec63a1d574993408' }, h("div", { key: '77e4ace0a9925ef6f5f7e1f51a2abc0c381d8ba5', class: "hidden" }, h("slot", { key: 'cdeb4abdd65d0e5de7064af63b1a39e661d4b49b' })), h("slot", { key: '4322aeb2858716be200a8d6851ef1d47ee0c44bb', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
+        return (h(Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, h("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, h("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), h("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), h("slot", { key: 'e5e490de2ff568c962368f39dbcd5c119e814b0d', name: "after" })));
+        })))))))), h("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/nv-toggle.js

@@ -63,8 +63,8 @@ const NvToggle$1 = /*@__PURE__*/ proxyCustomElement(class NvToggle extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6728159c0c7f622fbcc5017a116ec0dd1fe28b39', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '2155eacf39771790ca730f264f9c490f6e93794b', class: "input-container" }, h("input", { key: '588a638b678c7d26fd0050a54fbd86ab029c18d0', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: 'ba543a1282f8244449c3682bc43c8481d0c588dd', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'beab39ef75d445e43bf4d127ea9f0c7130bae25f', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'fd60c679cf1514fc2d01c39a8e13e6dc6fd3287e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '42582783ac08557d55bf8f80fa68f2f565f7208f', class: "description" }, h("slot", { key: '889f7408fd401816ffb6dff0c264e265911e3b79', name: "description" }, this.description))))));
+        return (h(Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, h("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, h("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/nv-tooltip.js

@@ -1,4 +1,4 @@
-import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-3561c093.js';
+import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-8c5a861b.js';
 
 const NvTooltip = NvTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-863974b2.js → p-18bc0291.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$1 } from './p-78b00756.js';
+import { d as defineCustomElement$1 } from './p-91b58443.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 *{pointer-events:none}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;
@@ -48,7 +48,7 @@ const NvMenuitem = /*@__PURE__*/ proxyCustomElement(class NvMenuitem extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2b59ea1b8582c9d5beac1e22c9547bebca9a19c0', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'bd72a3c8ffb0f2bfcecb11017493ee7476a8b34a', name: this.icon }), h("slot", { key: 'a3f396ca95fcb14fba1861f641e11abac06c7fe8' }), this.label && h("span", { key: 'ffffe933ab348dc617bb2d76f96e6e11e6ea5900', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cc76611b2a113cfa309ba3655d5c335d996380b3' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '3e90fdb722f845e24d6588b604f292dd7ee2ea4a', name: "chevron-right" })));
+        return (h(Host, { key: 'd1d9969a8e812f22d2097dca29b8e46b54115709', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '4dd5c1c2fdd741cec06ca112788d8d00863b0ac7', name: this.icon }), h("slot", { key: '6030b5a030b46281d54ca139e55163e8ede064fe' }), this.label && h("span", { key: 'f253f5eb0fed0853a46ed08c211a42bace1784f6', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'b7c445db91af3ae3e2a845a839fee7c77a768045' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '54bcd0bc879136d542b5e2c4241949f623258ad0', name: "chevron-right" })));
     }
     get el() { return this; }
     static get style() { return NvMenuitemStyle0; }
@@ -82,4 +82,4 @@ defineCustomElement();
 
 export { NvMenuitem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-863974b2.js.map
+//# sourceMappingURL=p-18bc0291.js.map

package/dist/components/{p-863974b2.js.map → p-18bc0291.js.map}

@@ -1 +1 @@
-{"file":"p-863974b2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B,CAAC;AACt8B,yBAAe,aAAa;;MCoBf,UAAU;IALvB;;;;;;;QA6BW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;KAuFtC;IArDS,oBAAoB,CAAC,KAAY;;QAEvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;KACJ;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC,CAAC;YACtE,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;gBACvC,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;aACjB;SACF;KACF;;;;IAMD,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,EAElD,8DAAa,EAEZ,IAAI,CAAC,KAAK,IAAI,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,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":[],"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    pointer-events: none;\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 {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to render custom content for the menu item.\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   * Text content for the menu item. If a more custom approach is needed, use\n   * the default slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\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  /**\n   * Represents the identifier or name associated with the menu item. This value\n   * will be emitted as part of the event data when the menu item is selected,\n   * enabling event handlers to identify the chosen item.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Fires when the menu item is selected (click or keypress). Will include the\n   * id and name of the menu item.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<{\n    /**\n     * The id of the menu item that was selected.\n     */\n    id?: HTMLElement['id'];\n    /**\n     * The name of the menu item that was selected.\n     */\n    name?: string;\n    /**\n     * Indicates if the menu item has a nested submenu.\n     */\n    hasSubmenu?: boolean;\n  }>;\n\n  private handleMenuItemSelect(event: Event) {\n    // If the element is disabled, stop propagation\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.menuitemSelected.emit({\n      id: this.el.id,\n      name: this.name,\n      hasSubmenu: this.hasSubmenu,\n    });\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this.handleMenuItemSelect(event);\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\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.el.click();\n      }\n    }\n  }\n\n  //#endregion EVENTS\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\n        <slot></slot>\n\n        {this.label && <span data-scope=\"text\">{this.label}</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}
+{"file":"p-18bc0291.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B,CAAC;AACt8B,yBAAe,aAAa;;MCoBf,UAAU;IALvB;;;;;;;QA6BW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;KAuFtC;IArDS,oBAAoB,CAAC,KAAY;;QAEvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;KACJ;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC,CAAC;YACtE,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;gBACvC,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;aACjB;SACF;KACF;;;;IAMD,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,EAElD,8DAAa,EAEZ,IAAI,CAAC,KAAK,IAAI,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,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":[],"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    pointer-events: none;\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 {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to render custom content for the menu item.\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   * Text content for the menu item. If a more custom approach is needed, use\n   * the default slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\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  /**\n   * Represents the identifier or name associated with the menu item. This value\n   * will be emitted as part of the event data when the menu item is selected,\n   * enabling event handlers to identify the chosen item.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Fires when the menu item is selected (click or keypress). Will include the\n   * id and name of the menu item.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<{\n    /**\n     * The id of the menu item that was selected.\n     */\n    id?: HTMLElement['id'];\n    /**\n     * The name of the menu item that was selected.\n     */\n    name?: string;\n    /**\n     * Indicates if the menu item has a nested submenu.\n     */\n    hasSubmenu?: boolean;\n  }>;\n\n  private handleMenuItemSelect(event: Event) {\n    // If the element is disabled, stop propagation\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.menuitemSelected.emit({\n      id: this.el.id,\n      name: this.name,\n      hasSubmenu: this.hasSubmenu,\n    });\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this.handleMenuItemSelect(event);\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\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.el.click();\n      }\n    }\n  }\n\n  //#endregion EVENTS\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\n        <slot></slot>\n\n        {this.label && <span data-scope=\"text\">{this.label}</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/{p-ef255589.js → p-56ef8131.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$1 } from './p-933d4d06.js';
+import { d as defineCustomElement$1 } from './p-9d6aaf76.js';
 
 const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
 const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
@@ -48,7 +48,7 @@ const NvFielddropdownitemcheck = /*@__PURE__*/ proxyCustomElement(class NvFieldd
         };
     }
     render() {
-        return (h(Host, { key: 'f9445369d2703e0a5fe4417b1968f9a25dc94743', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'a64195d14834b2a83d3b4c3f1451272fb97ff46a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (h(Host, { key: '69e403031200efea98b211ed6d69d3a21338bea0', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '0d12dbeef8532087d950bfc4e14994821b1cd3f1', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
     }
     get el() { return this; }
     static get style() { return NvFielddropdownitemcheckStyle0; }
@@ -82,4 +82,4 @@ defineCustomElement();
 
 export { NvFielddropdownitemcheck as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-ef255589.js.map
+//# sourceMappingURL=p-56ef8131.js.map

package/dist/components/{p-ef255589.js.map → p-56ef8131.js.map}

@@ -1 +1 @@
-{"file":"p-ef255589.js","mappings":";;;AAAA,MAAM,2BAA2B,GAAG,yWAAyW,CAAC;AAC9Y,uCAAe,2BAA2B;;MCc7B,wBAAwB;IALrC;;;;;;;;;QAeE,YAAO,GAAY,KAAK,CAAC;;;;QA+BhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QA+B3B,2BAAsB,GAAG,CAAC,KAA2B;YAC3D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;;YAE1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;;QAGM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF,CAAC;KAmBH;IAjBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,qBACf,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,GAC3B,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  cursor: pointer;\n  display: flex;\n  padding: var(--list-dropdown-item-padding-y)  var(--list-dropdown-item-padding-x);\n  border-radius: var(--list-dropdown-item-radius);\n\n  &:hover {\n    background-color: var(--components-list-dropdown-item-background-hover);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          label-placement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          role=\"option\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        ></nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-56ef8131.js","mappings":";;;AAAA,MAAM,2BAA2B,GAAG,yWAAyW,CAAC;AAC9Y,uCAAe,2BAA2B;;MCc7B,wBAAwB;IALrC;;;;;;;;;QAeE,YAAO,GAAY,KAAK,CAAC;;;;QA+BhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QA+B3B,2BAAsB,GAAG,CAAC,KAA2B;YAC3D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;;YAE1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;;QAGM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF,CAAC;KAmBH;IAjBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,qBACf,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,GAC3B,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  cursor: pointer;\n  display: flex;\n  padding: var(--list-dropdown-item-padding-y)  var(--list-dropdown-item-padding-x);\n  border-radius: var(--list-dropdown-item-radius);\n\n  &:hover {\n    background-color: var(--components-list-dropdown-item-background-hover);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          label-placement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          role=\"option\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        ></nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-0f59f38e.js → p-5a5f11c2.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { c as clsx } from './p-8a1a6e56.js';
 import { u as useCollapse, t as timeline } from './p-42301d8f.js';
 import { u as useFade } from './p-1daca48a.js';
-import { d as defineCustomElement$1 } from './p-78b00756.js';
+import { d as defineCustomElement$1 } from './p-91b58443.js';
 
 const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
 const NvBadgeStyle0 = nvBadgeCss;
@@ -44,7 +44,6 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
          * Controls the visibility of the badge. Will animate with fade and collapse.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
-        this._isHidden = this.hidden;
         /**
          * When true, the alert does not automatically close upon dismissing.
          * Useful for externally controlled component behavior.
@@ -113,6 +112,7 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
             this.leadIcon = this.icon;
         }
         if (this.hidden) {
+            this._isHidden = true;
             const { setCollapsed } = useCollapse(this.ref);
             const { setFadeOut } = useFade(this.ref);
             setCollapsed();
@@ -123,11 +123,11 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '63f256c6711546ca5304d46c2624e52f35dc2b46', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '8d97eed4a84f2f913e4f8cd64d08c806d9724f33', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: '181e608d22c697517ef55dbc4432ac06cdf6892e', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '914d75ef9d54e2c8c94c9c99a4efeb59aa654f1c', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: 'd32ff92840bba1cc983b24a4fee95af065ffef0e' }, this.label), this.dismissible && (h("button", { key: '1dbd1e432774e26936f93f7207e1f6eb93fa0819', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '8372fb5ba1dafd5758807485a5be3880a009567d', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '34c2c387727e6b68d37fe2b2ac68c82799356e3d', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '0c23dd58e48fce39d7935549c6289f87f1fb66af', name: this.leadIcon, size: "sm" })), h("slot", { key: '7485f570aa3cf519b030bedfa8ccf6a6d37d2c1b' }, this.label && h("span", { key: 'eb7afa0eb52582c6d782d2383dfe2eeb41a9649b' }, this.label)), this.dismissible && (h("button", { key: 'bc07eed3e1328a8009cb2c8add026a7f8a5335da', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'ab0b2c6224f4b8b147e8158856acbf1ab987b392', name: "x", size: "sm" })))));
     }
     get ref() { return this; }
     static get watchers() { return {
@@ -174,4 +174,4 @@ defineCustomElement();
 
 export { NvBadge as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-0f59f38e.js.map
+//# sourceMappingURL=p-5a5f11c2.js.map

package/dist/components/p-5a5f11c2.js.map

@@ -0,0 +1 @@
+{"file":"p-5a5f11c2.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@use \"../../styles/utils\" as utils;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  \"1\": var(--color-rainbow-1-text),\n  \"2\": var(--color-rainbow-2-text),\n  \"3\": var(--color-rainbow-3-text),\n  \"4\": var(--color-rainbow-4-text),\n  \"5\": var(--color-rainbow-5-text),\n  \"6\": var(--color-rainbow-6-text),\n  \"7\": var(--color-rainbow-7-text),\n  \"8\": var(--color-rainbow-8-text),\n  \"9\": var(--color-rainbow-9-text),\n  \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n  \"1\": var(--color-rainbow-1-icon),\n  \"2\": var(--color-rainbow-2-icon),\n  \"3\": var(--color-rainbow-3-icon),\n  \"4\": var(--color-rainbow-4-icon),\n  \"5\": var(--color-rainbow-5-icon),\n  \"6\": var(--color-rainbow-6-icon),\n  \"7\": var(--color-rainbow-7-icon),\n  \"8\": var(--color-rainbow-8-icon),\n  \"9\": var(--color-rainbow-9-icon),\n  \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n$color-rainbow-border: (\n  \"1\": var(--color-rainbow-1-border),\n  \"2\": var(--color-rainbow-2-border),\n  \"3\": var(--color-rainbow-3-border),\n  \"4\": var(--color-rainbow-4-border),\n  \"5\": var(--color-rainbow-5-border),\n  \"6\": var(--color-rainbow-6-border),\n  \"7\": var(--color-rainbow-7-border),\n  \"8\": var(--color-rainbow-8-border),\n  \"9\": var(--color-rainbow-9-border),\n  \"10\": var(--color-rainbow-10-border)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  border-style: solid;\n  border-width: 0.5px;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-text, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  border-color: map.get($color-rainbow-border, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, \"xs\"), size),\n          map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <slot>{this.label && <span>{this.label}</span>}</slot>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-e46c2e31.js → p-664c5a14.js}

@@ -2364,7 +2364,7 @@ const NvPopover = /*@__PURE__*/ proxyCustomElement(class NvPopover extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6c72a8b8adc53dea2bd79b4b68afbeebc0281453' }, h("slot", { key: 'c9b7c7327346a53a5e0183785c2ae7f908a46826', name: "trigger" }), h("div", { key: 'd95998b8efc7e3f1c346d4dc516ccdf08bcceb48', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '59a84c8daa368251b10a1f64a4e1335b9f5716dd', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '1ab56763bc4ff602d83042a10c67d633b81e5ae9', name: "content" }))));
+        return (h(Host, { key: 'efab8d78e1163d23e197ca04786b9f99f248ce05' }, h("slot", { key: 'b8197a385e5d9cda08d6b3e0232c052fb7238d01', name: "trigger" }), h("div", { key: '480c3cc8352bc833216cd64c8bfcf75ba9c79130', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '8b1b10a15427ef05bc267460161e4a53be4cc3d1', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '8c9a8708a36fae6cac5e533b5c1a3128d7375195', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2406,4 +2406,4 @@ defineCustomElement();
 
 export { NvPopover as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-e46c2e31.js.map
+//# sourceMappingURL=p-664c5a14.js.map