npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.9.0 → 3.10.0 - Mend

@nova-design-system/nova-webcomponents 3.9.0 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (444) hide show

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-a1936cd0.js';
-import { C as CUSTOM_DAY_NAMES, d as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './constants-4faa1fae.js';
+import { C as CUSTOM_DAY_NAMES, d as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './constants-23aaef7b.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1789f0cf.js';
 var dayjs_min = {exports: {}};
@@ -236,6 +236,74 @@ function parseDate(dateInput, dateFormat) {
     }
     return parsed.toDate();
 }
+/**
+ * Checks if a date is disabled.
+ * @param {Date} date - Date to check
+ * @param {string} min - Minimum date
+ * @param {string} max - Maximum date
+ * @param {Date[]} parsedDisabledDates - Parsed disabled dates
+ * @param {string} dateFormat - Date format
+ * @param {boolean} isUTCMode - Whether the dates are in UTC mode
+ * @returns {boolean} true if the date is disabled
+ */
+function isDateDisabledUtil(date, min, max, parsedDisabledDates, dateFormat, isUTCMode) {
+    if (!date)
+        return true;
+    if (min) {
+        const minDate = parseDate(min, dateFormat);
+        if (minDate && date < minDate) {
+            return true;
+        }
+    }
+    if (max) {
+        const maxDate = parseDate(max, dateFormat);
+        if (maxDate && date > maxDate) {
+            return true;
+        }
+    }
+    return parsedDisabledDates.some(disabledDate => isSameDate(date, disabledDate, { isUTCMode }));
+}
+/**
+ * Checks if a date is within the hover range.
+ * @param {Date} date - The date to check.
+ * @param {Date} startDate - The start of the range.
+ * @param {Date | null} hoverDate - The hovered date.
+ * @returns {boolean} True if the date is in the hover range.
+ */
+const isInHoverRange = (date, startDate, hoverDate) => {
+    if (!hoverDate || !startDate || !date) {
+        return false;
+    }
+    const start = startDate < hoverDate ? startDate : hoverDate;
+    const end = startDate < hoverDate ? hoverDate : startDate;
+    return date > start && date < end;
+};
+/**
+ * Checks if the hover range is valid (does not contain disabled dates).
+ * @param {Date} startDate - The start of the range.
+ * @param {Date | null} hoverDate - The hovered date.
+ * @param {string} min - The minimum allowed date.
+ * @param {string} max - The maximum allowed date.
+ * @param {Date[]} parsedDisabledDates - An array of disabled dates.
+ * @param {string} dateFormat - The date format for parsing.
+ * @param {boolean} isUTCMode - Flag for UTC mode.
+ * @returns {boolean} True if the hover range is valid.
+ */
+const isHoverRangeValid = (startDate, hoverDate, min, max, parsedDisabledDates, dateFormat, isUTCMode) => {
+    if (!hoverDate || !startDate) {
+        return true;
+    }
+    const start = startDate < hoverDate ? startDate : hoverDate;
+    const end = startDate < hoverDate ? hoverDate : startDate;
+    const current = new Date(start);
+    while (current <= end) {
+        if (isDateDisabledUtil(current, min, max, parsedDisabledDates, dateFormat, isUTCMode)) {
+            return false;
+        }
+        current.setDate(current.getDate() + 1);
+    }
+    return true;
+};
 /**
  * Renders a single day cell in the calendar grid
@@ -243,7 +311,7 @@ function parseDate(dateInput, dateFormat) {
  * @returns {JSX.Element} JSX element representing a day cell
  */
 const DayCell = props => {
-    const { date, dayOfMonth, isCurrentMonth, isSelected, isInRange, isStart, isEnd, isToday, isDisabled, onClick, } = props;
+    const { date, dayOfMonth, isCurrentMonth, isSelected, isInRange, isStart, isEnd, isToday, isDisabled, onClick, onDayHover, isInHoverRange, isHoverRangeValid, } = props;
     // Build CSS classes for the day cell
     const dayClasses = [
         'day',
@@ -254,17 +322,12 @@ const DayCell = props => {
         isDisabled ? 'disabled' : '',
         !isCurrentMonth ? 'outside-month' : '',
         isToday ? 'is-today' : '',
+        isInHoverRange && isHoverRangeValid ? 'hover-range' : '',
+        isInHoverRange && !isHoverRangeValid ? 'hover-blocked' : '',
     ]
         .filter(Boolean)
         .join(' ');
-    const handleClick = () => {
-        if (!isDisabled && onClick) {
-            onClick(date);
-        }
-    };
-    return (
-    // eslint-disable-next-line react/jsx-no-bind
-    h("div", { class: dayClasses, onClick: handleClick, "aria-disabled": isDisabled }, dayOfMonth));
+    return (h("div", { class: dayClasses, "data-date": date.toISOString(), onClick: !isDisabled ? onClick : undefined, onMouseEnter: onDayHover, "aria-disabled": isDisabled }, dayOfMonth));
 };
 /**
@@ -389,10 +452,10 @@ const CalendarHeader = props => {
  * @returns {JSX.Element} JSX element representing the calendar grid
  */
 const CalendarGrid = props => {
-    const { days, dayNames, selectionType, selectedDate, startDate, endDate, isUTCMode, onDayClick, isDateInRange, isToday, } = props;
+    const { days, dayNames, selectionType, selectedDate, startDate, endDate, isUTCMode, onDayClick, isDateInRange, isToday, onDayHover, onMouseLeave, hoverDate, isInHoverRange, isHoverRangeValid, } = props;
     return (h("div", { class: "days-container" },
         h("div", { class: "days-header" }, dayNames.map((day, index) => (h("div", { class: "day-header", key: `day-header-${index}` }, day)))),
-        h("div", { class: "days-grid" }, days.map(day => {
+        h("div", { class: "days-grid", onMouseLeave: onMouseLeave }, days.map(day => {
             if (day.isBlank) {
                 return h("div", { class: "day day-blank" });
             }
@@ -406,11 +469,13 @@ const CalendarGrid = props => {
             const isStart = isSameDate(date, startDate, { isUTCMode });
             const isEnd = isSameDate(date, endDate, { isUTCMode });
             const isTodayDate = isToday(date);
-            return (h(DayCell, { date: date, dayOfMonth: day.dayOfMonth, isCurrentMonth: day.isCurrentMonth, isSelected: isSelected, isInRange: isInRange, isStart: isStart, isEnd: isEnd, isToday: isTodayDate, isDisabled: day.isDisabled, selectionType: selectionType, onClick: onDayClick }));
+            const inHoverRange = isInHoverRange(date, startDate, hoverDate);
+            const hoverRangeValid = isHoverRangeValid(startDate, hoverDate);
+            return (h(DayCell, { date: date, dayOfMonth: day.dayOfMonth, isCurrentMonth: day.isCurrentMonth, isSelected: isSelected, isInRange: isInRange, isStart: isStart, isEnd: isEnd, isToday: isTodayDate, isDisabled: day.isDisabled, selectionType: selectionType, onClick: onDayClick, onDayHover: onDayHover, isInHoverRange: inHoverRange, isHoverRangeValid: hoverRangeValid }));
         }))));
 };
-const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;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)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
+const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;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)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.day.hover-range{background-color:var(--components-calendar-cell-background-hover)}.day.hover-blocked{background-color:var(--components-calendar-cell-background-hover)}.day.disabled.hover-blocked{background-color:transparent}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 const NvCalendarStyle0 = nvCalendarCss;
 const NvCalendar = class {
@@ -477,6 +542,7 @@ const NvCalendar = class {
         this.selectedDate = null;
         this.startDate = null;
         this.endDate = null;
+        this.hoverDate = null;
         /** List of formatted months for the selector */
         this.months = [];
         /**
@@ -495,6 +561,12 @@ const NvCalendar = class {
                 .split(',')
                 .map(v => v.trim())
                 .filter(Boolean);
+            if (this.selectionType === 'range' && values.length < 2) {
+                console.warn(`Invalid date range format: ${value}`);
+                this.startDate = null;
+                this.endDate = null;
+                return;
+            }
             if (this.selectionType === 'single' && values.length >= 1) {
                 const parsedDate = parseDate(values[0], this.dateFormat);
                 if (parsedDate) {
@@ -539,7 +611,7 @@ const NvCalendar = class {
                 }
                 else {
                     // Handle malformed dates gracefully - reset state
-                    console.warn(`Invalid date range format: ${values[0]}, ${values[1]}`);
+                    console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
                     this.startDate = null;
                     this.endDate = null;
                     if (!this.showActions) {
@@ -565,11 +637,29 @@ const NvCalendar = class {
             });
             this.currentDate = newDate;
         };
+        this.handleMouseLeave = () => {
+            this.hoverDate = null;
+        };
+        this.handleDayHover = (event) => {
+            const target = event.target;
+            const dateStr = target.getAttribute('data-date');
+            if (dateStr &&
+                this.selectionType === 'range' &&
+                this.startDate &&
+                !this.endDate) {
+                this.hoverDate = new Date(dateStr);
+            }
+        };
         /**
          * Handles date selection based on the mode
-         * @param {Date} date - Selected date
+         * @param {MouseEvent} event - The mouse event from the click.
          */
-        this.handleDateSelection = (date) => {
+        this.handleDateSelection = (event) => {
+            const target = event.target;
+            const dateStr = target.getAttribute('data-date');
+            if (!dateStr)
+                return;
+            const date = new Date(dateStr);
             if (this.isDateDisabled(date)) {
                 return;
             }
@@ -615,6 +705,7 @@ const NvCalendar = class {
             else {
                 // Complete range selection
                 this.endDate = date;
+                this.hoverDate = null;
                 // Ensure correct order
                 if (this.startDate > this.endDate) {
                     [this.startDate, this.endDate] = [this.endDate, this.startDate];
@@ -646,24 +737,7 @@ const NvCalendar = class {
          * @returns {boolean} true if the date is disabled
          */
         this.isDateDisabled = (date) => {
-            if (!date)
-                return true;
-            // Minimum bound check
-            if (this.min) {
-                const minDate = parseDate(this.min, this.dateFormat);
-                if (minDate && date < minDate) {
-                    return true;
-                }
-            }
-            // Maximum bound check
-            if (this.max) {
-                const maxDate = parseDate(this.max, this.dateFormat);
-                if (maxDate && date > maxDate) {
-                    return true;
-                }
-            }
-            // Check disabled dates
-            return this.parsedDisabledDates.some(disabledDate => isSameDate(date, disabledDate, { isUTCMode: this.isUTCMode }));
+            return isDateDisabledUtil(date, this.min, this.max, this.parsedDisabledDates, this.dateFormat, this.isUTCMode);
         };
         /**
          * Checks if a date is in the selected range
@@ -1060,6 +1134,15 @@ const NvCalendar = class {
         index) => {
             return (h(WeekNumbers, { weeks: weeks, localizedWeekText: this.getLocalizedWeekText(), selectionType: this.selectionType, onWeekSelect: this.handleWeekSelection, calendarIndex: index }));
         };
+        /**
+         * Checks if the hover range is valid
+         * @param {Date} startDate - Start date
+         * @param {Date | null} hoverDate - Hovered date
+         * @returns {boolean} true if the hover range is valid
+         */
+        this.isHoverRangeValidFn = (startDate, hoverDate) => {
+            return isHoverRangeValid(startDate, hoverDate, this.min, this.max, this.parsedDisabledDates, this.dateFormat, this.isUTCMode);
+        };
         /**
          * Renders the calendar
          * @param {number} index - Calendar index
@@ -1082,7 +1165,7 @@ const NvCalendar = class {
             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" }))));
+            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, onDayHover: this.handleDayHover, onMouseLeave: this.handleMouseLeave, hoverDate: this.hoverDate, isInHoverRange: isInHoverRange, isHoverRangeValid: this.isHoverRangeValidFn }))), index < this.numberOfCalendars - 1 && (h("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -1302,8 +1385,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        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' })));
+        return (h(Host, { key: '15aa3c2afb51ea1fbd16de597889d687fb8d1982' }, h("div", { key: '6492b58cb2b5c9bb7fd6c40e8f37e9c2142b5827', class: "datepicker-root" }, h("div", { key: '3cb216c3af4900b48c2dcd09a0a0034c7ebf622d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '0663841721d5db871e7ede0ec396affa560ea99d', 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: '0a17a627cb1e4a4cb2b91aa104403b00d055bce5', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '3104795c8cc9c81a6aca7e426a145e3966a4361e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {