@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

package/hydrate/index.js

@@ -5434,83 +5434,6 @@ class NvBadge {
     }; }
 }
 
-const classes = {
-    'w-full': 'w-full',
-    'wFull': 'w-full',
-    'is-active': 'is-active',
-    'is-selected': 'is-selected',
-};
-/**
- * @slot default - render children
- * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
- */
-class NvBaseComponent {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.applyClassesOnInitialRender();
-    }
-    componentDidLoad() {
-        this.mutationObserver = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'attributes') {
-                    const target = mutation.target;
-                    Object.keys(classes).forEach(attributeName => {
-                        if (target.hasAttribute(attributeName)) {
-                            target.classList.add(classes[attributeName]);
-                        }
-                        else {
-                            target.classList.remove(classes[attributeName]);
-                        }
-                    });
-                }
-            });
-        });
-        this.observeElements();
-    }
-    disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region METHODS
-    applyClassesOnInitialRender() {
-        Object.keys(classes).forEach(attributeName => {
-            const elements = this.el.querySelectorAll(`[${attributeName}]`);
-            elements.forEach(element => {
-                element.classList.add(classes[attributeName]);
-            });
-        });
-    }
-    observeElements() {
-        this.mutationObserver.observe(this.el, {
-            attributes: true,
-            attributeFilter: Object.keys(classes),
-            subtree: true,
-        });
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: 'ba3d284241a61fa30bd434f563b7e4962ea3f238', style: { display: 'block' } }, hAsync("slot", { key: '44a0f1bc5267cf7e7bd0c1d258e8d9b8020a59f3' })));
-    }
-    get el() { return getElement(this); }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-base",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
 const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 var NvBreadcrumbStyle0 = nvBreadcrumbCss;
 
@@ -5543,7 +5466,7 @@ class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8ffa46d8714261924aaab55940c7dc6b36f2a9f9', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: 'a2beda9f4b9a5eb71962a1cc060f5467fd2b0134', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: 'd4a837d21c07697d6ef01506169474bd5cf5a304', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: 'bf089278cfe03ed3ae4beeac57ad67dc029b91cf', slot: "content" }, hAsync("slot", { key: '23f21367fc803a5f176947720e55dba4201f64c4' })))), hAsync("span", { key: 'e1a9414f3be1fd6ef3450f3e7b99d7ff091ec2f0', "data-scope": "separator" }, "/")));
+        return (hAsync(Host, { key: '50f858dc015ef2cd51f54a08fa53ec88ee42ac41', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: '1df40faa4a483d4abf8895def5db87696cf0d08e', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '90174908cdcf1b3e1f8a8a82a01cfa505311c930', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: '72282abd41c80bb8edf0c6b19506be32bf5ed688', slot: "content" }, hAsync("slot", { key: '4b9c325c0d27162c4856796f6a7d7c9b39edf993' })))), hAsync("span", { key: '62316fc8efc09067a0a64d4e90e76d57b329ee81', "data-scope": "separator" }, "/")));
     }
     get el() { return getElement(this); }
     static get style() { return NvBreadcrumbStyle0; }
@@ -5573,7 +5496,7 @@ class NvBreadcrumbs {
     }
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, hAsync("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
+        return (hAsync(Host, { key: '19ad2bb41f4254a98a571cbadb50ba5ed7d29f62', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: '11b77f0f11c6b1dc2ce5ab3f4f7b23e8ec728b61' }, hAsync("slot", { key: 'c0c683f93c6874aa5f84fb735d13c1b5eabcd951' }))));
     }
     static get style() { return NvBreadcrumbsStyle0; }
     static get cmpMeta() { return {
@@ -5737,7 +5660,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '751fa0a552eaf13a193a15f9c9d6fe0c257b93e8', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'ae8b39b13bfd6cd8a33f7a30afea19e426d0064d', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'e1a213305895c9b35d517bedce3a61f49e39642a', name: "leading-icon" }), hAsync("slot", { key: '2e9e5ed4381790f3c1c06f1a4bf5f60bda79bd1c' }), hAsync("slot", { key: 'e960ec4f4eca0a2a941ca7f3b96a4e31603fa633', name: "trailing-icon" })));
+        return (hAsync(Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '36a311494e45ebc23b1133923a676d58e87f3800', name: "leading-icon" }), hAsync("slot", { key: 'f6fea826cda9a09f7152f4e30cc6981c89e73ebe' }), hAsync("slot", { key: 'd59c23ff85ea7efc16c69c5adbeb0e91786f1f68', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5996,11 +5919,11 @@ class NvCalendar {
     /**
      * Change the displayed month
      * @param {number} offset - Month offset (-1 for previous, 1 for next)
-     * @param {number} calendarOffset - Month offset for the calendar (0 by default)
      */
-    changeMonth(offset, calendarOffset = 0) {
+    changeMonth(offset) {
         const newDate = new Date(this.currentDate);
-        newDate.setUTCMonth(newDate.getUTCMonth() + offset + calendarOffset);
+        // Ensure we only move by one month at a time
+        newDate.setUTCMonth(newDate.getUTCMonth() + offset);
         // Add the appropriate animation class
         const containers = this.el.querySelectorAll('.calendar-grid');
         containers.forEach(container => {
@@ -6158,10 +6081,13 @@ class NvCalendar {
         const firstDay = new Date(Date.UTC(year, month, 1));
         const lastDay = new Date(Date.UTC(year, month + 1, 0));
         const days = [];
-        // Calculate the offset to include the days of the previous month only for the first calendar
-        const offsetDays = offset === 0 ? (firstDay.getUTCDay() - this.firstDayOfWeek + 7) % 7 : 0;
+        // Correct calculation of offset for previous month days
+        // Use getUTCDay to stay consistent with UTC timezone
+        const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
+        // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
+        const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
         // Add the days of the previous month for the first calendar
-        if (offset === 0) {
+        if (offset === 0 && offsetDays > 0) {
             const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
             for (let i = offsetDays; i > 0; i--) {
                 const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
@@ -6351,6 +6277,21 @@ class NvCalendar {
     parseDate(dateInput) {
         if (dateInput instanceof Date)
             return dateInput;
+        // Attempt to automatically detect ISO 8601 format (generated by toISOString())
+        // The regex checks the standard ISO format: YYYY-MM-DDTHH:mm:ss.sssZ
+        if (typeof dateInput === 'string' &&
+            /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(dateInput)) {
+            try {
+                const parsedDate = new Date(dateInput);
+                if (!isNaN(parsedDate.getTime())) {
+                    return parsedDate;
+                }
+            }
+            catch (error) {
+                // If it fails, continue with other methods
+                console.error('Error parsing ISO date:', error);
+            }
+        }
         // Handling Unix Seconds ("X") formats
         if (this.dateFormat === 'X') {
             const unixSeconds = Number(dateInput);
@@ -6397,6 +6338,20 @@ class NvCalendar {
         }
         return parsed.toDate();
     }
+    /**
+     * Checks if the date format is in UTC mode
+     * @returns {boolean} true if the date format is in UTC mode
+     */
+    get isUTCMode() {
+        return this.dateFormat.includes('Z');
+    }
+    /**
+     * Checks if the date format is ISO 8601
+     * @returns {boolean} true if the format is ISO 8601
+     */
+    get isISO8601Format() {
+        return this.dateFormat === 'YYYY-MM-DD[T]HH:mm:ss[Z]';
+    }
     /**
      * Formats a date to a string according to the format
      * @param {Date} date - Date to format
@@ -6405,6 +6360,11 @@ class NvCalendar {
     formatDate(date) {
         if (!date)
             return '';
+        // Special case for ISO 8601
+        if (this.isISO8601Format) {
+            // For the ISO 8601 format, use directly toISOString() which is standard
+            return date.toISOString();
+        }
         // If the format is "Ticks", convert the time to C# ticks
         if (this.dateFormat === 'Ticks') {
             const ticks = date.getTime() * 10000 + 621355968000000000;
@@ -6600,11 +6560,10 @@ class NvCalendar {
     /**
      * Handles month change with an offset
      * @param {number} direction - Direction (-1 for previous, 1 for next)
-     * @param {number} offset - Month offset (0 by default)
      * @returns {Function} Change month handler
      */
-    getChangeMonthHandler(direction, offset) {
-        return () => this.changeMonth(direction, offset);
+    getChangeMonthHandler(direction) {
+        return () => this.changeMonth(direction);
     }
     /**
      * Handles month change from an event (ex: dropdown)
@@ -6666,13 +6625,6 @@ class NvCalendar {
             return [];
         }
     }
-    /**
-     * Checks if the date format is in UTC mode
-     * @returns {boolean} true if the date format is in UTC mode
-     */
-    get isUTCMode() {
-        return this.dateFormat.includes('Z');
-    }
     /**
      * Checks if shortcuts are visible
      * @returns {boolean} true if shortcuts are visible
@@ -6698,8 +6650,8 @@ class NvCalendar {
      * @description Renders the header of the calendar
      */
     renderHeader(offset, index) {
-        return (hAsync("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (hAsync("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) })), hAsync("div", { class: "date-controls" }, hAsync("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (hAsync("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), hAsync("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
-                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (hAsync("div", { class: "nav-buttons" }, hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) }), hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset), class: "nav-right" }))));
+        return (hAsync("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (hAsync("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) })), hAsync("div", { class: "date-controls" }, hAsync("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (hAsync("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), hAsync("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
+                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (hAsync("div", { class: "nav-buttons" }, hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) }), hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1), class: "nav-right" }))));
     }
     /**
      * Renders the week numbers
@@ -6792,7 +6744,7 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '49bdf5cc44f9e8f13b0fd61936d3b015e6105d18' }, hAsync("div", { key: 'e1a0fcc20c7c12930df31c36751824a64fae053f', class: "datepicker-root" }, hAsync("div", { key: '48cd6f6d92c41c748fdd05a6d932cbb634e3dfd6', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'f5d5ca631e448067cbfb04f0bcc74695b5c6fb5e', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (hAsync("div", { key: 'cb1ebc42e3616b9c35d147c227a53924fd2c73c8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: 'e9bec2dd219502e8855c6195ebe69bff8fff0da5' })));
+        return (hAsync(Host, { key: '89300da9f694aa926855452414e7e036f75f2de6' }, hAsync("div", { key: '467ef9fc9d6523eec3712bf779d49fdf50c55617', class: "datepicker-root" }, hAsync("div", { key: '990f2cb18dcad96cab0f8dfb62e6c57049475440', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'c0dedf1007cbc6a87bd591925c9994474c876afc', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (hAsync("div", { key: 'ef81eaf952fbe569be7e1d3ee6cb59de0e137fe4', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: 'e1281217950b5cb02952a69b081d4fcce5863b4d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6860,7 +6812,7 @@ class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8c6efe159aa3b9d853d07897e17045adabf5716c', class: clsx(this.getColSize()) }, hAsync("slot", { key: '5438e2dd941088fde68b17495a4d231cc56fba3c' })));
+        return (hAsync(Host, { key: '8f7112dc8ce8896d9e7265741f06b7449dd508df', class: clsx(this.getColSize()) }, hAsync("slot", { key: '3bedff11752d04db2615a5f26d4d910d95dee76c' })));
     }
     static get style() { return NvColStyle0; }
     static get cmpMeta() { return {
@@ -9827,6 +9779,22 @@ function getCoreRowModel() {
     return rowModel;
   }, getMemoOptions(table.options, 'debugTable', 'getRowModel', () => table._autoResetPageIndex()));
 }
+function expandRows(rowModel) {
+  const expandedRows = [];
+  const handleRow = row => {
+    var _row$subRows;
+    expandedRows.push(row);
+    if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
+      row.subRows.forEach(handleRow);
+    }
+  };
+  rowModel.rows.forEach(handleRow);
+  return {
+    rows: expandedRows,
+    flatRows: rowModel.flatRows,
+    rowsById: rowModel.rowsById
+  };
+}
 
 function filterRows(rows, filterRowImpl, table) {
   if (table.options.filterFromLeafRows) {
@@ -10014,6 +9982,49 @@ function getFilteredRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getFilteredRowModel', () => table._autoResetPageIndex()));
 }
 
+function getPaginationRowModel(opts) {
+  return table => memo(() => [table.getState().pagination, table.getPrePaginationRowModel(), table.options.paginateExpandedRows ? undefined : table.getState().expanded], (pagination, rowModel) => {
+    if (!rowModel.rows.length) {
+      return rowModel;
+    }
+    const {
+      pageSize,
+      pageIndex
+    } = pagination;
+    let {
+      rows,
+      flatRows,
+      rowsById
+    } = rowModel;
+    const pageStart = pageSize * pageIndex;
+    const pageEnd = pageStart + pageSize;
+    rows = rows.slice(pageStart, pageEnd);
+    let paginatedRowModel;
+    if (!table.options.paginateExpandedRows) {
+      paginatedRowModel = expandRows({
+        rows,
+        flatRows,
+        rowsById
+      });
+    } else {
+      paginatedRowModel = {
+        rows,
+        flatRows,
+        rowsById
+      };
+    }
+    paginatedRowModel.flatRows = [];
+    const handleRow = row => {
+      paginatedRowModel.flatRows.push(row);
+      if (row.subRows.length) {
+        row.subRows.forEach(handleRow);
+      }
+    };
+    paginatedRowModel.rows.forEach(handleRow);
+    return paginatedRowModel;
+  }, getMemoOptions(table.options, 'debugTable'));
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * All properties that should be excluded from the deep copy of an HTML element.
@@ -10216,13 +10227,15 @@ class NvDatagrid {
         this.action = createEvent(this, "action", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
+        this.minPageIndex = 1;
         /****************************************************************************/
         //#region STATES
         this.table = null;
         this.parsedColumns = []; // Parsed array
         this.parsedData = []; // Parsed array
-        this.globalFilter = '';
+        this.globalFilterSearchTerm = '';
         this.columnData = [];
+        this.paginationState = null;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
@@ -10272,8 +10285,24 @@ class NvDatagrid {
          * @default false
          */
         this.autoGenerateColumns = false;
+        /**
+         * Whether to enable pagination for the data grid.
+         * @default false
+         */
+        this.enablePagination = false;
+        /**
+         * The number of rows to display per page.
+         * @default 10
+         */
+        this.pageSize = 10;
+        /**
+         * The array of page sizes to display in the pagination dropdown.
+         * @default [10, 20, 30, 40, 50]
+         */
+        this.pageSizes = [10, 20, 30, 40, 50];
         this.debouncedFilter = debounce$1((value) => {
-            this.globalFilter = value;
+            var _a;
+            (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
         }, 300);
         /**
          * Handles global filtering on input event for the search input.
@@ -10289,6 +10318,23 @@ class NvDatagrid {
                 this.debouncedFilter(value);
             }
         };
+        this.flexRender = (comp, props) => {
+            if (typeof comp === 'function') {
+                return comp(props);
+            }
+            return comp;
+        };
+        this.handlePageIndexChange = (event) => {
+            const target = event.target;
+            const page = target.value ? Number(target.value) - 1 : 0;
+            // Simply use `setPageIndex` to update the page index directly
+            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageIndex: page }); // This triggers the paginationState watcher
+        };
+        this.handlePageSizeChange = (event) => {
+            const target = event.target;
+            // Simply use `setPageSize` to update the page size directly
+            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: Number(target.value) }); // This triggers the paginationState watcher
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -10390,6 +10436,7 @@ class NvDatagrid {
         this.parsedColumns = safeNewValue;
     }
     initializeTable() {
+        var _a, _b, _c, _d;
         // Clear the previous table instance (if any)
         this.table = null;
         // Set default options for the table
@@ -10423,26 +10470,9 @@ class NvDatagrid {
                 }, // Default: no column sizing info
             },
         };
-        if (this.enableGlobalFilter) {
-            tableOptions.getFilteredRowModel = getFilteredRowModel();
-            // Set the initial global filter value
-            tableOptions.state.globalFilter = this.globalFilter;
-            // Define the callback for global filter changes
-            tableOptions.onGlobalFilterChange = value => {
-                this.globalFilter = value;
-            };
-            tableOptions.globalFilterFn = (row, columnId, filterValue) => {
-                const response = row
-                    .getValue(columnId)
-                    .toString()
-                    .toLowerCase()
-                    .includes(filterValue.toLowerCase());
-                return response;
-            };
-        }
         if (this.parsedColumns.length > 0) {
             // Validate and generate column definitions
-            const validColumns = this.parsedColumns.filter(column => (column === null || column === void 0 ? void 0 : column.accessor) && (column === null || column === void 0 ? void 0 : column.header));
+            const validColumns = this.parsedColumns.filter(column => column === null || column === void 0 ? void 0 : column.accessor);
             // Update tableOptions based on parsed data and columns
             const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
             const hasData = this.parsedData &&
@@ -10450,22 +10480,22 @@ class NvDatagrid {
                 this.parsedData.length > 0;
             if (!hasColumns && !hasData) ;
             else if (hasColumns && !hasData) {
+                // Has columns but no data
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
             else {
                 // Both columns and data are available
-                // No columns and data is available
                 tableOptions.data = this.getTableData();
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
         }
         else {
-            // No columns and data is available
+            // No parsed columns and data is available
             const hasData = this.parsedData &&
                 Array.isArray(this.parsedData) &&
                 this.parsedData.length > 0;
             if (hasData) {
-                // No columns and data is available
+                // No parsed columns and data is available
                 const firstRow = this.parsedData[0];
                 const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
                     accessor: key,
@@ -10478,26 +10508,116 @@ class NvDatagrid {
                 tableOptions.columns = this.generateColumns(arrayColumnsConfig, tableOptions);
             }
         }
+        if (this.enableGlobalFilter) {
+            tableOptions.getFilteredRowModel = getFilteredRowModel();
+            const globalFilter = this.globalFilterSearchTerm;
+            // Set the initial global filter value
+            tableOptions.state.globalFilter = globalFilter;
+            // Define the callback for global filter changes
+            tableOptions.onGlobalFilterChange = updater => {
+                const newFilter = typeof updater === 'function'
+                    ? updater(this.globalFilterSearchTerm)
+                    : updater;
+                this.globalFilterSearchTerm = newFilter; // Will automatically trigger the searchTerm watcher and update the table
+            };
+            tableOptions.globalFilterFn = this.globalFilterFn;
+        }
+        if (this.enablePagination) {
+            tableOptions.getPaginationRowModel = getPaginationRowModel();
+            const pagination = {
+                pageIndex: (_b = (_a = this.paginationState) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0,
+                pageSize: (_d = (_c = this.paginationState) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 10,
+            };
+            // Set the initial pagination value with safeguards
+            tableOptions.state.pagination = pagination;
+            tableOptions.onPaginationChange = updater => {
+                const newPagination = typeof updater === 'function'
+                    ? updater(this.paginationState)
+                    : updater;
+                this.paginationState = newPagination;
+            };
+        }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
+    /**
+     * Global filter function for the table.
+     * This function checks if the specified filter value is present in any of the row's original values,
+     * including nested objects and arrays. It is used to filter the rows based on the global filter value,
+     * allowing for case-insensitive matching.
+     *
+     * @param {Row<any>} row - The row object containing the data to be filtered.
+     * @param {string} _columnId - The ID of the column being filtered (not used in this function).
+     * @param {string} filterValue - The value to filter the rows by. This value is checked against the row's data.
+     * @returns {boolean} - Returns true if the row should be included in the filtered results, false otherwise.
+     *                     If the filter value is empty, all rows are included.
+     */
+    globalFilterFn(row, _columnId, filterValue) {
+        const safeFilterValue = String(filterValue).toLowerCase().trim();
+        // If no filter value, return true for all rows
+        if (!safeFilterValue)
+            return true;
+        // More robust filtering across all columns
+        const checkValue = (value) => {
+            if (typeof value === 'object' && value !== null) {
+                // If it's an array, check each item
+                if (Array.isArray(value)) {
+                    return value.some(item => checkValue(item));
+                }
+                // If it's an object, check each property
+                return Object.values(value).some(val => checkValue(val));
+            }
+            return String(value).toLowerCase().includes(safeFilterValue);
+        };
+        return checkValue(row.original);
+    }
     // Helper function to generate column definitions
     generateColumns(validColumns, tableOptions) {
         const columnHelper = createColumnHelper();
         if (validColumns.length > 0) {
             // Use defined columns
-            return validColumns.map(column => columnHelper.accessor(column.accessor, {
-                header: column.header,
-                cell: info => info.getValue(),
-                enableGlobalFilter: this.enableGlobalFilter,
-            }));
+            return validColumns.map(column => {
+                var _a, _b;
+                return columnHelper.accessor(column.accessor, {
+                    header: (_b = (this.renderTemplate(this.headerTemplateCache.get(column.accessor), (_a = column.header) !== null && _a !== void 0 ? _a : column.accessor, null) ||
+                        column.header)) !== null && _b !== void 0 ? _b : column.accessor,
+                    cell: (info) => {
+                        var _a, _b, _c;
+                        const value = info.getValue();
+                        const cellAccessors = column.accessor;
+                        const row = info.row;
+                        return ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(value)
+                            ? value.map((item) => {
+                                var _a, _b;
+                                return (_b = (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
+                                    item)) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : this.fallbackValue;
+                            })
+                            : (_c = (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), value, row) ||
+                                value)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
+                    },
+                    enableGlobalFilter: this.enableGlobalFilter,
+                });
+            });
         }
         else if (tableOptions.data && tableOptions.data.length > 0) {
             // Generate columns from data keys
             const sampleRow = tableOptions.data[0];
             return Object.keys(sampleRow).map(key => columnHelper.accessor(key, {
-                header: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header
-                cell: info => info.getValue(),
+                header: this.renderTemplate(this.headerTemplateCache.get(key), key.charAt(0).toUpperCase() + key.slice(1), null) || key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header
+                cell: (info) => {
+                    var _a, _b, _c;
+                    const value = info.getValue();
+                    const cellAccessors = key;
+                    const row = info.row;
+                    return ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(value)
+                        ? value.map((item) => {
+                            var _a, _b;
+                            return (_b = (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
+                                item)) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : this.fallbackValue;
+                        })
+                        : (_c = (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), value, row) ||
+                            value)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
+                },
                 enableGlobalFilter: this.enableGlobalFilter,
             }));
         }
@@ -10526,11 +10646,11 @@ class NvDatagrid {
         // Replace placeholders in text content, attributes, and properties
         element.querySelectorAll('*').forEach(el => {
             // Replace placeholders in text content
-            this.replacePlaceholdersTextContent(el, cellValue);
+            this.replacePlaceholdersTextContent(el, cellValue, row);
             // Replace placeholders in attributes
-            this.replacePlaceholdersAttributes(el, cellValue);
+            this.replacePlaceholdersAttributes(el, cellValue, row);
             // Replace placeholders in properties
-            this.replacePlaceholdersProperties(el, cellValue);
+            this.replacePlaceholdersProperties(el, cellValue, row);
         });
         // Handle `data-bind-event`
         element.querySelectorAll('[data-bind-event]').forEach(el => {
@@ -10629,51 +10749,128 @@ class NvDatagrid {
         // If cellValue is a primitive (string, number, boolean, etc.), return it as a string
         return (_a = cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()) !== null && _a !== void 0 ? _a : this.fallbackValue;
     }
-    replacePlaceholdersTextContent(element, cellValue) {
-        // ✅ Replace placeholders in text content
-        element.childNodes.forEach(node => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
-            }
-        });
-    }
-    replacePlaceholdersAttributes(element, cellValue) {
-        // ✅ Replace placeholders in attributes
-        Array.from(element.attributes).forEach(attr => {
-            if (attr.value.includes('__')) {
-                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
-            }
-        });
+    replacePlaceholdersTextContent(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in text content with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            element.childNodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => {
+                        if (key in originalValue) {
+                            return this.replaceKeyWithValue(key, originalValue[key]);
+                        }
+                        else {
+                            console.warn(`Key ${key} not found in originalValue`);
+                            return '';
+                        }
+                    });
+                }
+            });
+        }
+        else {
+            // ✅ Replace placeholders in text content
+            element.childNodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
+                }
+            });
+        }
     }
-    replacePlaceholdersProperties(element, cellValue) {
-        // ✅ Dynamically extract relevant properties
-        const properties = new Set();
-        // Collect only own enumerable properties
-        Object.keys(element).forEach(key => properties.add(key));
-        // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-        let proto = Object.getPrototypeOf(element);
-        while (proto && proto !== HTMLElement.prototype) {
-            Object.keys(proto).forEach(key => properties.add(key));
-            proto = Object.getPrototypeOf(proto);
+    replacePlaceholdersAttributes(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in attributes with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            Array.from(element.attributes).forEach(attr => {
+                if (attr.value.includes('__')) {
+                    attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => {
+                        if (key in originalValue) {
+                            return this.replaceKeyWithValue(key, originalValue[key]);
+                        }
+                        else {
+                            console.warn(`Key ${key} not found in originalValue`);
+                            return '';
+                        }
+                    });
+                }
+            });
         }
-        // ✅ Filter and copy only non-function properties and exclude irrelevant ones
-        properties.forEach(prop => {
-            if (typeof element[prop] !== 'function' && // Ignore methods
-                !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-            ) {
-                try {
+        else {
+            // ✅ Replace placeholders in attributes
+            Array.from(element.attributes).forEach(attr => {
+                if (attr.value.includes('__')) {
+                    attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
+                }
+            });
+        }
+    }
+    replacePlaceholdersProperties(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in properties with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            // ✅ Dynamically extract relevant properties
+            const properties = new Set();
+            // Collect only own enumerable properties
+            Object.keys(originalValue).forEach(key => properties.add(key));
+            // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
+            let proto = Object.getPrototypeOf(originalValue);
+            while (proto && proto !== HTMLElement.prototype) {
+                Object.keys(proto).forEach(key => properties.add(key));
+                proto = Object.getPrototypeOf(proto);
+            }
+            // ✅ Filter and copy only non-function properties and exclude irrelevant ones
+            properties.forEach(prop => {
+                if (typeof element[prop] !== 'function' && // Ignore methods
+                    !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                ) {
                     const propValue = element[prop];
-                    // ✅ Replace placeholders only if the value is a string
                     if (typeof propValue === 'string' && propValue.includes('__')) {
-                        element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue)); // ✅ TypeScript safe
+                        element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => {
+                            if (key in originalValue) {
+                                return this.replaceKeyWithValue(key, originalValue[key]);
+                            }
+                            else {
+                                console.warn(`Key ${key} not found in originalValue`);
+                                return '';
+                            }
+                        });
                     }
                 }
-                catch (error) {
-                    console.warn(`Could not assign property ${prop}:`, error.message);
+            });
+        }
+        else {
+            // ✅ Dynamically extract relevant properties
+            const properties = new Set();
+            // Collect only own enumerable properties
+            Object.keys(element).forEach(key => properties.add(key));
+            // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
+            let proto = Object.getPrototypeOf(element);
+            while (proto && proto !== HTMLElement.prototype) {
+                Object.keys(proto).forEach(key => properties.add(key));
+                proto = Object.getPrototypeOf(proto);
+            }
+            // ✅ Filter and copy only non-function properties and exclude irrelevant ones
+            properties.forEach(prop => {
+                if (typeof element[prop] !== 'function' && // Ignore methods
+                    !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                ) {
+                    try {
+                        const propValue = element[prop];
+                        // ✅ Replace placeholders only if the value is a string
+                        if (typeof propValue === 'string' && propValue.includes('__')) {
+                            element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue)); // ✅ TypeScript safe
+                        }
+                    }
+                    catch (error) {
+                        console.warn(`Could not assign property ${prop}:`, error.message);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -10707,14 +10904,30 @@ class NvDatagrid {
     handleParsedChange() {
         this.initializeTable();
     }
-    handleGlobalFilter(newValue) {
+    handleGlobalFilterSearchTerm(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
         }
-        // 🚨 Manually update state before calling filter
-        this.table.options.state = Object.assign(Object.assign({}, this.table.options.state), { globalFilter: newValue });
-        this.table.setGlobalFilter(newValue);
+        // Not working
+        /*// Set the global filter for the table
+        this.table.setGlobalFilter(newValue);*/
+        // Manually update the globalFilter state
+        this.table.options.state.globalFilter = newValue;
+    }
+    handlePaginationState(newValue, oldValue) {
+        if (!this.table) {
+            console.warn('Table is not initialized yet.');
+            return;
+        }
+        // Only update if there is a meaningful change
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+            // Not working
+            /*// Set the pagination for the table
+            this.table.setPagination(newValue);*/
+            // Manually update the pagination state
+            this.table.options.state.pagination = newValue;
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -10723,41 +10936,39 @@ class NvDatagrid {
         this.cacheTemplates();
         this.parseDataAndColumns();
         this.initializeTable();
+        if (this.enablePagination) {
+            // Ensure a valid page size
+            const effectivePageSize = this.pageSize > 0 ? this.pageSize : 10;
+            this.paginationState = {
+                pageIndex: Math.max(0, this.minPageIndex - 1),
+                pageSize: effectivePageSize,
+            };
+        }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
             ? []
             : (_a = this.table) === null || _a === void 0 ? void 0 : _a.getHeaderGroups();
         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: '94163c2c73d03dca35795bfb536c5743cb3aa0dc' }, hAsync("div", { key: '022776844872a4a6fcf9d7bdc71651e946e83724', class: "hidden" }, hAsync("slot", { key: 'a479cfc2b5ee53aa83450ec784451625e1ae7667' })), hAsync("slot", { key: '9beeb16975a685d8ce05981923c999ab2ffa004e', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '57efcd1ee55fae941a0071000dc665ee76615f32', class: "search-container" }, hAsync("input", { key: 'd7352618ce123a7c14d8ebcc0b228136ae2df66a', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (hAsync(Host, { key: 'b3886397a5e6694611636d4da7d61ae5ccbe1903' }, hAsync("div", { key: '8fa71d83f4cfa79cf7fb334bcf6115e4cf253c5d', class: "hidden" }, hAsync("slot", { key: '9aad5956b5973cafc486f3a854a66ae86038ef4a' })), hAsync("slot", { key: '7a1ca93223567faffabb3473df2176cd02654247', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '0020880c229d8ed9070c15182191e86b8b3fed1d', class: "search-container" }, hAsync("input", { key: 'cefc47330a7d770c3668d1406930b9ac50992a10', type: "text", value: (_d = this.globalFilterSearchTerm) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "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 (hAsync("th", { key: header.id }, header.isPlaceholder
                     ? null
-                    : this.renderTemplate(this.headerTemplateCache.get(header.id), {}) || header.column.columnDef.header));
+                    : this.flexRender(header.column.columnDef.header, header.getContext())));
             }))))
             : null)), hAsync("tbody", null, !rows || rows.length === 0 || this.parsedData.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: this.parsedColumns.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => {
             const rowId = row.id;
             const visibleCells = row === null || row === void 0 ? void 0 : row.getVisibleCells();
             return (hAsync("tr", { key: rowId }, visibleCells.map(cell => {
-                var _a, _b;
-                const cellAccessors = cell.column.id;
-                const cellValue = cell.getValue();
-                return (hAsync("td", { key: cell.id, "data-row-id": rowId }, ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(cellValue)
-                    ? cellValue.map((item) => {
-                        var _a;
-                        return (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
-                            item)) !== null && _a !== void 0 ? _a : this.fallbackValue;
-                    })
-                    : (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), cellValue, row) ||
-                        cellValue)) !== null && _b !== void 0 ? _b : this.fallbackValue));
+                return (hAsync("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
-        }))))), hAsync("slot", { key: '15815f259d3936559c89ff943dc349f99fda34fa', name: "after" })));
+        })))), this.enablePagination && (hAsync("div", { class: "flex items-center gap-2" }, hAsync("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.firstPage }, "<<"), hAsync("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.previousPage }, "<"), hAsync("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.nextPage }, ">"), hAsync("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.lastPage }, ">>"), hAsync("span", { class: "flex items-center gap-1" }, hAsync("div", null, "Page"), hAsync("strong", null, this.table.getState().pagination.pageIndex + 1, " of", ' ', this.table.getPageCount().toLocaleString())), hAsync("span", { class: "flex items-center gap-1" }, "| Go to page:", ' ', hAsync("input", { type: "number", min: this.minPageIndex, max: this.table.getPageCount(), value: this.table.getState().pagination.pageIndex + 1, class: "border p-1 rounded w-16", "aria-label": "Go to page", onInput: this.handlePageIndexChange })), (_e = this.pageSizes) !== null && _e !== void 0 ? _e : (hAsync("select", { "aria-label": "Rows per page", onChange: this.handlePageSizeChange }, this.pageSizes.map(pageSize => (hAsync("option", { value: String(pageSize), selected: this.table.getState().pagination.pageSize === pageSize }, "Show ", pageSize))))))))), hAsync("slot", { key: '2030fdc2b38a293e749f2ffd4645987e834fee76', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10767,7 +10978,8 @@ class NvDatagrid {
         "dataJson": ["parseJsonData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
-        "globalFilter": ["handleGlobalFilter"]
+        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
+        "paginationState": ["handlePaginationState"]
     }; }
     static get style() { return NvDatagridStyle0; }
     static get cmpMeta() { return {
@@ -10783,15 +10995,19 @@ class NvDatagrid {
             "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
             "enableGlobalFilter": [516, "enable-global-filter"],
             "autoGenerateColumns": [516, "auto-generate-columns"],
+            "enablePagination": [516, "enable-pagination"],
+            "pageSize": [514, "page-size"],
+            "pageSizes": [16],
             "table": [32],
             "parsedColumns": [32],
             "parsedData": [32],
-            "globalFilter": [32],
-            "columnData": [32]
+            "globalFilterSearchTerm": [32],
+            "columnData": [32],
+            "paginationState": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsJson", "columns-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"], ["enableGlobalFilter", "enable-global-filter"], ["autoGenerateColumns", "auto-generate-columns"]]
+        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsJson", "columns-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"], ["enableGlobalFilter", "enable-global-filter"], ["autoGenerateColumns", "auto-generate-columns"], ["enablePagination", "enable-pagination"], ["pageSize", "page-size"]]
     }; }
 }
 
@@ -10811,7 +11027,7 @@ class NvDatagridcolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '462144dc8ea401f4f3e3683bdafba983c7147737' }, hAsync("slot", { key: '9af4055567f5199f6b4393e37a8a77b884ce82b9', name: "header" }), hAsync("slot", { key: '36b8cfd9bc974ed9d2a249418ababa504b66091d', name: "cell" })));
+        return (hAsync(Host, { key: '20839d4a0abfa07e55a49b434ad26e3ddaebb66b' }, hAsync("slot", { key: '2c1b24aef73e9be8e500d48741e4dc6a42ed6f06', name: "header" }), hAsync("slot", { key: 'cbc4bcbb080f8647c6f702e4a52411fe9be1f6ca', name: "cell" })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -11683,7 +11899,7 @@ class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (hAsync(Host, { key: '61eba0f85db952b244052a3ee2ef7b7f87fd326c' }, hAsync("slot", { key: '44c72cba8610442c45386055285fcc81b9fccc4f', name: "trigger" }), hAsync("dialog", { key: 'db3983ac428f7e537037884f5556d97330928238', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: '9ec2a2df306d68ac4cea2c5b2c303d3b491d5e34', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'a586462512605de60726b912897fa16c39f8f68f', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '95eb4b492442aa0eb43dcab3f9111d9961421322', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: 'f9c1cf75b545166afc4dbb3d650e90042a83ea7a', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: '7716af492453f1a9f142aaf2a8af06689e4ded82' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (hAsync(Host, { key: '97fcd67a39e1ade8b2c85280d98aa756e693fdaf' }, hAsync("slot", { key: 'cd2126fc88215305b1229e03c70ee8efbd4bd518', name: "trigger" }), hAsync("dialog", { key: 'f7d40530e0f0646e1d8c415c0ec341e959e142e6', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: '44c81193f1946a1ae0819e96d0217bf986c6e99a', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: '5c2cf4e7434903f72ba814af716ce93826caaa3a', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '97b57d2340aaf1cd04e49d0f4e594b2de5295809', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: '27cd8b2058505be1e0ee0e380bf44582c37c525f', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: 'cef88d8a7fe28518842c206761adc2fd753b2648' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11799,7 +12015,7 @@ class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '11bfb772cb942d91363b9636f0baf10d33ce6bbd' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '5756a0cc697188c3fdee2930b1c6ae7922af71cc' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11855,7 +12071,7 @@ class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7658d8f0517e63b3688b938108e8c3a6df788a77' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '850e2408cb7a35903be3bc51fbee000fc58f4a76' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
     }
     get el() { return getElement(this); }
     static get style() { return NvDialogheaderStyle0; }
@@ -11992,13 +12208,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '1d627199f94d133d82bbef8f20de86590d9a3813', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: 'bca54e59576da2ec632a7ef7c5f8adb6fb3c77fb', class: "input-container" }, hAsync("input", { key: '4f27772a35e74cc945fc4de202099866fbd8a317', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (hAsync(Host, { key: '98f9dfdadab534193e7076f929c9820a231fecba', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '5a4d02d46b7c8c8930c24f794452180d58604ffe', class: "input-container" }, hAsync("input", { key: 'f7a4002a5fb9800ed4036638773ac42c49d4ae0f', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), hAsync("span", { key: 'd575209c82fe0cbb4f3136a50eb78a9db12cacc0', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'c265cb54bc4d76962203e8ee0298508e9f96bc58', name: "checked-icon" }, hAsync("svg", { key: '03d326e69ac11bf22bc3ce43a80023f8c2ff8401', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'ae602d5613c82569f89f97d9e1b6994940f03f9c', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '9f90d9b9a63a50bd0ecd4433b390d4c03604e124', name: "indeterminate-icon" }, hAsync("svg", { key: '7681c9b1203240f419fb7cf93644cef77f8438f6', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'c28a5d22adace616ede31baa3a4edbc8cb899f01', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '9213ad654a4c4f9576160c80195aec378559f2a0', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '73f6c22fe57659b0618216e69289a5704ac231eb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'fd70342006329609c2b0f9b501d0e2e7ad311f07', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '17fb2ed0060b24b1ef797efe34b53c94a755a1ac', class: "description" }, hAsync("slot", { key: '96d6c1b135f716de40c1223f35a479d3c8cc6c0d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c63392b6d315d5104087561ca2abf166e190f0f7', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '154010b1ec725f95d88bbf18a9e5d309b73affdd', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: '56a2547ecf96ef3f7f28054592471323497cb94f', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'af4e10bd52b42850c8348e0aed8c90a7e700d64a', name: "checked-icon" }, hAsync("svg", { key: '105847f526c391566cef42fa35d94fbaba0e8984', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '41e221d5f3eab7a4cc88d4ed9454f198d69ec815', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '3a1f5ffdc34a1ecdc1bb7f1b5347e1f12f5f690d', name: "indeterminate-icon" }, hAsync("svg", { key: '1b68c27172d5b6b9ba2419d278c0ac0299d7a4b7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '7b2f4e5fe1d961fad290aade639b9807446f34ba', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'd472d7d8901ff7de37fe370bf5d637fc8ae6069d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c8dbda4d6f9cb757476c9a96934599171f6ea7ae', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '3c0ec17aeb856457b63981fd0e21ead69ca3af0f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dff6c3a69496324cabcf25ae7639c98a7d908769', class: "description" }, hAsync("slot", { key: '498c8216c9a0a537f1aa2a542b3caa688b76e55d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6c584da0ad93e7f0ad62610d760c36d77b1a6fc6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '93df382e666707cdde3133daae7aa66914215149', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -16055,12 +16271,12 @@ class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c7df11a97881887a55ebcedcb2b92aa1ac24097e' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a1b973f2de3b2510e7ed9c4a02d38ebc96cf5261', htmlFor: this.inputId }, hAsync("slot", { key: '8a236ef847c3c65994fa47fad12f7c1a84820859', name: "label" }, this.label))), hAsync("nv-popover", { key: '76448ee54d85eeed56bc700b6cf5c92bfbad75b3', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '1e3610ab28f294d1075aa78a971ee80a2c5f67bc', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '1ddf6042b74ba760238a92a4bd76e1385ed5b964', name: "before-input" }), hAsync("div", { key: 'ed60189f121928bc42fdf6f419a92fe2733ad2a3', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '27d9c9302a8cb2d9d803020e2bc7b86b8c2c673b', name: "leading-input" }), hAsync("input", { key: 'c8edffba97c6c51ef545c218459a8ce80698b3c4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), hAsync("nv-iconbutton", { key: 'e69bf0edb9726c201659f5a4aa7453eb3f5067ac', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (hAsync(Host, { key: '817d7baa3525b53962f9afe3d1eb56d7fcbcaf0e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '00faded19c22c4883b7ef4de71d90c13c287d60d', htmlFor: this.inputId }, hAsync("slot", { key: '48b7e470d654b9f07c3eba400145b8936c9eb27e', name: "label" }, this.label))), hAsync("nv-popover", { key: '5b8e57124c0a08097874ac9ad0280908c3f2e330', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '902097ce5a7f208ac97f72a847d68b80cd16419a', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '909ff8453e9e48516582c64dae0762987cbd5986', name: "before-input" }), hAsync("div", { key: 'e62714e613e9bffc5a6a302d72cdfea75555756a', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9d4e6bd15fe09bee974676032d4b75a73f733674', name: "leading-input" }), hAsync("input", { key: '4565589e720150706096cbdeeadefb84ee836c39', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), hAsync("nv-iconbutton", { key: '115ba5c4e9bbd502c51d04894a5cf88f98167231', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'd8231b608d9d08abb88e261118f9dd02cf8f5c2c', name: "after-input" })), hAsync("div", { key: 'c8bb3d4a753e8ad311db1947717f1dad109999c1', slot: "content" }, hAsync("nv-calendar", { key: 'bd73bc48c48e708f3655c112b874135003f1a16f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dee7ad7eaa2854756e616ef033264c4a2cf8f96c', class: "description" }, hAsync("slot", { key: '5556239ae6ed962cd2d51944d2f394f8d7741fb0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '82ba5366e053563fe5fc9471493fb99c78bf078f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '1fda22554d69a5998b99d3f8c95362a926b44fb3' })));
+            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: '3df2883ebe71fa1dd437f5dc62d82019b3550b88', name: "after-input" })), hAsync("div", { key: '61241669d9599d23f2cf024d8e65becdafe58847', slot: "content" }, hAsync("nv-calendar", { key: 'dd3c67a46e8addbf1017eaf578447a09a3dd9e66', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f835c89363c45529512e156b313cb35f71ef5264', class: "description" }, hAsync("slot", { key: '738d49ee6e525310375eba5da057573104d3c2ed', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '7c5c07db1af3423efc9a1b1127c1b3cbdede0a28', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'ccfd311cbbb56b9b336317d0e543fc57676a60d3' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16442,15 +16658,15 @@ class NvFielddaterange {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '357f98b39d7cade75f24caaba007eec4279cd24e' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0731f0d5ad79d323dade2f023f5a9c3088c744b2', htmlFor: this.startInputId }, hAsync("slot", { key: '75309cb4161e1652f0445ba924c6d7a58de140c3', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f66e2544956ea3dedd249719a4b436077bdc85c0', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'c1a3b117056a521f6f778a978b4bc8edac32a111', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '5fbe2aff9687456dd299792016904470386dfb94', name: "before-input" }), hAsync("div", { key: '46726768e9724e983063479e0f301c3d09169669', class: "input-container" }, hAsync("slot", { key: 'f4a405be4a98566bd40dc9d19087d2c5c0ac798f', name: "leading-input" }), hAsync("div", { key: 'd1abc5e239272e57f0fdbf4c0e9e76ca86230996', class: "range-inputs" }, hAsync("input", { key: 'd13584d024b50162d47a74e68592c05206484876', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), hAsync("svg", { key: '641dda60614637939d8ffaa25052e8f2bcb234d8', 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: 'c6245bd4ffa2bb12df3a295a6a10ce8386b5f54b', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: 'c1b3400148e367dae092eecec9da410cfa2e7547', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: '08bc414df54afe457775aec97897ed0acf2dca38', d: "M15 12h6" }), hAsync("path", { key: 'd9136526597df7a8193f71414caba9481248ebf2', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: '1d194b3449c53be3f05458ade789e99998861371', d: "M3 12h6" })), hAsync("input", { key: '5ed58df2a2680b1fa66916f65c2dc48dc648e461', 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 })), hAsync("nv-iconbutton", { key: 'e06b3a9326245e581998a60627634560be7124f0', 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: 'bf0ea3f63a5476e7ff4a6954fb200c15a493d6ac', name: "after-input" })), hAsync("div", { key: '32fcfbafe86ce08d87d597d40ad25702dd059ed6', slot: "content" }, hAsync("nv-calendar", { key: 'ef670618ecca933d976adefaec9996f172f95d7a', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
+        return (hAsync(Host, { key: '965223047219ae767b07ccecb0a00580ea39c232' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '096d6a34148da30d61686024b5891e7e15cd92e2', htmlFor: this.startInputId }, hAsync("slot", { key: 'ee6e84ef1927ad809e7dddb2f4ad5ef7380d0bca', name: "label" }, this.label))), hAsync("nv-popover", { key: '1a0549e85ab73157b379fcbcee014a7d85be9752', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd9fc4c8f379e3c1884867c87bcaa67b2da1c64ae', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '4189696f3e877c19d4c24b09377b2ab0ce9aa437', name: "before-input" }), hAsync("div", { key: '98025c8fc29121c736deb3042e961ef0eb1442fe', class: "input-container" }, hAsync("slot", { key: '897481f836e33fd70a7c3b083a4e9b3db87637f2', name: "leading-input" }), hAsync("div", { key: '788df58693fafaf8c78645b81d1b09a828138ccf', class: "range-inputs" }, hAsync("input", { key: '7966b844668ca4cb02ac34886b62ee24cb7b1399', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), hAsync("svg", { key: '67c0b68f0fb32ce122f9d4e5b1240440f3b649d0', 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: 'eb68f32a768c1c48b51a45ddba3f85357b8045e6', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: 'b8ccaf592dc2d36719a8418800a736b06d1c1775', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: 'c4b8d8e8ffad9a339abcde63a9a0feb2ddc771d3', d: "M15 12h6" }), hAsync("path", { key: '7a28c7086d7085163ff8d885acd7434b4e5ea69a', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: '39917978c25b13a270f0852818b31868f2034832', d: "M3 12h6" })), hAsync("input", { key: 'aaad42e407d1fe8e31a7e7c153e2d4cd35d8d2df', 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 })), hAsync("nv-iconbutton", { key: '04701e7bdf80a869f8a5f519141ac99c0077c20b', 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: 'cf1a48dcd20b4e363a746c9f26ecae8085e8ebbd', name: "after-input" })), hAsync("div", { key: 'a36a223b6d5edd30bb9a4590d059caede5412b6a', slot: "content" }, hAsync("nv-calendar", { key: '1ff22f214d648c4bb35455cf477529251c436e2d', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
                 ? JSON.stringify({
                     start: this.startValue,
                     end: this.endValue,
                 })
                 : '', 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" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '15dbab39d7ceaf406246462812d8a1307dad40bb', class: "description" }, hAsync("slot", { key: '1c5f74676b312a6bbca659a783473da7c3936829', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8f48ac666968cddfdd2c282366ed2f6dccd3013c', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '92dc673a2d62a34d3830cf6644b84103b73b695b' })));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '780f82060de810eb394285f4799511d2223312a3', class: "description" }, hAsync("slot", { key: '326cbf626387738b9997f3b4d452c50ea2b3d5b2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6043f611a60f14976b8572e975621fac57b18f89', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '129fe5bcd6c5bd9449242dc6b4f0e1c90ae31082' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16578,10 +16794,6 @@ class NvFielddropdown {
         /** The text entered by the user for filtering dropdown items. */
         this.filterText = '';
         this.selectedValues = new Set();
-        /**
-         * Options configuration for the dropdown items.
-         */
-        this.parsedOptions = [];
         this.handleInputContainerClick = (event) => {
             if (this.disabled || this.readonly) {
                 return;
@@ -16624,17 +16836,17 @@ class NvFielddropdown {
             this.open = !this.open;
         };
         this.getSelectedLabel = () => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             if (!this.value)
                 return '';
-            if (this.parsedOptions.length > 1) {
-                const matchingItem = this.parsedOptions.find(option => option.value === this.value);
-                return (_b = (_a = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _a !== void 0 ? _a : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _b !== void 0 ? _b : this.value;
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                const matchingItem = this.options.find(option => option.value === this.value);
+                return (_c = (_b = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _b !== void 0 ? _b : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _c !== void 0 ? _c : this.value;
             }
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
             const matchingItem = items.find(item => item.value === this.value);
             const selectedLabel = matchingItem
-                ? (_e = (_c = matchingItem.label) !== null && _c !== void 0 ? _c : (_d = matchingItem.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : matchingItem.value
+                ? (_f = (_d = matchingItem.label) !== null && _d !== void 0 ? _d : (_e = matchingItem.textContent) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : matchingItem.value
                 : '';
             return selectedLabel;
         };
@@ -16671,23 +16883,12 @@ class NvFielddropdown {
     }
     handleOptionsChange(newValue) {
         var _a;
-        if (newValue) {
-            try {
-                const parsedOpts = JSON.parse(newValue);
-                this.parsedOptions = [...parsedOpts];
-                if (!this.value) {
-                    const defaultValue = parsedOpts.find(option => option.selected);
-                    this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
-                    this.updateSelectedItem(this.value);
-                }
-            }
-            catch (error) {
-                console.error('nv-fielddropdown: error parsing options:', error);
-                this.parsedOptions = [];
-            }
-        }
-        else {
-            this.parsedOptions = [];
+        if (!newValue)
+            return;
+        if (!this.value) {
+            const defaultValue = newValue.find(option => option.selected);
+            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
+            this.updateSelectedItem(this.value);
         }
     }
     handleBlur(event) {
@@ -16842,9 +17043,10 @@ class NvFielddropdown {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9624c909eb35f0e6d9a9875cbeaec8ffb8122d40', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '27389b0b422af6b7714cea6654ac243d1e9c242f', htmlFor: this.inputId }, hAsync("slot", { key: 'd77573395386ba0c0afa2233f420fa250b86ac9f', name: "label" }, this.label))), hAsync("nv-popover", { key: '0b1dda746e71b810ab6050cd8ef6a6bb9a44866e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '437a94f2230891674dd9c820595fcecfcea48e77', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'e01c2e4bda2806b21c0016bfe710969044994dfc', name: "before-input" }), hAsync("div", { key: '310d387f5cc22ad85232c0f491763a810833befc', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c16096b15be3fe16ad8f5fb4a730050f6f797342', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '208c945944cddcb1c67a3b560428f21ca056b17b', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: 'e3797d5e47e54fd328c0bcd86d14e80ee5e21e17', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '1ccb8f3bb1ad086339b9888bf89e929164576910', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '92a66b2da4f7ada21fdb8199d2b047840050be13', name: "after-input" })), hAsync("div", { key: '51ba49500cb0e03531c5b4b939e76817f432be57', slot: "content" }, this.parsedOptions.length > 0 ? (hAsync("ul", null, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3cb31c8bfb17db1862af12e817f6646480cd697c', class: "description" }, hAsync("slot", { key: '830538f4e63f9de6a613fcce23a80370d941e9da', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8ffee4c7d2c9a93bc4de344f812ff568e3d6a23e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8f534be6233f54e6b43e2271d0a151a02148d5d8', name: "error-description" }, this.errorDescription)))));
+        var _a;
+        return (hAsync(Host, { key: '6c23d4cfd361e1f40a2181db66692eb0d6326bfe', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'db9a30ece9e669c70b18193b3cc7d14967a5e071', htmlFor: this.inputId }, hAsync("slot", { key: 'b7a721b25b82646d34ce141526775f24a9849f4b', name: "label" }, this.label))), hAsync("nv-popover", { key: '724756cb69b4b6ef8837e6f7f53a65eb42a43b5e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '0092cd2b78234ec2e0cdc70433246a2985b7e57f', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '519c1a407c8309861673b9eadb723edb0c70ae68', name: "before-input" }), hAsync("div", { key: 'd88af43846337d9bfd6aeb4f28ab2dc7e56de4e8', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '8e91459d89acbf7a1cde5e75c520b11b109e810d', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '55efb1100997af6b9b4ee41c489a9e628d36b749', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '69cfcac7b21d0e9faf9bad7f306bab187a761758', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '5b773edca6a5028eb8cedb42632a9c5b6e8b3d36', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'c225279e1ec938e2fbe672ce02e8d2a79cb7ff1e', name: "after-input" })), hAsync("div", { key: '94905d2f6a0b7faae17540139c0bd2458e4c98ae', slot: "content" }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync("ul", null, this.options.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5d0b74de616aefa056d17cb70fab0d36ab9b41c3', class: "description" }, hAsync("slot", { key: 'bab9d8222164d2227c6024ac2bd5675142ccb964', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '58596e0c753e8bb90f9d21432607427b0a029d64', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '6062d632aee6e825cd2d17a22180cb24d66e2864', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -16872,16 +17074,15 @@ class NvFielddropdown {
             "disabled": [516],
             "emptyResult": [513, "empty-result"],
             "filterable": [516],
-            "options": [513],
+            "options": [16],
             "autofocus": [516],
             "filterText": [32],
             "selectedValues": [32],
-            "parsedOptions": [32],
             "getFilterText": [64]
         },
         "$listeners$": [[0, "dropdownItemSelected", "handleDropdownItemSelected"], [0, "openChanged", "handleOpenChanged"], [2, "blur", "handleBlur"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["inputId", "input-id"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["name", "name"], ["open", "open"], ["autocomplete", "autocomplete"], ["value", "value"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["emptyResult", "empty-result"], ["filterable", "filterable"], ["options", "options"], ["autofocus", "autofocus"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["name", "name"], ["open", "open"], ["autocomplete", "autocomplete"], ["value", "value"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["emptyResult", "empty-result"], ["filterable", "filterable"], ["autofocus", "autofocus"]]
     }; }
 }
 
@@ -16944,7 +17145,7 @@ class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (hAsync("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, hAsync("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (hAsync(Host, { key: '86699901e52c35392ae5e60013f542427973a626', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: 'f2d893f0692821fc0e918da9283eb174c3429173' }), !this.composed && (hAsync("div", { key: '5e62842ee3b0e79333f99a3ec8d92dd843ebd96e', class: "text-wrapper" }, hAsync("span", { key: 'baa00ac59b5d85d912f34fc16fbf82d87af849e2', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: 'f9a5082e4cee6b68531809f9861e3da83b3001d6', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -17009,7 +17210,7 @@ class NvFielddropdownitemcheck {
         };
     }
     render() {
-        return (hAsync(Host, { key: '69e403031200efea98b211ed6d69d3a21338bea0', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '0d12dbeef8532087d950bfc4e14994821b1cd3f1', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (hAsync(Host, { key: '93a97fb36d69bd837b27cdbfa31adc5a7a71dab4', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '7afd9b55ce6911c327fae658304fa313fc908d45', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
@@ -17098,10 +17299,6 @@ class NvFieldmultiselect {
          * State of the multiselect popover.
          */
         this.open = false;
-        /**
-         * Options configuration for the multiselect items.
-         */
-        this.parsedOptions = [];
         /**
          * List of selected values in the multiselect.
          */
@@ -17119,12 +17316,6 @@ class NvFieldmultiselect {
          * @default 300
          */
         this.debounceDelay = 300;
-        /**
-         * State for the mode of the multiselect.
-         * @type {'options' | 'slots'}
-         * @default 'options'
-         */
-        this.modeState = 'options'; // Default value
         this.isHandlingEscape = false;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
@@ -17145,7 +17336,7 @@ class NvFieldmultiselect {
                 item.style.display = '';
             });
             // Reorder options without the divider since there are no selected elements
-            this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
+            this.options = this.options.filter(option => !option.isDivider);
             // Reorder options without the divider since there are no selected elements
             this.reorderOptionsContent();
         };
@@ -17173,13 +17364,6 @@ class NvFieldmultiselect {
                 return;
             }
             this.filterText = '';
-            // Only reorder based on the mode
-            if (this.modeState === 'options') {
-                this.reorderOptionsContent();
-            }
-            else {
-                this.reorderSlotContent();
-            }
             // Reset filter if needed
             if (this.filterable) {
                 this.resetFilter();
@@ -17348,7 +17532,7 @@ class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "content" }, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "content" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
@@ -17371,13 +17555,13 @@ class NvFieldmultiselect {
      * Set the mode state and handle options change.
      */
     componentWillLoad() {
-        this.modeState = this.options ? 'options' : 'slots';
+        var _a;
         // Don't call handleOptionsChange if we are in slots mode
-        if (this.modeState === 'options') {
+        if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Specific initialization for slots mode
-        if (this.modeState === 'slots') {
+        if (!this.options) {
             Promise.resolve().then(() => {
                 const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
                 // Initialize selectedValues with checked items
@@ -17391,8 +17575,8 @@ class NvFieldmultiselect {
             });
         }
         // Initialize the sorted options array with the parsed options for initial rendering
-        if (this.modeState === 'options') {
-            this.sortedOptions = [...this.parsedOptions];
+        if (this.options) {
+            this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
         }
         // Apply filtering if the multiselect is filterable and there is a value
         if (this.filterable && this.value) {
@@ -17408,10 +17592,8 @@ class NvFieldmultiselect {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        if (this.modeState === 'options') {
-            requestAnimationFrame(() => {
-                this.reorderOptionsContent();
-            });
+        if (this.options) {
+            this.handleOptionsChange(this.options);
         }
     }
     /**
@@ -17436,6 +17618,12 @@ class NvFieldmultiselect {
         else {
             this.handlePopoverClose();
         }
+        if (this.options) {
+            this.reorderOptionsContent();
+        }
+        else {
+            this.reorderSlotContent();
+        }
     }
     /**
      * Listen for the `itemChecked` event emitted by child items.
@@ -17469,41 +17657,13 @@ class NvFieldmultiselect {
             console.warn('Received itemChecked event with undefined or null value'); // Warning log
         }
     }
-    /**
-     * Emitted when the options change.
-     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
-     */
     handleOptionsChange(newValue) {
-        if (typeof newValue === 'string') {
-            try {
-                const parsedOpts = JSON.parse(newValue);
-                this.selectedValues = parsedOpts
-                    .filter(option => option.checked)
-                    .map(option => option.value);
-                this.parsedOptions = [...parsedOpts];
-            }
-            catch (error) {
-                console.error('Error parsing options:', error);
-                this.parsedOptions = [];
-            }
-        }
-        else if (Array.isArray(newValue)) {
-            this.selectedValues = newValue
-                .filter(option => option.checked)
-                .map(option => option.value);
-            this.parsedOptions = [...newValue];
-        }
-        else {
-            this.parsedOptions = [];
-        }
-        // Wait for the options to be fully loaded
-        Promise.resolve().then(() => {
-            requestAnimationFrame(() => {
-                if (this.modeState === 'options') {
-                    this.reorderOptionsContent();
-                }
-            });
-        });
+        if (!newValue)
+            return;
+        this.selectedValues = newValue
+            .filter(option => option.checked)
+            .map(option => option.value);
+        this.reorderOptionsContent();
     }
     /**
      * Emitted when the value changes.
@@ -17600,7 +17760,7 @@ class NvFieldmultiselect {
      * Reorder the content of the slot.
      */
     reorderSlotContent() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -17664,7 +17824,7 @@ class NvFieldmultiselect {
             existingEmptyMessage.remove();
         }
         if (!this.filterText.trim()) {
-            if (this.parsedOptions && this.parsedOptions.length > 0) {
+            if (this.options && this.options.length > 0) {
                 // Reset options display
                 const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
                 items.forEach(item => {
@@ -17687,11 +17847,11 @@ class NvFieldmultiselect {
         }
         const normalizedFilter = this.normalizeText(this.filterText);
         let hasVisibleItems = false;
-        if (this.parsedOptions && this.parsedOptions.length > 0) {
+        if (this.options && this.options.length > 0) {
             // Filter options mode
             const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
-                const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+                const option = this.options.find(opt => opt.value === item.getAttribute('value'));
                 if (option && !option.isDivider) {
                     const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
                         this.normalizeText(option.value).includes(normalizedFilter);
@@ -17776,7 +17936,7 @@ class NvFieldmultiselect {
      * Filter multiselect items in slots mode
      */
     filterSlotsItems() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -17912,7 +18072,7 @@ class NvFieldmultiselect {
             // Do the reorder and wait a bit before closing
             const handleEscape = async () => {
                 this.isHandlingEscape = true; // Disable the hide listener
-                if (this.modeState === 'options') {
+                if (this.options) {
                     this.reorderOptionsContent();
                 }
                 else {
@@ -18024,9 +18184,7 @@ class NvFieldmultiselect {
      * @returns {any} The JSX for the component
      */
     render() {
-        return this.modeState === 'options'
-            ? this.renderOptionsMode()
-            : this.renderSlotsMode();
+        return this.options ? this.renderOptionsMode() : this.renderSlotsMode();
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18056,14 +18214,12 @@ class NvFieldmultiselect {
             "filterable": [516],
             "value": [1537],
             "open": [1540],
-            "options": [513],
+            "options": [1040],
             "debounceDelay": [514, "debounce-delay"],
             "autofocus": [516],
-            "parsedOptions": [32],
             "selectedValues": [32],
             "sortedOptions": [32],
             "filterText": [32],
-            "modeState": [32],
             "isHandlingEscape": [32],
             "getFilterText": [64],
             "resetFilter": [64],
@@ -18071,7 +18227,7 @@ class NvFieldmultiselect {
         },
         "$listeners$": [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["maxHeight", "max-height"], ["badgeLabel", "badge-label"], ["emptyResult", "empty-result"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["autocomplete", "autocomplete"], ["filterable", "filterable"], ["value", "value"], ["open", "open"], ["options", "options"], ["debounceDelay", "debounce-delay"], ["autofocus", "autofocus"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["maxHeight", "max-height"], ["badgeLabel", "badge-label"], ["emptyResult", "empty-result"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["autocomplete", "autocomplete"], ["filterable", "filterable"], ["value", "value"], ["open", "open"], ["debounceDelay", "debounce-delay"], ["autofocus", "autofocus"]]
     }; }
 }
 
@@ -18190,9 +18346,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '99076502efb577ad65e43827f4d4959fb1f84055' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '365821e9e3cb25367591680279f05d951f6a5fd9', htmlFor: this.inputId }, hAsync("slot", { key: '92273b991f6c6bd34fe6a302dedb808d46abb71d', name: "label" }, this.label))), hAsync("div", { key: 'ab849355fa1719ed40b5379a8aeee160f98ea798', class: "input-wrapper" }, hAsync("slot", { key: '71e4de7753f3880756cd763a7a8955832066d0e7', name: "before-input" }), hAsync("div", { key: '6da56e990c4ad0329c5d974868e9520cb5ac7a99', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd09eb9350067116d5236142951f0e7ed81d9aa5c', name: "leading-input" }), hAsync("input", { key: '6df1d2f3acb880000b57e5be990f6d843c7d3b2c', 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: '85deaf9197825370d0bc7d81bd82cf9fd86b7a05', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '68ed66eb7a9af38f974e515d554eed6e3d28a915', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '16b0e4b303cce4ee7df29ea411e8fee808e5ddb0', class: "stepper" }, hAsync("nv-iconbutton", { key: '6dec84d7c05b467b5178177351e6fa769d2a9433', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), hAsync("nv-iconbutton", { key: '66391588b961555aa20a1974098c114aadceadd1', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), hAsync("slot", { key: '4549e591971e83d5d14f08b56a8d5357c5d6aaf0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'cef21ffaf75f976708d0c8b51f928daea26f1221', class: "description" }, hAsync("slot", { key: 'be36b7c3c6a606847805dc1a50f762a80155d695', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '91b5b8c969520bb10bccd59066ddea32d6fa58f3', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7e0729d42390a1fc62d320841de4e016e01e2485', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'e054d1e05c0623bf3d5d78c2bafb6d096dbcbd08' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0743432faff56e8256b2a30fab68ced0592bbf6a', htmlFor: this.inputId }, hAsync("slot", { key: '709f68c3f4bf6ade475cd6afbee5c9912c782c43', name: "label" }, this.label))), hAsync("div", { key: '5798b0faf23bc671aeda3273dcfff7c1d1ca4109', class: "input-wrapper" }, hAsync("slot", { key: '47b9f0ef000d2d98e2e3ad1c1f4191ce91c69266', name: "before-input" }), hAsync("div", { key: '082d2ab64b892cc994955b723d1ab342414061fb', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '34511207a7ebc1cc5fe8cc91d05f4fa549fda316', name: "leading-input" }), hAsync("input", { key: '20f96b319b6e7528d738bdc31152649575409dd1', 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: '2b05afbbc94bd39dd82a270511e4372536ee80ba', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '95d74e6298e49d422b19bf080d3e2de25c2ad8e2', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '5c665de10e9650003b127997cd6010e35d7d0b7a', class: "stepper" }, hAsync("nv-iconbutton", { key: '9702ee4778623862e67d29a56f7790af364786bf', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '20fc509c42230f6768d98e4144db12afae3649ef', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'd432d4e6fb8c4fd67c6c972b5c967e093cadfe68', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e1d585c32f4cff50d84f5d1b6696856c8c875ef7', class: "description" }, hAsync("slot", { key: '860b5fb8ba3e24fc728021b238b371178ae54ead', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'aaa707753b98415ca4e329fab9b45bfc3b42525a', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'f8c0910451550baa82663500a7c0339064720428', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18335,9 +18491,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '79c87deb52017b4500b695a513dc4100e7359d97' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bd4785278a21ea61de41ed694e429228286f853b', htmlFor: this.inputId }, hAsync("slot", { key: '7c3cd8188e35aa00c0377ffdefb1d5e9c380ac59', name: "label" }, this.label))), hAsync("div", { key: '61f0e04b056ba1b08e9e3ede89d5975b4549705f', class: "input-wrapper" }, hAsync("slot", { key: '96070a1d584277de90962700a9e6764f0bd36a38', name: "before-input" }), hAsync("div", { key: 'ea04afadccfb828f5d081b1f30ef3d4619659b80', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'cfd54cbdf3d9d03c31cdd781491097cc6db405bd', name: "leading-input" }), hAsync("input", { key: '04bf191014aef621d314973d531533ffa50d8b2f', 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: 'b2e57a5f496bda92dbb877850e67ffb921a288df', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '2664cbcbfd7aa04a5292a6821fa79a1cb12e1578', 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: '959a8d098548c85db4b1a8f9c0d2d8a8cdc5e386', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c7b85cb8d2f1f42d133e9937bccb8d3edd9d1cf8', class: "description" }, hAsync("slot", { key: 'fd41c7389e871ad4d57df283f9872c6964176bb3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '014db98dbf132a493b8842ffcc45ced808e9f52c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '3909a8e0ac73dae4731e23806875f26bfb2185ff', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '4a6de90f24bd6607293d616d60f6d742c46b04a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '715f5935de3aa0f0f7b6aa9aa72c409a3875a849', htmlFor: this.inputId }, hAsync("slot", { key: 'da11187833b12acfae578024bb67d717efbafaa1', name: "label" }, this.label))), hAsync("div", { key: 'a669823e6c5aea5b4e0aacf0bfc1c8f7dbe67bab', class: "input-wrapper" }, hAsync("slot", { key: '98b2b6eaaa867228a667bec2920c640ff0b829c7', name: "before-input" }), hAsync("div", { key: 'fc896f9018563e80ea0f2aa1e2eb7992fd4a854c', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '715814e77d1ba40463253d12751129f2c0d05407', name: "leading-input" }), hAsync("input", { key: '8101af836f80da56ac9e2b859ab9fd5b6d254b91', 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: 'fdf5caa936a43961bd3f00f5d50635124b57ff0b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '9b9e70d855fca2ea1ff2769609af05fc7d3fd1c2', 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: '4458e83104562509b53b05faf3a316a5502b76b7', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '91dcddd8a80abccaaffda9cd583759bebf376456', class: "description" }, hAsync("slot", { key: 'fe6da6eb725b3866faf138e848f89152f0f24a00', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bfe57a6b0f199c3b371a2036a7b8787f40f639a4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '529e34f2197c64ac768df11251bb285fec1f2cd5', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18464,9 +18620,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'fd326df67c5617156ef00d50d789d3328584788e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'fae44c510d1f43c508a837b94cc16f8094617813', 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: 'd4e9378e300691439bf57a580e8381a8142d8c78', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '56cdbda0feb823825f5ba5e125a478db23321379', htmlFor: this.inputId }, hAsync("slot", { key: '83e67f52228b7d6313fd35cd4a46edeeabc83a1b', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8bb15a57d23f2826dfff31a7a3101ed263618e5f', class: "description" }, hAsync("slot", { key: '6d339430073e1eada1557ea762d9abeda7f338e1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd4b3c8ef17c70442839c61cf19bc0d9598be57c2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ca609be33a5253f85ed5101786c1981101f83743', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: 'e1a92204a7d3e07de9485873906ed57dc2f4dfb1', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '8161b36c31b960a4ca4f7a1291a9cdbdd830429c', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '8d5ff5b5742a96dc9d1167298859a7a97347eeab', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '7417fe1c5041e20fd63abca907fd75fe7d3b49d2', htmlFor: this.inputId }, hAsync("slot", { key: 'e29a092dbd19c912c496e1ae56d9f46bcb44208c', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a894108a6e5235010d18547a39daf526e066e432', class: "description" }, hAsync("slot", { key: 'c67b5b5a5d2ef1f27e69eb251e9a15c98909db85', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '18ea2ae58994289900f28c0e6220e113b45b2a92', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '52a10763fb7bf688e5a1de5e854aa0d80bc996f4', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18846,13 +19002,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: '017364e5a5df156be42741e3acc4457414f8e6ee' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2e4b247018a759307ea5e3920a4066a2c1c14e92', htmlFor: this.inputId }, hAsync("slot", { key: '1bbad9d0b4be9fc35c0cc63859ba6dcdb4375377', name: "label" }, this.label))), hAsync("div", { key: '572073518f738014fd27d8de84fc856a01889636', class: "select-wrapper" }, hAsync("slot", { key: '490730d4fc16f78284a8ca40ab952870eb01b503', name: "before-input" }), hAsync("div", { key: 'a92ea3295f64ce1c6d8da5cf439d7c796493fdf5', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'f80e732415ec42a4c7b02922f1b50d2cf3950e88', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'b1ee7e799434d0e36d1f98031338137347bcedea', 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: '38cb85c6698c5541793a1e5d34b36417cd743759' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd81b9837c43c1a19a2d87b51cede9e7c32bda50c', htmlFor: this.inputId }, hAsync("slot", { key: '9d7c10281b117f2006ca1997f91e4e0b99fc5ab5', name: "label" }, this.label))), hAsync("div", { key: '2796a31f2aac0604054c4542564fca77c2ac4272', class: "select-wrapper" }, hAsync("slot", { key: '0407c6379597b09e1bb11ee6b43110b1d5fb98ea', name: "before-input" }), hAsync("div", { key: 'c0ae999fc017fb0352b0a1cfe2ff75e313955f23', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'ea2b63ddb3b70521b63e15efd1c3daf06c38cc0a', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'f543f67c0360ac315ed873eb14a93af35dd90670', 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: '9a8b48a7a41522b09b65a5c76b7e861b5d6eef49', 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: 'b2ae3854c40ea798069417127cd763c8a0db040e', 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: '7ecac0a159ca2b4925b8a940c80f8aef94a2ca1d', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'fd3d75a5c621a49f45550d9596f4910ef01a56b2', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '45b3e11a48f5f700ac9c21ba276ee9c93640d0d9', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '07171fbe1fc88f4c7af0513ed718376ce1a1aeb3', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '096bf49c55359062fc790d31660b331a5988ad22', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7b292eeb3a1ca29b7cb1b631926b591183ab50fc', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'a2fdc1929f7aa2571cd11d01e2c1ed165afb856c', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3d189e87ff7cee9a43ccad85c6e84fcdb3343f1f', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '515059b75c8e2c1e600a28124135cbd7af87ccbf', 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: 'dd59af14105272eaa77218136f5b7b0b40a5b40b', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '719e239472f6b697298682cc8d1b10933d3504ec', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5d63d5ddbcd8f46296bc067afd45f3921f4f3917', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '978a540682409a88ce55d2219dbeb9f2fc82cd51', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '3483846a9f38be08caaf6f2b02332caefae0cbed', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5b47c05942549b6e2238696132ab2f3c9af5b7f0', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '46b7f053ae343949b540240e1ec438850bb9a015', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6126ab6967fc430c6a1d3ddfb191a98a8c2ecce9', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'afc6a0443c6fe1175213d36a2c59ffefe2923eab', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19005,9 +19161,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ffcbe1c8f14257f6380d28f2c50fe8b77ae73027' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3b84598a05eedc7625312def01ca726dc68fa247', htmlFor: this.inputId }, hAsync("slot", { key: '8c8f0d2f86742dd0699b8b309cbea0dca1d294ce', name: "label" }, this.label))), hAsync("div", { key: 'c2adf3acc7780a7eba5d4762b7275d1c63304bf5', class: "input-wrapper" }, hAsync("slot", { key: 'c49756d1daaba476222ebda2df4854b1094655b3', name: "before-input" }), hAsync("div", { key: '723c34f09e6c073bdef2db799246da72ffd52703', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '4e94bcac72ac2e5147a8d5e33396a13359820009', name: "leading-input" }), hAsync("input", { key: '96cbf022912735445467320600e372fba03de4e4', 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 }), this.error && (hAsync("nv-icon", { key: '39a55c42a49006d316e5dcc5389793c6264d2b09', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'bf1b6040dbb392b5c46b3b9af665d7cdc7389d29', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: 'bb2256bf3fc5165e61f162fe89dd7be564a989c0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3d2c5a89247042184b3a110ca7982b793b0bd86a', class: "description" }, hAsync("slot", { key: '2358cc5217d6ba65b4d4baa927b397dbe62982e8', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cdef4117d71b8a6bdde19fea1a0f4070ba02ab2e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '66a2b100ab641aa9c2e22fdfc9a987bb86cd44a0', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'e4891525becd4b0757ec380d45d9694ebc6c3318' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1157e609be8150d014e9190dcf53f74bcee20119', htmlFor: this.inputId }, hAsync("slot", { key: '888fb12e994f6f4f47bc2be496cd74aeedb628c0', name: "label" }, this.label))), hAsync("div", { key: '0555b12dbbe5fa81f5af464d3b48c35b243aec32', class: "input-wrapper" }, hAsync("slot", { key: '5210a9b903c560775453741d8815286dbe8bbb53', name: "before-input" }), hAsync("div", { key: '7bc11232dfa46706982bf3645054a7a1f67832f9', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '87abc6976b432a3dc51246c97564108f9baccff8', name: "leading-input" }), hAsync("input", { key: 'b0c3e30bc5363f6b49ea1361005e125826184016', 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 }), this.error && (hAsync("nv-icon", { key: '5e359bc40906bbf2c63eb7d196dd8294b15dd672', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '4812b31e512bf388fa84f9d35a949de5f9b86d59', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '06922c63f02470be6c74ee6ba4bf93baabd03e57', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '960bcb53a55aed3e1b8cd1b193ad26f5c6b151fd', class: "description" }, hAsync("slot", { key: '07c09b8543e9b91928821a100869943de94a65a7', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '456d00a47f01f70938d99faa774da1a9e51b036d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '590aef8c37efd2fa472c9b7b92fd82d29c4e6d39', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19222,9 +19378,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b5d6707fa7ebbd64f3b1616c9f61746f394e347d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6fd76411b08da2d22d86d0a4ef81ce99534d0112', htmlFor: this.inputId }, hAsync("slot", { key: '634339fa1bd5ccb2627dab03117535b2bc09b9cc', name: "label" }, this.label))), hAsync("div", { key: '6a521f191ebae60a874c4d48a1872b7a61181c54', class: "textarea-wrapper" }, hAsync("div", { key: 'ecca606c8775282c5b21b8f8e12a9c98df7aa410', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '7547d01134c155c9f76e1978f08075d1e8ff50fd', 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: 'fc436e3cc4dbdf8730920173a74f4da249678e39', class: "description" }, hAsync("slot", { key: '27aa71e73818742bc92f3860dd0071eef182474a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cc3733783b2f5985358d1c21e502845f7bab8406', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '1db584479ed23d616d88dc9fc28fe1e0acd7a463', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '606902cda67b3f523ab32d8e9c6fd11b6bc0f3a7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3167dfd5f17028ad20a82b5646ccfa788a5bbb86', htmlFor: this.inputId }, hAsync("slot", { key: 'ae98d87f3e1b7cb2864b6b7e7183d3a37c1a7e14', name: "label" }, this.label))), hAsync("div", { key: '8f25bdadd8f94938dc9b6c631b0586fc6bcbc37c', class: "textarea-wrapper" }, hAsync("div", { key: '6568df9f332e8bca84445ba596d6eceaaed64b9e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'fca9ba5bd6925cc1a201625e5785ad451fc8849b', 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: 'c5c8c1999105df446a603a3e02f431ad37de4c5e', class: "description" }, hAsync("slot", { key: 'bbcea14c7585e1ff1c995eb4f21cb532a160ed40', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2d43d92b5c9b93faeac45bdcfa142d4dfd70511a', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '33514ea705969b353f11c49ca65090706e6aadf8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20248,26 +20404,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: 'd9b980ce6cf9d4c00da007608b03261983ae49b7', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ff69b45e9b30ee4b0dd2034c1e29b698796f8796', htmlFor: this.inputId }, hAsync("slot", { key: '6cfd62e39f69451c326b5266a3c8b33520366ac7', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f2c68b4286769203b9f4af8cc61375dc60795589', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'eb45e4d83e5d9754336bc7d03a2937931fa56378', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '644faecac37927eae57da8eb039a79154ebf5787', name: "before-input" }), hAsync("div", { key: '10b656c08d991100a5ef0fe87299af7a3d0a7831', class: "input-container" }, hAsync("slot", { key: '3908fc76c97f4a362974199f30bdc2535172e4dc', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: 'b68e32193ab056a230138dfbb2d14240fa700b1d', 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: 'fb5bc4740731089bf81ab7b24e57f24f966c5f92', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd9f44f4ab94a13a620df743979d95b1f59572bfe', htmlFor: this.inputId }, hAsync("slot", { key: 'fbc8176ea3443511764b2993939d1110fd932a5a', name: "label" }, this.label))), hAsync("nv-popover", { key: 'ea376ec38db428db158c998e8963e27048ef03b0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'fa825918cea4a64db76324f953645f6db7cb81b9', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '37d7fd2eae40e4f47e9b626c226d060cf5e350e2', name: "before-input" }), hAsync("div", { key: '6b73d8c9598bfaf470b5c5a455db0b08397cc8c8', class: "input-container" }, hAsync("slot", { key: '88f20151d7ccc1e3ad6f6aba4b5926cccc22c19c', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: '292ee8c62fd248b28fb46275ba06846d69b3b602', 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: 'ebef6f727c34aa8f9348c65c02ab970a409cce2e' }, ":"),
-            hAsync("input", { key: 'd4aa6001b2f462d64eae1bdda7f46d97a926802e', 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: 'c7de2283771d60e1e9f756257e34da0eefcf27f3' }, ":"),
+            hAsync("input", { key: '521fad8cc60c9ced2ba634441b789fba15340ae7', 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: '9ce4067c241aae590f4cd4383b1ece3a7510a2c7' }, ":"),
-            hAsync("input", { key: 'f42706c6e606c59e739b0460b9c9016c796542da', 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: 'ceef993e3efdc2fa01d466033522e09ee78683b1' }, ":"),
+            hAsync("input", { key: '9c51f0fcecb86a913e9ae4cd3c5bcfbf34ac4ab8', 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: '4c233506c36553289c0e21d889e6c77c46e2862a', 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: '9dcf992cc15a5462269208daecec4dbfc7fc9183', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '3614bfd444d8243c110bf2b458e0d2d5f296566f', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'e703a923e7c98e2d9fd5d69a5741f1f67c9710b4', name: "after-input" })), hAsync("div", { key: '6a56bd36fac3051ae1a40cbb450a51a415c00db2', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'c001e4f3afa3fadf49df9186ef38ac10ca3c1f70', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '7a5516b7d91dc99f6963ee9daacee9305b16dfb0', 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: 'a9a9a02e312caf25a52b91e1d4db6b6ee9d850d6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '93a69f343771dbdb8c6bd694ea9f5ddeeba39801', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '678d9af754b860ac99a50d70cb9b975e79f164c9', name: "after-input" })), hAsync("div", { key: '2bd255e97d8b34b66fa0af2f209d5175e67b62a3', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '017b58a9a7ccb44918a408fb680fa1c18d8f5672', 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: '62782d291c7e065b79c91a51ebd61afcef60c058', class: "description" }, hAsync("slot", { key: '70d29b36d481bfc5ec8a9435e2eadf0007aa95c3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '71818050156b31a39daf70e4cf8cb1a03f809458', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cb7fb776375e7afaaa22ae90f8e6eb533e066e53', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '35f5fb47bfeb9cde2c3551df391cf52ccaf10c72', class: "description" }, hAsync("slot", { key: 'b450124765db5b2337f03a5f68c4a9466c80ca85', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '87d441f595f7ba8be04ca749235ec3918e9a80b0', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '35717f533b4a4c310f4fb805c3989398f340b8b1', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20372,7 +20528,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a5d7dbfd9cf1be24ba19e8a8902a5a7adb89cc24', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'b35bc42c038fd288022e13650556086d1dc3604d', 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: '41833d3d27433422c859b513f28dc48a202d5919', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: '5d5988e7c0f49781b57b86da6e46e38eeac5ddae', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'ab4007e92d6a13245293dbbb7dc746ab21cdbe33', 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: 'c9cb4fea1695e81c4e9e775c217dfb9ac3b7c9ec', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -20516,7 +20672,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e67f2cfb172fc315ea4d12290000cd92ff683e88', 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: '6477c82dcaa79147d03ae730d9ab2835959bcde6', size: this.size }), !this.loading && hAsync("nv-icon", { key: '8ffecf3db1d721ff88ba3c7b4e08543e48adedd5', name: this.name, size: this.size }), hAsync("slot", { key: 'c03cccb5aff47a9f758fc23b4e2226301d2d2fcc' })));
+        return (hAsync(Host, { key: 'f678bd976942aa35ae36c536fdd86cd65a43263a', 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: 'b874de8701de163c1f4235c2034a13da30279191', size: this.size }), !this.loading && hAsync("nv-icon", { key: '222ccc93e3af3dcec81308b3b90ca724ecdfa2fb', name: this.name, size: this.size }), hAsync("slot", { key: 'c7a257f7715a9320ffe46e09b59a2d570d1f052c' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20564,7 +20720,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '701552c6cf9126e60d81f844648ec1d29079fdd3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: 'f3094e46eb7072534f497694d3c28030f0118acc', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -20615,25 +20771,23 @@ class NvMenu {
          * position on the axis to fit on the screen, so users can always see it.
          */
         this.placement = 'bottom-end';
+        //#endregion LIFECYCLE
+        /****************************************************************************/
+        //#region RENDER
         /**
-         * Parsed items stored in state.
+         * Generates menu items from the `items` property.
+         * @param {MenuItem[]} items - The items to display in the menu.
+         * @returns {HTMLElement[]} The rendered items.
          */
-        this.parsedItems = [];
-    }
-    /**
-     * Watcher to parse the items when the `items` property changes.
-     * @param {string} newValue - The new value of the `items` property.
-     */
-    handleItemsChange(newValue) {
-        if (typeof newValue === 'string') {
-            try {
-                this.parsedItems = JSON.parse(newValue);
-            }
-            catch (error) {
-                console.error('Error parsing menu items:', error);
-                this.parsedItems = [];
-            }
-        }
+        this.renderMenuItems = () => {
+            return this.items.map(item => {
+                var _a;
+                if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    return (hAsync("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, hAsync("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
+                }
+                return (hAsync("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
+            });
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -20773,35 +20927,11 @@ class NvMenu {
         this.triggerElement = Array.from(this.el.children).find(child => {
             return child.getAttribute('slot') === 'trigger';
         });
-        // If the items attribute is provided, parse its value.
-        if (this.items) {
-            this.handleItemsChange(this.items);
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    /**
-     * Generates menu items from the `items` property.
-     * @param {MenuItem[]} items - The items to display in the menu.
-     * @returns {HTMLElement[]} The rendered items.
-     */
-    renderMenuItems(items) {
-        return items.map(item => {
-            var _a;
-            if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return (hAsync("nv-menu", { nested: true, placement: "right-start", items: JSON.stringify(item.submenuItems) }, hAsync("nv-menuitem", { slot: "trigger", "has-submenu": true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
-            }
-            return (hAsync("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
-        });
     }
     render() {
-        return (hAsync(Host, { key: '8334eee36cadee43d5d78d227841b43da86a46c6' }, hAsync("slot", { key: 'a4f260a9161dc239eabfc9c43178b1394721f37d', name: "trigger" }), hAsync("nv-popover", { key: '6f163bc5c02afba3af1e9bb43cf3b6bfec1e9374', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (hAsync("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (hAsync("slot", { name: "content" })))));
+        return (hAsync(Host, { key: 'b66fd4f51c7f754d2d49265fe6175cc1a2c0b03a' }, hAsync("slot", { key: 'acd3dc4ad3ed94a4bcbef735049e59bf37a8f67d', name: "trigger" }), hAsync("nv-popover", { key: '28218c78f3fa21a9dcfd5ea13d3416eda11efc49', 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 watchers() { return {
-        "items": ["handleItemsChange"]
-    }; }
     static get style() { return NvMenuStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -20811,14 +20941,13 @@ class NvMenu {
             "nested": [516],
             "disableCloseOnSelect": [516, "disable-close-on-select"],
             "placement": [513],
-            "items": [513],
-            "parsedItems": [32],
+            "items": [16],
             "show": [64],
             "close": [64]
         },
         "$listeners$": [[0, "menuitemSelected", "handleMenuItemSelect"], [0, "keydown", "handleKeydown"], [0, "openChanged", "handleOpenChanged"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["open", "open"], ["nested", "nested"], ["disableCloseOnSelect", "disable-close-on-select"], ["placement", "placement"], ["items", "items"]]
+        "$attrsToReflect$": [["open", "open"], ["nested", "nested"], ["disableCloseOnSelect", "disable-close-on-select"], ["placement", "placement"]]
     }; }
 }
 
@@ -20871,7 +21000,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'd1d9969a8e812f22d2097dca29b8e46b54115709', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '4dd5c1c2fdd741cec06ca112788d8d00863b0ac7', name: this.icon }), hAsync("slot", { key: '6030b5a030b46281d54ca139e55163e8ede064fe' }), this.label && hAsync("span", { key: 'f253f5eb0fed0853a46ed08c211a42bace1784f6', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'b7c445db91af3ae3e2a845a839fee7c77a768045' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '54bcd0bc879136d542b5e2c4241949f623258ad0', name: "chevron-right" })));
+        return (hAsync(Host, { key: 'd736bc00759cb97fe52d2d6dc091667057a5585c', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: 'cf29c75feedcb61d16d33433f834751c821a4256', name: this.icon }), hAsync("slot", { key: '0ebe8b2faac9981023c224e3c5cd4f131e088c0e' }), this.label && hAsync("span", { key: 'd2659aceb0ecc1cad794ae16d15432379677012c', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: '7d7772b6efda6faccafc425772c905d4aabd2ef5' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: 'c756d3ceffc907fa0c37338595a7fd09f8238a7b', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -23256,7 +23385,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'efab8d78e1163d23e197ca04786b9f99f248ce05' }, hAsync("slot", { key: 'b8197a385e5d9cda08d6b3e0232c052fb7238d01', name: "trigger" }), hAsync("div", { key: '480c3cc8352bc833216cd64c8bfcf75ba9c79130', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8b1b10a15427ef05bc267460161e4a53be4cc3d1', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '8c9a8708a36fae6cac5e533b5c1a3128d7375195', name: "content" }))));
+        return (hAsync(Host, { key: '830051c35f7e10dfa4e31d401663bd5727ac988f' }, hAsync("slot", { key: 'a49852a712bf6ab9c8557035ca4618d007939f03', name: "trigger" }), hAsync("div", { key: '6d9cd4bd873cb92b1716a8ea88a3877a029cbe9c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'f935c9248b602aa1c39e7d28c5503a24067fb744', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '6b682de05037b2d3b60c9139c448620fab963ea1', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23301,7 +23430,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '0b27560267e6f5186ca4237658ad35f3a436b70d' }, hAsync("slot", { key: 'b2805eb6abe9d02b57f030c91344ecf4927136d8' })));
+        return (hAsync(Host, { key: '7daaa109808165553e69707c72550f284e087011' }, hAsync("slot", { key: 'a00fd8c81352b485d8508f9bd68af4dd81d959e1' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -23336,7 +23465,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9869c0eaa423e363482bd4685dbd082dfba017f5', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'd4b597ec95f71c47edf99d58d22c95a5540e904c' })));
+        return (hAsync(Host, { key: '02e184fbc9e9ddd4b02b107baf093047fa3697b0', 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: '1a501fcc419f97f2714be822120072b49590e5ea' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -23670,14 +23799,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, hAsync("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, hAsync("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), hAsync("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', 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: 'b2962fba4d5a12aa660d0c0f69298c93947ef592' }, hAsync("div", { key: 'f60e5c09d57c0ccf5cb9996ca85fcc8792270b85', class: "hidden" }, hAsync("slot", { key: '9c4aefff542478535b3f342b1c75f68d717c3bf8' })), hAsync("slot", { key: 'bfd0f5406187bcad69d9ed41e2f294314a3572f1', 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: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
+        })))))))), hAsync("slot", { key: 'e0039c9af9506bc8f2ded8cc81bbd2667ee1f2c1', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23797,8 +23926,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, hAsync("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', 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: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, hAsync("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: 'e80390a43bab3d55373f6b05db1516210f90c3b5', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '66156f05cc18bb63a8625cdff72d9c177e4cf86b', class: "input-container" }, hAsync("input", { key: 'db0c2c078c23431605befb8dd972a29bfdefb16f', 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: '576df464b48fa11bf8a46bede5f1d822db569636', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f529b009876a5de5061747f78372a66ccfdcac61', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '3ace029242d920b783fe0038f8721b416f54633f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2eeb41266ee52ef40c1600750084fda0fac8dc6f', class: "description" }, hAsync("slot", { key: '605541594fcc7f3192766a5395c5a81f42de7728', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -23863,7 +23992,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, hAsync("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), hAsync("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), hAsync("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
+        return (hAsync(Host, { key: '8309e08944469fad76997a6dfcb8b434461aa5a3' }, hAsync("slot", { key: 'f3da94e2f2f581f7b8c93f4b3e70de67e305508a' }), hAsync("nv-popover", { key: 'a28c50f59f9a781afd8a8ab60260d065dcadf96d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '76f63a5f220de640f4eeada8aeba97e9ead73fc9', slot: "content" }, this.message), hAsync("slot", { key: 'f55f71b357b23c29b40b9c022a5a1718c4c8c8fb', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -23886,7 +24015,6 @@ registerComponents([
   NvAlert,
   NvAvatar,
   NvBadge,
-  NvBaseComponent,
   NvBreadcrumb,
   NvBreadcrumbs,
   NvButton,