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

package/dist/components/{p-42301d8f.js → p-9a263d0e.js}

@@ -1,4 +1,4 @@
-import { i as index, a as animate } from './p-1daca48a.js';
+import { i as index, a as animate } from './p-09cdd71f.js';
 
 const useCollapse = (node, { duration } = { duration: 200 }) => {
     const nodeStyler = index(node);
@@ -79,26 +79,6 @@ const useCollapse = (node, { duration } = { duration: 200 }) => {
     };
 };
 
-/**
- * Will execute a series of animation promises in sequence.
- * This is useful for chaining animations where each step depends on the
- * previous one completing before starting the next.
- *
- * @param {Array<() => Promise<void>>} animations - The array of animation functions.
- * @returns {Object} - An object with a `start` method to begin the timeline.
- *
- * @example
- * const { fadeOut } = useFade(this.ref);
- * const { collapse } = useCollapse(this.ref);
- *
- * timeline(fadeOut, collapse).start();
- */
-const timeline = (...animations) => ({
-    start: () => {
-        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
-    },
-});
+export { useCollapse as u };
 
-export { timeline as t, useCollapse as u };
-
-//# sourceMappingURL=p-42301d8f.js.map
+//# sourceMappingURL=p-9a263d0e.js.map

package/dist/components/p-9a263d0e.js.map

@@ -0,0 +1 @@
+{"file":"p-9a263d0e.js","mappings":";;MAQM,WAAW,GAAG,CAClB,IAAiB,EACjB,EAAE,QAAQ,KAAsB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAEjD,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC,CAAC;;;;;;IAOhC,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAEnD,UAAU,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAEvC,OAAO,CAAC;gBACN,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,CAAC;gBACL,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,YAAY;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAChC;;;;;IAMD,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KAC1B;;;;;;;IAQD,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACvC,UAAU,CAAC,GAAG,CAAC;gBACb,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;YAEH,OAAO,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,YAAY;gBAChB,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACxC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtC,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,QAAQ;QACR,MAAM;QACN,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ;;;;","names":["styler"],"sources":["src/animations/collapse.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type CollapseOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration }: CollapseOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to 0. Make sure\n   * the element has no border or y padding set, otherwise the animation will\n   * not work as expected.\n   */\n  function collapse() {\n    return new Promise<void>(resolve => {\n      const height = node.getBoundingClientRect().height;\n\n      nodeStyler.set({ overflow: 'hidden' });\n\n      animate({\n        from: height,\n        to: 0,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Apply the collapsed styles without animating, useful when initial state\n   * is collapsed.\n   */\n  function setCollapsed() {\n    node.style.maxHeight = '0';\n    node.style.overflow = 'hidden';\n  }\n\n  /**\n   * Apply the expanded styles without animating, useful when initial state\n   * is expanded.\n   */\n  function setExpanded() {\n    node.style.maxHeight = '';\n    node.style.overflow = '';\n  }\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to the value\n   * of the scrollHeight. Make sure the element has no border or y padding set,\n   * otherwise the animation will not work as expected. Once complete, the\n   * max-height and overflow style properties will be removed.\n   */\n  function expand() {\n    return new Promise<void>(resolve => {\n      const scrollHeight = node.scrollHeight;\n      nodeStyler.set({\n        overflow: 'hidden',\n      });\n\n      animate({\n        from: 0,\n        to: scrollHeight,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          node.style.removeProperty('max-height');\n          node.style.removeProperty('overflow');\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    collapse,\n    expand,\n    setCollapsed,\n    setExpanded,\n  };\n};\n\nexport { useCollapse };\n"],"version":3}

package/dist/components/{p-5bee0141.js → p-ba87d9d5.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$1 } from './p-001c888b.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
+import { d as defineCustomElement$1 } from './p-8067d283.js';
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -8,6 +8,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.openChanged = createEvent(this, "openChanged", 7);
         /**
          * Decides where the tooltip shows up next to the element it’s linked to
          * (above, below, to the sides). If there isn’t enough room, it will adjust
@@ -21,7 +22,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
          */
         this.enterDelay = 0;
     }
-    //#endregion PROPERTIES
+    //#endregion EVENTS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
@@ -34,7 +35,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a5ac533aff7f1dbeb92fdea0b512418a05ed39d1' }, h("slot", { key: '5c96133df21b7fdc7cf2d9eb73766dc88d4bdc2e' }), h("nv-popover", { key: 'e80cb8ebb57f57940e9a32bb00499a5a35e1e547', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '180dedb4dcf838271ea48986f5c8183fd8772af4', slot: "content" }, this.message), h("slot", { key: 'b5a026e8a446e08a1a50fc3838757e4b4264b07a', name: "content" }))));
+        return (h(Host, { key: 'ced39f0ebd3ee8eba520e6d6241728e95031dafc' }, h("slot", { key: '2b65cb626604a29e1924e7eb2bbb4e937c1a9e9c' }), h("nv-popover", { key: 'd4c91e52da651c1545b6d7af98c740e08eeaffbf', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '45805ecf6ffee80f4f81acce2d921ad66585bf2b', slot: "content" }, this.message), h("slot", { key: 'e6a7e80c35c3a87627a50b271c86783fab791338', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvTooltipStyle0; }
@@ -66,4 +67,4 @@ defineCustomElement();
 
 export { NvTooltip as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-5bee0141.js.map
+//# sourceMappingURL=p-ba87d9d5.js.map

package/dist/components/p-ba87d9d5.js.map

@@ -0,0 +1 @@
+{"file":"p-ba87d9d5.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,sxBAAsxB,CAAC;AAC5yB,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAiDjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  user-select: none;\n  &:has([fluid]:not([fluid='false'])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow:\n    0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n    var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n    0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n    var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  [data-scope='popover'] {\n    @include tooltip-styles();\n\n    [data-scope='arrow'] {\n      @include arrow-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n   * element.\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(child => {\n        return child.getAttribute('slot') === null;\n      });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-6277f746.js → p-ca130ad2.js}

@@ -29,7 +29,7 @@ const NvDialogheader = /*@__PURE__*/ proxyCustomElement(class NvDialogheader ext
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '850e2408cb7a35903be3bc51fbee000fc58f4a76' }, !this.hasSlot ? (h(Fragment, null, h("div", { class: "heading" }, this.heading), h("div", { class: "subheading" }, this.subheading))) : (h("slot", null))));
+        return (h(Host, { key: '2ace10c91041456a36909763b62a2adeede183c7' }, !this.hasSlot ? (h(Fragment, null, h("div", { class: "heading" }, this.heading), h("div", { class: "subheading" }, this.subheading))) : (h("slot", null))));
     }
     get el() { return this; }
     static get style() { return NvDialogheaderStyle0; }
@@ -54,4 +54,4 @@ defineCustomElement();
 
 export { NvDialogheader as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-6277f746.js.map
+//# sourceMappingURL=p-ca130ad2.js.map

package/dist/components/{p-6277f746.js.map → p-ca130ad2.js.map}

@@ -1 +1 @@
-{"file":"p-6277f746.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,wqBAAwqB,CAAC;AACnsB,6BAAe,iBAAiB;;MCSnB,cAAc;IAL3B;;;QAOU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,YAAO,GAAW,cAAc,CAAC;KA0C3C;;;;IA9BC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CACtC,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.tsx"],"sourcesContent":["nv-dialogheader {\n  // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n  padding: var(--dialog-header-padding-top)\n    var(--dialog-header-padding-x)\n    var(--dialog-header-padding-bottom)\n    var(--dialog-header-padding-x);\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n\n    /* text/sm/regular */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-ca130ad2.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,wqBAAwqB,CAAC;AACnsB,6BAAe,iBAAiB;;MCSnB,cAAc;IAL3B;;;QAOU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,YAAO,GAAW,cAAc,CAAC;KA0C3C;;;;IA9BC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CACtC,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.tsx"],"sourcesContent":["nv-dialogheader {\n  // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n  padding: var(--dialog-header-padding-top)\n    var(--dialog-header-padding-x)\n    var(--dialog-header-padding-bottom)\n    var(--dialog-header-padding-x);\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n\n    /* text/sm/regular */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-a0d7e0cd.js → p-d32b75ac.js}

@@ -237,26 +237,6 @@ function parseDate(dateInput, dateFormat) {
         parsed = dayjs(dateInput, dateFormat, true);
     }
     if (!parsed.isValid()) {
-        // Check if the date input contains placeholder characters (incomplete input from Inputmask)
-        // This specifically targets partial dates being typed with placeholder characters
-        const hasPlaceholderChars = typeof dateInput === 'string' &&
-            (dateInput.includes('_') ||
-                dateInput.includes('-_') ||
-                dateInput.includes('/_') ||
-                dateInput.includes('._'));
-        // Check if it looks like a partial date being typed (starts with valid pattern)
-        const looksLikePartialDate = typeof dateInput === 'string' &&
-            dateInput.length < dateFormat.length &&
-            /^[\d\-/.]*$/.test(dateInput) && // Only contains digits and date separators
-            dateInput.length > 0;
-        const isIncompleteInput = hasPlaceholderChars || looksLikePartialDate;
-        // Only log error if it's not an incomplete input (to avoid spam during typing)
-        if (!isIncompleteInput) {
-            console.error(`Parsing error:`, {
-                dateInput,
-                dateFormat: dateFormat,
-            });
-        }
         return null;
     }
     return parsed.toDate();
@@ -418,9 +398,13 @@ const CalendarGrid = 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 => {
+            if (day.isBlank) {
+                return h("div", { class: "day day-blank" });
+            }
             const date = day.date;
-            if (!date)
-                return null;
+            if (!date || !day.dayOfMonth) {
+                return h("div", { class: "day-cell is-disabled is-empty" });
+            }
             const isSelected = selectionType === 'single' &&
                 isSameDate(date, selectedDate, { isUTCMode });
             const isInRange = isDateInRange(date);
@@ -431,7 +415,7 @@ const CalendarGrid = props => {
         }))));
 };
 
-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.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)}.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 = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
@@ -490,6 +474,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         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
@@ -525,7 +511,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                     }
                     // 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;
                     }
                 }
@@ -553,7 +539,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                     }
                     // 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;
                     }
                 }
@@ -574,20 +560,14 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
          */
         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;
         };
@@ -599,12 +579,16 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
             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
@@ -747,12 +731,15 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         /**
          * 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, totalCalendars = 1) => {
-            const year = this.currentDate.getUTCFullYear();
-            const month = this.currentDate.getUTCMonth() + offset;
+        this.getDaysInMonth = (offset = 0) => {
+            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 = [];
@@ -761,18 +748,18 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
             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;
-            // Add the days of the previous month for the first calendar
-            if (offset === 0 && offsetDays > 0) {
-                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),
-                    });
-                }
+            // 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++) {
@@ -782,11 +769,12 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                     date,
                     isCurrentMonth: true,
                     isDisabled: this.isDateDisabled(date),
+                    isBlank: false,
                 });
             }
-            // Add the days of the next month only for the last calendar
-            if (offset === totalCalendars - 1) {
-                const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+            // Add padding days to fill the last week
+            const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+            if (nextMonthDaysNeeded < 7) {
                 for (let i = 1; i <= nextMonthDaysNeeded; i++) {
                     const date = new Date(Date.UTC(year, month + 1, i));
                     days.push({
@@ -794,6 +782,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                         date,
                         isCurrentMonth: false,
                         isDisabled: this.isDateDisabled(date),
+                        // Days from next month are blank if not the last calendar
+                        isBlank: offset < this.numberOfCalendars - 1,
                     });
                 }
             }
@@ -831,12 +821,25 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         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
@@ -848,9 +851,10 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
             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);
             }
         };
         /**
@@ -861,7 +865,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         this.handleWeekSelection = (weekDays, calendarIndex) => {
             if (this.selectionType !== 'range')
                 return;
-            const allDays = this.getDaysInMonth(calendarIndex, this.numberOfCalendars);
+            const allDays = this.getDaysInMonth(calendarIndex);
             const weekStart = weekDays[0];
             const weekEnd = weekDays[weekDays.length - 1];
             if (!weekStart || !weekEnd)
@@ -1074,12 +1078,17 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         index, 
         /** Month offset */
         offset) => {
-            const days = this.getDaysInMonth(offset, this.numberOfCalendars);
+            const days = this.getDaysInMonth(offset);
             const weeks = [];
             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
@@ -1129,7 +1138,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                 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;
                 }
             }
@@ -1157,7 +1166,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                 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;
                 }
             }
@@ -1271,6 +1280,27 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
             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
@@ -1278,8 +1308,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '43d4f3ab9199e9c5f15e853f15283fa59e4a436d' }, h("div", { key: 'b9956225cb2c16d997aa44266af8f8c8222ea968', class: "datepicker-root" }, h("div", { key: '05b63935bc5ebf500bb52d10688385f994b47fb4', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'd7af15b9ce051026cf841b3be361b32d8db41fc1', 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: '1765334bf15564bc9886b210c54bddba64c7042e', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '0ac3446394b8c23b859e5f0065370b95b6fd05d2' })));
+        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' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1310,7 +1340,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         "selectedDate": [32],
         "startDate": [32],
         "endDate": [32],
-        "months": [32]
+        "months": [32],
+        "clear": [64]
     }, undefined, {
         "numberOfCalendars": ["validateNumberOfCalendars"],
         "rangeValue": ["onRangeValueChange"],
@@ -1335,4 +1366,4 @@ defineCustomElement();
 
 export { NvCalendar as N, commonjsGlobal as c, defineCustomElement as d, getDefaultExportFromCjs as g };
 
-//# sourceMappingURL=p-a0d7e0cd.js.map
+//# sourceMappingURL=p-d32b75ac.js.map