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

package/hydrate/index.mjs

@@ -2730,7 +2730,13 @@ var NvAccordionStyle0 = nvAccordionCss;
 class NvAccordion {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.nvChange = createEvent(this, "nvChange", 7);
+        this.openChanged = createEvent(this, "openChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to display as a list of items (title, subtitle, content).
+         */
+        this.data = [];
         /**
          * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
          */
@@ -2742,12 +2748,6 @@ class NvAccordion {
          * Internal index of open items (not exposed)
          */
         this.internalOpenIndexes = [];
-        /**
-         * Parsed data from data prop
-         */
-        this.parsedData = [];
-        // Synchronization openIndexes <-> internalOpenIndexes
-        this.itemToggleHandlers = [];
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -2788,7 +2788,7 @@ class NvAccordion {
             }
         }
         this.internalOpenIndexes = openIndexes;
-        this.nvChange.emit({ openIndexes });
+        this.openChanged.emit({ openIndexes });
         if (this.openIndexes !== undefined) {
             this.openIndexes =
                 this.mode === 'accordion'
@@ -2810,9 +2810,6 @@ class NvAccordion {
      * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
      */
     onItemToggle(event) {
-        // Ignore if using data (handled by itemToggleHandlers)
-        if (this.parsedData && this.parsedData.length > 0)
-            return;
         // Find the index of the item that emitted the event
         const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
         const targetItem = event.target;
@@ -2840,8 +2837,8 @@ class NvAccordion {
                 // If the item is closing, remove it from internalOpenIndexes
                 this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
             }
-            // Emit nvChange event
-            this.nvChange.emit({ openIndexes: this.internalOpenIndexes });
+            // Emit openChanged event
+            this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
             if (this.openIndexes !== undefined) {
                 this.openIndexes =
                     this.mode === 'accordion'
@@ -2853,35 +2850,17 @@ class NvAccordion {
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
-    dataChanged() {
-        this.parseData();
-    }
-    parseData() {
-        if (typeof this.data === 'string') {
-            try {
-                this.parsedData = JSON.parse(this.data);
-            }
-            catch (e) {
-                console.error('nv-accordion: Failed to parse data prop.', e);
-                this.parsedData = [];
-            }
-        }
-        else {
-            this.parsedData = this.data || [];
-        }
-        if (this.parsedData) {
-            this.itemToggleHandlers = this.parsedData.map((_, i) => () => this.toggleItem(i));
-        }
-    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
     componentWillLoad() {
-        this.parseData();
         if (this.openIndexes !== undefined) {
             this.internalOpenIndexes = [...this.openIndexes];
         }
     }
     componentDidLoad() {
         // If using direct child elements, initialize their state
-        if (!this.parsedData || this.parsedData.length === 0) {
+        if (!this.data || this.data.length === 0) {
             this.updateChildrenState();
         }
     }
@@ -2890,38 +2869,31 @@ class NvAccordion {
             this.internalOpenIndexes = [...this.openIndexes];
         }
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5dcc9ea52a404dff7c4bb176b8a9781019e64bd3', role: "list", class: "nv-accordion" }, this.parsedData && this.parsedData.length > 0 ? (this.parsedData.map((item, i) => {
+        return (hAsync(Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
             var _a;
-            return (hAsync("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemtitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i), onItemToggle: this.itemToggleHandlers[i] }, item.subtitle ? (hAsync("div", { slot: "header" }, hAsync("div", { class: "nv-accordion-item__header-content" }, hAsync("span", { class: "nv-accordion-item__title" }, item.title), hAsync("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, hAsync("div", { slot: "content" }, item.content), item.footer && hAsync("div", { slot: "footer" }, item.footer)));
+            return (hAsync("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i) }, item.subtitle ? (hAsync("div", { slot: "header" }, hAsync("div", { class: "nv-accordion-item__header-content" }, hAsync("span", { class: "nv-accordion-item__title" }, item.title), hAsync("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, hAsync("div", { slot: "content" }, item.content), item.footer && hAsync("div", { slot: "footer" }, item.footer)));
         })) : (hAsync("slot", null))));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "data": ["dataChanged"]
-    }; }
     static get style() { return NvAccordionStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
         "$tagName$": "nv-accordion",
         "$members$": {
-            "data": [513],
+            "data": [16],
             "mode": [513],
             "openIndexes": [1040],
             "internalOpenIndexes": [32],
-            "parsedData": [32],
             "open": [64],
             "close": [64]
         },
         "$listeners$": [[0, "itemToggle", "onItemToggle"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["data", "data"], ["mode", "mode"]]
+        "$attrsToReflect$": [["mode", "mode"]]
     }; }
 }
 
@@ -4982,7 +4954,7 @@ var NvAccordionItemStyle0 = nvAccordionItemCss;
 /**
  * Accordion item element for nv-accordion.
  *
- * @slot header - Custom header (replaces itemtitle/subtitle)
+ * @slot header - Custom header (replaces itemTitle/subtitle)
  * @slot content - Main content (expandable area)
  */
 class NvAccordionItem {
@@ -5138,12 +5110,12 @@ class NvAccordionItem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'fd0200c1d78b3e3ae7361783dbba14d55732e7cf', class: {
+        return (hAsync(Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', class: {
                 'nv-accordion-item': true,
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 'is-animating': this.isAnimating,
-            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '471cc5dc8ec8a3fff592b5b443a82270aea9a477', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: 'dacf57578644d0ff3d6c5cf55c382c9c04a6fdf4', name: "header" }, hAsync("div", { key: 'd0e23a45fd43046f4dcebcc9cece8c2650cdaf9e', class: "nv-accordion-item__header-content" }, this.itemtitle && (hAsync("span", { key: '061068f7afa0d25d3273868d70d9f55c336d93d7', class: "nv-accordion-item__title" }, this.itemtitle)), this.subtitle && (hAsync("span", { key: '1ba3c4754c95d6fbe97fb4111dba06543879e400', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: '834c4aa3111a8619f4c974e87899d0dfa6d14280', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), hAsync("div", { key: '79ba605179905a7a58a642a2c5d1f0bdf90d67ae', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, hAsync("div", { key: '6ca4b0d9acd5262a4a041ad9d59bbace5cc7850d', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: '85c288666cf3b13abcd1ee1dbaced7ceb9ff9e6e', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, hAsync("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (hAsync("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (hAsync("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: '8d90711a96f5ce2e7d6f5ebcf3922cd0fedd69bd', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), hAsync("div", { key: '171b5165f3663fa5f0fa28ef84145dfc998e9f10', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, hAsync("div", { key: 'dcf753f23cec073a036d8137f1299dcf4ca4af78', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: '3dc85def21aace19f3d211262b6cf66ccb9438fa', name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5154,7 +5126,7 @@ class NvAccordionItem {
         "$flags$": 4,
         "$tagName$": "nv-accordion-item",
         "$members$": {
-            "itemtitle": [513],
+            "itemTitle": [513, "item-title"],
             "subtitle": [513],
             "open": [1540],
             "disabled": [516],
@@ -5167,7 +5139,7 @@ class NvAccordionItem {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["itemtitle", "itemtitle"], ["subtitle", "subtitle"], ["open", "open"], ["disabled", "disabled"], ["maxContentHeight", "max-content-height"], ["mode", "mode"]]
+        "$attrsToReflect$": [["itemTitle", "item-title"], ["subtitle", "subtitle"], ["open", "open"], ["disabled", "disabled"], ["maxContentHeight", "max-content-height"], ["mode", "mode"]]
     }; }
 }
 
@@ -6514,6 +6486,9 @@ const CalendarGrid = props => {
     return (hAsync("div", { class: "days-container" },
         hAsync("div", { class: "days-header" }, dayNames.map((day, index) => (hAsync("div", { class: "day-header", key: `day-header-${index}` }, day)))),
         hAsync("div", { class: "days-grid" }, days.map(day => {
+            if (day.isBlank) {
+                return hAsync("div", { class: "day day-blank" });
+            }
             const date = day.date;
             if (!date || !day.dayOfMonth) {
                 return hAsync("div", { class: "day-cell is-disabled is-empty" });
@@ -6528,7 +6503,7 @@ const CalendarGrid = props => {
         }))));
 };
 
-const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
+const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.day-blank{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 var NvCalendarStyle0 = nvCalendarCss;
 
 /**
@@ -6590,6 +6565,8 @@ class NvCalendar {
         this.showActions = false;
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
+        /** Flag to indicate a user click for selection */
+        this.isUserClick = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -6625,7 +6602,7 @@ class NvCalendar {
                     }
                     // Navigate to the date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = parsedDate;
                     }
                 }
@@ -6653,7 +6630,7 @@ class NvCalendar {
                     }
                     // Navigate to start date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = startDate;
                     }
                 }
@@ -6674,20 +6651,14 @@ class NvCalendar {
          */
         this.changeMonth = (offset) => {
             const newDate = new Date(this.currentDate);
-            // Ensure we only move by one month at a time
+            newDate.setUTCDate(1); // Set to the first of the month to avoid day-of-month issues
             newDate.setUTCMonth(newDate.getUTCMonth() + offset);
-            // Add the appropriate animation class
             const containers = this.el.querySelectorAll('.calendar-grid');
             containers.forEach(container => {
-                // Remove existing animation classes
                 container.classList.remove('slide-left', 'slide-right');
-                // Add the new animation class
                 const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
                 container.classList.add(animationClass);
-                // Remove the class after the animation
-                setTimeout(() => {
-                    container.classList.remove(animationClass);
-                }, 300); // 300ms corresponds to $slide-duration in the SCSS
+                setTimeout(() => container.classList.remove(animationClass), 300);
             });
             this.currentDate = newDate;
         };
@@ -6699,12 +6670,16 @@ class NvCalendar {
             if (this.isDateDisabled(date)) {
                 return;
             }
+            this.isUserClick = true;
             if (this.selectionType === 'single') {
                 this.handleSingleSelection(date);
             }
             else {
                 this.handleRangeSelection(date);
             }
+            requestAnimationFrame(() => {
+                this.isUserClick = false;
+            });
         };
         /**
          * Handles single date selection
@@ -6847,12 +6822,15 @@ class NvCalendar {
         /**
          * Generates the days of the current month
          * @param {number} offset - Month offset (0 by default)
-         * @param {number} totalCalendars - Number of calendars to display (1 by default)
          * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
          */
         this.getDaysInMonth = (offset = 0) => {
-            const year = this.currentDate.getUTCFullYear();
-            const month = this.currentDate.getUTCMonth() + offset;
+            const baseMonth = this.currentDate.getUTCMonth();
+            // Correctly calculate the year and month for the given offset
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(baseMonth + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
             const firstDay = new Date(Date.UTC(year, month, 1));
             const lastDay = new Date(Date.UTC(year, month + 1, 0));
             const days = [];
@@ -6861,32 +6839,18 @@ class NvCalendar {
             const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
             // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
             const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
-            const showPrevMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === 0);
-            // Add the days of the previous month
-            if (offsetDays > 0) {
-                if (showPrevMonthDays) {
-                    const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
-                    for (let i = offsetDays; i > 0; i--) {
-                        const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
-                        days.push({
-                            dayOfMonth: date.getUTCDate(),
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < offsetDays; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
-                }
+            // Add padding days from the previous month
+            for (let i = 0; i < offsetDays; i++) {
+                const prevMonthDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                const date = new Date(Date.UTC(year, month - 1, prevMonthDay - offsetDays + 1 + i));
+                days.push({
+                    dayOfMonth: date.getUTCDate(),
+                    date,
+                    isCurrentMonth: false,
+                    isDisabled: this.isDateDisabled(date),
+                    // Days from previous month are blank if not the first calendar
+                    isBlank: offset > 0,
+                });
             }
             // Add the days of the current month
             for (let i = 1; i <= lastDay.getUTCDate(); i++) {
@@ -6896,33 +6860,22 @@ class NvCalendar {
                     date,
                     isCurrentMonth: true,
                     isDisabled: this.isDateDisabled(date),
+                    isBlank: false,
                 });
             }
-            const showNextMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === this.numberOfCalendars - 1);
-            // Add the days of the next month to fill the grid
+            // Add padding days to fill the last week
             const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
             if (nextMonthDaysNeeded < 7) {
-                if (showNextMonthDays) {
-                    for (let i = 1; i <= nextMonthDaysNeeded; i++) {
-                        const date = new Date(Date.UTC(year, month + 1, i));
-                        days.push({
-                            dayOfMonth: i,
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < nextMonthDaysNeeded; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
+                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
+                    const date = new Date(Date.UTC(year, month + 1, i));
+                    days.push({
+                        dayOfMonth: i,
+                        date,
+                        isCurrentMonth: false,
+                        isDisabled: this.isDateDisabled(date),
+                        // Days from next month are blank if not the last calendar
+                        isBlank: offset < this.numberOfCalendars - 1,
+                    });
                 }
             }
             return days;
@@ -6959,12 +6912,25 @@ class NvCalendar {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const currentMonth = this.currentDate.getUTCMonth();
-            // Calculate the difference considering the calendar offset
-            const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
             const newDate = new Date(this.currentDate);
-            newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
-            this.currentDate = newDate;
+            // Date for the calendar being changed
+            const targetCalendarDate = new Date(newDate.toUTCString());
+            targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
+            const currentMonth = targetCalendarDate.getUTCMonth();
+            let monthDiff = selectedMonth - currentMonth;
+            // Smartly adjust for year change
+            if (monthDiff > 6) {
+                // e.g. from Jan to Dec, go back 1 month
+                monthDiff -= 12;
+            }
+            if (monthDiff < -6) {
+                // e.g. from Dec to Jan, go forward 1 month
+                monthDiff += 12;
+            }
+            // Apply the diff to the original `currentDate`
+            const finalDate = new Date(this.currentDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            this.currentDate = finalDate;
         };
         /**
          * Handles year change in the numeric entry
@@ -6976,9 +6942,10 @@ class NvCalendar {
             const year = parseInt(input.value, 10);
             if (!isNaN(year) && year >= 1900 && year <= 2100) {
                 const newDate = new Date(this.currentDate);
-                newDate.setUTCFullYear(year);
                 newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
-                this.currentDate = newDate;
+                newDate.setUTCFullYear(year);
+                newDate.setUTCMonth(newDate.getUTCMonth() - calendarOffset);
+                this.currentDate = new Date(newDate);
             }
         };
         /**
@@ -7207,7 +7174,12 @@ class NvCalendar {
             for (let i = 0; i < days.length; i += 7) {
                 weeks.push(days.slice(i, i + 7));
             }
-            return (hAsync("div", { class: "calendar-wrapper" }, hAsync("div", { class: "calendar-container", key: `calendar-${index}` }, this.renderHeader(offset, index), hAsync("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), hAsync(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (hAsync("div", { class: "calendar-separator" }))));
+            // Add year and month to the key to force re-render on date change
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(targetDate.getUTCMonth() + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
+            return (hAsync("div", { class: "calendar-wrapper" }, hAsync("div", { class: "calendar-container", key: `calendar-${index}-${year}-${month}` }, this.renderHeader(offset, index), hAsync("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), hAsync(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (hAsync("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -7257,7 +7229,7 @@ class NvCalendar {
                 this.endDate = endDate;
                 // Do not navigate to the start date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = startDate;
                 }
             }
@@ -7285,7 +7257,7 @@ class NvCalendar {
                 this.selectedDate = parsedDate;
                 // Do not navigate to the selected date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = parsedDate;
                 }
             }
@@ -7399,6 +7371,27 @@ class NvCalendar {
             throw error; // Re-throw to let the caller handle it
         }
     }
+    /**
+     * Clears the current selection and resets the calendar to its initial state.
+     * This method can be called programmatically to reset the calendar.
+     */
+    async clear() {
+        if (this.selectionType === 'single') {
+            this.selectedDate = null;
+            this.singleValue = '';
+            this.value = '';
+            this.singleDateChange.emit('');
+            this.valueChanged.emit('');
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.rangeValue = { start: '', end: '' };
+            this.value = '';
+            this.rangeDateChange.emit({ start: '', end: '' });
+            this.valueChanged.emit('');
+        }
+    }
     /**
      * Renders the datepicker
      * @returns {JSX.Element} Datepicker
@@ -7406,8 +7399,8 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '089a80ab34e2bc3f31432437787578f6367fde7c' }, hAsync("div", { key: '9537a1a20798d8ff3cf53972154a4d7fb0156daf', class: "datepicker-root" }, hAsync("div", { key: '17a4630c184001b5fbea941540ee01b0bbf8b58d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '8d56891ebb52b251a013d6a640d472900b9b62e8', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (hAsync("div", { key: 'a7f53681fb23a9b80b8141de19c4decaec5e887b', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '943aca0d1a5b2db40f59dfd8973d26b52b9ed312' })));
+        return (hAsync(Host, { key: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, hAsync("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, hAsync("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '3481fe780a3e1d8f0c1e22ffc82c3b7830721055', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (hAsync("div", { key: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7441,7 +7434,8 @@ class NvCalendar {
             "selectedDate": [32],
             "startDate": [32],
             "endDate": [32],
-            "months": [32]
+            "months": [32],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -13140,6 +13134,8 @@ const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:v
 var NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
 
 /**
+ * @slot default - Next to the label and description.
+ * @slot main - Replaces the label and description.
  * @slot label - Content to be placed as the label, will override the label prop.
  * @slot description - Content to be placed as the description, will override the description prop.
  * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
@@ -13256,13 +13252,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cfb710b2af0ea4442d1c2011d8414c6987a98117', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: 'a463fa87357a91d71941a265d3daf735abf3a36f', class: "input-container" }, hAsync("input", { key: '0dd7db02107246b427a1e78d8c36068debff85bd', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (hAsync(Host, { key: '46e0688340e1cda23f1fdbefb349fbaa8bb188f2', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '5769e3e61f69b7a9821864aab6338b13b46db4cc', class: "input-container" }, hAsync("input", { key: '0acc841c8583ca1d0781135b95a038703b3be516', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), hAsync("span", { key: 'a7ee7c812df54bbf91ac6c92e786d4895faa29d4', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'fe06ae9b2416f08c1889c86d47d0207af6ded057', name: "checked-icon" }, hAsync("svg", { key: '96a1c7a8113f160e4c9fc4ec23ad28f1359151b4', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '37c61f5f7cda8c91f1f5d44781b8326c216eca2a', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '276fcac2c23f7f278aa1576fa1f79393263812a6', name: "indeterminate-icon" }, hAsync("svg", { key: 'fcc8e138e98413b0e30e7744f7eeb1e72ca69876', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'd6b6146dc3d3ff52939d644439f8eb92ba9aad64', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'a13aa3a0a671e6442e0c46c267596deb494d4da9', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2c2aa68889b6cdd278a99872364336c54f71e96a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'edd654aa92145a0f24fb56b447c8f6d7839fb329', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1c4fe0f3c27aa59ed6059c91abb7ad060f21baf5', class: "description" }, hAsync("slot", { key: '109955006fefe62ec784bd5d6f3642efc732eb51', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b86fae37461b9afca6168b8d049293efb395828f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '6225f886e6aee38026a4aaf93644a76e70b7ee01', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: 'a2bdc7fa16b4cb5e266c1666746f88b462ef6bbc', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'aa00b58bb2fb2132b4b355568bbecafbf14d9536', name: "checked-icon" }, hAsync("svg", { key: '3d7e92b03fc0ebc0676a5f5a011e0a5f16bb06d9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '28170c912acd9442af03c889afc10d348657a84b', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '790eca10b1eea865ecde7be45c00ae3bbf65132b', name: "indeterminate-icon" }, hAsync("svg", { key: 'a00b2e00c2e2038dd1d67c43aef4f30e5d7a27e7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '6e7eb5f117a0244594392a52f932a91056093168', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("slot", { key: '4c11bb2b8078adc0d7d5f3c52c2525bc836ad075' }), hAsync("div", { key: '323cab79ca6e047df5482d75490ba7288eef5e27', class: "text-container" }, hAsync("slot", { key: '5bc6845d98ee06117b97588e71467ce106e1ab60', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ce639cb27b8ea446f2a0d73a36c3c9541bde9ab8', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'cd4b650b2f1b064b65211e90fdddff15b0d6f1f4', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7de730e025d5eeae626bbe64125479dc9ebb4332', class: "description" }, hAsync("slot", { key: '2c2f6343838ffff29e1e920ae927d89e9a63f02e', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b49fd559c3bf84e814da0093f9af64e62510725d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'b15a968201d8ef5ea5e764beac553cf8ca0b87d3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -17346,6 +17342,27 @@ class NvFielddate {
         };
         return formatMap[format] || 'dd/mm/yyyy';
     }
+    /**
+     * Clears the current selection and resets the field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.singleValue = '';
+        this.value = '';
+        // Reset the input element value
+        if (this.inputElement) {
+            this.inputElement.value = '';
+            // Remove the input mask and reinitialize if needed
+            if (this.inputElement.inputmask) {
+                this.inputElement.inputmask.remove();
+            }
+        }
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        // Close the popover if open
+        this.open = false;
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -17411,12 +17428,12 @@ class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c9f29e6997cf07a03f43e3cc2d8263201829c9c4' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0c12a1773e75621cb7f2c6fbd944405cb444a9e6', htmlFor: this.inputId }, hAsync("slot", { key: '0fdd5a226a5db7ac15be968f42e375f89031235f', name: "label" }, this.label))), hAsync("nv-popover", { key: 'dd0dcf5576026e0b565db34d2a2eafd9e6188127', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'a4c7623e8d72ecc847567be060e8c3db04879062', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'e270dac5a26904db3d0966871bc10d7c68064e87', name: "before-input" }), hAsync("div", { key: '8d277b89e591249910c9eeae754837ce079de47f', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '964769b29c4d9119365bf59255180e84ae32b195', name: "leading-input" }), hAsync("input", { key: '41f0f565b4854e7907a5a8972d5ce265e587b7f0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: '32d5ffac3789d9b3598811605eccfb1207c4e850', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '4e88c90987c12199512d77c24205bc2f67c3b8d1', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'e169bdd9742569cdcdc087d29ee13f9c097907a9', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (hAsync(Host, { key: '45af13d8290479c8ec171c0702d9d695c5047610' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd30403c879f8ca0449d8d25d22bb401ece876758', htmlFor: this.inputId }, hAsync("slot", { key: 'aec155a914cff6b7ea8170dbd1f0d9ee4f35172e', name: "label" }, this.label))), hAsync("nv-popover", { key: '522969535f2b8340f1a9b425c4ea6291fc65cb7e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'eb1d5ab314fe654b3642afb22d9e3fbc340de969', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '6c28354e914075c36db9bee659d140669a745cab', name: "before-input" }), hAsync("div", { key: '68d3aa4a8afcec4042a8930678cea7046f3e31d7', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'ed7ada6913a6735af622369236b5f521f2e96aad', name: "leading-input" }), hAsync("input", { key: '49607b25253233665544e8e85db3814734280fe0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: '35d06926d78f7c653fbf0424b59802fb4489004a', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '17ca631dca201fb412c921619223c1abc8777d2b', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'e08d735115cde3d22a657b986f4a7a5a0347d1af', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '897e5ba6a908c96fdc55bdd522be3f04e9dd14f8', name: "after-input" })), hAsync("div", { key: '6fcb101108ea4536654c2e6204416f899c9f0a04', slot: "content" }, hAsync("nv-calendar", { key: 'd4d7c823ad832ed1c8430b041eacaa1db5633a9f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f76d5dde2222f39883b59a86fe4237818040e03c', class: "description" }, hAsync("slot", { key: 'de07e1ee885a5804b352dba6a37898bba500b731', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b7dbb4406ee38548f8751f9425a800577f3a3cb2', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'a0170ef43d415238e57f29f985329e40f8ed0c2a' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '75cf593c7b9f2078f055522d6e43440dbe0cc522', name: "after-input" })), hAsync("div", { key: '0df8cd2360a17f5cc786e6b29c67ded308c18104', slot: "content" }, hAsync("nv-calendar", { key: '045a02370ef9dfe31ae3d0b2f702fafb25c7da8f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ecedbfe16857d9976349f3f3875be13f9ffc4b53', class: "description" }, hAsync("slot", { key: 'e848d9e03e169c9ac57ce2fb7cdb00466f658c61', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '028b4d496ba3ee5eefa0107da8a62c771709a3ed', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'd3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17454,7 +17471,8 @@ class NvFielddate {
             "fluid": [516],
             "singleValue": [32],
             "currentPlaceholder": [32],
-            "open": [32]
+            "open": [32],
+            "clear": [64]
         },
         "$listeners$": [[0, "singleDateChange", "handleSingleDateChange"], [0, "closePopover", "handleClosePopover"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
@@ -17723,6 +17741,34 @@ class NvFielddaterange {
      */
     updateCalendarValue() {
     }
+    /**
+     * Clears the current selection and resets the date range field to its initial state.
+     * This method can be called programmatically to reset the field.
+     */
+    async clear() {
+        // Reset internal state
+        this.startValue = '';
+        this.endValue = '';
+        this.value = '';
+        // Reset both input elements
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            input.value = '';
+            // Remove input mask if exists
+            if (input.inputmask) {
+                input.inputmask.remove();
+            }
+        });
+        // Emit events to notify about the change
+        this.valueChanged.emit('');
+        this.dateRangeChange.emit({ start: '', end: '' });
+        // Close the popover if open
+        this.open = false;
+        // Clear the calendar if it exists
+        if (this.calendarElement) {
+            this.calendarElement.clear();
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -17911,10 +17957,10 @@ class NvFielddaterange {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b2033314494faca72c310df329eab3918fe6935e' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '22e0af3e24bada8d859bcf42de0dfcedff9f5988', htmlFor: this.startInputId }, hAsync("slot", { key: '8eb3e4e1a4c67c0d9cd014aa2c73b6fc2ecb1a8f', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f9c722e792ba69738df080975f78ea3dfeb40f07', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '805c98d4a9e1defc74c0b751691e413dfbcfa736', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'd84ddf0a0732a68392c79baab9cde23be6b1b27e', name: "before-input" }), hAsync("div", { key: '4f3cfab2e9a83dacc0f950bc319192b568f90258', class: "input-container" }, hAsync("slot", { key: '2d8dd5e11369dc9bd1894e299f96b41806295568', name: "leading-input" }), hAsync("div", { key: 'b60b40b275099441071b130bed7d097e8c1dcbcb', class: "range-inputs" }, hAsync("input", { key: 'b7c647676fa5e48d51e7b7f1cf83e4a0275805ec', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("div", { key: '3e63ececeeff713f51db0a47e3d3b4f305e6fc66', class: "range-separator" }), hAsync("input", { key: '1c54a2e3f43ad077bfe9e9b17886300d06840bfd', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (hAsync("nv-icon", { key: '971b363f7fafbaeba65a161c1d7792d2bcacacf6', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '0f498b287b4c9ad9f83a0d380c522441b8afdf6e', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '257549f7c201391c083f28f1b89ffa3a439f268c', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '7be106f2f1500839e899d6f9c6f3705398cadd1a', name: "after-input" })), hAsync("div", { key: 'd2c56635c83628f37f0c1ec127bfeaca5fb78b90', slot: "content" }, hAsync("nv-calendar", { key: '4ec9eea45e030463c2df0115a0cfd6453da66f01', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a624ba699b3b7a7bb4d26725fe451ecd5df1f5a2', class: "description" }, hAsync("slot", { key: 'f2c3666075730a248e57c748b32df33a59f3777e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e2c1f8816b896d00e2c4ba8b32bc28380630ecad', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'cee75865d222324b8d7f3144ba2facaefcaf1d35' })));
+        return (hAsync(Host, { key: 'e2d5ce2c864dbc8ba478a1ce1353aa8e51e13ec1' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6e171200b763f8e7a907d305475bb7d4faa27979', htmlFor: this.startInputId }, hAsync("slot", { key: '9f8b94e7491d4cd73e17f41ba290acda1fe73f3b', name: "label" }, this.label))), hAsync("nv-popover", { key: '9bf5539eeceadb960c3438ddc05fe986f800d33b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '58f7625d27c2266429ddc4f653d61efefed5bc66', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '206064a5c1be74082202849b96e46a8207377098', name: "before-input" }), hAsync("div", { key: 'bd66fb676a5a749e17ede3f75c8a4404586c0c63', class: "input-container" }, hAsync("slot", { key: '7c78a037f5189143ea32ca843e1c27b52d8f2d4b', name: "leading-input" }), hAsync("div", { key: 'fbe89bc4502eca56e05029d65a45684484921433', class: "range-inputs" }, hAsync("input", { key: '397e572e87dd7f01977008b44847469cabd06494', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("div", { key: '378d2755919eafc9f4edd8ee451c01e49dc70cfe', class: "range-separator" }), hAsync("input", { key: '2de8dcda3161667a543c04ae529a0f617f6598c6', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (hAsync("nv-icon", { key: '5880e135764a7f9f87d92a4f7a84eba9f56b7d46', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5d764360d3dbfc306962cb9e4b67d7d3c4bc09ed', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '1b09d57633f8e115cc3d92a82d35399c53be265b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '7ec41f782b0343eeb427bee4d7f2ab1b549978b3', name: "after-input" })), hAsync("div", { key: 'ea714333fe596af8a10c6f8a1e6c72935f8e5c91', slot: "content" }, hAsync("nv-calendar", { key: 'ffaa70c5bc76c422396b233d3dc46fdeb2d06b10', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7f4aa271c896234907d95cfe7660e1c41ab8ddf7', class: "description" }, hAsync("slot", { key: 'fce93594f7af4d054f886ce3caf48cfffb6809aa', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f5a19b5d4c90c4319dc4eb09d1067f202ab229c9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '1d494e4c192b38c26e8cfe5482516382cacc13c6' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17956,7 +18002,8 @@ class NvFielddaterange {
             "fluid": [516],
             "startValue": [32],
             "endValue": [32],
-            "open": [32]
+            "open": [32],
+            "clear": [64]
         },
         "$listeners$": [[0, "rangeDateChange", "handleRangeDateChange"], [0, "valueChanged", "handleCalendarValueChanged"], [0, "closePopover", "handleClosePopover"], [0, "applyDateRange", "handleApplyDateRange"], [0, "singleDateChange", "handleDateReset"], [0, "rangeDateChange", "handleDateReset"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
@@ -18325,9 +18372,9 @@ class NvFielddropdown {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: 'a4de1529678c493e92022229993443c93533f0a4', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6bf4ff6df1b4c62304ac623bea21554779b1bcfa', htmlFor: this.inputId }, hAsync("slot", { key: '10bd19c28259c033ad2b8c9601655da9723bdbd0', name: "label" }, this.label))), hAsync("nv-popover", { key: 'fc85eb3c9d72a90f47c6fcfbbf6f6cc234fa8df1', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '6a7f4be2cdfd6399ce79f4cd7b0dc9abfd3a1c74', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '97e82c45801d338456d81601fb147e235dd604d4', name: "before-input" }), hAsync("div", { key: 'd6f3d6ca42acc7c14689fedac22328c53d2a61af', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd48c3800aa174716eb4bf4a81e545fabeb73d187', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: 'f01cf253ba3f31ff0269ecdf36d7d1e3249039a8', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '10b828451cf4a177a3580d2d01080036a25e9692', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '94edaa4e3ce5f80021db58bc5fa087424d4bf7d3', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '25e76d6ecfcff7514d2dfb970387f2af23506b40', name: "after-input" })), hAsync("div", { key: '58c6e1de57d31f1827e9bf24da62f5801f8c99b9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync("ul", null, this.options.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5a35ceee27f3a2ab41742f396f450b8783832742', class: "description" }, hAsync("slot", { key: 'ff012c2168c6ab6808de46a1f26f2f186fbe452f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '9c668e1c484c4caf45fa9e38dbca4dae0e93fea3', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ec9c91da75b1ec899ef68a569e6dd0a271b0307b', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '39025d9624475fa633e36c3ba44feed7f34f42e1', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '961a78a526a81e7fb0a219f1e46d6126880993db', htmlFor: this.inputId }, hAsync("slot", { key: '9d6b7d6fa1cc80393f0e85819a437e8193bdf672', name: "label" }, this.label))), hAsync("nv-popover", { key: '564fcf5fa2f263874b737fdf1bcc5a9aa9bc21d3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '415ed0ee145ce9253380baed4a026afa018c59b7', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'ddbece3ddfa0bcd16a8587c4ee693f8c44b69356', name: "before-input" }), hAsync("div", { key: '546fbc02d2051f47aea2a369ae479658c3c1d8dc', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '95bb574eeb43285f73fd731581d1426095f7538a', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '669c6b2e93a85789e747e3f384dfd7b940cda9a7', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '65f91d73115249ded5344e78f18ed7c37f8265b9', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '05644dcc1dfdbb0aa625b49484fab299b5b58894', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'd84d1936300877825adc9c61cc7d9ba773b92194', name: "after-input" })), hAsync("div", { key: 'de5e6bb6f3b40fed39cf90d046e8361dcb2a4d8f', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync("ul", null, this.options.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '648b7fb9b7dade22d763f9afc468a4b48115a1a0', class: "description" }, hAsync("slot", { key: 'b560fb630a56c3d42363c1b8f0fa494faefd00d6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bcb614617bb1183f33d20d51304d8ff17d9c7381', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5345cb01032f24b0527bf22d77116a77bb439969', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18429,7 +18476,7 @@ class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9006514e798c91bf3d447f6e74f80afc8831813c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '9344d00bbdaf5fd8e7676ccaf770621925a465b9' }), !this.composed && (hAsync("div", { key: '2f64fb5f87cf35dcc7ddf4b9d28c0811c7143c1d', class: "text-wrapper" }, hAsync("span", { key: 'c7a17a07092e2cfa9698e885f1ecfcf1fff1a38b', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '44e8e60b72270c11633fd439ba3c5b3c67e08270', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (hAsync(Host, { key: '486800fafd79ee133a459521e84b06c538f5585e', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: 'fd9c5c5aad8c585735ddbcaf0cb98ab26d89ec69' }), !this.composed && (hAsync("div", { key: '145a6e02b2338f47235c3616a1af63bf5b0ea465', class: "text-wrapper" }, hAsync("span", { key: 'bc013eaf7fe0d56c1d609c3fce846f25ef2cfbb3', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: 'f7f6a4b2b27753d54eb92a77364329a29a3d6f08', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -18451,6 +18498,12 @@ class NvFielddropdownitem {
 const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
 var NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
 
+/**
+ * @slot default - Next to the label and description.
+ * @slot main - Replaces the label and description.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ */
 class NvFielddropdownitemcheck {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18494,12 +18547,12 @@ class NvFielddropdownitemcheck {
         };
     }
     render() {
-        return (hAsync(Host, { key: '69cd9636b76fa1c5f49f9c67b6d0989d9967d0cf', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: 'b0e2035c3ff1a3a2d8f2922c9fe2e6edcfad00d4', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (hAsync(Host, { key: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged }, hAsync("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), hAsync("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), hAsync("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), hAsync("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 4,
         "$tagName$": "nv-fielddropdownitemcheck",
         "$members$": {
             "checked": [1540],
@@ -18663,6 +18716,14 @@ class NvFieldmultiselect {
                 this.resetFilter();
             }
         };
+        /**
+         * Clear the filter text
+         */
+        this.clearFilterText = () => {
+            this.filterText = '';
+            this.filterTextChanged.emit('');
+            this.resetFilter();
+        };
         /**
          * Handle input blur for options mode.
          */
@@ -18671,9 +18732,9 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed, but preserve the filter text
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -18789,9 +18850,9 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed, but preserve the filter text
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -18822,14 +18883,14 @@ class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("ul", { role: "content" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("ul", { role: "content" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+            return (hAsync(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), this.value.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, hAsync("span", null, this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -19638,9 +19699,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '908571e657b876e4bf13d2cd88c74ed56375a4a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd46ff199fa0211227293ebab6159ee98916e4845', htmlFor: this.inputId }, hAsync("slot", { key: '0e825e862bfadb313b723898d0732efb36f001c0', name: "label" }, this.label))), hAsync("div", { key: 'e001c956494a7b3c90cb713540b9300f6482cbb7', class: "input-wrapper" }, hAsync("slot", { key: '07f53c5fafcd308609b4ecfb721b9b0f791d5bf5', name: "before-input" }), hAsync("div", { key: '266fe99cc757c5646aa4bcbf262d7f6eb21fa507', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f80e50ffa553656b26c80be179fd5bda8fd7234e', name: "leading-input" }), hAsync("input", { key: '3fb53e266a44118a464f5fffef5019d900f25668', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), hAsync("slot", { key: '9769d9b13676f8022eb7771869876125e7d13ea2', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'feedeb1dfcf9a5b8c3e6f4e355af64db5e108125', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '6f3819ea3bad57b373e24e5b167887c2175534ce', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: 'ab83ad88264a5295f8239b308af7b61c04095b8c', class: "stepper" }, hAsync("nv-iconbutton", { key: '67bf2dc34cab126f8ebb8ad1368d326ce4e448c9', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '2ae711f4ff770049fb9b9afa4075b02a5d41d881', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'f59664d1200b6e1e300cac52ceaee03b1be68cea', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '10cefd1d1e86d33456b6800d5d1f3f5c7a10a16c', class: "description" }, hAsync("slot", { key: 'a8544e2917993f7fa45200e51e983277c6f0b393', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '95ffb42b6014514a51102b0bfa60887ff3394362', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '47d19a9cf2de2cdd2f23a5cf7a74943f9de8cb7e', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '0fcd74073e1c3f2c8de00c21e1ff782d4ed2fbe8' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c4dc1dc4efd2150fb897f0602b07ab22643756e6', htmlFor: this.inputId }, hAsync("slot", { key: 'a0aa360dd532e11fd0273c8ba8d5ded3adc45642', name: "label" }, this.label))), hAsync("div", { key: 'c2ffeb70a8e5ffe43ec5061e035add48fd0f09a2', class: "input-wrapper" }, hAsync("slot", { key: '62ef15b0961ae4af93940d3d2dd10fdb6a636d4d', name: "before-input" }), hAsync("div", { key: '07be430ad207b6023ee969b7ad290d4946f4b6fe', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '69978ac5971a25cc8c0515250d741ac8a658c3bd', name: "leading-input" }), hAsync("input", { key: '284f8da710438e470a26541b7cf72f89730ef3ab', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), hAsync("slot", { key: 'd028cd632cff77f592429e97a81a1d45aeec621d', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '7de629b71971559c647ba4ad4885815124bb63b3', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '135e609c2e568174db3503633f389c70a2fceaba', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '17a952157f55ff65911d852a4274de5db4241508', class: "stepper" }, hAsync("nv-iconbutton", { key: '33d0412ea6ed883d92b64363b404628d610e2339', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '68bf536a5fe5bb0b3c2c3bd5508324c050cb8764', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: '3922a559b4ca954bee9caea379c940e7b132f65f', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8844bf48e0251717549d4e0079370fe2f590c616', class: "description" }, hAsync("slot", { key: 'f35c77ffa2f01a66d72ef75a65c5c634b14bbdbc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ce407c77dd30a235c7691727480c911ad6128392', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7ffb85e03e5a9a949f022398537c74a812b8a12f', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19788,9 +19849,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a14a4df5990def8c1b76e191dc3480c2eee73446' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b3f8d2a9b98afbd9ba7e932a4fd2639855bce785', htmlFor: this.inputId }, hAsync("slot", { key: 'af896d231a0c0b5b5ce921e24f98b32702fe0058', name: "label" }, this.label))), hAsync("div", { key: '6047dabbbb95967bf4afb01144a5f2af98677caf', class: "input-wrapper" }, hAsync("slot", { key: 'eb36d6c886f7efc91508b97a4cb11c43d7e7809b', name: "before-input" }), hAsync("div", { key: 'f9de2896f8d7a29d700e9c7f586f5190c48b0304', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '3203cc62507460372c3babcede4071cf4a068122', name: "leading-input" }), hAsync("input", { key: 'bef15c1b3da5f949e4a55644dbea6499f398f71a', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: 'b23cac5c39ea1a428831583075d2e631eb13c231', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '9a6a4900981781239b40e7106974e0d520dbf76a', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: 'e3be0e70cad0f581b7fb0bee13046dcbf3d01791', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a0613b0fc5f68e82a3bff9a7943c33fd89fad6c8', class: "description" }, hAsync("slot", { key: '7f74f1207e31772ff485927d3c0334185bb14e77', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '1fba0209bef041b3582bc36dc3b603c6b3a24088', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '16c86655cc33bf47d1d4c388bcc4ac6272aa7714', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'b8d142f5a35087f977437af4d2094783e455d9a0' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f26d2c14ee03d1ef80fe263a1849c0da03a39a8c', htmlFor: this.inputId }, hAsync("slot", { key: '13dfa9e681e1b5a7244e7debc7d1c1af36bedd37', name: "label" }, this.label))), hAsync("div", { key: '5a01c9cc4573543e0d6633f9b8fadfa1ad6b066a', class: "input-wrapper" }, hAsync("slot", { key: '2ff066ad5da2d3fe0885ccc1a0c97f9817ff4bbe', name: "before-input" }), hAsync("div", { key: '429535a2b55ea4af5374067948f5be1d16898694', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '00d8fa3cd0e8af41f1b9c46cefc256a29187db9d', name: "leading-input" }), hAsync("input", { key: '7aa5db4e17d62e3a9c10e8b5e2dabe224033b2da', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: '0c919def4c580387d87a2f500a663f4dba5874cb', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '2b020de565c3311431c83c68a773731055c1c6c5', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: '938de4d9c513e3aef3de1e9a108e69558843b466', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6150e4be7c79bf10a1a2db3b14334c4fd9d2396c', class: "description" }, hAsync("slot", { key: 'de557936e4ed9e0798cbbb95f832fa6a831d63a9', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '74e43aa5f463f8156d44d261d5641c0aafccc5fc', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4956c95a870964a712524fb30d26e9fd500edef8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19918,9 +19979,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'abfa20ef5921ee52cbe6c3ea92b27bbd4e81a116', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'ffa244c2692f3f4b3781df6ed3916139763d3253', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '661ccebfcd608d3d5a819144c1048b7b612d93ad', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0764fffd0b6c961d3149130fd92fc3e5be4617d4', htmlFor: this.inputId }, hAsync("slot", { key: '5b5c107074f406864f889187a73c3b6c25b5ad36', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '68bb23249fc70db7346e4deb1924e24fd0e43133', class: "description" }, hAsync("slot", { key: 'fee77e49f6a48f592eba370f8e842cc3c51a9569', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0544f59d2446dd3d1137839643222ae1d32236a2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '655fbb4ca21e3001425dcfbb6d9188586e0548ca', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '5721fd4ffd6d8b1392e65d0b8eaea4dea241be63', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'c54d8952edb57e34016a85ba2b6b9c7fc2a20a37', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'e80c6c12fbf461776822185109e05aea5a6c954b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0f89b274c7ee7ea7d2e3116a004575176d044b5b', htmlFor: this.inputId }, hAsync("slot", { key: '04b04fbc8ad5a199def48e728c74f13e7230414d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e5c5048c50d0089393a29f12eb09f0ae26aedcfc', class: "description" }, hAsync("slot", { key: '6902044f273d508a79a66a3f185fc4a9ac48e94f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8d388b64deccd2f398485dfa0b83d70b8c50ae47', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'c5237272b97c754d2745eb62a85519f2c14dfb27', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20304,13 +20365,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'd7c179e0ad3bdc22afa4a4ad8b84cc0d7403e3f9' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '545ba543c78e93bb790fca363325d40052899b53', htmlFor: this.inputId }, hAsync("slot", { key: '5141dc2bda9b312682fe7adcf2ad8ae23a720696', name: "label" }, this.label))), hAsync("div", { key: '791b9ed3213a44b2222613e54e21ec5f7814625f', class: "select-wrapper" }, hAsync("slot", { key: '51590cb6c8152955ffef574caaa5858064652cf8', name: "before-input" }), hAsync("div", { key: '030cfcb568435a8518d2680bee21b6e66c0955eb', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '9eb92fb0b383a2b08ef8ba61baf8340f6ecb12a6', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'fe4debae13d4258fe5e6a6d273e7384ef7071f35', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: 'ff869c177289342a39ae292a530359af940a5669' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '10815f70059de9b1774ccc26b69d441d250e1833', htmlFor: this.inputId }, hAsync("slot", { key: 'afe78cd3671151060fd1e2a37b77c164767908fa', name: "label" }, this.label))), hAsync("div", { key: '064d8f512bc5f11831096d3a092afb00dcfeb1bc', class: "select-wrapper" }, hAsync("slot", { key: 'c12d375bc5a558d25f1eb34343e2ad5fce784558', name: "before-input" }), hAsync("div", { key: 'ffb39cfc0444edc49a4e2b6318990085009d7598', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'd5fccac0e92fe0553b8478a6f5dc9be4591e8c23', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '94dc05d08de8120c78fa140df5eb3adc09ce97da', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), hAsync("select", { key: '767c5c8f1a0f34aa645d49e7b09b0cfb230d5e3c', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), hAsync("select", { key: '85ffba58429aaa393cc9178e0866a61f85d92103', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '911644aa7ded450918f6424ebd8ce9dc4b6ed1d6', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'd5ae32439983916d17346fdce50d51e73d429c23', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '783f0d7f1d4a0bbcbd8cff9416e5c3f61408061a', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '252cd65b1e9437aa89161c6342f4f107ad330136', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '8e1088c34086ee58b240acb99c25fa113517e76c', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7c521ab944ec72bec68c32c33400eb3c3a7c32bc', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'dab0be52dc34f499575775f9131c51c4cd7fd290', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '00d9ce6b2a5fb946575e54cc3bf2fd83acc83290', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '0e1027874f6e2b275ca354e2d64c0289ca961a0c', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '694b0306ddaf671faea9dd863bb7f2917b567ffb', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '4f86b0916dcbfefb24af5e5e2c0ca009ece6193b', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'f99ba37d4a70b7c352b4abb0be0b5eb85b4cc947', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'b152a3b110b0f780b29adcf1efb4aadf98cf81be', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '63c6076165bae5d36732179c4a761d5b381076b5', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dd3e41b62290c580e050eb5a4742aabc7395cbda', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '87bedab511a8b3d07d6616e4937342b6d272c5f3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd4cf69f5f2446fbbf8ed36910d89c3aa7ac2c826', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '2fc8b58658bd406af834dcad378b3b00aca40b22', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21038,11 +21099,11 @@ class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5bb5a06e9742f87d098da76260ee269ef4ea06d5' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dd6e12d6c6379e07c4f9964984b3458a71ce6e6f', htmlFor: this.startInputId }, hAsync("slot", { key: '6229200586d90f4f21604d411f473e6df66527c4', name: "label" }, this.label))), hAsync("div", { key: '44f60b538c83d9074a5d06b5a39c1e62e5aa5c55', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '4ec60f07b203b6836649a709027fdace39468c41', class: "track-container" }, hAsync("div", { key: '4fcc799c962bf17e582fa5daf51a9c986d2d5901', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '95b75deb4c7d0142f575af39fafe7b913c315ed5', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (hAsync(Host, { key: '688357b41179bb99a662b8ea22f2beb7454b0d8c' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '7628e9ac0f304aa792f7c68f3e0b9b96d84583e0', htmlFor: this.startInputId }, hAsync("slot", { key: 'd876dc0602df8badadcfdf435d68356d382c8b25', name: "label" }, this.label))), hAsync("div", { key: '4aedd7863c3d06e4ad7dec800b14f858568bcb79', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '74d455d904614092ed51daf34f73425571b7ca24', class: "track-container" }, hAsync("div", { key: 'a53a1e0f1770006fece64a87ca03a511d0e4dd9d', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: 'aafdd02a87071f214d8710d6a0678ee01668609d', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '4b86941f66df96014d4710e6f1f79523a4f332f3', class: "description" }, this.success && (hAsync("nv-icon", { key: 'b53792e0fe60354cdfb2e34dbf54fd87df10050c', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '149788e0ce96516b812370b247ddd59de555bf90', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '10eb3eb2f7a903af08419df8476c11e27e9e575e', class: "description" }, this.success && (hAsync("nv-icon", { key: 'ee312f8f0563e6dc920e9cbf886784df8c57e719', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '4ee31b6914ebae20404acd582c27b38b5ad64700', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '11814ba28092b2ded30f6b15362b0eb9e67c20a0', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '86b555aa52f4295932d80947737116c3f6c0ce99', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '334739920eb67abc49b2bdb942d0a2f65a925460', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e37e44dea94b691cbac98d16fb74c5c5cb280c5e', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: 'c1b403a4848fdcf0e9f51f37ec7454224562ed5c', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '87db18643f9473ae30e936fc1a316de95f06c107', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21217,9 +21278,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'aa009c45d11efe9fef7ae0acfb701e25db7d3004' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '90aedd9dc50b1485b76e4bb6df2f5ea017eee9f4', htmlFor: this.inputId }, hAsync("slot", { key: '3d7c37806fd01f1bb4c1d1d67372ce257d1b382d', name: "label" }, this.label))), hAsync("div", { key: 'd399c53383708363c986c8f02f0f0a3b48bb4c39', class: "input-wrapper" }, hAsync("slot", { key: '19b8cb3165c3ff0523c257ad0fc53f0df7413685', name: "before-input" }), hAsync("div", { key: '3564795cf1775f2113c9a35d1865f84358be3144', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b9b0b3b44f8474ba4f0c46552bb9c3a83fa0d7d2', name: "leading-input" }), hAsync("input", { key: '39687f0583e734b03262aac593ab50ffad7957fd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: '0faf9e99190d1d7e4295a454d2b89a31c728a38f', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'fe4646f13b1fba38883f1e03ea6c1ba274c9aa47', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '1e51b8182acc3b049ad608ddefd8c1631efbef94', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '65bf5da97918592f3d8ebc63d134ddc4723188a1', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c3f771bc7f641612baead1d82f8bcf8d8586a152', class: "description" }, hAsync("slot", { key: '27df5104927ce680472aff0054e4ae5c3a9727c6', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8126a6159a24b68a9fa7f017aa289269f63035d4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd7cebdf0101cbed1d898c2bcc73581387ddb23b9', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '35382ab52aa48116fbedc7683aff4729f06f5969' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6f849db1b7603fc4de4fb23075fd7daa72438dd2', htmlFor: this.inputId }, hAsync("slot", { key: '24bc67fe3a8de24a8601a2cf3c5afd2532e17c4a', name: "label" }, this.label))), hAsync("div", { key: '8ffd2d0f048082c71a76054842fffd22452b9ad2', class: "input-wrapper" }, hAsync("slot", { key: '478020c16e29399dcc6566651f88acc8d88ef36d', name: "before-input" }), hAsync("div", { key: '1aa0bac3947bdff209268619202ccc38da691761', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '369b5f0a4c4d1d16217ad5de9221273ece41e1f0', name: "leading-input" }), hAsync("input", { key: '91446fe15f48f45693f56b3fd21926b8114c1dca', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: '505a9ed004c4492f8daaef9a92bcaf344e2a10fb', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'c1e9ecd4f901862391daa6c9f5c75d3c1b81810f', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '15a452bdbbb386a51e4fe51370bd09521cc6f47f', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '7e7e3969dd6f3d1b80eab00ac966f7ba9f13895c', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'b4ca95846a8fdf68e95d602968506bf009f9334f', class: "description" }, hAsync("slot", { key: 'fce329e819b837318b2d9bf9e16a8ef886aa940a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c3800ac457b5f0f87a3bdf9e9e37a36f5905786c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'f77d02598ba261bf2b48b16ecfa3fc15fe221599', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21439,9 +21500,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a0e5cd4a7cf3dbfc928a08518b9ea031ae995e0a' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bb327648d74c5340f7069afd5d3afd8cfbe816e8', htmlFor: this.inputId }, hAsync("slot", { key: '778cd6b79f71b4751e08b754f127da9460c104f0', name: "label" }, this.label))), hAsync("div", { key: '21e2126f2115b1de134e4d2acfa3a9b7eba713c0', class: "textarea-wrapper" }, hAsync("div", { key: '12b431b44cc6c8402a4af3fc5180ef95464571c4', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'dbb7bf5fc51aa93993eb485b8650837e892747ed', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd4758f3b173c84d5b7785c790832f794fae21504', class: "description" }, hAsync("slot", { key: 'def8fe57e0dd229fc31ba5372663b9053ef6a3d0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5f6f6bce639a3690cd51d208be62bacdf5779f10', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e0d185195a4c18d2a3627c554c4ce70a52db77d7', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '2b054e4460ac1532cb2006feaa3930abc8e21505' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5058a7c4a77a37336bcc58fd6b727f1f9564d7b2', htmlFor: this.inputId }, hAsync("slot", { key: '0c5abb11d0c2377b702ae1614134e28e53a6e1e2', name: "label" }, this.label))), hAsync("div", { key: 'e6d9981eaab913b3cf04fd99e0fbd07830fbebff', class: "textarea-wrapper" }, hAsync("div", { key: '23392da0e927d2eb5720fa98499afd2fcb33d840', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '9b9521f4e033002ea346e3054118a114349dd7ee', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '27411a39625e1f03bbe23ae52ceadb04ab0afd4e', class: "description" }, hAsync("slot", { key: '56a5e1a95376899525911e096ded708a4987711d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2336848d28c0d67c95607da5bcab3348c4c15e0a', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'a200628a9ed75402395e415eab743afddf0a5d27', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21497,7 +21558,7 @@ function startsWithIgnoreCase(str, prefix) {
     return str.toLowerCase().startsWith(prefix.toLowerCase());
 }
 
-const nvFieldtimeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;padding-right:2px;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+const nvFieldtimeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
 var NvFieldtimeStyle0 = nvFieldtimeCss;
 
 /**
@@ -22469,26 +22530,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: '9779298ba2b38f3987af0cfa03250f0e9a99b9f8', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e2a9108cbc9d28d14aad58dc2e857e54ae39f09f', htmlFor: this.inputId }, hAsync("slot", { key: '94e26cbf12ac61bc32de87a32a91eca65da6461c', name: "label" }, this.label))), hAsync("nv-popover", { key: '9d3b59e19a11a7cdebfc03eef6278f87f6f440e4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '2651f57c27384c367d29543f390ace075a08225f', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '2df5c90ff04b28ab426929729e94948aa6491b2a', name: "before-input" }), hAsync("div", { key: 'bb490ebb175df4e579f0add8113e28dd7c29e866', class: "input-container" }, hAsync("slot", { key: 'b09f37a743d0b3dc12a8de0d39641571e9d7090b', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: 'bd97f546da7231ad6ae40799a797da2368e89213', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (hAsync(Host, { key: 'a8d08a4dac97430398e3f769f353e91ef08de9c0', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e7d4a858f6194f085144fd59894ad54220a17a03', htmlFor: this.inputId }, hAsync("slot", { key: '69901d62cdd32e3d7d1efe14066ef5ab42eed0d5', name: "label" }, this.label))), hAsync("nv-popover", { key: '2541a920b4ce7b98515c58867ab1ab25d9cace9d', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '2f501df272714fd912b0d0981c27db89b46ae424', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '41ee670692e5facaa0ddd065a2a79a66825d207b', name: "before-input" }), hAsync("div", { key: '24e41277073946b78ae4d1f8f38173045e699845', class: "input-container" }, hAsync("slot", { key: '6db3ce5df588697b9183225be3b603a3b51a156f', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: 'ee093f322342ac3572ad76c48ebc2ecbed63ac01', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            hAsync("span", { key: 'd1e8a8938b214717f178d462976afd91f582eb50' }, ":"),
-            hAsync("input", { key: '720445f3892535abd7d81fdbf38f7941a66a01a5', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            hAsync("span", { key: '9cec44d707277c298ba7a70934e1593a12207799' }, ":"),
+            hAsync("input", { key: '2acaf3b143f0f5e9e04005213bdfe9ea5334bf53', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            hAsync("span", { key: 'e8b19bdd054f792a48df56a2ad884d9ec3f96dc0' }, ":"),
-            hAsync("input", { key: 'd2020d37b004a15912791d804daeeee2aadadb70', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            hAsync("span", { key: '07e0b374bdcad92339c4ddc10d71cc963a8a71ff' }, ":"),
+            hAsync("input", { key: '84838544717af0bc967258d91fbee2748072be4f', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], hAsync("nv-iconbutton", { key: '96e3cbee01387385f1ed16bd5e7a1b639fae592f', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '6ef9a8a535914394e7a8a9e82f55e9ac82655161', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'ab1313914251a15de716d60a4f60afe91c949d7a', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'cf346d219445fc595419e834302d03d30a5dcf97', name: "after-input" })), hAsync("div", { key: '8cfe562d283109f305db84b843c68ad1535fed6b', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '9690c5733e3fcd0ae22743e4c572d9a5ff2d1bff', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: 'ec8d0d5c7eb9aa720deef07f23c712287246f3a8', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: 'dbef458469153ef93ad94903a2bcf439f6243d40', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '3dfb5e5b32dc91ebe53502f9117f628ae79bf57c', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '744e72f9c7828f8487f58265dac564670ba26329', name: "after-input" })), hAsync("div", { key: '72dc9823125b9109bc27e049936007e796a97a06', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '1b1f8241a25500cf9ce22ebea20becd6882760cc', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6671a07feeac69f2d9374dd25b00c6d7a7258bbd', class: "description" }, hAsync("slot", { key: '2ebc81fa182462a44a62d075c187b94bfe16ad96', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f1815ed7f65eaf25fd69d56de613c01be842d147', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '028896c0e9bffa83f2429a77e1dfaace6f8a07d8', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '57985d7f2626853a24db80d56607b5453b00b6c9', class: "description" }, hAsync("slot", { key: 'ba3383c066c6bcac3b1e6183b84528723de9cddc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6f02373e082fcc7e34e0d35441783122cd7c0266', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '43508d63829f53f5b5c718f1a112abbe5919b900', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22593,7 +22654,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a3219e9be865e466fef36c8135ab14604e20fe40', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '29cfc530d71369210b1bbd896760e19f7811c557', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: 'f601f44101684971c1286b9f6214d5dcdaa7e66e', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: '8cb4ada2454c7e9676cd088397eb4416ccab2d82', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '4934c79fa096935be509ff6a641361dac44a4a9f', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: '54e429910d5f9916f98e4cdef0be5f2f620df51e', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -22737,7 +22798,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '789d2f8b19178efb5e2998386670cfcbe239efed', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '4f09a5b6fee239e01856aa7ed90e9af0f13a69dc', size: this.size }), !this.loading && hAsync("nv-icon", { key: '44649863d33226aafad217dfbaba4cd56865b86d', name: this.name, size: this.size }), hAsync("slot", { key: 'e5483a758287d3e3843774a0581cd1db6da172e3' })));
+        return (hAsync(Host, { key: 'a59a26804e97dfbacf40fae6678b3b3ba66440a9', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '7cbe3502ff1c6fd76f7a9ab68128f5d5a0bbf7fa', size: this.size }), !this.loading && hAsync("nv-icon", { key: '46cbb9c609991ea27316b8909551d303559652fc', name: this.name, size: this.size }), hAsync("slot", { key: 'd2ca8959b7be7600e56fe23437e5da07d58985c2' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22785,7 +22846,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: 'dad18e0ecc71ae0305fa1f287a336e8fa0da6889', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -22996,7 +23057,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: '287ae16bc4971d1d7811bd80384e93b8b7017945' }, hAsync("slot", { key: 'f09fa7b923d4f66e7fb8bebcfd943daf843eec38', name: "trigger" }), hAsync("nv-popover", { key: '757ff04ef461eb60c061bd28914f82fc59437e82', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
+        return (hAsync(Host, { key: '25e38953e8d6e4c591087f3964822eed76cd3775' }, hAsync("slot", { key: 'f6ad4e16d740129dc296a3e0b2c5dffdd063b182', name: "trigger" }), hAsync("nv-popover", { key: 'c355356a877bb0cedfd69bfaf4e724c06612c1e5', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -23067,7 +23128,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c008da503776b85bec237b25e321e4bba02d153f', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '66341d40e68409b4c0ab6595a67eed1e4354d6ba', name: this.icon }), hAsync("slot", { key: 'e3960af26ffbc703a5702981e948013179b1a83b' }), this.label && hAsync("span", { key: '9633388dcbad3080b54b83845ced54f9b9d05061', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'da358858336a86a7a49bbd4a52b5f628aadc1c29' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '36a85c271a5dbe2c41eefac33209e5d9a909ae04', name: "chevron-right" })));
+        return (hAsync(Host, { key: '327165c89f4e5decf8dc4b7b28e18562e528056d', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '4247d922bca3797dc3f2917218749a8d3c038df1', name: this.icon }), hAsync("slot", { key: '1f81464ccf47a5bd918873ef70d3d3385e870638' }), this.label && hAsync("span", { key: '113358a0cacfa53710ec0049a8e1c5e981de5b15', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'ee7c773b89bf1f55876cf297600247883cd54937' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '70cbe2df51d9fbffe3b474b54e87aa06801acef7', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -25452,7 +25513,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '843ac572358b402d6338945d671446fec1c51a6d' }, hAsync("slot", { key: '090f01aea3932cb95357985766a20112c63c4992', name: "trigger" }), hAsync("div", { key: '737822dd1539381bb485a389670f09a071441365', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '9d268df3f0e1df7b2a2264154143c3db14619661', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '432aae053b25d2e7d6594203ad0ff3ecee26c059', name: "content" }))));
+        return (hAsync(Host, { key: '27f6f8acc148b3dc2b16a391c54a4a1de0637a57' }, hAsync("slot", { key: 'd25614b3bfc5565d3729da11f6f83b4d92e83e19', name: "trigger" }), hAsync("div", { key: '3b777862573405b2bb2a377750d9bb859a4bb20b', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'dda88155630bca69ec06a766e2999ed369d5d6c6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '51eaf873fe239d3c4106e997f6cdd37b1bb29074', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25497,7 +25558,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '20e40e37c82b00712ed3d60d46d460f5f877e10a' }, hAsync("slot", { key: '80ba27becb4d56ff0785054597d88c728fb3eca5' })));
+        return (hAsync(Host, { key: 'daad5f10b72b95468ac50a3deab7faf87769be42' }, hAsync("slot", { key: '16509b69358739997fe97a45ea9476f30682de2b' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -25532,7 +25593,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '24cca0f7101de5f37d30884983da28a839df9bee', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '3521e5dd684d2c6185fd434711ae85a6ea0b68ab' })));
+        return (hAsync(Host, { key: '0a93c321e46c7e17ac0efe09556ee4447fec5f74', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'faf55f3f579311c333e1ea66f1a19ace98594377' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -25869,14 +25930,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: '0e7b7e03592f9f68b9158e8374986986e0f155d4' }, hAsync("div", { key: 'eeebf671dde65fcd725fbbe78099816d1c07c65f', class: "hidden" }, hAsync("slot", { key: '2ac114cec120874bb0f7bf6ddde9ec9c88d978cf' })), hAsync("slot", { key: 'b8dea8ff4c987b679ab78e73c4b7698a608c1ee3', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
+        return (hAsync(Host, { key: 'a389cee4e6b29cdb852b8b6c0f8fd39926474525' }, hAsync("div", { key: 'ea7629bc0cba0ec1cbe59f6f03ac2527095d9abb', class: "hidden" }, hAsync("slot", { key: 'b070a8e7f54fd3846744bb659447b97547d1c7cf' })), hAsync("slot", { key: 'b0eb0a2d7c98073e88282b1e2e513b9e6a335345', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (hAsync("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), hAsync("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (hAsync("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (hAsync("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), hAsync("slot", { key: '4dc0404a05946bc942f65af599fea186166cde9c', name: "after" })));
+        })))))))), hAsync("slot", { key: '599e4c1663c3a80375e3c511358be381b06eec2f', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25996,8 +26057,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9b3a2c50180d17241f514ebfecb2d959d6aaf263', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '70420566c51bb19c3ef9b8718ba0069bd739fd26', class: "input-container" }, hAsync("input", { key: '5c1cfd0858a14cf1854de5a09b2daa55c4e781ba', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'f4678a7ed5a7e58397aadfe5155b95a395f39fba', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '4d25373b9c782d3016da002d1fa22dd551a1597a', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'f297abef15befddc6b180edffe3ab7b0bb39d223', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '97f2b1045c5152fb66da582c7fcf2975cbe10e68', class: "description" }, hAsync("slot", { key: 'fae238400ac3a106079a7e361d179598a99363a4', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '7aac2ef8519d5c033a0e74461755e2286420032a', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'fb0f560aff50b9d3c2b75ba2b59dd68012f5af10', class: "input-container" }, hAsync("input", { key: '61ff98c20dec0822979f04ad3b3316fc3caac31f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: '543ad351428f6ae60e94bd31e3a7a6922c02e5d4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '42f764c9c4454cf5b8b1fa88c2c43654170a5222', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '125247eeea72b68de829f36ad817a4381541ad07', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a2fcd0d39a8f555e7d6b64879e84ff7f011e4901', class: "description" }, hAsync("slot", { key: '4e7af6b6a0a25fcb4d9529dcb1a32cb7c928c7de', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -26063,7 +26124,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'eb3e25818bb1e57340ac169d1c40a0e4e9c56668' }, hAsync("slot", { key: '7937859bff530ff10a0de9076a77c92afa9ec9e7' }), hAsync("nv-popover", { key: 'e825c93c7d90f5598416f1f081c95517c7a27883', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '5a5987e3a04f02be104e5f8fcca2f40b75938a97', slot: "content" }, this.message), hAsync("slot", { key: 'd7efc512e29969e7c8c1a693f2fb15f9319e1fa8', name: "content" }))));
+        return (hAsync(Host, { key: 'ced39f0ebd3ee8eba520e6d6241728e95031dafc' }, hAsync("slot", { key: '2b65cb626604a29e1924e7eb2bbb4e937c1a9e9c' }), hAsync("nv-popover", { key: 'd4c91e52da651c1545b6d7af98c740e08eeaffbf', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '45805ecf6ffee80f4f81acce2d921ad66585bf2b', slot: "content" }, this.message), hAsync("slot", { key: 'e6a7e80c35c3a87627a50b271c86783fab791338', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }