@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/cjs/nv-iconbutton.nv-loader.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-iconbutton.nv-loader.entry.cjs.js","sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus.focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\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 name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex={this.disableTabindex ? -1 : 0}\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["h","Host","clsx"],"mappings":"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"}
+{"version":3,"file":"nv-iconbutton.nv-loader.entry.cjs.js","sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": calc(var(--button-xs-icon-button-padding) - 1px),\n  \"sm\": calc(var(--button-sm-icon-button-padding) - 1px),\n  \"md\": calc(var(--button-md-icon-button-padding) - 1px),\n  \"lg\": calc(var(--button-lg-icon-button-padding) - 1px)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus.focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\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 name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex={this.disableTabindex ? -1 : 0}\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["h","Host","clsx"],"mappings":"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"}

package/dist/cjs/nv-iconbutton_2.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-B1na8x6M.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
-const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
+const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:calc(var(--button-xs-icon-button-padding) - 1px);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:calc(var(--button-sm-icon-button-padding) - 1px);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:calc(var(--button-md-icon-button-padding) - 1px);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:calc(var(--button-lg-icon-button-padding) - 1px);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
 
 const NvIconbutton = class {
     constructor(hostRef) {
@@ -71,16 +71,15 @@ const NvIconbutton = class {
          * @param {Event} event - The click event.
          */
         this.handleClick = (event) => {
-            var _a, _b, _c, _d;
             if (this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type === 'submit') {
-                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+                this.internals?.form?.requestSubmit();
             }
             if (this.type === 'reset') {
-                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+                this.internals?.form?.reset();
             }
         };
     }
@@ -126,7 +125,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '81d7f0bfd1e64ecbb640c2f02b7e73cd7b2d3aa4', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'cec3ee02a7fb0882557c8742c8f9d785835e79d0', size: this.size }), !this.loading && index.h("nv-icon", { key: '4892b3b78b291b159403a63ced6a150dd7def1c0', name: this.name, size: this.size }), index.h("slot", { key: 'b1204bf2dd026c1232b5e8209fd29f21a8aa704f' })));
+        return (index.h(index.Host, { key: '2e0011f5ebb23512aa89756ae7fd5ad81586f8b1', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '435692a00ed0af3548c2ac875e573af00daf5d62', size: this.size }), !this.loading && index.h("nv-icon", { key: '00b08fbd43724ad7ce54c96cd052ba637e111ece', name: this.name, size: this.size }), index.h("slot", { key: 'bb61e7db6115c9017007f15320dd5b2f6ccd9671' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -156,7 +155,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '4347ec4ee393edb5e23a60e253bae73d0f9db583', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = nvLoaderCss;

package/dist/cjs/nv-menu.cjs.entry.js

@@ -42,8 +42,7 @@ const NvMenu = class {
          */
         this.renderMenuItems = () => {
             return this.items.map(item => {
-                var _a;
-                if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                if (item.hasSubmenu && item.submenuItems?.length > 0) {
                     return (index.h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, index.h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) })));
                 }
                 return (index.h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) }));
@@ -126,7 +125,7 @@ const NvMenu = class {
             return;
         }
         const menuContent = this.el.querySelector('[slot="content"]');
-        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        const menuItems = Array.from(menuContent.childNodes).filter(item => item.matches?.('nv-menuitem, nv-menu'));
         let currentIndex = menuItems.indexOf(document.activeElement);
         if (currentIndex === -1)
             currentIndex = menuItems.indexOf(document.activeElement.parentElement);
@@ -194,7 +193,7 @@ const NvMenu = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '1602501e810755ef8a625ea566203eaae32c52e7' }, index.h("slot", { key: '7a2b75f51e33820f5f608a44efc5b9659af54789', name: "trigger" }), index.h("nv-popover", { key: '2ac84fe36a9844dcf58f9f8d87fec16ae25c35b6', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
+        return (index.h(index.Host, { key: '1139a5dbbbb52e2f32c5d1410b4bdb87156cfd60' }, index.h("slot", { key: 'f2202b254512643f0a16ebcda3715438a7c7aa2a', name: "trigger" }), index.h("nv-popover", { key: '2f49bd9af8ff253ab662b5054717e0d44690f47d', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-menu.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-menu.entry.cjs.js","sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)\n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)\n          var(--menu-contextual-divider-padding-x)\n          var(--menu-contextual-divider-padding-bottom)\n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n\n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\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-start';\n\n  /**\n   * List of items used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\n   *\n   * @example\n   * items = [{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\",\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: {\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?: InstanceType<typeof NvMenu>['items'];\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  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  private handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail;\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  //#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({ bubbles: false })\n  menuitemSelected: EventEmitter<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /* eslint-disable nova/native-event-listener */\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  /* eslint-enable nova/native-event-listener */\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        this.focusFirstItem();\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  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\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 = () => {\n    return this.items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n            <nv-menuitem\n              slot=\"trigger\"\n              hasSubmenu\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              onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\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          onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\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          onOpenChanged={this.handleOpenChanged.bind(this)}\n        >\n          {this.items ? (\n            <ul slot=\"content\">{this.renderMenuItems()}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"nv-menu.entry.cjs.js","sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)\n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)\n          var(--menu-contextual-divider-padding-x)\n          var(--menu-contextual-divider-padding-bottom)\n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n\n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\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-start';\n\n  /**\n   * List of items used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\n   *\n   * @example\n   * items = [{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\",\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: {\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?: InstanceType<typeof NvMenu>['items'];\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  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  private handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail;\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  //#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({ bubbles: false })\n  menuitemSelected: EventEmitter<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /* eslint-disable nova/native-event-listener */\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  /* eslint-enable nova/native-event-listener */\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        this.focusFirstItem();\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  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\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 = () => {\n    return this.items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n            <nv-menuitem\n              slot=\"trigger\"\n              hasSubmenu\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              onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\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          onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\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          onOpenChanged={this.handleOpenChanged.bind(this)}\n        >\n          {this.items ? (\n            <ul slot=\"content\">{this.renderMenuItems()}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/nv-menuitem.cjs.entry.js

@@ -48,7 +48,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '3c9a394f8af5ab7b57061ddfdd3e07b9fce17847', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '3f36901afb278a608f8eaeb423e8aca08c055187', name: this.icon }), index.h("slot", { key: 'a54ca41926c4f9374af669125529befc6ab454e2' }), this.label && index.h("span", { key: 'c83199ffd4e5559b22d06392edf5ad6c8e83cf96', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'c7a052d69c1d8cd33238f9f88405596a46649e3c' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '57de548ca08d6fb045223f242dee568a29b6270f', name: "chevron-right" })));
+        return (index.h(index.Host, { key: 'e21f532b90f018810befe6a03ef4cb75fe05aea2', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'a63bdcae06b1311440ec95ecf002a8b9a130aea8', name: this.icon }), index.h("slot", { key: 'f25c0104369b8d70ce35d4bf74cf92c1bcdf66c6' }), this.label && index.h("span", { key: '5ab5691b53857876c8e13e91f975b41e255999da', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'c93777342da74e2cba4dfbbdf6657814b3996f41' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '87a58745651c54efb1c96841846363e377ee6fca', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-notification-bullet.cjs.entry.js

@@ -51,8 +51,7 @@ const NvNotificationBullet = class {
     }
     //#region RENDER
     render() {
-        var _a;
-        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const displayCount = this.count ?? 0;
         const displayText = displayCount > 99 ? '99+' : String(displayCount);
         if (displayCount <= 0) {
             return index.h(index.Host, { style: { display: 'none' } });

package/dist/cjs/nv-notification-bullet.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-notification-bullet.entry.cjs.js","sources":["src/components/nv-notification-bullet/styles/nv-notification-bullet.scss?tag=nv-notification-bullet","src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-notification-bullet {\n  @include bullet-base-styles();\n  position: relative; // Needed for cross-border pseudo-element positioning\n\n\n  /* Intention: brand */\n  &.nv-notification-bullet-brand {\n    .nv-notification-bullet {\n      @include bullet-inner-styles();\n      &.nv-notification-bullet-high {\n        @include bullet-brand-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-brand-low();\n      }\n    }\n  }\n\n  /* Intention: neutral */\n  &.nv-notification-bullet-neutral {\n    @include bullet-inner-styles();\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-neutral-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-neutral-low();\n      }\n    }\n  }\n\n  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */\n  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */\n  &.nv-notification-bullet-with-cross-border::before {\n    content: '';\n    position: absolute;\n    top: 55%;\n    left: 45%;\n    transform: translate(-50%, -50%);\n    width: calc(var(--sidebar-notification-bullet-size) + 1.5px);\n    height: calc(var(--sidebar-notification-bullet-size) * 1.5);\n    border-radius: var(--radius-rounded-full);\n    /* Intelligently inherits background color from parent via CSS variable */\n    /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */\n    background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));\n    z-index: -1;\n    pointer-events: none;\n  }\n  \n  /* Cross-border for reduced size (when sidebar is collapsed) */\n  nv-sidebar[collapsed] &.nv-notification-bullet-with-cross-border::before {\n    width: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n    height: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n  }\n  \n  /* Size: reduced */\n  .nv-notification-bullet.nv-notification-bullet-reduced,\n  /* When inside a collapsed sidebar, use reduced size automatically */\n  nv-sidebar[collapsed] & .nv-notification-bullet {\n    @include bullet-styles-reduced();\n  }\n}\n\n","import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return <Host style={{ display: 'none' }}></Host>;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,8kHAA8kH;;MCYjmH,oBAAoB,GAAA,MAAA;AALjC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAqCE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,SAAS;AAEhD;;AAEG;AAEM,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AAoE5C;;;;IAhES,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS;;;QAGvB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC;YACvE,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,EAAE;AAClE,gBAAA,OAAO,gBAAgB;;;QAG3B,OAAO,OAAO,CAAC;;IAGT,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,QAAQ;;;QAGtB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC;YACrE,IAAI,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE;AAC3D,gBAAA,OAAO,eAAe;;;QAG1B,OAAO,MAAM,CAAC;;;IAGhB,MAAM,GAAA;;QACJ,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AACpC,QAAA,MAAM,WAAW,GAAG,YAAY,GAAG,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAEpE,QAAA,IAAI,YAAY,IAAI,CAAC,EAAE;AACrB,YAAA,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,CAAS;;AAGlD,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,GAAG,EAAE;AACjE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;AACnC,QAAA,MAAM,cAAc,GAAG,CAA0B,uBAAA,EAAA,SAAS,EAAE;AAC5D,QAAA,MAAM,aAAa,GAAG,CAA0B,uBAAA,EAAA,QAAQ,EAAE;AAC1D,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC;AACvB,cAAE;cACA,EAAE;QAEN,QACED,OAAC,CAAAC,UAAI,IACH,KAAK,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EACtB,WAAW,GAAG,0CAA0C,GAAG,EAC7D,CAAE,CAAA,EAAA,EAEFD,OAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAE,0BAA0B,aAAa,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,EAChE,YAAA,EAAA,CAAG,EAAA,YAAY,CAAgB,cAAA,CAAA,EAAA,EAE1C,WAAW,CACP,CACF;;;;;;;;"}
+{"version":3,"file":"nv-notification-bullet.entry.cjs.js","sources":["src/components/nv-notification-bullet/styles/nv-notification-bullet.scss?tag=nv-notification-bullet","src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-notification-bullet {\n  @include bullet-base-styles();\n  position: relative; // Needed for cross-border pseudo-element positioning\n\n\n  /* Intention: brand */\n  &.nv-notification-bullet-brand {\n    .nv-notification-bullet {\n      @include bullet-inner-styles();\n      &.nv-notification-bullet-high {\n        @include bullet-brand-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-brand-low();\n      }\n    }\n  }\n\n  /* Intention: neutral */\n  &.nv-notification-bullet-neutral {\n    @include bullet-inner-styles();\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-neutral-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-neutral-low();\n      }\n    }\n  }\n\n  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */\n  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */\n  &.nv-notification-bullet-with-cross-border::before {\n    content: '';\n    position: absolute;\n    top: 55%;\n    left: 45%;\n    transform: translate(-50%, -50%);\n    width: calc(var(--sidebar-notification-bullet-size) + 1.5px);\n    height: calc(var(--sidebar-notification-bullet-size) * 1.5);\n    border-radius: var(--radius-rounded-full);\n    /* Intelligently inherits background color from parent via CSS variable */\n    /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */\n    background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));\n    z-index: -1;\n    pointer-events: none;\n  }\n  \n  /* Cross-border for reduced size (when sidebar is collapsed) */\n  nv-sidebar[collapsed] &.nv-notification-bullet-with-cross-border::before {\n    width: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n    height: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n  }\n  \n  /* Size: reduced */\n  .nv-notification-bullet.nv-notification-bullet-reduced,\n  /* When inside a collapsed sidebar, use reduced size automatically */\n  nv-sidebar[collapsed] & .nv-notification-bullet {\n    @include bullet-styles-reduced();\n  }\n}\n\n","import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return <Host style={{ display: 'none' }}></Host>;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,8kHAA8kH;;MCYjmH,oBAAoB,GAAA,MAAA;AALjC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAqCE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,SAAS;AAEhD;;AAEG;AAEM,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AAoE5C;;;;IAhES,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS;;;QAGvB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC;YACvE,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,EAAE;AAClE,gBAAA,OAAO,gBAAgB;;;QAG3B,OAAO,OAAO,CAAC;;IAGT,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,QAAQ;;;QAGtB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC;YACrE,IAAI,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE;AAC3D,gBAAA,OAAO,eAAe;;;QAG1B,OAAO,MAAM,CAAC;;;IAGhB,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AACpC,QAAA,MAAM,WAAW,GAAG,YAAY,GAAG,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAEpE,QAAA,IAAI,YAAY,IAAI,CAAC,EAAE;AACrB,YAAA,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,CAAS;;AAGlD,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,GAAG,EAAE;AACjE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;AACnC,QAAA,MAAM,cAAc,GAAG,CAA0B,uBAAA,EAAA,SAAS,EAAE;AAC5D,QAAA,MAAM,aAAa,GAAG,CAA0B,uBAAA,EAAA,QAAQ,EAAE;AAC1D,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC;AACvB,cAAE;cACA,EAAE;QAEN,QACED,OAAC,CAAAC,UAAI,IACH,KAAK,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EACtB,WAAW,GAAG,0CAA0C,GAAG,EAC7D,CAAE,CAAA,EAAA,EAEFD,OAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAE,0BAA0B,aAAa,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,EAChE,YAAA,EAAA,CAAG,EAAA,YAAY,CAAgB,cAAA,CAAA,EAAA,EAE1C,WAAW,CACP,CACF;;;;;;;;"}

package/dist/cjs/nv-notification.cjs.entry.js

@@ -84,12 +84,10 @@ const NvNotification = class {
         await this.showAnimation();
     }
     getDefaultIcon() {
-        var _a;
-        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+        return this.iconByFeedback[this.feedback] ?? 'info-circle';
     }
     getAriaRole() {
-        var _a;
-        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+        return this.roleByFeedback[this.feedback] ?? 'status';
     }
     getAriaLive() {
         return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
@@ -132,9 +130,9 @@ const NvNotification = class {
         }
     }
     async dismissAnimation() {
-        var _a;
-        const position = (_a = this.el
-            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const position = this.el
+            .closest('nv-notificationcontainer')
+            ?.getAttribute('position');
         const destination = this.getSlideDestination(position);
         const { fadeOut } = fade_animation.useFade(this.container, { duration: 300 });
         const { slideX, slideY, setSlideReset } = slide_animation.useSlide(this.container, {
@@ -166,8 +164,7 @@ const NvNotification = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c;
-        return (index.h(index.Host, { key: 'cf0f39e0565a264b676e0ca569ec79169771d269', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: 'ed2a5e50f0a6975c652f658e62a271c0b476f7d2', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '9eccf1b9f29f581bf77255b9e2bebebfdc233302', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '73890097ad80af4d86646bb83f2ae99878164db4', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'c852478c25ae05d5219453234db95a420b5c5a1e', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: 'b06042bf55e8bedc07a60f23a27b07160776c0e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '7666dfb18169cdfea8eb8c603b20a5ba7075824c', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'f6e651737cf630bb89d40b7664329596355a8ea0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: 'ae5d89db2b36c4c81c7b46aada5f50bd6eb4aa90', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '24d01abd694f7f9a316345f9d88716d1c0a47234', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: 'a1aa0bcc33a42d7b36bcd364a155d41f527cc96a', "data-scope": "actions" }, index.h("slot", { key: 'b09c21bed0fd559bf2f694f861385444c2ddbbf0', name: "actions" })))))));
+        return (index.h(index.Host, { key: '64c79843ff7bdd1a4ae001a60a8db540947b8412', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, index.h("div", { key: 'b51c9c3829b122476564726e20a1da112059035b', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '3ee952fb7dc41f54fa35c88d12d4d512b96eece1', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '4fa53d42ff6ea7b5e90a01cfcffec167368aece6', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'e116c962672fb2237382b7dc2d3c6feae62bfced', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '62a1da7ac952aa704965aca61ba6f98eb12341a2', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '4ddc91bc5568f54c6f8f3114720c0821c103f1c3', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'b7b7c678c995d68be52ca6711e55e5a8fa43fe68', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '5e02782e07e7e2720cef3ec8c7f06321ce53940d', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '4886e5e490c5f1baf429c48666fd715f43113a71', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '1d75b6276a8622bc607cf296336abc734e02320a', "data-scope": "actions" }, index.h("slot", { key: '6cab1b879e9b0582a415edd5d096a2b794b82ea4', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-notification.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-notification.entry.cjs.js","sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@use \"../../../styles/focus-ring\" as focus;\n\nnv-notification {\n  @include root-styles();\n\n  [data-scope=\"container\"] {\n    @include container-styles();\n\n    [data-scope=\"icon\"] {\n      @include icon-styles();\n    }\n\n    [data-scope=\"dismiss\"] {\n      @include dismiss-btn-styles();\n    }\n\n    [data-scope=\"content\"] {\n      @include content-styles();\n\n      [data-scope=\"heading\"] {\n        @include header-styles();\n      }\n\n      [data-scope=\"message\"] {\n        @include message-styles();\n      }\n\n      [data-scope=\"actions\"] {\n        @include actions-styles();\n      }\n    }\n  }\n\n  @each $feedback in $feedback-variants {\n    &[feedback=\"#{$feedback}\"] {\n      [data-scope=\"container\"] {\n        @include feedback-color($feedback);\n\n        [data-scope=\"icon\"] {\n          @include icon-color($feedback);\n        }\n      }\n\n      & > [data-scope=\"close\"] {\n        @include focus.focus-ring(map.get($border-color-map, $feedback));\n      }\n    }\n  }\n\n  @each $emphasis in $emphasis-variants {\n    &[emphasis=\"#{$emphasis}\"] {\n      [data-scope=\"container\"] {\n        @include emphasis-styles($emphasis);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  FeedbackColors,\n  NotificationEmphasis,\n  NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n  tag: 'nv-notification',\n  styleUrl: 'styles/nv-notification.scss',\n  shadow: false,\n})\nexport class NvNotification {\n  @Element() el: HTMLNvNotificationElement;\n  private container: HTMLElement;\n  private headingSlot: HTMLElement;\n  private messageSlot: HTMLElement;\n  private actionsSlot: HTMLElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Set a unique ID for the notification. Used for aria attributes and managing\n   * multiple notifications.\n   */\n  @Prop({ reflect: true })\n  readonly uid: string = uuidv4();\n\n  /**\n   * Specifies the notification type which determines the color and default icon.\n   */\n  @Prop({ reflect: true })\n  readonly feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Adjusts the emphasis to make the notification more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n  /**\n   * Short and concise text for the notification title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Main content for the notification. For more complex content, use the\n   * content slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Icon associated with the notification, defaults vary based on the feedback\n   * type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the notification to be dismissed via a close button (x). The\n   * notification is not dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the notification.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the notification will be hidden initially, but internal changes\n   * will not be in a controlled state. Good for animating the notification in.\n   */\n  @Prop({ reflect: true })\n  readonly initiallyHidden: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Dismisses the notification with an animation, after the animation is\n   * complete, the hiddenChanged event will be emitted with the value of true,\n   * and the hidden prop will be set to true.\n   */\n  @Method()\n  async dismiss() {\n    await this.dismissAnimation();\n  }\n\n  /**\n   * Sets the hidden prop to false, and shows the notification with an\n   * animation, after the animation is complete, the hiddenChanged event will be\n   * emitted with the value of false.\n   */\n  @Method()\n  async show() {\n    await this.showAnimation();\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event({ bubbles: false })\n  hiddenChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region INTERNAL\n\n  private iconByFeedback: Record<FeedbackColors, IconName> = {\n    [FeedbackColors.Warning]: 'alert-circle',\n    [FeedbackColors.Information]: 'info-circle',\n    [FeedbackColors.Success]: 'circle-check',\n    [FeedbackColors.Error]: 'alert-triangle',\n    [FeedbackColors.Neutral]: 'help',\n  };\n\n  private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n    [FeedbackColors.Error]: 'alert',\n    [FeedbackColors.Warning]: 'alert',\n    [FeedbackColors.Information]: 'status',\n    [FeedbackColors.Success]: 'status',\n    [FeedbackColors.Neutral]: 'status',\n  };\n\n  private getDefaultIcon(): IconName {\n    return this.iconByFeedback[this.feedback] ?? 'info-circle';\n  }\n\n  private getAriaRole(): AriaRole {\n    return this.roleByFeedback[this.feedback] ?? 'status';\n  }\n\n  private getAriaLive(): AriaLive {\n    return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n  }\n\n  private getHeadingId(): string | null {\n    return this.heading ? `nv-notification-${this.uid}-heading` : null;\n  }\n\n  private getMessageId(): string | null {\n    return this.message ? `nv-notification-${this.uid}-message` : null;\n  }\n\n  private async showAnimation() {\n    this.hidden = false;\n\n    const { setFadeIn } = useFade(this.container);\n    const { expand } = useCollapse(this.el, {\n      duration: 300,\n      overflow: 'visible',\n    });\n    const { slideY, setSlideY } = useSlide(this.container, {\n      duration: 300,\n    });\n\n    setSlideY(-100);\n    setFadeIn();\n    await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n    this.hiddenChanged.emit(false);\n  }\n\n  private getSlideDestination(pos?: NotificationPosition): {\n    /** The axis to slide. */\n    axis: 'x' | 'y';\n    /** The destination value. */\n    to: number;\n  } {\n    switch (pos) {\n      case NotificationPosition.TopRight:\n      case NotificationPosition.BottomRight:\n        return { axis: 'x', to: 100 }; // right\n      case NotificationPosition.TopLeft:\n      case NotificationPosition.BottomLeft:\n        return { axis: 'x', to: -100 }; // left\n      case NotificationPosition.TopCenter:\n        return { axis: 'y', to: -100 }; // up\n      case NotificationPosition.BottomCenter:\n        return { axis: 'y', to: 100 }; // down\n      default:\n        return { axis: 'x', to: 100 }; // fallback\n    }\n  }\n\n  private async dismissAnimation() {\n    const position = this.el\n      .closest('nv-notificationcontainer')\n      ?.getAttribute('position') as NotificationPosition | undefined;\n\n    const destination = this.getSlideDestination(position);\n\n    const { fadeOut } = useFade(this.container, { duration: 300 });\n    const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n      duration: 500,\n    });\n    const { collapse } = useCollapse(this.el, {\n      duration: 500,\n      overflow: 'visible',\n    });\n    const slide =\n      destination.axis === 'x'\n        ? slideX({ from: 0, to: destination.to })\n        : slideY({ from: 0, to: destination.to });\n\n    setSlideReset();\n    await parallel(fadeOut, slide, collapse).start();\n\n    this.hidden = true;\n    this.hiddenChanged.emit(true);\n  }\n\n  //#endregion INTERNAL\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n    this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n    this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n    if (this.initiallyHidden) this.hidden = true;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role={this.getAriaRole()}\n        aria-live={this.getAriaLive()}\n        aria-atomic\n        aria-labelledby={this.getHeadingId() ?? null}\n        aria-describedby={this.getMessageId() ?? null}\n        tabindex=\"-1\"\n      >\n        <div data-scope=\"container\" ref={el => (this.container = el)}>\n          {this.dismissible && (\n            <button\n              data-scope=\"dismiss\"\n              type=\"button\"\n              onClick={this.dismiss.bind(this)}\n            >\n              <nv-icon name=\"x\" size=\"sm\" />\n            </button>\n          )}\n\n          <nv-icon\n            name={this.icon ?? this.getDefaultIcon()}\n            size=\"md\"\n            data-scope=\"icon\"\n          ></nv-icon>\n\n          <div data-scope=\"content\">\n            {(this.heading || this.headingSlot) && (\n              <p id={this.getHeadingId()} data-scope=\"heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </p>\n            )}\n            {(this.message || this.messageSlot) && (\n              <p id={this.getMessageId()} data-scope=\"message\">\n                <slot name=\"content\">{this.message}</slot>\n              </p>\n            )}\n\n            {this.actionsSlot && (\n              <div data-scope=\"actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":["uuidv4","FeedbackColors","useFade","useCollapse","useSlide","parallel","NotificationPosition","h","Host"],"mappings":"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"}
+{"version":3,"file":"nv-notification.entry.cjs.js","sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@use \"../../../styles/focus-ring\" as focus;\n\nnv-notification {\n  @include root-styles();\n\n  [data-scope=\"container\"] {\n    @include container-styles();\n\n    [data-scope=\"icon\"] {\n      @include icon-styles();\n    }\n\n    [data-scope=\"dismiss\"] {\n      @include dismiss-btn-styles();\n    }\n\n    [data-scope=\"content\"] {\n      @include content-styles();\n\n      [data-scope=\"heading\"] {\n        @include header-styles();\n      }\n\n      [data-scope=\"message\"] {\n        @include message-styles();\n      }\n\n      [data-scope=\"actions\"] {\n        @include actions-styles();\n      }\n    }\n  }\n\n  @each $feedback in $feedback-variants {\n    &[feedback=\"#{$feedback}\"] {\n      [data-scope=\"container\"] {\n        @include feedback-color($feedback);\n\n        [data-scope=\"icon\"] {\n          @include icon-color($feedback);\n        }\n      }\n\n      & > [data-scope=\"close\"] {\n        @include focus.focus-ring(map.get($border-color-map, $feedback));\n      }\n    }\n  }\n\n  @each $emphasis in $emphasis-variants {\n    &[emphasis=\"#{$emphasis}\"] {\n      [data-scope=\"container\"] {\n        @include emphasis-styles($emphasis);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  FeedbackColors,\n  NotificationEmphasis,\n  NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n  tag: 'nv-notification',\n  styleUrl: 'styles/nv-notification.scss',\n  shadow: false,\n})\nexport class NvNotification {\n  @Element() el: HTMLNvNotificationElement;\n  private container: HTMLElement;\n  private headingSlot: HTMLElement;\n  private messageSlot: HTMLElement;\n  private actionsSlot: HTMLElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Set a unique ID for the notification. Used for aria attributes and managing\n   * multiple notifications.\n   */\n  @Prop({ reflect: true })\n  readonly uid: string = uuidv4();\n\n  /**\n   * Specifies the notification type which determines the color and default icon.\n   */\n  @Prop({ reflect: true })\n  readonly feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Adjusts the emphasis to make the notification more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n  /**\n   * Short and concise text for the notification title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Main content for the notification. For more complex content, use the\n   * content slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Icon associated with the notification, defaults vary based on the feedback\n   * type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the notification to be dismissed via a close button (x). The\n   * notification is not dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the notification.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the notification will be hidden initially, but internal changes\n   * will not be in a controlled state. Good for animating the notification in.\n   */\n  @Prop({ reflect: true })\n  readonly initiallyHidden: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Dismisses the notification with an animation, after the animation is\n   * complete, the hiddenChanged event will be emitted with the value of true,\n   * and the hidden prop will be set to true.\n   */\n  @Method()\n  async dismiss() {\n    await this.dismissAnimation();\n  }\n\n  /**\n   * Sets the hidden prop to false, and shows the notification with an\n   * animation, after the animation is complete, the hiddenChanged event will be\n   * emitted with the value of false.\n   */\n  @Method()\n  async show() {\n    await this.showAnimation();\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event({ bubbles: false })\n  hiddenChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region INTERNAL\n\n  private iconByFeedback: Record<FeedbackColors, IconName> = {\n    [FeedbackColors.Warning]: 'alert-circle',\n    [FeedbackColors.Information]: 'info-circle',\n    [FeedbackColors.Success]: 'circle-check',\n    [FeedbackColors.Error]: 'alert-triangle',\n    [FeedbackColors.Neutral]: 'help',\n  };\n\n  private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n    [FeedbackColors.Error]: 'alert',\n    [FeedbackColors.Warning]: 'alert',\n    [FeedbackColors.Information]: 'status',\n    [FeedbackColors.Success]: 'status',\n    [FeedbackColors.Neutral]: 'status',\n  };\n\n  private getDefaultIcon(): IconName {\n    return this.iconByFeedback[this.feedback] ?? 'info-circle';\n  }\n\n  private getAriaRole(): AriaRole {\n    return this.roleByFeedback[this.feedback] ?? 'status';\n  }\n\n  private getAriaLive(): AriaLive {\n    return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n  }\n\n  private getHeadingId(): string | null {\n    return this.heading ? `nv-notification-${this.uid}-heading` : null;\n  }\n\n  private getMessageId(): string | null {\n    return this.message ? `nv-notification-${this.uid}-message` : null;\n  }\n\n  private async showAnimation() {\n    this.hidden = false;\n\n    const { setFadeIn } = useFade(this.container);\n    const { expand } = useCollapse(this.el, {\n      duration: 300,\n      overflow: 'visible',\n    });\n    const { slideY, setSlideY } = useSlide(this.container, {\n      duration: 300,\n    });\n\n    setSlideY(-100);\n    setFadeIn();\n    await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n    this.hiddenChanged.emit(false);\n  }\n\n  private getSlideDestination(pos?: NotificationPosition): {\n    /** The axis to slide. */\n    axis: 'x' | 'y';\n    /** The destination value. */\n    to: number;\n  } {\n    switch (pos) {\n      case NotificationPosition.TopRight:\n      case NotificationPosition.BottomRight:\n        return { axis: 'x', to: 100 }; // right\n      case NotificationPosition.TopLeft:\n      case NotificationPosition.BottomLeft:\n        return { axis: 'x', to: -100 }; // left\n      case NotificationPosition.TopCenter:\n        return { axis: 'y', to: -100 }; // up\n      case NotificationPosition.BottomCenter:\n        return { axis: 'y', to: 100 }; // down\n      default:\n        return { axis: 'x', to: 100 }; // fallback\n    }\n  }\n\n  private async dismissAnimation() {\n    const position = this.el\n      .closest('nv-notificationcontainer')\n      ?.getAttribute('position') as NotificationPosition | undefined;\n\n    const destination = this.getSlideDestination(position);\n\n    const { fadeOut } = useFade(this.container, { duration: 300 });\n    const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n      duration: 500,\n    });\n    const { collapse } = useCollapse(this.el, {\n      duration: 500,\n      overflow: 'visible',\n    });\n    const slide =\n      destination.axis === 'x'\n        ? slideX({ from: 0, to: destination.to })\n        : slideY({ from: 0, to: destination.to });\n\n    setSlideReset();\n    await parallel(fadeOut, slide, collapse).start();\n\n    this.hidden = true;\n    this.hiddenChanged.emit(true);\n  }\n\n  //#endregion INTERNAL\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n    this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n    this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n    if (this.initiallyHidden) this.hidden = true;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role={this.getAriaRole()}\n        aria-live={this.getAriaLive()}\n        aria-atomic\n        aria-labelledby={this.getHeadingId() ?? null}\n        aria-describedby={this.getMessageId() ?? null}\n        tabindex=\"-1\"\n      >\n        <div data-scope=\"container\" ref={el => (this.container = el)}>\n          {this.dismissible && (\n            <button\n              data-scope=\"dismiss\"\n              type=\"button\"\n              onClick={this.dismiss.bind(this)}\n            >\n              <nv-icon name=\"x\" size=\"sm\" />\n            </button>\n          )}\n\n          <nv-icon\n            name={this.icon ?? this.getDefaultIcon()}\n            size=\"md\"\n            data-scope=\"icon\"\n          ></nv-icon>\n\n          <div data-scope=\"content\">\n            {(this.heading || this.headingSlot) && (\n              <p id={this.getHeadingId()} data-scope=\"heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </p>\n            )}\n            {(this.message || this.messageSlot) && (\n              <p id={this.getMessageId()} data-scope=\"message\">\n                <slot name=\"content\">{this.message}</slot>\n              </p>\n            )}\n\n            {this.actionsSlot && (\n              <div data-scope=\"actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":["uuidv4","FeedbackColors","useFade","useCollapse","useSlide","parallel","NotificationPosition","h","Host"],"mappings":"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"}

package/dist/cjs/nv-notificationcontainer.cjs.entry.js

@@ -30,7 +30,7 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, index.h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
+        return (index.h(index.Host, { key: '5dee0dc22cb8917d8134e2f256996118e3e30b42', class: `position-${this.position}` }, index.h("slot", { key: '14664d70fb1840877d80eda1b3c7804457ffa67f' })));
     }
 };
 NvNotificationContainer.style = nvNotificationcontainerCss;

package/dist/cjs/nv-popover.cjs.entry.js

@@ -2,8 +2,9 @@
 
 var index = require('./index-B1na8x6M.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');
-var grow_animation = require('./grow.animation-BrWzyoUA.js');
+var grow_animation = require('./grow.animation-ynu_HmA_.js');
 require('./style-value-types.es-B1vLqX9m.js');
+var events_utils = require('./events.utils-BE6R5q9C.js');
 
 /**
  * Custom positioning reference element.
@@ -1696,11 +1697,10 @@ const NvPopover = class {
          * @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 ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+            if (this.triggerElement?.contains(event.target))
                 return;
             this.open = false;
         };
@@ -1740,14 +1740,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            grow_animation.addEventListeners(this.closeEvents, document, this);
+            events_utils.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                grow_animation.addEventListeners(this.clickEvents, this.triggerElement, this);
+                events_utils.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                grow_animation.addEventListeners(this.outsideClickEvents, document, this);
+                events_utils.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                grow_animation.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                events_utils.addEventListeners(this.hoverEvents, this.triggerElement, this);
             }
             this.eventsAttached = true;
         }
@@ -1871,14 +1871,14 @@ const NvPopover = class {
         this.attachEventListeners();
     }
     disconnectedCallback() {
-        grow_animation.removeEventListeners(this.closeEvents, document, this);
+        events_utils.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            grow_animation.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            events_utils.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            grow_animation.removeEventListeners(this.outsideClickEvents, document, this);
+            events_utils.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            grow_animation.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            events_utils.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
@@ -1891,7 +1891,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8ef71227900185e903bd0003771074ba5d071aac' }, index.h("slot", { key: '84ccbb797f486d76ed650b50e5004bffc2521ddb', name: "trigger" }), index.h("div", { key: '66dc1bf520a2bf6f0a1c4e91b091b0b4941807c4', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'a1ab4831292b9ab60ebfd8dd478c3685944dbe79', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '2d9ee411891f956ff3ccd7b74d956e5b952e1af0', name: "content" }))));
+        return (index.h(index.Host, { key: '3505c77a628a1c612d937703777b72459a71e256' }, index.h("slot", { key: '36596c5ca1b182ed5d9f723b81398cf54923bd83', name: "trigger" }), index.h("div", { key: 'efc6da5c69cefad2611f0b9fa96d072ddc48d07a', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '9439cf1c7fdadfd9538c4ed186d4c54300d00e95', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '868cd1ce1ac648f4446aa6d4f86069551c208d1f', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {