@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.43

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

@@ -1 +1 @@
-{"version":3,"file":"nv-menuitem.js","sourceRoot":"","sources":["../../../src/components/nv-menuitem/nv-menuitem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAmBvB;;GAEG;AAMH,MAAM,OAAO,UAAU;IALvB;QAkBE;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAQnC;;WAEG;QAEM,eAAU,GAAY,KAAK,CAAC;KAyEtC;IApDS,oBAAoB,CAAC,KAAY;QACvC,+CAA+C;QAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;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;IACL,CAAC;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,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,CAAC;gBACD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC;IAED,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;YACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;YAClD,2EAAiB,MAAM;gBACrB,8DAAa,CACR;YACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO;YAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\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\nexport type MenuitemSelectedEventDetail = {\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/**\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  /**\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<MenuitemSelectedEventDetail>;\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') {\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(event);\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        <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,"file":"nv-menuitem.js","sourceRoot":"","sources":["../../../src/components/nv-menuitem/nv-menuitem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,UAAU;IALvB;QAyBE;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAQnC;;WAEG;QAEM,eAAU,GAAY,KAAK,CAAC;KAuFtC;IArDS,oBAAoB,CAAC,KAAY;QACvC,+CAA+C;QAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;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;IACL,CAAC;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,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,CAAC;gBACD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;IACH,CAAC;IAED,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;YACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;YAElD,8DAAa;YAEZ,IAAI,CAAC,KAAK,IAAI,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ;YACzD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO;YAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\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"]}

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

@@ -5,7 +5,7 @@ nv-popover {
 nv-popover:has([fluid]:not([fluid=false])) {
   display: block;
 }
-nv-popover [data-scope=popover] {
+nv-popover > [data-scope=popover] {
   width: max-content;
   background-color: var(--components-popover-background);
   border-color: var(--components-popover-border);
@@ -20,10 +20,10 @@ nv-popover [data-scope=popover] {
   z-index: 1;
   box-shadow: var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity);
 }
-nv-popover [data-scope=popover][hidden]:not([hidden=false]) {
+nv-popover > [data-scope=popover][hidden]:not([hidden=false]) {
   display: none;
 }
-nv-popover [data-scope=arrow] {
+nv-popover > [data-scope=popover] > [data-scope=arrow] {
   background-color: var(--components-popover-background);
   position: absolute;
   border-color: var(--components-popover-border);
@@ -36,10 +36,10 @@ nv-popover [data-scope=arrow] {
   transform: rotate(45deg);
   border-radius: 1px;
 }
-nv-popover [slot=content] {
+nv-popover > [data-scope=popover] > [slot=content] {
   position: relative;
   z-index: 1;
 }
-nv-popover slot-fb {
+nv-popover > slot-fb {
   display: none;
 }

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

@@ -6,7 +6,7 @@ const NvPopoverDocs = {
     stories: [
         {
             name: 'Default',
-            template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a popover."))),
+            template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover."))),
         },
         {
             name: nameof(x => x.open),
@@ -15,14 +15,14 @@ const NvPopoverDocs = {
         },
         {
             name: nameof(x => x.triggerMode),
-            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "trigger-mode": "hover" }, h("nv-button", { slot: "trigger" }, "Hover Me"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "controlled", open: true }, h("nv-button", { slot: "trigger" }, "Controlled"), h("p", { slot: "content" }, "This is a controlled popover.")))),
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "trigger-mode": "hover" }, h("nv-button", { slot: "trigger" }, "Hover Me"), h("p", { slot: "content" }, "This is a Hover popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "controlled", open: true }, h("nv-button", { slot: "trigger" }, "Controlled"), h("p", { slot: "content" }, "This is a Controlled popover.")))),
         },
         {
             name: nameof(x => x.placement),
             args: {
                 hasArrow: true,
             },
-            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Top"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", { slot: "trigger" }, "Bottom"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "left" }, h("nv-button", { slot: "trigger" }, "Left"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "right" }, h("nv-button", { slot: "trigger" }, "Right"), h("p", { slot: "content" }, "This is a popover.")))),
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Top"), h("p", { slot: "content" }, "This is a Top popover.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", { slot: "trigger" }, "Bottom"), h("p", { slot: "content" }, "This is a Bottom popover.")), h("nv-popover", { "data-storybook-args": true, placement: "left" }, h("nv-button", { slot: "trigger" }, "Left"), h("p", { slot: "content" }, "This is a Left popover.")), h("nv-popover", { "data-storybook-args": true, placement: "right" }, h("nv-button", { slot: "trigger" }, "Right"), h("p", { slot: "content" }, "This is a Right popover.")))),
         },
         {
             name: nameof(x => x.groupName),

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

@@ -1 +1 @@
-{"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n  component: 'nv-popover',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.open),\n      args: { open: true },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a pre opened popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.triggerMode),\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args trigger-mode=\"hover\">\n            <nv-button slot=\"trigger\">Hover Me</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"click\">\n            <nv-button slot=\"trigger\">Click Me</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n            <nv-button slot=\"trigger\">Controlled</nv-button>\n            <p slot=\"content\">This is a controlled popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.placement),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Top</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\">\n            <nv-button slot=\"trigger\">Bottom</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"left\">\n            <nv-button slot=\"trigger\">Left</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"right\">\n            <nv-button slot=\"trigger\">Right</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.groupName),\n      args: {\n        groupName: 'popover-group-1',\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 1</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 2</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 3</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.offset),\n      args: {\n        offset: 30,\n        placement: 'right',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Offset</nv-button>\n          <p slot=\"content\">This is a popover with 30px offset.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.hasArrow),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Arrow</nv-button>\n          <p slot=\"content\">This is a popover with an arrow.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.disableFlip),\n      args: {\n        open: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            disable-flip\n            placement=\"bottom\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n            <p slot=\"content\">This will always stay to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n            <p slot=\"content\">This could flip to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n            <p slot=\"content\">This could flip to the top.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.shiftPadding),\n      args: {\n        shiftPadding: 40,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Shift Padding</nv-button>\n          <p slot=\"content\">This is a popover with 40px padding.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.enterDelay),\n      args: {\n        enterDelay: 1000,\n        triggerMode: 'hover',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n          <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n        </nv-popover>\n      ),\n    },\n  ],\n};\n\nexport default NvPopoverDocs;\n"]}
+{"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n  component: 'nv-popover',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a Click popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.open),\n      args: { open: true },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a pre opened popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.triggerMode),\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args trigger-mode=\"hover\">\n            <nv-button slot=\"trigger\">Hover Me</nv-button>\n            <p slot=\"content\">This is a Hover popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"click\">\n            <nv-button slot=\"trigger\">Click Me</nv-button>\n            <p slot=\"content\">This is a Click popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n            <nv-button slot=\"trigger\">Controlled</nv-button>\n            <p slot=\"content\">This is a Controlled popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.placement),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Top</nv-button>\n            <p slot=\"content\">This is a Top popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\">\n            <nv-button slot=\"trigger\">Bottom</nv-button>\n            <p slot=\"content\">This is a Bottom popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"left\">\n            <nv-button slot=\"trigger\">Left</nv-button>\n            <p slot=\"content\">This is a Left popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"right\">\n            <nv-button slot=\"trigger\">Right</nv-button>\n            <p slot=\"content\">This is a Right popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.groupName),\n      args: {\n        groupName: 'popover-group-1',\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 1</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 2</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 3</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.offset),\n      args: {\n        offset: 30,\n        placement: 'right',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Offset</nv-button>\n          <p slot=\"content\">This is a popover with 30px offset.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.hasArrow),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Arrow</nv-button>\n          <p slot=\"content\">This is a popover with an arrow.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.disableFlip),\n      args: {\n        open: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            disable-flip\n            placement=\"bottom\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n            <p slot=\"content\">This will always stay to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n            <p slot=\"content\">This could flip to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n            <p slot=\"content\">This could flip to the top.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.shiftPadding),\n      args: {\n        shiftPadding: 40,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Shift Padding</nv-button>\n          <p slot=\"content\">This is a popover with 40px padding.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.enterDelay),\n      args: {\n        enterDelay: 1000,\n        triggerMode: 'hover',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n          <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n        </nv-popover>\n      ),\n    },\n  ],\n};\n\nexport default NvPopoverDocs;\n"]}

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

@@ -51,7 +51,7 @@ export class NvPopover {
         this.shiftPadding = 16;
         /**
          * Use this to set a delay before the popover appears on hover. If the mouse
-         * leaves before this time, the popover won’t show. This only works when the
+         * leaves before this time, the popover won't show. This only works when the
          * trigger mode is set to `hover`.
          */
         this.enterDelay = 0;
@@ -60,15 +60,24 @@ export class NvPopover {
          * prevent the parent popover from closing when the child popover is opened.
          */
         this.nested = false;
+        /**
+         * Handles the click outside event.
+         * @param {MouseEvent | TouchEvent} event - The event object.
+         */
         this.handleClickOutside = (event) => {
+            var _a;
             // This popover should close when the user clicks outside of it.
             if (this.el.contains(event.target))
                 return;
-            if (this.triggerElement.contains(event.target))
+            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
                 return;
             this.hide();
         };
         this.clickEvents = [['click', this.toggle]];
+        this.outsideClickEvents = [
+            ['click', this.handleClickOutside],
+            ['touchstart', this.handleClickOutside],
+        ];
         this.hoverEvents = [
             [
                 'focus',
@@ -143,10 +152,14 @@ export class NvPopover {
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
             addEventListeners(this.closeEvents, document, this);
-            if (this.triggerMode === 'click')
+            if (this.triggerMode === 'click') {
                 addEventListeners(this.clickEvents, this.triggerElement, this);
-            if (this.triggerMode === 'hover')
+                // Add document click and touch listeners
+                addEventListeners(this.outsideClickEvents, document, this);
+            }
+            if (this.triggerMode === 'hover') {
                 addEventListeners(this.hoverEvents, this.triggerElement, this);
+            }
             this.eventsAttached = true;
         }
     }
@@ -212,16 +225,6 @@ export class NvPopover {
         if (event.target !== this.el && event.detail === true)
             this.hide();
     }
-    handleDocumentClick(event) {
-        if (this.triggerMode === 'controlled')
-            return;
-        this.handleClickOutside(event);
-    }
-    handleDocumentTouch(event) {
-        if (this.triggerMode === 'controlled')
-            return;
-        this.handleClickOutside(event);
-    }
     async handleOpenChange(open) {
         // Prevent multiple animations from running at the same time.
         while (this.isAnimating) {
@@ -282,16 +285,26 @@ export class NvPopover {
     }
     disconnectedCallback() {
         removeEventListeners(this.closeEvents, document, this);
-        if (this.triggerMode === 'click')
+        if (this.triggerMode === 'click') {
             removeEventListeners(this.clickEvents, this.triggerElement, this);
+            // Remove document listeners
+            removeEventListeners(this.outsideClickEvents, document, this);
+        }
         if (this.triggerMode === 'hover')
             removeEventListeners(this.hoverEvents, this.triggerElement, this);
+        // Reset flag so events can be reattached if component is reconnected
+        this.eventsAttached = false;
+        // Clean up any pending timeouts
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c3befa1e8d317dd2a934de3a3bc8bcf032f547f3' }, h("slot", { key: 'ed004517edbd180e3e4d6f6adddc7f282a59fe64', name: "trigger" }), h("div", { key: '3c55ca065c9c1f293572a297078da4296b4a5a3f', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'e356e91d35f468ed1f98eb44e6974d3438f9d532', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '2a71c9727ae7e3cbf13595ffb4b9d56c6966bd46', name: "content" }))));
+        return (h(Host, { key: '038098b3cbb0a0fc87c31c979bfe384fbf95add6' }, h("slot", { key: '8dd5130f87a35b0c7b9842469b58b9b770d5c78c', name: "trigger" }), h("div", { key: 'b94338976ce829a3cc521908b1e5d5b1c7aa5cb2', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '37af4bb20d6780fcdb7307d9607ebe126b449e9d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '5fb2ea0cf920ae31890a5449dd1c23f4c932836c', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {
@@ -369,7 +382,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "trigger-mode",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'click'"
             },
             "placement": {
@@ -395,7 +408,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "placement",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'bottom'"
             },
             "groupName": {
@@ -415,7 +428,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "group-name",
-                "reflect": false
+                "reflect": true
             },
             "offset": {
                 "type": "number",
@@ -434,7 +447,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "offset",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "6"
             },
             "hasArrow": {
@@ -454,7 +467,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "has-arrow",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "disableFlip": {
@@ -474,7 +487,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "disable-flip",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "shiftPadding": {
@@ -494,7 +507,7 @@ export class NvPopover {
                 "getter": false,
                 "setter": false,
                 "attribute": "shift-padding",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "16"
             },
             "enterDelay": {
@@ -509,12 +522,12 @@ export class NvPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use this to set a delay before the popover appears on hover. If the mouse\nleaves before this time, the popover won\u2019t show. This only works when the\ntrigger mode is set to `hover`."
+                    "text": "Use this to set a delay before the popover appears on hover. If the mouse\nleaves before this time, the popover won't show. This only works when the\ntrigger mode is set to `hover`."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "enter-delay",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "nested": {
@@ -629,18 +642,6 @@ export class NvPopover {
                 "target": "document",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "click",
-                "method": "handleDocumentClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "touchstart",
-                "method": "handleDocumentTouch",
-                "target": "document",
-                "capture": false,
-                "passive": true
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  Method,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  /**\n   * A map of popover groups, used to manage the opening and closing of multiple\n   */\n  groups: Map<\n    string,\n    {\n      /**\n       * The popover element that opened the group.\n       */\n      openedBy: HTMLNvPopoverElement;\n    }\n  >;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n  private eventsAttached = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop()\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop()\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop()\n  readonly offset: number = 6;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop()\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop()\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop()\n  readonly shiftPadding: number = 16;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won’t show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n      if (this.triggerMode === 'click')\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n      if (this.triggerMode === 'hover')\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.hide();\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  @Listen('touchstart', { target: 'document' })\n  handleDocumentTouch(event: TouchEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement.contains(event.target as Node)) return;\n    this.hide();\n  };\n\n  private clickEvents: EventsAndListeners = [['click', this.toggle]];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.hide();\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n    if (this.triggerMode === 'click')\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  Method,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  /**\n   * A map of popover groups, used to manage the opening and closing of multiple\n   */\n  groups: Map<\n    string,\n    {\n      /**\n       * The popover element that opened the group.\n       */\n      openedBy: HTMLNvPopoverElement;\n    }\n  >;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n  private eventsAttached = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop({ reflect: true })\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop({ reflect: true })\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop({ reflect: true })\n  readonly offset: number = 6;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop({ reflect: true })\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop({ reflect: true })\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop({ reflect: true })\n  readonly shiftPadding: number = 16;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won't show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n\n      if (this.triggerMode === 'click') {\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n\n        // Add document click and touch listeners\n        addEventListeners(this.outsideClickEvents, document, this);\n      }\n\n      if (this.triggerMode === 'hover') {\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      }\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Handles the click outside event.\n   * @param {MouseEvent | TouchEvent} event - The event object.\n   */\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement?.contains(event.target as Node)) return;\n    this.hide();\n  };\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.hide();\n  }\n\n  private clickEvents: EventsAndListeners = [['click', this.toggle]];\n\n  private outsideClickEvents: EventsAndListeners = [\n    ['click', this.handleClickOutside],\n    ['touchstart', this.handleClickOutside],\n  ];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.hide();\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n\n    if (this.triggerMode === 'click') {\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n      // Remove document listeners\n      removeEventListeners(this.outsideClickEvents, document, this);\n    }\n\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n\n    // Reset flag so events can be reattached if component is reconnected\n    this.eventsAttached = false;\n\n    // Clean up any pending timeouts\n    if (this.hideTimeout) clearTimeout(this.hideTimeout);\n    if (this.showTimeout) clearTimeout(this.showTimeout);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '9baad27eb331d2e0d68be8cb2e3dd2cacc7f913c' }, h("slot", { key: 'f346a7568b71a1de72ddc7c36bbf0df21f8e9968' })));
+        return (h(Host, { key: 'd6f9bbc1ed59bfc59a97728896c0443c8e104e59' }, h("slot", { key: '3d9c1c809524d0a4b9d8ad541ead8978d246c998' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c8b211684fe80277d45e7c69304eb80fa0bc78d1', 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: 'adce599bad0bfcbbf4fde1c6e01cd605e5161ce8' })));
+        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' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

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

@@ -311,14 +311,14 @@ export class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (h(Host, { key: 'b740dfd8e0db88881f7ca062eaab5b3373b236c2' }, h("div", { key: '784d4b910c00ce5dc6b91768f457d0e649b70431', class: "hidden" }, h("slot", { key: '0891b88350c4f4e50634870ae5bafab7f8bdb46a' })), h("slot", { key: 'bc895b4327694ba7b660fce776e6ce1c1817c5dc', 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: '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 &&
             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: 'b4b5a8442f3a6982fb6d268c8b076a4d361b933c', name: "after" })));
+        })))))))), h("slot", { key: 'e5e490de2ff568c962368f39dbcd5c119e814b0d', name: "after" })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

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

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0ea7a73c5b656d0d7f9342a9526dc00a66a94f83', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'eb294c704b9f3568e03af1817a302d2edfe24486', class: "input-container" }, h("input", { key: '777b6e7172691aba435751364c5908f381390f23', 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: '92dbdb51e8c9fc231572009d37e274e070334292', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'bf6cb8ff071c11d7809580a5dee61a1dfd89c112', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'db77b501162725dcf3b05b3d7c4b26d0f933ac8b', class: "description" }, h("slot", { key: 'a201c736b5237e88ee0d8caa3999874caa7f85f3', name: "description" }, this.description))))));
+        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))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }
@@ -94,7 +94,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "input-id",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "uuidv4()"
             },
             "name": {
@@ -114,7 +114,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "value": {
                 "type": "string",
@@ -133,7 +133,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "value",
-                "reflect": false
+                "reflect": true
             },
             "label": {
                 "type": "string",
@@ -152,7 +152,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "labelPlacement": {
                 "type": "string",
@@ -196,7 +196,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "hide-label",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "description": {
@@ -255,7 +255,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
@@ -275,7 +275,7 @@ export class NvToggle {
                 "getter": false,
                 "setter": false,
                 "attribute": "readonly",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"nv-toggle.js","sourceRoot":"","sources":["../../../src/components/nv-toggle/nv-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAIpC;;;GAGG;AAOH,MAAM,OAAO,QAAQ;IANrB;QASE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;;WAKG;QAEM,YAAO,GAAW,MAAM,EAAE,CAAC;QA2BpC;;;WAGG;QAEM,cAAS,GAAY,KAAK,CAAC;QASpC,sDAAsD;QAEtD,YAAO,GAAY,KAAK,CAAC;QAEzB,wDAAwD;QAE/C,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;WAGG;QAEM,aAAQ,GAAY,KAAK,CAAC;KA2FpC;IA9EC,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAElB;;;OAGG;IAEH,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IAEH,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAChC,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D;YAED,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE;YAEN,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAC1D,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC;oBAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT;gBAEA,CAAC,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAClD,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-toggle',\n  styleUrl: 'nv-toggle.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvToggle {\n  @Element() el!: HTMLNvToggleElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-toggle.js","sourceRoot":"","sources":["../../../src/components/nv-toggle/nv-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-toggle',\n  styleUrl: 'nv-toggle.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvToggle {\n  @Element() el!: HTMLNvToggleElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}