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

package/hydrate/index.js

@@ -2725,263 +2725,181 @@ 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.openChanged = createEvent(this, "openChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to display as a list of items (title, subtitle, content).
+         */
+        this.data = [];
+        /**
+         * 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 = [];
+    }
+    //#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.openChanged.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) {
+        // 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 openChanged event
+            this.openChanged.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
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    componentDidLoad() {
+        // If using direct child elements, initialize their state
+        if (!this.data || this.data.length === 0) {
+            this.updateChildrenState();
+        }
+    }
+    componentWillUpdate() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.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) }, 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 style() { return NvAccordionStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-accordion",
+        "$members$": {
+            "data": [16],
+            "mode": [513],
+            "openIndexes": [1040],
+            "internalOpenIndexes": [32],
+            "open": [64],
+            "close": [64]
+        },
+        "$listeners$": [[0, "itemToggle", "onItemToggle"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["mode", "mode"]]
+    }; }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -4678,362 +4596,815 @@ function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDas
             attrs[attrKey] = style[key];
         }
     }
-    if (originX !== undefined || originY !== undefined || style.transform) {
-        attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== undefined ? originX : defaultOrigin, originY !== undefined ? originY : defaultOrigin);
+    if (originX !== undefined || originY !== undefined || style.transform) {
+        attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== undefined ? originX : defaultOrigin, originY !== undefined ? originY : defaultOrigin);
+    }
+    if (attrX !== undefined) attrs.x = attrX;
+    if (attrY !== undefined) attrs.y = attrY;
+    if (totalPathLength !== undefined && pathLength !== undefined) {
+        attrs[isDashCase ? 'stroke-dashoffset' : 'strokeDashoffset'] = progressToPixels(-pathOffset, totalPathLength);
+        attrs[isDashCase ? 'stroke-dasharray' : 'strokeDasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength);
+    }
+    return attrs;
+}
+function createAttrBuilder(dimensions, totalPathLength, isDashCase) {
+    if (isDashCase === void 0) {
+        isDashCase = true;
+    }
+    var attrs = svgAttrsTemplate();
+    var cssBuilder = createStyleBuilder(svgStyleConfig);
+    return function (state) {
+        return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);
+    };
+}
+
+var getDimensions$1 = function (element) {
+    return typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect();
+};
+var getSVGElementDimensions = function (element) {
+    try {
+        return getDimensions$1(element);
+    } catch (e) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+};
+
+var isPath = function (element) {
+    return element.tagName === 'path';
+};
+var svgStyler = /*#__PURE__*/createStyler({
+    onRead: function (key, _a) {
+        var element = _a.element;
+        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+        if (!isTransformProp(key)) {
+            return element.getAttribute(key);
+        } else {
+            var valueType = getValueType(key);
+            return valueType ? valueType.default || 0 : 0;
+        }
+    },
+    onRender: function (state, _a) {
+        var element = _a.element,
+            buildAttrs = _a.buildAttrs;
+        var attrs = buildAttrs(state);
+        for (var key in attrs) {
+            if (key === 'style') {
+                Object.assign(element.style, attrs.style);
+            } else {
+                element.setAttribute(key, attrs[key]);
+            }
+        }
+    }
+});
+var svg = function (element) {
+    var dimensions = getSVGElementDimensions(element);
+    var pathLength = isPath(element) && element.getTotalLength ? element.getTotalLength() : undefined;
+    return svgStyler({
+        element: element,
+        buildAttrs: createAttrBuilder(dimensions, pathLength)
+    });
+};
+
+var viewport = /*#__PURE__*/createStyler({
+    useCache: false,
+    onRead: function (key) {
+        return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;
+    },
+    onRender: function (_a) {
+        var _b = _a.scrollTop,
+            scrollTop = _b === void 0 ? 0 : _b,
+            _c = _a.scrollLeft,
+            scrollLeft = _c === void 0 ? 0 : _c;
+        return window.scrollTo(scrollLeft, scrollTop);
+    }
+});
+
+var cache = /*#__PURE__*/new WeakMap();
+var isHTMLElement$1 = function (node) {
+    return node instanceof HTMLElement || typeof node.click === 'function';
+};
+var isSVGElement = function (node) {
+    return node instanceof SVGElement || 'ownerSVGElement' in node;
+};
+var createDOMStyler = function (node, props) {
+    var styler;
+    if (node === window) {
+        styler = viewport(node);
+    } else if (isHTMLElement$1(node)) {
+        styler = createCssStyler(node, props);
+    } else if (isSVGElement(node)) {
+        styler = svg(node);
+    }
+    cache.set(node, styler);
+    return styler;
+};
+var getStyler = function (node, props) {
+    return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
+};
+function index(nodeOrSelector, props) {
+    var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;
+    return getStyler(node, props);
+}
+
+const useCollapse = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = index(node);
+    /**
+     * Will set the overflow to hidden, and animate the max height to 0. Make sure
+     * the element has no border or y padding set, otherwise the animation will
+     * not work as expected.
+     */
+    function collapse() {
+        return new Promise(resolve => {
+            const height = node.getBoundingClientRect().height;
+            nodeStyler.set({ overflow: 'hidden' });
+            animate({
+                from: height,
+                to: 0,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Apply the collapsed styles without animating, useful when initial state
+     * is collapsed.
+     */
+    function setCollapsed() {
+        node.style.maxHeight = '0';
+        node.style.overflow = 'hidden';
+    }
+    /**
+     * Apply the expanded styles without animating, useful when initial state
+     * is expanded.
+     */
+    function setExpanded() {
+        node.style.maxHeight = '';
+        node.style.overflow = '';
+    }
+    /**
+     * Will set the overflow to hidden, and animate the max height to the value
+     * of the scrollHeight. Make sure the element has no border or y padding set,
+     * otherwise the animation will not work as expected. Once complete, the
+     * max-height and overflow style properties will be removed.
+     */
+    function expand() {
+        return new Promise(resolve => {
+            const scrollHeight = node.scrollHeight;
+            nodeStyler.set({
+                overflow: 'hidden',
+            });
+            animate({
+                from: 0,
+                to: scrollHeight,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    node.style.removeProperty('max-height');
+                    node.style.removeProperty('overflow');
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        collapse,
+        expand,
+        setCollapsed,
+        setExpanded,
+    };
+};
+
+const useFade = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = index(node);
+    /**
+     * Will animate the opacity to 1, and removes the opacity style attribute once
+     * complete.
+     */
+    function fadeIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 0 },
+                to: { opacity: 1 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('opacity');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the fadeOut styles without animating, useful when initial state
+     * is hidden.
+     */
+    function setFadeOut() {
+        node.style.opacity = '0';
     }
-    if (attrX !== undefined) attrs.x = attrX;
-    if (attrY !== undefined) attrs.y = attrY;
-    if (totalPathLength !== undefined && pathLength !== undefined) {
-        attrs[isDashCase ? 'stroke-dashoffset' : 'strokeDashoffset'] = progressToPixels(-pathOffset, totalPathLength);
-        attrs[isDashCase ? 'stroke-dasharray' : 'strokeDasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength);
+    /**
+     * Applies the fadeIn styles without animating, useful when initial state
+     * is visible.
+     */
+    function setFadeIn() {
+        node.style.opacity = '1';
     }
-    return attrs;
-}
-function createAttrBuilder(dimensions, totalPathLength, isDashCase) {
-    if (isDashCase === void 0) {
-        isDashCase = true;
+    /**
+     * Will animate the opacity to 0, once complete, the opacity style attribute
+     * will stay on the element.
+     */
+    function fadeOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 1 },
+                to: { opacity: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
     }
-    var attrs = svgAttrsTemplate();
-    var cssBuilder = createStyleBuilder(svgStyleConfig);
-    return function (state) {
-        return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);
+    return {
+        fadeIn,
+        fadeOut,
+        setFadeOut,
+        setFadeIn,
     };
-}
-
-var getDimensions$1 = function (element) {
-    return typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect();
-};
-var getSVGElementDimensions = function (element) {
-    try {
-        return getDimensions$1(element);
-    } catch (e) {
-        return { x: 0, y: 0, width: 0, height: 0 };
-    }
 };
 
-var isPath = function (element) {
-    return element.tagName === 'path';
-};
-var svgStyler = /*#__PURE__*/createStyler({
-    onRead: function (key, _a) {
-        var element = _a.element;
-        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-        if (!isTransformProp(key)) {
-            return element.getAttribute(key);
-        } else {
-            var valueType = getValueType(key);
-            return valueType ? valueType.default || 0 : 0;
+const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
+    const nodeStyler = index(node);
+    /**
+     * Will animate the scale and optionally the opacity to make the element grow and fade in,
+     * and removes the scale and opacity style attributes once complete.
+     */
+    function growIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: hasFade ? 0 : 1, scale: amount },
+                to: { opacity: 1, scale: 1 },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                    if (hasFade) {
+                        node.style.removeProperty('opacity');
+                    }
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    /**
+     * 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';
         }
-    },
-    onRender: function (state, _a) {
-        var element = _a.element,
-            buildAttrs = _a.buildAttrs;
-        var attrs = buildAttrs(state);
-        for (var key in attrs) {
-            if (key === 'style') {
-                Object.assign(element.style, attrs.style);
-            } else {
-                element.setAttribute(key, attrs[key]);
-            }
+    }
+    /**
+     * 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';
         }
     }
-});
-var svg = function (element) {
-    var dimensions = getSVGElementDimensions(element);
-    var pathLength = isPath(element) && element.getTotalLength ? element.getTotalLength() : undefined;
-    return svgStyler({
-        element: element,
-        buildAttrs: createAttrBuilder(dimensions, pathLength)
-    });
+    /**
+     * 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,
+    };
 };
 
-var viewport = /*#__PURE__*/createStyler({
-    useCache: false,
-    onRead: function (key) {
-        return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;
+/**
+ * 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());
     },
-    onRender: function (_a) {
-        var _b = _a.scrollTop,
-            scrollTop = _b === void 0 ? 0 : _b,
-            _c = _a.scrollLeft,
-            scrollLeft = _c === void 0 ? 0 : _c;
-        return window.scrollTo(scrollLeft, scrollTop);
-    }
 });
 
-var cache = /*#__PURE__*/new WeakMap();
-var isHTMLElement$1 = function (node) {
-    return node instanceof HTMLElement || typeof node.click === 'function';
-};
-var isSVGElement = function (node) {
-    return node instanceof SVGElement || 'ownerSVGElement' in node;
-};
-var createDOMStyler = function (node, props) {
-    var styler;
-    if (node === window) {
-        styler = viewport(node);
-    } else if (isHTMLElement$1(node)) {
-        styler = createCssStyler(node, props);
-    } else if (isSVGElement(node)) {
-        styler = svg(node);
+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;
+            }
+        };
     }
-    cache.set(node, styler);
-    return styler;
-};
-var getStyler = function (node, props) {
-    return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
-};
-function index(nodeOrSelector, props) {
-    var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;
-    return getStyler(node, props);
-}
-
-const useCollapse = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = index(node);
+    //#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
     /**
-     * Will set the overflow to hidden, and animate the max height to 0. Make sure
-     * the element has no border or y padding set, otherwise the animation will
-     * not work as expected.
+     * Updates the visibility state with Nova animation system
+     * @param {boolean} open - Whether the accordion item should be open
      */
-    function collapse() {
-        return new Promise(resolve => {
-            const height = node.getBoundingClientRect().height;
-            nodeStyler.set({ overflow: 'hidden' });
-            animate({
-                from: height,
-                to: 0,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    resolve();
-                },
-            });
+    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;
     }
-    /**
-     * Apply the collapsed styles without animating, useful when initial state
-     * is collapsed.
-     */
-    function setCollapsed() {
-        node.style.maxHeight = '0';
-        node.style.overflow = 'hidden';
+    //#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
     /**
-     * Apply the expanded styles without animating, useful when initial state
-     * is expanded.
+     * Toggle open/close (Public API)
      */
-    function setExpanded() {
-        node.style.maxHeight = '';
-        node.style.overflow = '';
+    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 set the overflow to hidden, and animate the max height to the value
-     * of the scrollHeight. Make sure the element has no border or y padding set,
-     * otherwise the animation will not work as expected. Once complete, the
-     * max-height and overflow style properties will be removed.
+     * Get the chevron icon name based on open state
+     * @returns {string} The icon name to display in the chevron button
      */
-    function expand() {
-        return new Promise(resolve => {
-            const scrollHeight = node.scrollHeight;
-            nodeStyler.set({
-                overflow: 'hidden',
-            });
-            animate({
-                from: 0,
-                to: scrollHeight,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    node.style.removeProperty('max-height');
-                    node.style.removeProperty('overflow');
-                    resolve();
-                },
-            });
-        });
+    get chevronIconName() {
+        return this.open ? 'chevron-top' : 'chevron-down';
     }
-    return {
-        collapse,
-        expand,
-        setCollapsed,
-        setExpanded,
-    };
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', 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: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, hAsync("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (hAsync("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (hAsync("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: '8d90711a96f5ce2e7d6f5ebcf3922cd0fedd69bd', 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: '171b5165f3663fa5f0fa28ef84145dfc998e9f10', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, hAsync("div", { key: 'dcf753f23cec073a036d8137f1299dcf4ca4af78', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: '3dc85def21aace19f3d211262b6cf66ccb9438fa', 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, "item-title"],
+            "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", "item-title"], ["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 useFade = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = index(node);
-    /**
-     * Will animate the opacity to 1, and removes the opacity style attribute once
-     * complete.
-     */
-    function fadeIn() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: 0 },
-                to: { opacity: 1 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                    node.style.removeProperty('opacity');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the fadeOut styles without animating, useful when initial state
-     * is hidden.
-     */
-    function setFadeOut() {
-        node.style.opacity = '0';
-    }
-    /**
-     * Applies the fadeIn styles without animating, useful when initial state
-     * is visible.
-     */
-    function setFadeIn() {
-        node.style.opacity = '1';
-    }
-    /**
-     * Will animate the opacity to 0, once complete, the opacity style attribute
-     * will stay on the element.
-     */
-    function fadeOut() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: 1 },
-                to: { opacity: 0 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        fadeIn,
-        fadeOut,
-        setFadeOut,
-        setFadeIn,
-    };
+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 useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
-    const nodeStyler = index(node);
-    /**
-     * Will animate the scale and optionally the opacity to make the element grow and fade in,
-     * and removes the scale and opacity style attributes once complete.
-     */
-    function growIn() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: hasFade ? 0 : 1, scale: amount },
-                to: { opacity: 1, scale: 1 },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                    if (hasFade) {
-                        node.style.removeProperty('opacity');
-                    }
-                    node.style.removeProperty('transform');
-                },
-            });
-        });
-    }
-    /**
-     * 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,
-    };
+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;
 
@@ -5191,7 +5562,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 {
@@ -5275,7 +5646,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 {
@@ -5431,12 +5802,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 {
@@ -5499,7 +5870,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; }
@@ -5529,7 +5900,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 {
@@ -5693,7 +6064,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); }
@@ -5958,26 +6329,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();
@@ -6139,9 +6490,13 @@ const CalendarGrid = props => {
     return (hAsync("div", { class: "days-container" },
         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 => {
+            if (day.isBlank) {
+                return hAsync("div", { class: "day day-blank" });
+            }
             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);
@@ -6152,7 +6507,7 @@ const CalendarGrid = props => {
         }))));
 };
 
-const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
+const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.day-blank{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 var NvCalendarStyle0 = nvCalendarCss;
 
 /**
@@ -6214,6 +6569,8 @@ class NvCalendar {
         this.showActions = false;
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
+        /** Flag to indicate a user click for selection */
+        this.isUserClick = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -6249,7 +6606,7 @@ class NvCalendar {
                     }
                     // Navigate to the date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = parsedDate;
                     }
                 }
@@ -6277,7 +6634,7 @@ class NvCalendar {
                     }
                     // Navigate to start date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = startDate;
                     }
                 }
@@ -6298,20 +6655,14 @@ class NvCalendar {
          */
         this.changeMonth = (offset) => {
             const newDate = new Date(this.currentDate);
-            // Ensure we only move by one month at a time
+            newDate.setUTCDate(1); // Set to the first of the month to avoid day-of-month issues
             newDate.setUTCMonth(newDate.getUTCMonth() + offset);
-            // Add the appropriate animation class
             const containers = this.el.querySelectorAll('.calendar-grid');
             containers.forEach(container => {
-                // Remove existing animation classes
                 container.classList.remove('slide-left', 'slide-right');
-                // Add the new animation class
                 const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
                 container.classList.add(animationClass);
-                // Remove the class after the animation
-                setTimeout(() => {
-                    container.classList.remove(animationClass);
-                }, 300); // 300ms corresponds to $slide-duration in the SCSS
+                setTimeout(() => container.classList.remove(animationClass), 300);
             });
             this.currentDate = newDate;
         };
@@ -6323,12 +6674,16 @@ class NvCalendar {
             if (this.isDateDisabled(date)) {
                 return;
             }
+            this.isUserClick = true;
             if (this.selectionType === 'single') {
                 this.handleSingleSelection(date);
             }
             else {
                 this.handleRangeSelection(date);
             }
+            requestAnimationFrame(() => {
+                this.isUserClick = false;
+            });
         };
         /**
          * Handles single date selection
@@ -6471,12 +6826,15 @@ class NvCalendar {
         /**
          * Generates the days of the current month
          * @param {number} offset - Month offset (0 by default)
-         * @param {number} totalCalendars - Number of calendars to display (1 by default)
          * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
          */
-        this.getDaysInMonth = (offset = 0, totalCalendars = 1) => {
-            const year = this.currentDate.getUTCFullYear();
-            const month = this.currentDate.getUTCMonth() + offset;
+        this.getDaysInMonth = (offset = 0) => {
+            const baseMonth = this.currentDate.getUTCMonth();
+            // Correctly calculate the year and month for the given offset
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(baseMonth + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
             const firstDay = new Date(Date.UTC(year, month, 1));
             const lastDay = new Date(Date.UTC(year, month + 1, 0));
             const days = [];
@@ -6485,18 +6843,18 @@ 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),
-                    });
-                }
+            // Add padding days from the previous month
+            for (let i = 0; i < offsetDays; i++) {
+                const prevMonthDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                const date = new Date(Date.UTC(year, month - 1, prevMonthDay - offsetDays + 1 + i));
+                days.push({
+                    dayOfMonth: date.getUTCDate(),
+                    date,
+                    isCurrentMonth: false,
+                    isDisabled: this.isDateDisabled(date),
+                    // Days from previous month are blank if not the first calendar
+                    isBlank: offset > 0,
+                });
             }
             // Add the days of the current month
             for (let i = 1; i <= lastDay.getUTCDate(); i++) {
@@ -6506,11 +6864,12 @@ class NvCalendar {
                     date,
                     isCurrentMonth: true,
                     isDisabled: this.isDateDisabled(date),
+                    isBlank: false,
                 });
             }
-            // Add the days of the next month only for the last calendar
-            if (offset === totalCalendars - 1) {
-                const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+            // Add padding days to fill the last week
+            const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+            if (nextMonthDaysNeeded < 7) {
                 for (let i = 1; i <= nextMonthDaysNeeded; i++) {
                     const date = new Date(Date.UTC(year, month + 1, i));
                     days.push({
@@ -6518,6 +6877,8 @@ class NvCalendar {
                         date,
                         isCurrentMonth: false,
                         isDisabled: this.isDateDisabled(date),
+                        // Days from next month are blank if not the last calendar
+                        isBlank: offset < this.numberOfCalendars - 1,
                     });
                 }
             }
@@ -6555,12 +6916,25 @@ class NvCalendar {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const currentMonth = this.currentDate.getUTCMonth();
-            // Calculate the difference considering the calendar offset
-            const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
             const newDate = new Date(this.currentDate);
-            newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
-            this.currentDate = newDate;
+            // Date for the calendar being changed
+            const targetCalendarDate = new Date(newDate.toUTCString());
+            targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
+            const currentMonth = targetCalendarDate.getUTCMonth();
+            let monthDiff = selectedMonth - currentMonth;
+            // Smartly adjust for year change
+            if (monthDiff > 6) {
+                // e.g. from Jan to Dec, go back 1 month
+                monthDiff -= 12;
+            }
+            if (monthDiff < -6) {
+                // e.g. from Dec to Jan, go forward 1 month
+                monthDiff += 12;
+            }
+            // Apply the diff to the original `currentDate`
+            const finalDate = new Date(this.currentDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            this.currentDate = finalDate;
         };
         /**
          * Handles year change in the numeric entry
@@ -6572,9 +6946,10 @@ class NvCalendar {
             const year = parseInt(input.value, 10);
             if (!isNaN(year) && year >= 1900 && year <= 2100) {
                 const newDate = new Date(this.currentDate);
-                newDate.setUTCFullYear(year);
                 newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
-                this.currentDate = newDate;
+                newDate.setUTCFullYear(year);
+                newDate.setUTCMonth(newDate.getUTCMonth() - calendarOffset);
+                this.currentDate = new Date(newDate);
             }
         };
         /**
@@ -6585,7 +6960,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)
@@ -6798,12 +7173,17 @@ 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));
             }
-            return (hAsync("div", { class: "calendar-wrapper" }, hAsync("div", { class: "calendar-container", key: `calendar-${index}` }, this.renderHeader(offset, index), hAsync("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), hAsync(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (hAsync("div", { class: "calendar-separator" }))));
+            // Add year and month to the key to force re-render on date change
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(targetDate.getUTCMonth() + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
+            return (hAsync("div", { class: "calendar-wrapper" }, hAsync("div", { class: "calendar-container", key: `calendar-${index}-${year}-${month}` }, this.renderHeader(offset, index), hAsync("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), hAsync(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (hAsync("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -6853,7 +7233,7 @@ class NvCalendar {
                 this.endDate = endDate;
                 // Do not navigate to the start date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = startDate;
                 }
             }
@@ -6881,7 +7261,7 @@ class NvCalendar {
                 this.selectedDate = parsedDate;
                 // Do not navigate to the selected date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = parsedDate;
                 }
             }
@@ -6995,6 +7375,27 @@ class NvCalendar {
             throw error; // Re-throw to let the caller handle it
         }
     }
+    /**
+     * Clears the current selection and resets the calendar to its initial state.
+     * This method can be called programmatically to reset the calendar.
+     */
+    async clear() {
+        if (this.selectionType === 'single') {
+            this.selectedDate = null;
+            this.singleValue = '';
+            this.value = '';
+            this.singleDateChange.emit('');
+            this.valueChanged.emit('');
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.rangeValue = { start: '', end: '' };
+            this.value = '';
+            this.rangeDateChange.emit({ start: '', end: '' });
+            this.valueChanged.emit('');
+        }
+    }
     /**
      * Renders the datepicker
      * @returns {JSX.Element} Datepicker
@@ -7002,8 +7403,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: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, hAsync("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, hAsync("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '3481fe780a3e1d8f0c1e22ffc82c3b7830721055', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (hAsync("div", { key: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7037,7 +7438,8 @@ class NvCalendar {
             "selectedDate": [32],
             "startDate": [32],
             "endDate": [32],
-            "months": [32]
+            "months": [32],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7073,7 +7475,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 {
@@ -11574,7 +11976,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);
             }))))
@@ -11585,7 +11987,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 {
@@ -11650,7 +12052,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,
@@ -12282,7 +12684,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;
 
 /**
@@ -12317,6 +12719,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.
          */
@@ -12424,15 +12831,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) {
@@ -12509,8 +12924,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();
@@ -12529,7 +12944,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 {
@@ -12548,12 +12963,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"]]
     }; }
 }
 
@@ -12645,7 +13061,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); }
@@ -12701,7 +13117,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; }
@@ -12722,6 +13138,8 @@ const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:v
 var NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
 
 /**
+ * @slot default - Next to the label and description.
+ * @slot main - Replaces the label and description.
  * @slot label - Content to be placed as the label, will override the label prop.
  * @slot description - Content to be placed as the description, will override the description prop.
  * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
@@ -12838,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: '46e0688340e1cda23f1fdbefb349fbaa8bb188f2', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '5769e3e61f69b7a9821864aab6338b13b46db4cc', class: "input-container" }, hAsync("input", { key: '0acc841c8583ca1d0781135b95a038703b3be516', 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: 'a2bdc7fa16b4cb5e266c1666746f88b462ef6bbc', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'aa00b58bb2fb2132b4b355568bbecafbf14d9536', name: "checked-icon" }, hAsync("svg", { key: '3d7e92b03fc0ebc0676a5f5a011e0a5f16bb06d9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '28170c912acd9442af03c889afc10d348657a84b', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '790eca10b1eea865ecde7be45c00ae3bbf65132b', name: "indeterminate-icon" }, hAsync("svg", { key: 'a00b2e00c2e2038dd1d67c43aef4f30e5d7a27e7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '6e7eb5f117a0244594392a52f932a91056093168', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("slot", { key: '4c11bb2b8078adc0d7d5f3c52c2525bc836ad075' }), hAsync("div", { key: '323cab79ca6e047df5482d75490ba7288eef5e27', class: "text-container" }, hAsync("slot", { key: '5bc6845d98ee06117b97588e71467ce106e1ab60', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ce639cb27b8ea446f2a0d73a36c3c9541bde9ab8', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'cd4b650b2f1b064b65211e90fdddff15b0d6f1f4', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7de730e025d5eeae626bbe64125479dc9ebb4332', class: "description" }, hAsync("slot", { key: '2c2f6343838ffff29e1e920ae927d89e9a63f02e', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b49fd559c3bf84e814da0093f9af64e62510725d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'b15a968201d8ef5ea5e764beac553cf8ca0b87d3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -16637,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.
@@ -16764,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')) {
@@ -16794,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.
@@ -16812,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.
@@ -16834,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
     /****************************************************************************/
@@ -16844,20 +17333,39 @@ 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';
+    }
+    /**
+     * Clears the current selection and resets the field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.singleValue = '';
+        this.value = '';
+        // Reset the input element value
+        if (this.inputElement) {
+            this.inputElement.value = '';
+            // Remove the input mask and reinitialize if needed
+            if (this.inputElement.inputmask) {
+                this.inputElement.inputmask.remove();
+            }
         }
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        // Close the popover if open
+        this.open = false;
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -16869,19 +17377,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.
@@ -16926,12 +17432,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: '45af13d8290479c8ec171c0702d9d695c5047610' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd30403c879f8ca0449d8d25d22bb401ece876758', htmlFor: this.inputId }, hAsync("slot", { key: 'aec155a914cff6b7ea8170dbd1f0d9ee4f35172e', name: "label" }, this.label))), hAsync("nv-popover", { key: '522969535f2b8340f1a9b425c4ea6291fc65cb7e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'eb1d5ab314fe654b3642afb22d9e3fbc340de969', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '6c28354e914075c36db9bee659d140669a745cab', name: "before-input" }), hAsync("div", { key: '68d3aa4a8afcec4042a8930678cea7046f3e31d7', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'ed7ada6913a6735af622369236b5f521f2e96aad', name: "leading-input" }), hAsync("input", { key: '49607b25253233665544e8e85db3814734280fe0', 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: '35d06926d78f7c653fbf0424b59802fb4489004a', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '17ca631dca201fb412c921619223c1abc8777d2b', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'e08d735115cde3d22a657b986f4a7a5a0347d1af', 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: '75cf593c7b9f2078f055522d6e43440dbe0cc522', name: "after-input" })), hAsync("div", { key: '0df8cd2360a17f5cc786e6b29c67ded308c18104', slot: "content" }, hAsync("nv-calendar", { key: '045a02370ef9dfe31ae3d0b2f702fafb25c7da8f', 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: 'ecedbfe16857d9976349f3f3875be13f9ffc4b53', class: "description" }, hAsync("slot", { key: 'e848d9e03e169c9ac57ce2fb7cdb00466f658c61', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '028b4d496ba3ee5eefa0107da8a62c771709a3ed', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'd3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16968,7 +17474,9 @@ class NvFielddate {
             "disabledDates": [16],
             "fluid": [516],
             "singleValue": [32],
-            "open": [32]
+            "currentPlaceholder": [32],
+            "open": [32],
+            "clear": [64]
         },
         "$listeners$": [[0, "singleDateChange", "handleSingleDateChange"], [0, "closePopover", "handleClosePopover"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
@@ -17237,6 +17745,34 @@ class NvFielddaterange {
      */
     updateCalendarValue() {
     }
+    /**
+     * Clears the current selection and resets the date range field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.startValue = '';
+        this.endValue = '';
+        this.value = '';
+        // Reset both input elements
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            input.value = '';
+            // Remove input mask if exists
+            if (input.inputmask) {
+                input.inputmask.remove();
+            }
+        });
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        this.dateRangeChange.emit({ start: '', end: '' });
+        // Close the popover if open
+        this.open = false;
+        // Clear the calendar if it exists
+        if (this.calendarElement) {
+            this.calendarElement.clear();
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -17425,10 +17961,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: 'e2d5ce2c864dbc8ba478a1ce1353aa8e51e13ec1' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6e171200b763f8e7a907d305475bb7d4faa27979', htmlFor: this.startInputId }, hAsync("slot", { key: '9f8b94e7491d4cd73e17f41ba290acda1fe73f3b', name: "label" }, this.label))), hAsync("nv-popover", { key: '9bf5539eeceadb960c3438ddc05fe986f800d33b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '58f7625d27c2266429ddc4f653d61efefed5bc66', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '206064a5c1be74082202849b96e46a8207377098', name: "before-input" }), hAsync("div", { key: 'bd66fb676a5a749e17ede3f75c8a4404586c0c63', class: "input-container" }, hAsync("slot", { key: '7c78a037f5189143ea32ca843e1c27b52d8f2d4b', name: "leading-input" }), hAsync("div", { key: 'fbe89bc4502eca56e05029d65a45684484921433', class: "range-inputs" }, hAsync("input", { key: '397e572e87dd7f01977008b44847469cabd06494', 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: '378d2755919eafc9f4edd8ee451c01e49dc70cfe', class: "range-separator" }), hAsync("input", { key: '2de8dcda3161667a543c04ae529a0f617f6598c6', 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: '5880e135764a7f9f87d92a4f7a84eba9f56b7d46', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5d764360d3dbfc306962cb9e4b67d7d3c4bc09ed', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '1b09d57633f8e115cc3d92a82d35399c53be265b', 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: '7ec41f782b0343eeb427bee4d7f2ab1b549978b3', name: "after-input" })), hAsync("div", { key: 'ea714333fe596af8a10c6f8a1e6c72935f8e5c91', slot: "content" }, hAsync("nv-calendar", { key: 'ffaa70c5bc76c422396b233d3dc46fdeb2d06b10', 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: '7f4aa271c896234907d95cfe7660e1c41ab8ddf7', class: "description" }, hAsync("slot", { key: 'fce93594f7af4d054f886ce3caf48cfffb6809aa', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f5a19b5d4c90c4319dc4eb09d1067f202ab229c9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '1d494e4c192b38c26e8cfe5482516382cacc13c6' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17470,7 +18006,8 @@ class NvFielddaterange {
             "fluid": [516],
             "startValue": [32],
             "endValue": [32],
-            "open": [32]
+            "open": [32],
+            "clear": [64]
         },
         "$listeners$": [[0, "rangeDateChange", "handleRangeDateChange"], [0, "valueChanged", "handleCalendarValueChanged"], [0, "closePopover", "handleClosePopover"], [0, "applyDateRange", "handleApplyDateRange"], [0, "singleDateChange", "handleDateReset"], [0, "rangeDateChange", "handleDateReset"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
@@ -17839,9 +18376,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: '39025d9624475fa633e36c3ba44feed7f34f42e1', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '961a78a526a81e7fb0a219f1e46d6126880993db', htmlFor: this.inputId }, hAsync("slot", { key: '9d6b7d6fa1cc80393f0e85819a437e8193bdf672', name: "label" }, this.label))), hAsync("nv-popover", { key: '564fcf5fa2f263874b737fdf1bcc5a9aa9bc21d3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '415ed0ee145ce9253380baed4a026afa018c59b7', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'ddbece3ddfa0bcd16a8587c4ee693f8c44b69356', name: "before-input" }), hAsync("div", { key: '546fbc02d2051f47aea2a369ae479658c3c1d8dc', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '95bb574eeb43285f73fd731581d1426095f7538a', 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: '669c6b2e93a85789e747e3f384dfd7b940cda9a7', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '65f91d73115249ded5344e78f18ed7c37f8265b9', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '05644dcc1dfdbb0aa625b49484fab299b5b58894', "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: 'd84d1936300877825adc9c61cc7d9ba773b92194', name: "after-input" })), hAsync("div", { key: 'de5e6bb6f3b40fed39cf90d046e8361dcb2a4d8f', 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: '648b7fb9b7dade22d763f9afc468a4b48115a1a0', class: "description" }, hAsync("slot", { key: 'b560fb630a56c3d42363c1b8f0fa494faefd00d6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bcb614617bb1183f33d20d51304d8ff17d9c7381', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5345cb01032f24b0527bf22d77116a77bb439969', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -17943,7 +18480,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: '486800fafd79ee133a459521e84b06c538f5585e', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: 'fd9c5c5aad8c585735ddbcaf0cb98ab26d89ec69' }), !this.composed && (hAsync("div", { key: '145a6e02b2338f47235c3616a1af63bf5b0ea465', class: "text-wrapper" }, hAsync("span", { key: 'bc013eaf7fe0d56c1d609c3fce846f25ef2cfbb3', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: 'f7f6a4b2b27753d54eb92a77364329a29a3d6f08', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -17965,6 +18502,12 @@ class NvFielddropdownitem {
 const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
 var NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
 
+/**
+ * @slot default - Next to the label and description.
+ * @slot main - Replaces the label and description.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ */
 class NvFielddropdownitemcheck {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18008,12 +18551,12 @@ 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: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', 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 }, hAsync("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), hAsync("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), hAsync("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), hAsync("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 4,
         "$tagName$": "nv-fielddropdownitemcheck",
         "$members$": {
             "checked": [1540],
@@ -18045,7 +18588,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
         /**
@@ -18062,6 +18605,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.
          */
@@ -18115,17 +18663,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.
          */
@@ -18135,8 +18679,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 => {
@@ -18152,8 +18696,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 => {
@@ -18171,12 +18715,19 @@ 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();
             }
         };
+        /**
+         * Clear the filter text
+         */
+        this.clearFilterText = () => {
+            this.filterText = '';
+            this.filterTextChanged.emit('');
+            this.resetFilter();
+        };
         /**
          * Handle input blur for options mode.
          */
@@ -18185,10 +18736,9 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.filterText = '';
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -18246,15 +18796,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);
         };
@@ -18268,15 +18817,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);
         };
@@ -18306,10 +18854,9 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.filterText = '';
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -18340,14 +18887,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" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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
@@ -18356,7 +18903,7 @@ class NvFieldmultiselect {
     handleOptionsChange(newValue) {
         if (!newValue)
             return;
-        this.selectedValues = newValue
+        this.value = newValue
             .filter(option => option.checked)
             .map(option => option.value);
         this.reorderOptionsContent();
@@ -18365,8 +18912,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
     /****************************************************************************/
@@ -18406,22 +18955,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 {
@@ -18460,12 +19010,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();
@@ -18476,13 +19024,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();
         }
     }
@@ -18493,6 +19036,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.
@@ -18510,38 +19055,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.
      */
@@ -18558,8 +19071,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);
             }
@@ -18570,7 +19083,7 @@ class NvFieldmultiselect {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        return this.selectedValues;
+        return this.value;
     }
     /**
      * Reorder the content of the slot.
@@ -18592,8 +19105,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
@@ -18619,8 +19132,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));
@@ -18656,8 +19169,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;
         }
@@ -18678,8 +19191,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 {
@@ -18737,8 +19250,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) {
@@ -18786,8 +19299,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');
@@ -18984,6 +19497,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
@@ -19019,7 +19555,7 @@ class NvFieldmultiselect {
             "description": [513],
             "placeholder": [513],
             "autocomplete": [513],
-            "value": [1537],
+            "value": [1040],
             "required": [516],
             "readonly": [516],
             "disabled": [516],
@@ -19034,8 +19570,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],
@@ -19044,7 +19579,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"]]
     }; }
 }
 
@@ -19168,9 +19703,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: '0fcd74073e1c3f2c8de00c21e1ff782d4ed2fbe8' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c4dc1dc4efd2150fb897f0602b07ab22643756e6', htmlFor: this.inputId }, hAsync("slot", { key: 'a0aa360dd532e11fd0273c8ba8d5ded3adc45642', name: "label" }, this.label))), hAsync("div", { key: 'c2ffeb70a8e5ffe43ec5061e035add48fd0f09a2', class: "input-wrapper" }, hAsync("slot", { key: '62ef15b0961ae4af93940d3d2dd10fdb6a636d4d', name: "before-input" }), hAsync("div", { key: '07be430ad207b6023ee969b7ad290d4946f4b6fe', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '69978ac5971a25cc8c0515250d741ac8a658c3bd', name: "leading-input" }), hAsync("input", { key: '284f8da710438e470a26541b7cf72f89730ef3ab', 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: 'd028cd632cff77f592429e97a81a1d45aeec621d', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '7de629b71971559c647ba4ad4885815124bb63b3', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '135e609c2e568174db3503633f389c70a2fceaba', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '17a952157f55ff65911d852a4274de5db4241508', class: "stepper" }, hAsync("nv-iconbutton", { key: '33d0412ea6ed883d92b64363b404628d610e2339', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '68bf536a5fe5bb0b3c2c3bd5508324c050cb8764', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: '3922a559b4ca954bee9caea379c940e7b132f65f', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8844bf48e0251717549d4e0079370fe2f590c616', class: "description" }, hAsync("slot", { key: 'f35c77ffa2f01a66d72ef75a65c5c634b14bbdbc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ce407c77dd30a235c7691727480c911ad6128392', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7ffb85e03e5a9a949f022398537c74a812b8a12f', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19318,9 +19853,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: 'b8d142f5a35087f977437af4d2094783e455d9a0' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f26d2c14ee03d1ef80fe263a1849c0da03a39a8c', htmlFor: this.inputId }, hAsync("slot", { key: '13dfa9e681e1b5a7244e7debc7d1c1af36bedd37', name: "label" }, this.label))), hAsync("div", { key: '5a01c9cc4573543e0d6633f9b8fadfa1ad6b066a', class: "input-wrapper" }, hAsync("slot", { key: '2ff066ad5da2d3fe0885ccc1a0c97f9817ff4bbe', name: "before-input" }), hAsync("div", { key: '429535a2b55ea4af5374067948f5be1d16898694', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '00d8fa3cd0e8af41f1b9c46cefc256a29187db9d', name: "leading-input" }), hAsync("input", { key: '7aa5db4e17d62e3a9c10e8b5e2dabe224033b2da', 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: '0c919def4c580387d87a2f500a663f4dba5874cb', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '2b020de565c3311431c83c68a773731055c1c6c5', 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: '938de4d9c513e3aef3de1e9a108e69558843b466', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6150e4be7c79bf10a1a2db3b14334c4fd9d2396c', class: "description" }, hAsync("slot", { key: 'de557936e4ed9e0798cbbb95f832fa6a831d63a9', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '74e43aa5f463f8156d44d261d5641c0aafccc5fc', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4956c95a870964a712524fb30d26e9fd500edef8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19448,9 +19983,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: '5721fd4ffd6d8b1392e65d0b8eaea4dea241be63', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'c54d8952edb57e34016a85ba2b6b9c7fc2a20a37', 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: 'e80c6c12fbf461776822185109e05aea5a6c954b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0f89b274c7ee7ea7d2e3116a004575176d044b5b', htmlFor: this.inputId }, hAsync("slot", { key: '04b04fbc8ad5a199def48e728c74f13e7230414d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e5c5048c50d0089393a29f12eb09f0ae26aedcfc', class: "description" }, hAsync("slot", { key: '6902044f273d508a79a66a3f185fc4a9ac48e94f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8d388b64deccd2f398485dfa0b83d70b8c50ae47', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'c5237272b97c754d2745eb62a85519f2c14dfb27', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19834,13 +20369,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: 'ff869c177289342a39ae292a530359af940a5669' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '10815f70059de9b1774ccc26b69d441d250e1833', htmlFor: this.inputId }, hAsync("slot", { key: 'afe78cd3671151060fd1e2a37b77c164767908fa', name: "label" }, this.label))), hAsync("div", { key: '064d8f512bc5f11831096d3a092afb00dcfeb1bc', class: "select-wrapper" }, hAsync("slot", { key: 'c12d375bc5a558d25f1eb34343e2ad5fce784558', name: "before-input" }), hAsync("div", { key: 'ffb39cfc0444edc49a4e2b6318990085009d7598', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'd5fccac0e92fe0553b8478a6f5dc9be4591e8c23', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '94dc05d08de8120c78fa140df5eb3adc09ce97da', 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: '85ffba58429aaa393cc9178e0866a61f85d92103', 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: '694b0306ddaf671faea9dd863bb7f2917b567ffb', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '4f86b0916dcbfefb24af5e5e2c0ca009ece6193b', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'f99ba37d4a70b7c352b4abb0be0b5eb85b4cc947', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'b152a3b110b0f780b29adcf1efb4aadf98cf81be', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '63c6076165bae5d36732179c4a761d5b381076b5', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dd3e41b62290c580e050eb5a4742aabc7395cbda', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '87bedab511a8b3d07d6616e4937342b6d272c5f3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd4cf69f5f2446fbbf8ed36910d89c3aa7ac2c826', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '2fc8b58658bd406af834dcad378b3b00aca40b22', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19886,6 +20421,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
@@ -19918,7 +20465,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);
 }
 /**
@@ -19959,6 +20525,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.
@@ -19966,7 +20545,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) {
@@ -19976,7 +20555,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))));
 };
 
@@ -19986,7 +20565,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;
@@ -20010,12 +20589,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))),
     ];
 };
@@ -20524,11 +21103,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: '688357b41179bb99a662b8ea22f2beb7454b0d8c' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '7628e9ac0f304aa792f7c68f3e0b9b96d84583e0', htmlFor: this.startInputId }, hAsync("slot", { key: 'd876dc0602df8badadcfdf435d68356d382c8b25', name: "label" }, this.label))), hAsync("div", { key: '4aedd7863c3d06e4ad7dec800b14f858568bcb79', 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: '74d455d904614092ed51daf34f73425571b7ca24', class: "track-container" }, hAsync("div", { key: 'a53a1e0f1770006fece64a87ca03a511d0e4dd9d', 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: 'aafdd02a87071f214d8710d6a0678ee01668609d', 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: '10eb3eb2f7a903af08419df8476c11e27e9e575e', class: "description" }, this.success && (hAsync("nv-icon", { key: 'ee312f8f0563e6dc920e9cbf886784df8c57e719', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '4ee31b6914ebae20404acd582c27b38b5ad64700', 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: 'e37e44dea94b691cbac98d16fb74c5c5cb280c5e', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: 'c1b403a4848fdcf0e9f51f37ec7454224562ed5c', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '87db18643f9473ae30e936fc1a316de95f06c107', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20703,9 +21282,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: '35382ab52aa48116fbedc7683aff4729f06f5969' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6f849db1b7603fc4de4fb23075fd7daa72438dd2', htmlFor: this.inputId }, hAsync("slot", { key: '24bc67fe3a8de24a8601a2cf3c5afd2532e17c4a', name: "label" }, this.label))), hAsync("div", { key: '8ffd2d0f048082c71a76054842fffd22452b9ad2', class: "input-wrapper" }, hAsync("slot", { key: '478020c16e29399dcc6566651f88acc8d88ef36d', name: "before-input" }), hAsync("div", { key: '1aa0bac3947bdff209268619202ccc38da691761', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '369b5f0a4c4d1d16217ad5de9221273ece41e1f0', name: "leading-input" }), hAsync("input", { key: '91446fe15f48f45693f56b3fd21926b8114c1dca', 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: '505a9ed004c4492f8daaef9a92bcaf344e2a10fb', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'c1e9ecd4f901862391daa6c9f5c75d3c1b81810f', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '15a452bdbbb386a51e4fe51370bd09521cc6f47f', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '7e7e3969dd6f3d1b80eab00ac966f7ba9f13895c', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'b4ca95846a8fdf68e95d602968506bf009f9334f', class: "description" }, hAsync("slot", { key: 'fce329e819b837318b2d9bf9e16a8ef886aa940a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c3800ac457b5f0f87a3bdf9e9e37a36f5905786c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'f77d02598ba261bf2b48b16ecfa3fc15fe221599', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20925,9 +21504,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: '2b054e4460ac1532cb2006feaa3930abc8e21505' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5058a7c4a77a37336bcc58fd6b727f1f9564d7b2', htmlFor: this.inputId }, hAsync("slot", { key: '0c5abb11d0c2377b702ae1614134e28e53a6e1e2', name: "label" }, this.label))), hAsync("div", { key: 'e6d9981eaab913b3cf04fd99e0fbd07830fbebff', class: "textarea-wrapper" }, hAsync("div", { key: '23392da0e927d2eb5720fa98499afd2fcb33d840', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '9b9521f4e033002ea346e3054118a114349dd7ee', 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: '27411a39625e1f03bbe23ae52ceadb04ab0afd4e', class: "description" }, hAsync("slot", { key: '56a5e1a95376899525911e096ded708a4987711d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2336848d28c0d67c95607da5bcab3348c4c15e0a', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'a200628a9ed75402395e415eab743afddf0a5d27', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20983,7 +21562,7 @@ function startsWithIgnoreCase(str, prefix) {
     return str.toLowerCase().startsWith(prefix.toLowerCase());
 }
 
-const nvFieldtimeCss = "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-fieldtime{--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-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime 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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .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;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-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%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-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-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .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-fieldtime .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)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;padding-right:2px;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+const nvFieldtimeCss = "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-fieldtime{--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-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime 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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .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;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-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%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-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-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .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-fieldtime .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)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
 var NvFieldtimeStyle0 = nvFieldtimeCss;
 
 /**
@@ -21955,26 +22534,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: 'a8d08a4dac97430398e3f769f353e91ef08de9c0', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e7d4a858f6194f085144fd59894ad54220a17a03', htmlFor: this.inputId }, hAsync("slot", { key: '69901d62cdd32e3d7d1efe14066ef5ab42eed0d5', name: "label" }, this.label))), hAsync("nv-popover", { key: '2541a920b4ce7b98515c58867ab1ab25d9cace9d', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '2f501df272714fd912b0d0981c27db89b46ae424', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '41ee670692e5facaa0ddd065a2a79a66825d207b', name: "before-input" }), hAsync("div", { key: '24e41277073946b78ae4d1f8f38173045e699845', class: "input-container" }, hAsync("slot", { key: '6db3ce5df588697b9183225be3b603a3b51a156f', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: 'ee093f322342ac3572ad76c48ebc2ecbed63ac01', 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: '9cec44d707277c298ba7a70934e1593a12207799' }, ":"),
+            hAsync("input", { key: '2acaf3b143f0f5e9e04005213bdfe9ea5334bf53', 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: '07e0b374bdcad92339c4ddc10d71cc963a8a71ff' }, ":"),
+            hAsync("input", { key: '84838544717af0bc967258d91fbee2748072be4f', 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: 'ec8d0d5c7eb9aa720deef07f23c712287246f3a8', name: 'clock', 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: 'dbef458469153ef93ad94903a2bcf439f6243d40', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '3dfb5e5b32dc91ebe53502f9117f628ae79bf57c', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '744e72f9c7828f8487f58265dac564670ba26329', name: "after-input" })), hAsync("div", { key: '72dc9823125b9109bc27e049936007e796a97a06', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '1b1f8241a25500cf9ce22ebea20becd6882760cc', 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: '57985d7f2626853a24db80d56607b5453b00b6c9', class: "description" }, hAsync("slot", { key: 'ba3383c066c6bcac3b1e6183b84528723de9cddc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6f02373e082fcc7e34e0d35441783122cd7c0266', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '43508d63829f53f5b5c718f1a112abbe5919b900', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22079,7 +22658,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: '8cb4ada2454c7e9676cd088397eb4416ccab2d82', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '4934c79fa096935be509ff6a641361dac44a4a9f', 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: '54e429910d5f9916f98e4cdef0be5f2f620df51e', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -22223,7 +22802,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: 'a59a26804e97dfbacf40fae6678b3b3ba66440a9', 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: '7cbe3502ff1c6fd76f7a9ab68128f5d5a0bbf7fa', size: this.size }), !this.loading && hAsync("nv-icon", { key: '46cbb9c609991ea27316b8909551d303559652fc', name: this.name, size: this.size }), hAsync("slot", { key: 'd2ca8959b7be7600e56fe23437e5da07d58985c2' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22271,7 +22850,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: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -22482,7 +23061,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: '25e38953e8d6e4c591087f3964822eed76cd3775' }, hAsync("slot", { key: 'f6ad4e16d740129dc296a3e0b2c5dffdd063b182', name: "trigger" }), hAsync("nv-popover", { key: 'c355356a877bb0cedfd69bfaf4e724c06612c1e5', 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; }
@@ -22553,7 +23132,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: '327165c89f4e5decf8dc4b7b28e18562e528056d', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '4247d922bca3797dc3f2917218749a8d3c038df1', name: this.icon }), hAsync("slot", { key: '1f81464ccf47a5bd918873ef70d3d3385e870638' }), this.label && hAsync("span", { key: '113358a0cacfa53710ec0049a8e1c5e981de5b15', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'ee7c773b89bf1f55876cf297600247883cd54937' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '70cbe2df51d9fbffe3b474b54e87aa06801acef7', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -24938,7 +25517,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: '27f6f8acc148b3dc2b16a391c54a4a1de0637a57' }, hAsync("slot", { key: 'd25614b3bfc5565d3729da11f6f83b4d92e83e19', name: "trigger" }), hAsync("div", { key: '3b777862573405b2bb2a377750d9bb859a4bb20b', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'dda88155630bca69ec06a766e2999ed369d5d6c6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '51eaf873fe239d3c4106e997f6cdd37b1bb29074', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24983,7 +25562,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7a41dce9acbfdc42b66a032f1d20437ebf3d79a1' }, hAsync("slot", { key: '570d2bc95ad3ab2502a1e87699cdcb5818743b7b' })));
+        return (hAsync(Host, { key: 'daad5f10b72b95468ac50a3deab7faf87769be42' }, hAsync("slot", { key: '16509b69358739997fe97a45ea9476f30682de2b' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -25018,7 +25597,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: '0a93c321e46c7e17ac0efe09556ee4447fec5f74', 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: 'faf55f3f579311c333e1ea66f1a19ace98594377' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -25355,14 +25934,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: 'a389cee4e6b29cdb852b8b6c0f8fd39926474525' }, hAsync("div", { key: 'ea7629bc0cba0ec1cbe59f6f03ac2527095d9abb', class: "hidden" }, hAsync("slot", { key: 'b070a8e7f54fd3846744bb659447b97547d1c7cf' })), hAsync("slot", { key: 'b0eb0a2d7c98073e88282b1e2e513b9e6a335345', 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: '599e4c1663c3a80375e3c511358be381b06eec2f', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25482,8 +26061,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: '7aac2ef8519d5c033a0e74461755e2286420032a', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'fb0f560aff50b9d3c2b75ba2b59dd68012f5af10', class: "input-container" }, hAsync("input", { key: '61ff98c20dec0822979f04ad3b3316fc3caac31f', 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: '543ad351428f6ae60e94bd31e3a7a6922c02e5d4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '42f764c9c4454cf5b8b1fa88c2c43654170a5222', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '125247eeea72b68de829f36ad817a4381541ad07', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a2fcd0d39a8f555e7d6b64879e84ff7f011e4901', class: "description" }, hAsync("slot", { key: '4e7af6b6a0a25fcb4d9529dcb1a32cb7c928c7de', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -25522,6 +26101,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
@@ -25535,7 +26115,7 @@ class NvTooltip {
          */
         this.enterDelay = 0;
     }
-    //#endregion PROPERTIES
+    //#endregion EVENTS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
@@ -25548,7 +26128,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: 'ced39f0ebd3ee8eba520e6d6241728e95031dafc' }, hAsync("slot", { key: '2b65cb626604a29e1924e7eb2bbb4e937c1a9e9c' }), hAsync("nv-popover", { key: 'd4c91e52da651c1545b6d7af98c740e08eeaffbf', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '45805ecf6ffee80f4f81acce2d921ad66585bf2b', slot: "content" }, this.message), hAsync("slot", { key: 'e6a7e80c35c3a87627a50b271c86783fab791338', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -25568,6 +26148,8 @@ class NvTooltip {
 }
 
 registerComponents([
+  NvAccordion,
+  NvAccordionItem,
   NvAlert,
   NvAvatar,
   NvBadge,