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

package/dist/cjs/{nv-dialog.entry-O47Eol_7.js → index.esm-D3eWMME9-CG1TVKfu.js}

@@ -1,17 +1,5 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
-var grow_animationCvHGHBL4 = require('./grow.animation-CvHGHBL4-DDIEYBK-.js');
-var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
-require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
-var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
-var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
-var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -546,287 +534,4 @@ var tabbable = function tabbable(container, options) {
   return sortByOrder(candidates);
 };
 
-const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}";
-
-const NvDialog = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged", 3);
-        this.eventsAttached = false;
-        this.triggerClickEvents = [
-            ['click', this.show],
-            [
-                'keydown',
-                (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        this.show();
-                    }
-                },
-            ],
-        ];
-        /**
-         * Use this prop to toggle the visibility of the dialog. Set to true to show
-         * the dialog and false to hide it.
-         */
-        this.open = false;
-        /**
-         * If true, the dialog cannot be closed by the user.
-         */
-        this.undismissable = false;
-        /**
-         * If true, the dialog will be closed when the backdrop is clicked.
-         */
-        this.clickOutside = false;
-        /**
-         * If true, the dialog visibility is managed manually through methods or the
-         * open prop.
-         */
-        this.controlled = false;
-        /**
-         * If true, the dialog takes full width styling.
-         */
-        this.full = false;
-        /**
-         * Controls whether the dialog should automatically focus the first focusable
-         * element when opened. When disabled, prevents unwanted tooltip triggers on
-         * dialog open.
-         */
-        this.autofocus = false;
-        /**
-         * Checks for and sets up form ID if a form is present
-         */
-        this.checkForForm = () => {
-            if (!this.form) {
-                const formElement = this.el.querySelector('form');
-                if (formElement) {
-                    this.form = this.ensureFormId(formElement);
-                }
-            }
-        };
-        /**
-         * Handles the native dialog close event.
-         */
-        this.handleDialogClose = () => {
-            if (this.open) {
-                this.close();
-            }
-        };
-        /**
-         * Handles the click event to close the dialog when clickOutside is true.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.handleDialogClick = (event) => {
-            if (!this.clickOutside || this.undismissable)
-                return;
-            if (this.checkForOpenPopovers())
-                return;
-            if (event.target === this.backdropElement) {
-                this.close();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.checkForOpenPopovers = () => {
-            let hasOpenPopover = false;
-            this.el.querySelectorAll('nv-popover').forEach(popover => {
-                if (popover.hasAttribute('open')) {
-                    hasOpenPopover = true;
-                }
-            });
-            return hasOpenPopover;
-        };
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Call this method to show the dialog, making it visible on the screen.
-     */
-    async show() {
-        this.open = true;
-        this.preventScroll();
-        /** It is recommended to use the .show() or .showModal() method to render
-         * dialogs, rather than the open attribute. If a <dialog> is opened using
-         * the open attribute, it is non-modal. */
-        const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement);
-        setFadeOut();
-        this.dialogElement.showModal();
-        const { setGrowIn, growIn } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
-            duration: 100,
-            amount: 0.9,
-        });
-        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
-            duration: 100,
-        });
-        setGrowIn();
-        await timeline_animationCgHCo_Ho.parallel(fadeIn, growIn).start();
-    }
-    /**
-     * Call this method to hide the dialog, making it disappear from view.
-     */
-    async close() {
-        this.open = false;
-        this.allowScroll();
-        const { growOut } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
-            duration: 150,
-            amount: 0.85,
-        });
-        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
-            duration: 150,
-        });
-        await timeline_animationCgHCo_Ho.parallel(growOut, fadeOut).start();
-        this.dialogElement.close();
-    }
-    /**
-     * Sets the autofocus on the first focusable element in the dialog.
-     */
-    setAutofocus() {
-        const focusableElements = tabbable(this.dialogElement, {
-            displayCheck: 'none',
-        });
-        if (focusableElements.length > 0) {
-            // Convert to array and find element with smallest top and left position
-            let topLeftElement = focusableElements[0];
-            let topLeftRect = topLeftElement.getBoundingClientRect();
-            focusableElements.forEach(element => {
-                const rect = element.getBoundingClientRect();
-                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
-                    topLeftElement = element;
-                    topLeftRect = rect;
-                }
-            });
-            // Set autofocus attribute on the found element
-            topLeftElement.setAttribute('autofocus', 'true');
-        }
-    }
-    /**
-     * Attaches event listeners to the dialog.
-     */
-    attachEventListeners() {
-        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animationCvHGHBL4.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = true;
-        }
-    }
-    /**
-     * Prevents the body from scrolling when the dialog is open.
-     * Compensates for scrollbar width to prevent layout shift.
-     */
-    preventScroll() {
-        // Calculate scrollbar width
-        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-        // Apply overflow hidden and padding compensation
-        document.documentElement.style.overflow = 'hidden';
-        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
-    }
-    /**
-     * Allows the body to scroll when the dialog is closed.
-     * Removes the applied overflow and padding styles.
-     */
-    allowScroll() {
-        // Remove the applied styles
-        document.documentElement.style.removeProperty('overflow');
-        document.documentElement.style.removeProperty('padding-right');
-    }
-    ensureFormId(formElement) {
-        if (!formElement.id) {
-            formElement.id = `dialog-form-${v4BdYh22OP.v4()}`;
-        }
-        return formElement.id;
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    async handleDialogOpenChange(isOpen) {
-        if (isOpen) {
-            this.show();
-            this.openChanged.emit(isOpen);
-        }
-        else {
-            this.close();
-            this.openChanged.emit(isOpen);
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LISTENERS
-    /**
-     * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
-     * @param {KeyboardEvent} event - The keydown event.
-     */
-    handleKeyDown(event) {
-        if (event.key !== 'Escape')
-            return;
-        if (!this.open)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        const hasOpenPopover = this.checkForOpenPopovers();
-        if (!this.undismissable && !hasOpenPopover) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        }
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Lifecycle method that runs before the component loads.
-     * Initializes the trigger, header, and footer elements by finding them in the component's children.
-     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
-     */
-    componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === 'trigger';
-        });
-        this.headerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'header' ||
-                child.tagName.toLowerCase() === 'nv-dialogheader');
-        });
-        this.footerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'footer' ||
-                child.tagName.toLowerCase() === 'nv-dialogfooter');
-        });
-        // Initial form check
-        this.checkForForm();
-    }
-    componentWillUpdate() {
-        this.attachEventListeners();
-    }
-    componentDidLoad() {
-        if (this.open) {
-            this.show();
-        }
-        // Only set autofocus if the prop is true and no element already has autofocus
-        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
-            this.setAutofocus();
-        }
-        this.attachEventListeners();
-        // Additional form check in case form was added after initial load
-        this.checkForForm();
-        // this.setupContentBodyListeners();
-    }
-    disconnectedCallback() {
-        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animationCvHGHBL4.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = false;
-        }
-        this.allowScroll();
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: 'e1837ebe65fcf0e56880438b59a5e8c4b5873926' }, index.h("slot", { key: '543e69780f3dad15a91b4bcb1f4199153bbce1b3', name: "trigger" }), index.h("dialog", { key: 'ef1600f73c8d25744b3b69356e1c4a98e605be1e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsxChV9xqsO.clsx({ full: this.full }) }, index.h("div", { key: '894e91291a5ee2a1c26a658e1ca7aaf237d71069', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '78700c26d1ec553d67a8e62f3f3628fab8deb49a', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: 'd042c828bc6886091128425ea3e5c73035a0cea1', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '035273dd23255883a7a5feb354d230242683e00e', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'd86417aae675f8611312495d31ca8d0b58c2caaf', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cb48b94b846097d04ffd98c6689cd4116e8cd9f9' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleDialogOpenChange"]
-    }; }
-};
-NvDialog.style = nvDialogCss;
-
-exports.nv_dialog = NvDialog;
+exports.tabbable = tabbable;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -71,6 +71,9 @@ exports.NvDatatable = index.NvDatatable;
 exports.NvDialog = index.NvDialog;
 exports.NvDialogfooter = index.NvDialogfooter;
 exports.NvDialogheader = index.NvDialogheader;
+exports.NvDrawer = index.NvDrawer;
+exports.NvDrawerfooter = index.NvDrawerfooter;
+exports.NvDrawerheader = index.NvDrawerheader;
 exports.NvFieldcheckbox = index.NvFieldcheckbox;
 exports.NvFielddate = index.NvFielddate;
 exports.NvFielddaterange = index.NvFielddaterange;

package/dist/cjs/{nv-accordion-item.entry-B_l0-ux0.js → nv-accordion-item.entry-Bu1tAcCq.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-accordion.entry-BX8_YuZF.js → nv-accordion.entry-jWjLdX8w.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -143,10 +143,9 @@ const NvAccordion = class {
         }
     }
     async componentDidLoad() {
-        var _a;
         const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
         // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set
-        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) &&
+        if (!this.data?.length &&
             (!this.openIndexes || this.openIndexes.length === 0)) {
             const childOpenIndexes = items
                 .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))
@@ -165,11 +164,7 @@ const NvAccordion = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (index.h(index.Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
-            var _a;
-            return (index.h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer)));
-        })) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, this.data?.length ? (this.data.map((item, i) => (index.h("nv-accordion-item", { key: item.id ?? i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer))))) : (index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-alert.entry-DCWYR0OK.js → nv-alert.entry-E9ZJay_K.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
@@ -163,8 +163,7 @@ const NvAlert = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (index.h(index.Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsxChV9xqsO.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && index.h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && index.h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), index.h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (index.h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
+        return (index.h(index.Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsxChV9xqsO.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: this.icon ?? this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && index.h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && index.h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), index.h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (index.h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-avatar.entry-C_xZD3Lp.js → nv-avatar.entry-CUX7u0kR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-badge_2.entry-JjqANStV.js → nv-badge_2.entry-bxpV5gxE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
@@ -203,7 +203,7 @@ const NvFielddropdownitemcheck = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e748d27a6ee1168b069793541de3bf2defd34b85', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '967307de6a757e0cd5cb061d57ce94c04c3e84e4', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: '9e76ecb6c08ef6b9fe3ea07790c469676fdad227' }), index.h("slot", { key: '9a40f79c6685e89d58b661bcd00c00158fe6bce6', name: "main" }), index.h("slot", { key: '8c901183f49fa4f911a8265df45a19202259015a', name: "label" }), index.h("slot", { key: 'd35e5af79bb83482d5e8568b5aaedc6815ec9b4e', name: "description" }))));
+        return (index.h(index.Host, { key: '97827418a246f09cfda685f15b661359d0812d8c', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: 'e656cf4d9e7f2e7f08ded1a8d42e4d5703f5d184', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: 'cfd59f0f0fc834d3fb29a39637f65c92ffba15b8' }), index.h("slot", { key: 'ae5daefbb1952ebb19d3dd3d8b7c36667dcac79e', name: "main" }), index.h("slot", { key: '30ab019b447024c3feab154a67779de5b8dc16a2', name: "label" }), index.h("slot", { key: '2cf42ee653cc99ab9e925ede1da74694bfa57106', name: "description" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-breadcrumb.entry-DQZDn6cm.js → nv-breadcrumb.entry-Cbbb9Qeh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-breadcrumbs.entry-Bz0GjhY_.js → nv-breadcrumbs.entry-BTqnp9zO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-button.entry-Br1DH9Vj.js → nv-button.entry-upWH19y6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -77,13 +77,12 @@ const NvButton = class {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
-            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type !== constantsBReL3Lsa.ButtonType.Button &&
-                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
+                (this.form || this.internals?.form)) {
                 this.processFormAction();
             }
             else if (this.form && this.type === constantsBReL3Lsa.ButtonType.Button) {
@@ -96,12 +95,11 @@ const NvButton = class {
          * Falls back to ElementInternals form if no explicit form ID is provided.
          */
         this.processFormAction = () => {
-            var _a, _b;
             const formElement = this.form
                 ? document.getElementById(this.form)
-                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+                : this.internals?.form;
             if (!formElement) {
-                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
                 return;
             }
             switch (this.type) {

package/dist/cjs/{nv-buttongroup.entry-BZaTKN_n.js → nv-buttongroup.entry-CuZCRsnV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-calendar.entry-D9ESuu7C.js → nv-calendar.entry-CT3mASW6.js}

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

package/dist/cjs/{nv-col.entry-CfgPMMxS.js → nv-col.entry--pCxkaTh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');