@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.41

package/hydrate/index.mjs

@@ -4767,6 +4767,10 @@ class NvAlert {
          * Controls the visibility of the alert. Will animate with fade and collapse.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -4829,13 +4833,35 @@ class NvAlert {
      */
     async handleHiddenChange(hidden) {
         this.hiddenChanged.emit(hidden);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
         const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
         const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
-        if (hidden === true)
+        if (hidden) {
             await timeline(fadeOut, collapse).start();
-        if (hidden === false)
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
             await timeline(expand, fadeIn).start();
-        this.hiddenChangedComplete.emit(hidden);
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', hidden);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -4857,10 +4883,7 @@ class NvAlert {
             }
         }
         if (this.hidden) {
-            const { setCollapsed } = useCollapse(this.ref);
-            const { setFadeOut } = useFade(this.ref);
-            setCollapsed();
-            setFadeOut();
+            this.ref.classList.add('hidden');
         }
     }
     //#endregion LIFECYCLE
@@ -4868,7 +4891,7 @@ class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: 'e14c9a07c3127a8ac3b1881e055526b82a93ff83', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: 'c4aaf00e4b18891dd6053f1529f7a6267386c647', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '9df1b181179cd21361bae2ae347a02dbe07cee63', class: "content" }, this.heading && hAsync("p", { key: '53a21fe4139260bd9aca34cefbb194024a3a1afb', class: "heading" }, this.heading), this.message && hAsync("p", { key: 'eb58482e492f4aff15ccb300f3e89c70544c66d9', class: "message" }, this.message), hAsync("slot", { key: '2762850b8d37f8c53447321a80f2d12d81c8b6f6' })), this.dismissible && (hAsync("button", { key: '8827d5cbffe2f3757111f09806672514c10f7942', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: '398ee6b8fc57eb994b30d7194ea69cd251ae5076', name: "x", size: "sm" })))));
+        return (hAsync(Host, { key: 'e81f265d69ba269ea5a7433465f68862cf4444d2', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: 'e0e21d84a214a51e0b303055e4aa280e0467dfe0', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '705d079e0abe159e4398f5d53ecec0c6649bcf6d', class: "content" }, this.heading && hAsync("p", { key: 'cff1fa5c3caf736d332b2389168030b7263997c1', class: "heading" }, this.heading), this.message && hAsync("p", { key: '6f492a02c068c1ffab48aeae7dd619c1a73b1c19', class: "message" }, this.message), hAsync("slot", { key: 'e79556d3c7c10b8771e7e6262d4e4086bf895de9' })), this.dismissible && (hAsync("button", { key: '2754a1237501c458b32a84f2f3166109dba9c3e2', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: '9563b22ee4689d7e4d35ca4d882827004b334671', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -4886,11 +4909,12 @@ class NvAlert {
             "icon": [513],
             "dismissible": [516],
             "preventAutoClose": [516, "prevent-auto-close"],
-            "hidden": [1540]
+            "hidden": [1540],
+            "hasNoAnimations": [516, "has-no-animations"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["feedback", "feedback"], ["message", "message"], ["heading", "heading"], ["icon", "icon"], ["dismissible", "dismissible"], ["preventAutoClose", "prevent-auto-close"], ["hidden", "hidden"]]
+        "$attrsToReflect$": [["feedback", "feedback"], ["message", "message"], ["heading", "heading"], ["icon", "icon"], ["dismissible", "dismissible"], ["preventAutoClose", "prevent-auto-close"], ["hidden", "hidden"], ["hasNoAnimations", "has-no-animations"]]
     }; }
 }
 
@@ -4951,7 +4975,7 @@ class NvAvatar {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4543ac26e2c1d6d91de2c4671657e584486daefe', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
+        return (hAsync(Host, { key: '8cd1fe9e804aa11e821c0983c28eefdbe2275235', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
     }
     static get style() { return NvAvatarStyle0; }
     static get cmpMeta() { return {
@@ -5098,11 +5122,11 @@ class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f0b9bf1d1a32c72f9d8176300d06875f0258f068', class: clsx(`badge-${this.color}`, {
+        return (hAsync(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, hAsync("slot", { key: '967f6cceadd13f1a7758696b0ddb9b77d256caac', name: "leading-icon" }, this.leadIcon && (hAsync("nv-icon", { key: '683ccf19e6281ab8fded9e217f61a67d835a7b37', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && hAsync("span", { key: 'e01b6071da8bdc73d7708e91c67afe9bc2819095' }, this.label), this.dismissible && (hAsync("button", { key: 'f8040e70acd910c63fa377837fc13316a321366c', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea', name: "x", size: "sm" })))));
+            }) }, hAsync("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (hAsync("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && hAsync("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (hAsync("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5196,7 +5220,7 @@ class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, hAsync("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
+        return (hAsync(Host, { key: 'ee2869bb42012e8c6b185e412503b14482f58af0', style: { display: 'block' } }, hAsync("slot", { key: '2d89c30073a159339419bbec3f323abdcbf312cf' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -5241,7 +5265,7 @@ class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c985863a0ffdcd051abd712c357110cfa056c382', 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: '4f7ad5175285ea442cd42581e292d2d430eb8770', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '29aba9e64f0d1785852dc4b830959dcbbd7dfc8b', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: '0fde9dac023e6a77cb1524cbfcdf58d11e5a21f3', slot: "content" }, hAsync("slot", { key: 'c263990647dc304a37971168669ced00bf46c588' })))), hAsync("span", { key: 'f9f96fb13c67e4d3844007342c931ccd690ca7f5', "data-scope": "separator" }, "/")));
+        return (hAsync(Host, { key: '88cc0ffe7aee64066946b3f2579d0ace70a56339', 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: '1e1bb755b7a9466c5a174e57b562b718d7f2a78a', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '91b3238143defb7b5fd71b14bb31edb8093778d2', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: '4c1851c8988b7eb1f607e422ceac1dc6b04022c5', slot: "content" }, hAsync("slot", { key: '11213bce3ff14309b0be7336f0022411a2e6721d' })))), hAsync("span", { key: '3b97cd9edbb33196c85a29afbaf5b2ac647b0912', "data-scope": "separator" }, "/")));
     }
     get el() { return getElement(this); }
     static get style() { return NvBreadcrumbStyle0; }
@@ -5271,7 +5295,7 @@ class NvBreadcrumbs {
     }
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'd54bb25f9f34ea0f5ea58da6a60261aed57fefef', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: '660c31fbb8860ce0639b475875dd720f3876549b' }, hAsync("slot", { key: 'c77828910bfb759839d04b5ac28e11cebec7c937' }))));
+        return (hAsync(Host, { key: '832ca6782b23a6aa0ca9fdea78cd7b0173db66b4', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: 'e71aaabc2c3e8912097f822e24947eeec112ea3b' }, hAsync("slot", { key: '0af6f306a8ad6ec26bbcf3bf480acb3cc4a9682a' }))));
     }
     static get style() { return NvBreadcrumbsStyle0; }
     static get cmpMeta() { return {
@@ -5343,29 +5367,51 @@ class NvButton {
         /**
          * Sets the button type to control its function in forms. Use 'submit' to send
          * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
+         * that doesn't interact with form submission by default.
          */
         this.type = 'button';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
         /**
-         * Handles form-related actions when the button is clicked.
-         * - Submits the form if the button type is 'submit'.
-         * - Resets the form if the button type is 'reset'.
+         * Handles button click events, managing form actions and disabled states.
+         * Prevents default behavior when button is disabled or loading, and
+         * processes form submissions/resets when appropriate.
          * @param {Event} event - The click event.
          */
-        this.handleClick = (event) => {
-            var _a, _b, _c, _d;
+        this.handleButtonClick = (event) => {
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
-            if (this.type === 'submit') {
-                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            if (this.form && this.type !== ButtonType.Button) {
+                this.processFormAction();
             }
-            if (this.type === 'reset') {
-                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+            else if (this.form) {
+                console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
+            }
+        };
+        /**
+         * Processes form-related actions by finding the associated form element
+         * and triggering the appropriate action (submit/reset) based on button type.
+         * Falls back to ElementInternals form if no explicit form ID is provided.
+         */
+        this.processFormAction = () => {
+            var _a, _b;
+            const formElement = this.form
+                ? document.getElementById(this.form)
+                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+            if (!formElement) {
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                return;
+            }
+            switch (this.type) {
+                case ButtonType.Submit:
+                    formElement.requestSubmit();
+                    break;
+                case ButtonType.Reset:
+                    formElement.reset();
+                    break;
             }
         };
     }
@@ -5411,7 +5457,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '76ec47961a6e4443b3d6027345f94ada45d6c13f', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (hAsync("nv-loader", { key: '4d9f1ff4ccaf3060e65b68101a2e5672c79ad2b5', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '7a4e08881daf71fb3fb8aaa65625b767252ffb72', name: "leading-icon" }), hAsync("slot", { key: 'a8d577da8439889ba517fc305ac75a50d3c121f0' }), hAsync("slot", { key: '0278d86b2479950e480cc8bbd0f67438591d606f', name: "trailing-icon" })));
+        return (hAsync(Host, { key: 'bd4fa51791ea88aeffba33f5be108807d0d31dc3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: '4a48de90f85da844af2114737751619181ddbddd', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'c48a34e20a792ff7d139488a0dc5e373f7e67c23', name: "leading-icon" }), hAsync("slot", { key: '5d151e40abf25f0089d4980e85eabfff944d3b99' }), hAsync("slot", { key: 'e0029a972441daa1abfee3a3bca5c62abf284586', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5431,11 +5477,12 @@ class NvButton {
             "loading": [1540],
             "disabled": [1540],
             "fluid": [516],
-            "type": [513]
+            "type": [513],
+            "form": [513]
         },
         "$listeners$": [[0, "keydown", "handleKeyDown"], [0, "touchstart", "handleTouchStart"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["size", "size"], ["emphasis", "emphasis"], ["active", "active"], ["danger", "danger"], ["loading", "loading"], ["disabled", "disabled"], ["fluid", "fluid"], ["type", "type"]]
+        "$attrsToReflect$": [["size", "size"], ["emphasis", "emphasis"], ["active", "active"], ["danger", "danger"], ["loading", "loading"], ["disabled", "disabled"], ["fluid", "fluid"], ["type", "type"], ["form", "form"]]
     }; }
 }
 
@@ -6406,7 +6453,7 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: 'fd0e3e0d88dd281cdfcc6557d822f137fe8da38e' }, hAsync("div", { key: '04f15a9e7404b5c39dfdaa0f143b0c659a1a9cb3', class: "datepicker-root" }, hAsync("div", { key: 'c42882624dfdb116faae2af1b3b6a1aa05192d18', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'd0b1d476b3362e9f9073f02586a77e21b4370f32', 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: 'f61fb6827fcaee0920998e75f6bfb767d3cb4fc6', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '436d448bf9e5ec0aa153b3452ef9435d36957ce6' })));
+        return (hAsync(Host, { key: '0d9b8c85ed51f8a82b8d2159b064e480cec49df6' }, hAsync("div", { key: '558f698edfe33c50af19ac7466279185bbf5b87a', class: "datepicker-root" }, hAsync("div", { key: '9cc0b7ad17f438afb292c729af826a00501a44c5', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '14d17b4e73525537060dea627ebfe6c3e84387ab', 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: '7fe8a36601d434da834bc934bafa11c3fdbd40f8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: 'bebf0f034ee70b5abfd99b692a60ca3b4cbe09a0' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6473,7 +6520,7 @@ class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f9a8dd28d7675648ecb3b9cf4d1e196040f4237f', class: clsx(this.getColSize()) }, hAsync("slot", { key: '94c16b6e2df73cb21263423d378ab5fe285a7859' })));
+        return (hAsync(Host, { key: '416e432e3f8947b2b2040e8226da1acf03a6f965', class: clsx(this.getColSize()) }, hAsync("slot", { key: 'e860ae915f148333f471a48705677512853c6970' })));
     }
     static get style() { return NvColStyle0; }
     static get cmpMeta() { return {
@@ -9441,16 +9488,178 @@ function getCoreRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getRowModel', () => table._autoResetPageIndex()));
 }
 
-const nvDatagridCss = "nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0}";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * All properties that should be excluded from the deep copy of an HTML element.
+ */
+const excludedProps = new Set([
+    // Text and content-related properties
+    'textContent',
+    'innerText',
+    'outerText',
+    'innerHTML',
+    'outerHTML',
+    'text',
+    // Form element properties
+    'value',
+    'defaultValue',
+    'checked',
+    'defaultChecked',
+    'selectionStart',
+    'selectionEnd',
+    'selectionDirection',
+    'form',
+    'willValidate',
+    'validity',
+    'validationMessage',
+    'labels',
+    'list',
+    'maxLength',
+    'minLength',
+    'valueAsDate',
+    'valueAsNumber',
+    // Editability and namespaces
+    'contentEditable',
+    'isContentEditable',
+    'namespaceURI',
+    // Child-related properties (handled recursively)
+    'attributes',
+    'children',
+    'childNodes',
+    'firstChild',
+    'lastChild',
+    // Blazor-related properties
+    'origin',
+    'dataset',
+    'attributeStyleMap',
+    'prefix',
+    'localName',
+    'tagName',
+    'shadowRoot',
+    'assignedSlot',
+    'scrollWidth',
+    'scrollHeight',
+    'clientTop',
+    'clientLeft',
+    'clientWidth',
+    'clientHeight',
+    'firstElementChild',
+    'lastElementChild',
+    'childElementCount',
+    'previousElementSibling',
+    'nextElementSibling',
+    'currentCSSZoom',
+    'nodeType',
+    'nodeName',
+    'baseURI',
+    'isConnected',
+    'ownerDocument',
+    'parentNode',
+    'parentElement',
+    'previousSibling',
+    'nextSibling',
+    'ELEMENT_NODE',
+    'ATTRIBUTE_NODE',
+    'TEXT_NODE',
+    'CDATA_SECTION_NODE',
+    'ENTITY_REFERENCE_NODE',
+    'ENTITY_NODE',
+    'PROCESSING_INSTRUCTION_NODE',
+    'COMMENT_NODE',
+    'DOCUMENT_NODE',
+    'DOCUMENT_TYPE_NODE',
+    'DOCUMENT_FRAGMENT_NODE',
+    'NOTATION_NODE',
+    'DOCUMENT_POSITION_DISCONNECTED',
+    'DOCUMENT_POSITION_PRECEDING',
+    'DOCUMENT_POSITION_FOLLOWING',
+    'DOCUMENT_POSITION_CONTAINS',
+    'DOCUMENT_POSITION_CONTAINED_BY',
+    'DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
+]);
+/**
+ * Deep copy an HTML element with all its attributes, properties, and child nodes.
+ * This method is useful for creating a clone of an element that can be safely modified without affecting the original.
+ * @param {HTMLElement} element - The HTML element to copy.
+ * @returns {HTMLElement} - A deep copy of the HTML element.
+ * @example const copy = deepCopyElement(document.getElementById('myElement'));
+ */
+function deepCopyElement(element) {
+    const copy = document.createElement(element.tagName);
+    // ✅ Copy attributes
+    Array.from(element.attributes).forEach(attr => {
+        copy.setAttribute(attr.name, attr.value);
+    });
+    // ✅ 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 (methods are excluded) and non-event listeners
+    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 {
+                copy[prop] = element[prop];
+            }
+            catch (error) {
+                console.warn(`Could not copy property ${prop}:`, error.message);
+            }
+        }
+    });
+    // ✅ Copy dataset separately
+    Object.assign(copy.dataset, element.dataset);
+    // ✅ Handle form elements specifically
+    if (element instanceof HTMLInputElement) {
+        copy.value = element.value;
+        copy.checked = element.checked;
+        copy.defaultValue = element.defaultValue;
+        copy.defaultChecked = element.defaultChecked;
+        copy.selectionStart = element.selectionStart;
+        copy.selectionEnd = element.selectionEnd;
+        copy.selectionDirection = element.selectionDirection;
+    }
+    else if (element instanceof HTMLTextAreaElement) {
+        copy.value = element.value;
+        copy.defaultValue = element.defaultValue;
+        copy.selectionStart = element.selectionStart;
+        copy.selectionEnd = element.selectionEnd;
+        copy.selectionDirection =
+            element.selectionDirection;
+    }
+    else if (element instanceof HTMLSelectElement) {
+        copy.value = element.value;
+        copy.selectedIndex = element.selectedIndex;
+    }
+    // ✅ Recursively copy child nodes (prevent duplicates)
+    element.childNodes.forEach(child => {
+        let childCopy;
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            childCopy = deepCopyElement(child);
+        }
+        else {
+            childCopy = child.cloneNode(true);
+        }
+        copy.appendChild(childCopy);
+    });
+    return copy;
+}
+
+const nvDatagridCss = "nv-datagrid{display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-border-header);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-content-header)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-border-body);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-content-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
 var NvDatagridStyle0 = nvDatagridCss;
 
 /**
  * A flexible data grid component powered by `@tanstack/table-core`.
  * @slot default - Use this slot to insert HTML into the data grid content.
- * @slot head - Use this slot to insert HTML into the data grid header.
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
- * @slot body - Use this slot to insert HTML into the data grid body.
  *
  * @deprecated [EXPERIMENTAL]
  * @experimental - This component is still under development and is not ready for use.
@@ -9458,16 +9667,23 @@ var NvDatagridStyle0 = nvDatagridCss;
 class NvDatagrid {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.action = createEvent(this, "action", 7);
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
         /****************************************************************************/
         //#region STATES
         this.table = null;
         this.parsedColumns = []; // Parsed array
         this.parsedData = []; // Parsed array
-        this.hasSlotHead = false;
-        this.hasSlotBody = false;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
+        /**
+         * The data to display in the data grid.
+         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
+         * @default []
+         */
+        this.data = [];
         /**
          * The columns to display in the data grid.
          * @example
@@ -9480,11 +9696,10 @@ class NvDatagrid {
          */
         this.columns = [];
         /**
-         * The data to display in the data grid.
-         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-         * @default []
+         * Fallback value to be displayed when data is not available
+         * @default 'N/A'
          */
-        this.data = [];
+        this.fallbackValue = 'N/A';
         /**
          * The message to display when there is no data available.
          * @default 'No data available'
@@ -9498,39 +9713,94 @@ class NvDatagrid {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region WATCHERS
-    parseColumns(newValue, oldValue) {
-        this.parseColumnsArray(newValue, oldValue);
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-datagridcolumn'));
+        columns.forEach((col) => {
+            const key = col.accessor;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
     }
-    parseJsonColumns(newValue) {
-        try {
-            const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, this.parsedColumns);
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
         }
-        catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
-            this.parsedColumns = [];
+        else if (this.data && this.data.length > 0) {
+            this.parseDataArray(this.data, this.parsedData);
+        }
+        if (this.columnsJson) {
+            this.parseJsonColumns(this.columnsJson, this.parsedColumns);
+        }
+        else if (this.columns && this.columns.length > 0) {
+            this.parseColumnsArray(this.columns, this.parsedColumns);
+        }
+        else if (this.headerTemplateCache.size > 0) {
+            const headerKeys = Array.from(this.headerTemplateCache.keys());
+            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { accessor: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+        else if (this.parsedData.length > 0) {
+            const firstRow = this.parsedData[0];
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                accessor: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
         }
     }
-    parseData(newValue, oldValue) {
-        this.parseDataArray(newValue, oldValue);
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
     }
-    parseJsonData(newValue) {
-        try {
-            const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseDataArray(newItems, this.parsedData);
-        }
-        catch (e) {
-            console.error('Invalid JSON format for dataJson:', e.message);
-            this.parsedData = [];
+    /**
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - The new value of the data array.
+     * @param {any[]} oldValue - The old value of the data array.
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
         }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
     }
-    handleParsedChange() {
-        this.initializeTable();
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {Column[]} newValue - The new value of the columns array.
+     * @param {Column[]} oldValue - The old value of the columns array.
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region METHODS
     initializeTable() {
         // Clear the previous table instance (if any)
         this.table = null;
@@ -9565,170 +9835,268 @@ class NvDatagrid {
                 }, // Default: no column sizing info
             },
         };
-        // 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));
-        // Helper function to generate column definitions
-        const generateColumns = () => {
-            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(),
-                }));
-            }
-            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(),
-                }));
-            }
-            else {
-                // No columns and no data
-                return [];
-            }
-        };
-        const setTableData = () => {
-            if (this.parsedData &&
+        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));
+            // Update tableOptions based on parsed data and columns
+            const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
+            const hasData = this.parsedData &&
                 Array.isArray(this.parsedData) &&
-                this.parsedData.length > 0) {
-                return [...this.parsedData];
+                this.parsedData.length > 0;
+            if (!hasColumns && !hasData) ;
+            else if (hasColumns && !hasData) {
+                tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
             else {
-                return [];
+                // Both columns and data are available
+                // No columns and data is available
+                tableOptions.data = this.getTableData();
+                tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
-        };
-        // Update tableOptions based on parsed data and columns
-        const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
-        const hasData = (this.parsedData &&
-            Array.isArray(this.parsedData) &&
-            this.parsedData.length > 0) ||
-            this.hasSlotBody;
-        if (!hasColumns && !hasData) ;
-        else if (hasColumns && !hasData) {
-            tableOptions.columns = generateColumns();
-        }
-        else {
-            // Both columns and data are available
-            // No columns and data is available
-            tableOptions.data = setTableData();
-            tableOptions.columns = generateColumns();
         }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
-    /**
-     * Parses the columns array.
-     * @param {Column[]} newValue - The new value of the columns array.
-     * @param {Column[]} oldValue - The old value of the columns array.
-     */
-    parseColumnsArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
+    // 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(),
+            }));
+        }
+        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(),
+            }));
+        }
+        else {
+            // No columns and no data
+            return [];
+        }
     }
-    /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
-     */
-    parseDataArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
+        }
+        else {
+            return [];
+        }
     }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
-        if (this.hasSlotHead) {
-            const headSlot = this.el.querySelector('[slot="head"]');
-            const headSlotRows = this.hasSlotHead
-                ? Array.from(headSlot.querySelectorAll('nv-datagridrow'))
-                : [];
-            const mappedRows = headSlotRows.map(row => {
-                const cells = Array.from(row.querySelectorAll('nv-datagridcolumn'));
-                return cells.map(cell => ({
-                    header: cell.getAttribute('header') || '',
-                    accessor: cell.getAttribute('accessor') || '',
-                }));
+    renderTemplate(template, cellValue, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, cellValue);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, cellValue);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, cellValue);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            const keyAction = splitted[1];
+            const details = splitted.length > 2 ? splitted[2] : null;
+            el.addEventListener(eventType, () => {
+                var _a;
+                const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    var _a;
+                    if (row === null || row === void 0 ? void 0 : row.original) {
+                        if (key in row.original) {
+                            acc[key] = (_a = row.original) === null || _a === void 0 ? void 0 : _a[key];
+                        }
+                    }
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
             });
-            // Flatten the nested arrays into a single array of columns
-            const flatMappedColumns = mappedRows.flat();
-            this.parsedColumns = flatMappedColumns;
-        }
-        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
-        if (this.hasSlotBody) {
-            const bodySlot = this.el.querySelector('[slot="body"]');
-            const bodySlotRows = this.hasSlotBody
-                ? Array.from(bodySlot.querySelectorAll('nv-datagridrow'))
-                : [];
-            const mappedRows = bodySlotRows.map(row => {
-                const cells = Array.from(row.querySelectorAll('nv-datagriddatacell'));
-                return cells.map(cell => {
-                    return {
-                        accessor: cell.accessor,
-                        value: cell.innerHTML,
-                    };
-                });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
             });
-            // Flatten the nested arrays into a single array of data
-            const flatMappedData = mappedRows.map(row => row.reduce((acc, cell) => {
-                acc[cell.accessor] = cell.value;
-                return acc;
-            }, {}));
-            this.parsedData = flatMappedData;
+        }, 0);
+        return (hAsync("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
+    }
+    replaceKeyWithValue(key, cellValue) {
+        var _a;
+        // Handle undefined or null values by returning the fallback
+        if (cellValue === undefined || cellValue === null) {
+            return this.fallbackValue;
+        }
+        // If cellValue is an object, attempt to retrieve the value
+        if (typeof cellValue === 'object') {
+            // Handle nested key paths (e.g., "user.name")
+            if (key.includes('.')) {
+                const resolvedValue = key.split('.').reduce((acc, keyPart) => {
+                    if (acc && acc[keyPart] !== undefined) {
+                        return acc[keyPart];
+                    }
+                    else {
+                        return undefined;
+                    }
+                }, cellValue);
+                if (resolvedValue !== undefined) {
+                    return String(resolvedValue);
+                }
+                else {
+                    const firstLevelKey = key.split('.')[0];
+                    const rest = key.substring(firstLevelKey.length + 1);
+                    const response = this.replaceKeyWithValue(rest, cellValue);
+                    if (response !== this.fallbackValue) {
+                        return response;
+                    }
+                }
+            }
+            // Handle single-level key lookup
+            return key in cellValue ? String(cellValue[key]) : this.fallbackValue;
         }
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson);
+        // 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));
+            }
+        });
+    }
+    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);
+        }
+        // ✅ 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
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue = []) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue, oldValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, oldValue);
         }
-        else if (this.columns && this.columns.length > 0) {
-            this.parseColumns(this.columns, this.parsedColumns);
+        catch (e) {
+            console.error('Invalid JSON format for columnsJson:', e.message);
+            this.parsedColumns = [];
         }
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
+    }
+    parseData(newValue, oldValue = []) {
+        this.parseDataArray(newValue, oldValue);
+    }
+    parseJsonData(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseDataArray(newItems, this.parsedData);
         }
-        else if (this.data && this.data.length > 0) {
-            this.parseData(this.data, this.parsedData);
+        catch (e) {
+            console.error('Invalid JSON format for dataJson:', e.message);
+            this.parsedData = [];
         }
     }
-    componentDidLoad() {
+    handleParsedChange() {
         this.initializeTable();
     }
-    //#endregion LIFECYCLE
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.cacheTemplates();
+        this.parseDataAndColumns();
+    }
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
         var _a, _b, _c;
-        const headerGroups = !this.table ||
-            this.table === undefined ||
-            (this.parsedColumns.length === 0 && !this.hasSlotHead)
+        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 && !this.hasSlotBody)
+        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: '805687f552a530cac492f16da4858c242f822761' }, hAsync("div", { key: '11b8431c85062307803bf60b942a8cf6b3edbe78', class: "hidden" }, hAsync("slot", { key: '62c100b7f84bfaac9ecdaf94ea8babde114d2adf' }), hAsync("slot", { key: 'b1e0b9f472304c6eceb8c1df9129a051a3d6f132', name: "head" }), hAsync("slot", { key: '7fda39320d01a98055b53b64c554fe657988efd1', name: "body" })), hAsync("slot", { key: 'c681fbdfd0a9c91add3c1e45fe476d878380c93e', name: "before" }), this.parsedColumns.length === 0 &&
-            this.parsedData.length === 0 &&
-            !this.hasSlotHead &&
-            !this.hasSlotBody ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (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 => (hAsync("th", { key: header.id }, header.isPlaceholder
-                ? null
-                : header.column.columnDef.header))))))
-            : null)), hAsync("tbody", null, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : (rows.map(row => {
+        return (hAsync(Host, { key: '03dc8123cf740c6b5eeb59f10443a2ec1b279f28' }, hAsync("div", { key: '263fef353246dba3adb0a44b4e80ff5a4c2e97eb', class: "hidden" }, hAsync("slot", { key: '3d2f02044ad8e09fb010cb0486f63b48e1048acf' })), hAsync("slot", { key: 'e5b458c755eb6887d1fdb959b8883f4d48c5b2f9', name: "before" }), 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
+            ? 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));
+            }))))
+            : 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();
-            const cells = visibleCells === null || visibleCells === void 0 ? void 0 : visibleCells.map(cell => {
+            return (hAsync("tr", { key: rowId }, visibleCells.map(cell => {
+                const cellAccessors = cell.column.id;
                 const cellValue = cell.getValue();
-                return `<td key="${cell.id}" data-row-id="${rowId}">${cellValue}</td>`;
-            }).join('');
-            return hAsync("tr", { key: rowId, innerHTML: cells });
-        }))))), hAsync("slot", { key: '58df089ceaabef8b2e7e139322e47be986cce063', name: "after" })));
+                return (hAsync("td", { key: cell.id, "data-row-id": rowId }, this.renderTemplate(this.templateCache.get(cellAccessors), cellValue, row) ||
+                    (cellValue !== null && cellValue !== void 0 ? cellValue : this.fallbackValue)));
+            })));
+        }))))), hAsync("slot", { key: 'e80f9b8a5dbda4c05b719a99c173e2f106449668', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -9744,158 +10112,47 @@ class NvDatagrid {
         "$flags$": 4,
         "$tagName$": "nv-datagrid",
         "$members$": {
-            "columns": [16],
-            "columnsJson": [513, "columns-json"],
             "data": [16],
-            "dataJson": [513, "data-json"],
-            "noDataMessage": [1, "no-data-message"],
-            "noColumnsNoDataMessage": [1, "no-columns-no-data-message"],
-            "table": [32],
-            "parsedColumns": [32],
-            "parsedData": [32],
-            "hasSlotHead": [32],
-            "hasSlotBody": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["columnsJson", "columns-json"], ["dataJson", "data-json"]]
-    }; }
-}
-
-const nvDatagridbodyCss = "";
-var NvDatagridbodyStyle0 = nvDatagridbodyCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the data grid body.
- */
-class NvDatagridbody {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: '320cd537de564c4bf01fcae542ce31101bfe44b4' }, hAsync("tbody", { key: '129bbf16d0ead565084e18de18f6fff32b20bc57' }, hAsync("slot", { key: '6332b104bffa355c82823fd971d389d8cd894462' }))));
-    }
-    static get style() { return NvDatagridbodyStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-datagridbody",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvDatagridcolumnCss = "";
-var NvDatagridcolumnStyle0 = nvDatagridcolumnCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the data grid column.
- */
-class NvDatagridcolumn {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: '72c6804957273f9ee892b5117ffda50ccf6caff1' }, hAsync("th", { key: 'be6fb9d13310fdc1a4e97824696df2d74746429a' }, hAsync("slot", { key: '43747defd40c561a36ae1151be4bb5b94e84cf61' }))));
-    }
-    static get style() { return NvDatagridcolumnStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-datagridcolumn",
-        "$members$": {
-            "header": [1],
-            "accessor": [1]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvDatagriddatacellCss = "";
-var NvDatagriddatacellStyle0 = nvDatagriddatacellCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the data grid data cell.
- */
-class NvDatagriddatacell {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: '808a7972c4075e1ef597d3e31e6a706a4de99479' }, hAsync("td", { key: 'af904343b51c9596d73d2d59ec32048b16f3421e' }, hAsync("slot", { key: '75ca8b01948e726e140f2def6e3931fe79bed361' }))));
-    }
-    static get style() { return NvDatagriddatacellStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-datagriddatacell",
-        "$members$": {
-            "accessor": [1]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvDatagridheadCss = "";
-var NvDatagridheadStyle0 = nvDatagridheadCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table head.
- */
-class NvDatagridhead {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: 'cbb3dd0506a8ccfe2372452f8e7f1c199fc6cdf8' }, hAsync("thead", { key: 'f97f4214f934bd5fe71f6e4dd09dd3eb702fe5fa' }, hAsync("slot", { key: '88565733fe01bc8ad83849254a38f0610bcc0a50' }))));
-    }
-    static get style() { return NvDatagridheadStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-datagridhead",
-        "$members$": undefined,
+            "columns": [16],
+            "dataJson": [513, "data-json"],
+            "columnsJson": [513, "columns-json"],
+            "fallbackValue": [513, "fallback-value"],
+            "noDataMessage": [513, "no-data-message"],
+            "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
+            "table": [32],
+            "parsedColumns": [32],
+            "parsedData": [32]
+        },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsJson", "columns-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"]]
     }; }
 }
 
-const nvDatagridrowCss = "";
-var NvDatagridrowStyle0 = nvDatagridrowCss;
-
 /**
- * @slot default - Use this slot to insert HTML into the data grid row.
+ * @slot header - Defines how to render the header of the column.
+ * @slot cell - Defines how to render every cell of the column.
  */
-class NvDatagridrow {
+class NvDatagridcolumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '73818abbfd85a255efebf795b7a8964135251d02' }, hAsync("tr", { key: '2f91fc6875ff94c1685eeab8bca1917a29a33938' }, hAsync("slot", { key: '5fb0ce23f9820c4837e9e9231214058f61e4bcf9' }))));
+        return (hAsync(Host, { key: '1a87ebe6794014751ac7c7be1cc95c50cb76866f' }, hAsync("slot", { key: 'edfdc5c83a9627a407d41f655faf7202a89abe4a', name: "header" }), hAsync("slot", { key: '45c8b495ae5fccc39faf67dabe23ed0571aaf713', name: "cell" })));
     }
-    static get style() { return NvDatagridrowStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
-        "$tagName$": "nv-datagridrow",
-        "$members$": undefined,
+        "$tagName$": "nv-datagridcolumn",
+        "$members$": {
+            "header": [513],
+            "accessor": [513]
+        },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["header", "header"], ["accessor", "accessor"]]
     }; }
 }
 
@@ -10479,12 +10736,6 @@ class NvDialog {
          * If true, the dialog will be closed when the backdrop is clicked.
          */
         this.clickOutside = false;
-        /**
-         * Controls the dialog's autofocus behavior. When false (default), the dialog will
-         * automatically focus the first focusable element. When true, automatic focus is
-         * disabled and you must manually set focus on an element for accessibility compliance.
-         */
-        this.manualFocus = false;
         /**
          * If true, the dialog visibility is managed manually through methods or the open prop.
          */
@@ -10509,6 +10760,7 @@ class NvDialog {
          * Handles the dialog close event.
          */
         this.handleDialogClose = () => {
+            this.hide();
             this.close.emit();
         };
         this.handleClickOutside = (event) => {
@@ -10596,7 +10848,6 @@ class NvDialog {
     }
     /**
      * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
-  
      * @param {KeyboardEvent} event - The keydown event.
      */
     handleKeyDown(event) {
@@ -10654,6 +10905,20 @@ class NvDialog {
             return (child.getAttribute('slot') === 'footer' ||
                 child.tagName.toLowerCase() === 'nv-dialogfooter');
         });
+        // If no form ID is provided, check if there's a form and generate an ID
+        if (!this.form) {
+            const formElement = Array.from(this.el.children).find(child => {
+                return child.tagName.toLowerCase() === 'form';
+            });
+            if (formElement) {
+                if (!formElement.id) {
+                    formElement.id = `dialog-form-${Math.random()
+                        .toString(36)
+                        .substring(2, 11)}`;
+                }
+                this.form = formElement.id;
+            }
+        }
     }
     componentWillUpdate() {
         this.attachEventListeners();
@@ -10662,7 +10927,8 @@ class NvDialog {
         if (this.open) {
             this.show();
         }
-        if (!this.manualFocus) {
+        // Check if any element already has autofocus before setting it automatically
+        if (!this.dialogElement.querySelector('[autofocus]')) {
             this.setAutofocus();
         }
         this.attachEventListeners();
@@ -10675,7 +10941,8 @@ class NvDialog {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '468ca6c689e2b4b858fb96835ae3301262030f02' }, hAsync("slot", { key: 'a3197fe8a3d72c4dfef289232651c3b9d3c718ba', name: "trigger" }), hAsync("dialog", { key: '93d6f1c1fb81cc259aeb60f5c4eef25f9370efee', 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: '2e45b203be51708ca276209c18248e8899aade30', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'aeae33efadbf31e66267359ed183c4b9e611d5af', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '16534dba7826c9b18f583f54f7487816f858e064', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: 'e55bef29b5257386021a71c05d06a7239757b692', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: 'c4242539b949c38fb24635f95d3caf5641a845bd' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { onNvDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        const hasForm = this.form || this.el.querySelector('form');
+        return (hAsync(Host, { key: '1ea0934bc4529738e27537a4145615cce3175f0c' }, hAsync("slot", { key: '2384a1131241e74eb833ced9e24b6ca99f2d95a3', name: "trigger" }), hAsync("dialog", { key: 'fe8a30812b28be1a6d0bec81d308cec838f0c0c9', 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: '1a8865b9bf1469e2644eac4e270719b06b8fd540', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'f2141443668d97e764cf6c70dab45332a50aafa3', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: 'a3c0d521dbf597d0dbba16193264d4be7b800935', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: '556df531bd5e76ac4383e1930236600b768b13f0', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: '669ba9c7dc6a0dd6f2d7d5e3050c574075e728be' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onNvDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10692,7 +10959,6 @@ class NvDialog {
             "open": [1540],
             "undismissable": [516],
             "clickOutside": [516, "click-outside"],
-            "manualFocus": [516, "manual-focus"],
             "controlled": [516],
             "full": [516],
             "show": [64],
@@ -10700,7 +10966,7 @@ class NvDialog {
         },
         "$listeners$": [[4, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"], [5, "touchstart", "handleDocumentTouch"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["open", "open"], ["undismissable", "undismissable"], ["clickOutside", "click-outside"], ["manualFocus", "manual-focus"], ["controlled", "controlled"], ["full", "full"]]
+        "$attrsToReflect$": [["open", "open"], ["undismissable", "undismissable"], ["clickOutside", "click-outside"], ["controlled", "controlled"], ["full", "full"]]
     }; }
 }
 
@@ -10714,7 +10980,7 @@ class NvDialogfooter {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.nvDialogCanceled = createEvent(this, "nvDialogCanceled", 7);
-        this.nvDialogConfirmed = createEvent(this, "nvDialogConfirmed", 7);
+        this.nvDialogPrimaryClicked = createEvent(this, "nvDialogPrimaryClicked", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -10726,7 +10992,7 @@ class NvDialogfooter {
         /****************************************************************************/
         //#region PROPERTIES
         /**
-         * Disables the confirm button, preventing user interaction.
+         * Disables the primary button, preventing user interaction.
          */
         this.disabled = false;
         /**
@@ -10735,15 +11001,15 @@ class NvDialogfooter {
          */
         this.undismissable = false;
         /**
-         * Sets the leading icon for the submit button.
+         * Sets the leading icon for the primary button.
          */
         this.leadingIcon = '';
         /**
-         * Sets the trailing icon for the submit button.
+         * Sets the trailing icon for the primary button.
          */
         this.trailingIcon = '';
         /**
-         * Sets the danger state for the submit button.
+         * Sets the danger state for the primary button.
          */
         this.danger = false;
         /**
@@ -10751,19 +11017,23 @@ class NvDialogfooter {
          */
         this.cancelLabel = 'Cancel';
         /**
-         * Sets the label for the submit button.
+         * Sets the label for the primary button.
+         */
+        this.primaryLabel = 'Primary';
+        /**
+         * Sets the type of the primary button.
          */
-        this.submitLabel = 'Submit';
+        this.primaryButtonType = ButtonType.Button;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
         /**
-         * Handles the submit action when the submit button is clicked.
+         * Handles the primary action when the primary button is clicked.
          * @param {Event} event - The click event.
          */
-        this.handleConfirm = (event) => {
+        this.handlePrimary = (event) => {
             event.stopPropagation();
-            this.nvDialogConfirmed.emit();
+            this.nvDialogPrimaryClicked.emit();
         };
         /**
          * Handles the cancel action when the cancel button is clicked. This will close the dialog.
@@ -10788,7 +11058,7 @@ class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '125193a95b6f7e90bbf4b1c5406098913f10c44d' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handleConfirm, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", type: "submit" }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.submitLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: 'f4e91e3a1f64bc761ea9847f361ce962a0e6e7ca' }, !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); }
@@ -10803,11 +11073,13 @@ class NvDialogfooter {
             "trailingIcon": [513, "trailing-icon"],
             "danger": [516],
             "cancelLabel": [513, "cancel-label"],
-            "submitLabel": [513, "submit-label"]
+            "primaryLabel": [513, "primary-label"],
+            "primaryButtonType": [513, "primary-button-type"],
+            "form": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["undismissable", "undismissable"], ["leadingIcon", "leading-icon"], ["trailingIcon", "trailing-icon"], ["danger", "danger"], ["cancelLabel", "cancel-label"], ["submitLabel", "submit-label"]]
+        "$attrsToReflect$": [["disabled", "disabled"], ["undismissable", "undismissable"], ["leadingIcon", "leading-icon"], ["trailingIcon", "trailing-icon"], ["danger", "danger"], ["cancelLabel", "cancel-label"], ["primaryLabel", "primary-label"], ["primaryButtonType", "primary-button-type"], ["form", "form"]]
     }; }
 }
 
@@ -10842,7 +11114,7 @@ class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f91a9aea8aa7116266f52bb356ef2ec493df6354' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, !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; }
@@ -11041,13 +11313,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '921334345ff72fb4a321ba782910d6a8dfa030d7', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '559066e9e68faabd3b17ad4ddf1a62fad871ced4', class: "input-container" }, hAsync("input", { key: '4915141e5f95e455dd5172386953d86f16582762', 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: '9c195c41a5b753688622a7b792f03b34f0888995', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '7dc85b17b9da5e9d542147e1cf143c5eae8a7745', class: "input-container" }, hAsync("input", { key: '78a90ebc8e94459a4e0070234b89c49ecac09c21', 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: '5cd3ebfb8a19ab409613e0a57cedb5555a37f1c9', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'f41f9da6ffdffc530fbb5e3a8525592762039e3c', name: "checked-icon" }, hAsync("svg", { key: '3e50dec45917c1236e40eabf338725b581e18d88', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '071acdeb8c0a921c4befb12cc82b4cf25dfc9dc2', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: 'ceb05dfd4e9d125bded18c7e050d520159438f08', name: "indeterminate-icon" }, hAsync("svg", { key: '90e3d58cdbd6579639fcb69c990bfe668b9835da', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'd41a1780cb2d17bf6a3004581654c6d57fd56eeb', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'f47e1b01a3ab3c1e4bfee75aaac22904f26f1587', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '349127b49acb4af06b856bbbbdd910c14c698a2a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '9fb2380b1bfff44f7dc7888c79aec1ec38ad4aea', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dca6817d3979f7e3c9f0349fd4e0b54c66c404db', class: "description" }, hAsync("slot", { key: 'e6d68dac0a6ce9ca9e140e5286e7a666f0a28949', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '024864d40927310114e4e9bcc195ad298410d3ca', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'b3cf34cf51b39100525696437ec3deb5c875f70d', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: '44884aad946a96805663301ea35a27a78af7f6d7', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'f749fa2634f7600ba82278ffe01fa84e1fd9afaa', name: "checked-icon" }, hAsync("svg", { key: '06ebbefd80f35226f47e4f6d541728285dd7fdf3', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'b34ce01589b6153d1543fb4f626041610bfd031e', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '5fd07ff3548a65cc644be232b9468dfcf9673dbb', name: "indeterminate-icon" }, hAsync("svg", { key: '7981beb86c15d28f3af7eea1792aca9cd86e053c', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '2de55ab02581af8da280c08b22a0e2e9b93626a2', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '094133ff43fda7fbc81f0597a1e79842baaa9f3f', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1b2c4d09b5c1531d28cc45c8beea0c910f0c8ce8', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '5b47d609a387173f9e2f1a526908cc87032e494f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '042d606ba3c4f22b469ec583423bb3fc1abf6a2e', class: "description" }, hAsync("slot", { key: 'c3de1a16b43fe2045f82068e921a2b6cc80afe3d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3cad2737d53acd275c636f8090acd993373de3dc', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd5cb155097265a71f2ed70563a2e2e5b23c09020', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11474,9 +11746,9 @@ class NvFielddropdown {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '99855b7abf6a00da6e086f2ad69bd95fe096bd50' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '36453f817c5a428f55b0d3b344848fefb614ad76', htmlFor: this.inputId }, hAsync("slot", { key: 'a4373ba2f11246c05926b4c1b42af627edb69418', name: "label" }, this.label))), hAsync("nv-popover", { key: '5325f5dbb84f5aab2d52afb0cbf9c2363899c5af', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '9925e66e8222adf7471c12eb3c3a94b320f97d4a', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'ec55d54c546beef866e0afe9b0593ad4b0b1af94', name: "before-input" }), hAsync("div", { key: '0a0114905e4452ff8a2c7442478d1a0a42c1b058', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b8745ddd519c940f95aad372976b4c4b3dd15b10', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { 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, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, hAsync("span", null, this.getSelectedLabel() || this.value || this.placeholder))), hAsync("nv-iconbutton", { key: 'f5b99e6b87c13f131bc212936778e85e5a953788', class: "toggle-dropdown-icon", 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: 'f1f21795ba6f40193c7c57c5c585315b732a13e1', name: "after-input" })), hAsync("div", { key: '147ce233da3d6c6e118b476eca1ed943bb20951f', 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: '4e5978d880fd207281e9fa2b1f283c851798b25d', class: "description" }, hAsync("slot", { key: '8c80ef894500189da8944e7abbba9957ea411820', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '22d0d1c7a84b56978e330c4bb7f073ef221e0fb9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'fe4769ff4c96e525b5f0fca55ed0afbe5d837ac3', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'b3cc49b47c0dcd67e058bef5c02bc3851905fdc1' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e592ddf6330e6d560571cbb78a570cd27fd0a7f2', htmlFor: this.inputId }, hAsync("slot", { key: 'e394206eb57ab9d078402cc0ce5d2ed921a48ce0', name: "label" }, this.label))), hAsync("nv-popover", { key: '775efbae14c94b5e1abfcc31f309fe8cc6eec04e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'cb9bbe88393f9274167b9dd9bbcc44902d196813', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '0e516182825b578180753e1c9d8529dabef5109c', name: "before-input" }), hAsync("div", { key: 'aa330c457419c25a40cfb93bed35a5414a5d6f49', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'ec5beea4918f84b72f3cac6630ade387a1856f13', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { 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, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, hAsync("span", null, this.getSelectedLabel() || this.value || this.placeholder))), hAsync("nv-iconbutton", { key: '84a2c30896184425581bc42878099203e9203f4f', class: "toggle-dropdown-icon", 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: '40dcd054448b5c344e1dd7991ab6364189d69060', name: "after-input" })), hAsync("div", { key: 'ed603f53b7edc59fc0c4b6575e6adeed6f904359', 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: '5c544bc17cfd3ddcb5f1d30f87f09cd3c9b3f253', class: "description" }, hAsync("slot", { key: 'b9cb63d0d32b0bff891b3fb2762934166dfe7e83', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2fc5ba8b2441c75def091b2622d415110d10e1d9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '511d6db8b4c200d8fe75e6916791d91b09013c40', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11580,7 +11852,7 @@ class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'd090ca8e8b394c6aad705d0bb3f9fc968f9247d0', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '099a8f183a49fc57b8ba87db8059c940dc57a0a1' }), !this.composed && (hAsync("div", { key: '54ac2247bfd12110c64b0f5825d7afa04f0eb1b9', class: "text-wrapper" }, hAsync("span", { key: '5dd9a9e192bf5afaf423a4a0a528e1787122f6d9', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: 'afe888bfce5ee74f2b73d7e66c15e2892830186d', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (hAsync(Host, { key: 'aaa3f2ebc89268000413b1431fd69bf48a5270e0', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '5ec8b34d1642c4978290db8e741d7b61db1166ef' }), !this.composed && (hAsync("div", { key: '054bab6f0e0c1fe80666c115058d4adbbdfdef05', class: "text-wrapper" }, hAsync("span", { key: 'eaba500c4e8cdc122a368e2329134c6499fa3827', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: 'bdffe532360c437512485c93893c4fc0ecccb726', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -11634,7 +11906,7 @@ class NvFielddropdownitemcheck {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'f32a4fc00fb588d7dd561ee0113e1c1a1d97cb6d' }, hAsync("div", { key: '52d38335c0f4e545422d9476ffb2995c277d1e51' }, hAsync("nv-fieldcheckbox", { key: 'c663d95854d407aa9ab05eb69b00a22683a6d108', 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: 'c76823d19d02d60e94d55c3d48b01319b68c2c9f' }, hAsync("div", { key: '09a3207064891e00c88e0443f6b709195da622ba' }, hAsync("nv-fieldcheckbox", { key: '74e188edba8f1fb69fed0a08b156a6ead4f37203', 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; }
@@ -12876,9 +13148,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '70d89d0f326207ccc718a2509040ae169c9a4766' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '94bda25e940c5106960792c6596eb0a4102fbb83', htmlFor: this.inputId }, hAsync("slot", { key: '66b375d396248ab82aef12d5d6e6e7484f2bf432', name: "label" }, this.label))), hAsync("div", { key: '8d045c65a76bd2254d1c8245de307481b4f0a01c', class: "input-wrapper" }, hAsync("slot", { key: '0227e160a6c543e407255441ec71039b42e64acc', name: "before-input" }), hAsync("div", { key: '66ca995286db7c02ac8f64dae41106700da09df0', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '768103fb5f8757c3934756ab6d88fab25e9b822c', name: "leading-input" }), hAsync("input", { key: 'bb99ab4b49b5dd3c8c125029763c4811ffbd85fd', 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: 'd4f6648ada904a08c737576ed2c4415646e25781', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5107237f912e9c262d9fd59827077783e4334e08', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '3ae6a9160318469b01de53f40966df4c3847e5da', class: "stepper-spacer" }), hAsync("div", { key: '857cf68e52723e700298dd4f2dd20bea9d3efe9f', class: "stepper" }, hAsync("nv-icon", { key: 'b464afcc26a52831f14e3c444ff9764554cb82a1', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '8a0dfec2ce6167d807cd782c61c5c840d029903c', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '7648091499a3403edc9fa7f106cb6ee8ce862695', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '97842a04fe0e43666d61fe04edc5477b21d90cbd', class: "description" }, hAsync("slot", { key: '2b7735f5d554518abd65437f3ef20331a9ac6de6', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '16459d0fb1332dedb989eddc419beb81ab387770', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ab264600a96b6c676a2c8eaa917f4893566c4a2b', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'fdc30e5567fc9f51c4fb8d09df429492ea0b884b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bc0e6520518b959e86c898f71fae71393b60db8c', htmlFor: this.inputId }, hAsync("slot", { key: 'b752e6e35a2b740743c2beb86d7772e55ba907f6', name: "label" }, this.label))), hAsync("div", { key: '678f82dd91a8a78ed807853472b340c0de91ede9', class: "input-wrapper" }, hAsync("slot", { key: 'd3b8c0135d8a8824057ae5079cb103d1f126eef2', name: "before-input" }), hAsync("div", { key: '03b1d5827013ab5d69e005cea6bbf37a334d3555', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'bab7cedd33af0e9d7cafaa6a7cd449ef37908f1a', name: "leading-input" }), hAsync("input", { key: 'ec2eec28ed7c69fb1139e753c921866df17eebab', 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: '9f82b0d94fc47d1433cf8acf69eea1873829ccb0', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '48823ced8adaacbc1de22cfc6b6812359639e986', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '45619dcfafe7fe6356a8d452042eb3846a4361ec', class: "stepper-spacer" }), hAsync("div", { key: '0ec97af02cea09878bbcd0ffb1ddb18355a6d274', class: "stepper" }, hAsync("nv-icon", { key: 'ec5cb47b730a7554dc6aab838e917645471fe5b1', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: 'cefbb6b9b8b7c18f1b9bd3fd3c43a7e4b1925939', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: 'ea783ef8cd3f6ae9b5fc025f5eb9e91b7d64c0a3', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '56488d6b2c0fd5a171345e8e401a15a218eb2d20', class: "description" }, hAsync("slot", { key: 'bb3ee834416cd2fd3cc8f774854a2e1a279bd1c2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '77827e731e549789eca0f2d23fe9c08086ad3fac', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '27f5125d4a8032a996a70d0901ef82dd888f2631', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13027,9 +13299,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a2a75f57ed5aab1871093e0dc8cb1fc69bbcd629' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ae72e6b94840984218b27a31ad73e0f8045ca7ec', htmlFor: this.inputId }, hAsync("slot", { key: 'ed5944910dcc313d5d714da59335997e940db46a', name: "label" }, this.label))), hAsync("div", { key: '8253dfa7980a3b8296eb87340279e9d7d541dcf5', class: "input-wrapper" }, hAsync("slot", { key: '8175a3cff67ab23147137b2c0eb90011a599fff1', name: "before-input" }), hAsync("div", { key: 'ba8c2cc23f94de4c35682e8fa5d5f03ddc5f682b', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '086607d8ab45057b91c5c4bce05555df1c2cf908', name: "leading-input" }), hAsync("input", { key: 'acf906ca1704017f77edde85529f06610d434606', 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.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '89c996d184b91cdb27a7d5fc6c8591ef678e4830', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '650e6ab57d36aab285b7d3648eeca9272c5967b9', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '05cca97a872c4c45e1bf6b76bbf0dfdeaa5dd9d7', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '4a0816cfb135de9b787e89cfed15d69cd3006674', class: "description" }, hAsync("slot", { key: 'a549520294ab5b05671e1621977001da5dd0b366', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0f94385395ad3a178d0567e582c297b7065ada10', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'dc1496e3a175192aa15d68985d157687e64828b2', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'd0078215ddf9b9dfffab5c7a6cd051fc0e71a1fc' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3a70f55304ad478926e602bbbd1e63919cd4619d', htmlFor: this.inputId }, hAsync("slot", { key: 'fd5ce5778de8c3f570875db32e9b78cbc56d89fd', name: "label" }, this.label))), hAsync("div", { key: '758cd523d7725d66d05c1dbf75a3e1201e562678', class: "input-wrapper" }, hAsync("slot", { key: 'f7f24e4bd354bf8e846ab572ed11a9c7434ae4ac', name: "before-input" }), hAsync("div", { key: '836c7a610b2f933802cdd88e7409237e15052ab5', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '809458dc1e4df28b5e0469f125863a982a44f818', name: "leading-input" }), hAsync("input", { key: '974ac5f6e5376ccd4270c697aeb39ddea31795a6', 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.hidePasswordIcon && (hAsync("nv-iconbutton", { key: 'de837dff67b4efd185b47cfd9c6ca6747fc3f53b', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '9861347e871ba5902b2efa805327f3f047ba0483', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '5d10cdaee0cce724c1d63c049f50cc72df792e45', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '940bb21f81d7da297aeee0c8b3ca682e12431cea', class: "description" }, hAsync("slot", { key: 'ee8714f0b933911e6ec2681d70c3ae12457cc800', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b1ebf7989bdc005d3ea420a3015581d67ef60cf5', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '1bfff83b33561185319d9426fd5e453603773240', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13156,9 +13428,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cade01b60e51b998455b5c2230a78eea38e0bc37', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '6d8447c0fa3909e02841545d873eea91fa47df4a', 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: '4d5091c83fc3d7252992808957eab4d48f2bc2a2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '54aec63e1cb36ca4da70217dcbc660566cce5d7b', htmlFor: this.inputId }, hAsync("slot", { key: '90532425375b668ae6626fecb856f8f9ceb81988', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '54853df7ac2a43e4de04924fabb2270258b663b8', class: "description" }, hAsync("slot", { key: '9e806a6957feff9555ea2a578fd91ea0253d1157', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f3c90009eba0cef54231c9b38b7829d8b9433563', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5b517d44167035b867b7d2cbedeab2a5925156b6', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: 'bd51642504244a306b09a16d8e36bee557794573', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '70968546af8a6b90109e9a5e2d3e8c86fb24a80f', 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: '93f69c04ccb7d481dd8ad81dcc61599d7108f693', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '529222eccbcce06ac0b8652da8f5c5ad184b9ac0', htmlFor: this.inputId }, hAsync("slot", { key: '7d3ed6fc143809117d5487dad45dab06de2ec46d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1cbb1103296356ee3bc90b559be905514cc3ae9b', class: "description" }, hAsync("slot", { key: 'caac6f4b9d306051def069b2634f3ae06c3c0f58', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '359a740badd9d9d46c3316536d214634c184c26b', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd592baab1a424e5d89c42cf8013126bcb32637df', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13538,13 +13810,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'ec04f194be75e170699c357326154d7941fec6ce' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0edc03d998e48060f9ceb0f164df1870226d8f7a', htmlFor: this.inputId }, hAsync("slot", { key: '8a30ef1179797c99439e817d361e64eb7d5ad49e', name: "label" }, this.label))), hAsync("div", { key: '06a59d0d207252a48a8a1b15592261c684eae329', class: "select-wrapper" }, hAsync("slot", { key: '1a00c30cb8b3052e889dc15ba4581d58c88bb199', name: "before-input" }), hAsync("div", { key: '5f405ab2666cf72dda3efa7a38d72d9d1febc964', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '711c23d7209a67a98c5b4915b02747e6c3dbaccf', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'ab155f3f4fb064f9140f92a5d355388b2da38192', 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: '720d67f91c84402a441997043ed5bf32fd6d63f3' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0a003255587db9f64b38a7bda222c1bf365d2333', htmlFor: this.inputId }, hAsync("slot", { key: '54854cf9044a7402ac4d41aa4c7ee1cf8b72ff0e', name: "label" }, this.label))), hAsync("div", { key: '2dbbdd124094b13252d4b2bf436324862e4226ce', class: "select-wrapper" }, hAsync("slot", { key: '02a2a74358fc983001c8034a7dd73511128356dd', name: "before-input" }), hAsync("div", { key: '6a365a78a60c54f131f5920b16ea22841c1099c1', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '6249703d8332385f95d987020af452ee234de741', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '781987ceb4fb01989f2e8a6e5feb71f90e6e1c54', 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: '59927b0fc45656c38e665fecfee870db6bfff228', 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: '54746aa4805320adce526f4bfe6185d3c4881749', 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))), this.internalReadonly && (hAsync("nv-icon", { key: 'cf35aab9fe5c8d0f684f96de13264c11a86d2847', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '20dc8da6bfc7eeb8f458392d7cdacc94f27d594c', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'a590386f8d19ada1b9aebe07cc4129a301bb4b50', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '063a1fdcf06ab8cff2890f932a04757f7a1b0eea', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5a539edf1387e5fa5e6ff14e8739f42d1d1dd44a', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '6fa1cbff90c6df1f2fdf77e86f762d7dd6ee1ba3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '57b89f5a7f9149fcd9c65f75defd25e2259f27d8', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'a3e85418965c828f241679d4b7359d04ac3801ac', 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))), this.internalReadonly && (hAsync("nv-icon", { key: '2b072550878727e58c8f797675c2fd3db51c4d5b', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '7bfa9720857ac255ccf977cff3b8a5eeade14437', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '5c855fcf653c01ccf4287dc3351f9ef1f10a12ef', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '0e9d7f8704b91237a2c68cbeb5f82c95fefe02f3', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0bbd952607f60fba28aa82962a54b267351dc4ab', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '5471668e19066bf52c22f1880ff98007eb37fe20', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '780884c7f628bff8cc325d2f88daefbb534d5e4e', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'd1471cc841b587dd691d9d8778ed5daf76dacc00', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13697,9 +13969,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '23efa0e56d020cce567f970f342bb0512ae3dd83' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1ffe8dfcd0eb29232f3f4e2a39f0b18e92acced0', htmlFor: this.inputId }, hAsync("slot", { key: '95625aebb5e3464ff2afc1d9c947db28fe7b0ddd', name: "label" }, this.label))), hAsync("div", { key: 'a0754ba8ac030290cc354cbbc287049b890c92da', class: "input-wrapper" }, hAsync("slot", { key: '761147017de57353a2d52bac615330b6bb09401d', name: "before-input" }), hAsync("div", { key: '5e2bc20105f6a4587e1f39a81a04527e36b51e4e', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '96d2c58b85692f5a184b8086d048876e1b5b8c28', name: "leading-input" }), hAsync("input", { key: '40e3d073b307dcd09c3b4f5c07f82e06aa1f6b11', 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: '62e3ae1bf3147ccd2869cd8d47b63bedcf3c8739', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '9fabf9beb89950a67b67b3fb98878faae431a633', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '18c99b85da3243c1cf0c58aa8e53d54fb70aae42', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ec83f041aacae7255c7008fc2f842ef7423bb84a', class: "description" }, hAsync("slot", { key: '8051ac72735b0d53dee7a1eac3fee70c87bbd6ef', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd04500341a2a0845476d1fd2bcfdd2da1f930272', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '3e3063574e7a8efa37150c69e1cbd44641229e20', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '16b0fcc5d2efec6d2a2cdb107a4c76a18baf236d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '64cddc3489af9f3dd813e19a10cadc06f43cc325', htmlFor: this.inputId }, hAsync("slot", { key: '377157181d69756758cd51f784bbd8f84bbba765', name: "label" }, this.label))), hAsync("div", { key: '3b0ad33b4a4bd9fb500cef5161f82965a0e884ce', class: "input-wrapper" }, hAsync("slot", { key: '0672d34e2abb71a0a23188e35d46a98bf5c0d405', name: "before-input" }), hAsync("div", { key: '3277740f9d9dde997ea8f1431838864f96f1ddaf', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '73a006eecdcf88a7d45adece285fa47c33eb8e47', name: "leading-input" }), hAsync("input", { key: 'b35f4fcd9da526319eb343f8895639dce1040a4e', 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: '7206159be5c10148a5795e3c91e22adb334da705', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'f975d1defecb4ed5f492d852edb2e43c1eb0f885', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '7f66ace5166da21da2b7b6577255d6ab740db7c7', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '73d919c7d25ae8f2cedc5c6af9a6b63a1c90bdb3', class: "description" }, hAsync("slot", { key: 'a1956415fd5a6cd4f4b04cabbcfa9d6572d575dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e290b1424a34652b74540fdc37623c5ac02854a4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '24dfc8ab5ec1bf87053459cf44087434ebd8ccfc', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13914,9 +14186,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '331d328227b95cd763286de8919e514d836bb084' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a6513b1dad621ba2d9bd1fcec79900393ec1adb7', htmlFor: this.inputId }, hAsync("slot", { key: '8c8ce8a47093b6353ece69bae4b7203765a4fb36', name: "label" }, this.label))), hAsync("div", { key: 'a283ef8642118b2fb0aed16b745928be4079cea6', class: "textarea-wrapper" }, hAsync("div", { key: 'a40abe6cda9712052c0203aef387f4d4feed4832', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '67dc245ba0abefad9d1c23aad454c5bb4f72b609', 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: '7b5676446b1152bacb9ecabbed9d807474141726', class: "description" }, hAsync("slot", { key: 'cd59404bf0cecbc7da8a0e6d80f97b23fd28c869', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '9ccbb4d29eca26eee0118fa329cac63c552b2656', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5295afeb285a7479b6813c29f0097c8a81ca919a', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '6a5e087e6b7d187d50dca6abef33e8a4b479ebfa' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'acf32fe67ff1cdd151c927db09e9089a20dd6650', htmlFor: this.inputId }, hAsync("slot", { key: '7d53d924c77f95ae9684ae0b3d66215efcf16bde', name: "label" }, this.label))), hAsync("div", { key: 'bada1f842324833101d2c73c0b5a798ab10d788d', class: "textarea-wrapper" }, hAsync("div", { key: '6748ef7e5c95d73d7dbadf302b5a4dfa7030e8d6', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '25927fe8fffb401181d421d14f2fb99e1d16fb1e', 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: 'b2303204093639b126cd368aab3f3d8dc168666c', class: "description" }, hAsync("slot", { key: '5ecadb6919f664bc4ffa728a26c8797da6adef73', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f0fcd7735336d1505336d2b27f4ed2d72a987dee', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '89a988c843b7890d6dfa69d7446d07c32b05fc6c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -14940,26 +15212,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: '35ff4b2a7eb1eb3f2503eec2216f0acf8a4087b7', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a137feb35c8ac11429c0ec5226ce02a4ad8c188f', htmlFor: this.inputId }, hAsync("slot", { key: 'cdffe9bec4c87fabe1fd37dba0783d2d1389393d', name: "label" }, this.label))), hAsync("nv-popover", { key: '9735238d52307520ab18519f85c7b91e29095564', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '7b15d62b4a49ad6dc1cb6f487bd9e32678aab32b', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '6d29417ed7997302d22ab883b8e16eea576a6970', name: "before-input" }), hAsync("div", { key: '0ea68d72d9360a76dbbd9670dcc76ed40df7d817', class: "input-container" }, hAsync("slot", { key: '145986a835cc308f6691df969411a23bca0765ab', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: '62f50adf4dd6bd8a1daa795808443a73ba907910', 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: 'a8d3a40b7e058a2aeaf13513916d0b9a684177cf', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6ba888fccf0e509c1444c76840db10ffd0bb307b', htmlFor: this.inputId }, hAsync("slot", { key: 'c765fb16582efa03de5adb973974dfa3acbb901d', name: "label" }, this.label))), hAsync("nv-popover", { key: '42d706c3cf0644e72ad59235bf934764ad72f98f', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '35cbf342b723503d831ebcbe7505e8e602faf6e6', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '3aecda4f45d1d28a3d910cbc6c80a750c535f472', name: "before-input" }), hAsync("div", { key: '9e7b0f48c05f0fd3d679827e94a7671e436063fb', class: "input-container" }, hAsync("slot", { key: '9e089d23d2396c88fa255c1432f19986d899d3df', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: '494e1b249f6d430d71892d4a86235d7556d95a23', 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: '9b58e67ba5e138f78feebc5e84c67506c6d3a3c2' }, ":"),
-            hAsync("input", { key: '5c2e673f5a3f34c6e1c4619e793ac0e042bdc2f2', 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: 'f5c39484de41e16b9f990b1e265a33ccacefef40' }, ":"),
+            hAsync("input", { key: '25090d6092afb1b9847ae2a5ffce78d1092e222b', 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: '52c86d913b1d312cda254b24f22e5c0fe3f7ff3b' }, ":"),
-            hAsync("input", { key: 'b882cb0061bcebc3c487857e2d1f4907a9c82a92', 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: 'a99d42e6e6a158202db6951e8af53d293db33539' }, ":"),
+            hAsync("input", { key: '5784cce08f572e51fa3ed54f852a7aae61a3631e', 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: 'b6916d20ca835471169d2c8bc9c9506b5896d14d', class: "toggle-time-icon", 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: 'a40f6ca94e578c85d30fb59ea7f8719ed18b9feb', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '9e042ce055d8369d74d09f3c1fb483b69693a348', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '47ac01deec7af0b6632ed424ab772713bfc3ce50', name: "after-input" })), hAsync("div", { key: '654b9176d6f04161a855c249f086aa6f40389977', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '422b4c774aa084fa2a8062b9b53ff37abf9c2296', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '0a15832ee80a4f951305e444fc4e569282f66a79', class: "toggle-time-icon", 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: 'e6b05cdb8f10db07fa2c7b1a8e86d4c10cf0d799', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '59e9f8981b015a4f576a696fd1aaded07fb12753', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '49fc827b3490cfd627562a12b4a03a5c8b09b756', name: "after-input" })), hAsync("div", { key: 'be3889f6e579b98e81f0ef9cef12370162787a68', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '1a07134c83a2137a911a15ebe7c40ff9f727897a', 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: 'f66ec4ddce5d506f6bf845dd77257d8c401fd9d8', class: "description" }, hAsync("slot", { key: '454bd29d86f8f100062db5ff81bb3f31df225d72', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e170ea292e2b4b90f78dcaa82e2b9985634d7aec', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '57a04082aaf4869e8f63db68975208e64769bc07', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f2cf7dbff2676d1310f77cab254bdd3c429b4ebe', class: "description" }, hAsync("slot", { key: '4a17bc105869db3a2745685529714bcb144c539c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a1468a32174d8b2fc422d0a46ff7b6bf2c2b5785', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'dbbfb01c2b266deaadff1c323e809026ec9bf2ac', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15024,7 +15296,7 @@ class NvIcon {
         /**
          * Adjust the size of the icon to fit your design needs.
          */
-        this.size = SemanticSizes.Medium;
+        this.size = 'md';
     }
     /**
      * Ensures the icon sprite is loaded into the document.
@@ -15064,7 +15336,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b2a8b70af671a5deec62c8bf56776f3eca07a752', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'a4e4ca00acf0ab9a08b855cbcd64090e591f7d84', 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: 'db4a82f69fca502c66082901e02174ca4aeaa112', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: '53db08477e110c5a5c4b4073609f7608730a6756', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '2eb9103b3626ff740aa1579578f284561c9bbdcd', 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: 'c3cc962d34a43b46efdb943733ee9fc51e5e4eab', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -15193,7 +15465,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4d3b2d965d1c31c17565da237664d553f726140b', 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: '3e3220fba9ff271c062d5295256c024a8295cc76', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'af550128cb7d6da4df6c200ebb814683235ab03b', name: this.name, size: this.size }), hAsync("slot", { key: 'd7b418281a5c50779f16ed1a446b4ad2807c0fb0' })));
+        return (hAsync(Host, { key: '58e0f2e1cb0180250086f4cb68bcf8c01e192648', 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: 'b74e4504553621de583e3257387b820fd731e4ab', size: this.size }), !this.loading && hAsync("nv-icon", { key: '5cc7474666cfefe2691907cff1e2c062293dee7d', name: this.name, size: this.size }), hAsync("slot", { key: '6f084b32248d3f92ce74f630e8465218907468a0' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15241,7 +15513,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '7d0d6e58dd8ac84ff91086301beb04eddbd8478d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '3061eccded64d25321cd49c2a03e1117779f61c0', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -15291,7 +15563,7 @@ class NvMenu {
          * below, to the sides). If there isn’t enough room, it will adjust its
          * position on the axis to fit on the screen, so users can always see it.
          */
-        this.placement = this.nested ? 'right-start' : 'bottom-end';
+        this.placement = 'bottom-end';
         /**
          * Parsed items stored in state.
          */
@@ -15473,7 +15745,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'c7bf4fb2e52917697e7250e557b195ab1674d32c' }, hAsync("slot", { key: 'aaa984dd4c6a1de24962138a681195731049f0c1', name: "trigger" }), hAsync("nv-popover", { key: '4c808244edbb4252b498f9e58ad6d6b236701d28', 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: '63955f0dfd09984650fae2e67a1a52e97485c742' }, hAsync("slot", { key: 'edeaea189977961a8a77e20f6afe31ffebdebf9d', name: "trigger" }), hAsync("nv-popover", { key: '51ded6ba14423c18e9db8053c5c8048d68a3e835', 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" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15548,7 +15820,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '00eb86ae218c3c5f26d8cca8b2b6dd01c188e892', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '3e724d9b9ca5c4217d4e7bbbc89987b437465633', name: this.icon }), hAsync("span", { key: '0528eb7b9248a23d198ec14a300b4b6fa8b9807f', "data-scope": "text" }, hAsync("slot", { key: 'eab9b1545c566888160daaac5382c0617950a3d6' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: '665a6d3016a6ecb45556b8cb693d495e39d9ade6' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '1e6dc4e78295910947598fdf82625e275ef43f61', name: "chevron-right" })));
+        return (hAsync(Host, { key: '48927594d07e47785b4f5fa3fe9c9de124639a04', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '3aebb72e0253570ccac2b56df6105a2369d9eb25', name: this.icon }), hAsync("span", { key: '7fa806cb1466cd163176d9803cbb19ce82de95f6', "data-scope": "text" }, hAsync("slot", { key: '9ba63eea4a78a7f92c060235f0a2835d28ce2a51' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: '40d2e13a6599ed865b86af496730f7d940a6e7c6' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '11dec66dff350a59f5a3199dd6983ac578218468', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -17917,7 +18189,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '70a86c895bd48aaa2df3e4a2f6c09970349beb82' }, hAsync("slot", { key: '3454968dd835224f8d714c04c44140cdb1b78be8', name: "trigger" }), hAsync("div", { key: '40d13a1026201f162c160208dc4632f15a3dbd5e', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '84729e3a457d4c261c482279cea99a51c5bd917d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'd840299c028d29ca188126f4ab1d81bc6c4a12bb', name: "content" }))));
+        return (hAsync(Host, { key: 'c3befa1e8d317dd2a934de3a3bc8bcf032f547f3' }, hAsync("slot", { key: 'ed004517edbd180e3e4d6f6adddc7f282a59fe64', name: "trigger" }), hAsync("div", { key: '3c55ca065c9c1f293572a297078da4296b4a5a3f', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'e356e91d35f468ed1f98eb44e6974d3438f9d532', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '2a71c9727ae7e3cbf13595ffb4b9d56c6966bd46', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17962,7 +18234,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2c3b123ef4d7b9f5ad8dbf6aea7e28f193814f35' }, hAsync("slot", { key: '56fa851396d284c9c38c6d05d6bafa8123e97416' })));
+        return (hAsync(Host, { key: '9baad27eb331d2e0d68be8cb2e3dd2cacc7f913c' }, hAsync("slot", { key: 'f346a7568b71a1de72ddc7c36bbf0df21f8e9968' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -17997,7 +18269,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4bccce6f6bebe0998262e7642a0c2f7abe9a1d16', 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: '63e31c94c88baaaaada221e1682d128f4edfa76c' })));
+        return (hAsync(Host, { key: 'c8b211684fe80277d45e7c69304eb80fa0bc78d1', 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: 'adce599bad0bfcbbf4fde1c6e01cd605e5161ce8' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -18016,46 +18288,42 @@ class NvStack {
     }; }
 }
 
-const nvTableCss = "nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";
+const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-border-header);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-content-header)}nv-table td{border-bottom:1px solid var(--components-datagrid-border-body);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-content-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
 var NvTableStyle0 = nvTableCss;
 
 /**
- * @slot default - Use this slot to insert HTML into the table content.
- * @slot head - Use this slot to insert HTML into the table header.
+ * @slot default - Slot for the composed table columns
  * @slot before - Use this slot to insert HTML before the table.
  * @slot after - Use this slot to insert HTML after the table.
- * @slot body - Use this slot to insert HTML into the table body.
- *
- * @deprecated [EXPERIMENTAL]
- * @experimental - This component is still under development and is not ready for use.
  */
 class NvTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.action = createEvent(this, "action", 7);
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
         /****************************************************************************/
         //#region STATES
-        this.parsedColumns = []; // Parsed array of column headers
-        this.parsedData = []; // Parsed array of data rows
-        this.hasSlotHead = false;
-        this.hasSlotBody = false;
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.table = null;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
         /**
-         * Defines the table columns.
-         * @example ['Name', 'Age', 'Email']
-         * @default []
+         * Data to be displayed in the table
          */
-        this.columns = [];
+        this.data = [];
         /**
-         * Defines the table data.
-         * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]
-         * @default []
+         * Configuration of the columns of the table
          */
-        this.data = [];
+        this.columnsConfig = [];
         /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
+         * Fallback value to be displayed when data is not available
+         */
+        this.fallbackValue = 'N/A';
+        /**
+         * Message to be displayed when no data is available
          */
         this.noDataMessage = 'No data available';
         /**
@@ -18066,17 +18334,239 @@ class NvTable {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));
+        columns.forEach((col) => {
+            const key = col.name;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
+    }
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else if (this.data && this.data.length > 0) {
+            this.parseDataArray(this.data, this.parsedData);
+        }
+        if (this.columnsConfigJson) {
+            this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);
+        }
+        else if (this.columnsConfig && this.columnsConfig.length > 0) {
+            this.parseColumnsArray(this.columnsConfig, this.parsedColumns);
+        }
+        else if (this.headerTemplateCache.size > 0) {
+            const headerKeys = Array.from(this.headerTemplateCache.keys());
+            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { name: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+        else if (this.parsedData.length > 0) {
+            const firstRow = this.parsedData[0];
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                name: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+    }
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    /**
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - New value of the data array
+     * @param {any[]} oldValue - Old value of the data array
+     * @returns {void}
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
+        }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    }
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {ColumnConfig[]} newValue - New value of the columns array
+     * @param {ColumnConfig[]} oldValue - Old value of the columns array
+     * @returns {void}
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
+    }
+    initializeTable() {
+        // Clear the previous table instance (if any)
+        this.table = null;
+        if (this.parsedColumns.length > 0) {
+            this.table = {
+                columns: this.parsedColumns,
+                data: this.getTableData(),
+            };
+        }
+        else {
+            this.table = null;
+        }
+    }
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
+        }
+        else {
+            return [];
+        }
+    }
+    // Helper function to get nested property value
+    replaceKeyWithValue(obj, path) {
+        var _a;
+        return ((_a = path
+            .split('.')
+            .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)) !== null && _a !== void 0 ? _a : this.fallbackValue);
+    }
+    renderTemplate(template, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, row);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, row);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, row);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            const keyAction = splitted[1];
+            const details = splitted.length > 2 ? splitted[2] : null;
+            el.addEventListener(eventType, () => {
+                var _a;
+                const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    acc[key] = row === null || row === void 0 ? void 0 : row[key];
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
+            });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
+            });
+        }, 0);
+        return (hAsync("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
+    }
+    replacePlaceholdersTextContent(element, row) {
+        // ✅ 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(row, key));
+            }
+        });
+    }
+    replacePlaceholdersAttributes(element, row) {
+        // ✅ Replace placeholders in attributes
+        Array.from(element.attributes).forEach(attr => {
+            if (attr.value.includes('__')) {
+                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersProperties(element, row) {
+        // ✅ 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 value = element[prop];
+                    // ✅ Replace placeholders only if the value is a string
+                    if (typeof value === 'string' && value.includes('__')) {
+                        element[prop] = value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key)); // ✅ TypeScript safe
+                    }
+                }
+                catch (error) {
+                    console.warn(`Could not assign property ${prop}:`, error.message);
+                }
+            }
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
     //#region WATCHERS
     parseColumns(newValue, oldValue) {
         this.parseColumnsArray(newValue, oldValue);
     }
-    parseJsonColumns(newValue) {
+    parseJsonColumns(newValue, oldValue) {
         try {
             const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, this.parsedColumns);
+            this.parseColumnsArray(newItems, oldValue);
         }
         catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
+            console.error('Invalid JSON format for columnsConfigJson:', e.message);
             this.parsedColumns = [];
         }
     }
@@ -18093,277 +18583,86 @@ class NvTable {
             this.parsedData = [];
         }
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Parses the columns array.
-     * @param {string[]} newValue - The new value of the columns array.
-     * @param {string[]} oldValue - The old value of the columns array.
-     */
-    parseColumnsArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
-    }
-    /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
-     */
-    parseDataArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    handleParsedChange() {
+        this.initializeTable();
     }
-    //#endregion METHODS
+    //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
-        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson);
-        }
-        else {
-            this.parseColumns(this.columns, this.parsedColumns);
-        }
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
-        }
-        else {
-            this.parseData(this.data, this.parsedData);
-        }
+        this.cacheTemplates();
+        this.parseDataAndColumns();
     }
-    //#endregion LIFECYCLE
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        const headerRows = this.hasSlotHead
-            ? Array.from(this.el
-                .querySelector('[slot="head"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        const bodyRows = this.hasSlotBody
-            ? Array.from(this.el
-                .querySelector('[slot="body"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        return (hAsync(Host, { key: 'b445be90862bb95df560d26215d0a175b2c5f02d' }, hAsync("div", { key: 'fc50c87d2b4e9d233bc90ef16c9c6701fbca0467', class: "hidden" }, hAsync("slot", { key: '03429a816585ffa3e36066bfd06d2d320714b9b5' }), hAsync("slot", { key: '06d30f5c55e34f0be4212c3153874475fc93be2c', name: "head" }), hAsync("slot", { key: '64d73c406a6d72187ab0cb7434ed8c5894564076', name: "body" })), hAsync("slot", { key: '038d7e7f5fd6125b101c286558e61afb3b493d88', name: "before" }), this.parsedColumns.length === 0 &&
-            this.parsedData.length === 0 &&
-            headerRows.length === 0 &&
-            bodyRows.length === 0 ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 ? (hAsync("thead", null, hAsync("tr", null, this.parsedColumns.map(column => (hAsync("th", null, column)))))) : headerRows.length > 0 ? (hAsync("thead", null, headerRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tablecolumn'));
-            return (hAsync("tr", null, cells.map(cell => (hAsync("th", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, scope: cell.scope, innerHTML: cell.innerHTML })))));
-        }))) : null, hAsync("tbody", null, this.parsedData.length === 0 && bodyRows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : this.parsedData.length > 0 ? (this.parsedData.map(row => (hAsync("tr", null, this.parsedColumns.length > 0
-            ? this.parsedColumns.map(column => (hAsync("td", null, row[column.toLowerCase()] || '')))
-            : Object.values(row).map(value => hAsync("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
-            return (hAsync("tr", null, cells.map(cell => (hAsync("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), hAsync("slot", { key: 'd24abb3236e2d1019d2316da1d1cc2f19d33902b', name: "after" })));
+        const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
+            ? []
+            : this.table.columns;
+        const rows = !this.table || this.table === undefined || this.parsedData.length === 0
+            ? []
+            : this.table.data;
+        return (hAsync(Host, { key: 'b740dfd8e0db88881f7ca062eaab5b3373b236c2' }, hAsync("div", { key: '784d4b910c00ce5dc6b91768f457d0e649b70431', class: "hidden" }, hAsync("slot", { key: '0891b88350c4f4e50634870ae5bafab7f8bdb46a' })), hAsync("slot", { key: 'bc895b4327694ba7b660fce776e6ce1c1817c5dc', 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: 'b4b5a8442f3a6982fb6d268c8b076a4d361b933c', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"]
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
     }; }
     static get style() { return NvTableStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
         "$tagName$": "nv-table",
         "$members$": {
-            "columns": [16],
-            "columnsJson": [513, "columns-json"],
             "data": [16],
+            "columnsConfig": [16],
             "dataJson": [513, "data-json"],
-            "noDataMessage": [1, "no-data-message"],
-            "noColumnsNoDataMessage": [1, "no-columns-no-data-message"],
+            "columnsConfigJson": [513, "columns-config-json"],
+            "fallbackValue": [513, "fallback-value"],
+            "noDataMessage": [513, "no-data-message"],
+            "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
             "parsedColumns": [32],
             "parsedData": [32],
-            "hasSlotHead": [32],
-            "hasSlotBody": [32]
+            "table": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["columnsJson", "columns-json"], ["dataJson", "data-json"]]
-    }; }
-}
-
-const nvTablebodyCss = "";
-var NvTablebodyStyle0 = nvTablebodyCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table body.
- */
-class NvTablebody {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: 'cdf37e086d4194bdcb941942226d17ba38ec7dc7' }, hAsync("tbody", { key: '3a8f72860faed461685b8184aeb274eec59188ba' }, hAsync("slot", { key: 'f7450cf4858bc7452e4cb840ac7e06e5848dc75f' }))));
-    }
-    static get style() { return NvTablebodyStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-tablebody",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsConfigJson", "columns-config-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"]]
     }; }
 }
 
-const nvTablecolumnCss = "";
-var NvTablecolumnStyle0 = nvTablecolumnCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table column.
- */
 class NvTablecolumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * A non-negative integer value indicating how many columns the header cell spans
-         * or extends. The default value is 1. User agents dismiss values higher than 1000
-         * as incorrect, defaulting such values to 1.
-         * @default 1
-         */
-        this.colspan = 1;
-        /**
-         * A non-negative integer value indicating how many rows the header cell spans or
-         * extends. The default value is 1; if its value is set to 0, the header cell will
-         * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,
-         * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534
-         * are clipped at 65534.
-         * @default 1
-         */
-        this.rowspan = 1;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b915edf73d123698dda7b09dff8338ab6e7996bc' }, hAsync("th", { key: 'dc055106d9bcd20c962515477d6d6abd570b36b6', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: '2b760e4a3a0a796724300cce8437d886b9c26deb' }))));
+        return null;
     }
-    static get style() { return NvTablecolumnStyle0; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 0,
         "$tagName$": "nv-tablecolumn",
         "$members$": {
-            "abbr": [1],
-            "colspan": [2],
-            "rowspan": [2],
-            "headers": [1],
-            "scope": [1]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvTabledatacellCss = "";
-var NvTabledatacellStyle0 = nvTabledatacellCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table data cell.
- */
-class NvTabledatacell {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Contains a non-negative integer value that indicates how many columns the data
-         * cell spans or extends. The default value is 1. User agents dismiss values higher
-         * than 1000 as incorrect, setting to the default value (1).
-         * @default 1
-         */
-        this.colspan = 1;
-        /**
-         * Contains a non-negative integer value that indicates for how many rows the data
-         * cell spans or extends. The default value is 1; if its value is set to 0, it
-         * extends until the end of the table grouping section (`<thead>`, `<tbody>`,
-         * `<tfoot>`, even if implicitly defined), that the cell belongs to. Values higher
-         * than 65534 are clipped to 65534.
-         * @default 1
-         */
-        this.rowspan = 1;
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: 'fa4aaa160d405696e80897cb1cb0ec051468d150' }, hAsync("td", { key: '9d25cf82d40c0416142b22c286445358316e1e64', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: 'ecc470509926b5641e39cc8b3ed6e96e247e41fc' }))));
-    }
-    static get style() { return NvTabledatacellStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-tabledatacell",
-        "$members$": {
-            "colspan": [2],
-            "rowspan": [2],
-            "headers": [1]
+            "name": [513],
+            "header": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvTableheadCss = "";
-var NvTableheadStyle0 = nvTableheadCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table head.
- */
-class NvTablehead {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: '89e28d2e09f6c5521ed3a06cd3d4674b238a384c' }, hAsync("thead", { key: 'fc9629c1d7af5e96f14d7c6b05d4e42618471f07' }, hAsync("slot", { key: 'bfc72494b0f3fe32153143a9099e4917c1ab77d5' }))));
-    }
-    static get style() { return NvTableheadStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-tablehead",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const nvTablerowCss = "";
-var NvTablerowStyle0 = nvTablerowCss;
-
-/**
- * @slot default - Use this slot to insert HTML into the table row.
- */
-class NvTablerow {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (hAsync(Host, { key: '5887cd3c2bda63bc177f7faf735ebade9b0bdc49' }, hAsync("tr", { key: '4b5b73272bbb87683d04e5838e52bdd4ff7b441b' }, hAsync("slot", { key: 'bc8d620194b9e73efefe6acdf7473e481d6bdef3' }))));
-    }
-    static get style() { return NvTablerowStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-tablerow",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["name", "name"], ["header", "header"]]
     }; }
 }
 
@@ -18431,8 +18730,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '75e37c699cfc3b0488dfb660ff7e1dc8bc4fcec7', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'a34755c8cfa921ffbc7e60cff93f89b2eb451007', class: "input-container" }, hAsync("input", { key: 'dbfc3021614001f1fd2d2fb3dd1352fc33078fb2', 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: 'afac6bb640ba44af0d9fc3841dae90bfb3130c89', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'eac00ea14d7181b17cc06d48f69dcd46d891d9b9', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '52f3e6ee4c7fed8218a2c782b1cdedd4230ce8ac', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '861fc6d2e9abf58e43e45e91dfdd2da7705c5e1a', class: "description" }, hAsync("slot", { key: 'cb218ac2d197f84202c668621ee9e56c936ca50f', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '0ea7a73c5b656d0d7f9342a9526dc00a66a94f83', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'eb294c704b9f3568e03af1817a302d2edfe24486', class: "input-container" }, hAsync("input", { key: '777b6e7172691aba435751364c5908f381390f23', 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: '92dbdb51e8c9fc231572009d37e274e070334292', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'bf6cb8ff071c11d7809580a5dee61a1dfd89c112', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'db77b501162725dcf3b05b3d7c4b26d0f933ac8b', class: "description" }, hAsync("slot", { key: 'a201c736b5237e88ee0d8caa3999874caa7f85f3', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18497,7 +18796,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '59735e979b8e88ad61ebbdf77c305377884a445e' }, hAsync("slot", { key: '6002089cc748045fa836f03d2b4da9101f4f2851' }), hAsync("nv-popover", { key: '34fa8dd4cb98dd9c46ad2a723153cdffb5fa9d88', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '10869c05ea2247817a571128b104f6995eff5b1a', slot: "content" }, this.message), hAsync("slot", { key: '3527b66fc2aa974e243470d45a1aaab6b8453401', name: "content" }))));
+        return (hAsync(Host, { key: 'c5a2dddc41ad3379be20d7809faf4bd683ff459c' }, hAsync("slot", { key: '400d32d15407fed83e424f00338efd60528b6fb2' }), hAsync("nv-popover", { key: 'd7efd362efa204aae2fea623a5efd33d3b1429b0', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'a6426276d51217387c4d028bb0eb719839197d62', slot: "content" }, this.message), hAsync("slot", { key: '01f6af2ae0243f3cd6c2d1a01e6c16cd2fd16cd0', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -18527,11 +18826,7 @@ registerComponents([
   NvCalendar,
   NvCol,
   NvDatagrid,
-  NvDatagridbody,
   NvDatagridcolumn,
-  NvDatagriddatacell,
-  NvDatagridhead,
-  NvDatagridrow,
   NvDialog,
   NvDialogfooter,
   NvDialogheader,
@@ -18556,11 +18851,7 @@ registerComponents([
   NvRow,
   NvStack,
   NvTable,
-  NvTablebody,
   NvTablecolumn,
-  NvTabledatacell,
-  NvTablehead,
-  NvTablerow,
   NvToggle,
   NvTooltip,
 ]);