@nova-design-system/nova-webcomponents 3.3.0 → 3.4.0

package/hydrate/index.mjs

@@ -5954,10 +5954,26 @@ function parseDate(dateInput, dateFormat) {
         parsed = dayjs(dateInput, dateFormat, true);
     }
     if (!parsed.isValid()) {
-        console.error(`Parsing error:`, {
-            dateInput,
-            dateFormat: dateFormat,
-        });
+        // 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();
@@ -10550,6 +10566,7 @@ class NvDatagrid {
         registerInstance(this, hostRef);
         this.action = createEvent(this, "action", 7);
         this.selectedRows = createEvent(this, "selectedRows", 7);
+        this.stateChanged = createEvent(this, "stateChanged", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -10561,7 +10578,7 @@ class NvDatagrid {
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -10641,6 +10658,10 @@ class NvDatagrid {
          * Whether to enable row selection for the data grid.
          */
         this.enableRowSelection = false;
+        /**
+         * The overall state
+         */
+        this.state = null;
         this.debouncedFilter = debounce$1((value) => {
             var _a;
             (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
@@ -10918,10 +10939,10 @@ class NvDatagrid {
         if (this.enableSorting) {
             tableOptions.getSortedRowModel = getSortedRowModel();
             tableOptions.enableSorting = this.enableSorting;
-            tableOptions.state.sorting = this.sorting;
+            tableOptions.state.sorting = this.sortingState;
             tableOptions.onSortingChange = updater => {
-                const newSorting = typeof updater === 'function' ? updater(this.sorting) : updater;
-                this.sorting = newSorting; // Will automatically trigger the searchTerm watcher and update the table
+                const newSorting = typeof updater === 'function' ? updater(this.sortingState) : updater;
+                this.sortingState = newSorting; // Will automatically trigger the searchTerm watcher and update the table
             };
         }
         if (this.enableRowSelection) {
@@ -11459,7 +11480,7 @@ class NvDatagrid {
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -11492,6 +11513,33 @@ class NvDatagrid {
             this.table.options.state.rowSelection = newValue;
         }
     }
+    handleStateChange(newValue) {
+        if (newValue) {
+            // Only update internal state if values are different to avoid loops
+            if (this.globalFilterSearchTerm !== newValue.globalFilterSearchTerm) {
+                this.globalFilterSearchTerm = newValue.globalFilterSearchTerm;
+            }
+            if (JSON.stringify(this.paginationState) !==
+                JSON.stringify(newValue.paginationState)) {
+                this.paginationState = newValue.paginationState;
+            }
+            if (JSON.stringify(this.sortingState) !==
+                JSON.stringify(newValue.sortingState)) {
+                this.sortingState = newValue.sortingState;
+            }
+        }
+    }
+    // Add watchers for internal state to emit changes
+    handleInternalStateChange() {
+        // Only emit if the state has actually changed
+        const newState = {
+            globalFilterSearchTerm: this.globalFilterSearchTerm,
+            paginationState: this.paginationState,
+            sortingState: this.sortingState,
+        };
+        // Emit the new state and let the parent component update the prop
+        this.stateChanged.emit(newState);
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -11522,7 +11570,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: '90be657fa9c7f8755391f8d91418399de742ae1f' }, hAsync("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, hAsync("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), hAsync("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, hAsync("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', 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: '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
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (hAsync("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -11533,7 +11581,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: 'e1641d8fd103b0802e1df4f0848f0de921260065', 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: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11541,11 +11589,12 @@ class NvDatagrid {
         "data": ["parseData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"],
-        "sorting": ["handleSorting"],
+        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
+        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
+        "sortingState": ["handleSortingState", "handleInternalStateChange"],
         "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"]
+        "rowSelectionState": ["handleRowSelectionState"],
+        "state": ["handleStateChange"]
     }; }
     static get style() { return NvDatagridStyle0; }
     static get cmpMeta() { return {
@@ -11565,13 +11614,14 @@ class NvDatagrid {
             "pageSizes": [16],
             "enableSorting": [516, "enable-sorting"],
             "enableRowSelection": [516, "enable-row-selection"],
+            "state": [16],
             "table": [32],
             "parsedColumns": [32],
             "parsedData": [32],
             "globalFilterSearchTerm": [32],
             "columnData": [32],
             "paginationState": [32],
-            "sorting": [32],
+            "sortingState": [32],
             "rowSelectionState": [32]
         },
         "$listeners$": undefined,
@@ -17345,18 +17395,41 @@ class NvFielddaterange {
         // Use the unified parsing method instead of JSON.parse
         this.parseUnifiedValue(newValue);
     }
+    onOpenChanged(newValue) {
+        if (this.contentRef) {
+            if (newValue) {
+                this.contentRef.style.transition = 'none';
+                this.contentRef.style.maxHeight = '0px';
+                requestAnimationFrame(() => {
+                    this.contentRef.style.transition =
+                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
+                    this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
+                });
+            }
+            else {
+                this.contentRef.style.transition = 'none';
+                this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
+                requestAnimationFrame(() => {
+                    this.contentRef.style.transition =
+                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
+                    this.contentRef.style.maxHeight = '0px';
+                });
+            }
+        }
+    }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a451ea256b0149d8c49676f764832a2fb0f751e1' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8b5dfcffa03da62b728b121705213a5dbc61dc6c', htmlFor: this.startInputId }, hAsync("slot", { key: 'f55bf5e98ac77ab4781956ed98f2e327f0806df6', name: "label" }, this.label))), hAsync("nv-popover", { key: 'c818788df088dd87bce8e0f3f7dfadf282675981', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '2208b4f6033232fde9c149bd7ec7096a7b5bf36c', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'c32096e78b3b1846e8aac664770310f3e2a658c7', name: "before-input" }), hAsync("div", { key: '478355cdb09432c84c44811f048ff832a58b7c21', class: "input-container" }, hAsync("slot", { key: '4703b43ce78daec5c249cb64e2d5c6ea239e9682', name: "leading-input" }), hAsync("div", { key: '02e39ceb5d680fe73b4e701162b12fdf6d351128', class: "range-inputs" }, hAsync("input", { key: '54548154537b4f9661b2bc07cfa1e8fbdc587788', 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("svg", { key: 'b32d842470237bdb1d846b61ed165d2d1587a491', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: '7281b2de95391d3dc04ffdbfbc5da81a4b3f2fc3', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: '13f2cfe57b9eaadc9317bd489f6abfc472addd0e', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: '646dbf9fe81981c93a4ad70a7cf75d485b573e42', d: "M15 12h6" }), hAsync("path", { key: '753699e6aa5325cd91b27af5ede8d316adaa7727', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: 'aab52481a7846a400bd0274f197b5c29c71fa15c', d: "M3 12h6" })), hAsync("input", { key: '9c441f448382dd4f5c73c94d7ebaff80c6bcec2a', 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: 'f16264bdc82de90a1c8e7b5acf25687ed31a0a49', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '9b1a0f81dc60bbcf68e53bc1c6ff33be515d3689', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '5e898f106896aa5496b9f243c8e4896d007dea65', 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: 'f1ab4a033654907143750a47ab44acf0b5293def', name: "after-input" })), hAsync("div", { key: '55d69c575b8630b08a90334c7b65190d398ebec8', slot: "content" }, hAsync("nv-calendar", { key: 'a3f9d43a961d7a8c38ffc7d7bd8fcbe7e0b544f8', 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: 'b58241fe9c321b2c55aab00235e07627d4aae5a8', class: "description" }, hAsync("slot", { key: '4450872685fbb82838f5bc920fd0fd1b867347c5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '947701fd9a14ef6e564460cd73bafb510883692a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '95dc7827c626e92a74067ffb7759dcca63cc4102' })));
+        return (hAsync(Host, { key: '5f3b1fe7aee232ce13bbff470db257f723aef978' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '663fac675ac0fc443fd7e671d793bdfcb9f52d46', htmlFor: this.startInputId }, hAsync("slot", { key: 'afdd8f49f12d5f3b476dee59b9a38439ff9215c5', name: "label" }, this.label))), hAsync("nv-popover", { key: '1b6cb3b7dcabf572d580594fcf7d695b6d6ee66f', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd363e153e04eb0af7eeefef57dff6973a06f646d', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '5e638ea73f83fb096a9581d3ef8bc11616e19acb', name: "before-input" }), hAsync("div", { key: '6dcde890ca01b12a512f3e42eb7de2acc43562ee', class: "input-container" }, hAsync("slot", { key: 'ce6acc334efc528965d7e957b6c5d3c48a0ee7d4', name: "leading-input" }), hAsync("div", { key: '301b88ba035cc5ebe5ccb7a50a81391dcdf9c212', class: "range-inputs" }, hAsync("input", { key: '385554f08afb6d0f3c276fa446edb7d01d756d5d', 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("svg", { key: 'f8c024bc6e933575dce8cc21213dbe719ffece28', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: '0c942f98b933530f9a98f40d201cd4004781070d', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: '6b719ff53b0f8ded007954d110a26df367de8d76', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: 'dbc9d98a1123f2516e125fe368422059ee9de216', d: "M15 12h6" }), hAsync("path", { key: 'bb450d42a867c08ba586de71750d3142576756fa', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: 'aced7f97e1d65c069a0831fc1fb41de0e5f14216', d: "M3 12h6" })), hAsync("input", { key: 'a6182dd71ba14944918aef3c69c1ac81ecba3892', 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: '4470222fe55588e441d3a41cfbcec0655616f1d6', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5a6565f2c6fb8a4148f87ecbad54da0bb7ae1acc', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '229ef4753a605ac0b7241d92f6157367d86dbd92', 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: '15de0c662d97751a16ea994f2c5678fa5bb333c0', name: "after-input" })), hAsync("div", { key: 'cc165993c4033b5536649001cf2f8989ef9b41ef', slot: "content" }, hAsync("nv-calendar", { key: '0a7c76e9a16504431ea0428278c940b9e97e7117', 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: '2c7164560b8d59abca3759ae3db06bd3820fd897', class: "description" }, hAsync("slot", { key: 'b84ed04584a0e4a4e33682503c588d70e5cc5735', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '09aee3d407a9b126ca85ec82306430b4cb6ce71d', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'aa03e8616062be05d9947fa697016483bdfd9fdc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"]
+        "value": ["handleValueChange"],
+        "open": ["onOpenChanged"]
     }; }
     static get style() { return NvFielddaterangeStyle0; }
     static get cmpMeta() { return {
@@ -18976,6 +19049,7 @@ var NvFieldnumberStyle0 = nvFieldnumberCss;
 
 /**
  * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot trailing-input - Content to be placed after the input text, within the input container.
  * @slot before-input - Content to be placed before the input text, outside the input container.
  * @slot after-input - Content to be placed after the input text, outside the input container.
  * @slot label - Content to be placed as the label, will override the label prop.
@@ -19090,9 +19164,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ff097af3b023ea85fe549331219fd147aaf5d587' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fbb5a460baf515c9f41068126db0dfc80f3aba64', htmlFor: this.inputId }, hAsync("slot", { key: '27963c9e2f61213b1897e117a68a2cb0d56e7d0f', name: "label" }, this.label))), hAsync("div", { key: 'f1f53b27aabd76cfe478ca0de182fd0d181e1c4b', class: "input-wrapper" }, hAsync("slot", { key: 'f5f0fe6e8fbaa63bb961a5216eba0d0a10ca4cf7', name: "before-input" }), hAsync("div", { key: '6d615f206e6b0ed3b228c75601fd7608b1aa4869', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd4cbd09db77e7998020289b44d43be1c37c1197a', name: "leading-input" }), hAsync("input", { key: 'fa8620fa422b1b96a05630da3f5bed20281b8d19', 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 }), this.error && (hAsync("nv-icon", { key: '0787893a02fbebf2bec97f4285d4b396fc1a474d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'd2d244b7a2280c3b7719927d6550a28c75743a48', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: 'ebe05dafe4b7ec67dbe59d5da612f2f5e6951e3f', class: "stepper" }, hAsync("nv-iconbutton", { key: '3112ee0b6f5b3982290cd1ec006653d48d3db626', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: 'e3cdf3ca761ebd647e13f23df44c4e18879b8913', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'c6de7aaff35002e78e5a27d5f37fe06297b3693f', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e2c1ea1eb866593cee0eb4218dba9665cd8a321c', class: "description" }, hAsync("slot", { key: '1fd324333be676116f5d614bb2dc7448ecd7d3a1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'adb8565f5204849caff31758f739d732f2eb5a01', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '0f2ec09a50e98855cc3f2451c75bd6dca4a6baec', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'bc6961e9cfb030f0ded61180836826bc67215432' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '98542b998a5db7572209167ccda6e143797efe02', htmlFor: this.inputId }, hAsync("slot", { key: '59ee59722d9a05bc62307f12db55965b29ec5ac2', name: "label" }, this.label))), hAsync("div", { key: 'dd63f77ae0110620d37d5e7d9e02baafd7384a18', class: "input-wrapper" }, hAsync("slot", { key: '0c73ca84d755675012c82d0e963c619839551965', name: "before-input" }), hAsync("div", { key: 'bcc8edc6ff5d2f57d1237f22de0d6b6d190ff8e3', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '6ae97f06dae32a6bf00bb73eddfe556ad2e92453', name: "leading-input" }), hAsync("input", { key: '1799946e5b38ef77e3241a4ace04e37afdec98a4', 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: 'b0861939aa926e51777caa62bf01ed6a0a39dc50', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '57df54aa50deab4ad077692cc4592561b31e0d42', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'e57297c4fab2826fb50943c47983f73eb3a8f5b0', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '6096c2878876dd4324b112cf3067bfc3cf9d35f2', class: "stepper" }, hAsync("nv-iconbutton", { key: '7e03c767f0f0c44f70435bfed2bae02f409ed23b', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '06a5b8af32c99bab407ce427c4d634fb0209674c', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: '32dc74a736303088b40fff6b8dd53efb9c0e3832', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c0cb59d63dfa4a16820ddf1b3438e287a4e94aaa', class: "description" }, hAsync("slot", { key: 'bcb6d46402b596401ac7f9f01fb6cfb3e4b58feb', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '093f05eadee4cf3802be34b98907596d64febcb6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '93572b4f780e085a2be652a687e561275ebbc428', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19240,9 +19314,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '79c3035769b9053d53d62526b2e0d430d5f944ae' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2341f2b9ae8c5acb8ce48e15caae8a629a1c0333', htmlFor: this.inputId }, hAsync("slot", { key: 'ad2301f92adf58c460d4ca76681330b133db2f33', name: "label" }, this.label))), hAsync("div", { key: 'c12f8401a41c6761686b74e725dd91911eaafbb0', class: "input-wrapper" }, hAsync("slot", { key: 'badd6d65663029bc3252ef0818bb1c6220d01ddf', name: "before-input" }), hAsync("div", { key: '0ffb2332657f893c00fe2ca68f4bbbd622bb31f1', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'afa1daa6fab0f2a46ab46f0c99e4e4cf10d7a1fe', name: "leading-input" }), hAsync("input", { key: 'cc567c4a7fe51a24a99c7a471294d7f6086d8b2d', 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: '7087d6e35b30de786f3ded46fc74dc9987af6afa', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '6fe5e3936ef42c79ed8a5b8a959a22ecbbe52fd6', 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: 'eab04665ad3394860ad30e366eaf18ae4aee445a', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5bc5bd055301bf5fe1b801c2091cd3307c79104f', class: "description" }, hAsync("slot", { key: '133ebfcb219aaa0c5fd64e4442c1125b26c623b4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2a319732006d29becaa602ae16f2d8e885214931', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e6e75fe487745820b1b8d3de1ed52df8aa9652d4', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'fb277f244fb9f92e09cf77463c3a59b1a7a93095' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '84227c9b8844bcb02917e6f942c206758f2378b8', htmlFor: this.inputId }, hAsync("slot", { key: '36331156c6823f96b017a18a4d134b3a0467e289', name: "label" }, this.label))), hAsync("div", { key: 'babca6f3bf893084259917bfec7434a189bc6a88', class: "input-wrapper" }, hAsync("slot", { key: '7ff461c1b36594cde5e2934b3c4aaa3eaafbea20', name: "before-input" }), hAsync("div", { key: 'ac90041750bfdcc23245c42d7e6c52ae855b4bb5', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '0696566301e7fd935c0316b70b41f15cc68b2276', name: "leading-input" }), hAsync("input", { key: '776db054e9b5fb46b592723fa6b0ad073e0cad93', 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: '73d827ca041e3841b5159dd829769def664a5e8b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '7920164504e0834d8e8f0b91a51e4747cbaa0bfb', 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: '4c651f834fe546cd75fc6f24ba37f35f3713c004', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '9db3be325ffe22ddaaaf6052d03b0eb5a8decc9f', class: "description" }, hAsync("slot", { key: 'e262fafe3e0d3f1ffbf059eb80d0b0b2128f0c07', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '28571af4f63bdf4a9d7ff558d0d672546765f188', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9b3635bec4932601c0b265cfef7851ab48bad289', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19370,9 +19444,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '544fc138c91a08a1359ec0d30e89a9bda07eae94', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '479908232ade17970c3310f3fec173a86ccea67d', 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: '624094a1d3819f627bdd6f554ee07200ecd4d03f', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8df4721447e7de7d5c1c51880eb5b5a62041910d', htmlFor: this.inputId }, hAsync("slot", { key: '0e14392a7e6a87804d0975a38b6b011f519457ae', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ad635756eb65ebaa6e939d6e1870d196d3bafe2c', class: "description" }, hAsync("slot", { key: '13f720591e43b8532dfc5367089c17dccd9c4e77', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '597cee5e36cd63c209b60b8a533b4c6de8d5ba0e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '49e1f0deac817a5c49738110862a7b081672510f', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '4533a498fbbf7edc20695ac8411dea11355c2bf9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '0ba25de106a4bb4a3ccf1c5ddf82e60966e59e9f', 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: 'c090a6746068f4ab8a8989d0117ec274320918a8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '804bbd45628e20bcfce8005fd0abd6b8f5ecc677', htmlFor: this.inputId }, hAsync("slot", { key: 'bfe774833365bf51bc1c1be47d960ce04cadaee3', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '99245a0234557bb64887d6f499ffdd4a8b0a03b0', class: "description" }, hAsync("slot", { key: '34bc5919f9bf80fee5a26b4d7dcbf4b2844ef202', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c67be256e429796853146da66aebe0f8ea80a131', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '241a84a4be6028850e42e96305413e8c3298acf3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19756,13 +19830,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: '06d38dd360011d4310d1c63851dc254e8ae47411' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a0e46209c73e704d8d0f630baace2b1ce0eaed9c', htmlFor: this.inputId }, hAsync("slot", { key: '6a43c979383647415044931d7a4e4d3a24f65921', name: "label" }, this.label))), hAsync("div", { key: 'f2cee6021f85e64bd9d73d984e208903e3fda4c7', class: "select-wrapper" }, hAsync("slot", { key: 'cae1c527e55c18f3e54d9c73390d6f17ccebce77', name: "before-input" }), hAsync("div", { key: 'acb5dcbea269eb7dca558942f36b05c552924cbc', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'e5c2a508a1297796f2693c76338c5b5f8e3e149e', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '28c38079050912f7d3b744de66ed48351dd890c3', 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: '3614f589d16ecfe4b7153a57d079b5bde8d14e4f' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd3d222aeece0c0f99141adf9be19b3dfda5095ac', htmlFor: this.inputId }, hAsync("slot", { key: 'd0deb950cdd7784878f2ee7d7e5a382c3aa67620', name: "label" }, this.label))), hAsync("div", { key: '94b1ead9abf988d3a9a944f04c441054e0aeba1f', class: "select-wrapper" }, hAsync("slot", { key: '5e018a64cd9556d67ecc2b9cfb48771f137c10a6', name: "before-input" }), hAsync("div", { key: 'd52813fc9e534463b50da23b8a5a3e5d57aa2c3a', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'dda40c57c5be6d10a20cb11cfa8eaa8398f84d6c', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '37b22a058b25867d7c4c5c7675288f7d4a368263', 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: 'c409a9e0a26797981640092eb67b949c7d8f0cff', 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: '064eec6725beeba26cc5ded5fb21237b55d40cff', 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: 'a2402ea8d832e5612510dce7a3f50148b4edf39f', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'e291bff25fa6f06d3b27c3aaa805b46f674e1614', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'ce98cb12347722926677d9c3fc6f02e35a9c84e4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'e7fe760a5fa84ab0548ebd736a44da04908a4c07', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: 'd6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '010bbb23d2b947ed55c219ac64532f7dfd4f43cc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '70b696ec8f8badd4e064506eeba268755c9f2c09', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '2ec5af60d2fca9a8f5baf59406a4661905aeab05', 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: '02e2e941e3d8efe4a1a5ef3e2cf95adcdaaa25e7', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '481df68e62c2438db29aa3591180353f140d506d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '2b7c05697786bb684f7be9aba49641d0bd4b17e2', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'ee340692540948b768ff8d7ad817879f1fa892c4', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '9d638182d2f9808d6cf454d56c70cb7e45e520ab', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0b5d93842494d99c7eeb5cde17bc266de14ebc79', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '011365d39b5e18fda111f257461bedab1e4ddb5e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '15c238fe1651bab3cfe0088837b8f58beec52e28', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'edd7d6187957e34646cc270dcc1485f73d634e52', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19988,12 +20062,12 @@ const FieldInput = props => {
         ? 'input-container'
         : 'input-container hidden-input';
     return hasField ? (hAsync("div", { class: containerClass },
-        labelBeforeValue && hAsync("span", { class: "label-before" }, labelBeforeValue),
-        hAsync("input", Object.assign({ id: inputId, type: "number", value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput })),
-        labelAfterValue && hAsync("span", { class: "label-after" }, labelAfterValue))) : (hAsync("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
+        hAsync("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput }),
+            labelBeforeValue && (hAsync("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)),
+            labelAfterValue && (hAsync("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (hAsync("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
 
-const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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;width:70px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}";
+const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}";
 var NvFieldsliderStyle0 = nvFieldsliderCss;
 
 /**
@@ -20446,11 +20520,11 @@ class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5625de672648fc737a3c463241621c96e3f5678c' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c9bb829857daf1f38a07ba8d851a126b8e1014d0', htmlFor: this.startInputId }, hAsync("slot", { key: '86daceb63a9467395bd576ee8e2a1fd335dab8a9', name: "label" }, this.label))), hAsync("div", { key: 'a2f9fcfd6f201926d59b1542cfb6aecb9995bfe6', 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: 'c217e21c05160391608196c689a506332cdd2c6a', class: "track-container" }, hAsync("div", { key: 'eff5a66ed65ca210e66138dfcf345843e4947fe9', 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: 'a1168d80e444702014631c51770f81bc66c42c7e', 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: '924819b3d8cc05d7b7448a613b833a3514c4fe46' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '079800a326daa6677bfeadbb335100ad43a6c3a6', htmlFor: this.startInputId }, hAsync("slot", { key: '31c7deab4307cf05951ee3e52e69a57bed2cc4dd', name: "label" }, this.label))), hAsync("div", { key: 'c3f9a721150e9e3e4396509007d17fd5878db9d2', 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: '2156dae3524cbce4390a27f8699bd2f3c5623799', class: "track-container" }, hAsync("div", { key: '7d601c91d58ef7cc8cecdc6b5becf82245ada8f7', 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: '27869c72bdf64db4c7efab71bbfb0dc221bbce1c', 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: 'f92bc3bba0d12897563532d18873ed00cd01107c', class: "description" }, this.success && (hAsync("nv-icon", { key: 'bbe9253cf1a560d1e5e398cece3bdc1dc65c5edc', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '52396d459eca326fd6e0e1587e79c5b1ab0f8e74', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ff43246b18e39fca6401663e17c75774d964b232', class: "description" }, this.success && (hAsync("nv-icon", { key: 'c8d0cf20d5c91e84d9529c594400886e9e5cb89c', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: 'fe5e79473950d01bf73ebd67628d301fe0b48573', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2da1fec9cf6c1c5a2f5c0aa16c18d4b45f0758d9', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '9b97a3cc6d56971b6dda8263316f83ea4e35d257', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: 'f2a96d286c53529ebee99606bee0c43f9ff21b74', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c02f5c9db7270a5442ab75f8532151e4d97801bc', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '56ed10394aca3dc9fdb800f44587cec47e993a8d', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '037fd3db57941a5f02cde3506112059e7f792803', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20625,9 +20699,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, hAsync("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), hAsync("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, hAsync("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), hAsync("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), hAsync("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', 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: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, hAsync("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '376745526ad4350a50ef017acceb43d77414ddaf' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f03087361cb8f347d6fffb1dc234f3d041109229', htmlFor: this.inputId }, hAsync("slot", { key: 'cea3904cf5522359426b47e7d4e8f4a71da6fb00', name: "label" }, this.label))), hAsync("div", { key: '9f766da6a0962d3e865388d732109c81b03a5802', class: "input-wrapper" }, hAsync("slot", { key: 'f9cd30cda301c60f89263eef30c178ccbbf2fa18', name: "before-input" }), hAsync("div", { key: '086b7a59b7883aea0f5a93945d40a642f3b0fef2', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'caa4cf0d9d1e2990c438aea19e6afa29a11163b9', name: "leading-input" }), hAsync("input", { key: '36fda559fb8609c8275fa3f3d14142d0cf4fc2db', 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: 'dd6564d4960fff20e8204dab2cad3ae07ec433ad', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '203a3a51cf3db17b6544b327d692d8805c9577ee', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '13f4d73e72745cbb06cdb3969f94ad5627822743', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '1c9b1388173a7ad98b3ec2ac7663d77588d71c8d', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '71797445f8593485ec2c0030c90eef6649d25f7f', class: "description" }, hAsync("slot", { key: '296dbddd49b791284734254bcd07400532e9e8ce', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a2cf61e30ff98da3b3c4134f0669ef6f63cdc62f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'fd4ba3d94a266ce096ca3f1b016b05040813cc37', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20847,9 +20921,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, hAsync("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), hAsync("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, hAsync("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', 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: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, hAsync("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '1ee58085eaa986a995b26dce3ec149130831bb42' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc8ede45802fa28d9bf616e534f4ca50b8f74f63', htmlFor: this.inputId }, hAsync("slot", { key: '498b99a1e7b82694be943dffc1181c9f0a4c9f5e', name: "label" }, this.label))), hAsync("div", { key: '9a9b90d5398f2ba010384b7b9cb64865329b019c', class: "textarea-wrapper" }, hAsync("div", { key: '4d48453ac04146e6ad25e650995df5e4f550e35e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '2190886c348e78073f5d8f6afc04cf3e91423b16', 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: '55475e861f4b63ae2806141eb148d62864615b97', class: "description" }, hAsync("slot", { key: 'da2d6533d1b86f7ad3cb436650e3691cc155a1dd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '239cc36f8db7855aeedf3c8f428099921142f249', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '97cd804f0c573da6042a6194c263d8580931ca55', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21877,26 +21951,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, hAsync("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), hAsync("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), hAsync("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, hAsync("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', 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: 'c93db13f558128b6923ef9c0a5a96f3a1df15a23', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3049f15468677e1214e627352e6d0c5bfedf2aa8', htmlFor: this.inputId }, hAsync("slot", { key: '00291784c0f7074a9b6e42b9e884c58735fadee9', name: "label" }, this.label))), hAsync("nv-popover", { key: '38d2995f5698c21cc8e10d02e57cf1c617188aed', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd71f02fb8cfd8c7ccd96e17e06ab6e930ae437a8', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'b4fa621c1189efb75d786e87d48eb6e754987358', name: "before-input" }), hAsync("div", { key: '00d7bb6ae8945d946182fbe01faea79c4176b66a', class: "input-container" }, hAsync("slot", { key: '6d5fc613e05a7a353f96fb6f8b30dd606627c742', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: '4a062db12b9b750c6d327fcadff850571e92f674', 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: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
-            hAsync("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', 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: '629882cf244f54684e1997c7dd60d32deb5fad5a' }, ":"),
+            hAsync("input", { key: '14ae0159a0e5d616d8734e12deffb0f392ee315a', 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: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
-            hAsync("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', 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: '4d1fb67d409976c5510773c409441f330f627ea4' }, ":"),
+            hAsync("input", { key: 'ea04cddd6f7534f88bc79f82ddcb4a111bffb492', 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: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', 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: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), hAsync("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '1eaf8a58a077bfd9c3d93f9277aa8db6e16cbc80', 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: 'e3ce880982184b1d31f6a15163361997deca7ac6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '6bcf818a4713e4420d79bf8b0f447ff41dfe5d6f', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '55538603473159890b542b3953b73c43bb8ff262', name: "after-input" })), hAsync("div", { key: '577234c4d732118b059e5a5aa8626677f40ba864', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '25d144cb214a37420182e121078e9f690ee21271', 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: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, hAsync("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '875466380478b23bbc56e661a93392b27fa7af7d', class: "description" }, hAsync("slot", { key: 'ae870e00e1b92f44ea6a3e08b844b9de21060a01', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'aaca1281abe877b9696931d5cc1ab567441f3de9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4e17b0085732e9a47c9637c4ad9b145b5a705e2a', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22001,7 +22075,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '107d58f8858951a11af7bc23be7ae8564ece6b15', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '3e7d4827757d59019b3661a5994d99c5eca995f2', 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: '0bc93cc49237854d5a8ca2bb50c25e7660c2dfa1', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: '26f1c3b326b50a317bfef8f8415fa76c28b08253', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '7a998a855a9526b9e86e0b19f4f03f8e0cdf235d', 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: '9f2681f14c37da95909b8dc6abcac22adf906a11', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -22145,7 +22219,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'eb27cfea5e30fa97e9950d76f3038dc9ff4f4116', 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: '6f24a71b7ecab3168567a76b67f0b226f3afa9c3', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'f4a0eb19d8bc08a0c8dbc8cedca249bf417eeb1b', name: this.name, size: this.size }), hAsync("slot", { key: '2994118659b1ad184a42ea4b20ea754427dae279' })));
+        return (hAsync(Host, { key: '1536dd34c53c9eaf67914fcdf869a0274aa6cf87', 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: '241d18417cd2c4a55c1dcc3fb328edfd8b95a95f', size: this.size }), !this.loading && hAsync("nv-icon", { key: '1cadeaa79ff4992fb88b6703c4e7d6feee37440c', name: this.name, size: this.size }), hAsync("slot", { key: '9d205fbc548c91990fac461f7722f69470b58913' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22193,7 +22267,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '0048566e92b54cf51ef761b8cce814aab1f78707', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '5e3cf72314d0355d5a979cf1c8561312eed50644', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -22404,7 +22478,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: '55cb23963aea78dabf518a9a54308391ed5c5dcb' }, hAsync("slot", { key: 'b7bd9090491a34f3205afb8db8d7ca87864d0c04', name: "trigger" }), hAsync("nv-popover", { key: '8b7e35e0b394827a5bd66858a4f3e81e90dcb597', 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: 'e95adf4b7d951357f550a8084ce957c97134d58f' }, hAsync("slot", { key: 'e2db24c208c716c24c3357c95983c87ee0f11d88', name: "trigger" }), hAsync("nv-popover", { key: '735f6d29c7333293aea263eea751b021fbfd0943', 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; }
@@ -22475,7 +22549,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b1eeb8aaaab3daf8e247d2ca60ca4ea91828dc25', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '48a9145eec4d5fd701fa975000bf29e4f8e7b018', name: this.icon }), hAsync("slot", { key: 'a3212c6b899ce3dd2f538d8ea2163355ced9a57e' }), this.label && hAsync("span", { key: '9b64bfabd9c2d2e25702e1e06f53dd76a1405a0e', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'adca0ce4f6c9c53f965d0d71b7f0a9d7675091b4' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '5d55fc8fe1b1fc32fef9ee38b8dd53d7617ed0e0', name: "chevron-right" })));
+        return (hAsync(Host, { key: '12438da400f424a313c213b0950fcca96fd42442', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '83a86971ac01576cfbfbe3d07e39e0c54f813bde', name: this.icon }), hAsync("slot", { key: '0b6fc3c1e0eaa6dedee1aa5c99fc39ee4899e400' }), this.label && hAsync("span", { key: 'fb85b1ace8d7cd479c9f78d48950110fd592788d', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'fd42e2eb808d318a9f5e7aaa18da7f4e85293ec3' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '51a5accbc105843b9e7a40209bd9139c16eec4b0', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -24602,7 +24676,7 @@ class NvPopover {
         /**
          * Sets how many pixels the popover should stay from the edge of the viewport.
          */
-        this.shiftPadding = 16;
+        this.shiftPadding = 0;
         /**
          * Use this to set a delay before the popover appears on hover. If the mouse
          * leaves before this time, the popover won't show. This only works when the
@@ -24860,7 +24934,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'af402e7713ddfed886a9965c0bde847be7399f7e' }, hAsync("slot", { key: 'bdef517573a37c420109712631120377fb862ab1', name: "trigger" }), hAsync("div", { key: '8c2004b6d92bb09a1d19ea1f709b2f104695e111', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '11d1b809fcdfddf55b471e12618ec4b8735d4a31', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '989d8f02e4044d4963d3152f137f691fd80ef818', name: "content" }))));
+        return (hAsync(Host, { key: '3ab4e0f245ab925d2336f09b0cfa1c5c81a7eb32' }, hAsync("slot", { key: '54d237432f4f69f517f0182e58a3e6d75c658382', name: "trigger" }), hAsync("div", { key: 'ea6d9cedbade36ca48f9e72ec139720caeae1e35', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'f7cc6db85501f067317f66cc500b21e6571feeb6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '2330178c2adfd93eea13286ec3efee5c495b2680', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24905,7 +24979,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f5e01b297dcede0d11045bc52f7f75278bc66c43' }, hAsync("slot", { key: '158a47218c5edff393c19207dbb7987a25779e6d' })));
+        return (hAsync(Host, { key: '5cd3c7b2db57e433f37a086d0cda9bb0335c84fc' }, hAsync("slot", { key: 'ca4003ec7100ee2979ba7b00352c19ecf1d62e05' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -24940,7 +25014,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'bc18faae4116df9b3a2f944b97c5e5cf096654ae', 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: 'fe3a07a01bd3a5898bcd1533c7966241cff21b44' })));
+        return (hAsync(Host, { key: '61662dda82c5191e4d90098e10d01bad6524e8c7', 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: '7ee777cdebbfe9d4f6438a2a79407d9f670f2885' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -25277,14 +25351,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: 'b1df9cabce9289f174177a6b28851c3fa4788529' }, hAsync("div", { key: '5e27d3ad0d34f64c9e9b5c9f43ac025603c08530', class: "hidden" }, hAsync("slot", { key: 'aaef162487498f64c21fb1071b2863e8fa4e5a5c' })), hAsync("slot", { key: '34325af8079d76a7599c1c4516fa8f371ce2fe75', 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: '510ea0b8404254faa7b2add62884da77232bf13d' }, hAsync("div", { key: '482a3cfb6fb948d7280b7c0ea70035a9c6385615', class: "hidden" }, hAsync("slot", { key: 'da7aa706d453676212e260e9454ed4e5143f2ccc' })), hAsync("slot", { key: '78054c9a10623c82d7cc7fef5619053c89b70944', 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: '49cdd7614ab002f5a3de09d414df6bb46c72a28f', name: "after" })));
+        })))))))), hAsync("slot", { key: '8e5b8eee3870e0d38944370a3d9500f641914935', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25404,8 +25478,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cb88cfea301859b05adedf15690027b21cd4837e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '307011c7dcbbe5a6dfc9b2bc1a5bd9842b99f68c', class: "input-container" }, hAsync("input", { key: 'ff87395a3a737a1daaae243176975856a571cac1', 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: 'c190ac33b861a5f92869c83249b441e243b2ee21', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'cfd87cc4e3c68bedf4729a0b62f192077c4b4813', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '81de13cc0e98b4bdb494cc20fb1af59be66952b0', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '69647c010b34a94afb215f9e56b5fba0bd114581', class: "description" }, hAsync("slot", { key: 'ecf7b68b862976907c2d4605a65ee24875b926d3', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '4c1b964876714244584d1dd4e949cf920312d0bf', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'b593008916115afefa8eebeaffde07c3a576089b', class: "input-container" }, hAsync("input", { key: '20783b13ea6e1b427fd79db1ff46d5685e7c7d89', 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: 'b2c9e1d17dbf53a42fdd0612c1ba507ea15c2775', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd5ac7d57befa88f4b1fa752d95dce9ea50db577c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '63817f8322de43590bd2052d3695a3e090c466bc', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f33e45707f6cde570f7d4e3f44aece36413cf7c8', class: "description" }, hAsync("slot", { key: '3dcbe64426121cd2541fc545606f1b1381d51fdf', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -25470,7 +25544,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '893071a64f973b33dccbf3acec95db46e592b717' }, hAsync("slot", { key: '010776550ed5f942c02540b12756f0c0f64e31c4' }), hAsync("nv-popover", { key: '21a669333da9e55b697f8a0b0962a8328beac55a', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'ed89d0bfe1e9e8d12e33e3d7fb0f5b7f2685bbb9', slot: "content" }, this.message), hAsync("slot", { key: 'fa2d9602e003f1da5c3d23156db7b2ac482966bd', name: "content" }))));
+        return (hAsync(Host, { key: '34431c56ab8f0d9581d7bae170eea34972594a3c' }, hAsync("slot", { key: '0e9b3492b07b23e3eb5e7475d174aca7f3d18cdb' }), hAsync("nv-popover", { key: '2a3eccd8a928114ad8df6ce67a19948fab772654', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '286fad171703def16f9a1b95f2e8dc01afc062a0', slot: "content" }, this.message), hAsync("slot", { key: '502d9abb156d4a40f36f442a6629e08b754a983f', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }