@nova-design-system/nova-webcomponents 3.6.0 → 3.7.0

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemtitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /** Item title (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly itemtitle?: string;\n  /** Item subtitle (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n  /** Open or closed */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n  /** Disables the item */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n  /** Maximum content height (in px, optional). If not defined, auto height. */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n  /** Parent expansion mode (accordion or multi) */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n  /**\n   * Event emitted on toggle (header click)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n  /** Internal state for open/close rendering */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.currentOpenState = newValue; // Synchronize internal state\n\n    // Skip initial render\n    if (oldValue === undefined) {\n      return;\n    }\n\n    await this.updateVisibility(newValue);\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) return;\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      // Expand with animation\n      await expand();\n    } else {\n      // Collapse with animation\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    this.currentOpenState = this.open; // Initial synchronization\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n      if (this.open) {\n        // If open by default on initial load, set expanded state without animation\n        setExpanded();\n      } else {\n        // If closed by default, set collapsed state without animation\n        setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.open = !this.open;\n      this.itemToggle.emit(this.open);\n\n      // Force animation update directly instead of relying on watcher\n      await this.updateVisibility(this.open);\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation(); // Prevent header click from triggering\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.open = false;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    return this.open ? 'chevron-top' : 'chevron-down';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.open,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemtitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemtitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls=\"content\"\n            aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /** Item title (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /** Item subtitle (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /** Open or closed */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /** Disables the item */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /** Maximum content height (in px, optional). If not defined, auto height. */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /** Parent expansion mode (accordion or multi) */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /** Internal state for open/close rendering */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.currentOpenState = newValue; // Synchronize internal state\n\n    // Skip initial render\n    if (oldValue === undefined) {\n      return;\n    }\n\n    await this.updateVisibility(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) return;\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      // Expand with animation\n      await expand();\n    } else {\n      // Collapse with animation\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open; // Initial synchronization\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n      if (this.open) {\n        // If open by default on initial load, set expanded state without animation\n        setExpanded();\n      } else {\n        // If closed by default, set collapsed state without animation\n        setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.open = !this.open;\n      this.itemToggle.emit(this.open);\n\n      // Force animation update directly instead of relying on watcher\n      await this.updateVisibility(this.open);\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation(); // Prevent header click from triggering\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.open = false;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    return this.open ? 'chevron-top' : 'chevron-down';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.open,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls=\"content\"\n            aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

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

@@ -234,6 +234,11 @@ nv-calendar {
   background-color: transparent;
   border-color: transparent;
 }
+.day.day-blank {
+  pointer-events: none;
+  background-color: transparent;
+  border-color: transparent;
+}
 .day.outside-month {
   color: var(--components-calendar-cell-text);
   opacity: var(--opacity-disabled);

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

@@ -58,6 +58,8 @@ export class NvCalendar {
         this.showActions = false;
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
+        /** Flag to indicate a user click for selection */
+        this.isUserClick = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -93,7 +95,7 @@ export class NvCalendar {
                     }
                     // Navigate to the date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = parsedDate;
                     }
                 }
@@ -121,7 +123,7 @@ export class NvCalendar {
                     }
                     // Navigate to start date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = startDate;
                     }
                 }
@@ -142,20 +144,14 @@ export class NvCalendar {
          */
         this.changeMonth = (offset) => {
             const newDate = new Date(this.currentDate);
-            // Ensure we only move by one month at a time
+            newDate.setUTCDate(1); // Set to the first of the month to avoid day-of-month issues
             newDate.setUTCMonth(newDate.getUTCMonth() + offset);
-            // Add the appropriate animation class
             const containers = this.el.querySelectorAll('.calendar-grid');
             containers.forEach(container => {
-                // Remove existing animation classes
                 container.classList.remove('slide-left', 'slide-right');
-                // Add the new animation class
                 const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
                 container.classList.add(animationClass);
-                // Remove the class after the animation
-                setTimeout(() => {
-                    container.classList.remove(animationClass);
-                }, 300); // 300ms corresponds to $slide-duration in the SCSS
+                setTimeout(() => container.classList.remove(animationClass), 300);
             });
             this.currentDate = newDate;
         };
@@ -167,12 +163,16 @@ export class NvCalendar {
             if (this.isDateDisabled(date)) {
                 return;
             }
+            this.isUserClick = true;
             if (this.selectionType === 'single') {
                 this.handleSingleSelection(date);
             }
             else {
                 this.handleRangeSelection(date);
             }
+            requestAnimationFrame(() => {
+                this.isUserClick = false;
+            });
         };
         /**
          * Handles single date selection
@@ -315,12 +315,15 @@ export class NvCalendar {
         /**
          * Generates the days of the current month
          * @param {number} offset - Month offset (0 by default)
-         * @param {number} totalCalendars - Number of calendars to display (1 by default)
          * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
          */
         this.getDaysInMonth = (offset = 0) => {
-            const year = this.currentDate.getUTCFullYear();
-            const month = this.currentDate.getUTCMonth() + offset;
+            const baseMonth = this.currentDate.getUTCMonth();
+            // Correctly calculate the year and month for the given offset
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(baseMonth + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
             const firstDay = new Date(Date.UTC(year, month, 1));
             const lastDay = new Date(Date.UTC(year, month + 1, 0));
             const days = [];
@@ -329,32 +332,18 @@ export class NvCalendar {
             const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
             // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
             const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
-            const showPrevMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === 0);
-            // Add the days of the previous month
-            if (offsetDays > 0) {
-                if (showPrevMonthDays) {
-                    const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
-                    for (let i = offsetDays; i > 0; i--) {
-                        const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
-                        days.push({
-                            dayOfMonth: date.getUTCDate(),
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < offsetDays; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
-                }
+            // Add padding days from the previous month
+            for (let i = 0; i < offsetDays; i++) {
+                const prevMonthDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                const date = new Date(Date.UTC(year, month - 1, prevMonthDay - offsetDays + 1 + i));
+                days.push({
+                    dayOfMonth: date.getUTCDate(),
+                    date,
+                    isCurrentMonth: false,
+                    isDisabled: this.isDateDisabled(date),
+                    // Days from previous month are blank if not the first calendar
+                    isBlank: offset > 0,
+                });
             }
             // Add the days of the current month
             for (let i = 1; i <= lastDay.getUTCDate(); i++) {
@@ -364,33 +353,22 @@ export class NvCalendar {
                     date,
                     isCurrentMonth: true,
                     isDisabled: this.isDateDisabled(date),
+                    isBlank: false,
                 });
             }
-            const showNextMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === this.numberOfCalendars - 1);
-            // Add the days of the next month to fill the grid
+            // Add padding days to fill the last week
             const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
             if (nextMonthDaysNeeded < 7) {
-                if (showNextMonthDays) {
-                    for (let i = 1; i <= nextMonthDaysNeeded; i++) {
-                        const date = new Date(Date.UTC(year, month + 1, i));
-                        days.push({
-                            dayOfMonth: i,
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < nextMonthDaysNeeded; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
+                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
+                    const date = new Date(Date.UTC(year, month + 1, i));
+                    days.push({
+                        dayOfMonth: i,
+                        date,
+                        isCurrentMonth: false,
+                        isDisabled: this.isDateDisabled(date),
+                        // Days from next month are blank if not the last calendar
+                        isBlank: offset < this.numberOfCalendars - 1,
+                    });
                 }
             }
             return days;
@@ -427,12 +405,25 @@ export class NvCalendar {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const currentMonth = this.currentDate.getUTCMonth();
-            // Calculate the difference considering the calendar offset
-            const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
             const newDate = new Date(this.currentDate);
-            newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
-            this.currentDate = newDate;
+            // Date for the calendar being changed
+            const targetCalendarDate = new Date(newDate.toUTCString());
+            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);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            this.currentDate = finalDate;
         };
         /**
          * Handles year change in the numeric entry
@@ -444,9 +435,10 @@ export class NvCalendar {
             const year = parseInt(input.value, 10);
             if (!isNaN(year) && year >= 1900 && year <= 2100) {
                 const newDate = new Date(this.currentDate);
-                newDate.setUTCFullYear(year);
                 newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
-                this.currentDate = newDate;
+                newDate.setUTCFullYear(year);
+                newDate.setUTCMonth(newDate.getUTCMonth() - calendarOffset);
+                this.currentDate = new Date(newDate);
             }
         };
         /**
@@ -675,7 +667,12 @@ export class NvCalendar {
             for (let i = 0; i < days.length; i += 7) {
                 weeks.push(days.slice(i, i + 7));
             }
-            return (h("div", { class: "calendar-wrapper" }, h("div", { class: "calendar-container", key: `calendar-${index}` }, this.renderHeader(offset, index), h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), h(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (h("div", { class: "calendar-separator" }))));
+            // Add year and month to the key to force re-render on date change
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(targetDate.getUTCMonth() + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
+            return (h("div", { class: "calendar-wrapper" }, h("div", { class: "calendar-container", key: `calendar-${index}-${year}-${month}` }, this.renderHeader(offset, index), h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), h(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (h("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -725,7 +722,7 @@ export class NvCalendar {
                 this.endDate = endDate;
                 // Do not navigate to the start date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = startDate;
                 }
             }
@@ -753,7 +750,7 @@ export class NvCalendar {
                 this.selectedDate = parsedDate;
                 // Do not navigate to the selected date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = parsedDate;
                 }
             }
@@ -867,6 +864,27 @@ export class NvCalendar {
             throw error; // Re-throw to let the caller handle it
         }
     }
+    /**
+     * Clears the current selection and resets the calendar to its initial state.
+     * This method can be called programmatically to reset the calendar.
+     */
+    async clear() {
+        if (this.selectionType === 'single') {
+            this.selectedDate = null;
+            this.singleValue = '';
+            this.value = '';
+            this.singleDateChange.emit('');
+            this.valueChanged.emit('');
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.rangeValue = { start: '', end: '' };
+            this.value = '';
+            this.rangeDateChange.emit({ start: '', end: '' });
+            this.valueChanged.emit('');
+        }
+    }
     /**
      * Renders the datepicker
      * @returns {JSX.Element} Datepicker
@@ -874,8 +892,8 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '089a80ab34e2bc3f31432437787578f6367fde7c' }, h("div", { key: '9537a1a20798d8ff3cf53972154a4d7fb0156daf', class: "datepicker-root" }, h("div", { key: '17a4630c184001b5fbea941540ee01b0bbf8b58d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '8d56891ebb52b251a013d6a640d472900b9b62e8', 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: 'a7f53681fb23a9b80b8141de19c4decaec5e887b', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '943aca0d1a5b2db40f59dfd8973d26b52b9ed312' })));
+        return (h(Host, { key: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, h("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, h("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '3481fe780a3e1d8f0c1e22ffc82c3b7830721055', 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: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {
@@ -1281,6 +1299,27 @@ export class NvCalendar {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current selection and resets the calendar to its initial state.\nThis method can be called programmatically to reset the calendar.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{