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

package/dist/esm/nv-accordion.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-accordion.entry.js","sources":["src/components/nv-accordion/styles/nv-accordion.scss?tag=nv-accordion","src/components/nv-accordion/nv-accordion.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion {\n  @include accordion-root();\n\n  .nv-accordion__footer {\n    @include accordion-footer();\n\n    &:empty {\n      @include accordion-footer-empty();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  Element,\n  forceUpdate,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @slot default - Slot for custom content (optional, ignored if data is provided)\n */\n@Component({\n  tag: 'nv-accordion',\n  styleUrl: 'styles/nv-accordion.scss',\n  shadow: false,\n})\nexport class NvAccordion {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Data to display as a list of items (title, subtitle, content).\n   */\n  @Prop({ reflect: false })\n  readonly data: {\n    /** Unique identifier of the item */\n    id: string;\n    /** Item title */\n    title: string;\n    /** Optional subtitle */\n    subtitle?: string;\n    /** Main content */\n    content: string;\n    /** Optional footer */\n    footer?: string;\n    /** Disabled state */\n    disabled?: boolean;\n  }[] = [];\n\n  /**\n   * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'accordion' | 'multi' = 'accordion';\n\n  /**\n   * Index of open items (external control possible)\n   */\n  @Prop({ reflect: false, mutable: true })\n  openIndexes?: number[] = [];\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private updatingFromInternal: boolean = false;\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item's open state changes\n   * @bind openIndexes\n   */\n  @Event({ bubbles: false })\n  openIndexesChanged: EventEmitter<number[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens an item by its index (Public API)\n   * @param {number} index Index of the item to open\n   */\n  @Method()\n  async open(index: number) {\n    this.toggleItem(index, true);\n  }\n\n  /**\n   * Closes an item by its index (Public API)\n   * @param {number} index Index of the item to close\n   */\n  @Method()\n  async close(index: number) {\n    this.toggleItem(index, false);\n  }\n\n  /**\n   * Toggles an item's state (internal)\n   * @param {number} index Item index\n   * @param {boolean} [forceOpen] Force open (true) or close (false)\n   */\n  private toggleItem(index: number, forceOpen?: boolean) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const item = items[index];\n\n    if (!item || item.disabled) {\n      console.warn('[toggleItem] Item not found or disabled:', index);\n      this.openIndexesChanged.emit([...(this.openIndexes || [])]);\n      return;\n    }\n\n    let openIndexes = [...(this.openIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n\n    if (this.mode === 'accordion') {\n      openIndexes =\n        forceOpen === false || (forceOpen === undefined && isOpen)\n          ? []\n          : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (forceOpen === true && !isOpen) {\n        openIndexes.push(index);\n      } else if (forceOpen === undefined) {\n        openIndexes = isOpen\n          ? openIndexes.filter(i => i !== index)\n          : [...openIndexes, index];\n      }\n    }\n\n    this.updatingFromInternal = true;\n    this.openIndexes = [...openIndexes];\n    this.updateChildrenState();\n    this.updatingFromInternal = false;\n\n    this.openIndexesChanged.emit([...openIndexes]);\n  }\n\n  /**\n   * Updates the open state of child elements based on openIndexes\n   */\n  private async updateChildrenState() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    items.forEach((item, i) => {\n      const shouldBeOpen = (this.openIndexes || []).includes(i);\n      item.open = shouldBeOpen;\n      item.mode = this.mode;\n      item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n      forceUpdate(item);\n    });\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  /**\n   * Listens to itemToggle events from nv-accordion-item elements\n   * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n   */\n  @Listen('itemToggle')\n  onItemToggle(event: CustomEvent<boolean>) {\n    event.stopPropagation();\n    if (this.updatingFromInternal) {\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const targetItem = event.target as HTMLNvAccordionItemElement;\n    const index = items.indexOf(targetItem);\n\n    if (index !== -1) {\n      this.toggleItem(index, event.detail);\n    } else {\n      console.warn('[onItemToggle] Target item not found in items list');\n    }\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('openIndexes')\n  onOpenIndexesChange(\n    newValue: number[] | undefined,\n    oldValue: number[] | undefined,\n  ) {\n    if (\n      !this.updatingFromInternal &&\n      newValue !== undefined &&\n      newValue !== oldValue\n    ) {\n      this.updateChildrenState();\n    }\n  }\n\n  @Watch('mode')\n  onModeChange() {\n    this.updateChildrenState();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.openIndexes === undefined) {\n      this.openIndexes = [];\n    }\n  }\n\n  async componentDidLoad() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n    if (\n      !this.data?.length &&\n      (!this.openIndexes || this.openIndexes.length === 0)\n    ) {\n      const childOpenIndexes = items\n        .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))\n        .filter(i => i !== -1);\n\n      if (childOpenIndexes.length > 0) {\n        this.updatingFromInternal = true;\n        this.openIndexes = [...childOpenIndexes];\n        this.updatingFromInternal = false;\n\n        this.openIndexesChanged.emit([...this.openIndexes]);\n      }\n    }\n\n    // Ensure children are in sync with current openIndexes state\n    await this.updateChildrenState();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.data?.length ? (\n          this.data.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemTitle={item.title}\n              disabled={item.disabled}\n              open={(this.openIndexes || []).includes(i)}\n              mode={this.mode}\n            >\n              {item.subtitle ? (\n                <div slot=\"header\">\n                  <div class=\"nv-accordion-item__header-content\">\n                    <span class=\"nv-accordion-item__title\">{item.title}</span>\n                    <span class=\"nv-accordion-item__subtitle\">\n                      {item.subtitle}\n                    </span>\n                  </div>\n                </div>\n              ) : null}\n              <div slot=\"content\">{item.content}</div>\n              {item.footer && <div slot=\"footer\">{item.footer}</div>}\n            </nv-accordion-item>\n          ))\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-accordion.entry.js","sources":["src/components/nv-accordion/styles/nv-accordion.scss?tag=nv-accordion","src/components/nv-accordion/nv-accordion.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion {\n  @include accordion-root();\n\n  .nv-accordion__footer {\n    @include accordion-footer();\n\n    &:empty {\n      @include accordion-footer-empty();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  Element,\n  forceUpdate,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @slot default - Slot for custom content (optional, ignored if data is provided)\n */\n@Component({\n  tag: 'nv-accordion',\n  styleUrl: 'styles/nv-accordion.scss',\n  shadow: false,\n})\nexport class NvAccordion {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Data to display as a list of items (title, subtitle, content).\n   */\n  @Prop({ reflect: false })\n  readonly data: {\n    /** Unique identifier of the item */\n    id: string;\n    /** Item title */\n    title: string;\n    /** Optional subtitle */\n    subtitle?: string;\n    /** Main content */\n    content: string;\n    /** Optional footer */\n    footer?: string;\n    /** Disabled state */\n    disabled?: boolean;\n  }[] = [];\n\n  /**\n   * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'accordion' | 'multi' = 'accordion';\n\n  /**\n   * Index of open items (external control possible)\n   */\n  @Prop({ reflect: false, mutable: true })\n  openIndexes?: number[] = [];\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private updatingFromInternal: boolean = false;\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item's open state changes\n   * @bind openIndexes\n   */\n  @Event({ bubbles: false })\n  openIndexesChanged: EventEmitter<number[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens an item by its index (Public API)\n   * @param {number} index Index of the item to open\n   */\n  @Method()\n  async open(index: number) {\n    this.toggleItem(index, true);\n  }\n\n  /**\n   * Closes an item by its index (Public API)\n   * @param {number} index Index of the item to close\n   */\n  @Method()\n  async close(index: number) {\n    this.toggleItem(index, false);\n  }\n\n  /**\n   * Toggles an item's state (internal)\n   * @param {number} index Item index\n   * @param {boolean} [forceOpen] Force open (true) or close (false)\n   */\n  private toggleItem(index: number, forceOpen?: boolean) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const item = items[index];\n\n    if (!item || item.disabled) {\n      console.warn('[toggleItem] Item not found or disabled:', index);\n      this.openIndexesChanged.emit([...(this.openIndexes || [])]);\n      return;\n    }\n\n    let openIndexes = [...(this.openIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n\n    if (this.mode === 'accordion') {\n      openIndexes =\n        forceOpen === false || (forceOpen === undefined && isOpen)\n          ? []\n          : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (forceOpen === true && !isOpen) {\n        openIndexes.push(index);\n      } else if (forceOpen === undefined) {\n        openIndexes = isOpen\n          ? openIndexes.filter(i => i !== index)\n          : [...openIndexes, index];\n      }\n    }\n\n    this.updatingFromInternal = true;\n    this.openIndexes = [...openIndexes];\n    this.updateChildrenState();\n    this.updatingFromInternal = false;\n\n    this.openIndexesChanged.emit([...openIndexes]);\n  }\n\n  /**\n   * Updates the open state of child elements based on openIndexes\n   */\n  private async updateChildrenState() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    items.forEach((item, i) => {\n      const shouldBeOpen = (this.openIndexes || []).includes(i);\n      item.open = shouldBeOpen;\n      item.mode = this.mode;\n      item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n      forceUpdate(item);\n    });\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  /**\n   * Listens to itemToggle events from nv-accordion-item elements\n   * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n   */\n  @Listen('itemToggle')\n  onItemToggle(event: CustomEvent<boolean>) {\n    event.stopPropagation();\n    if (this.updatingFromInternal) {\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const targetItem = event.target as HTMLNvAccordionItemElement;\n    const index = items.indexOf(targetItem);\n\n    if (index !== -1) {\n      this.toggleItem(index, event.detail);\n    } else {\n      console.warn('[onItemToggle] Target item not found in items list');\n    }\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('openIndexes')\n  onOpenIndexesChange(\n    newValue: number[] | undefined,\n    oldValue: number[] | undefined,\n  ) {\n    if (\n      !this.updatingFromInternal &&\n      newValue !== undefined &&\n      newValue !== oldValue\n    ) {\n      this.updateChildrenState();\n    }\n  }\n\n  @Watch('mode')\n  onModeChange() {\n    this.updateChildrenState();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.openIndexes === undefined) {\n      this.openIndexes = [];\n    }\n  }\n\n  async componentDidLoad() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n    if (\n      !this.data?.length &&\n      (!this.openIndexes || this.openIndexes.length === 0)\n    ) {\n      const childOpenIndexes = items\n        .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))\n        .filter(i => i !== -1);\n\n      if (childOpenIndexes.length > 0) {\n        this.updatingFromInternal = true;\n        this.openIndexes = [...childOpenIndexes];\n        this.updatingFromInternal = false;\n\n        this.openIndexesChanged.emit([...this.openIndexes]);\n      }\n    }\n\n    // Ensure children are in sync with current openIndexes state\n    await this.updateChildrenState();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.data?.length ? (\n          this.data.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemTitle={item.title}\n              disabled={item.disabled}\n              open={(this.openIndexes || []).includes(i)}\n              mode={this.mode}\n            >\n              {item.subtitle ? (\n                <div slot=\"header\">\n                  <div class=\"nv-accordion-item__header-content\">\n                    <span class=\"nv-accordion-item__title\">{item.title}</span>\n                    <span class=\"nv-accordion-item__subtitle\">\n                      {item.subtitle}\n                    </span>\n                  </div>\n                </div>\n              ) : null}\n              <div slot=\"content\">{item.content}</div>\n              {item.footer && <div slot=\"footer\">{item.footer}</div>}\n            </nv-accordion-item>\n          ))\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,gdAAgd;;MCuB1d,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AASE;;AAEG;AAEM,QAAA,IAAI,CAAA,IAAA,GAaP,EAAE;AAER;;AAEG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,WAAW;AAElD;;AAEG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAc,EAAE;;;;AAOnB,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAkO9C;;;;AA5MC;;;AAGG;IAEH,MAAM,IAAI,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC;;AAG9B;;;AAGG;IAEH,MAAM,KAAK,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;;AAG/B;;;;AAIG;IACK,UAAU,CAAC,KAAa,EAAE,SAAmB,EAAA;AACnD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACd;AACjC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;AAEzB,QAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC1B,YAAA,OAAO,CAAC,IAAI,CAAC,0CAA0C,EAAE,KAAK,CAAC;AAC/D,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC;YAC3D;;AAGF,QAAA,IAAI,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE1C,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;YAC7B,WAAW;gBACT,SAAS,KAAK,KAAK,KAAK,SAAS,KAAK,SAAS,IAAI,MAAM;AACvD,sBAAE;AACF,sBAAE,CAAC,KAAK,CAAC;;aACR;AACL,YAAA,IAAI,SAAS,KAAK,KAAK,EAAE;AACvB,gBAAA,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;;AAC7C,iBAAA,IAAI,SAAS,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;AACxC,gBAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;AAClB,iBAAA,IAAI,SAAS,KAAK,SAAS,EAAE;AAClC,gBAAA,WAAW,GAAG;AACZ,sBAAE,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK;AACrC,sBAAE,CAAC,GAAG,WAAW,EAAE,KAAK,CAAC;;;AAI/B,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,WAAW,CAAC;QACnC,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK;QAEjC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC;;AAGhD;;AAEG;AACK,IAAA,MAAM,mBAAmB,GAAA;AAC/B,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACd;QAEjC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACxB,YAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AACzD,YAAA,IAAI,CAAC,IAAI,GAAG,YAAY;AACxB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;YACnE,WAAW,CAAC,IAAI,CAAC;AACnB,SAAC,CAAC;;;AAIJ;;;AAGG;AAEH,IAAA,YAAY,CAAC,KAA2B,EAAA;QACtC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B;;AAGF,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACd;AACjC,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAoC;QAC7D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC;;aAC/B;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC;;;;;;;IAUtE,mBAAmB,CACjB,QAA8B,EAC9B,QAA8B,EAAA;QAE9B,IACE,CAAC,IAAI,CAAC,oBAAoB;AAC1B,YAAA,QAAQ,KAAK,SAAS;YACtB,QAAQ,KAAK,QAAQ,EACrB;YACA,IAAI,CAAC,mBAAmB,EAAE;;;IAK9B,YAAY,GAAA;QACV,IAAI,CAAC,mBAAmB,EAAE;;;;;IAO5B,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAClC,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE;;;AAIzB,IAAA,MAAM,gBAAgB,GAAA;AACpB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACd;;AAGjC,QAAA,IACE,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM;AAClB,aAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,EACpD;YACA,MAAM,gBAAgB,GAAG;AACtB,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC;iBAClE,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AAExB,YAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/B,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAChC,gBAAA,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,gBAAgB,CAAC;AACxC,gBAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK;AAEjC,gBAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;;;;AAKvD,QAAA,MAAM,IAAI,CAAC,mBAAmB,EAAE;;;;;IAOlC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnC,IAAI,CAAC,IAAI,EAAE,MAAM,IAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,CACE,CAAA,mBAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EACjB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EAEd,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mCAAmC,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,6BAA6B,EAAA,EACtC,IAAI,CAAC,QAAQ,CACT,CACH,CACF,IACJ,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACvC,IAAI,CAAC,MAAM,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,MAAM,CAAO,CACpC,CACrB,CAAC,KAEF,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACd,CACI;;;;;;;;;;;;"}

package/dist/esm/nv-alert.entry.js

@@ -158,8 +158,7 @@ const NvAlert = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (h(Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
+        return (h(Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: this.icon ?? this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-alert.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-alert.entry.js","sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-right: calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus.focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\nimport { type IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() el: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\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  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event({ bubbles: false })\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event({ bubbles: false })\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = (): IconName => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { duration: 250 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.el.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.el.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-alert.entry.js","sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-right: calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus.focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\nimport { type IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() el: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\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  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event({ bubbles: false })\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event({ bubbles: false })\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = (): IconName => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { duration: 250 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.el.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.el.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/nv-badge_2.entry.js

@@ -198,7 +198,7 @@ const NvFielddropdownitemcheck = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e748d27a6ee1168b069793541de3bf2defd34b85', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '967307de6a757e0cd5cb061d57ce94c04c3e84e4', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: '9e76ecb6c08ef6b9fe3ea07790c469676fdad227' }), h("slot", { key: '9a40f79c6685e89d58b661bcd00c00158fe6bce6', name: "main" }), h("slot", { key: '8c901183f49fa4f911a8265df45a19202259015a', name: "label" }), h("slot", { key: 'd35e5af79bb83482d5e8568b5aaedc6815ec9b4e', name: "description" }))));
+        return (h(Host, { key: '97827418a246f09cfda685f15b661359d0812d8c', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'e656cf4d9e7f2e7f08ded1a8d42e4d5703f5d184', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'cfd59f0f0fc834d3fb29a39637f65c92ffba15b8' }), h("slot", { key: 'ae5daefbb1952ebb19d3dd3d8b7c36667dcac79e', name: "main" }), h("slot", { key: '30ab019b447024c3feab154a67779de5b8dc16a2', name: "label" }), h("slot", { key: '2cf42ee653cc99ab9e925ede1da74694bfa57106', name: "description" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/nv-button.entry.js

@@ -72,13 +72,12 @@ const NvButton = class {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
-            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type !== ButtonType.Button &&
-                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
+                (this.form || this.internals?.form)) {
                 this.processFormAction();
             }
             else if (this.form && this.type === ButtonType.Button) {
@@ -91,12 +90,11 @@ const NvButton = class {
          * Falls back to ElementInternals form if no explicit form ID is provided.
          */
         this.processFormAction = () => {
-            var _a, _b;
             const formElement = this.form
                 ? document.getElementById(this.form)
-                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+                : this.internals?.form;
             if (!formElement) {
-                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
                 return;
             }
             switch (this.type) {

package/dist/esm/nv-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.entry.js","sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\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   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\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.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\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 form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\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 button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\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  //#endregion EVENTS\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 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        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-button.entry.js","sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\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   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\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.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\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 form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\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 button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\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  //#endregion EVENTS\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 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        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/nv-calendar.entry.js

@@ -406,8 +406,7 @@ const WeekNumbers = props => {
         return () => handleWeekClick(week);
     };
     return (h("div", { class: "week-numbers" }, h("div", { class: "week-header" }, localizedWeekText), weeks.map((week, weekIndex) => {
-        var _a;
-        const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+        const firstDayWithDate = week.find(d => d.date)?.date || new Date();
         const weekNumber = getWeekNumber(firstDayWithDate);
         const isClickable = selectionType === 'range';
         return (h("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
@@ -638,7 +637,7 @@ const NvCalendar = class {
                 }
                 else {
                     // Handle malformed dates gracefully - reset state
-                    console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
+                    console.warn(`Invalid date range format: ${values?.[0]}, ${values?.[1]}`);
                     this.startDate = null;
                     this.endDate = null;
                     if (!this.showActions) {
@@ -916,26 +915,17 @@ const NvCalendar = class {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const newDate = new Date(this.currentDate);
-            // Date for the calendar being changed
-            const targetCalendarDate = new Date(newDate.toUTCString());
+            // Calculate the current displayed year for this specific calendar
+            const targetCalendarDate = new Date(this.currentDate);
+            targetCalendarDate.setUTCDate(1);
             targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
-            const currentMonth = targetCalendarDate.getUTCMonth();
-            let monthDiff = selectedMonth - currentMonth;
-            // Smartly adjust for year change
-            if (monthDiff > 6) {
-                // e.g. from Jan to Dec, go back 1 month
-                monthDiff -= 12;
-            }
-            if (monthDiff < -6) {
-                // e.g. from Dec to Jan, go forward 1 month
-                monthDiff += 12;
-            }
-            // Apply the diff to the original `currentDate`
-            const finalDate = new Date(this.currentDate);
-            // Avoid day-of-month rollover when moving to shorter months.
-            finalDate.setUTCDate(1);
-            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            const currentYear = targetCalendarDate.getUTCFullYear();
+            // Create a new date with the selected month, keeping the SAME year
+            // This ensures the year never changes when selecting a month
+            const newTargetDate = new Date(Date.UTC(currentYear, selectedMonth, 1));
+            // Calculate what currentDate should be by subtracting the offset
+            const finalDate = new Date(newTargetDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() - calendarOffset);
             this.currentDate = finalDate;
         };
         /**
@@ -1414,8 +1404,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '9a2df275a214bedb084034e2936cd12ba2024300' }, h("div", { key: '400094ae82785980d16040b659e9a1b04d8c0de8', class: "datepicker-root" }, h("div", { key: '9e38e04428b64b4185555491c970a09326beceb8', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '29e6968fad93c8d822beabf37bdd7840cd90eb62', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (h("div", { key: '4a49e27c472dff679cd8e6ea1db3fcd16e164522', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '4482d2bbd341cacd8b1c529d3be054e8a33fd515' })));
+        return (h(Host, { key: '18793334c6b01685f8c42acb0709bb3b35a1d466' }, h("div", { key: '2fa622b5027d4fc94732e0826fac044056e8bca1', class: "datepicker-root" }, h("div", { key: '4c88d823b5a720d3529bc199014b5e498ba1a701', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'e6be82fb79db589171e4db2beb640fb005dd603f', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (h("div", { key: '5991593c0ae9128c3dfea099db2864a37105c9a4', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '5e92296fdc3732ea7f241a5ce381e0234330e7a3' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {