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

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

@@ -0,0 +1,198 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c56424e5.js');
+
+/**
+ * Utility functions for nv-buttongroup.
+ */
+/**
+ * Recursively finds the first button or link element within a container
+ * @param {HTMLElement} element - The HTML element to search within
+ * @returns {HTMLElement | null} The first button or link element found, or null if none exists
+ */
+function findFirstButtonOrLink(element) {
+    // Check if the element itself is a button or link
+    const tagName = element.tagName.toLowerCase();
+    if (tagName === 'nv-button' ||
+        tagName === 'nv-iconbutton' ||
+        tagName === 'a') {
+        return element;
+    }
+    // Recursively search through children
+    for (const child of Array.from(element.children)) {
+        const found = findFirstButtonOrLink(child);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+/**
+ * Forwards the buttongroup properties to all child elements
+ * @param {HTMLElement} containerElement - The container element containing the buttons
+ * @param {object} props - The properties to forward to children
+ * @param {string} props.size - The size property to apply
+ * @param {string} props.emphasis - The emphasis property to apply
+ * @param {boolean} props.fluid - Whether the buttons should be fluid
+ */
+function forwardPropsToChildren(containerElement, props) {
+    const children = Array.from(containerElement.children);
+    const buttonElements = [];
+    // Find the first button or link in each direct child
+    children.forEach(child => {
+        const buttonOrLink = findFirstButtonOrLink(child);
+        if (buttonOrLink) {
+            buttonElements.push(buttonOrLink);
+        }
+    });
+    buttonElements.forEach(element => {
+        element.classList.remove('first', 'last', 'group-item');
+    });
+    // Apply properties and positional classes to found elements
+    buttonElements.forEach((element, index) => {
+        const isFirst = index === 0;
+        const isLast = index === buttonElements.length - 1;
+        const tagName = element.tagName.toLowerCase();
+        // Add positional classes
+        if (isFirst) {
+            element.classList.add('first');
+        }
+        if (isLast) {
+            element.classList.add('last');
+        }
+        // Add group item classes
+        element.classList.add('group-item');
+        // Forward props to nv-button elements
+        if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {
+            element.setAttribute('size', props.size);
+            element.setAttribute('emphasis', props.emphasis);
+            if (props.fluid) {
+                element.setAttribute('fluid', '');
+            }
+            else {
+                element.removeAttribute('fluid');
+            }
+        }
+        // Forward props to anchor elements by adding CSS classes
+        if (tagName === 'a') {
+            element.classList.add('nv-button');
+            element.classList.add(`size-${props.size}`);
+            element.classList.add(`emphasis-${props.emphasis}`);
+            if (props.fluid) {
+                element.classList.add('fluid');
+            }
+            else {
+                element.classList.remove('fluid');
+            }
+        }
+    });
+}
+
+const nvButtongroupCss = "nv-buttongroup{display:flex}nv-buttongroup[emphasis=high]{gap:1px}nv-buttongroup[emphasis=low] .group-item,nv-buttongroup[emphasis=low] .group-item:hover{border:1px solid var(--components-button-low-text)}nv-buttongroup[emphasis=lower] .group-item,nv-buttongroup[emphasis=lower] .group-item:hover{border:1px solid var(--components-button-lower-text)}nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.first{border-top-right-radius:0;border-bottom-right-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.last{border-top-left-radius:0;border-bottom-left-radius:0}nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first){border-left:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first){border-left:none}nv-buttongroup[orientation=vertical]{flex-direction:column;align-items:stretch;width:fit-content}nv-buttongroup[orientation=vertical] .group-item{width:unset;display:flex}nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup[orientation=vertical] .group-item.first{border-bottom-left-radius:0;border-bottom-right-radius:0}nv-buttongroup[orientation=vertical] .group-item.last{border-top-left-radius:0;border-top-right-radius:0}nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first){border-top:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first){border-top:none}";
+const NvButtongroupStyle0 = nvButtongroupCss;
+
+const NvButtongroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small all the buttons appear, allowing for
+         * customization of the button's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Adjusts the emphasis of all the buttons to make it more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the button group to stretch and fill the entire width of its
+         * container.
+         */
+        this.fluid = false;
+        /**
+         * Determines the orientation of the button group. When enabled, the buttons
+         * are stacked vertically rather than aligned side by side.
+         */
+        this.orientation = 'horizontal';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Forwards the buttongroup properties to all child elements
+         */
+        this.forwardPropsToChildren = () => {
+            forwardPropsToChildren(this.el, {
+                size: this.size,
+                emphasis: this.emphasis,
+                fluid: this.fluid,
+            });
+        };
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        // Forward props to all children when changes occur
+                        this.forwardPropsToChildren();
+                    }
+                });
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onEmphasisChange() {
+        this.forwardPropsToChildren();
+    }
+    onSizeChange() {
+        this.forwardPropsToChildren();
+    }
+    onFluidChange() {
+        this.forwardPropsToChildren();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.forwardPropsToChildren();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'd0322897a0312e7b55b087e4abfc94fcaf9f7747' }, index.h("slot", { key: '70afccf10fe728482096d3fce42083e9931e06bd' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "emphasis": ["onEmphasisChange"],
+        "size": ["onSizeChange"],
+        "fluid": ["onFluidChange"]
+    }; }
+};
+NvButtongroup.style = NvButtongroupStyle0;
+
+exports.nv_buttongroup = NvButtongroup;
+
+//# sourceMappingURL=nv-buttongroup.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-buttongroup.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-buttongroup/nv-buttongroup.utils.ts","src/components/nv-buttongroup/styles/nv-buttongroup.scss?tag=nv-buttongroup","src/components/nv-buttongroup/nv-buttongroup.tsx"],"sourcesContent":["/**\n * Utility functions for nv-buttongroup.\n */\n\n/**\n * Recursively finds the first button or link element within a container\n * @param {HTMLElement} element - The HTML element to search within\n * @returns {HTMLElement | null} The first button or link element found, or null if none exists\n */\nexport function findFirstButtonOrLink(\n  element: HTMLElement,\n): HTMLElement | null {\n  // Check if the element itself is a button or link\n  const tagName = element.tagName.toLowerCase();\n  if (\n    tagName === 'nv-button' ||\n    tagName === 'nv-iconbutton' ||\n    tagName === 'a'\n  ) {\n    return element;\n  }\n\n  // Recursively search through children\n  for (const child of Array.from(element.children) as HTMLElement[]) {\n    const found = findFirstButtonOrLink(child);\n    if (found) {\n      return found;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Forwards the buttongroup properties to all child elements\n * @param {HTMLElement} containerElement - The container element containing the buttons\n * @param {object} props - The properties to forward to children\n * @param {string} props.size - The size property to apply\n * @param {string} props.emphasis - The emphasis property to apply\n * @param {boolean} props.fluid - Whether the buttons should be fluid\n */\nexport function forwardPropsToChildren(\n  containerElement: HTMLElement,\n  props: {\n    /** The size property to apply */\n    size: string;\n    /** The emphasis property to apply */\n    emphasis: string;\n    /** Whether the buttons should be fluid */\n    fluid: boolean;\n  },\n): void {\n  const children = Array.from(containerElement.children) as HTMLElement[];\n  const buttonElements: HTMLElement[] = [];\n\n  // Find the first button or link in each direct child\n  children.forEach(child => {\n    const buttonOrLink = findFirstButtonOrLink(child);\n    if (buttonOrLink) {\n      buttonElements.push(buttonOrLink);\n    }\n  });\n\n  buttonElements.forEach(element => {\n    element.classList.remove('first', 'last', 'group-item');\n  });\n\n  // Apply properties and positional classes to found elements\n  buttonElements.forEach((element, index) => {\n    const isFirst = index === 0;\n    const isLast = index === buttonElements.length - 1;\n    const tagName = element.tagName.toLowerCase();\n\n    // Add positional classes\n    if (isFirst) {\n      element.classList.add('first');\n    }\n    if (isLast) {\n      element.classList.add('last');\n    }\n\n    // Add group item classes\n    element.classList.add('group-item');\n\n    // Forward props to nv-button elements\n    if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {\n      element.setAttribute('size', props.size);\n      element.setAttribute('emphasis', props.emphasis);\n      if (props.fluid) {\n        element.setAttribute('fluid', '');\n      } else {\n        element.removeAttribute('fluid');\n      }\n    }\n\n    // Forward props to anchor elements by adding CSS classes\n    if (tagName === 'a') {\n      element.classList.add('nv-button');\n      element.classList.add(`size-${props.size}`);\n      element.classList.add(`emphasis-${props.emphasis}`);\n      if (props.fluid) {\n        element.classList.add('fluid');\n      } else {\n        element.classList.remove('fluid');\n      }\n    }\n  });\n}\n","@use \"./mixins\" as *;\n\nnv-buttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  &[emphasis=\"lower\"] {\n    @include lower-emphasis-styles();\n  }\n\n  &:not([orientation=\"vertical\"]) {\n    @include border-radius-horizontal-styles();\n\n    &[emphasis=\"medium\"] {\n      @include medium-emphasis-horizontal-styles();\n    }\n    &[emphasis=\"low\"] {\n      @include low-emphasis-horizontal-styles();\n    }\n    &[emphasis=\"lower\"] {\n      @include lower-emphasis-horizontal-styles();\n    }\n  }\n\n  &[orientation=\"vertical\"] {\n    @include vertical-styles();\n    @include border-radius-vertical-styles();\n\n    &[emphasis=\"medium\"] {\n      @include medium-emphasis-vertical-styles();\n    }\n    &[emphasis=\"low\"] {\n      @include low-emphasis-vertical-styles();\n    }\n    &[emphasis=\"lower\"] {\n      @include lower-emphasis-vertical-styles();\n    }\n  }\n}","import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis } from '../../utils/constants';\nimport { forwardPropsToChildren } from './nv-buttongroup.utils';\n\n/**\n * @slot default - Child buttons or links.\n */\n@Component({\n  tag: 'nv-buttongroup',\n  styleUrl: 'styles/nv-buttongroup.scss',\n  shadow: false,\n})\nexport class NvButtongroup {\n  @Element() el: HTMLNvButtongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small all the buttons appear, 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 emphasis of all the buttons to make it more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'medium';\n\n  /**\n   * Allows the button group to stretch and fill the entire width of its\n   * container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Determines the orientation of the button group. When enabled, the buttons\n   * are stacked vertically rather than aligned side by side.\n   */\n  @Prop({ reflect: true })\n  readonly orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Forwards the buttongroup properties to all child elements\n   */\n  private forwardPropsToChildren = (): void => {\n    forwardPropsToChildren(this.el, {\n      size: this.size,\n      emphasis: this.emphasis,\n      fluid: this.fluid,\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          // Forward props to all children when changes occur\n          this.forwardPropsToChildren();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('emphasis')\n  onEmphasisChange() {\n    this.forwardPropsToChildren();\n  }\n\n  @Watch('size')\n  onSizeChange() {\n    this.forwardPropsToChildren();\n  }\n\n  @Watch('fluid')\n  onFluidChange() {\n    this.forwardPropsToChildren();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.forwardPropsToChildren();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c56424e5.js');
-const constants = require('./constants-8fb8ccc0.js');
+const constants = require('./constants-3b6beb66.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b3309d7b.js');
 
 var dayjs_min = {exports: {}};
@@ -240,6 +240,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
@@ -247,7 +315,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',
@@ -258,17 +326,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
-    index.h("div", { class: dayClasses, onClick: handleClick, "aria-disabled": isDisabled }, dayOfMonth));
+    return (index.h("div", { class: dayClasses, "data-date": date.toISOString(), onClick: !isDisabled ? onClick : undefined, onMouseEnter: onDayHover, "aria-disabled": isDisabled }, dayOfMonth));
 };
 
 /**
@@ -393,10 +456,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 (index.h("div", { class: "days-container" },
         index.h("div", { class: "days-header" }, dayNames.map((day, index$1) => (index.h("div", { class: "day-header", key: `day-header-${index$1}` }, day)))),
-        index.h("div", { class: "days-grid" }, days.map(day => {
+        index.h("div", { class: "days-grid", onMouseLeave: onMouseLeave }, days.map(day => {
             if (day.isBlank) {
                 return index.h("div", { class: "day day-blank" });
             }
@@ -410,11 +473,13 @@ const CalendarGrid = props => {
             const isStart = isSameDate(date, startDate, { isUTCMode });
             const isEnd = isSameDate(date, endDate, { isUTCMode });
             const isTodayDate = isToday(date);
-            return (index.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 (index.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 {
@@ -481,6 +546,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 = [];
         /**
@@ -499,6 +565,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) {
@@ -543,7 +615,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) {
@@ -569,11 +641,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;
             }
@@ -619,6 +709,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];
@@ -650,24 +741,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
@@ -1064,6 +1138,15 @@ const NvCalendar = class {
         index$1) => {
             return (index.h(WeekNumbers, { weeks: weeks, localizedWeekText: this.getLocalizedWeekText(), selectionType: this.selectionType, onWeekSelect: this.handleWeekSelection, calendarIndex: index$1 }));
         };
+        /**
+         * 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
@@ -1086,7 +1169,7 @@ const NvCalendar = class {
             targetDate.setUTCMonth(targetDate.getUTCMonth() + offset);
             const year = targetDate.getUTCFullYear();
             const month = targetDate.getUTCMonth();
-            return (index.h("div", { class: "calendar-wrapper" }, index.h("div", { class: "calendar-container", key: `calendar-${index$1}-${year}-${month}` }, this.renderHeader(offset, index$1), index.h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index$1), 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$1 < this.numberOfCalendars - 1 && (index.h("div", { class: "calendar-separator" }))));
+            return (index.h("div", { class: "calendar-wrapper" }, index.h("div", { class: "calendar-container", key: `calendar-${index$1}-${year}-${month}` }, this.renderHeader(offset, index$1), index.h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index$1), 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$1 < this.numberOfCalendars - 1 && (index.h("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -1306,8 +1389,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        return (index.h(index.Host, { key: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, index.h("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, index.h("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.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) && (index.h("div", { key: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
+        return (index.h(index.Host, { key: '15aa3c2afb51ea1fbd16de597889d687fb8d1982' }, index.h("div", { key: '6492b58cb2b5c9bb7fd6c40e8f37e9c2142b5827', class: "datepicker-root" }, index.h("div", { key: '3cb216c3af4900b48c2dcd09a0a0034c7ebf622d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.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) && (index.h("div", { key: '0a17a627cb1e4a4cb2b91aa104403b00d055bce5', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '3104795c8cc9c81a6aca7e426a145e3966a4361e' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {