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

package/hydrate/index.js

@@ -128,7 +128,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'native';
-const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, constructableCSS: false, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, constructableCSS: false, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Hydrate Platform v4.27.1 | MIT Licensed | https://stenciljs.com
@@ -5882,9 +5882,18 @@ function isSameOrAfter(date, compareDate, options) {
  * @returns {number} Week number
  */
 function getWeekNumber(date) {
-    const startOfYear = new Date(date.getFullYear(), 0, 1);
-    const pastDaysOfYear = (date.getTime() - startOfYear.getTime()) / 86400000;
-    return Math.ceil((pastDaysOfYear + startOfYear.getDay() + 1) / 7);
+    // Create a copy of the date to avoid modifying the original
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    // Adjust to the same week Thursday (ISO 8601)
+    d.setUTCDate(d.getUTCDate() + 3 - ((d.getUTCDay() + 6) % 7));
+    // Calculate the first Thursday of the year
+    const week1 = new Date(Date.UTC(d.getUTCFullYear(), 0, 4));
+    // Calculate the week number
+    return (1 +
+        Math.round(((d.getTime() - week1.getTime()) / 86400000 -
+            3 +
+            ((week1.getUTCDay() + 6) % 7)) /
+            7));
 }
 /**
  * Convert a date string/Date to a Date without timezone offset
@@ -5949,15 +5958,200 @@ function parseDate(dateInput, dateFormat) {
         parsed = dayjs(dateInput, dateFormat, true);
     }
     if (!parsed.isValid()) {
-        console.error(`Parsing error:`, {
-            dateInput,
-            dateFormat: dateFormat,
-        });
+        // Check if the date input contains placeholder characters (incomplete input from Inputmask)
+        // This specifically targets partial dates being typed with placeholder characters
+        const hasPlaceholderChars = typeof dateInput === 'string' &&
+            (dateInput.includes('_') ||
+                dateInput.includes('-_') ||
+                dateInput.includes('/_') ||
+                dateInput.includes('._'));
+        // Check if it looks like a partial date being typed (starts with valid pattern)
+        const looksLikePartialDate = typeof dateInput === 'string' &&
+            dateInput.length < dateFormat.length &&
+            /^[\d\-/.]*$/.test(dateInput) && // Only contains digits and date separators
+            dateInput.length > 0;
+        const isIncompleteInput = hasPlaceholderChars || looksLikePartialDate;
+        // Only log error if it's not an incomplete input (to avoid spam during typing)
+        if (!isIncompleteInput) {
+            console.error(`Parsing error:`, {
+                dateInput,
+                dateFormat: dateFormat,
+            });
+        }
         return null;
     }
     return parsed.toDate();
 }
 
+/**
+ * Renders a single day cell in the calendar grid
+ * @param {DayCellProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing a day cell
+ */
+const DayCell = props => {
+    const { date, dayOfMonth, isCurrentMonth, isSelected, isInRange, isStart, isEnd, isToday, isDisabled, onClick, } = props;
+    // Build CSS classes for the day cell
+    const dayClasses = [
+        'day',
+        isSelected ? 'selected' : '',
+        isStart ? 'range-start' : '',
+        isEnd ? 'range-end' : '',
+        isInRange ? 'in-range' : '',
+        isDisabled ? 'disabled' : '',
+        !isCurrentMonth ? 'outside-month' : '',
+        isToday ? 'is-today' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClick = () => {
+        if (!isDisabled && onClick) {
+            onClick(date);
+        }
+    };
+    return (
+    // eslint-disable-next-line react/jsx-no-bind
+    hAsync("div", { class: dayClasses, onClick: handleClick, "aria-disabled": isDisabled }, dayOfMonth));
+};
+
+/**
+ * Renders the action buttons for the calendar (Cancel/OK)
+ * @param {CalendarActionsProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the action buttons
+ */
+const CalendarActions = props => {
+    const { onReset, onConfirm, useSlot = false } = props;
+    return (hAsync("div", { class: "datepicker-actions" }, useSlot ? (hAsync("slot", { name: "actions" },
+        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
+        hAsync("nv-button", { size: "xs", onClick: onConfirm }, "OK"))) : (hAsync("div", null,
+        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
+        hAsync("nv-button", { size: "xs", onClick: onConfirm }, "OK")))));
+};
+
+/**
+ * Renders the week numbers column for the calendar
+ * @param {WeekNumbersProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the week numbers
+ */
+const WeekNumbers = props => {
+    const { weeks, localizedWeekText, selectionType, onWeekSelect, calendarIndex, } = props;
+    /**
+     * Handles click on a week number for range selection
+     * @param {Array<WeekData>} week - Week data
+     */
+    const handleWeekClick = (week) => {
+        if (selectionType === 'range') {
+            const dates = week.map(d => d.date);
+            onWeekSelect(dates, calendarIndex);
+        }
+    };
+    /**
+     * Creates a click handler for a specific week
+     * @param {Array<WeekData>} week - Week data
+     * @returns {() => void} Click handler function
+     */
+    const createWeekHandler = (week) => {
+        return () => handleWeekClick(week);
+    };
+    return (hAsync("div", { class: "week-numbers" },
+        hAsync("div", { class: "week-header" }, localizedWeekText),
+        weeks.map((week, weekIndex) => {
+            var _a;
+            const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+            const weekNumber = getWeekNumber(firstDayWithDate);
+            const isClickable = selectionType === 'range';
+            return (hAsync("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
+        })));
+};
+
+/**
+ * Renders the shortcuts for quick date selection
+ * @param {CalendarShortcutsProps} props - Component properties
+ * @returns {JSX.Element | null} JSX element representing the shortcuts or null if no shortcuts
+ */
+const CalendarShortcuts = props => {
+    const { shortcuts, placement, onShortcutClick } = props;
+    if (!shortcuts || shortcuts.length === 0) {
+        return null;
+    }
+    /**
+     * Creates a click handler for a specific shortcut
+     * @param {ShortcutData} shortcut - The shortcut data
+     * @returns {() => void} Click handler function
+     */
+    const createShortcutHandler = (shortcut) => {
+        return () => onShortcutClick(shortcut);
+    };
+    return (hAsync("div", { class: `shortcuts-container shortcuts-placement-${placement}` }, shortcuts.map((shortcut, index) => (hAsync("nv-button", { key: `shortcut-${index}`, emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: createShortcutHandler(shortcut) }, shortcut.label)))));
+};
+
+/**
+ * Renders the calendar header with navigation and date controls
+ * @param {CalendarHeaderProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar header
+ */
+const CalendarHeader = props => {
+    const { currentDate, months, numberOfCalendars, calendarIndex, monthOffset, onMonthChange, onMonthSelect, onYearChange, } = props;
+    /**
+     * Creates navigation handler for month change
+     * @param {number} direction - Direction of navigation (-1 or 1)
+     * @returns {() => void} Navigation handler function
+     */
+    const createNavigationHandler = (direction) => {
+        return () => onMonthChange(direction);
+    };
+    /**
+     * Creates month selection handler
+     * @param {number} offset - Month offset
+     * @returns {(event: Event) => void} Month selection handler function
+     */
+    const createMonthSelectHandler = (offset) => {
+        return (event) => onMonthSelect(event, offset);
+    };
+    /**
+     * Creates year change handler
+     * @param {number} offset - Month offset
+     * @returns {(event: Event) => void} Year change handler function
+     */
+    const createYearChangeHandler = (offset) => {
+        return (event) => onYearChange(event, offset);
+    };
+    const currentMonth = (currentDate.getUTCMonth() + monthOffset) % 12;
+    const currentYear = currentDate.getUTCFullYear() +
+        Math.floor((currentDate.getUTCMonth() + monthOffset) / 12);
+    return (hAsync("div", { class: "header" },
+        numberOfCalendars > 1 && calendarIndex === 0 && (hAsync("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) })),
+        hAsync("div", { class: "date-controls" },
+            hAsync("select", { class: "month-select mr-4", onChange: createMonthSelectHandler(monthOffset) }, months.map(month => (hAsync("option", { key: month.value, value: month.value, selected: month.value === currentMonth }, month.label)))),
+            hAsync("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: currentYear, onChange: createYearChangeHandler(monthOffset) })),
+        numberOfCalendars === 1 && (hAsync("div", { class: "nav-buttons" },
+            hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) }),
+            hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1) }))),
+        numberOfCalendars > 1 && calendarIndex === numberOfCalendars - 1 && (hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1), class: "nav-right" }))));
+};
+
+/**
+ * Renders the calendar grid with day headers and day cells
+ * @param {CalendarGridProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar grid
+ */
+const CalendarGrid = props => {
+    const { days, dayNames, selectionType, selectedDate, startDate, endDate, isUTCMode, onDayClick, isDateInRange, isToday, } = 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 => {
+            const date = day.date;
+            if (!date)
+                return null;
+            const isSelected = selectionType === 'single' &&
+                isSameDate(date, selectedDate, { isUTCMode });
+            const isInRange = isDateInRange(date);
+            const isStart = isSameDate(date, startDate, { isUTCMode });
+            const isEnd = isSameDate(date, endDate, { isUTCMode });
+            const isTodayDate = isToday(date);
+            return (hAsync(DayCell, { date: date, dayOfMonth: day.dayOfMonth, isCurrentMonth: day.isCurrentMonth, isSelected: isSelected, isInRange: isInRange, isStart: isStart, isEnd: isEnd, isToday: isTodayDate, isDisabled: day.isDisabled, selectionType: selectionType, onClick: onDayClick }));
+        }))));
+};
+
 const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 var NvCalendarStyle0 = nvCalendarCss;
 
@@ -5970,18 +6164,28 @@ class NvCalendar {
         registerInstance(this, hostRef);
         this.singleDateChange = createEvent(this, "singleDateChange", 7);
         this.rangeDateChange = createEvent(this, "rangeDateChange", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         /****************************************************************************/
         //#region PROPERTIES
         /**
          * First day of the week (0 = Sunday, 1 = Monday, etc.)
-         * @default 0
+         * @default 1
          */
-        this.firstDayOfWeek = 0;
+        this.firstDayOfWeek = 1;
         /**
          * Number of calendars to display
          * @default 1
          */
         this.numberOfCalendars = 1;
+        /**
+         * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.
+         * Examples:
+         * - Single: "2025-03-15"
+         * - Range: "2025-03-15,2025-03-20"
+         * @default ""
+         */
+        // eslint-disable-next-line @stencil-community/strict-mutable
+        this.value = '';
         /**
          * Locale for date formatting
          * @default 'en-BE'
@@ -6019,6 +6223,75 @@ class NvCalendar {
         this.endDate = null;
         /** List of formatted months for the selector */
         this.months = [];
+        /**
+         * Parses the unified value prop and synchronizes with internal state
+         * @param {string} value - Value to parse
+         */
+        this.parseUnifiedValue = (value) => {
+            if (!value) {
+                // Reset all selections
+                this.selectedDate = null;
+                this.startDate = null;
+                this.endDate = null;
+                return;
+            }
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+            if (this.selectionType === 'single' && values.length >= 1) {
+                const parsedDate = parseDate(values[0], this.dateFormat);
+                if (parsedDate) {
+                    this.selectedDate = parsedDate;
+                    // Only sync with legacy prop if not using actions (immediate mode)
+                    if (!this.showActions) {
+                        this.singleValue = values[0];
+                    }
+                    // Navigate to the date if not prevented
+                    const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
+                    if (!preventNavigation) {
+                        this.currentDate = parsedDate;
+                    }
+                }
+                else {
+                    // Handle malformed date gracefully - reset state
+                    console.warn(`Invalid date format: ${values[0]}`);
+                    this.selectedDate = null;
+                    if (!this.showActions) {
+                        this.singleValue = '';
+                    }
+                }
+            }
+            else if (this.selectionType === 'range' && values.length >= 2) {
+                const startDate = parseDate(values[0], this.dateFormat);
+                const endDate = parseDate(values[1], this.dateFormat);
+                if (startDate && endDate) {
+                    this.startDate = startDate;
+                    this.endDate = endDate;
+                    // Only sync with legacy prop if not using actions (immediate mode)
+                    if (!this.showActions) {
+                        this.rangeValue = {
+                            start: values[0],
+                            end: values[1],
+                        };
+                    }
+                    // Navigate to start date if not prevented
+                    const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
+                    if (!preventNavigation) {
+                        this.currentDate = startDate;
+                    }
+                }
+                else {
+                    // Handle malformed dates gracefully - reset state
+                    console.warn(`Invalid date range format: ${values[0]}, ${values[1]}`);
+                    this.startDate = null;
+                    this.endDate = null;
+                    if (!this.showActions) {
+                        this.rangeValue = { start: '', end: '' };
+                    }
+                }
+            }
+        };
         /**
          * Change the displayed month
          * @param {number} offset - Month offset (-1 for previous, 1 for next)
@@ -6066,7 +6339,14 @@ class NvCalendar {
                 return;
             const formattedDate = formatDate(date, { dateFormat: this.dateFormat });
             this.selectedDate = date;
-            this.singleDateChange.emit(formattedDate);
+            // Update the unified value prop (like nv-fieldslider)
+            this.value = formattedDate;
+            this.valueChanged.emit(formattedDate);
+            // Legacy support (deprecated) - only sync props if not using actions
+            if (!this.showActions) {
+                this.singleValue = formattedDate;
+                this.singleDateChange.emit(formattedDate);
+            }
         };
         /**
          * Handles range date selection
@@ -6074,18 +6354,32 @@ class NvCalendar {
          */
         this.handleRangeSelection = (date) => {
             if (!this.startDate || (this.startDate && this.endDate)) {
+                // Start new range selection
                 this.startDate = date;
                 this.endDate = null;
             }
             else {
+                // Complete range selection
                 this.endDate = date;
+                // Ensure correct order
                 if (this.startDate > this.endDate) {
                     [this.startDate, this.endDate] = [this.endDate, this.startDate];
                 }
-                this.rangeDateChange.emit({
-                    start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
-                    end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
+                const startFormatted = formatDate(this.startDate, {
+                    dateFormat: this.dateFormat,
+                });
+                const endFormatted = formatDate(this.endDate, {
+                    dateFormat: this.dateFormat,
                 });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = `${startFormatted},${endFormatted}`;
+                this.valueChanged.emit(this.value);
+                // Legacy support (deprecated) - only sync props if not using actions
+                if (!this.showActions) {
+                    const legacyRange = { start: startFormatted, end: endFormatted };
+                    this.rangeDateChange.emit(legacyRange);
+                    this.rangeValue = legacyRange;
+                }
             }
         };
         /**
@@ -6144,23 +6438,35 @@ class NvCalendar {
          * @returns {string[]} Array of short day names
          */
         this.getDayNames = () => {
+            let days;
             // If we have custom day names for this locale
             if (CUSTOM_DAY_NAMES[this.locale]) {
-                const days = [...CUSTOM_DAY_NAMES[this.locale]];
-                // Reorganize the days based on the first day of the week
-                const firstDays = days.slice(0, this.firstDayOfWeek);
-                const remainingDays = days.slice(this.firstDayOfWeek);
-                return [...remainingDays, ...firstDays];
+                // Custom day names are expected to start with Monday (index 0 = Monday)
+                days = [...CUSTOM_DAY_NAMES[this.locale]];
+            }
+            else {
+                // Generate days using Intl.DateTimeFormat, starting from Monday
+                const formatter = new Intl.DateTimeFormat(this.locale, {
+                    weekday: 'short',
+                });
+                // Generate days starting from Monday (2023-01-02 was a Monday)
+                days = [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 2)).toUpperCase());
+            }
+            // Now reorganize based on firstDayOfWeek
+            // 0 = Sunday, 1 = Monday (default), 2 = Tuesday, etc.
+            if (this.firstDayOfWeek === 0) {
+                // If Sunday is first day, move Sunday (last element) to the beginning
+                return [days[6], ...days.slice(0, 6)];
+            }
+            else if (this.firstDayOfWeek === 1) {
+                // If Monday is first day, return as-is (since our array starts with Monday)
+                return days;
+            }
+            else {
+                // For other first days (Tuesday=2, Wednesday=3, etc.)
+                const offset = this.firstDayOfWeek - 1; // Convert to 0-based offset from Monday
+                return [...days.slice(offset), ...days.slice(0, offset)];
             }
-            // Otherwise, use the default behavior
-            const formatter = new Intl.DateTimeFormat(this.locale, {
-                weekday: 'short',
-            });
-            const days = [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 1)).toUpperCase());
-            // Reorganize the days based on the first day of the week
-            const firstDays = days.slice(0, this.firstDayOfWeek);
-            const remainingDays = days.slice(this.firstDayOfWeek);
-            return [...remainingDays, ...firstDays];
         };
         /**
          * Generates the days of the current month
@@ -6341,8 +6647,15 @@ class NvCalendar {
             if (shortcut.singleValue) {
                 const newDate = parseDate(shortcut.singleValue, this.dateFormat);
                 this.selectedDate = newDate;
-                this.singleDateChange.emit(formatDate(newDate, { dateFormat: this.dateFormat }));
-                this.singleValue = formatDate(newDate, { dateFormat: this.dateFormat });
+                const formattedDate = formatDate(newDate, {
+                    dateFormat: this.dateFormat,
+                });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = formattedDate;
+                this.valueChanged.emit(formattedDate);
+                // Legacy support (deprecated) - sync props
+                this.singleValue = formattedDate;
+                this.singleDateChange.emit(formattedDate);
                 if (!this.showActions) {
                     const event = new CustomEvent('closePopover', {
                         bubbles: true,
@@ -6357,14 +6670,18 @@ class NvCalendar {
                 const end = parseDate(shortcut.rangeValue.end, this.dateFormat);
                 this.startDate = start;
                 this.endDate = end;
-                this.rangeDateChange.emit({
-                    start: formatDate(start, { dateFormat: this.dateFormat }),
-                    end: formatDate(end, { dateFormat: this.dateFormat }),
+                const startFormatted = formatDate(start, {
+                    dateFormat: this.dateFormat,
                 });
-                this.rangeValue = {
-                    start: formatDate(start, { dateFormat: this.dateFormat }),
-                    end: formatDate(end, { dateFormat: this.dateFormat }),
-                };
+                const endFormatted = formatDate(end, { dateFormat: this.dateFormat });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = `${startFormatted},${endFormatted}`;
+                this.valueChanged.emit(this.value);
+                // Legacy support (deprecated) - sync props
+                const legacyRange = { start: startFormatted, end: endFormatted };
+                this.rangeDateChange.emit(legacyRange);
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.rangeValue = legacyRange;
                 if (!this.showActions) {
                     const event = new CustomEvent('closePopover', {
                         bubbles: true,
@@ -6382,79 +6699,28 @@ class NvCalendar {
         this.forceCalendarUpdate = newDate => {
             this.currentDate = new Date(newDate);
         };
-        /**
-         * Handles month change with an offset
-         * @param {number} direction - Direction (-1 for previous, 1 for next)
-         * @returns {Function} Change month handler
-         */
-        this.getChangeMonthHandler = (direction) => {
-            return () => this.changeMonth(direction);
-        };
-        /**
-         * Handles month change from an event (ex: dropdown)
-         * @param {number} offset - Month offset (0 by default)
-         * @returns {Function} Change month handler
-         */
-        this.getHandleMonthChange = (offset) => {
-            return (event) => this.handleMonthChange(event, offset);
-        };
-        /**
-         * Handles year change from an event (ex: dropdown)
-         * @param {number} offset - Year offset (0 by default)
-         * @returns {Function} Change year handler
-         */
-        this.getHandleYearChange = (offset) => {
-            return (event) => this.handleYearChange(event, offset);
-        };
-        /**
-         * Handles day click
-         * @param {Date} date - Date to handle
-         * @param {boolean} isDisabled - Whether the date is disabled
-         * @returns {Function} Day click handler
-         */
-        this.getDayClickHandler = (date, isDisabled) => {
-            return isDisabled ? undefined : () => this.handleDateSelection(date);
-        };
-        /**
-         * Handles shortcut selection
-         * @param {Object} shortcut - Shortcut to handle
-         * @param {string | Date} shortcut.singleValue - Selected date value
-         * @param {Object} shortcut.rangeValue - Start and end date values
-         * @param {string | Date} shortcut.rangeValue.start - Start date value
-         * @param {string | Date} shortcut.rangeValue.end - End date value
-         * @param {string} shortcut.label - Label
-         * @returns {Function} Shortcut selection handler
-         */
-        this.getShortcutHandler = (shortcut) => {
-            return () => this.applyShortcut(shortcut);
-        };
-        /**
-         * Handles week selection
-         * @param {Date[]} dates - Dates to handle
-         * @param {number} index - Calendar index
-         * @returns {Function} Week selection handler
-         */
-        this.getWeekSelectionHandler = (dates, index) => {
-            return () => {
-                if (this.selectionType === 'range') {
-                    this.handleWeekSelection(dates, index);
-                }
-            };
-        };
         /**
          * Resets the current selection
          */
         this.resetSelection = () => {
             if (this.selectionType === 'single') {
                 this.selectedDate = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.value = '';
                 this.singleDateChange.emit('');
+                this.valueChanged.emit('');
             }
             else {
                 this.startDate = null;
                 this.endDate = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.value = '';
                 this.rangeDateChange.emit({ start: '', end: '' });
+                this.valueChanged.emit('');
             }
         };
         /**
@@ -6466,6 +6732,7 @@ class NvCalendar {
                     dateFormat: this.dateFormat,
                 });
                 this.singleDateChange.emit(dateStr);
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = dateStr;
                 const event = new CustomEvent('closePopover', {
                     bubbles: true,
@@ -6480,6 +6747,7 @@ class NvCalendar {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
                 });
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
@@ -6502,8 +6770,7 @@ class NvCalendar {
          * @description Renders the header of the calendar
          */
         this.renderHeader = (offset, index) => {
-            return (hAsync("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (hAsync("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) })), hAsync("div", { class: "date-controls" }, hAsync("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (hAsync("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), hAsync("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
-                    Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (hAsync("div", { class: "nav-buttons" }, hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) }), hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (hAsync("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1), class: "nav-right" }))));
+            return (hAsync(CalendarHeader, { currentDate: this.currentDate, months: this.months, numberOfCalendars: this.numberOfCalendars, calendarIndex: index, monthOffset: offset, onMonthChange: this.changeMonth, onMonthSelect: this.handleMonthChange, onYearChange: this.handleYearChange }));
         };
         /**
          * Renders the week numbers
@@ -6517,42 +6784,7 @@ class NvCalendar {
         weeks, 
         /** Calendar index */
         index) => {
-            return (hAsync("div", { class: "week-numbers" }, hAsync("div", { class: "week-header" }, this.getLocalizedWeekText()), weeks.map((week, weekIndex) => {
-                var _a;
-                const dates = week.map(d => d.date);
-                return (hAsync("div", { class: `week-number ${this.selectionType === 'range' ? 'clickable' : ''}`, onClick: this.getWeekSelectionHandler(dates, index), key: `week-${weekIndex}` }, getWeekNumber(((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date())));
-            })));
-        };
-        this.renderDaysGrid = (
-        /** Days to render */
-        days) => {
-            return (hAsync("div", { class: "days-grid" }, days.map(day => {
-                const date = day.date;
-                if (!date)
-                    return null;
-                const isSelected = this.selectionType === 'single' &&
-                    isSameDate(date, this.selectedDate, { isUTCMode: this.isUTCMode });
-                const isInRange = this.isDateInRange(date);
-                const isStart = isSameDate(date, this.startDate, {
-                    isUTCMode: this.isUTCMode,
-                });
-                const isEnd = isSameDate(date, this.endDate, {
-                    isUTCMode: this.isUTCMode,
-                });
-                const isToday = this.isToday(date);
-                const isOutsideMonth = !day.isCurrentMonth;
-                const dayClasses = [
-                    'day',
-                    isSelected ? 'selected' : '',
-                    isStart ? 'range-start' : '',
-                    isEnd ? 'range-end' : '',
-                    isInRange ? 'in-range' : '',
-                    day.isDisabled ? 'disabled' : '',
-                    isOutsideMonth ? 'outside-month' : '',
-                    isToday ? 'is-today' : '',
-                ];
-                return (hAsync("div", { class: dayClasses.filter(Boolean).join(' '), onClick: this.getDayClickHandler(date, day.isDisabled), "aria-disabled": day.isDisabled, key: `day-${date.toISOString()}` }, day.dayOfMonth));
-            })));
+            return (hAsync(WeekNumbers, { weeks: weeks, localizedWeekText: this.getLocalizedWeekText(), selectionType: this.selectionType, onWeekSelect: this.handleWeekSelection, calendarIndex: index }));
         };
         /**
          * Renders the calendar
@@ -6571,7 +6803,7 @@ 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("div", { class: "days-container" }, hAsync("div", { class: "days-header" }, this.getDayNames().map(day => (hAsync("div", { class: "day-header" }, day)))), this.renderDaysGrid(days)))), index < this.numberOfCalendars - 1 && (hAsync("div", { class: "calendar-separator" }))));
+            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" }))));
         };
         /**
          * Renders the shortcuts
@@ -6582,7 +6814,7 @@ class NvCalendar {
             if (!this.hasShortcuts) {
                 return null;
             }
-            return (hAsync("div", { class: `shortcuts-container shortcuts-placement-${this.shortcutsPlacement}` }, this.shortcuts.map(shortcut => (hAsync("nv-button", { emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: this.getShortcutHandler(shortcut) }, shortcut.label)))));
+            return (hAsync(CalendarShortcuts, { shortcuts: this.shortcuts, placement: this.shortcutsPlacement, onShortcutClick: this.applyShortcut }));
         };
         /**
          * Renders the actions
@@ -6591,7 +6823,7 @@ class NvCalendar {
          * @slot actions - Child content of the component.
          */
         this.renderActions = () => {
-            return (hAsync("div", { class: "datepicker-actions" }, hAsync("slot", { name: "actions" }, hAsync("nv-button", { emphasis: "low", size: "xs", onClick: this.resetSelection }, "Cancel"), hAsync("nv-button", { size: "xs", onClick: this.confirmSelection }, "OK"))));
+            return (hAsync("div", { class: "datepicker-actions" }, hAsync("slot", { name: "actions" }, hAsync(CalendarActions, { onReset: this.resetSelection, onConfirm: this.confirmSelection, useSlot: false }))));
         };
     }
     //#endregion EVENTS
@@ -6655,12 +6887,26 @@ class NvCalendar {
             }
         }
     }
+    /**
+     * Watches the changes of the unified value prop
+     * @param {string} newValue - New value
+     * @param {string} oldValue - Old value
+     */
+    onValueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.parseUnifiedValue(newValue);
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
         this.parseDisabledDates();
-        if (this.selectionType === 'single' && this.singleValue) {
+        // Initialize from unified value prop if provided
+        if (this.value) {
+            this.parseUnifiedValue(this.value);
+        }
+        else if (this.selectionType === 'single' && this.singleValue) {
             this.selectedDate = parseDate(this.singleValue, this.dateFormat);
             this.currentDate = this.selectedDate;
         }
@@ -6673,6 +6919,7 @@ class NvCalendar {
                     this.currentDate = startDate;
                     if (swapped) {
                         // If dates were swapped, update the rangeValue property
+                        // eslint-disable-next-line @stencil-community/strict-mutable
                         this.rangeValue = {
                             start: formatDate(startDate, { dateFormat: this.dateFormat }),
                             end: formatDate(endDate, { dateFormat: this.dateFormat }),
@@ -6684,7 +6931,8 @@ class NvCalendar {
                 console.error('Invalid rangeValue:', error);
             }
         }
-        else {
+        // Ensure currentDate is always initialized
+        if (!this.currentDate) {
             this.currentDate = new Date();
         }
         this.initializeMonths();
@@ -6754,15 +7002,16 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '9804c486acf32e12f2d88f932a54ca6260365887' }, hAsync("div", { key: '8503f585401191b904f2de248ed0c24b1fed1505', class: "datepicker-root" }, hAsync("div", { key: '9da71618bd2031b44f5a3fd889d40b2580fcca58', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'fbf71a34b520ca48f1440d8caeec442773b1e57a', 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: '4431e3f1221e9d47807d58af380dcaa91bf05c48', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '30386356bda72f4f12a28351084ab498ec95f5b9' })));
+        return (hAsync(Host, { key: '43d4f3ab9199e9c5f15e853f15283fa59e4a436d' }, hAsync("div", { key: 'b9956225cb2c16d997aa44266af8f8c8222ea968', class: "datepicker-root" }, hAsync("div", { key: '05b63935bc5ebf500bb52d10688385f994b47fb4', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'd7af15b9ce051026cf841b3be361b32d8db41fc1', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (hAsync("div", { key: '1765334bf15564bc9886b210c54bddba64c7042e', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '0ac3446394b8c23b859e5f0065370b95b6fd05d2' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "numberOfCalendars": ["validateNumberOfCalendars"],
         "rangeValue": ["onRangeValueChange"],
         "disabledDates": ["handleDisabledDatesChange"],
-        "singleValue": ["onSingleValueChange"]
+        "singleValue": ["onSingleValueChange"],
+        "value": ["onValueChange"]
     }; }
     static get style() { return NvCalendarStyle0; }
     static get cmpMeta() { return {
@@ -6771,6 +7020,7 @@ class NvCalendar {
         "$members$": {
             "firstDayOfWeek": [514, "first-day-of-week"],
             "numberOfCalendars": [1538, "number-of-calendars"],
+            "value": [1537],
             "singleValue": [1537, "single-value"],
             "rangeValue": [1040],
             "min": [513],
@@ -6791,7 +7041,7 @@ class NvCalendar {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["firstDayOfWeek", "first-day-of-week"], ["numberOfCalendars", "number-of-calendars"], ["singleValue", "single-value"], ["min", "min"], ["max", "max"], ["locale", "locale"], ["dateFormat", "date-format"], ["shortcutsPlacement", "shortcuts-placement"], ["selectionType", "selection-type"], ["showActions", "show-actions"], ["showWeekNumbers", "show-week-numbers"]]
+        "$attrsToReflect$": [["firstDayOfWeek", "first-day-of-week"], ["numberOfCalendars", "number-of-calendars"], ["value", "value"], ["singleValue", "single-value"], ["min", "min"], ["max", "max"], ["locale", "locale"], ["dateFormat", "date-format"], ["shortcutsPlacement", "shortcuts-placement"], ["selectionType", "selection-type"], ["showActions", "show-actions"], ["showWeekNumbers", "show-week-numbers"]]
     }; }
 }
 
@@ -10320,6 +10570,7 @@ class NvDatagrid {
         registerInstance(this, hostRef);
         this.action = createEvent(this, "action", 7);
         this.selectedRows = createEvent(this, "selectedRows", 7);
+        this.stateChanged = createEvent(this, "stateChanged", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -10331,7 +10582,7 @@ class NvDatagrid {
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -10411,6 +10662,10 @@ class NvDatagrid {
          * Whether to enable row selection for the data grid.
          */
         this.enableRowSelection = false;
+        /**
+         * The overall state
+         */
+        this.state = null;
         this.debouncedFilter = debounce$1((value) => {
             var _a;
             (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
@@ -10688,10 +10943,10 @@ class NvDatagrid {
         if (this.enableSorting) {
             tableOptions.getSortedRowModel = getSortedRowModel();
             tableOptions.enableSorting = this.enableSorting;
-            tableOptions.state.sorting = this.sorting;
+            tableOptions.state.sorting = this.sortingState;
             tableOptions.onSortingChange = updater => {
-                const newSorting = typeof updater === 'function' ? updater(this.sorting) : updater;
-                this.sorting = newSorting; // Will automatically trigger the searchTerm watcher and update the table
+                const newSorting = typeof updater === 'function' ? updater(this.sortingState) : updater;
+                this.sortingState = newSorting; // Will automatically trigger the searchTerm watcher and update the table
             };
         }
         if (this.enableRowSelection) {
@@ -11229,7 +11484,7 @@ class NvDatagrid {
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -11262,6 +11517,33 @@ class NvDatagrid {
             this.table.options.state.rowSelection = newValue;
         }
     }
+    handleStateChange(newValue) {
+        if (newValue) {
+            // Only update internal state if values are different to avoid loops
+            if (this.globalFilterSearchTerm !== newValue.globalFilterSearchTerm) {
+                this.globalFilterSearchTerm = newValue.globalFilterSearchTerm;
+            }
+            if (JSON.stringify(this.paginationState) !==
+                JSON.stringify(newValue.paginationState)) {
+                this.paginationState = newValue.paginationState;
+            }
+            if (JSON.stringify(this.sortingState) !==
+                JSON.stringify(newValue.sortingState)) {
+                this.sortingState = newValue.sortingState;
+            }
+        }
+    }
+    // Add watchers for internal state to emit changes
+    handleInternalStateChange() {
+        // Only emit if the state has actually changed
+        const newState = {
+            globalFilterSearchTerm: this.globalFilterSearchTerm,
+            paginationState: this.paginationState,
+            sortingState: this.sortingState,
+        };
+        // Emit the new state and let the parent component update the prop
+        this.stateChanged.emit(newState);
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -11292,7 +11574,7 @@ class NvDatagrid {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (hAsync(Host, { key: '90be657fa9c7f8755391f8d91418399de742ae1f' }, hAsync("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, hAsync("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), hAsync("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, hAsync("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("div", null, hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (hAsync(Host, { key: '95d3cea67d17f1aab33e7bc054161760e6d6df54' }, hAsync("div", { key: 'b6cbdf841ab4ba64d2ccbf49fc6caf9ef082c7ee', class: "hidden" }, hAsync("slot", { key: '18dde7efeec5c1bc38a044a683910db41f70e22d' })), hAsync("slot", { key: 'd3ffb496e938ee3c91c5a7422357cbee90100d84', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '0ab19e6c1c585d4e77004ec9238dba3baff83614', class: `search-container justify-${this.globalFilterPosition}` }, hAsync("nv-fieldtext", { key: '76722d31da818102347278c7b62a93deaa9c29a1', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("div", null, hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (hAsync("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -11303,7 +11585,7 @@ class NvDatagrid {
                 return (hAsync("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (hAsync("tfoot", null, hAsync("tr", null, hAsync("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (hAsync("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (hAsync("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (hAsync("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), hAsync("slot", { key: 'e1641d8fd103b0802e1df4f0848f0de921260065', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (hAsync("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (hAsync("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), hAsync("slot", { key: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11311,11 +11593,12 @@ class NvDatagrid {
         "data": ["parseData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"],
-        "sorting": ["handleSorting"],
+        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
+        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
+        "sortingState": ["handleSortingState", "handleInternalStateChange"],
         "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"]
+        "rowSelectionState": ["handleRowSelectionState"],
+        "state": ["handleStateChange"]
     }; }
     static get style() { return NvDatagridStyle0; }
     static get cmpMeta() { return {
@@ -11335,13 +11618,14 @@ class NvDatagrid {
             "pageSizes": [16],
             "enableSorting": [516, "enable-sorting"],
             "enableRowSelection": [516, "enable-row-selection"],
+            "state": [16],
             "table": [32],
             "parsedColumns": [32],
             "parsedData": [32],
             "globalFilterSearchTerm": [32],
             "columnData": [32],
             "paginationState": [32],
-            "sorting": [32],
+            "sortingState": [32],
             "rowSelectionState": [32]
         },
         "$listeners$": undefined,
@@ -16353,7 +16637,7 @@ var inputmask = {exports: {}};
 
 var Inputmask = /*@__PURE__*/getDefaultExportFromCjs(inputmask.exports);
 
-const nvFielddateCss = "nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFielddateCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFielddateStyle0 = nvFielddateCss;
 
 /**
@@ -16368,7 +16652,7 @@ var NvFielddateStyle0 = nvFielddateCss;
 class NvFielddate {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dateChange = createEvent(this, "dateChange", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         this.popoverId = v4();
         /****************************************************************************/
         //#region PROPERTIES
@@ -16403,7 +16687,10 @@ class NvFielddate {
         this.autofocus = false;
         /**
          * The initial value of the input (date in string format).
+         * @bind value
          */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * The current value of the input date in string format.
@@ -16489,7 +16776,7 @@ class NvFielddate {
         };
         /**
          * Handles the input event on the input element.
-         * Updates the singleValue and emits the dateChange event.
+         * Updates the singleValue and emits the valueChanged event.
          * @param {Event} event - The input event.
          */
         this.handleInput = (event) => {
@@ -16498,8 +16785,13 @@ class NvFielddate {
                 return;
             }
             const input = event.target;
+            const previousValue = this.value;
             this.singleValue = input.value;
-            this.dateChange.emit({ value: input.value });
+            this.value = input.value;
+            // Only emit valueChanged if the value actually changed
+            if (previousValue !== input.value) {
+                this.valueChanged.emit(input.value);
+            }
         };
         /**
          * Toggles the opening/closing of the popover.
@@ -16521,6 +16813,27 @@ class NvFielddate {
                 return;
             }
         };
+        /**
+         * Prevents the valueChanged event from the calendar from propagating up.
+         * @param {CustomEvent} event - The valueChanged event from nv-calendar.
+         */
+        this.handleCalendarValueChanged = (event) => {
+            event.stopPropagation();
+        };
+        /**
+         * Sets the reference to the popover element.
+         * @param {HTMLNvPopoverElement} el - The popover element.
+         */
+        this.setPopoverRef = (el) => {
+            this.popoverElement = el;
+        };
+        /**
+         * Sets the reference to the input element.
+         * @param {HTMLInputElement} el - The input element.
+         */
+        this.setInputRef = (el) => {
+            this.inputElement = el;
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -16577,8 +16890,13 @@ class NvFielddate {
      */
     handleSingleDateChange(event) {
         const value = event.detail;
+        const previousValue = this.value;
         this.singleValue = value;
-        this.dateChange.emit({ value });
+        this.value = value;
+        // Only emit valueChanged if the value actually changed
+        if (previousValue !== value) {
+            this.valueChanged.emit(value);
+        }
         if (!this.showActions) {
             this.open = false;
         }
@@ -16608,12 +16926,12 @@ class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e59d967d20d9f1ab584058795f30a52e50ec2933' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e159c6731265e73b436093b1aceaf354451245c9', htmlFor: this.inputId }, hAsync("slot", { key: '9fc823ee41ec9fc7c8f9a42021277b4729ff0544', name: "label" }, this.label))), hAsync("nv-popover", { key: 'cd0e133d5c62b00d4ade7a08184942e0bacc54fe', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '66b96d21779fd6a8f335af3d2d2bc4df117516d8', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'e2c0e7c249cc4b213afc858281db0a84ab9c4827', name: "before-input" }), hAsync("div", { key: '585283bf8880c4d8be911167d27abe34c2f4e21f', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9c15ffe741369e54fca3a8aeb844e4fbcc93fd5d', name: "leading-input" }), hAsync("input", { key: 'bca0e7c19b1081a2849a2a36843628c6f65a4eb2', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: 'd610fdea33086a737ef99ab4e4ed69f09dd40045', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'cce665f259ef8134cc8737f8077c05915b4f7dcc', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'd27bcd437f35f5445fb9994fd7283c2339bc7ea8', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (hAsync(Host, { key: '4af4649cc8fdc95f2f12d1c495549a006c82c742' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c4905c94c62c8eb01120b30e3b5c16c2dafec20d', htmlFor: this.inputId }, hAsync("slot", { key: 'b8e952b9a6acb9f136d3461514b82a6767723c3c', name: "label" }, this.label))), hAsync("nv-popover", { key: 'de6620c60eb3db3c6f0f435977f257636be81a80', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'e2189ad3476f3d088c07153bc4c1e63357317ded', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: 'a35e545f1379c479734719d8460d5031631f5730', name: "before-input" }), hAsync("div", { key: '01338c24dfff69e019ff6d2344f176effb2dac06', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f6552d188174e77e8f75a9b0554e3ea78c57056d', name: "leading-input" }), hAsync("input", { key: '1b9ad6226166b6bf08afda41f0f6b789fe12dd27', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (hAsync("nv-icon", { key: '0527f051261672a8df205d26dcb253c20b3dfd4b', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'ed83a0a0b7a88f392f16bf97f20885261f88665d', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '6abf3dff6a1bcc0759bea91ab3674d61f4c016c2', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            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: '7708b24f9f569094b6f4f850413edd46e210b7e8', name: "after-input" })), hAsync("div", { key: '194a99a83c9978691130d17e981c61be742315cf', slot: "content" }, hAsync("nv-calendar", { key: '4dc6b2afb3890c5bfb08f070f5b5daac07a76929', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '623af8e048bfb7aef8919fa64a0f1baf04608b69', class: "description" }, hAsync("slot", { key: 'cd3eecb2488e19ba1faf139ab4546e6db10468d2', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'eafcfc3c9bb584c78d7f8d6437bbfab269fdaca9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '4b5c23e00f8edb7c0d0d40a5ae89bbb322190c5d' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '76d584ac756b228e356a17ad36e4558f9a497ea3', name: "after-input" })), hAsync("div", { key: '4914e6fa5046fb287bedb841f2a0b71f1f86e5a3', slot: "content" }, hAsync("nv-calendar", { key: 'fcfb949ee9c378aac2d7c792ed79fcb3cbf8e987', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '52ffcb5f41161b9dc95c0fc18a252b6568817ffb', class: "description" }, hAsync("slot", { key: '91c68f28fe31f5ecfa58d80e5decb018890f18fe', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0c0b8c65f261c2439446dd05014d172e6b829244', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'cf9410ad858faf59d7ada7ce70b18aa768e30a65' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16636,7 +16954,7 @@ class NvFielddate {
             "errorDescription": [513, "error-description"],
             "success": [516],
             "autofocus": [516],
-            "value": [513],
+            "value": [1537],
             "firstDayOfWeek": [514, "first-day-of-week"],
             "numberOfCalendars": [514, "number-of-calendars"],
             "min": [513],
@@ -16658,7 +16976,7 @@ class NvFielddate {
     }; }
 }
 
-const nvFielddaterangeCss = "nv-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}";
+const nvFielddaterangeCss = "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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}";
 var NvFielddaterangeStyle0 = nvFielddaterangeCss;
 
 /**
@@ -16674,6 +16992,7 @@ class NvFielddaterange {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         this.popoverId = v4();
         /****************************************************************************/
         //#region PROPERTIES
@@ -16714,6 +17033,7 @@ class NvFielddaterange {
         /**
          * The initial value of the date range (in string format).
          */
+        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * The current value of the start date in string format.
@@ -16727,10 +17047,6 @@ class NvFielddaterange {
          * Controls the opening of the popover.
          */
         this.open = false;
-        /**
-         * Current calendar state to prevent unwanted navigation
-         */
-        this.calendarState = null;
         /**
          * First day of the week 0 = Sunday, 1 = Monday, etc.
          * @default 1
@@ -16771,6 +17087,35 @@ class NvFielddaterange {
          * Allows the field to stretch and fill the entire width of its container.
          */
         this.fluid = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Parses the unified value prop and synchronizes with internal state
+         * @param {string} value - Value to parse
+         */
+        this.parseUnifiedValue = (value) => {
+            if (!value) {
+                // Reset all selections
+                this.startValue = '';
+                this.endValue = '';
+                return;
+            }
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+            if (values.length >= 2) {
+                this.startValue = values[0];
+                this.endValue = values[1];
+            }
+            else {
+                // Handle malformed value gracefully
+                console.warn(`Invalid date range format: ${value}`);
+                this.startValue = '';
+                this.endValue = '';
+            }
+        };
         /**
          * Closes the popover when a click is detected outside the component.
          * @param {MouseEvent} event - The mouse event
@@ -16791,6 +17136,10 @@ class NvFielddaterange {
             }
             const input = event.target;
             this.startValue = input.value;
+            // Update unified value prop
+            this.value = `${input.value},${this.endValue}`;
+            this.valueChanged.emit(this.value);
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({ start: input.value, end: this.endValue });
             // Temporarily enable navigation for keyboard input
             if (this.calendarElement) {
@@ -16815,6 +17164,10 @@ class NvFielddaterange {
             }
             const input = event.target;
             this.endValue = input.value;
+            // Update unified value prop
+            this.value = `${this.startValue},${input.value}`;
+            this.valueChanged.emit(this.value);
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({ start: this.startValue, end: input.value });
             // Temporarily enable navigation for keyboard input
             if (this.calendarElement) {
@@ -16860,9 +17213,6 @@ class NvFielddaterange {
             this.open = !this.open;
         };
     }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
     /**
      * Converts the nv-calendar date format to the format expected by Inputmask.
      * @param {string} format - The date format to convert
@@ -16886,13 +17236,6 @@ class NvFielddaterange {
      * Update the calendar's rangeValue property without forcing month change
      */
     updateCalendarValue() {
-        if (this.calendarElement && this.startValue && this.endValue) {
-            // Store the current calendar state
-            this.calendarState = {
-                start: this.startValue,
-                end: this.endValue,
-            };
-        }
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -16902,21 +17245,8 @@ class NvFielddaterange {
     }
     componentWillLoad() {
         if (this.value) {
-            try {
-                const range = JSON.parse(this.value);
-                this.startValue = range.start || '';
-                this.endValue = range.end || '';
-                if (range.start && range.end) {
-                    this.calendarState = {
-                        start: range.start,
-                        end: range.end,
-                    };
-                }
-            }
-            catch (error) {
-                console.error('Invalid JSON for value:');
-                console.error(error);
-            }
+            // Use the unified parsing method
+            this.parseUnifiedValue(this.value);
         }
     }
     componentDidLoad() {
@@ -16986,7 +17316,10 @@ class NvFielddaterange {
         if (start && end) {
             this.startValue = start;
             this.endValue = end;
-            this.calendarState = { start, end };
+            // Update unified value prop (like nv-calendar)
+            this.value = `${start},${end}`;
+            this.valueChanged.emit(this.value);
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({
                 start: this.startValue,
                 end: this.endValue,
@@ -16996,6 +17329,24 @@ class NvFielddaterange {
             }
         }
     }
+    /**
+     * Handles the unified value change event from nv-calendar
+     * @param {CustomEvent<string>} event - The custom event
+     */
+    handleCalendarValueChanged(event) {
+        const newValue = event.detail || '';
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.valueChanged.emit(newValue);
+            // Parse and update internal state
+            this.parseUnifiedValue(newValue);
+            // Legacy support - emit dateRangeChange
+            this.dateRangeChange.emit({
+                start: this.startValue,
+                end: this.endValue,
+            });
+        }
+    }
     handleClosePopover() {
         this.open = false;
     }
@@ -17015,10 +17366,14 @@ class NvFielddaterange {
         if (isResetSingle || isResetRange) {
             this.startValue = '';
             this.endValue = '';
+            // Update unified value prop
+            this.value = '';
+            this.valueChanged.emit('');
             const inputs = this.el.querySelectorAll('.input-wrapper input');
             inputs.forEach((input) => {
                 input.value = '';
             });
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({ start: '', end: '' });
         }
     }
@@ -17041,27 +17396,44 @@ class NvFielddaterange {
         }
     }
     handleValueChange(newValue) {
-        try {
-            const range = JSON.parse(newValue);
-            this.startValue = range.start || '';
-            this.endValue = range.end || '';
-        }
-        catch (error) {
-            console.error('Invalid JSON for value:', error);
+        // Use the unified parsing method instead of JSON.parse
+        this.parseUnifiedValue(newValue);
+    }
+    onOpenChanged(newValue) {
+        if (this.contentRef) {
+            if (newValue) {
+                this.contentRef.style.transition = 'none';
+                this.contentRef.style.maxHeight = '0px';
+                requestAnimationFrame(() => {
+                    this.contentRef.style.transition =
+                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
+                    this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
+                });
+            }
+            else {
+                this.contentRef.style.transition = 'none';
+                this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
+                requestAnimationFrame(() => {
+                    this.contentRef.style.transition =
+                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
+                    this.contentRef.style.maxHeight = '0px';
+                });
+            }
         }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '152a588b815a0f3846c5b0c8b9da8d3dbc8f4768' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '786269a2bd4a50559cfad72c61f80797e4afc902', htmlFor: this.startInputId }, hAsync("slot", { key: 'e1c6ed7d288d21889e1ebdfdf0595d4f43e551f7', name: "label" }, this.label))), hAsync("nv-popover", { key: '228966569f5670f1b283c2e45f1c1057811e699d', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'ee39e8da7367bceb1fdcaf7f008d780652471e8e', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '0555695d16ae919327771c586a291dc1767ed98f', name: "before-input" }), hAsync("div", { key: '106aec6a9be06a03497f66407ea8038d5e4be899', class: "input-container" }, hAsync("slot", { key: 'e448f8bacd3b383944f862b9dc1b7ea64feb565e', name: "leading-input" }), hAsync("div", { key: '52ef48b4d76f063c65daa43865da607273ba6410', class: "range-inputs" }, hAsync("input", { key: '899e309f7e100b7b6d12603b229aa4c429ddc1d2', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("svg", { key: '083bef93159b08aaf5c9f7637fbe459c2017e82f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: '2946dbfae81e0b3cdd62f77bb928617d182ae5c1', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: 'afcf53514d22c9f8bb5d7d09294808f3ca053cc9', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: '53fe61cf1c1a5206f22d4c065292680f28fa3c59', d: "M15 12h6" }), hAsync("path", { key: '1e138be2146498fa127922dcba9646e2e960a7e3', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: '3e324bf333bd69374fccac278386f6cc966fc3bd', d: "M3 12h6" })), hAsync("input", { key: 'b7eeab7a9e0071c862528e8fa47c543d0295d331', 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: 'f2ab540736820a8fcf7f4dbb973bc3a16b14fa8d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '91e75c515c4a44a3e499240e4d3c45b7a736429a', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'a471cb1db59673f07ce493bae59e54ee8ecd8968', 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: '375a0c1848445652c2ef5f20ded877223774f792', name: "after-input" })), hAsync("div", { key: '7427c51a78cf38a979b9f7eb4e9a7f49a36279d5', slot: "content" }, hAsync("nv-calendar", { key: '1f9ad9bed53d9496f17544c6381824490431c342', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, rangeValue: this.calendarState, 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: 'c964928de34f26fc82619601d0964079b061048f', class: "description" }, hAsync("slot", { key: 'f409a5286e1c0ba16f36f062df3df5531dad6296', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5e8a1b48da516f801372a59e379c5ade77f9761a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '68f37bddcd3208217a26eb230d1f8afdd3552eff' })));
+        return (hAsync(Host, { key: '5f3b1fe7aee232ce13bbff470db257f723aef978' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '663fac675ac0fc443fd7e671d793bdfcb9f52d46', htmlFor: this.startInputId }, hAsync("slot", { key: 'afdd8f49f12d5f3b476dee59b9a38439ff9215c5', name: "label" }, this.label))), hAsync("nv-popover", { key: '1b6cb3b7dcabf572d580594fcf7d695b6d6ee66f', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd363e153e04eb0af7eeefef57dff6973a06f646d', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '5e638ea73f83fb096a9581d3ef8bc11616e19acb', name: "before-input" }), hAsync("div", { key: '6dcde890ca01b12a512f3e42eb7de2acc43562ee', class: "input-container" }, hAsync("slot", { key: 'ce6acc334efc528965d7e957b6c5d3c48a0ee7d4', name: "leading-input" }), hAsync("div", { key: '301b88ba035cc5ebe5ccb7a50a81391dcdf9c212', class: "range-inputs" }, hAsync("input", { key: '385554f08afb6d0f3c276fa446edb7d01d756d5d', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), hAsync("svg", { key: 'f8c024bc6e933575dce8cc21213dbe719ffece28', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: '0c942f98b933530f9a98f40d201cd4004781070d', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: '6b719ff53b0f8ded007954d110a26df367de8d76', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: 'dbc9d98a1123f2516e125fe368422059ee9de216', d: "M15 12h6" }), hAsync("path", { key: 'bb450d42a867c08ba586de71750d3142576756fa', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: 'aced7f97e1d65c069a0831fc1fb41de0e5f14216', d: "M3 12h6" })), hAsync("input", { key: 'a6182dd71ba14944918aef3c69c1ac81ecba3892', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (hAsync("nv-icon", { key: '4470222fe55588e441d3a41cfbcec0655616f1d6', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5a6565f2c6fb8a4148f87ecbad54da0bb7ae1acc', name: "circle-check", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '229ef4753a605ac0b7241d92f6157367d86dbd92', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '15de0c662d97751a16ea994f2c5678fa5bb333c0', name: "after-input" })), hAsync("div", { key: 'cc165993c4033b5536649001cf2f8989ef9b41ef', slot: "content" }, hAsync("nv-calendar", { key: '0a7c76e9a16504431ea0428278c940b9e97e7117', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2c7164560b8d59abca3759ae3db06bd3820fd897', class: "description" }, hAsync("slot", { key: 'b84ed04584a0e4a4e33682503c588d70e5cc5735', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '09aee3d407a9b126ca85ec82306430b4cb6ce71d', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: 'aa03e8616062be05d9947fa697016483bdfd9fdc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"]
+        "value": ["handleValueChange"],
+        "open": ["onOpenChanged"]
     }; }
     static get style() { return NvFielddaterangeStyle0; }
     static get cmpMeta() { return {
@@ -17083,7 +17455,7 @@ class NvFielddaterange {
             "errorDescription": [513, "error-description"],
             "success": [516],
             "autofocus": [516],
-            "value": [513],
+            "value": [1537],
             "firstDayOfWeek": [514, "first-day-of-week"],
             "numberOfCalendars": [514, "number-of-calendars"],
             "min": [513],
@@ -17098,16 +17470,15 @@ class NvFielddaterange {
             "fluid": [516],
             "startValue": [32],
             "endValue": [32],
-            "open": [32],
-            "calendarState": [32]
+            "open": [32]
         },
-        "$listeners$": [[0, "rangeDateChange", "handleRangeDateChange"], [0, "closePopover", "handleClosePopover"], [0, "applyDateRange", "handleApplyDateRange"], [0, "singleDateChange", "handleDateReset"], [0, "rangeDateChange", "handleDateReset"], [0, "keydown", "handleKeyDown"]],
+        "$listeners$": [[0, "rangeDateChange", "handleRangeDateChange"], [0, "valueChanged", "handleCalendarValueChanged"], [0, "closePopover", "handleClosePopover"], [0, "applyDateRange", "handleApplyDateRange"], [0, "singleDateChange", "handleDateReset"], [0, "rangeDateChange", "handleDateReset"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["startInputId", "start-input-id"], ["endInputId", "end-input-id"], ["label", "label"], ["description", "description"], ["startPlaceholder", "start-placeholder"], ["endPlaceholder", "end-placeholder"], ["startName", "start-name"], ["endName", "end-name"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["autofocus", "autofocus"], ["value", "value"], ["firstDayOfWeek", "first-day-of-week"], ["numberOfCalendars", "number-of-calendars"], ["min", "min"], ["max", "max"], ["locale", "locale"], ["dateFormat", "date-format"], ["shortcutsPlacement", "shortcuts-placement"], ["showActions", "show-actions"], ["showWeekNumbers", "show-week-numbers"], ["fluid", "fluid"]]
     }; }
 }
 
-const nvFielddropdownCss = "nv-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .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;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .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-fielddropdown .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-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::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-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFielddropdownCss = "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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .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;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .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-fielddropdown .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-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::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-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFielddropdownStyle0 = nvFielddropdownCss;
 
 /**
@@ -17658,7 +18029,7 @@ class NvFielddropdownitemcheck {
     }; }
 }
 
-const nvFieldmultiselectCss = "nv-fieldmultiselect{--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-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{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%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
+const nvFieldmultiselectCss = "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-fieldmultiselect{--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-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{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%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
 var NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
 
 /**
@@ -18677,11 +19048,12 @@ class NvFieldmultiselect {
     }; }
 }
 
-const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n  max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n  max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const nvFieldnumberCss = "/* TODO: integrate this logic in the proper structure */\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {\n  background: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {\n  border-color: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider[error] .slider-container .track-container .track .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:hover {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-handler-background-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:focus {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\n\nnv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n  max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n  max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  /* Hide Edge built-in password reveal and clear icons */\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
 var NvFieldnumberStyle0 = nvFieldnumberCss;
 
 /**
  * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot trailing-input - Content to be placed after the input text, within the input container.
  * @slot before-input - Content to be placed before the input text, outside the input container.
  * @slot after-input - Content to be placed after the input text, outside the input container.
  * @slot label - Content to be placed as the label, will override the label prop.
@@ -18796,9 +19168,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ff097af3b023ea85fe549331219fd147aaf5d587' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fbb5a460baf515c9f41068126db0dfc80f3aba64', htmlFor: this.inputId }, hAsync("slot", { key: '27963c9e2f61213b1897e117a68a2cb0d56e7d0f', name: "label" }, this.label))), hAsync("div", { key: 'f1f53b27aabd76cfe478ca0de182fd0d181e1c4b', class: "input-wrapper" }, hAsync("slot", { key: 'f5f0fe6e8fbaa63bb961a5216eba0d0a10ca4cf7', name: "before-input" }), hAsync("div", { key: '6d615f206e6b0ed3b228c75601fd7608b1aa4869', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd4cbd09db77e7998020289b44d43be1c37c1197a', name: "leading-input" }), hAsync("input", { key: 'fa8620fa422b1b96a05630da3f5bed20281b8d19', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '0787893a02fbebf2bec97f4285d4b396fc1a474d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'd2d244b7a2280c3b7719927d6550a28c75743a48', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: 'ebe05dafe4b7ec67dbe59d5da612f2f5e6951e3f', class: "stepper" }, hAsync("nv-iconbutton", { key: '3112ee0b6f5b3982290cd1ec006653d48d3db626', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: 'e3cdf3ca761ebd647e13f23df44c4e18879b8913', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: 'c6de7aaff35002e78e5a27d5f37fe06297b3693f', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e2c1ea1eb866593cee0eb4218dba9665cd8a321c', class: "description" }, hAsync("slot", { key: '1fd324333be676116f5d614bb2dc7448ecd7d3a1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'adb8565f5204849caff31758f739d732f2eb5a01', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '0f2ec09a50e98855cc3f2451c75bd6dca4a6baec', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'bc6961e9cfb030f0ded61180836826bc67215432' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '98542b998a5db7572209167ccda6e143797efe02', htmlFor: this.inputId }, hAsync("slot", { key: '59ee59722d9a05bc62307f12db55965b29ec5ac2', name: "label" }, this.label))), hAsync("div", { key: 'dd63f77ae0110620d37d5e7d9e02baafd7384a18', class: "input-wrapper" }, hAsync("slot", { key: '0c73ca84d755675012c82d0e963c619839551965', name: "before-input" }), hAsync("div", { key: 'bcc8edc6ff5d2f57d1237f22de0d6b6d190ff8e3', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '6ae97f06dae32a6bf00bb73eddfe556ad2e92453', name: "leading-input" }), hAsync("input", { key: '1799946e5b38ef77e3241a4ace04e37afdec98a4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), hAsync("slot", { key: 'b0861939aa926e51777caa62bf01ed6a0a39dc50', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '57df54aa50deab4ad077692cc4592561b31e0d42', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'e57297c4fab2826fb50943c47983f73eb3a8f5b0', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '6096c2878876dd4324b112cf3067bfc3cf9d35f2', class: "stepper" }, hAsync("nv-iconbutton", { key: '7e03c767f0f0c44f70435bfed2bae02f409ed23b', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), hAsync("nv-iconbutton", { key: '06a5b8af32c99bab407ce427c4d634fb0209674c', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), hAsync("slot", { key: '32dc74a736303088b40fff6b8dd53efb9c0e3832', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c0cb59d63dfa4a16820ddf1b3438e287a4e94aaa', class: "description" }, hAsync("slot", { key: 'bcb6d46402b596401ac7f9f01fb6cfb3e4b58feb', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '093f05eadee4cf3802be34b98907596d64febcb6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '93572b4f780e085a2be652a687e561275ebbc428', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18836,7 +19208,7 @@ class NvFieldnumber {
     }; }
 }
 
-const nvFieldpasswordCss = "nv-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldpasswordCss = "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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFieldpasswordStyle0 = nvFieldpasswordCss;
 
 /**
@@ -18946,9 +19318,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '79c3035769b9053d53d62526b2e0d430d5f944ae' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2341f2b9ae8c5acb8ce48e15caae8a629a1c0333', htmlFor: this.inputId }, hAsync("slot", { key: 'ad2301f92adf58c460d4ca76681330b133db2f33', name: "label" }, this.label))), hAsync("div", { key: 'c12f8401a41c6761686b74e725dd91911eaafbb0', class: "input-wrapper" }, hAsync("slot", { key: 'badd6d65663029bc3252ef0818bb1c6220d01ddf', name: "before-input" }), hAsync("div", { key: '0ffb2332657f893c00fe2ca68f4bbbd622bb31f1', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'afa1daa6fab0f2a46ab46f0c99e4e4cf10d7a1fe', name: "leading-input" }), hAsync("input", { key: 'cc567c4a7fe51a24a99c7a471294d7f6086d8b2d', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: '7087d6e35b30de786f3ded46fc74dc9987af6afa', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '6fe5e3936ef42c79ed8a5b8a959a22ecbbe52fd6', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: 'eab04665ad3394860ad30e366eaf18ae4aee445a', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '5bc5bd055301bf5fe1b801c2091cd3307c79104f', class: "description" }, hAsync("slot", { key: '133ebfcb219aaa0c5fd64e4442c1125b26c623b4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2a319732006d29becaa602ae16f2d8e885214931', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e6e75fe487745820b1b8d3de1ed52df8aa9652d4', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'fb277f244fb9f92e09cf77463c3a59b1a7a93095' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '84227c9b8844bcb02917e6f942c206758f2378b8', htmlFor: this.inputId }, hAsync("slot", { key: '36331156c6823f96b017a18a4d134b3a0467e289', name: "label" }, this.label))), hAsync("div", { key: 'babca6f3bf893084259917bfec7434a189bc6a88', class: "input-wrapper" }, hAsync("slot", { key: '7ff461c1b36594cde5e2934b3c4aaa3eaafbea20', name: "before-input" }), hAsync("div", { key: 'ac90041750bfdcc23245c42d7e6c52ae855b4bb5', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '0696566301e7fd935c0316b70b41f15cc68b2276', name: "leading-input" }), hAsync("input", { key: '776db054e9b5fb46b592723fa6b0ad073e0cad93', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: '73d827ca041e3841b5159dd829769def664a5e8b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '7920164504e0834d8e8f0b91a51e4747cbaa0bfb', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: '4c651f834fe546cd75fc6f24ba37f35f3713c004', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '9db3be325ffe22ddaaaf6052d03b0eb5a8decc9f', class: "description" }, hAsync("slot", { key: 'e262fafe3e0d3f1ffbf059eb80d0b0b2128f0c07', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '28571af4f63bdf4a9d7ff558d0d672546765f188', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9b3635bec4932601c0b265cfef7851ab48bad289', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19076,9 +19448,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '544fc138c91a08a1359ec0d30e89a9bda07eae94', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '479908232ade17970c3310f3fec173a86ccea67d', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '624094a1d3819f627bdd6f554ee07200ecd4d03f', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8df4721447e7de7d5c1c51880eb5b5a62041910d', htmlFor: this.inputId }, hAsync("slot", { key: '0e14392a7e6a87804d0975a38b6b011f519457ae', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ad635756eb65ebaa6e939d6e1870d196d3bafe2c', class: "description" }, hAsync("slot", { key: '13f720591e43b8532dfc5367089c17dccd9c4e77', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '597cee5e36cd63c209b60b8a533b4c6de8d5ba0e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '49e1f0deac817a5c49738110862a7b081672510f', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '4533a498fbbf7edc20695ac8411dea11355c2bf9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '0ba25de106a4bb4a3ccf1c5ddf82e60966e59e9f', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'c090a6746068f4ab8a8989d0117ec274320918a8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '804bbd45628e20bcfce8005fd0abd6b8f5ecc677', htmlFor: this.inputId }, hAsync("slot", { key: 'bfe774833365bf51bc1c1be47d960ce04cadaee3', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '99245a0234557bb64887d6f499ffdd4a8b0a03b0', class: "description" }, hAsync("slot", { key: '34bc5919f9bf80fee5a26b4d7dcbf4b2844ef202', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c67be256e429796853146da66aebe0f8ea80a131', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '241a84a4be6028850e42e96305413e8c3298acf3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19110,7 +19482,7 @@ class NvFieldradio {
     }; }
 }
 
-const nvFieldselectCss = "nv-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFieldselectStyle0 = nvFieldselectCss;
 
 /**
@@ -19462,13 +19834,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: '06d38dd360011d4310d1c63851dc254e8ae47411' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a0e46209c73e704d8d0f630baace2b1ce0eaed9c', htmlFor: this.inputId }, hAsync("slot", { key: '6a43c979383647415044931d7a4e4d3a24f65921', name: "label" }, this.label))), hAsync("div", { key: 'f2cee6021f85e64bd9d73d984e208903e3fda4c7', class: "select-wrapper" }, hAsync("slot", { key: 'cae1c527e55c18f3e54d9c73390d6f17ccebce77', name: "before-input" }), hAsync("div", { key: 'acb5dcbea269eb7dca558942f36b05c552924cbc', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'e5c2a508a1297796f2693c76338c5b5f8e3e149e', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '28c38079050912f7d3b744de66ed48351dd890c3', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: '3614f589d16ecfe4b7153a57d079b5bde8d14e4f' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd3d222aeece0c0f99141adf9be19b3dfda5095ac', htmlFor: this.inputId }, hAsync("slot", { key: 'd0deb950cdd7784878f2ee7d7e5a382c3aa67620', name: "label" }, this.label))), hAsync("div", { key: '94b1ead9abf988d3a9a944f04c441054e0aeba1f', class: "select-wrapper" }, hAsync("slot", { key: '5e018a64cd9556d67ecc2b9cfb48771f137c10a6', name: "before-input" }), hAsync("div", { key: 'd52813fc9e534463b50da23b8a5a3e5d57aa2c3a', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'dda40c57c5be6d10a20cb11cfa8eaa8398f84d6c', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '37b22a058b25867d7c4c5c7675288f7d4a368263', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), hAsync("select", { key: 'c409a9e0a26797981640092eb67b949c7d8f0cff', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), hAsync("select", { key: '064eec6725beeba26cc5ded5fb21237b55d40cff', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: 'a2402ea8d832e5612510dce7a3f50148b4edf39f', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'e291bff25fa6f06d3b27c3aaa805b46f674e1614', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'ce98cb12347722926677d9c3fc6f02e35a9c84e4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'e7fe760a5fa84ab0548ebd736a44da04908a4c07', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: 'd6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '010bbb23d2b947ed55c219ac64532f7dfd4f43cc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '70b696ec8f8badd4e064506eeba268755c9f2c09', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '2ec5af60d2fca9a8f5baf59406a4661905aeab05', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '02e2e941e3d8efe4a1a5ef3e2cf95adcdaaa25e7', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: '481df68e62c2438db29aa3591180353f140d506d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '2b7c05697786bb684f7be9aba49641d0bd4b17e2', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: 'ee340692540948b768ff8d7ad817879f1fa892c4', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '9d638182d2f9808d6cf454d56c70cb7e45e520ab', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0b5d93842494d99c7eeb5cde17bc266de14ebc79', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: '011365d39b5e18fda111f257461bedab1e4ddb5e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '15c238fe1651bab3cfe0088837b8f58beec52e28', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'edd7d6187957e34646cc270dcc1485f73d634e52', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19694,17 +20066,15 @@ const FieldInput = props => {
         ? 'input-container'
         : 'input-container hidden-input';
     return hasField ? (hAsync("div", { class: containerClass },
-        labelBeforeValue && hAsync("span", { class: "label-before" }, labelBeforeValue),
-        hAsync("input", Object.assign({ id: inputId, type: "number", value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput })),
-        labelAfterValue && hAsync("span", { class: "label-after" }, labelAfterValue))) : (hAsync("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
+        hAsync("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput }),
+            labelBeforeValue && (hAsync("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)),
+            labelAfterValue && (hAsync("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (hAsync("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
 
-const nvFieldsliderCss = "nv-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(16px + 0.25rem);padding:calc(16px / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:4px;background:#e5e7eb;border-radius:4px;cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:4px;background:var(--nv-field-border-focus);border-radius:4px;pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:16px;height:16px;background:#ffffff;border:2px solid var(--nv-field-border-focus);border-radius:50%;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:focus{box-shadow:0 4px 6px rgba(0, 0, 0, 0.15);outline:6px solid color-mix(in srgb, var(--nv-field-border-focus) 50%, transparent);transition:outline}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background-color:#e6f7ff}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:6px;height:6px;background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(6px + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}nv-fieldslider .slider-container .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;width:64px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldslider[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldslider>.error-description[hidden]{display:none}";
+const nvFieldsliderCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldslider[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldslider>.error-description[hidden]{display:none}";
 var NvFieldsliderStyle0 = nvFieldsliderCss;
 
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental This component is still in development and subject to change in future releases.
  * @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.
@@ -19763,10 +20133,11 @@ class NvFieldslider {
          */
         this.success = false;
         /**
-         * Numeric value of the slider as a string, if range mode is on, the values
-         * will be a comma-separated string.
+         * Numeric value of the slider as an array of numbers. When in single mode,
+         * the value should be a an array of one number. When in range mode, the value
+         * should be an array of two numbers.
          */
-        this.value = '0';
+        this.value = [0, 0];
         /**
          * Defines the interval between selectable values on the slider. Controls how
          * much the value increases or decreases with each keyboard interaction, drag
@@ -19822,16 +20193,20 @@ class NvFieldslider {
          * Parses the value string into a number or array of numbers for internal use.
          */
         this.parseValue = () => {
-            const values = this.value.replace(/\s/g, '').split(',');
-            if (values.length === 1) {
-                this.valueInternal = parseFloat(values[0]);
-            }
-            else if (values.length === 2) {
-                values.forEach((value, index) => {
-                    this.valueInternal = parseFloat(value);
-                    this.rangeValueInternal[index] = this.valueInternal;
-                });
+            if (typeof this.value === 'string') {
+                console.error('Sliders require a number or array of numbers to be passed in the value prop.');
+                return;
+            }
+            if (this.range && this.value.length !== 2) {
+                console.error('Range sliders require an array of two values to be passed in the value prop.');
+                return;
             }
+            if (!this.range && this.value.length !== 1) {
+                console.error('Single sliders require a single value as an array to be passed in the value prop.');
+                return;
+            }
+            this.valueInternal = this.value[0];
+            this.rangeValueInternal = [this.value[0], this.value[1]];
         };
         /**
          * Handles pointer events on the track.
@@ -20041,8 +20416,8 @@ class NvFieldslider {
                 if (validatedValues[0] !== this.rangeValueInternal[0] ||
                     validatedValues[1] !== this.rangeValueInternal[1]) {
                     this.rangeValueInternal = validatedValues;
-                    this.value = this.rangeValueInternal.join(',');
-                    this.valueChanged.emit(this.rangeValueInternal.join(','));
+                    this.value = this.rangeValueInternal;
+                    this.valueChanged.emit(this.rangeValueInternal);
                 }
             }
         }
@@ -20052,8 +20427,8 @@ class NvFieldslider {
                 const validatedValue = this.validateValue(newValue);
                 if (validatedValue !== this.valueInternal) {
                     this.valueInternal = validatedValue;
-                    this.value = String(this.valueInternal);
-                    this.valueChanged.emit(String(this.valueInternal));
+                    this.value = [this.valueInternal];
+                    this.valueChanged.emit([this.valueInternal]);
                 }
             }
         }
@@ -20149,11 +20524,11 @@ class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '69cded86eeaff3470f970d8c5e359d467cea1762' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd6725108d8cfc35d4722e5761592b08f20c390b2', htmlFor: this.startInputId }, hAsync("slot", { key: 'a13207c702baa4ea95073da3db56419c50114de2', name: "label" }, this.label))), hAsync("div", { key: 'a771db3df06edf4ca150db4f66f42a6816e32bc8', 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: '705fe70c9d5ebba5dc9b877532936d301df0baf6', class: "track-container" }, hAsync("div", { key: '1f9a691c278e88160319699ff91d925dfd8184c2', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: 'b80cf4eeb492587ca44ebc6512ded331ec5619ef', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (hAsync(Host, { key: '924819b3d8cc05d7b7448a613b833a3514c4fe46' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '079800a326daa6677bfeadbb335100ad43a6c3a6', htmlFor: this.startInputId }, hAsync("slot", { key: '31c7deab4307cf05951ee3e52e69a57bed2cc4dd', name: "label" }, this.label))), hAsync("div", { key: 'c3f9a721150e9e3e4396509007d17fd5878db9d2', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '2156dae3524cbce4390a27f8699bd2f3c5623799', class: "track-container" }, hAsync("div", { key: '7d601c91d58ef7cc8cecdc6b5becf82245ada8f7', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '27869c72bdf64db4c7efab71bbfb0dc221bbce1c', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '97a111d5b194aeb4f1fcf1049489ddcf30527157', class: "description" }, this.success && (hAsync("nv-icon", { key: 'cc549945c9a330892c69826867f4279e039944e8', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '54b3e872439763a15595d6bf4f9c5e129aeae386', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ff43246b18e39fca6401663e17c75774d964b232', class: "description" }, this.success && (hAsync("nv-icon", { key: 'c8d0cf20d5c91e84d9529c594400886e9e5cb89c', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: 'fe5e79473950d01bf73ebd67628d301fe0b48573', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cd5702e6819a11782a634d522a2dccd992af00f3', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '1641a68da28b0963d61b74e69c2c32f566ffeff3', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: 'a969cc7e37c4a21024790a5603a44365e135693d', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c02f5c9db7270a5442ab75f8532151e4d97801bc', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '56ed10394aca3dc9fdb800f44587cec47e993a8d', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: '037fd3db57941a5f02cde3506112059e7f792803', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20185,7 +20560,7 @@ class NvFieldslider {
             "error": [516],
             "errorDescription": [513, "error-description"],
             "success": [516],
-            "value": [1537],
+            "value": [1040],
             "step": [514],
             "snap": [516],
             "snapTicks": [516, "snap-ticks"],
@@ -20208,11 +20583,11 @@ class NvFieldslider {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["startInputId", "start-input-id"], ["endInputId", "end-input-id"], ["label", "label"], ["hideLabel", "hide-label"], ["description", "description"], ["hasField", "has-field"], ["range", "range"], ["disabled", "disabled"], ["readonly", "readonly"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["value", "value"], ["step", "step"], ["snap", "snap"], ["snapTicks", "snap-ticks"], ["name", "name"], ["endName", "end-name"], ["min", "min"], ["max", "max"], ["showTicks", "show-ticks"], ["fluid", "fluid"], ["labelBeforeValue", "label-before-value"], ["labelAfterValue", "label-after-value"]]
+        "$attrsToReflect$": [["startInputId", "start-input-id"], ["endInputId", "end-input-id"], ["label", "label"], ["hideLabel", "hide-label"], ["description", "description"], ["hasField", "has-field"], ["range", "range"], ["disabled", "disabled"], ["readonly", "readonly"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["step", "step"], ["snap", "snap"], ["snapTicks", "snap-ticks"], ["name", "name"], ["endName", "end-name"], ["min", "min"], ["max", "max"], ["showTicks", "show-ticks"], ["fluid", "fluid"], ["labelBeforeValue", "label-before-value"], ["labelAfterValue", "label-after-value"]]
     }; }
 }
 
-const nvFieldtextCss = "nv-fieldtext{--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-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldtextCss = "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-fieldtext{--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-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFieldtextStyle0 = nvFieldtextCss;
 
 /**
@@ -20328,9 +20703,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, hAsync("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), hAsync("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, hAsync("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), hAsync("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), hAsync("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, hAsync("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '376745526ad4350a50ef017acceb43d77414ddaf' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f03087361cb8f347d6fffb1dc234f3d041109229', htmlFor: this.inputId }, hAsync("slot", { key: 'cea3904cf5522359426b47e7d4e8f4a71da6fb00', name: "label" }, this.label))), hAsync("div", { key: '9f766da6a0962d3e865388d732109c81b03a5802', class: "input-wrapper" }, hAsync("slot", { key: 'f9cd30cda301c60f89263eef30c178ccbbf2fa18', name: "before-input" }), hAsync("div", { key: '086b7a59b7883aea0f5a93945d40a642f3b0fef2', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'caa4cf0d9d1e2990c438aea19e6afa29a11163b9', name: "leading-input" }), hAsync("input", { key: '36fda559fb8609c8275fa3f3d14142d0cf4fc2db', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), hAsync("slot", { key: 'dd6564d4960fff20e8204dab2cad3ae07ec433ad', name: "trailing-input" }), this.error && (hAsync("nv-icon", { key: '203a3a51cf3db17b6544b327d692d8805c9577ee', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '13f4d73e72745cbb06cdb3969f94ad5627822743', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '1c9b1388173a7ad98b3ec2ac7663d77588d71c8d', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '71797445f8593485ec2c0030c90eef6649d25f7f', class: "description" }, hAsync("slot", { key: '296dbddd49b791284734254bcd07400532e9e8ce', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a2cf61e30ff98da3b3c4134f0669ef6f63cdc62f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'fd4ba3d94a266ce096ca3f1b016b05040813cc37', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20369,7 +20744,7 @@ class NvFieldtext {
     }; }
 }
 
-const nvFieldtextareaCss = "nv-fieldtextarea{--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-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .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-fieldtextarea .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldtextareaCss = "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-fieldtextarea{--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-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .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-fieldtextarea .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFieldtextareaStyle0 = nvFieldtextareaCss;
 
 /**
@@ -20550,9 +20925,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, hAsync("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), hAsync("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, hAsync("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, hAsync("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '1ee58085eaa986a995b26dce3ec149130831bb42' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc8ede45802fa28d9bf616e534f4ca50b8f74f63', htmlFor: this.inputId }, hAsync("slot", { key: '498b99a1e7b82694be943dffc1181c9f0a4c9f5e', name: "label" }, this.label))), hAsync("div", { key: '9a9b90d5398f2ba010384b7b9cb64865329b019c', class: "textarea-wrapper" }, hAsync("div", { key: '4d48453ac04146e6ad25e650995df5e4f550e35e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '2190886c348e78073f5d8f6afc04cf3e91423b16', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '55475e861f4b63ae2806141eb148d62864615b97', class: "description" }, hAsync("slot", { key: 'da2d6533d1b86f7ad3cb436650e3691cc155a1dd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '239cc36f8db7855aeedf3c8f428099921142f249', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '97cd804f0c573da6042a6194c263d8580931ca55', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20608,7 +20983,7 @@ function startsWithIgnoreCase(str, prefix) {
     return str.toLowerCase().startsWith(prefix.toLowerCase());
 }
 
-const nvFieldtimeCss = "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::-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;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)}";
 var NvFieldtimeStyle0 = nvFieldtimeCss;
 
 /**
@@ -21580,26 +21955,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, hAsync("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), hAsync("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), hAsync("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, hAsync("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (hAsync(Host, { key: 'c93db13f558128b6923ef9c0a5a96f3a1df15a23', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3049f15468677e1214e627352e6d0c5bfedf2aa8', htmlFor: this.inputId }, hAsync("slot", { key: '00291784c0f7074a9b6e42b9e884c58735fadee9', name: "label" }, this.label))), hAsync("nv-popover", { key: '38d2995f5698c21cc8e10d02e57cf1c617188aed', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd71f02fb8cfd8c7ccd96e17e06ab6e930ae437a8', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'b4fa621c1189efb75d786e87d48eb6e754987358', name: "before-input" }), hAsync("div", { key: '00d7bb6ae8945d946182fbe01faea79c4176b66a', class: "input-container" }, hAsync("slot", { key: '6d5fc613e05a7a353f96fb6f8b30dd606627c742', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: '4a062db12b9b750c6d327fcadff850571e92f674', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            hAsync("span", { key: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
-            hAsync("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            hAsync("span", { key: '629882cf244f54684e1997c7dd60d32deb5fad5a' }, ":"),
+            hAsync("input", { key: '14ae0159a0e5d616d8734e12deffb0f392ee315a', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            hAsync("span", { key: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
-            hAsync("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            hAsync("span", { key: '4d1fb67d409976c5510773c409441f330f627ea4' }, ":"),
+            hAsync("input", { key: 'ea04cddd6f7534f88bc79f82ddcb4a111bffb492', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], hAsync("nv-iconbutton", { key: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), hAsync("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '1eaf8a58a077bfd9c3d93f9277aa8db6e16cbc80', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: 'e3ce880982184b1d31f6a15163361997deca7ac6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '6bcf818a4713e4420d79bf8b0f447ff41dfe5d6f', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '55538603473159890b542b3953b73c43bb8ff262', name: "after-input" })), hAsync("div", { key: '577234c4d732118b059e5a5aa8626677f40ba864', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '25d144cb214a37420182e121078e9f690ee21271', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, hAsync("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '875466380478b23bbc56e661a93392b27fa7af7d', class: "description" }, hAsync("slot", { key: 'ae870e00e1b92f44ea6a3e08b844b9de21060a01', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'aaca1281abe877b9696931d5cc1ab567441f3de9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4e17b0085732e9a47c9637c4ad9b145b5a705e2a', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21704,7 +22079,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '107d58f8858951a11af7bc23be7ae8564ece6b15', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '3e7d4827757d59019b3661a5994d99c5eca995f2', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: '0bc93cc49237854d5a8ca2bb50c25e7660c2dfa1', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: '26f1c3b326b50a317bfef8f8415fa76c28b08253', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '7a998a855a9526b9e86e0b19f4f03f8e0cdf235d', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: '9f2681f14c37da95909b8dc6abcac22adf906a11', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -21848,7 +22223,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'eb27cfea5e30fa97e9950d76f3038dc9ff4f4116', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '6f24a71b7ecab3168567a76b67f0b226f3afa9c3', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'f4a0eb19d8bc08a0c8dbc8cedca249bf417eeb1b', name: this.name, size: this.size }), hAsync("slot", { key: '2994118659b1ad184a42ea4b20ea754427dae279' })));
+        return (hAsync(Host, { key: '1536dd34c53c9eaf67914fcdf869a0274aa6cf87', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '241d18417cd2c4a55c1dcc3fb328edfd8b95a95f', size: this.size }), !this.loading && hAsync("nv-icon", { key: '1cadeaa79ff4992fb88b6703c4e7d6feee37440c', name: this.name, size: this.size }), hAsync("slot", { key: '9d205fbc548c91990fac461f7722f69470b58913' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21896,7 +22271,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '0048566e92b54cf51ef761b8cce814aab1f78707', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '5e3cf72314d0355d5a979cf1c8561312eed50644', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -22107,7 +22482,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: '55cb23963aea78dabf518a9a54308391ed5c5dcb' }, hAsync("slot", { key: 'b7bd9090491a34f3205afb8db8d7ca87864d0c04', name: "trigger" }), hAsync("nv-popover", { key: '8b7e35e0b394827a5bd66858a4f3e81e90dcb597', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
+        return (hAsync(Host, { key: 'e95adf4b7d951357f550a8084ce957c97134d58f' }, hAsync("slot", { key: 'e2db24c208c716c24c3357c95983c87ee0f11d88', name: "trigger" }), hAsync("nv-popover", { key: '735f6d29c7333293aea263eea751b021fbfd0943', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -22178,7 +22553,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b1eeb8aaaab3daf8e247d2ca60ca4ea91828dc25', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '48a9145eec4d5fd701fa975000bf29e4f8e7b018', name: this.icon }), hAsync("slot", { key: 'a3212c6b899ce3dd2f538d8ea2163355ced9a57e' }), this.label && hAsync("span", { key: '9b64bfabd9c2d2e25702e1e06f53dd76a1405a0e', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'adca0ce4f6c9c53f965d0d71b7f0a9d7675091b4' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '5d55fc8fe1b1fc32fef9ee38b8dd53d7617ed0e0', name: "chevron-right" })));
+        return (hAsync(Host, { key: '12438da400f424a313c213b0950fcca96fd42442', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '83a86971ac01576cfbfbe3d07e39e0c54f813bde', name: this.icon }), hAsync("slot", { key: '0b6fc3c1e0eaa6dedee1aa5c99fc39ee4899e400' }), this.label && hAsync("span", { key: 'fb85b1ace8d7cd479c9f78d48950110fd592788d', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'fd42e2eb808d318a9f5e7aaa18da7f4e85293ec3' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '51a5accbc105843b9e7a40209bd9139c16eec4b0', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -24305,7 +24680,7 @@ class NvPopover {
         /**
          * Sets how many pixels the popover should stay from the edge of the viewport.
          */
-        this.shiftPadding = 16;
+        this.shiftPadding = 0;
         /**
          * Use this to set a delay before the popover appears on hover. If the mouse
          * leaves before this time, the popover won't show. This only works when the
@@ -24563,7 +24938,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'af402e7713ddfed886a9965c0bde847be7399f7e' }, hAsync("slot", { key: 'bdef517573a37c420109712631120377fb862ab1', name: "trigger" }), hAsync("div", { key: '8c2004b6d92bb09a1d19ea1f709b2f104695e111', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '11d1b809fcdfddf55b471e12618ec4b8735d4a31', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '989d8f02e4044d4963d3152f137f691fd80ef818', name: "content" }))));
+        return (hAsync(Host, { key: '3ab4e0f245ab925d2336f09b0cfa1c5c81a7eb32' }, hAsync("slot", { key: '54d237432f4f69f517f0182e58a3e6d75c658382', name: "trigger" }), hAsync("div", { key: 'ea6d9cedbade36ca48f9e72ec139720caeae1e35', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'f7cc6db85501f067317f66cc500b21e6571feeb6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '2330178c2adfd93eea13286ec3efee5c495b2680', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24608,7 +24983,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f5e01b297dcede0d11045bc52f7f75278bc66c43' }, hAsync("slot", { key: '158a47218c5edff393c19207dbb7987a25779e6d' })));
+        return (hAsync(Host, { key: '5cd3c7b2db57e433f37a086d0cda9bb0335c84fc' }, hAsync("slot", { key: 'ca4003ec7100ee2979ba7b00352c19ecf1d62e05' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -24643,7 +25018,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'bc18faae4116df9b3a2f944b97c5e5cf096654ae', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'fe3a07a01bd3a5898bcd1533c7966241cff21b44' })));
+        return (hAsync(Host, { key: '61662dda82c5191e4d90098e10d01bad6524e8c7', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '7ee777cdebbfe9d4f6438a2a79407d9f670f2885' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -24980,14 +25355,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: 'b1df9cabce9289f174177a6b28851c3fa4788529' }, hAsync("div", { key: '5e27d3ad0d34f64c9e9b5c9f43ac025603c08530', class: "hidden" }, hAsync("slot", { key: 'aaef162487498f64c21fb1071b2863e8fa4e5a5c' })), hAsync("slot", { key: '34325af8079d76a7599c1c4516fa8f371ce2fe75', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
+        return (hAsync(Host, { key: '510ea0b8404254faa7b2add62884da77232bf13d' }, hAsync("div", { key: '482a3cfb6fb948d7280b7c0ea70035a9c6385615', class: "hidden" }, hAsync("slot", { key: 'da7aa706d453676212e260e9454ed4e5143f2ccc' })), hAsync("slot", { key: '78054c9a10623c82d7cc7fef5619053c89b70944', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (hAsync("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), hAsync("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (hAsync("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (hAsync("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), hAsync("slot", { key: '49cdd7614ab002f5a3de09d414df6bb46c72a28f', name: "after" })));
+        })))))))), hAsync("slot", { key: '8e5b8eee3870e0d38944370a3d9500f641914935', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25107,8 +25482,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cb88cfea301859b05adedf15690027b21cd4837e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '307011c7dcbbe5a6dfc9b2bc1a5bd9842b99f68c', class: "input-container" }, hAsync("input", { key: 'ff87395a3a737a1daaae243176975856a571cac1', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'c190ac33b861a5f92869c83249b441e243b2ee21', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'cfd87cc4e3c68bedf4729a0b62f192077c4b4813', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '81de13cc0e98b4bdb494cc20fb1af59be66952b0', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '69647c010b34a94afb215f9e56b5fba0bd114581', class: "description" }, hAsync("slot", { key: 'ecf7b68b862976907c2d4605a65ee24875b926d3', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '4c1b964876714244584d1dd4e949cf920312d0bf', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'b593008916115afefa8eebeaffde07c3a576089b', class: "input-container" }, hAsync("input", { key: '20783b13ea6e1b427fd79db1ff46d5685e7c7d89', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'b2c9e1d17dbf53a42fdd0612c1ba507ea15c2775', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd5ac7d57befa88f4b1fa752d95dce9ea50db577c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '63817f8322de43590bd2052d3695a3e090c466bc', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f33e45707f6cde570f7d4e3f44aece36413cf7c8', class: "description" }, hAsync("slot", { key: '3dcbe64426121cd2541fc545606f1b1381d51fdf', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -25173,7 +25548,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '893071a64f973b33dccbf3acec95db46e592b717' }, hAsync("slot", { key: '010776550ed5f942c02540b12756f0c0f64e31c4' }), hAsync("nv-popover", { key: '21a669333da9e55b697f8a0b0962a8328beac55a', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'ed89d0bfe1e9e8d12e33e3d7fb0f5b7f2685bbb9', slot: "content" }, this.message), hAsync("slot", { key: 'fa2d9602e003f1da5c3d23156db7b2ac482966bd', name: "content" }))));
+        return (hAsync(Host, { key: '34431c56ab8f0d9581d7bae170eea34972594a3c' }, hAsync("slot", { key: '0e9b3492b07b23e3eb5e7475d174aca7f3d18cdb' }), hAsync("nv-popover", { key: '2a3eccd8a928114ad8df6ce67a19948fab772654', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '286fad171703def16f9a1b95f2e8dc01afc062a0', slot: "content" }, this.message), hAsync("slot", { key: '502d9abb156d4a40f36f442a6629e08b754a983f', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }