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

package/hydrate/index.mjs

@@ -2721,263 +2721,209 @@ var registerHost = (elm, cmpMeta) => {
 };
 var styles = /* @__PURE__ */ new Map();
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
+var NvAccordionStyle0 = nvAccordionCss;
 
-var FeedbackColors;
-(function (FeedbackColors) {
-    FeedbackColors["Information"] = "information";
-    FeedbackColors["Warning"] = "warning";
-    FeedbackColors["Success"] = "success";
-    FeedbackColors["Error"] = "error";
-    FeedbackColors["Neutral"] = "neutral";
-})(FeedbackColors || (FeedbackColors = {}));
-var DeprecatedSemanticColors;
-(function (DeprecatedSemanticColors) {
-    DeprecatedSemanticColors["Neutral"] = "neutral";
-    DeprecatedSemanticColors["Primary"] = "primary";
-    DeprecatedSemanticColors["Secondary"] = "secondary";
-    DeprecatedSemanticColors["Success"] = "success";
-    DeprecatedSemanticColors["Error"] = "error";
-})(DeprecatedSemanticColors || (DeprecatedSemanticColors = {}));
-var SemanticSizes;
-(function (SemanticSizes) {
-    SemanticSizes["ExtraSmall"] = "xs";
-    SemanticSizes["Small"] = "sm";
-    SemanticSizes["Medium"] = "md";
-    SemanticSizes["Large"] = "lg";
-    SemanticSizes["ExtraLarge"] = "xl";
-})(SemanticSizes || (SemanticSizes = {}));
-var ButtonSize;
-(function (ButtonSize) {
-    ButtonSize["ExtraSmall"] = "xs";
-    ButtonSize["Small"] = "sm";
-    ButtonSize["Medium"] = "md";
-    ButtonSize["Large"] = "lg";
-})(ButtonSize || (ButtonSize = {}));
-var ButtonEmphasis;
-(function (ButtonEmphasis) {
-    ButtonEmphasis["High"] = "high";
-    ButtonEmphasis["Medium"] = "medium";
-    ButtonEmphasis["Low"] = "low";
-    ButtonEmphasis["Lower"] = "lower";
-})(ButtonEmphasis || (ButtonEmphasis = {}));
-var ButtonType;
-(function (ButtonType) {
-    ButtonType["Submit"] = "submit";
-    ButtonType["Reset"] = "reset";
-    ButtonType["Button"] = "button";
-})(ButtonType || (ButtonType = {}));
-var IconButtonShape;
-(function (IconButtonShape) {
-    IconButtonShape["Square"] = "square";
-    IconButtonShape["Rounded"] = "rounded";
-})(IconButtonShape || (IconButtonShape = {}));
-var LoaderColors;
-(function (LoaderColors) {
-    LoaderColors["High"] = "brand";
-    LoaderColors["Low"] = "white";
-})(LoaderColors || (LoaderColors = {}));
-var LabelPlacement;
-(function (LabelPlacement) {
-    LabelPlacement["Before"] = "before";
-    LabelPlacement["After"] = "after";
-})(LabelPlacement || (LabelPlacement = {}));
-var TextInputAutocomplete;
-(function (TextInputAutocomplete) {
-    TextInputAutocomplete["On"] = "on";
-    TextInputAutocomplete["Off"] = "off";
-    TextInputAutocomplete["Section"] = "section-*";
-    TextInputAutocomplete["Shipping"] = "shipping";
-    TextInputAutocomplete["Billing"] = "billing";
-    TextInputAutocomplete["Home"] = "home";
-    TextInputAutocomplete["Work"] = "work";
-    TextInputAutocomplete["Mobile"] = "mobile";
-    TextInputAutocomplete["Fax"] = "fax";
-    TextInputAutocomplete["Pager"] = "pager";
-    TextInputAutocomplete["Tel"] = "tel";
-    TextInputAutocomplete["TelCountryCode"] = "tel-country-code";
-    TextInputAutocomplete["TelNational"] = "tel-national";
-    TextInputAutocomplete["TelAreaCode"] = "tel-area-code";
-    TextInputAutocomplete["TelLocal"] = "tel-local";
-    TextInputAutocomplete["TelLocalPrefix"] = "tel-local-prefix";
-    TextInputAutocomplete["TelLocalSuffix"] = "tel-local-suffix";
-    TextInputAutocomplete["TelExtension"] = "tel-extension";
-    TextInputAutocomplete["Email"] = "email";
-    TextInputAutocomplete["IMProtocol"] = "impp";
-    TextInputAutocomplete["Name"] = "name";
-    TextInputAutocomplete["HonorificPrefix"] = "honorific-prefix";
-    TextInputAutocomplete["GivenName"] = "given-name";
-    TextInputAutocomplete["AdditionalName"] = "additional-name";
-    TextInputAutocomplete["FamilyName"] = "family-name";
-    TextInputAutocomplete["HonorificSuffix"] = "honorific-suffix";
-    TextInputAutocomplete["Nickname"] = "nickname";
-    TextInputAutocomplete["Username"] = "username";
-    TextInputAutocomplete["NewPassword"] = "new-password";
-    TextInputAutocomplete["CurrentPassword"] = "current-password";
-    TextInputAutocomplete["OneTimeCode"] = "one-time-code";
-    TextInputAutocomplete["OrganizationTitle"] = "organization-title";
-    TextInputAutocomplete["Organization"] = "organization";
-    TextInputAutocomplete["StreetAddress"] = "street-address";
-    TextInputAutocomplete["AddressLine1"] = "address-line1";
-    TextInputAutocomplete["AddressLine2"] = "address-line2";
-    TextInputAutocomplete["AddressLine3"] = "address-line3";
-    TextInputAutocomplete["AddressLevel4"] = "address-level4";
-    TextInputAutocomplete["AddressLevel3"] = "address-level3";
-    TextInputAutocomplete["AddressLevel2"] = "address-level2";
-    TextInputAutocomplete["AddressLevel1"] = "address-level1";
-    TextInputAutocomplete["Country"] = "country";
-    TextInputAutocomplete["CountryName"] = "country-name";
-    TextInputAutocomplete["PostalCode"] = "postal-code";
-    TextInputAutocomplete["CCName"] = "cc-name";
-    TextInputAutocomplete["CCGivenName"] = "cc-given-name";
-    TextInputAutocomplete["CCAdditionalName"] = "cc-additional-name";
-    TextInputAutocomplete["CCFamilyName"] = "cc-family-name";
-    TextInputAutocomplete["CCNumber"] = "cc-number";
-    TextInputAutocomplete["CCExp"] = "cc-exp";
-    TextInputAutocomplete["CCExpMonth"] = "cc-exp-month";
-    TextInputAutocomplete["CCExpYear"] = "cc-exp-year";
-    TextInputAutocomplete["CCCSC"] = "cc-csc";
-    TextInputAutocomplete["CCType"] = "cc-type";
-    TextInputAutocomplete["TransactionCurrency"] = "transaction-currency";
-    TextInputAutocomplete["TransactionAmount"] = "transaction-amount";
-    TextInputAutocomplete["Language"] = "language";
-    TextInputAutocomplete["Bday"] = "bday";
-    TextInputAutocomplete["BdayDay"] = "bday-day";
-    TextInputAutocomplete["BdayMonth"] = "bday-month";
-    TextInputAutocomplete["BdayYear"] = "bday-year";
-    TextInputAutocomplete["Sex"] = "sex";
-    TextInputAutocomplete["Url"] = "url";
-    TextInputAutocomplete["Photo"] = "photo";
-})(TextInputAutocomplete || (TextInputAutocomplete = {}));
-var TimeType;
-(function (TimeType) {
-    TimeType["Hours"] = "hours";
-    TimeType["Minutes"] = "minutes";
-    TimeType["Seconds"] = "seconds";
-})(TimeType || (TimeType = {}));
-var GlobalFilterPosition;
-(function (GlobalFilterPosition) {
-    GlobalFilterPosition["End"] = "end";
-    GlobalFilterPosition["Start"] = "start";
-    GlobalFilterPosition["Center"] = "center";
-})(GlobalFilterPosition || (GlobalFilterPosition = {}));
-var SortingPossibility;
-(function (SortingPossibility) {
-    SortingPossibility["Asc"] = "asc";
-    SortingPossibility["Desc"] = "desc";
-})(SortingPossibility || (SortingPossibility = {}));
-const WEEK_ABBREVIATIONS = {
-    'fr-FR': 'Sem', // Semaine
-    'fr-BE': 'Sem', // Semaine
-    'nl-BE': 'W', // Week
-    'en-BE': 'W', // Week
-    'en-US': 'W', // Week
-    'en-GB': 'W', // Week
-    'es-ES': 'Sem', // Semana
-    'de-DE': 'KW', // Kalenderwoche
-    'it-IT': 'Set', // Settimana
-    'pt-PT': 'Sem', // Semana
-    'nl-NL': 'W', // Week
-    'pl-PL': 'Tyd', // Tydzień
-    'ru-RU': 'Нед', // Неделя
-    'ja-JP': '週', // Shū
-    'zh-CN': '周', // Zhōu
-    'ko-KR': '주', // Ju
-};
-const CUSTOM_DAY_NAMES = {
-    'fr-BE': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
-    'nl-BE': ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],
-    'de-DE': ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
-    'en-BE': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    'en-US': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    'en-GB': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-};
-const CUSTOM_MONTH_NAMES = {
-    'fr-BE': [
-        'Jan',
-        'Fev',
-        'Mar',
-        'Avr',
-        'Mai',
-        'Jun',
-        'Jul',
-        'Aou',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-    'nl-BE': [
-        'Jan',
-        'Feb',
-        'Maa',
-        'Apr',
-        'Mei',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Okt',
-        'Nov',
-        'Dec',
-    ],
-    'de-DE': [
-        'Jan',
-        'Feb',
-        'Mär',
-        'Apr',
-        'Mai',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Okt',
-        'Nov',
-        'Dez',
-    ],
-    'en-BE': [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-    'en-US': [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-    'en-GB': [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-};
+/**
+ * @slot default - Slot for custom content (optional, ignored if data is provided)
+ */
+class NvAccordion {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nvChange = createEvent(this, "nvChange", 7);
+        /**
+         * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
+         */
+        this.mode = 'accordion';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /**
+         * Internal index of open items (not exposed)
+         */
+        this.internalOpenIndexes = [];
+        /**
+         * Parsed data from data prop
+         */
+        this.parsedData = [];
+        // Synchronization openIndexes <-> internalOpenIndexes
+        this.itemToggleHandlers = [];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens an item by its index (Public API)
+     * @param {number} index Index of the item to open
+     */
+    async open(index) {
+        this.toggleItem(index, true);
+    }
+    /**
+     * Closes an item by its index (Public API)
+     * @param {number} index Index of the item to close
+     */
+    async close(index) {
+        this.toggleItem(index, false);
+    }
+    /**
+     * Toggles an item's state (internal)
+     * @param {number} index Item index
+     * @param {boolean} [forceOpen] Force open (true) or close (false)
+     */
+    toggleItem(index, forceOpen) {
+        let openIndexes = this.openIndexes !== undefined
+            ? [...this.openIndexes]
+            : [...(this.internalOpenIndexes || [])];
+        const isOpen = openIndexes.includes(index);
+        if (this.mode === 'accordion') {
+            openIndexes = forceOpen === false || isOpen ? [] : [index];
+        }
+        else {
+            if (forceOpen === false) {
+                openIndexes = openIndexes.filter(i => i !== index);
+            }
+            else if (!isOpen) {
+                openIndexes.push(index);
+            }
+        }
+        this.internalOpenIndexes = openIndexes;
+        this.nvChange.emit({ openIndexes });
+        if (this.openIndexes !== undefined) {
+            this.openIndexes =
+                this.mode === 'accordion'
+                    ? [openIndexes[0]].filter(x => x !== undefined)
+                    : [...openIndexes];
+        }
+        // Update child elements state - for both data and slot usage
+        this.updateChildrenState();
+    }
+    /**
+     * Updates the open state of child elements based on internalOpenIndexes
+     */
+    async updateChildrenState() {
+        // Force a re-render by updating the state
+        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
+    }
+    /**
+     * Listens to itemToggle events from nv-accordion-item elements
+     * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
+     */
+    onItemToggle(event) {
+        // Ignore if using data (handled by itemToggleHandlers)
+        if (this.parsedData && this.parsedData.length > 0)
+            return;
+        // Find the index of the item that emitted the event
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        const targetItem = event.target;
+        const index = items.indexOf(targetItem);
+        if (index !== -1) {
+            // If the event comes from an item that is opening, handle accordion mode
+            if (event.detail === true) {
+                if (this.mode === 'accordion') {
+                    // Close all other items
+                    items.forEach((item, i) => {
+                        if (i !== index && item.open) {
+                            item.open = false;
+                        }
+                    });
+                    this.internalOpenIndexes = [index];
+                }
+                else {
+                    // Add index to internalOpenIndexes if not already present
+                    if (!this.internalOpenIndexes.includes(index)) {
+                        this.internalOpenIndexes = [...this.internalOpenIndexes, index];
+                    }
+                }
+            }
+            else {
+                // If the item is closing, remove it from internalOpenIndexes
+                this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
+            }
+            // Emit nvChange event
+            this.nvChange.emit({ openIndexes: this.internalOpenIndexes });
+            if (this.openIndexes !== undefined) {
+                this.openIndexes =
+                    this.mode === 'accordion'
+                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
+                        : [...this.internalOpenIndexes];
+            }
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    dataChanged() {
+        this.parseData();
+    }
+    parseData() {
+        if (typeof this.data === 'string') {
+            try {
+                this.parsedData = JSON.parse(this.data);
+            }
+            catch (e) {
+                console.error('nv-accordion: Failed to parse data prop.', e);
+                this.parsedData = [];
+            }
+        }
+        else {
+            this.parsedData = this.data || [];
+        }
+        if (this.parsedData) {
+            this.itemToggleHandlers = this.parsedData.map((_, i) => () => this.toggleItem(i));
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    componentDidLoad() {
+        // If using direct child elements, initialize their state
+        if (!this.parsedData || this.parsedData.length === 0) {
+            this.updateChildrenState();
+        }
+    }
+    componentWillUpdate() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: '5dcc9ea52a404dff7c4bb176b8a9781019e64bd3', role: "list", class: "nv-accordion" }, this.parsedData && this.parsedData.length > 0 ? (this.parsedData.map((item, i) => {
+            var _a;
+            return (hAsync("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemtitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i), onItemToggle: this.itemToggleHandlers[i] }, item.subtitle ? (hAsync("div", { slot: "header" }, hAsync("div", { class: "nv-accordion-item__header-content" }, hAsync("span", { class: "nv-accordion-item__title" }, item.title), hAsync("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, hAsync("div", { slot: "content" }, item.content), item.footer && hAsync("div", { slot: "footer" }, item.footer)));
+        })) : (hAsync("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["dataChanged"]
+    }; }
+    static get style() { return NvAccordionStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-accordion",
+        "$members$": {
+            "data": [513],
+            "mode": [513],
+            "openIndexes": [1040],
+            "internalOpenIndexes": [32],
+            "parsedData": [32],
+            "open": [64],
+            "close": [64]
+        },
+        "$listeners$": [[0, "itemToggle", "onItemToggle"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["data", "data"], ["mode", "mode"]]
+    }; }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -4957,79 +4903,532 @@ const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) =>
             });
         });
     }
-    /**
-     * Applies the growOut styles without animating, useful when the initial
-     * state is hidden.
-     */
-    function setGrowOut() {
-        node.style.transform = `scale(${amount})`;
-        if (hasFade) {
-            node.style.opacity = '0';
+    /**
+     * Applies the growOut styles without animating, useful when the initial
+     * state is hidden.
+     */
+    function setGrowOut() {
+        node.style.transform = `scale(${amount})`;
+        if (hasFade) {
+            node.style.opacity = '0';
+        }
+    }
+    /**
+     * Applies the growIn styles without animating, useful when the initial
+     * state is visible.
+     */
+    function setGrowIn() {
+        node.style.transform = `scale(1)`;
+        if (hasFade) {
+            node.style.opacity = '1';
+        }
+    }
+    /**
+     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
+     * leaving the scale and opacity styles on the element.
+     */
+    function growOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 1, scale: 1 },
+                to: { opacity: hasFade ? 0 : 1, scale: amount },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        growIn,
+        growOut,
+        setGrowOut,
+        setGrowIn,
+    };
+};
+
+/**
+ * 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());
+    },
+});
+
+const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}";
+var NvAccordionItemStyle0 = nvAccordionItemCss;
+
+/**
+ * Accordion item element for nv-accordion.
+ *
+ * @slot header - Custom header (replaces itemtitle/subtitle)
+ * @slot content - Main content (expandable area)
+ */
+class NvAccordionItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemToggle = createEvent(this, "itemToggle", 7);
+        /** Open or closed */
+        this.open = false;
+        /** Disables the item */
+        this.disabled = false;
+        /** Parent expansion mode (accordion or multi) */
+        this.mode = 'accordion';
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region STATE
+        /** Internal state for open/close rendering */
+        this.currentOpenState = false;
+        /**
+         * Controls if the panel has been initialized for animations
+         */
+        this.isInitialized = false;
+        /**
+         * Animation in progress
+         */
+        this.isAnimating = false;
+        /**
+         * Handler for header click
+         */
+        this.handleHeaderClick = () => {
+            this.toggle();
+        };
+        /**
+         * Handler for iconbutton click
+         * @param {Event} e - Click event
+         */
+        this.handleIconClick = (e) => {
+            e.stopPropagation(); // Prevent header click from triggering
+            this.toggle();
+        };
+        /**
+         * Handler for keyboard events on iconbutton
+         * @param {KeyboardEvent} e - Keyboard event
+         */
+        this.handleHeaderKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            switch (e.key) {
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.toggle();
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open) {
+                        this.open = true;
+                        this.itemToggle.emit(this.open);
+                        this.updateVisibility(this.open);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (this.open) {
+                        this.open = false;
+                        this.itemToggle.emit(this.open);
+                        this.updateVisibility(this.open);
+                    }
+                    break;
+            }
+        };
+    }
+    //#endregion STATE
+    /****************************************************************************/
+    //#region WATCHERS
+    async onOpenChanged(newValue, oldValue) {
+        this.currentOpenState = newValue; // Synchronize internal state
+        // Skip initial render
+        if (oldValue === undefined) {
+            return;
+        }
+        await this.updateVisibility(newValue);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region ANIMATIONS
+    /**
+     * Updates the visibility state with Nova animation system
+     * @param {boolean} open - Whether the accordion item should be open
+     */
+    async updateVisibility(open) {
+        if (!this.contentRef)
+            return;
+        this.isAnimating = true;
+        const { collapse, expand } = useCollapse(this.contentRef, {
+            duration: 200,
+        });
+        if (open) {
+            // Expand with animation
+            await expand();
+        }
+        else {
+            // Collapse with animation
+            await collapse();
+        }
+        this.isAnimating = false;
+    }
+    //#endregion ANIMATIONS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.currentOpenState = this.open; // Initial synchronization
+    }
+    componentDidLoad() {
+        if (this.contentRef) {
+            const { setExpanded, setCollapsed } = useCollapse(this.contentRef);
+            if (this.open) {
+                // If open by default on initial load, set expanded state without animation
+                setExpanded();
+            }
+            else {
+                // If closed by default, set collapsed state without animation
+                setCollapsed();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
         }
     }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
     /**
-     * Applies the growIn styles without animating, useful when the initial
-     * state is visible.
+     * Toggle open/close (Public API)
      */
-    function setGrowIn() {
-        node.style.transform = `scale(1)`;
-        if (hasFade) {
-            node.style.opacity = '1';
+    async toggle() {
+        if (!this.disabled && !this.isAnimating) {
+            this.open = !this.open;
+            this.itemToggle.emit(this.open);
+            // Force animation update directly instead of relying on watcher
+            await this.updateVisibility(this.open);
         }
     }
     /**
-     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
-     * leaving the scale and opacity styles on the element.
+     * Get the chevron icon name based on open state
+     * @returns {string} The icon name to display in the chevron button
      */
-    function growOut() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: 1, scale: 1 },
-                to: { opacity: hasFade ? 0 : 1, scale: amount },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
+    get chevronIconName() {
+        return this.open ? 'chevron-top' : 'chevron-down';
     }
-    return {
-        growIn,
-        growOut,
-        setGrowOut,
-        setGrowIn,
-    };
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'fd0200c1d78b3e3ae7361783dbba14d55732e7cf', class: {
+                'nv-accordion-item': true,
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+                'is-animating': this.isAnimating,
+            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '471cc5dc8ec8a3fff592b5b443a82270aea9a477', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: 'dacf57578644d0ff3d6c5cf55c382c9c04a6fdf4', name: "header" }, hAsync("div", { key: 'd0e23a45fd43046f4dcebcc9cece8c2650cdaf9e', class: "nv-accordion-item__header-content" }, this.itemtitle && (hAsync("span", { key: '061068f7afa0d25d3273868d70d9f55c336d93d7', class: "nv-accordion-item__title" }, this.itemtitle)), this.subtitle && (hAsync("span", { key: '1ba3c4754c95d6fbe97fb4111dba06543879e400', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: '834c4aa3111a8619f4c974e87899d0dfa6d14280', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), hAsync("div", { key: '79ba605179905a7a58a642a2c5d1f0bdf90d67ae', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, hAsync("div", { key: '6ca4b0d9acd5262a4a041ad9d59bbace5cc7850d', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: '85c288666cf3b13abcd1ee1dbaced7ceb9ff9e6e', name: "content" })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+    static get style() { return NvAccordionItemStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-accordion-item",
+        "$members$": {
+            "itemtitle": [513],
+            "subtitle": [513],
+            "open": [1540],
+            "disabled": [516],
+            "maxContentHeight": [514, "max-content-height"],
+            "mode": [513],
+            "currentOpenState": [32],
+            "isInitialized": [32],
+            "isAnimating": [32],
+            "toggle": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["itemtitle", "itemtitle"], ["subtitle", "subtitle"], ["open", "open"], ["disabled", "disabled"], ["maxContentHeight", "max-content-height"], ["mode", "mode"]]
+    }; }
+}
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+var FeedbackColors;
+(function (FeedbackColors) {
+    FeedbackColors["Information"] = "information";
+    FeedbackColors["Warning"] = "warning";
+    FeedbackColors["Success"] = "success";
+    FeedbackColors["Error"] = "error";
+    FeedbackColors["Neutral"] = "neutral";
+})(FeedbackColors || (FeedbackColors = {}));
+var DeprecatedSemanticColors;
+(function (DeprecatedSemanticColors) {
+    DeprecatedSemanticColors["Neutral"] = "neutral";
+    DeprecatedSemanticColors["Primary"] = "primary";
+    DeprecatedSemanticColors["Secondary"] = "secondary";
+    DeprecatedSemanticColors["Success"] = "success";
+    DeprecatedSemanticColors["Error"] = "error";
+})(DeprecatedSemanticColors || (DeprecatedSemanticColors = {}));
+var SemanticSizes;
+(function (SemanticSizes) {
+    SemanticSizes["ExtraSmall"] = "xs";
+    SemanticSizes["Small"] = "sm";
+    SemanticSizes["Medium"] = "md";
+    SemanticSizes["Large"] = "lg";
+    SemanticSizes["ExtraLarge"] = "xl";
+})(SemanticSizes || (SemanticSizes = {}));
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["ExtraSmall"] = "xs";
+    ButtonSize["Small"] = "sm";
+    ButtonSize["Medium"] = "md";
+    ButtonSize["Large"] = "lg";
+})(ButtonSize || (ButtonSize = {}));
+var ButtonEmphasis;
+(function (ButtonEmphasis) {
+    ButtonEmphasis["High"] = "high";
+    ButtonEmphasis["Medium"] = "medium";
+    ButtonEmphasis["Low"] = "low";
+    ButtonEmphasis["Lower"] = "lower";
+})(ButtonEmphasis || (ButtonEmphasis = {}));
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["Submit"] = "submit";
+    ButtonType["Reset"] = "reset";
+    ButtonType["Button"] = "button";
+})(ButtonType || (ButtonType = {}));
+var IconButtonShape;
+(function (IconButtonShape) {
+    IconButtonShape["Square"] = "square";
+    IconButtonShape["Rounded"] = "rounded";
+})(IconButtonShape || (IconButtonShape = {}));
+var LoaderColors;
+(function (LoaderColors) {
+    LoaderColors["High"] = "brand";
+    LoaderColors["Low"] = "white";
+})(LoaderColors || (LoaderColors = {}));
+var LabelPlacement;
+(function (LabelPlacement) {
+    LabelPlacement["Before"] = "before";
+    LabelPlacement["After"] = "after";
+})(LabelPlacement || (LabelPlacement = {}));
+var TextInputAutocomplete;
+(function (TextInputAutocomplete) {
+    TextInputAutocomplete["On"] = "on";
+    TextInputAutocomplete["Off"] = "off";
+    TextInputAutocomplete["Section"] = "section-*";
+    TextInputAutocomplete["Shipping"] = "shipping";
+    TextInputAutocomplete["Billing"] = "billing";
+    TextInputAutocomplete["Home"] = "home";
+    TextInputAutocomplete["Work"] = "work";
+    TextInputAutocomplete["Mobile"] = "mobile";
+    TextInputAutocomplete["Fax"] = "fax";
+    TextInputAutocomplete["Pager"] = "pager";
+    TextInputAutocomplete["Tel"] = "tel";
+    TextInputAutocomplete["TelCountryCode"] = "tel-country-code";
+    TextInputAutocomplete["TelNational"] = "tel-national";
+    TextInputAutocomplete["TelAreaCode"] = "tel-area-code";
+    TextInputAutocomplete["TelLocal"] = "tel-local";
+    TextInputAutocomplete["TelLocalPrefix"] = "tel-local-prefix";
+    TextInputAutocomplete["TelLocalSuffix"] = "tel-local-suffix";
+    TextInputAutocomplete["TelExtension"] = "tel-extension";
+    TextInputAutocomplete["Email"] = "email";
+    TextInputAutocomplete["IMProtocol"] = "impp";
+    TextInputAutocomplete["Name"] = "name";
+    TextInputAutocomplete["HonorificPrefix"] = "honorific-prefix";
+    TextInputAutocomplete["GivenName"] = "given-name";
+    TextInputAutocomplete["AdditionalName"] = "additional-name";
+    TextInputAutocomplete["FamilyName"] = "family-name";
+    TextInputAutocomplete["HonorificSuffix"] = "honorific-suffix";
+    TextInputAutocomplete["Nickname"] = "nickname";
+    TextInputAutocomplete["Username"] = "username";
+    TextInputAutocomplete["NewPassword"] = "new-password";
+    TextInputAutocomplete["CurrentPassword"] = "current-password";
+    TextInputAutocomplete["OneTimeCode"] = "one-time-code";
+    TextInputAutocomplete["OrganizationTitle"] = "organization-title";
+    TextInputAutocomplete["Organization"] = "organization";
+    TextInputAutocomplete["StreetAddress"] = "street-address";
+    TextInputAutocomplete["AddressLine1"] = "address-line1";
+    TextInputAutocomplete["AddressLine2"] = "address-line2";
+    TextInputAutocomplete["AddressLine3"] = "address-line3";
+    TextInputAutocomplete["AddressLevel4"] = "address-level4";
+    TextInputAutocomplete["AddressLevel3"] = "address-level3";
+    TextInputAutocomplete["AddressLevel2"] = "address-level2";
+    TextInputAutocomplete["AddressLevel1"] = "address-level1";
+    TextInputAutocomplete["Country"] = "country";
+    TextInputAutocomplete["CountryName"] = "country-name";
+    TextInputAutocomplete["PostalCode"] = "postal-code";
+    TextInputAutocomplete["CCName"] = "cc-name";
+    TextInputAutocomplete["CCGivenName"] = "cc-given-name";
+    TextInputAutocomplete["CCAdditionalName"] = "cc-additional-name";
+    TextInputAutocomplete["CCFamilyName"] = "cc-family-name";
+    TextInputAutocomplete["CCNumber"] = "cc-number";
+    TextInputAutocomplete["CCExp"] = "cc-exp";
+    TextInputAutocomplete["CCExpMonth"] = "cc-exp-month";
+    TextInputAutocomplete["CCExpYear"] = "cc-exp-year";
+    TextInputAutocomplete["CCCSC"] = "cc-csc";
+    TextInputAutocomplete["CCType"] = "cc-type";
+    TextInputAutocomplete["TransactionCurrency"] = "transaction-currency";
+    TextInputAutocomplete["TransactionAmount"] = "transaction-amount";
+    TextInputAutocomplete["Language"] = "language";
+    TextInputAutocomplete["Bday"] = "bday";
+    TextInputAutocomplete["BdayDay"] = "bday-day";
+    TextInputAutocomplete["BdayMonth"] = "bday-month";
+    TextInputAutocomplete["BdayYear"] = "bday-year";
+    TextInputAutocomplete["Sex"] = "sex";
+    TextInputAutocomplete["Url"] = "url";
+    TextInputAutocomplete["Photo"] = "photo";
+})(TextInputAutocomplete || (TextInputAutocomplete = {}));
+var TimeType;
+(function (TimeType) {
+    TimeType["Hours"] = "hours";
+    TimeType["Minutes"] = "minutes";
+    TimeType["Seconds"] = "seconds";
+})(TimeType || (TimeType = {}));
+var GlobalFilterPosition;
+(function (GlobalFilterPosition) {
+    GlobalFilterPosition["End"] = "end";
+    GlobalFilterPosition["Start"] = "start";
+    GlobalFilterPosition["Center"] = "center";
+})(GlobalFilterPosition || (GlobalFilterPosition = {}));
+var SortingPossibility;
+(function (SortingPossibility) {
+    SortingPossibility["Asc"] = "asc";
+    SortingPossibility["Desc"] = "desc";
+})(SortingPossibility || (SortingPossibility = {}));
+const WEEK_ABBREVIATIONS = {
+    'fr-FR': 'Sem', // Semaine
+    'fr-BE': 'Sem', // Semaine
+    'nl-BE': 'W', // Week
+    'en-BE': 'W', // Week
+    'en-US': 'W', // Week
+    'en-GB': 'W', // Week
+    'es-ES': 'Sem', // Semana
+    'de-DE': 'KW', // Kalenderwoche
+    'it-IT': 'Set', // Settimana
+    'pt-PT': 'Sem', // Semana
+    'nl-NL': 'W', // Week
+    'pl-PL': 'Tyd', // Tydzień
+    'ru-RU': 'Нед', // Неделя
+    'ja-JP': '週', // Shū
+    'zh-CN': '周', // Zhōu
+    'ko-KR': '주', // Ju
+};
+const CUSTOM_DAY_NAMES = {
+    'fr-BE': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+    'nl-BE': ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],
+    'de-DE': ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+    'en-BE': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    'en-US': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    'en-GB': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+};
+const CUSTOM_MONTH_NAMES = {
+    'fr-BE': [
+        'Jan',
+        'Fev',
+        'Mar',
+        'Avr',
+        'Mai',
+        'Jun',
+        'Jul',
+        'Aou',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    'nl-BE': [
+        'Jan',
+        'Feb',
+        'Maa',
+        'Apr',
+        'Mei',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Okt',
+        'Nov',
+        'Dec',
+    ],
+    'de-DE': [
+        'Jan',
+        'Feb',
+        'Mär',
+        'Apr',
+        'Mai',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Okt',
+        'Nov',
+        'Dez',
+    ],
+    'en-BE': [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    'en-US': [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    'en-GB': [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
 };
 
-/**
- * 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());
-    },
-});
-
 const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 var NvAlertStyle0 = nvAlertCss;
 
@@ -5187,7 +5586,7 @@ class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: '8c775b0d81d4f6f82421b667925e1ceafead5b2d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: 'e42f28e360d600c9863fb7f11eab2a1c501bb6ce', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '87f7d65ea812afda0ce6ba6ace6e443dd53263da', class: "content" }, this.heading && hAsync("p", { key: '8150784a2663d47410fd6b92ca678f756f086f28', class: "heading" }, this.heading), this.message && hAsync("p", { key: '27f029f2ded81f82e260dc0f2087d46ba5cd7e62', class: "message" }, this.message), hAsync("slot", { key: '3256f379c6d7ea5dab9d284b9229ceffb55e7443' })), this.dismissible && (hAsync("button", { key: '6b7f333b26ab17c2c523a3c9933599176a9152c0', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: 'badcf4153b6add49042b91415e010f662a042e61', name: "x", size: "sm" })))));
+        return (hAsync(Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && hAsync("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && hAsync("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), hAsync("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (hAsync("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5271,7 +5670,7 @@ class NvAvatar {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
+        return (hAsync(Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
     }
     static get style() { return NvAvatarStyle0; }
     static get cmpMeta() { return {
@@ -5427,12 +5826,12 @@ class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cde39aa20bdbc6529d317a1f9f0c04f7bf79112e', class: clsx(`badge-${this.color}`, {
+        return (hAsync(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, hAsync("slot", { key: 'cd0ebe919619431f096fe87e6e9412cbed88e467', name: "leading-icon" }, this.leadIcon && hAsync("nv-icon", { key: 'b010613a9ffe4b9ae027e128ba519c43d4211d7d', name: this.leadIcon, size: "sm" })), hAsync("span", { key: '5035aa8d35272f716442731b9493483835e083c6', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, hAsync("slot", { key: '81a475c0081911d8b4606450ecdf085a4f7e2853' })), this.dismissible && (hAsync("button", { key: '402fe040a11cae0974ffa911b81f781230fd0516', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '6f32fa2ae87170963c22bd35cebcf18500426570', name: "x", size: "sm" })))));
+            }) }, hAsync("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && hAsync("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), hAsync("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, hAsync("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (hAsync("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5495,7 +5894,7 @@ class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '50f858dc015ef2cd51f54a08fa53ec88ee42ac41', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: '1df40faa4a483d4abf8895def5db87696cf0d08e', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '90174908cdcf1b3e1f8a8a82a01cfa505311c930', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: '72282abd41c80bb8edf0c6b19506be32bf5ed688', slot: "content" }, hAsync("slot", { key: '4b9c325c0d27162c4856796f6a7d7c9b39edf993' })))), hAsync("span", { key: '62316fc8efc09067a0a64d4e90e76d57b329ee81', "data-scope": "separator" }, "/")));
+        return (hAsync(Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, hAsync("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), hAsync("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
     }
     get el() { return getElement(this); }
     static get style() { return NvBreadcrumbStyle0; }
@@ -5525,7 +5924,7 @@ class NvBreadcrumbs {
     }
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '19ad2bb41f4254a98a571cbadb50ba5ed7d29f62', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: '11b77f0f11c6b1dc2ce5ab3f4f7b23e8ec728b61' }, hAsync("slot", { key: 'c0c683f93c6874aa5f84fb735d13c1b5eabcd951' }))));
+        return (hAsync(Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, hAsync("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
     }
     static get style() { return NvBreadcrumbsStyle0; }
     static get cmpMeta() { return {
@@ -5689,7 +6088,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '36a311494e45ebc23b1133923a676d58e87f3800', name: "leading-icon" }), hAsync("slot", { key: 'f6fea826cda9a09f7152f4e30cc6981c89e73ebe' }), hAsync("slot", { key: 'd59c23ff85ea7efc16c69c5adbeb0e91786f1f68', name: "trailing-icon" })));
+        return (hAsync(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), hAsync("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), hAsync("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5954,26 +6353,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();
@@ -6136,8 +6515,9 @@ const CalendarGrid = props => {
         hAsync("div", { class: "days-header" }, dayNames.map((day, index) => (hAsync("div", { class: "day-header", key: `day-header-${index}` }, day)))),
         hAsync("div", { class: "days-grid" }, days.map(day => {
             const date = day.date;
-            if (!date)
-                return null;
+            if (!date || !day.dayOfMonth) {
+                return hAsync("div", { class: "day-cell is-disabled is-empty" });
+            }
             const isSelected = selectionType === 'single' &&
                 isSameDate(date, selectedDate, { isUTCMode });
             const isInRange = isDateInRange(date);
@@ -6148,7 +6528,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.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)}}";
 var NvCalendarStyle0 = nvCalendarCss;
 
 /**
@@ -6470,7 +6850,7 @@ class NvCalendar {
          * @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) => {
+        this.getDaysInMonth = (offset = 0) => {
             const year = this.currentDate.getUTCFullYear();
             const month = this.currentDate.getUTCMonth() + offset;
             const firstDay = new Date(Date.UTC(year, month, 1));
@@ -6481,17 +6861,31 @@ class NvCalendar {
             const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
             // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
             const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
-            // 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),
-                    });
+            const showPrevMonthDays = this.numberOfCalendars === 1 ||
+                (this.numberOfCalendars > 1 && offset === 0);
+            // Add the days of the previous month
+            if (offsetDays > 0) {
+                if (showPrevMonthDays) {
+                    const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                    for (let i = offsetDays; i > 0; i--) {
+                        const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
+                        days.push({
+                            dayOfMonth: date.getUTCDate(),
+                            date,
+                            isCurrentMonth: false,
+                            isDisabled: this.isDateDisabled(date),
+                        });
+                    }
+                }
+                else {
+                    for (let i = 0; i < offsetDays; i++) {
+                        days.push({
+                            dayOfMonth: null,
+                            date: null,
+                            isCurrentMonth: false,
+                            isDisabled: true,
+                        });
+                    }
                 }
             }
             // Add the days of the current month
@@ -6504,17 +6898,31 @@ class NvCalendar {
                     isDisabled: this.isDateDisabled(date),
                 });
             }
-            // Add the days of the next month only for the last calendar
-            if (offset === totalCalendars - 1) {
-                const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
-                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
-                    const date = new Date(Date.UTC(year, month + 1, i));
-                    days.push({
-                        dayOfMonth: i,
-                        date,
-                        isCurrentMonth: false,
-                        isDisabled: this.isDateDisabled(date),
-                    });
+            const showNextMonthDays = this.numberOfCalendars === 1 ||
+                (this.numberOfCalendars > 1 && offset === this.numberOfCalendars - 1);
+            // Add the days of the next month to fill the grid
+            const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+            if (nextMonthDaysNeeded < 7) {
+                if (showNextMonthDays) {
+                    for (let i = 1; i <= nextMonthDaysNeeded; i++) {
+                        const date = new Date(Date.UTC(year, month + 1, i));
+                        days.push({
+                            dayOfMonth: i,
+                            date,
+                            isCurrentMonth: false,
+                            isDisabled: this.isDateDisabled(date),
+                        });
+                    }
+                }
+                else {
+                    for (let i = 0; i < nextMonthDaysNeeded; i++) {
+                        days.push({
+                            dayOfMonth: null,
+                            date: null,
+                            isCurrentMonth: false,
+                            isDisabled: true,
+                        });
+                    }
                 }
             }
             return days;
@@ -6581,7 +6989,7 @@ class NvCalendar {
         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)
@@ -6794,7 +7202,7 @@ class NvCalendar {
         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));
@@ -6998,8 +7406,8 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '43d4f3ab9199e9c5f15e853f15283fa59e4a436d' }, hAsync("div", { key: 'b9956225cb2c16d997aa44266af8f8c8222ea968', class: "datepicker-root" }, hAsync("div", { key: '05b63935bc5ebf500bb52d10688385f994b47fb4', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("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) && (hAsync("div", { key: '1765334bf15564bc9886b210c54bddba64c7042e', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '0ac3446394b8c23b859e5f0065370b95b6fd05d2' })));
+        return (hAsync(Host, { key: '089a80ab34e2bc3f31432437787578f6367fde7c' }, hAsync("div", { key: '9537a1a20798d8ff3cf53972154a4d7fb0156daf', class: "datepicker-root" }, hAsync("div", { key: '17a4630c184001b5fbea941540ee01b0bbf8b58d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '8d56891ebb52b251a013d6a640d472900b9b62e8', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (hAsync("div", { key: 'a7f53681fb23a9b80b8141de19c4decaec5e887b', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '943aca0d1a5b2db40f59dfd8973d26b52b9ed312' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7069,7 +7477,7 @@ class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8f7112dc8ce8896d9e7265741f06b7449dd508df', class: clsx(this.getColSize()) }, hAsync("slot", { key: '3bedff11752d04db2615a5f26d4d910d95dee76c' })));
+        return (hAsync(Host, { key: 'e258bc3e01d3bd35bf64f14241c70ae044fac132', class: clsx(this.getColSize()) }, hAsync("slot", { key: 'd36caf0fde38eae6cd37b62fb4c02e3de6b7225e' })));
     }
     static get style() { return NvColStyle0; }
     static get cmpMeta() { return {
@@ -11570,7 +11978,7 @@ class NvDatagrid {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (hAsync(Host, { key: '95d3cea67d17f1aab33e7bc054161760e6d6df54' }, hAsync("div", { key: 'b6cbdf841ab4ba64d2ccbf49fc6caf9ef082c7ee', class: "hidden" }, hAsync("slot", { key: '18dde7efeec5c1bc38a044a683910db41f70e22d' })), hAsync("slot", { key: 'd3ffb496e938ee3c91c5a7422357cbee90100d84', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '0ab19e6c1c585d4e77004ec9238dba3baff83614', class: `search-container justify-${this.globalFilterPosition}` }, hAsync("nv-fieldtext", { key: '76722d31da818102347278c7b62a93deaa9c29a1', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("div", null, hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (hAsync(Host, { key: 'b149279b85a3138e5be62b2f431a82fe5056b996' }, hAsync("div", { key: '84ffd6a613a7e51539f0bc7e5ddff16a1769af5a', class: "hidden" }, hAsync("slot", { key: 'cabafd2aab117816742972bd4eb6e7122c333ee9' })), hAsync("slot", { key: '17a26ba154ddc2dea82f7576878107ede55a2043', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '822bb793cad6266810571dbb2c087c9e2b68958d', class: `search-container justify-${this.globalFilterPosition}` }, hAsync("nv-fieldtext", { key: 'b9fd668a09b602ded195e4d10b79ae3d06c9a0f6', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("div", null, hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (hAsync("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -11581,7 +11989,7 @@ class NvDatagrid {
                 return (hAsync("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (hAsync("tfoot", null, hAsync("tr", null, hAsync("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (hAsync("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (hAsync("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (hAsync("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), hAsync("slot", { key: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (hAsync("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (hAsync("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), hAsync("slot", { key: 'f509745423857527f2983c5cce1289441cc1f7c7', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11646,7 +12054,7 @@ class NvDatagridcolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'daa7b24c99857d7467f0a5ce0b69dcbeb42577e7' }, hAsync("slot", { key: '8c2fe1f1b806322cdf1c89b9243dd0d094e565eb', name: "header" }), hAsync("slot", { key: '81ae95ccd66f88c05253fde0ec9e0d20e02e5304', name: "cell" })));
+        return (hAsync(Host, { key: '49c4b8807b26a76cf26e9ac9567a5bca7de0aee7' }, hAsync("slot", { key: '9e6c8b69a92fe4caec10025c941e39f1266b4f93', name: "header" }), hAsync("slot", { key: '992fa9c1d00fe8ed65df5ad2157b78140d2794a0', name: "cell" })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -12278,7 +12686,7 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 
-const nvDialogCss = "dialog{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:400px;width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;max-height:90vh;overflow:hidden;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)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .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}dialog .content .content-body{overflow:auto;box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:400;line-height:var(--line-height-base);color:var(--color-content-medium-text)}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
+const nvDialogCss = "dialog{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;max-height:90vh;overflow:hidden;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)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .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}dialog .content .content-body{overflow:auto;box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:400;line-height:var(--line-height-base);color:var(--color-content-medium-text)}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
 var NvDialogStyle0 = nvDialogCss;
 
 /**
@@ -12313,6 +12721,11 @@ class NvDialog {
          * 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;
         /**
          * Handles the close button click.
          */
@@ -12420,15 +12833,23 @@ class NvDialog {
     }
     /**
      * Prevents the body from scrolling when the dialog is open.
+     * Compensates for scrollbar width to prevent layout shift.
      */
     preventScroll() {
-        document.body.style.overflow = 'hidden';
+        // 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() {
-        document.body.style.overflow = '';
+        // Remove the applied styles
+        document.documentElement.style.removeProperty('overflow');
+        document.documentElement.style.removeProperty('padding-right');
     }
     ensureFormId(formElement) {
         if (!formElement.id) {
@@ -12505,8 +12926,8 @@ class NvDialog {
         if (this.open) {
             this.show();
         }
-        // Check if any element already has autofocus before setting it automatically
-        if (!this.dialogElement.querySelector('[autofocus]')) {
+        // 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();
@@ -12525,7 +12946,7 @@ class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (hAsync(Host, { key: 'c1eb9b79f52028c3ef7a57bad99260a45b678eb5' }, hAsync("slot", { key: '65a624853aa7242dc849a1196c6b5b8c331d426f', name: "trigger" }), hAsync("dialog", { key: '17369b9be014e9136d77f99628b4bc8184d36370', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: '8a17cd8deff162b333e2ac90c487454743d76f3d', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'd61a63785ce284ce2039be5c62d6e2bcce2a9b44', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '5a0adb449785bc684c41d0e35aad08ccb725386a', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: '7c39e52d8fe6fc9ab2fdc2574a0c105d790bbfbe', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: '038d9f3623177af5d996631dd9ae25fec49fd778' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (hAsync(Host, { key: '8e4a46dd7749656670d5b8eb167aae2108644375' }, hAsync("slot", { key: '954980e2b451c9f5c0e4f09df76c62c1f04ab01e', name: "trigger" }), hAsync("dialog", { key: '8541ad521ae348d26764756e45c668f7aab5c278', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: 'cd07e78da6f5cb3abd14640b941629bff034ec63', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: '5b610a9d30acd450a273e9dc10a4a29bdf85d58c', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '4e5841c525221c6c23c699deaeefa7492f57e091', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: 'f09fd0f7013b1c2c912ed7958a8a9cab0016858b', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: 'c3c196c3e8f40acbb29f3fa89d1620e7beaad10c' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12544,12 +12965,13 @@ class NvDialog {
             "clickOutside": [516, "click-outside"],
             "controlled": [516],
             "full": [516],
+            "autofocus": [516],
             "show": [64],
             "close": [64]
         },
         "$listeners$": [[4, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"], [5, "touchstart", "handleDocumentTouch"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["open", "open"], ["undismissable", "undismissable"], ["clickOutside", "click-outside"], ["controlled", "controlled"], ["full", "full"]]
+        "$attrsToReflect$": [["open", "open"], ["undismissable", "undismissable"], ["clickOutside", "click-outside"], ["controlled", "controlled"], ["full", "full"], ["autofocus", "autofocus"]]
     }; }
 }
 
@@ -12641,7 +13063,7 @@ class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5756a0cc697188c3fdee2930b1c6ae7922af71cc' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '278895398ddd9fd6aaf6da3d0cbcad12d628f908' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -12697,7 +13119,7 @@ class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '850e2408cb7a35903be3bc51fbee000fc58f4a76' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '2ace10c91041456a36909763b62a2adeede183c7' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
     }
     get el() { return getElement(this); }
     static get style() { return NvDialogheaderStyle0; }
@@ -12834,13 +13256,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '98f9dfdadab534193e7076f929c9820a231fecba', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '5a4d02d46b7c8c8930c24f794452180d58604ffe', class: "input-container" }, hAsync("input", { key: 'f7a4002a5fb9800ed4036638773ac42c49d4ae0f', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (hAsync(Host, { key: 'cfb710b2af0ea4442d1c2011d8414c6987a98117', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: 'a463fa87357a91d71941a265d3daf735abf3a36f', class: "input-container" }, hAsync("input", { key: '0dd7db02107246b427a1e78d8c36068debff85bd', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), hAsync("span", { key: '56a2547ecf96ef3f7f28054592471323497cb94f', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'af4e10bd52b42850c8348e0aed8c90a7e700d64a', name: "checked-icon" }, hAsync("svg", { key: '105847f526c391566cef42fa35d94fbaba0e8984', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '41e221d5f3eab7a4cc88d4ed9454f198d69ec815', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '3a1f5ffdc34a1ecdc1bb7f1b5347e1f12f5f690d', name: "indeterminate-icon" }, hAsync("svg", { key: '1b68c27172d5b6b9ba2419d278c0ac0299d7a4b7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '7b2f4e5fe1d961fad290aade639b9807446f34ba', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'd472d7d8901ff7de37fe370bf5d637fc8ae6069d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c8dbda4d6f9cb757476c9a96934599171f6ea7ae', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '3c0ec17aeb856457b63981fd0e21ead69ca3af0f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dff6c3a69496324cabcf25ae7639c98a7d908769', class: "description" }, hAsync("slot", { key: '498c8216c9a0a537f1aa2a542b3caa688b76e55d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6c584da0ad93e7f0ad62610d760c36d77b1a6fc6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '93df382e666707cdde3133daae7aa66914215149', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: 'a7ee7c812df54bbf91ac6c92e786d4895faa29d4', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'fe06ae9b2416f08c1889c86d47d0207af6ded057', name: "checked-icon" }, hAsync("svg", { key: '96a1c7a8113f160e4c9fc4ec23ad28f1359151b4', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '37c61f5f7cda8c91f1f5d44781b8326c216eca2a', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '276fcac2c23f7f278aa1576fa1f79393263812a6', name: "indeterminate-icon" }, hAsync("svg", { key: 'fcc8e138e98413b0e30e7744f7eeb1e72ca69876', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'd6b6146dc3d3ff52939d644439f8eb92ba9aad64', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'a13aa3a0a671e6442e0c46c267596deb494d4da9', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2c2aa68889b6cdd278a99872364336c54f71e96a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'edd654aa92145a0f24fb56b447c8f6d7839fb329', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1c4fe0f3c27aa59ed6059c91abb7ad060f21baf5', class: "description" }, hAsync("slot", { key: '109955006fefe62ec784bd5d6f3642efc732eb51', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b86fae37461b9afca6168b8d049293efb395828f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '6225f886e6aee38026a4aaf93644a76e70b7ee01', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -16633,10 +17055,12 @@ var inputmask = {exports: {}};
 
 var Inputmask = /*@__PURE__*/getDefaultExportFromCjs(inputmask.exports);
 
-const nvFielddateCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFielddateCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;font-feature-settings:\"tnum\";font-family:\"TTNorms Pro Mono\", monospace}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFielddateStyle0 = nvFielddateCss;
 
 /**
+ * A field date component that combines an input with a calendar popover.
+ *
  * @slot default - Child content of the component.
  * @slot leading-input - Content to be placed before the input text, within the input container.
  * @slot before-input - Content to be placed before the input text, outside the input container.
@@ -16760,10 +17184,7 @@ class NvFielddate {
             this.inputElement.focus();
             // Select the first characters based on the date format
             const format = this.dateFormat;
-            if (format.startsWith('DD')) {
-                this.inputElement.setSelectionRange(0, 2);
-            }
-            else if (format.startsWith('MM')) {
+            if (format.startsWith('DD') || format.startsWith('MM')) {
                 this.inputElement.setSelectionRange(0, 2);
             }
             else if (format.startsWith('YYYY')) {
@@ -16790,13 +17211,66 @@ class NvFielddate {
             }
         };
         /**
-         * Toggles the opening/closing of the popover.
+         * Initializes the input mask.
          */
-        this.toggleCalendar = () => {
-            if (this.readonly || this.disabled) {
+        this.initializeInputMask = () => {
+            this.currentPlaceholder = '';
+            if (this.inputElement.inputmask) {
                 return;
             }
-            this.open = !this.open;
+            const inputMask = new Inputmask({
+                alias: 'datetime',
+                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
+                placeholder: ' ',
+                prefillYear: false,
+                clearIncomplete: false,
+                showMaskOnHover: false,
+                showMaskOnFocus: false,
+                clearMaskOnLostFocus: false,
+                insertMode: true,
+                rightAlign: false,
+                oncomplete: function (e) {
+                    const input = e.target;
+                    const event = new CustomEvent('input', { bubbles: true });
+                    input.dispatchEvent(event);
+                },
+            });
+            inputMask.mask(this.inputElement);
+            // Set the value after applying the mask
+            if (this.inputElement.name === this.name && this.singleValue) {
+                requestAnimationFrame(() => {
+                    this.inputElement.value = this.singleValue;
+                    const event = new CustomEvent('input', { bubbles: true });
+                    this.inputElement.dispatchEvent(event);
+                });
+            }
+        };
+        /**
+         * Handles keydown events on the input before the mask is initialized.
+         * Initializes the mask on the first number input.
+         * @param {KeyboardEvent} event - The keyboard event.
+         */
+        this.handleKeydownBeforeMask = (event) => {
+            const allowedKeys = [
+                'Backspace',
+                'Delete',
+                'Tab',
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+                'ArrowDown',
+                'Home',
+                'End',
+            ];
+            if (/\d/.test(event.key)) {
+                this.initializeInputMask();
+                this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
+            }
+            else if (!allowedKeys.includes(event.key) &&
+                !event.metaKey &&
+                !event.ctrlKey) {
+                event.preventDefault();
+            }
         };
         /**
          * Handles focus events on the input element.
@@ -16808,6 +17282,16 @@ class NvFielddate {
                 event.target.blur();
                 return;
             }
+            if (!this.inputElement.inputmask) {
+                this.inputElement.addEventListener('keydown', this.handleKeydownBeforeMask);
+            }
+            this.open = true;
+        };
+        /**
+         * Handles blur events on the input element.
+         */
+        this.handleBlur = () => {
+            this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
         };
         /**
          * Prevents the valueChanged event from the calendar from propagating up.
@@ -16830,6 +17314,15 @@ class NvFielddate {
         this.setInputRef = (el) => {
             this.inputElement = el;
         };
+        /**
+         * Toggles the opening/closing of the popover.
+         */
+        this.toggleCalendar = () => {
+            if (this.readonly || this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -16840,20 +17333,18 @@ class NvFielddate {
      * @returns {string} Format adapted for Inputmask.
      */
     convertToInputmaskFormat(format) {
-        switch (format) {
-            case 'DD/MM/YYYY':
-                return 'dd/mm/yyyy';
-            case 'MM/DD/YYYY':
-                return 'mm/dd/yyyy';
-            case 'YYYY-MM-DD':
-                return 'yyyy-mm-dd';
-            case 'DD.MM.YYYY':
-                return 'dd.mm.yyyy';
-            case 'YYYYMMDD':
-                return 'yyyymmdd';
-            default:
-                return format;
+        // If the format is not specified, use the default format
+        if (!format) {
+            return 'dd/mm/yyyy';
         }
+        const formatMap = {
+            'DD/MM/YYYY': 'dd/mm/yyyy',
+            'MM/DD/YYYY': 'mm/dd/yyyy',
+            'YYYY-MM-DD': 'yyyy-mm-dd',
+            'DD.MM.YYYY': 'dd.mm.yyyy',
+            'YYYYMMDD': 'yyyymmdd',
+        };
+        return formatMap[format] || 'dd/mm/yyyy';
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -16865,19 +17356,17 @@ class NvFielddate {
         if (this.value) {
             this.singleValue = this.value;
         }
+        this.currentPlaceholder = this.placeholder || this.dateFormat;
     }
     componentDidLoad() {
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((input) => {
-            Inputmask({
-                alias: 'datetime',
-                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
-                placeholder: '_'.repeat(this.dateFormat.length),
-            }).mask(input);
-        });
+        // Inputmask is now initialized on the first keypress
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
+        if (this.inputElement &&
+            this.inputElement.inputmask) {
+            this.inputElement.inputmask.remove();
+        }
     }
     /**
      * Handles the single date selection event from nv-calendar.
@@ -16922,12 +17411,12 @@ class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4af4649cc8fdc95f2f12d1c495549a006c82c742' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c4905c94c62c8eb01120b30e3b5c16c2dafec20d', htmlFor: this.inputId }, hAsync("slot", { key: 'b8e952b9a6acb9f136d3461514b82a6767723c3c', name: "label" }, this.label))), hAsync("nv-popover", { key: 'de6620c60eb3db3c6f0f435977f257636be81a80', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'e2189ad3476f3d088c07153bc4c1e63357317ded', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'a35e545f1379c479734719d8460d5031631f5730', name: "before-input" }), hAsync("div", { key: '01338c24dfff69e019ff6d2344f176effb2dac06', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f6552d188174e77e8f75a9b0554e3ea78c57056d', name: "leading-input" }), hAsync("input", { key: '1b9ad6226166b6bf08afda41f0f6b789fe12dd27', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: '0527f051261672a8df205d26dcb253c20b3dfd4b', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'ed83a0a0b7a88f392f16bf97f20885261f88665d', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '6abf3dff6a1bcc0759bea91ab3674d61f4c016c2', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (hAsync(Host, { key: 'c9f29e6997cf07a03f43e3cc2d8263201829c9c4' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0c12a1773e75621cb7f2c6fbd944405cb444a9e6', htmlFor: this.inputId }, hAsync("slot", { key: '0fdd5a226a5db7ac15be968f42e375f89031235f', name: "label" }, this.label))), hAsync("nv-popover", { key: 'dd0dcf5576026e0b565db34d2a2eafd9e6188127', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'a4c7623e8d72ecc847567be060e8c3db04879062', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'e270dac5a26904db3d0966871bc10d7c68064e87', name: "before-input" }), hAsync("div", { key: '8d277b89e591249910c9eeae754837ce079de47f', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '964769b29c4d9119365bf59255180e84ae32b195', name: "leading-input" }), hAsync("input", { key: '41f0f565b4854e7907a5a8972d5ce265e587b7f0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: '32d5ffac3789d9b3598811605eccfb1207c4e850', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '4e88c90987c12199512d77c24205bc2f67c3b8d1', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'e169bdd9742569cdcdc087d29ee13f9c097907a9', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '76d584ac756b228e356a17ad36e4558f9a497ea3', name: "after-input" })), hAsync("div", { key: '4914e6fa5046fb287bedb841f2a0b71f1f86e5a3', slot: "content" }, hAsync("nv-calendar", { key: 'fcfb949ee9c378aac2d7c792ed79fcb3cbf8e987', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '52ffcb5f41161b9dc95c0fc18a252b6568817ffb', class: "description" }, hAsync("slot", { key: '91c68f28fe31f5ecfa58d80e5decb018890f18fe', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0c0b8c65f261c2439446dd05014d172e6b829244', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'cf9410ad858faf59d7ada7ce70b18aa768e30a65' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '897e5ba6a908c96fdc55bdd522be3f04e9dd14f8', name: "after-input" })), hAsync("div", { key: '6fcb101108ea4536654c2e6204416f899c9f0a04', slot: "content" }, hAsync("nv-calendar", { key: 'd4d7c823ad832ed1c8430b041eacaa1db5633a9f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f76d5dde2222f39883b59a86fe4237818040e03c', class: "description" }, hAsync("slot", { key: 'de07e1ee885a5804b352dba6a37898bba500b731', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b7dbb4406ee38548f8751f9425a800577f3a3cb2', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'a0170ef43d415238e57f29f985329e40f8ed0c2a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16964,6 +17453,7 @@ class NvFielddate {
             "disabledDates": [16],
             "fluid": [516],
             "singleValue": [32],
+            "currentPlaceholder": [32],
             "open": [32]
         },
         "$listeners$": [[0, "singleDateChange", "handleSingleDateChange"], [0, "closePopover", "handleClosePopover"], [0, "keydown", "handleKeyDown"]],
@@ -17421,10 +17911,10 @@ class NvFielddaterange {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '465121dc54f228353f5e0416de7a6889881244d7' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '7d49a2c5114d5d15f7e078e2fbbfe67c3200c329', htmlFor: this.startInputId }, hAsync("slot", { key: 'b16d2baa2541b4f08bf038fb67749ee4b79b6567', name: "label" }, this.label))), hAsync("nv-popover", { key: 'e5df35c897f8241d068eb54f94428a1a72f8cd34', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'ea9cc60c12b0d141e9848781fd37152e8987901d', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'ee646b624af619c46a5d27b6ccab9de3adafd2b8', name: "before-input" }), hAsync("div", { key: 'bb1d2196576e40957ebf8a1a3b35c49432eb8202', class: "input-container" }, hAsync("slot", { key: '29f3b2a8d06e1e2adfcfbafb80d5770d404df7b9', name: "leading-input" }), hAsync("div", { key: '5703a0d07400177971b0204803389e2550c1a774', class: "range-inputs" }, hAsync("input", { key: '9005cfb0e5d7b21ce934ac4938e81a5abac57c64', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("div", { key: '039104ceddbd8c19577245e95108abd444a17db4', class: "range-separator" }), hAsync("input", { key: 'b55cbf8f5abc64384d050504c41a144d01ec3487', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (hAsync("nv-icon", { key: '85deffe8b8fe96fd4aab624ef787c52dd04040f9', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '35ed30cb3394f9162883c73406b627aea05ffa64', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '6013c80bacd8183f0d2e2f2bfb176b937070fff2', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'd5a00d1a0e49a5a03a6f63dfbdba8073f32543c5', name: "after-input" })), hAsync("div", { key: 'b42689f8f233417af0f84eb8fbc41b60e28fcf4e', slot: "content" }, hAsync("nv-calendar", { key: '5d581f7c5a6fab5933580733a8b22acddb62bc95', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3774d441e866da984a96282978066a4f4ad31f4f', class: "description" }, hAsync("slot", { key: '3c7166a46a880fb5d09f6070ac3f502e69935fc2', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b9dad22b19e4b5d2bca41cf361490a7626f025ea', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '79a3f83127cbcc61f63efe42c8bffa607af33360' })));
+        return (hAsync(Host, { key: 'b2033314494faca72c310df329eab3918fe6935e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '22e0af3e24bada8d859bcf42de0dfcedff9f5988', htmlFor: this.startInputId }, hAsync("slot", { key: '8eb3e4e1a4c67c0d9cd014aa2c73b6fc2ecb1a8f', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f9c722e792ba69738df080975f78ea3dfeb40f07', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '805c98d4a9e1defc74c0b751691e413dfbcfa736', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'd84ddf0a0732a68392c79baab9cde23be6b1b27e', name: "before-input" }), hAsync("div", { key: '4f3cfab2e9a83dacc0f950bc319192b568f90258', class: "input-container" }, hAsync("slot", { key: '2d8dd5e11369dc9bd1894e299f96b41806295568', name: "leading-input" }), hAsync("div", { key: 'b60b40b275099441071b130bed7d097e8c1dcbcb', class: "range-inputs" }, hAsync("input", { key: 'b7c647676fa5e48d51e7b7f1cf83e4a0275805ec', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("div", { key: '3e63ececeeff713f51db0a47e3d3b4f305e6fc66', class: "range-separator" }), hAsync("input", { key: '1c54a2e3f43ad077bfe9e9b17886300d06840bfd', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (hAsync("nv-icon", { key: '971b363f7fafbaeba65a161c1d7792d2bcacacf6', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '0f498b287b4c9ad9f83a0d380c522441b8afdf6e', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '257549f7c201391c083f28f1b89ffa3a439f268c', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '7be106f2f1500839e899d6f9c6f3705398cadd1a', name: "after-input" })), hAsync("div", { key: 'd2c56635c83628f37f0c1ec127bfeaca5fb78b90', slot: "content" }, hAsync("nv-calendar", { key: '4ec9eea45e030463c2df0115a0cfd6453da66f01', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a624ba699b3b7a7bb4d26725fe451ecd5df1f5a2', class: "description" }, hAsync("slot", { key: 'f2c3666075730a248e57c748b32df33a59f3777e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e2c1f8816b896d00e2c4ba8b32bc28380630ecad', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'cee75865d222324b8d7f3144ba2facaefcaf1d35' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17835,9 +18325,9 @@ class NvFielddropdown {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: '2c45eb94cd36a430780ccb2b6ca75c6d0cf14749', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b5f4fd518e20ffa8bd1f83595279c26fd4627597', htmlFor: this.inputId }, hAsync("slot", { key: '6ba6870341c7ef37698adde01f5402db65d73898', name: "label" }, this.label))), hAsync("nv-popover", { key: '0d3833a9402ff6b3d3ef6592aaeba5030aeca661', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '5ae8307fbd0a0798f6103ae68fcfd7ac0c0cd5d6', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '1844cb0ffe38189f2a39734a6c78487b0ef5533f', name: "before-input" }), hAsync("div", { key: '9c3fc1eeddb22c0945606b28b08c6e4e59d4f745', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '0a4eaf84a3b3eb71edec875122e45705d3f0cbbf', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '9cbbd6c7c8ab6bda015d5302d4a7ef2eb5d730f2', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: 'd1bbfb1f515a79ea7fd74c93041d832c55203939', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '8665b644210fb6fc3a763d955a81ac7202647965', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '9a49e69a4d59c2cd5181b533b2fe9ec34e30d9f4', name: "after-input" })), hAsync("div", { key: '8aafef9ac1c4bfd2d41fc7fe784927cdf4800423', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync("ul", null, this.options.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8cc32aa4d2e7b7137d07505c70d522bf14241c59', class: "description" }, hAsync("slot", { key: '096efa39ff2ea02e76ed5a90459889d33321e99a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bae304b963c369cf0417339cf1d3d5b45f5914ed', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'b17b69ee8240bf72bcee918ba8210df995434917', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'a4de1529678c493e92022229993443c93533f0a4', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6bf4ff6df1b4c62304ac623bea21554779b1bcfa', htmlFor: this.inputId }, hAsync("slot", { key: '10bd19c28259c033ad2b8c9601655da9723bdbd0', name: "label" }, this.label))), hAsync("nv-popover", { key: 'fc85eb3c9d72a90f47c6fcfbbf6f6cc234fa8df1', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '6a7f4be2cdfd6399ce79f4cd7b0dc9abfd3a1c74', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '97e82c45801d338456d81601fb147e235dd604d4', name: "before-input" }), hAsync("div", { key: 'd6f3d6ca42acc7c14689fedac22328c53d2a61af', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd48c3800aa174716eb4bf4a81e545fabeb73d187', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: 'f01cf253ba3f31ff0269ecdf36d7d1e3249039a8', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '10b828451cf4a177a3580d2d01080036a25e9692', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '94edaa4e3ce5f80021db58bc5fa087424d4bf7d3', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '25e76d6ecfcff7514d2dfb970387f2af23506b40', name: "after-input" })), hAsync("div", { key: '58c6e1de57d31f1827e9bf24da62f5801f8c99b9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync("ul", null, this.options.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5a35ceee27f3a2ab41742f396f450b8783832742', class: "description" }, hAsync("slot", { key: 'ff012c2168c6ab6808de46a1f26f2f186fbe452f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '9c668e1c484c4caf45fa9e38dbca4dae0e93fea3', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ec9c91da75b1ec899ef68a569e6dd0a271b0307b', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -17939,7 +18429,7 @@ class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '42ae50d3837bdc7dcf986114255efde54f021ad2', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '8e61bac8b76d9ababa2999099f47cc906a6112c2' }), !this.composed && (hAsync("div", { key: 'b53f386a10225a6ae5dd97978f038feb86c52513', class: "text-wrapper" }, hAsync("span", { key: '69431d91f69f96ead8f31754f66943a1772034fc', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '71d79762ef64c0414661878dca7760217edf04d1', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (hAsync(Host, { key: '9006514e798c91bf3d447f6e74f80afc8831813c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '9344d00bbdaf5fd8e7676ccaf770621925a465b9' }), !this.composed && (hAsync("div", { key: '2f64fb5f87cf35dcc7ddf4b9d28c0811c7143c1d', class: "text-wrapper" }, hAsync("span", { key: 'c7a17a07092e2cfa9698e885f1ecfcf1fff1a38b', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '44e8e60b72270c11633fd439ba3c5b3c67e08270', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -18004,7 +18494,7 @@ class NvFielddropdownitemcheck {
         };
     }
     render() {
-        return (hAsync(Host, { key: '7230c0b30bfd5be59114e025748708663f2f16ec', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: 'f71e4add967442b397b6c36dff1653a2bd0ad91d', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (hAsync(Host, { key: '69cd9636b76fa1c5f49f9c67b6d0989d9967d0cf', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: 'b0e2035c3ff1a3a2d8f2922c9fe2e6edcfad00d4', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
@@ -18041,7 +18531,7 @@ class NvFieldmultiselect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        this.multiselectChange = createEvent(this, "multiselectChange", 7);
+        this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -18058,6 +18548,11 @@ class NvFieldmultiselect {
          * always type in fresh data.
          */
         this.autocomplete = 'off';
+        /**
+         * Specifies the selected values of the multiselect field.
+         * This is the canonical value for the component and is used for form submission.
+         */
+        this.value = [];
         /**
          * Marks the input field as required.
          */
@@ -18111,17 +18606,13 @@ class NvFieldmultiselect {
          * Text for the badge showing the number of selected items.
          */
         this.badgeLabel = '';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
         /**
          * The text entered by the user for filtering multiselect items.
          */
         this.filterText = '';
-        /**
-         * List of selected values in the multiselect.
-         */
-        this.selectedValues = [];
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
         /**
          * Sorted options for display.
          */
@@ -18131,8 +18622,8 @@ class NvFieldmultiselect {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            this.selectedValues = [];
-            this.multiselectChange.emit(this.selectedValues);
+            this.value = [];
+            this.valueChanged.emit(this.value);
             // Uncheck all elements
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
@@ -18148,8 +18639,8 @@ class NvFieldmultiselect {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            this.selectedValues = [];
-            this.multiselectChange.emit(this.selectedValues);
+            this.value = [];
+            this.valueChanged.emit(this.value);
             // Uncheck all elements
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
@@ -18167,8 +18658,7 @@ class NvFieldmultiselect {
             if (this.isHandlingEscape) {
                 return;
             }
-            this.filterText = '';
-            // Reset filter if needed
+            // Reset filter if needed, but preserve the filter text
             if (this.filterable) {
                 this.resetFilter();
             }
@@ -18181,9 +18671,8 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Reset filter if needed, but preserve the filter text
                     if (this.filterable) {
-                        this.filterText = '';
                         this.resetFilter();
                     }
                 }
@@ -18242,15 +18731,14 @@ class NvFieldmultiselect {
                 return;
             }
             const input = event.target;
-            this.value = input.value;
-            this.valueChanged.emit(this.value);
+            this.filterText = input.value;
+            this.filterTextChanged.emit(this.filterText);
             // Clear any existing timer
             if (this.debounceTimer) {
                 window.clearTimeout(this.debounceTimer);
             }
             // Set a new timer for filtering
             this.debounceTimer = window.setTimeout(() => {
-                this.filterText = input.value.toLowerCase();
                 this.filterItemsOption();
             }, this.debounceDelay);
         };
@@ -18264,15 +18752,14 @@ class NvFieldmultiselect {
             if (this.disabled || this.readonly)
                 return;
             const input = event.target;
-            this.value = input.value;
-            this.valueChanged.emit(this.value);
+            this.filterText = input.value;
+            this.filterTextChanged.emit(this.filterText);
             // Clear any existing timer
             if (this.debounceTimer) {
                 window.clearTimeout(this.debounceTimer);
             }
             // Set a new timer for filtering
             this.debounceTimer = window.setTimeout(() => {
-                this.filterText = input.value.toLowerCase();
                 this.filterSlotsItems();
             }, this.debounceDelay);
         };
@@ -18302,9 +18789,8 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Reset filter if needed, but preserve the filter text
                     if (this.filterable) {
-                        this.filterText = '';
                         this.resetFilter();
                     }
                 }
@@ -18336,14 +18822,14 @@ class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("ul", { role: "content" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("ul", { role: "content" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -18352,7 +18838,7 @@ class NvFieldmultiselect {
     handleOptionsChange(newValue) {
         if (!newValue)
             return;
-        this.selectedValues = newValue
+        this.value = newValue
             .filter(option => option.checked)
             .map(option => option.value);
         this.reorderOptionsContent();
@@ -18361,8 +18847,10 @@ class NvFieldmultiselect {
      * Emitted when the value changes.
      */
     watchValueHandler() {
-        // Handle value change and update the corresponding multiselect item if it exists
-        this.setInitialSelection();
+        // Synchronize child components when value changes programmatically
+        if (this.el && this.el.isConnected) {
+            this.syncChildComponents();
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -18402,22 +18890,23 @@ class NvFieldmultiselect {
         }
         const { value, checked } = event.detail;
         if (value !== undefined && value !== null) {
-            const newSelectedValues = [...this.selectedValues];
-            const valueIndex = newSelectedValues.indexOf(value);
+            const newValue = [...this.value];
+            const valueIndex = newValue.indexOf(value);
             if (checked && valueIndex === -1) {
-                newSelectedValues.push(value);
+                newValue.push(value);
             }
             else if (!checked && valueIndex > -1) {
-                newSelectedValues.splice(valueIndex, 1);
+                newValue.splice(valueIndex, 1);
             }
-            // Update the state and emit the event only if the selection has changed
-            if (JSON.stringify(this.selectedValues) !==
-                JSON.stringify(newSelectedValues)) {
-                this.selectedValues = newSelectedValues;
-                // Use requestAnimationFrame to ensure the state is updated before emitting the event
-                requestAnimationFrame(() => {
-                    this.multiselectChange.emit(this.selectedValues);
-                });
+            // Always update the state and emit the event when an item is checked/unchecked
+            this.value = newValue;
+            this.valueChanged.emit(this.value);
+            // Update the checked state of all items to ensure consistency
+            this.syncChildComponents();
+            // Preserve the filter text in the input
+            if (this.filterable && this.inputElement) {
+                // Keep the current filter text in the input
+                this.inputElement.value = this.filterText;
             }
         }
         else {
@@ -18456,12 +18945,10 @@ class NvFieldmultiselect {
         }
         // Specific initialization for slots mode
         if (!this.options) {
+            // Use a microtask to ensure DOM is ready
             Promise.resolve().then(() => {
-                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-                // Initialize selectedValues with checked items
-                this.selectedValues = items
-                    .filter(item => item.hasAttribute('checked'))
-                    .map(item => item.getAttribute('value') || '');
+                // Synchronize child components
+                this.syncChildComponents();
                 // Force a reorder after initialization
                 requestAnimationFrame(() => {
                     this.reorderSlotContent();
@@ -18472,13 +18959,8 @@ class NvFieldmultiselect {
         if (this.options) {
             this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
         }
-        // Apply filtering if the multiselect is filterable and there is a value
-        if (this.filterable && this.value) {
-            this.filterText = String(this.value).toLocaleLowerCase();
-            this.filterItems();
-        }
-        else {
-            // Reset visibility state of all dropdown items
+        // Reset filter if needed
+        if (!this.filterText) {
             this.resetFilter();
         }
     }
@@ -18489,6 +18971,8 @@ class NvFieldmultiselect {
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
+        // Final synchronization of child components after everything is loaded
+        this.syncChildComponents();
     }
     /**
      * Unsubscribe from click outside event.
@@ -18506,38 +18990,6 @@ class NvFieldmultiselect {
     async getFilterText() {
         return this.filterText;
     }
-    /**
-     * Set the initial selection based on the current value and update the inputElement value.
-     */
-    setInitialSelection() {
-        var _a;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        const selectedItem = items.find(item => {
-            var _a;
-            return item.getAttribute('label') === this.value ||
-                item.getAttribute('value') === this.value ||
-                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
-        });
-        // Remove 'selected' from all items first to reset the state
-        items.forEach(item => {
-            item.removeAttribute('selected');
-            item.classList.remove('selected');
-        });
-        if (selectedItem) {
-            // Add the `selected` attribute and `selected` class for visual styling
-            selectedItem.setAttribute('selected', 'true');
-            selectedItem.classList.add('selected');
-            // Update the value and inputElement value to reflect the pre-selected item
-            this.value =
-                selectedItem.getAttribute('label') ||
-                    selectedItem.getAttribute('value') ||
-                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
-                    '';
-            if (this.inputElement) {
-                this.inputElement.value = this.value;
-            }
-        }
-    }
     /**
      * Reset the filter and make all items visible.
      */
@@ -18554,8 +19006,8 @@ class NvFieldmultiselect {
             if (emptyMessage)
                 emptyMessage.remove();
             // Reorder with divider if needed
-            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             if (selectedItems.length > 0) {
                 this.manageDivider(ul, selectedItems, unselectedItems);
             }
@@ -18566,7 +19018,7 @@ class NvFieldmultiselect {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        return this.selectedValues;
+        return this.value;
     }
     /**
      * Reorder the content of the slot.
@@ -18588,8 +19040,8 @@ class NvFieldmultiselect {
             return;
         }
         // Separate checked vs unchecked
-        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
         // Reinsert CHECKED items FIRST
         // appendChild() moves the element without recreating it
         // this is not trigger a re-rendering of the component in the platforms
@@ -18615,8 +19067,8 @@ class NvFieldmultiselect {
         if (!ul)
             return;
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
-        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
         // Reorder the elements
         selectedItems.forEach(item => ul.appendChild(item));
         unselectedItems.forEach(item => ul.appendChild(item));
@@ -18652,8 +19104,8 @@ class NvFieldmultiselect {
             }
             // Reorder with divider
             const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             this.manageDivider(ul, selectedItems, unselectedItems);
             return;
         }
@@ -18674,8 +19126,8 @@ class NvFieldmultiselect {
             });
             // Manage the divider with the visible items
             const visibleItems = items.filter(item => item.style.display !== 'none');
-            const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-            const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const visibleUnselected = visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             this.manageDivider(ul, visibleSelected, visibleUnselected);
         }
         else {
@@ -18733,8 +19185,8 @@ class NvFieldmultiselect {
         });
         // Manage the divider with the visible items
         const visibleItems = items.filter(item => item.style.display !== 'none');
-        const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-        const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const visibleUnselected = visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || ''));
         this.manageDivider(ul, visibleSelected, visibleUnselected);
         // Add or remove the empty message based on the case
         if (!hasVisibleItems) {
@@ -18782,8 +19234,8 @@ class NvFieldmultiselect {
         });
         // Get visible items after filtering
         const visibleItems = items.filter(item => item.style.display !== 'none');
-        const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
-        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || '')));
+        const visibleSelectedItems = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || '')));
         // Add empty message if no items match the filter
         if (!hasVisibleItems) {
             const emptyMessage = document.createElement('li');
@@ -18980,6 +19432,29 @@ class NvFieldmultiselect {
             divider.style.display = 'none';
         }
     }
+    /**
+     * Synchronizes the checked state of all child nv-fielddropdownitemcheck components
+     * with the current selectedValues state.
+     */
+    syncChildComponents() {
+        // Early return if element is not ready
+        if (!this.el || !this.el.isConnected) {
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        items.forEach(item => {
+            // Get the effective value: use explicit value if present, otherwise use label
+            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
+            if (this.value.includes(itemValue)) {
+                item.setAttribute('checked', '');
+                item.checked = true;
+            }
+            else {
+                item.removeAttribute('checked');
+                item.checked = false;
+            }
+        });
+    }
     /**
      * Renders description and error description sections
      * @returns {any} The JSX for descriptions
@@ -19015,7 +19490,7 @@ class NvFieldmultiselect {
             "description": [513],
             "placeholder": [513],
             "autocomplete": [513],
-            "value": [1537],
+            "value": [1040],
             "required": [516],
             "readonly": [516],
             "disabled": [516],
@@ -19030,8 +19505,7 @@ class NvFieldmultiselect {
             "autofocus": [516],
             "fluid": [516],
             "badgeLabel": [513, "badge-label"],
-            "filterText": [32],
-            "selectedValues": [32],
+            "filterText": [1537, "filter-text"],
             "sortedOptions": [32],
             "isHandlingEscape": [32],
             "getFilterText": [64],
@@ -19040,7 +19514,7 @@ class NvFieldmultiselect {
         },
         "$listeners$": [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["autocomplete", "autocomplete"], ["value", "value"], ["required", "required"], ["readonly", "readonly"], ["disabled", "disabled"], ["error", "error"], ["errorDescription", "error-description"], ["maxHeight", "max-height"], ["open", "open"], ["emptyResult", "empty-result"], ["filterable", "filterable"], ["debounceDelay", "debounce-delay"], ["autofocus", "autofocus"], ["fluid", "fluid"], ["badgeLabel", "badge-label"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["autocomplete", "autocomplete"], ["required", "required"], ["readonly", "readonly"], ["disabled", "disabled"], ["error", "error"], ["errorDescription", "error-description"], ["maxHeight", "max-height"], ["open", "open"], ["emptyResult", "empty-result"], ["filterable", "filterable"], ["debounceDelay", "debounce-delay"], ["autofocus", "autofocus"], ["fluid", "fluid"], ["badgeLabel", "badge-label"], ["filterText", "filter-text"]]
     }; }
 }
 
@@ -19164,9 +19638,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9a2922f5aaa1047da249563152b08f5fd74f0340' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f7f0f9a711f4c94ea4f6257a541aabbd08b9ca31', htmlFor: this.inputId }, hAsync("slot", { key: '9dbcb9386a05462da3cdeba01e6c4831ef52b7a5', name: "label" }, this.label))), hAsync("div", { key: '81ff77ec49a03d9bb622b8e934b71a475770b518', class: "input-wrapper" }, hAsync("slot", { key: 'd445e90aeebaf9b546b96cbbc77c72b10ab144bf', name: "before-input" }), hAsync("div", { key: '537c96360b91404d1ca560be27a71dbd0efd54ce', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '894fc44bf45a7d66d5d108fd816d19aa86b24407', name: "leading-input" }), hAsync("input", { key: 'a774febb21a489c858d1308f6d38b138815896aa', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), hAsync("slot", { key: 'e955eb9ad46950afcfe3de93ae18540ed583f66f', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'b2b5824c6cb2e1bb378600f0fb6511b8695e8df4', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'bce78b06f5ae6ed68bf795abad0f34dadd849422', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '2c304550d4f49de47cf24e6d650e995f98b4a17a', class: "stepper" }, hAsync("nv-iconbutton", { key: 'e96f7a47521387c79149f93f3cb4719cd24a9c0d', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '2f579a243c57166f3ccd43960deccda9b3f2d798', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'b305bae132034786a51e6a918f650391f0e4d406', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6eaae8de9885c77a36342ba48b9b0e88266e9bfe', class: "description" }, hAsync("slot", { key: '3a2f56c02df550ce7ca8b51771acbfd3dd7bf2d4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'aa505a05a032ac11c8626cbb601544c1037aabf6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e94717e1233cba33c2c189bb0b971f8ca6dc979e', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '908571e657b876e4bf13d2cd88c74ed56375a4a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd46ff199fa0211227293ebab6159ee98916e4845', htmlFor: this.inputId }, hAsync("slot", { key: '0e825e862bfadb313b723898d0732efb36f001c0', name: "label" }, this.label))), hAsync("div", { key: 'e001c956494a7b3c90cb713540b9300f6482cbb7', class: "input-wrapper" }, hAsync("slot", { key: '07f53c5fafcd308609b4ecfb721b9b0f791d5bf5', name: "before-input" }), hAsync("div", { key: '266fe99cc757c5646aa4bcbf262d7f6eb21fa507', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f80e50ffa553656b26c80be179fd5bda8fd7234e', name: "leading-input" }), hAsync("input", { key: '3fb53e266a44118a464f5fffef5019d900f25668', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), hAsync("slot", { key: '9769d9b13676f8022eb7771869876125e7d13ea2', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'feedeb1dfcf9a5b8c3e6f4e355af64db5e108125', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '6f3819ea3bad57b373e24e5b167887c2175534ce', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: 'ab83ad88264a5295f8239b308af7b61c04095b8c', class: "stepper" }, hAsync("nv-iconbutton", { key: '67bf2dc34cab126f8ebb8ad1368d326ce4e448c9', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '2ae711f4ff770049fb9b9afa4075b02a5d41d881', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'f59664d1200b6e1e300cac52ceaee03b1be68cea', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '10cefd1d1e86d33456b6800d5d1f3f5c7a10a16c', class: "description" }, hAsync("slot", { key: 'a8544e2917993f7fa45200e51e983277c6f0b393', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '95ffb42b6014514a51102b0bfa60887ff3394362', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '47d19a9cf2de2cdd2f23a5cf7a74943f9de8cb7e', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19314,9 +19788,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'de631f354c11bca46438aa57eb2f5b255b99f439' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b5b7d00ec3cd2bf062c7891f44cb1b9f4032e659', htmlFor: this.inputId }, hAsync("slot", { key: '04149706c9f07e290cf9d93b2890de26c6ba832a', name: "label" }, this.label))), hAsync("div", { key: 'eb7a834ceb2769de0059ca96226bb8a31e7f3e95', class: "input-wrapper" }, hAsync("slot", { key: 'd250f823150eb3ff2fc93869cd7c7afa9738a8ef', name: "before-input" }), hAsync("div", { key: 'a1ce5f337b3c29152869395a33acdf4b872e8e04', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '589cc579cba9c2364bda3948cdf14ac4e1687088', name: "leading-input" }), hAsync("input", { key: '5f45023c3a4f5dca5bff08e960221c711eb008b6', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: '1b78092817109ee795bf90c8182abfa0a9af35af', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '1d64a57a5e4eab88b499a9783d460a33d052950e', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: '1183158e98fa88ca143b5443db36f7f658b9acb7', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '34181f122eb6651a605bc00f96bccd7cfce6b11b', class: "description" }, hAsync("slot", { key: '74a0b8e00d96d60884f32c89a4a15e9b2f7c25ed', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd16bf3d39dc42960dc089df6ac8959d09f8a1076', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cf19821689d4889eda9ce5a6cfa5675b97fca86e', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'a14a4df5990def8c1b76e191dc3480c2eee73446' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b3f8d2a9b98afbd9ba7e932a4fd2639855bce785', htmlFor: this.inputId }, hAsync("slot", { key: 'af896d231a0c0b5b5ce921e24f98b32702fe0058', name: "label" }, this.label))), hAsync("div", { key: '6047dabbbb95967bf4afb01144a5f2af98677caf', class: "input-wrapper" }, hAsync("slot", { key: 'eb36d6c886f7efc91508b97a4cb11c43d7e7809b', name: "before-input" }), hAsync("div", { key: 'f9de2896f8d7a29d700e9c7f586f5190c48b0304', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '3203cc62507460372c3babcede4071cf4a068122', name: "leading-input" }), hAsync("input", { key: 'bef15c1b3da5f949e4a55644dbea6499f398f71a', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: 'b23cac5c39ea1a428831583075d2e631eb13c231', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '9a6a4900981781239b40e7106974e0d520dbf76a', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: 'e3be0e70cad0f581b7fb0bee13046dcbf3d01791', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a0613b0fc5f68e82a3bff9a7943c33fd89fad6c8', class: "description" }, hAsync("slot", { key: '7f74f1207e31772ff485927d3c0334185bb14e77', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '1fba0209bef041b3582bc36dc3b603c6b3a24088', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '16c86655cc33bf47d1d4c388bcc4ac6272aa7714', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19444,9 +19918,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e1a92204a7d3e07de9485873906ed57dc2f4dfb1', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '8161b36c31b960a4ca4f7a1291a9cdbdd830429c', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '8d5ff5b5742a96dc9d1167298859a7a97347eeab', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '7417fe1c5041e20fd63abca907fd75fe7d3b49d2', htmlFor: this.inputId }, hAsync("slot", { key: 'e29a092dbd19c912c496e1ae56d9f46bcb44208c', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a894108a6e5235010d18547a39daf526e066e432', class: "description" }, hAsync("slot", { key: 'c67b5b5a5d2ef1f27e69eb251e9a15c98909db85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '18ea2ae58994289900f28c0e6220e113b45b2a92', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '52a10763fb7bf688e5a1de5e854aa0d80bc996f4', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: 'abfa20ef5921ee52cbe6c3ea92b27bbd4e81a116', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'ffa244c2692f3f4b3781df6ed3916139763d3253', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '661ccebfcd608d3d5a819144c1048b7b612d93ad', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0764fffd0b6c961d3149130fd92fc3e5be4617d4', htmlFor: this.inputId }, hAsync("slot", { key: '5b5c107074f406864f889187a73c3b6c25b5ad36', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '68bb23249fc70db7346e4deb1924e24fd0e43133', class: "description" }, hAsync("slot", { key: 'fee77e49f6a48f592eba370f8e842cc3c51a9569', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0544f59d2446dd3d1137839643222ae1d32236a2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '655fbb4ca21e3001425dcfbb6d9188586e0548ca', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19830,13 +20304,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: '17dc03e5db7ec57623e6fb4c06199aaf1ed85991' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '81fff1ee75f4e1415f60a2900303123cee3c8b58', htmlFor: this.inputId }, hAsync("slot", { key: '69569c3981e754e22ffcfb4d73121ee7056f0695', name: "label" }, this.label))), hAsync("div", { key: '251d557b6f1618241cccbb36e8c03415075ddf98', class: "select-wrapper" }, hAsync("slot", { key: '765d37ea12613de6e65cc77c9aa0000e75dc1243', name: "before-input" }), hAsync("div", { key: '6150af4f94e13a2fced6dcf597d1310a2282c337', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '88f48c27c2a109d9db8a65671e3028c13272dde7', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '2e0884fdbdda028426957530f815f0ce2b772322', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: 'd7c179e0ad3bdc22afa4a4ad8b84cc0d7403e3f9' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '545ba543c78e93bb790fca363325d40052899b53', htmlFor: this.inputId }, hAsync("slot", { key: '5141dc2bda9b312682fe7adcf2ad8ae23a720696', name: "label" }, this.label))), hAsync("div", { key: '791b9ed3213a44b2222613e54e21ec5f7814625f', class: "select-wrapper" }, hAsync("slot", { key: '51590cb6c8152955ffef574caaa5858064652cf8', name: "before-input" }), hAsync("div", { key: '030cfcb568435a8518d2680bee21b6e66c0955eb', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '9eb92fb0b383a2b08ef8ba61baf8340f6ecb12a6', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'fe4debae13d4258fe5e6a6d273e7384ef7071f35', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), hAsync("select", { key: '0bd79358080fd6d76e28ba574e5fae336ab4b34d', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), hAsync("select", { key: '767c5c8f1a0f34aa645d49e7b09b0cfb230d5e3c', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '8266f6651293d179f5d119bc25b0d171d1064cd8', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '5300e5c151dfdca429550a4e1823954783b4f086', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '40ff228bfc531fe269a4acca577ebe2230d679e9', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '5d77e09bbce330e3e855035f2cab0b0001ba7839', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: 'b19c29e25d9f9cae2c6a3e4129f6f74cbb01becd', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ef53e3d22291e580bcf2554273d47cdfa43eefc4', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '8bdbcef6106634c2ce37c8c1be50d6bd7cbe9e2f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '1e4b5d282fcacceac0c46a02dfa1243a00c28ac0', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '634be5308aaf40697bd1e7a2ef085e94e0d38f43', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '911644aa7ded450918f6424ebd8ce9dc4b6ed1d6', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'd5ae32439983916d17346fdce50d51e73d429c23', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '783f0d7f1d4a0bbcbd8cff9416e5c3f61408061a', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '252cd65b1e9437aa89161c6342f4f107ad330136', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '8e1088c34086ee58b240acb99c25fa113517e76c', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7c521ab944ec72bec68c32c33400eb3c3a7c32bc', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'dab0be52dc34f499575775f9131c51c4cd7fd290', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '00d9ce6b2a5fb946575e54cc3bf2fd83acc83290', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '0e1027874f6e2b275ca354e2d64c0289ca961a0c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19882,6 +20356,18 @@ class NvFieldselect {
 /**
  * Utility functions for nv-fieldslider.
  */
+/**
+ * Gets the number of decimal places in a number.
+ * @param {number} num - The number to check
+ * @returns {number} The number of decimal places
+ */
+function getDecimalPlaces(num) {
+    if (Number.isInteger(num))
+        return 0;
+    const str = num.toString();
+    const decimalPart = str.split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+}
 /**
  * Clamp a value between min and max.
  * @param {number} value - The value to clamp
@@ -19914,7 +20400,26 @@ function valueToPercent(value, min, max) {
  */
 function snapToStep(value, min, max, step) {
     const clamped = clamp$1(value, min, max);
-    const snapped = Math.round((clamped - min) / step) * step + min;
+    const decimalPlaces = getDecimalPlaces(step);
+    // To avoid floating point issues in calculations, we can work with integers
+    // by multiplying all values by a power of 10 based on decimal places
+    if (decimalPlaces > 0) {
+        const multiplier = Math.pow(10, decimalPlaces);
+        // Convert to integer-based calculation
+        const scaledValue = Math.round((clamped - min) * multiplier);
+        const scaledStep = Math.round(step * multiplier);
+        // Round to nearest step using integer math
+        const roundedSteps = Math.round(scaledValue / scaledStep);
+        // Calculate snapped value and scale back down
+        const scaledSnapped = roundedSteps * scaledStep;
+        const snapped = min + scaledSnapped / multiplier;
+        // Format to correct decimal places to ensure precision
+        return clamp$1(parseFloat(snapped.toFixed(decimalPlaces)), min, max);
+    }
+    // For integer steps, use the original method
+    const stepsFromMin = (clamped - min) / step;
+    const roundedSteps = Math.round(stepsFromMin);
+    const snapped = min + roundedSteps * step;
     return clamp$1(snapped, min, max);
 }
 /**
@@ -19955,6 +20460,19 @@ function snapToTicks(value, ticks) {
     }
     return closestTick;
 }
+/**
+ * Format a numeric value for display, preserving trailing zeros based on step precision
+ * @param {number} value - The value to format
+ * @param {number} step - The step size that determines decimal precision
+ * @returns {string} Formatted value string with appropriate decimal places
+ */
+function formatValueForDisplay(value, step) {
+    const decimalPlaces = getDecimalPlaces(step);
+    if (decimalPlaces > 0) {
+        return value.toFixed(decimalPlaces);
+    }
+    return String(value);
+}
 
 /**
  * Renders single thumb in standard mode.
@@ -19962,7 +20480,7 @@ function snapToTicks(value, ticks) {
  * @returns {JSX.Element} JSX element representing the thumb
  */
 const SingleThumb = props => {
-    const { value, min, max, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    const { value, min, max, step, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
     // Use raw position for visual display during dragging, but the snapped value otherwise
     let displayPosition = value;
     if (isDragging && !snap) {
@@ -19972,7 +20490,7 @@ const SingleThumb = props => {
     return (hAsync("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
         hAsync("div", { class: "thumb-tooltip" },
             labelBeforeValue && (hAsync("span", { class: "label-before" }, labelBeforeValue)),
-            String(value),
+            formatValueForDisplay(value, step),
             labelAfterValue && hAsync("span", { class: "label-after" }, labelAfterValue))));
 };
 
@@ -19982,7 +20500,7 @@ const SingleThumb = props => {
  * @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs
  */
 const RangeThumb = props => {
-    const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, step, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
     const [leftValue, rightValue] = rangeValue;
     // Use raw positions for visual display during dragging, but the snapped values otherwise
     let displayLeftPosition = leftValue;
@@ -20006,12 +20524,12 @@ const RangeThumb = props => {
         hAsync("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
             hAsync("div", { class: "thumb-tooltip" },
                 labelBeforeValue && (hAsync("span", { class: "label-before" }, labelBeforeValue)),
-                String(leftValue),
+                formatValueForDisplay(leftValue, step),
                 labelAfterValue && hAsync("span", { class: "label-after" }, labelAfterValue))),
         hAsync("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
             hAsync("div", { class: "thumb-tooltip" },
                 labelBeforeValue && (hAsync("span", { class: "label-before" }, labelBeforeValue)),
-                String(rightValue),
+                formatValueForDisplay(rightValue, step),
                 labelAfterValue && hAsync("span", { class: "label-after" }, labelAfterValue))),
     ];
 };
@@ -20520,11 +21038,11 @@ class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b6d4fb8acbdeecc38af8cedc10b57bc051d16306' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5ca9f08e3f0d4640aad7433c0ec861dcc2044936', htmlFor: this.startInputId }, hAsync("slot", { key: 'c31ba9e87a5fd0f6c5d28f0bfa6e42895d6ce6e9', name: "label" }, this.label))), hAsync("div", { key: 'd6942e4dba60e5b58eb16c8631466743ea0590dd', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '7404f2d26e96220f9c1c615487b837855694d335', class: "track-container" }, hAsync("div", { key: '353747e80e3af3ec203b527648f7eca0d47c837b', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '08e3ed7962b8ca6b15c4c592993c79adcb4622ee', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (hAsync(Host, { key: '5bb5a06e9742f87d098da76260ee269ef4ea06d5' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dd6e12d6c6379e07c4f9964984b3458a71ce6e6f', htmlFor: this.startInputId }, hAsync("slot", { key: '6229200586d90f4f21604d411f473e6df66527c4', name: "label" }, this.label))), hAsync("div", { key: '44f60b538c83d9074a5d06b5a39c1e62e5aa5c55', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '4ec60f07b203b6836649a709027fdace39468c41', class: "track-container" }, hAsync("div", { key: '4fcc799c962bf17e582fa5daf51a9c986d2d5901', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '95b75deb4c7d0142f575af39fafe7b913c315ed5', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0860c3cdee38cc112e8e29d61a6ea357c2a146d6', class: "description" }, this.success && (hAsync("nv-icon", { key: '2ad1463f9e868d6b9757a5d5d657111595d711cb', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '7559546a6067060db4f20d6f65786c868a4638a4', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '4b86941f66df96014d4710e6f1f79523a4f332f3', class: "description" }, this.success && (hAsync("nv-icon", { key: 'b53792e0fe60354cdfb2e34dbf54fd87df10050c', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '149788e0ce96516b812370b247ddd59de555bf90', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cb3c997c250f9ebe3d46bd869bb7c4c9e81e9738', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '3644d3f766a30872eaadbad89c87fdfd893a2a1b', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '162a532c42328f0aee7309af5544b4d92230ce86', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '11814ba28092b2ded30f6b15362b0eb9e67c20a0', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '86b555aa52f4295932d80947737116c3f6c0ce99', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '334739920eb67abc49b2bdb942d0a2f65a925460', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20699,9 +21217,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '1619b7f63a882e953e0153cc2b70de086eeeeb56' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd7eb27295ab541c523ada7a85faa9c1b03144447', htmlFor: this.inputId }, hAsync("slot", { key: 'a2e0942edc5435cf9f712e98ec74c1162bdd7a9f', name: "label" }, this.label))), hAsync("div", { key: 'acbb7cc279abe926cfd4778c6b244227bf8f1545', class: "input-wrapper" }, hAsync("slot", { key: 'c5e7d37de44dc3948bbebea67d78dc36d9af3106', name: "before-input" }), hAsync("div", { key: '174bc5b0fe2d89c2a6622d924490e57e079c4033', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'e2af299a1f2e0f576405d2bb3176e6759faeafda', name: "leading-input" }), hAsync("input", { key: '4e00aa5a7f8bd52e7080be30c8438ca01d151e6d', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: '035e7478da88e9d944ee192f5af345eab44782d9', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '21cc0d22e9e1e355c522985fd15c9a1b5aa40464', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '229b732174f1b464c240cec94a77725bcf1c7e96', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '6522e7106f888f39415e853df131a2a5bb85d5fd', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '77c4b156e39216f5122b7d5cc9cf4db89171f7f3', class: "description" }, hAsync("slot", { key: '59b732c941ea2ab6fcda2fe87d856b5f7bd6edff', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ba3a666fe48b90369f3c58d1e8a9e14d0d9726f4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '686143748e2a9c2d079c383e48d02d40beae1ec6', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'aa009c45d11efe9fef7ae0acfb701e25db7d3004' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '90aedd9dc50b1485b76e4bb6df2f5ea017eee9f4', htmlFor: this.inputId }, hAsync("slot", { key: '3d7c37806fd01f1bb4c1d1d67372ce257d1b382d', name: "label" }, this.label))), hAsync("div", { key: 'd399c53383708363c986c8f02f0f0a3b48bb4c39', class: "input-wrapper" }, hAsync("slot", { key: '19b8cb3165c3ff0523c257ad0fc53f0df7413685', name: "before-input" }), hAsync("div", { key: '3564795cf1775f2113c9a35d1865f84358be3144', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b9b0b3b44f8474ba4f0c46552bb9c3a83fa0d7d2', name: "leading-input" }), hAsync("input", { key: '39687f0583e734b03262aac593ab50ffad7957fd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: '0faf9e99190d1d7e4295a454d2b89a31c728a38f', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'fe4646f13b1fba38883f1e03ea6c1ba274c9aa47', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '1e51b8182acc3b049ad608ddefd8c1631efbef94', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '65bf5da97918592f3d8ebc63d134ddc4723188a1', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c3f771bc7f641612baead1d82f8bcf8d8586a152', class: "description" }, hAsync("slot", { key: '27df5104927ce680472aff0054e4ae5c3a9727c6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8126a6159a24b68a9fa7f017aa289269f63035d4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd7cebdf0101cbed1d898c2bcc73581387ddb23b9', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20921,9 +21439,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f5ac973e97efc7bb3d2c3ce59507a56b2605ecb0' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e36602ae0fe5eb0684611c100502152dd85cfc5e', htmlFor: this.inputId }, hAsync("slot", { key: 'd6a35797136c52201a67bfbcf06c9ba1826a6594', name: "label" }, this.label))), hAsync("div", { key: 'fdab36db53b550a8ce9c88bb0f52aeb40d724a34', class: "textarea-wrapper" }, hAsync("div", { key: '447355abb8874e1f8b6a958e026bb4b9a955ad4e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '4a2151f726b1335ab78f895e8ce85f7a17fc62d3', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2e66d3bd367d812f9f94110e094716adb489a600', class: "description" }, hAsync("slot", { key: 'bbc7983f3c6884766e8d14322d1a803243e0b6df', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e62612c112e89ba2c3309869ac15670ac36d90d7', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '1d53e6c9f6abd5f026c47e3fbad331bb8614eea2', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'a0e5cd4a7cf3dbfc928a08518b9ea031ae995e0a' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bb327648d74c5340f7069afd5d3afd8cfbe816e8', htmlFor: this.inputId }, hAsync("slot", { key: '778cd6b79f71b4751e08b754f127da9460c104f0', name: "label" }, this.label))), hAsync("div", { key: '21e2126f2115b1de134e4d2acfa3a9b7eba713c0', class: "textarea-wrapper" }, hAsync("div", { key: '12b431b44cc6c8402a4af3fc5180ef95464571c4', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'dbb7bf5fc51aa93993eb485b8650837e892747ed', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd4758f3b173c84d5b7785c790832f794fae21504', class: "description" }, hAsync("slot", { key: 'def8fe57e0dd229fc31ba5372663b9053ef6a3d0', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5f6f6bce639a3690cd51d208be62bacdf5779f10', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e0d185195a4c18d2a3627c554c4ce70a52db77d7', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21951,26 +22469,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: '757fd8e7217562805cc463fcc62a29b150e07746', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '50bc85aea3f5191e8629ff5f8dee2386513d01f2', htmlFor: this.inputId }, hAsync("slot", { key: '61a751dee3629e470168ec75fbb66ded1ad3c5bc', name: "label" }, this.label))), hAsync("nv-popover", { key: 'fd96b7e7bc80c873442d01c13998b718c71a0434', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '65c075a139cb62092e1cbddbab2ac50a4dd6eb0b', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'b7adb1b1cb3d02715e9c9b5099ce750850998bd9', name: "before-input" }), hAsync("div", { key: '61e8f2283bf0c1e56d37904532002753055957c4', class: "input-container" }, hAsync("slot", { key: 'cd0f10bac015e720a7bb9ce195f0bbd15c989f72', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: '4609d5071d4436d3bd59fa57017348ad2e1b34ae', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (hAsync(Host, { key: '9779298ba2b38f3987af0cfa03250f0e9a99b9f8', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e2a9108cbc9d28d14aad58dc2e857e54ae39f09f', htmlFor: this.inputId }, hAsync("slot", { key: '94e26cbf12ac61bc32de87a32a91eca65da6461c', name: "label" }, this.label))), hAsync("nv-popover", { key: '9d3b59e19a11a7cdebfc03eef6278f87f6f440e4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '2651f57c27384c367d29543f390ace075a08225f', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '2df5c90ff04b28ab426929729e94948aa6491b2a', name: "before-input" }), hAsync("div", { key: 'bb490ebb175df4e579f0add8113e28dd7c29e866', class: "input-container" }, hAsync("slot", { key: 'b09f37a743d0b3dc12a8de0d39641571e9d7090b', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: 'bd97f546da7231ad6ae40799a797da2368e89213', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            hAsync("span", { key: 'a92d1f6762397cf19fb9b66650ece033a34090fa' }, ":"),
-            hAsync("input", { key: '88f8e9e3a1dfcbee2b1ea1a5aa9e698b6ad455e5', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            hAsync("span", { key: 'd1e8a8938b214717f178d462976afd91f582eb50' }, ":"),
+            hAsync("input", { key: '720445f3892535abd7d81fdbf38f7941a66a01a5', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            hAsync("span", { key: '80f7b55263f287a136a0d75965ca2aeebb9286a4' }, ":"),
-            hAsync("input", { key: '71cf4d20ed7c85f535092c29116849982dfcfa54', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            hAsync("span", { key: 'e8b19bdd054f792a48df56a2ad884d9ec3f96dc0' }, ":"),
+            hAsync("input", { key: 'd2020d37b004a15912791d804daeeee2aadadb70', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], hAsync("nv-iconbutton", { key: 'd7dd4eeec66097b1b28843a2b152de3a54264d86', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: 'a4d970f47e77340f0d979018f82d63fe16e330ac', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '09a48f8cddcbc7ebd68e824cd3b6b98d4bdb05bc', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'd0f36a492944565d4abaf110ba5852c32c9aa17f', name: "after-input" })), hAsync("div", { key: 'edf9e7b894f55b2ba8075a26a24dad36034baba3', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '3119fd1f881fbc06e1b00c687aa5e2e719959455', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '96e3cbee01387385f1ed16bd5e7a1b639fae592f', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '6ef9a8a535914394e7a8a9e82f55e9ac82655161', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'ab1313914251a15de716d60a4f60afe91c949d7a', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'cf346d219445fc595419e834302d03d30a5dcf97', name: "after-input" })), hAsync("div", { key: '8cfe562d283109f305db84b843c68ad1535fed6b', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '9690c5733e3fcd0ae22743e4c572d9a5ff2d1bff', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'fdce7e05e292bf00dcec4ff8f00e8d014d4e35d8', class: "description" }, hAsync("slot", { key: '8f0a4f0a8128d49eeb6910f5fc77b7518dee60d4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c54ffb42c2cb4ffb002f6786f8ffe17b2c33cbd3', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '902f6adc01ec02ecbbb1a8f524e14e3f3ad9c707', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6671a07feeac69f2d9374dd25b00c6d7a7258bbd', class: "description" }, hAsync("slot", { key: '2ebc81fa182462a44a62d075c187b94bfe16ad96', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f1815ed7f65eaf25fd69d56de613c01be842d147', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '028896c0e9bffa83f2429a77e1dfaace6f8a07d8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22075,7 +22593,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'aff2c5f8f5ec978f9c5fce0f4ff17563d09e9a27', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'd16b1b378c88ecef80efb00356d30c0e9b4ad022', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: 'b3588d9c1e56dffe2bd432cac7e2410ed3f1b2ca', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: 'a3219e9be865e466fef36c8135ab14604e20fe40', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '29cfc530d71369210b1bbd896760e19f7811c557', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: 'f601f44101684971c1286b9f6214d5dcdaa7e66e', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -22219,7 +22737,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9e290d8190d198790563c7523ac4708157bb27e4', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: 'a3d3af89e6e000de9e4e6112a22ae901c1bf0409', size: this.size }), !this.loading && hAsync("nv-icon", { key: '1094bb262963888f1313744f1779809a76a78e44', name: this.name, size: this.size }), hAsync("slot", { key: '7dea704e805ed97fd7933e019b4117d86fb9aca6' })));
+        return (hAsync(Host, { key: '789d2f8b19178efb5e2998386670cfcbe239efed', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '4f09a5b6fee239e01856aa7ed90e9af0f13a69dc', size: this.size }), !this.loading && hAsync("nv-icon", { key: '44649863d33226aafad217dfbaba4cd56865b86d', name: this.name, size: this.size }), hAsync("slot", { key: 'e5483a758287d3e3843774a0581cd1db6da172e3' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22267,7 +22785,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '34d77e3d0ceec39d545b8098ebb1c673633d6660', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: 'dad18e0ecc71ae0305fa1f287a336e8fa0da6889', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -22478,7 +22996,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'a830e83199683e3e02cc19dc1f1148a8db8a510b' }, hAsync("slot", { key: '9f02da6e13c4ea8be3d561c4c2f500cfc7441b47', name: "trigger" }), hAsync("nv-popover", { key: '46fc7825a9a90b06862d487b856cf1085cfa2603', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
+        return (hAsync(Host, { key: '287ae16bc4971d1d7811bd80384e93b8b7017945' }, hAsync("slot", { key: 'f09fa7b923d4f66e7fb8bebcfd943daf843eec38', name: "trigger" }), hAsync("nv-popover", { key: '757ff04ef461eb60c061bd28914f82fc59437e82', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -22549,7 +23067,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e1d8de1448ac00846ecec2480e1e00d2a4b9fbf1', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '1fe6acb264c0c54114dfa22df1efc676be300baf', name: this.icon }), hAsync("slot", { key: 'f3e1c15b56d209867bc28c7b23122309feb7c93f' }), this.label && hAsync("span", { key: '38619eb47c50150a0e4779fbf5fa7fa8da1e1d4c', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'f30be0820969fd79f1ed55eb39878efb8cf9e527' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '8ab74974f2e12f7eb16aabe587597f64502c2911', name: "chevron-right" })));
+        return (hAsync(Host, { key: 'c008da503776b85bec237b25e321e4bba02d153f', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '66341d40e68409b4c0ab6595a67eed1e4354d6ba', name: this.icon }), hAsync("slot", { key: 'e3960af26ffbc703a5702981e948013179b1a83b' }), this.label && hAsync("span", { key: '9633388dcbad3080b54b83845ced54f9b9d05061', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'da358858336a86a7a49bbd4a52b5f628aadc1c29' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '36a85c271a5dbe2c41eefac33209e5d9a909ae04', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -24934,7 +25452,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'dd1a09e6df99069395fff7bb1a1b5d5e52331755' }, hAsync("slot", { key: '998460dcac1e6cae6e420413c2e9bef460ed7d76', name: "trigger" }), hAsync("div", { key: '36a4bad082087b073e1f26b997f902611f6b7265', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '7734847121f62b2233c0d99baa05c9c71ba9d6e4', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '29d5e8860f9ccdf2382f61c4276019a36983b0ff', name: "content" }))));
+        return (hAsync(Host, { key: '843ac572358b402d6338945d671446fec1c51a6d' }, hAsync("slot", { key: '090f01aea3932cb95357985766a20112c63c4992', name: "trigger" }), hAsync("div", { key: '737822dd1539381bb485a389670f09a071441365', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '9d268df3f0e1df7b2a2264154143c3db14619661', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '432aae053b25d2e7d6594203ad0ff3ecee26c059', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24979,7 +25497,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7a41dce9acbfdc42b66a032f1d20437ebf3d79a1' }, hAsync("slot", { key: '570d2bc95ad3ab2502a1e87699cdcb5818743b7b' })));
+        return (hAsync(Host, { key: '20e40e37c82b00712ed3d60d46d460f5f877e10a' }, hAsync("slot", { key: '80ba27becb4d56ff0785054597d88c728fb3eca5' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -25014,7 +25532,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5f8251f0d74fbad4eb2af388202d943b10a57667', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '751196ccf84a2c64dd2c453e4f9ef92799102140' })));
+        return (hAsync(Host, { key: '24cca0f7101de5f37d30884983da28a839df9bee', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '3521e5dd684d2c6185fd434711ae85a6ea0b68ab' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -25351,14 +25869,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: 'a7c287297ac47d07daf0039f9379a7698147475d' }, hAsync("div", { key: '039d839527e1ac48b9725fb2a66e4d852c7a08e3', class: "hidden" }, hAsync("slot", { key: '31c79cf49fa8799d5c68047995b02aebdbff33de' })), hAsync("slot", { key: 'c007f5ce656ecbb736678454a64a531763af4df1', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
+        return (hAsync(Host, { key: '0e7b7e03592f9f68b9158e8374986986e0f155d4' }, hAsync("div", { key: 'eeebf671dde65fcd725fbbe78099816d1c07c65f', class: "hidden" }, hAsync("slot", { key: '2ac114cec120874bb0f7bf6ddde9ec9c88d978cf' })), hAsync("slot", { key: 'b8dea8ff4c987b679ab78e73c4b7698a608c1ee3', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (hAsync("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), hAsync("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (hAsync("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (hAsync("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), hAsync("slot", { key: 'f50f12ca506cf3e6484dd04b485d06c505f23664', name: "after" })));
+        })))))))), hAsync("slot", { key: '4dc0404a05946bc942f65af599fea186166cde9c', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25478,8 +25996,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e9159f5b38ef70de9058878abc81c35fb2a3d5d9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '912ae7587d86e0f31114fd2166571b412dbe63d7', class: "input-container" }, hAsync("input", { key: 'ecbc0069ec0ccbccfa664cd2253125bb8310e086', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'd7dd3611927aa1a38adcb8283a648239d68108b6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6d4f9adc04cc2e40a6b581d73ef68aeee4f8ec31', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'dccd8f62b8fec99879450d8073ed85c4d9203431', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dd148af7f803d3e407f24d0e4e8ec67a752ee119', class: "description" }, hAsync("slot", { key: '95119657c064cdcdb24482381bf398287d1500de', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '9b3a2c50180d17241f514ebfecb2d959d6aaf263', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '70420566c51bb19c3ef9b8718ba0069bd739fd26', class: "input-container" }, hAsync("input", { key: '5c1cfd0858a14cf1854de5a09b2daa55c4e781ba', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'f4678a7ed5a7e58397aadfe5155b95a395f39fba', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '4d25373b9c782d3016da002d1fa22dd551a1597a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'f297abef15befddc6b180edffe3ab7b0bb39d223', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '97f2b1045c5152fb66da582c7fcf2975cbe10e68', class: "description" }, hAsync("slot", { key: 'fae238400ac3a106079a7e361d179598a99363a4', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -25518,6 +26036,7 @@ var NvTooltipStyle0 = nvTooltipCss;
 class NvTooltip {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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
@@ -25531,7 +26050,7 @@ class NvTooltip {
          */
         this.enterDelay = 0;
     }
-    //#endregion PROPERTIES
+    //#endregion EVENTS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
@@ -25544,7 +26063,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a5ac533aff7f1dbeb92fdea0b512418a05ed39d1' }, hAsync("slot", { key: '5c96133df21b7fdc7cf2d9eb73766dc88d4bdc2e' }), hAsync("nv-popover", { key: 'e80cb8ebb57f57940e9a32bb00499a5a35e1e547', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '180dedb4dcf838271ea48986f5c8183fd8772af4', slot: "content" }, this.message), hAsync("slot", { key: 'b5a026e8a446e08a1a50fc3838757e4b4264b07a', name: "content" }))));
+        return (hAsync(Host, { key: 'eb3e25818bb1e57340ac169d1c40a0e4e9c56668' }, hAsync("slot", { key: '7937859bff530ff10a0de9076a77c92afa9ec9e7' }), hAsync("nv-popover", { key: 'e825c93c7d90f5598416f1f081c95517c7a27883', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '5a5987e3a04f02be104e5f8fcca2f40b75938a97', slot: "content" }, this.message), hAsync("slot", { key: 'd7efc512e29969e7c8c1a693f2fb15f9319e1fa8', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -25564,6 +26083,8 @@ class NvTooltip {
 }
 
 registerComponents([
+  NvAccordion,
+  NvAccordionItem,
   NvAlert,
   NvAvatar,
   NvBadge,