@nova-design-system/nova-webcomponents 3.18.0-beta.0 → 3.18.0

package/hydrate/index.js

@@ -22622,23 +22622,247 @@ class NvFieldtextarea {
 }
 
 /**
- * Checks if a string starts with a given prefix, ignoring case.
- * @param {string} str - The string to check.
- * @param {string} prefix - The prefix to check for.
- * @returns {boolean} - True if the string starts with the prefix, ignoring case.
- * @example startsWithIgnoreCase('Hello, world!', 'hello') // true
- * @example startsWithIgnoreCase('Hello, world!', 'world') // false
+ * Format configurations for all supported time formats
  */
-function startsWithIgnoreCase(str, prefix) {
-    if (!str || !prefix)
+const FORMAT_CONFIGS = {
+    'HH': {
+        pattern: /^([0-1]?[0-9]|2[0-3])$/,
+        parts: [TimeType.Hours],
+        defaultValue: '00',
+        maxLength: 2,
+    },
+    'HH:mm': {
+        pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/,
+        parts: [TimeType.Hours, TimeType.Minutes],
+        defaultValue: '00:00',
+        maxLength: 5,
+    },
+    'HH:mm:ss': {
+        pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/,
+        parts: [TimeType.Hours, TimeType.Minutes, TimeType.Seconds],
+        defaultValue: '00:00:00',
+        maxLength: 8,
+    },
+    'hh': {
+        pattern: /^(0?[1-9]|1[0-2])$/,
+        parts: [TimeType.Hours],
+        defaultValue: '01',
+        maxLength: 2,
+    },
+    'hh:mm': {
+        pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9])$/,
+        parts: [TimeType.Hours, TimeType.Minutes],
+        defaultValue: '01:00',
+        maxLength: 5,
+    },
+    'hh:mm:ss': {
+        pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9]):([0-5]?[0-9])$/,
+        parts: [TimeType.Hours, TimeType.Minutes, TimeType.Seconds],
+        defaultValue: '01:00:00',
+        maxLength: 8,
+    },
+};
+/**
+ * Returns the visible time types for a given format
+ * @param {string} format - The time format string
+ * @returns {TimeType[]} Array of TimeType values that should be visible
+ */
+function getVisibleTimeTypes(format) {
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
+        // Fallback for unknown formats
+        return [TimeType.Hours, TimeType.Minutes, TimeType.Seconds];
+    }
+    return config.parts;
+}
+/**
+ * Validates if a given value string matches the expected format pattern
+ * @param {string} value - The time value string to validate
+ * @param {string} format - The expected time format
+ * @returns {boolean} True if the value matches the format, false otherwise
+ */
+function isValidFormatValue(value, format) {
+    if (!value || !format) {
+        return false;
+    }
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
         return false;
-    return str.toLowerCase().startsWith(prefix.toLowerCase());
+    }
+    return config.pattern.test(value);
+}
+/**
+ * Parses a time value string according to the specified format
+ * Handles both full and partial time strings with backward compatibility
+ * @param {string} value - The time value string to parse
+ * @param {string} format - The target time format
+ * @returns {TimeComponents} TimeComponents object with parsed hours, minutes, and seconds
+ */
+function parseValueByFormat(value, format) {
+    const config = FORMAT_CONFIGS[format];
+    const defaultComponents = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (!value || !config) {
+        return defaultComponents;
+    }
+    // Clean the input value - remove non-numeric characters except colons
+    const cleanValue = value.replace(/[^0-9:]/g, '');
+    // Try to match the exact format first
+    const exactMatch = cleanValue.match(config.pattern);
+    if (exactMatch) {
+        return extractComponentsFromMatch(exactMatch, format);
+    }
+    // Handle backward compatibility - parse full format values when format is shorter
+    const fullFormatPattern = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/;
+    const fullMatch = cleanValue.match(fullFormatPattern);
+    if (fullMatch) {
+        const fullComponents = extractComponentsFromMatch(fullMatch, 'HH:mm:ss');
+        return extractRelevantComponents(fullComponents, format);
+    }
+    // Handle partial format values - try to parse what we can
+    const parts = cleanValue.split(':');
+    const result = Object.assign({}, defaultComponents);
+    if (parts.length >= 1 && parts[0]) {
+        const hours = parseInt(parts[0], 10);
+        if (!isNaN(hours)) {
+            if (format.startsWith('hh')) {
+                // 12-hour format validation
+                if (hours >= 1 && hours <= 12) {
+                    result.hours = hours.toString().padStart(2, '0');
+                }
+                else {
+                    // Invalid hour for 12-hour format, keep default
+                    result.hours = defaultComponents.hours;
+                }
+            }
+            else {
+                // 24-hour format validation
+                if (hours >= 0 && hours <= 23) {
+                    result.hours = hours.toString().padStart(2, '0');
+                }
+                else {
+                    // Invalid hour for 24-hour format, keep default
+                    result.hours = defaultComponents.hours;
+                }
+            }
+        }
+    }
+    if (parts.length >= 2 &&
+        parts[1] &&
+        config.parts.includes(TimeType.Minutes)) {
+        const minutes = parseInt(parts[1], 10);
+        if (!isNaN(minutes) && minutes >= 0 && minutes <= 59) {
+            result.minutes = minutes.toString().padStart(2, '0');
+        }
+    }
+    if (parts.length >= 3 &&
+        parts[2] &&
+        config.parts.includes(TimeType.Seconds)) {
+        const seconds = parseInt(parts[2], 10);
+        if (!isNaN(seconds) && seconds >= 0 && seconds <= 59) {
+            result.seconds = seconds.toString().padStart(2, '0');
+        }
+    }
+    return result;
+}
+/**
+ * Extracts time components from a regex match result
+ * @param {RegExpMatchArray} match - The regex match result
+ * @param {string} format - The format that was matched
+ * @returns {TimeComponents} TimeComponents object
+ */
+function extractComponentsFromMatch(match, format) {
+    const result = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (match[1]) {
+        result.hours = parseInt(match[1], 10).toString().padStart(2, '0');
+    }
+    if (match[2]) {
+        result.minutes = parseInt(match[2], 10).toString().padStart(2, '0');
+    }
+    if (match[3]) {
+        result.seconds = parseInt(match[3], 10).toString().padStart(2, '0');
+    }
+    return result;
+}
+/**
+ * Extracts only the relevant components based on the target format
+ * @param {TimeComponents} components - Full time components
+ * @param {string} format - Target format to extract components for
+ * @returns {TimeComponents} TimeComponents with only relevant parts
+ */
+function extractRelevantComponents(components, format) {
+    const config = FORMAT_CONFIGS[format];
+    const result = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (config.parts.includes(TimeType.Hours)) {
+        // Validate hours for the target format
+        const hours = parseInt(components.hours, 10);
+        if (format.startsWith('hh')) {
+            // 12-hour format validation
+            if (hours >= 1 && hours <= 12) {
+                result.hours = components.hours;
+            }
+            // If invalid, keep the default '01'
+        }
+        else {
+            // 24-hour format validation
+            if (hours >= 0 && hours <= 23) {
+                result.hours = components.hours;
+            }
+            // If invalid, keep the default '00'
+        }
+    }
+    if (config.parts.includes(TimeType.Minutes)) {
+        result.minutes = components.minutes;
+    }
+    if (config.parts.includes(TimeType.Seconds)) {
+        result.seconds = components.seconds;
+    }
+    return result;
+}
+/**
+ * Reconstructs a time string from components according to the specified format
+ * @param {TimeComponents} components - Time components to reconstruct
+ * @param {string} format - Target format for reconstruction
+ * @returns {string} Formatted time string
+ */
+function reconstructTimeByFormat(components, format) {
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
+        return `${components.hours}:${components.minutes}:${components.seconds}`;
+    }
+    switch (format) {
+        case 'HH':
+        case 'hh':
+            return components.hours;
+        case 'HH:mm':
+        case 'hh:mm':
+            return `${components.hours}:${components.minutes}`;
+        case 'HH:mm:ss':
+        case 'hh:mm:ss':
+            return `${components.hours}:${components.minutes}:${components.seconds}`;
+        default:
+            return `${components.hours}:${components.minutes}:${components.seconds}`;
+    }
 }
 
-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:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}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:var(--font-family-default), var(--font-family-fallback), 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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+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:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block;z-index:9999}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:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}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:var(--font-family-default), var(--font-family-fallback), 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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
 var NvFieldtimeStyle0 = nvFieldtimeCss;
 
 /**
+ * A format-aware time input component that displays only relevant input fields based on the specified format.
+ * The component ensures consistency between the format property and both input validation and value emission.
+ *
  * @slot label - Content to be placed as the label, will override the label prop.
  * @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.
@@ -22703,6 +22927,10 @@ class NvFieldtime {
          * - hh: 12-hour format (01-12)
          * - hh:mm: 12-hour format with minutes (01:00-12:59)
          * - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)
+         *
+         * The component automatically shows only the relevant input fields based on the selected format.
+         * When the format changes dynamically, the component re-parses the current value and updates
+         * the visible fields accordingly.
          */
         this.format = 'HH:mm:ss';
         /**
@@ -22731,7 +22959,7 @@ class NvFieldtime {
         this.open = event.detail;
     }
     handleKeyDown(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!this.open) {
             if (event.key === 'ArrowDown') {
                 this.open = true;
@@ -22766,20 +22994,22 @@ class NvFieldtime {
         else if (event.key === 'Enter' && currentIndex >= 0) {
             event.preventDefault();
             items[currentIndex].click();
-            if (this.typeFocused === TimeType.Hours) {
-                (_a = this.inputElements[TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
-                (_b = this.inputElements[TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
-            }
-            else if (this.typeFocused === TimeType.Minutes ||
-                this.typeFocused === TimeType.Seconds) {
-                (_c = this.inputElements[TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
-                (_d = this.inputElements[TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
+            // Navigate to the next visible field
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(this.typeFocused);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
             }
         }
         else if (event.key === 'Escape') {
             event.preventDefault();
-            if (this.inputElements[TimeType.Hours]) {
-                this.inputElements[TimeType.Hours].blur();
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const firstVisibleType = visibleTypes[0];
+            if (firstVisibleType && this.inputElements[firstVisibleType]) {
+                this.inputElements[firstVisibleType].blur();
             }
         }
     }
@@ -22787,6 +23017,18 @@ class NvFieldtime {
     /****************************************************************************/
     //#region WATCHERS
     handleValueChange(newValue) {
+        // Parse the new value and ensure it's in the correct format
+        if (newValue) {
+            const components = parseValueByFormat(newValue, this.format);
+            const formattedValue = reconstructTimeByFormat(components, this.format);
+            // Only emit if the formatted value is different from what we received
+            // This prevents infinite loops while ensuring format consistency
+            if (formattedValue !== newValue) {
+                this.value = formattedValue;
+                return; // The watcher will be called again with the formatted value
+            }
+        }
+        // Emit the value in the correct format
         this.valueChanged.emit(newValue);
     }
     handleOpenChange(newOpen) {
@@ -22801,12 +23043,34 @@ class NvFieldtime {
             this.updateColumnHighlight(secondsSelector, this.seconds);
         }
     }
+    handleFormatChange(newFormat, oldFormat) {
+        if (newFormat === oldFormat) {
+            return; // No change, nothing to do
+        }
+        // Re-parse the current value with the new format
+        const currentValue = this.value || this.reconstructTime();
+        // Parse the current value using the old format to get the time components
+        const components = parseValueByFormat(currentValue, oldFormat || 'HH:mm:ss');
+        // Update the component state with the parsed components
+        this.hours = components.hours;
+        this.minutes = components.minutes;
+        this.seconds = components.seconds;
+        // Reconstruct the time value in the new format
+        const newValue = reconstructTimeByFormat(components, newFormat);
+        // Update the value, which will trigger the value watcher and emit the event
+        this.value = newValue;
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region METHODS
     handleInputChange(e, type) {
         const inputElement = e.target;
         const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input
+        // Check if this field is visible for the current format
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        if (!visibleTypes.includes(type)) {
+            return; // Don't process input for non-visible fields
+        }
         // Update the time value based on the type
         switch (type) {
             case TimeType.Hours:
@@ -22819,489 +23083,230 @@ class NvFieldtime {
                 this.handleSecondsChange(inputValue, type);
                 break;
         }
-        // Reconstruct time from inputs
-        const currentValue = this.reconstructTime();
-        this.value = currentValue;
+        // Reconstruct time from inputs in the correct format
+        const reconstructedValue = this.reconstructTime();
+        // Update the value, which will trigger the watcher and emit the event
+        this.value = reconstructedValue;
     }
     handleHoursChange(inputValue, type) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const isHHFormat = this.format.startsWith('HH');
         const maxHours = isHHFormat ? 24 : 12;
-        let reputedToZero = false;
-        const maxHour = this.parseHour(this.max, this.format) ||
-            (this.format.startsWith('hh') ? '12' : '24');
-        const minHour = this.parseHour(this.min, this.format) || '00';
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.hours = '00';
+            return;
+        }
         if (inputValue.length === 1) {
             this.inputZeroAdded[type] = true;
             const newInputValue = inputValue.padStart(2, '0');
-            if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
-                if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                    this.hours = minHour;
-                }
-                else {
-                    this.hours = '00';
-                    reputedToZero = true;
-                }
-            }
-            else {
-                if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                    this.hours = minHour;
-                }
-                else {
-                    this.hours = newInputValue;
-                }
-            }
+            this.hours = newInputValue;
         }
         else if (this.inputZeroAdded[type]) {
             this.inputZeroAdded[type] = false;
             const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
             const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxHours) {
-                if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                    this.hours = minHour;
-                }
-                else {
-                    this.hours = '00';
-                    reputedToZero = true;
-                }
+                this.hours = '00';
             }
             else {
-                if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
-                    if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                    }
-                    else {
-                        this.hours = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                    }
-                    else {
-                        this.hours = newInputValue;
-                    }
-                }
+                this.hours = newInputValue;
             }
         }
         else if (inputValue.length > 2) {
             if (inputValue.startsWith('00')) {
                 this.inputZeroAdded[type] = true;
                 const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
-                if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
-                    if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                    }
-                    else {
-                        this.hours = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                    }
-                    else {
-                        this.hours = newInputValue;
-                    }
-                }
+                this.hours = newInputValue;
             }
             else {
                 const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
                 const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                // Only apply format validation (not min/max constraints)
                 if (parsedNewInputValue >= maxHours) {
-                    if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                        reputedToZero = true;
-                    }
-                    else {
-                        this.hours = '00';
-                        reputedToZero = true;
-                    }
+                    this.hours = '00';
                 }
                 else {
-                    if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
-                        if (minHour &&
-                            parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                            this.hours = minHour;
-                        }
-                        else {
-                            this.hours = '00';
-                            reputedToZero = true;
-                        }
-                    }
-                    else {
-                        if (minHour && parsedNewInputValue < parseInt(minHour, 10)) {
-                            this.hours = minHour;
-                        }
-                        else {
-                            this.hours = parsedNewInputValue.toString();
-                        }
-                    }
+                    this.hours = parsedNewInputValue.toString();
                 }
             }
         }
         else {
-            const newInputValue = inputValue.padStart(2, '0');
-            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxHours) {
-                if (minHour && parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
-                    this.hours = minHour;
-                }
-                else {
-                    this.hours = '00';
-                    reputedToZero = true;
-                }
+                this.hours = '00';
             }
             else {
-                if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
-                    this.hours = '00';
-                    reputedToZero = true;
-                }
-                else {
-                    if (minHour && parsedNewInputValue < parseInt(minHour, 10)) {
-                        this.hours = minHour;
-                    }
-                    else {
-                        this.hours = parsedNewInputValue.toString();
-                    }
-                }
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.hours = parsedNewInputValue.toString();
             }
         }
-        if (this.hours.length === 2 &&
-            !this.inputZeroAdded[type] &&
-            !reputedToZero) {
-            (_a = this.inputElements[TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = this.inputElements[TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
-        }
-        else if (reputedToZero) {
-            (_c = this.inputElements[TimeType.Hours]) === null || _c === void 0 ? void 0 : _c.focus();
-            (_d = this.inputElements[TimeType.Hours]) === null || _d === void 0 ? void 0 : _d.select();
+        // Auto-navigation to next field when input is complete
+        if (this.hours.length >= 1 && !this.inputZeroAdded[type]) {
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(TimeType.Hours);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
+            }
         }
     }
     handleMinutesChange(inputValue, type) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         const maxMinutes = 60;
-        let reputedToZero = false;
-        const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
-        const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.minutes = '00';
+            return;
+        }
         if (inputValue.length === 1) {
             this.inputZeroAdded[type] = true;
             const newInputValue = inputValue.padStart(2, '0');
-            if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
-                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                    this.minutes = minMinute.toString().padStart(2, '0');
-                }
-                else {
-                    this.minutes = '00';
-                    reputedToZero = true;
-                }
-            }
-            else {
-                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                    this.minutes = minMinute.toString().padStart(2, '0');
-                }
-                else {
-                    this.minutes = newInputValue;
-                }
-            }
+            this.minutes = newInputValue;
         }
         else if (this.inputZeroAdded[type]) {
             this.inputZeroAdded[type] = false;
             const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
             const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxMinutes) {
-                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                    this.minutes = minMinute.toString().padStart(2, '0');
-                }
-                else {
-                    this.minutes = '00';
-                    reputedToZero = true;
-                }
+                this.minutes = '00';
             }
             else {
-                if (maxMinute && parsedNewInputValue > maxMinute) {
-                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minMinute && parsedNewInputValue < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = newInputValue;
-                    }
-                }
+                this.minutes = newInputValue;
             }
         }
         else if (inputValue.length > 2) {
             if (inputValue.startsWith('00')) {
                 this.inputZeroAdded[type] = true;
                 const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
-                if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
-                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = newInputValue;
-                    }
-                }
+                this.minutes = newInputValue;
             }
             else {
                 const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
                 const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                // Only apply format validation (not min/max constraints)
                 if (parsedNewInputValue >= maxMinutes) {
-                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = '00';
-                        reputedToZero = true;
-                    }
+                    this.minutes = '00';
                 }
                 else {
-                    if (maxMinute && parsedNewInputValue > maxMinute) {
-                        if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                            this.minutes = minMinute.toString().padStart(2, '0');
-                        }
-                        else {
-                            this.minutes = '00';
-                            reputedToZero = true;
-                        }
-                    }
-                    else {
-                        if (minMinute && parsedNewInputValue < minMinute) {
-                            this.minutes = minMinute.toString().padStart(2, '0');
-                        }
-                        else {
-                            this.minutes = parsedNewInputValue.toString();
-                        }
-                    }
+                    this.minutes = parsedNewInputValue.toString();
                 }
             }
         }
         else {
-            const newInputValue = inputValue.padStart(2, '0');
-            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxMinutes) {
-                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                    this.minutes = minMinute.toString().padStart(2, '0');
-                }
-                else {
-                    this.minutes = '00';
-                    reputedToZero = true;
-                }
+                this.minutes = '00';
             }
             else {
-                if (maxMinute && parsedNewInputValue > maxMinute) {
-                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minMinute && parsedNewInputValue < minMinute) {
-                        this.minutes = minMinute.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.minutes = parsedNewInputValue.toString();
-                    }
-                }
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.minutes = parsedNewInputValue.toString();
             }
         }
-        if (this.minutes.length === 2 &&
-            !this.inputZeroAdded[type] &&
-            !reputedToZero) {
-            (_c = this.inputElements[TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
-            (_d = this.inputElements[TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
-        }
-        else if (reputedToZero) {
-            (_e = this.inputElements[TimeType.Minutes]) === null || _e === void 0 ? void 0 : _e.focus();
-            (_f = this.inputElements[TimeType.Minutes]) === null || _f === void 0 ? void 0 : _f.select();
+        // Auto-navigation to next field when input is complete
+        if (this.minutes.length >= 1 && !this.inputZeroAdded[type]) {
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(TimeType.Minutes);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
+            }
         }
     }
     handleSecondsChange(inputValue, type) {
-        var _a, _b, _c, _d;
         const maxSeconds = 60;
-        let reputedToZero = false;
-        const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
-        const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.seconds = '00';
+            return;
+        }
         if (inputValue.length === 1) {
             this.inputZeroAdded[type] = true;
             const newInputValue = inputValue.padStart(2, '0');
-            if (maxSecond && parseInt(newInputValue, 10) > maxSecond) {
-                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                    this.seconds = minSecond.toString().padStart(2, '0');
-                }
-                else {
-                    this.seconds = '00';
-                    reputedToZero = true;
-                }
-            }
-            else {
-                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                    this.seconds = minSecond.toString().padStart(2, '0');
-                }
-                else {
-                    this.seconds = newInputValue;
-                }
-            }
+            this.seconds = newInputValue;
         }
         else if (this.inputZeroAdded[type]) {
             this.inputZeroAdded[type] = false;
             const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
             const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxSeconds) {
-                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                    this.seconds = minSecond.toString().padStart(2, '0');
-                }
-                else {
-                    this.seconds = '00';
-                    reputedToZero = true;
-                }
+                this.seconds = '00';
             }
             else {
-                if (maxSecond && parsedNewInputValue > maxSecond) {
-                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minSecond && parsedNewInputValue < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = newInputValue;
-                    }
-                }
+                this.seconds = newInputValue;
             }
         }
         else if (inputValue.length > 2) {
             const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
             const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxSeconds) {
-                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                    this.seconds = minSecond.toString().padStart(2, '0');
-                }
-                else {
-                    this.seconds = '00';
-                    reputedToZero = true;
-                }
+                this.seconds = '00';
             }
             else {
-                if (maxSecond && parsedNewInputValue > maxSecond) {
-                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minSecond && parsedNewInputValue < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = parsedNewInputValue.toString();
-                    }
-                }
+                this.seconds = parsedNewInputValue.toString();
             }
         }
         else {
-            const newInputValue = inputValue.padStart(2, '0');
-            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
             if (parsedNewInputValue >= maxSeconds) {
-                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                    this.seconds = minSecond.toString().padStart(2, '0');
-                }
-                else {
-                    this.seconds = '00';
-                    reputedToZero = true;
-                }
+                this.seconds = '00';
             }
             else {
-                if (maxSecond && parsedNewInputValue > maxSecond) {
-                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = '00';
-                        reputedToZero = true;
-                    }
-                }
-                else {
-                    if (minSecond && parsedNewInputValue < minSecond) {
-                        this.seconds = minSecond.toString().padStart(2, '0');
-                    }
-                    else {
-                        this.seconds = parsedNewInputValue.toString();
-                    }
-                }
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.seconds = parsedNewInputValue.toString();
             }
         }
-        if (reputedToZero) {
-            (_c = this.inputElements[TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
-            (_d = this.inputElements[TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
-        }
+        // No auto-navigation for seconds field as it's typically the last field
     }
-    // Parse a continuous time string (e.g., "123456") into hours, minutes, and seconds
+    // Parse a time string according to the current format
     parseTime(timeString) {
         if (!timeString) {
             return;
         }
-        const cleanedTime = timeString.replace(/[^0-9]/g, '').padStart(6, '0');
-        const hour = cleanedTime.slice(0, 2);
-        const minute = cleanedTime.slice(2, 4);
-        const second = cleanedTime.slice(4, 6);
-        const minHour = this.parseHour(this.min, this.format) || hour;
-        const minMinute = this.parseMinute(this.min) || minute;
-        const minSecond = this.parseSecond(this.min) || second;
-        this.hours = minHour.padStart(2, '0');
-        this.minutes = minMinute.toString().padStart(2, '0');
-        this.seconds = minSecond.toString().padStart(2, '0');
+        // Use format-aware parsing without constraint application
+        const components = parseValueByFormat(timeString, this.format);
+        // Set the parsed values without applying min/max constraints
+        this.hours = components.hours;
+        this.minutes = components.minutes;
+        this.seconds = components.seconds;
     }
     reconstructTime() {
-        if (this.format === 'HH' || this.format === 'hh') {
-            return this.hours;
-        }
-        else if (this.format === 'HH:mm' || this.format === 'hh:mm') {
-            return `${this.hours}:${this.minutes}`;
-        }
-        else if (this.format === 'HH:mm:ss' || this.format === 'hh:mm:ss') {
-            return `${this.hours}:${this.minutes}:${this.seconds}`;
-        }
-        else {
-            return `${this.hours}:${this.minutes}:${this.seconds}`;
+        const components = {
+            hours: this.hours,
+            minutes: this.minutes,
+            seconds: this.seconds,
+        };
+        // Ensure the reconstructed time is in the correct format
+        const reconstructedTime = reconstructTimeByFormat(components, this.format);
+        // Validate that the reconstructed time matches the expected format
+        if (!isValidFormatValue(reconstructedTime, this.format)) {
+            // If invalid, return the default value for this format
+            const config = FORMAT_CONFIGS[this.format];
+            return config ? config.defaultValue : reconstructedTime;
         }
+        return reconstructedTime;
     }
     handleFocus(type) {
         var _a, _b, _c, _d;
         if (this.readonly || this.disabled) {
             return;
         }
+        // Check if this field is visible for the current format
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        if (!visibleTypes.includes(type)) {
+            return; // Don't handle focus for non-visible fields
+        }
         if (!this.open) {
             this.open = true; // Force the popover to open
         }
@@ -23314,33 +23319,23 @@ class NvFieldtime {
         this.typeFocused = type;
     }
     HandleDropdownIconClick() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         if (this.disabled || this.readonly) {
             return; // Do not toggle if disabled or read-only
         }
-        if (this.open && this.inputElements[TimeType.Hours]) {
-            this.open = false; // Close the popover if it is open
-        }
-        else if (this.open && this.inputElements[TimeType.Minutes]) {
-            this.open = false; // Close the popover if it is open
-        }
-        else if (this.open && this.inputElements[TimeType.Seconds]) {
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        const firstVisibleType = visibleTypes[0];
+        if (this.open) {
             this.open = false; // Close the popover if it is open
         }
-        else if (!this.open && this.inputElements[TimeType.Hours]) {
-            (_a = this.inputElements[TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
-            (_b = this.inputElements[TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
-        }
-        else if (!this.open && this.inputElements[TimeType.Minutes]) {
-            (_c = this.inputElements[TimeType.Minutes]) === null || _c === void 0 ? void 0 : _c.focus(); // Focus will open the popover
-            (_d = this.inputElements[TimeType.Minutes]) === null || _d === void 0 ? void 0 : _d.select();
-        }
-        else if (!this.open && this.inputElements[TimeType.Seconds]) {
-            (_e = this.inputElements[TimeType.Seconds]) === null || _e === void 0 ? void 0 : _e.focus(); // Focus will open the popover
-            (_f = this.inputElements[TimeType.Seconds]) === null || _f === void 0 ? void 0 : _f.select();
+        else if (!this.open &&
+            firstVisibleType &&
+            this.inputElements[firstVisibleType]) {
+            (_a = this.inputElements[firstVisibleType]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
+            (_b = this.inputElements[firstVisibleType]) === null || _b === void 0 ? void 0 : _b.select();
         }
         else {
-            console.warn('nv-fieldtime -> No input elements found to focus or to blur');
+            console.warn('nv-fieldtime -> No visible input elements found to focus');
         }
     }
     updateHighlightedItem(items, index) {
@@ -23359,6 +23354,8 @@ class NvFieldtime {
     }
     handleTimeOptionClick(event, type) {
         const option = parseInt(event.target.textContent || '0', 10);
+        // Update the time component directly without constraint validation
+        // Dropdown options are already filtered by constraints during generation
         if (type === TimeType.Hours) {
             this.hours = option.toString().padStart(2, '0');
         }
@@ -23368,8 +23365,9 @@ class NvFieldtime {
         else if (type === TimeType.Seconds) {
             this.seconds = option.toString().padStart(2, '0');
         }
-        const reconstructTime = this.reconstructTime();
-        this.value = reconstructTime;
+        // Reconstruct time in the correct format and update value
+        const reconstructedTime = this.reconstructTime();
+        this.value = reconstructedTime;
     }
     handleInputBlur() {
         // Use a delay to check if the focus is still within the popover
@@ -23428,17 +23426,29 @@ class NvFieldtime {
     }
     generateHourOptions(stepInSeconds) {
         const hourStep = Math.max(1, Math.floor(stepInSeconds / 3600)); // Prevent step < 1
-        const maxHour = this.parseHour(this.max, this.format) ||
-            (this.format.startsWith('hh') ? '12' : '24');
-        const minHour = this.parseHour(this.min, this.format) || '00';
-        const maxHourValue = parseInt(maxHour, 10);
-        const minHourValue = parseInt(minHour, 10);
+        const is12HourFormat = this.format.startsWith('hh');
+        // Set proper hour ranges based on format
+        const defaultMaxHour = is12HourFormat ? 12 : 23;
+        const defaultMinHour = is12HourFormat ? 1 : 0;
+        const maxHour = this.parseHour(this.max, this.format);
+        const minHour = this.parseHour(this.min, this.format);
+        const maxHourValue = maxHour ? parseInt(maxHour, 10) : defaultMaxHour;
+        const minHourValue = minHour ? parseInt(minHour, 10) : defaultMinHour;
         const values = [];
-        for (let i = minHourValue; i < maxHourValue; i += hourStep) {
-            values.push(i.toString().padStart(2, '0'));
+        for (let i = minHourValue; i <= maxHourValue; i += hourStep) {
+            const hourStr = i.toString().padStart(2, '0');
+            values.push(hourStr);
         }
         return values;
     }
+    /**
+     * Parse hour value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30" or "02:30")
+     * @param {string} format - The time format string (e.g., "HH:mm" or "hh:mm")
+     * @returns {string} The parsed hour string or null if invalid
+     */
     parseHour(value, format) {
         if (!value)
             return null;
@@ -23456,13 +23466,21 @@ class NvFieldtime {
         const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
         const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
         if (minMinute === 0 && maxMinute === 0)
-            return ['00']; // Handle edge case for zero seconds
+            return ['00']; // Handle edge case for zero minutes
         const values = [];
         for (let i = minMinute; i <= maxMinute; i += minuteStep) {
-            values.push(i.toString().padStart(2, '0'));
+            const minuteStr = i.toString().padStart(2, '0');
+            values.push(minuteStr);
         }
         return values;
     }
+    /**
+     * Parse minute value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30" or "02:30")
+     * @returns {number} The parsed minute number or null if invalid
+     */
     parseMinute(value) {
         if (!value)
             return null;
@@ -23481,10 +23499,18 @@ class NvFieldtime {
             return ['00']; // Handle edge case for zero seconds
         const values = [];
         for (let i = minSecond; i <= maxSecond; i += secondStep) {
-            values.push(i.toString().padStart(2, '0'));
+            const secondStr = i.toString().padStart(2, '0');
+            values.push(secondStr);
         }
         return values;
     }
+    /**
+     * Parse second value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30:45" or "02:30:45")
+     * @returns {number} The parsed second number or null if invalid
+     */
     parseSecond(value) {
         if (!value)
             return null;
@@ -23501,10 +23527,6 @@ class NvFieldtime {
         const repetitions = Math.ceil(300 / totalOptions);
         return Array(repetitions).fill(options).flat();
     }
-    getCurrentTime() {
-        const currentTime = new Date();
-        return currentTime.toLocaleTimeString(); // Returns the time in the locale's format
-    }
     updateColumnHighlight(selector, value) {
         const items = Array.from(this.el.querySelectorAll(selector));
         const index = items.findIndex(x => x.textContent === value);
@@ -23522,8 +23544,13 @@ class NvFieldtime {
         }
         if (!this.open) {
             if (this.inputElements) {
-                (_a = this.inputElements[TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus();
-                (_b = this.inputElements[TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
+                // Focus on the first visible field based on format
+                const visibleTypes = getVisibleTimeTypes(this.format);
+                const firstVisibleType = visibleTypes[0];
+                if (firstVisibleType && this.inputElements[firstVisibleType]) {
+                    (_a = this.inputElements[firstVisibleType]) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = this.inputElements[firstVisibleType]) === null || _b === void 0 ? void 0 : _b.select();
+                }
             }
             event.preventDefault();
         }
@@ -23533,17 +23560,23 @@ class NvFieldtime {
     //#region LIFECYCLE
     componentWillLoad() {
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // If an initial value is passed, parse it
+        // Initialize component state based on format and value
         if (this.value) {
+            // Parse the provided value using format-aware parsing without constraint application
             this.parseTime(this.value);
         }
         else {
-            const minHour = this.parseHour(this.min, this.format) || '00';
-            const minMinute = this.parseMinute(this.min) || 0;
-            const minSecond = this.parseSecond(this.min) || 0;
-            this.hours = minHour.padStart(2, '0');
-            this.minutes = minMinute.toString().padStart(2, '0');
-            this.seconds = minSecond.toString().padStart(2, '0');
+            // Initialize with format-appropriate default values without any constraint application
+            // Use format-specific defaults: '01' for 12-hour formats, '00' for 24-hour formats
+            const defaultComponents = parseValueByFormat('', this.format);
+            // Set default values directly without any min/max constraint validation
+            this.hours = defaultComponents.hours;
+            this.minutes = defaultComponents.minutes;
+            this.seconds = defaultComponents.seconds;
+            // Set the initial value in the correct format without constraint validation
+            // This ensures the component has a proper initial state for the value watcher
+            const initialValue = reconstructTimeByFormat(defaultComponents, this.format);
+            this.value = initialValue;
         }
     }
     connectedCallback() {
@@ -23553,63 +23586,94 @@ class NvFieldtime {
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     componentDidLoad() {
-        if (!this.value) {
-            const currentTime = this.getCurrentTime();
-            // Split time into components
-            // eslint-disable-next-line prefer-const
-            let [hour, minute, secondAmPm] = currentTime.split(':');
-            let second, amPm;
-            // Check if AM/PM is present and split accordingly
-            if (secondAmPm.includes(' ')) {
-                [second, amPm] = secondAmPm.split(' ');
-            }
-            else {
-                second = secondAmPm;
-            }
-            // Parse hour as integer for calculations
-            let parsedHour = parseInt(hour, 10);
-            // Convert hour to 24-hour format based on AM/PM (if present)
-            if (amPm) {
-                if (amPm === 'PM' && parsedHour < 12) {
-                    parsedHour += 12; // Convert PM to 24-hour
-                }
-                else if (amPm === 'AM' && parsedHour === 12) {
-                    parsedHour = 0; // Midnight in 24-hour format
-                }
-            }
-            // Adjust for 12-hour format if necessary
-            if (this.format.startsWith('hh')) {
-                if (parsedHour === 0) {
-                    hour = '12'; // Midnight in 12-hour format
-                }
-                else if (parsedHour > 12) {
-                    hour = (parsedHour - 12).toString(); // Convert 24-hour to 12-hour
-                }
-                else {
-                    hour = parsedHour.toString();
-                }
-            }
-            else {
-                hour = parsedHour.toString(); // Use 24-hour format directly
-            }
-            // Pad hour, minute, and second to ensure two digits
-            hour = hour.padStart(2, '0');
-            minute = minute.padStart(2, '0');
-            second = second.padStart(2, '0');
-            // Update highlighted items for hours
-            const hourSelector = `.time-column.time-column-hours div`;
-            this.updateColumnHighlight(hourSelector, hour);
-            // Update highlighted items for minutes
-            const minuteSelector = `.time-column.time-column-minutes div`;
-            this.updateColumnHighlight(minuteSelector, minute);
-            // Update highlighted items for seconds
-            const secondSelector = `.time-column.time-column-seconds div`;
-            this.updateColumnHighlight(secondSelector, second);
-        }
+        // Initialize dropdown highlighting based on current component state
+        // This ensures proper visual feedback without applying any constraints
+        // Update highlighted items for hours based on current state
+        const hourSelector = `.time-column.time-column-hours div`;
+        this.updateColumnHighlight(hourSelector, this.hours);
+        // Update highlighted items for minutes based on current state
+        const minuteSelector = `.time-column.time-column-minutes div`;
+        this.updateColumnHighlight(minuteSelector, this.minutes);
+        // Update highlighted items for seconds based on current state
+        const secondSelector = `.time-column.time-column-seconds div`;
+        this.updateColumnHighlight(secondSelector, this.seconds);
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
+    /**
+     * Renders input fields based on the current format
+     * Only shows fields that are relevant to the selected format
+     * @returns {HTMLElement[]} Array of HTML elements for time input fields
+     */
+    renderTimeInputFields() {
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        const elements = [];
+        visibleTypes.forEach((type, index) => {
+            // Add separator colon before minutes and seconds (but not before the first field)
+            if (index > 0) {
+                elements.push(hAsync("span", null, ":"));
+            }
+            // Add the input field for this time type
+            elements.push(this.renderTimeInputField(type));
+        });
+        return elements;
+    }
+    /**
+     * Renders a single time input field for the specified type
+     * @param {TimeType} type - The time type to render input for
+     * @returns {HTMLInputElement} HTML input element for the specified time type
+     */
+    renderTimeInputField(type) {
+        const getValue = () => {
+            switch (type) {
+                case TimeType.Hours:
+                    return this.hours;
+                case TimeType.Minutes:
+                    return this.minutes;
+                case TimeType.Seconds:
+                    return this.seconds;
+                default:
+                    return '00';
+            }
+        };
+        const getPlaceholder = () => {
+            switch (type) {
+                case TimeType.Hours:
+                    return this.format.includes('hh') ? 'hh' : 'HH';
+                case TimeType.Minutes:
+                    return 'mm';
+                case TimeType.Seconds:
+                    return 'ss';
+                default:
+                    return '';
+            }
+        };
+        const getId = () => {
+            switch (type) {
+                case TimeType.Hours:
+                    return this.inputId;
+                case TimeType.Minutes:
+                    return `${this.inputId}-minutes`;
+                case TimeType.Seconds:
+                    return `${this.inputId}-seconds`;
+                default:
+                    return this.inputId;
+            }
+        };
+        // Remove min/max constraints from input elements to allow native stepper behavior
+        // Constraints are only applied to dropdown options, not input steppers
+        return (hAsync("input", { ref: el => (this.inputElements[type] = el), type: "number", autofocus: this.autofocus && type === getVisibleTimeTypes(this.format)[0], class: "time-input", pattern: "[0-9]*", maxlength: "3", value: getValue(), onInput: e => this.handleInputChange(e, type), placeholder: getPlaceholder(), inputMode: "numeric", onFocus: () => this.handleFocus(type), name: this.name ? `${type}-${this.name}` : type, id: getId(), readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }));
+    }
+    /**
+     * Renders dropdown columns based on the current format
+     * Only shows columns that are relevant to the selected format
+     * @returns {HTMLElement[]} Array of HTML elements for time dropdown columns
+     */
+    renderTimeDropdownColumns() {
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        return visibleTypes.map(type => this.RenderTimeOptionsColumn(type));
+    }
     RenderTimeOptionsColumn(type) {
         return (hAsync("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index) => (hAsync("div", { class: {
                 'time-option': true,
@@ -23619,32 +23683,16 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: 'ef5f12cdbd62c18033f57ff176775b5ee62ebb85', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '64e20904debf287e69e5717f2d28ac4a700b7f15', htmlFor: this.inputId }, hAsync("slot", { key: 'e0644a80e23854ca06baf8b52b00649a0e6f1ed9', name: "label" }, this.label))), hAsync("nv-popover", { key: '98d71eeb73ce93c16c488e80f79bbe269a44ddc3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '9a7d256f3c64aed3314338c8306540d92dddaad0', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'ac0e04737b86e4767e4c249ee95e4b69a41ea387', name: "before-input" }), hAsync("div", { key: '1f04ff2f539048eb00500b2fbbeaf86ce1698065', class: "input-container" }, hAsync("slot", { key: '60ee3a49ea9ca9509224c57dc64f3ccab7f89312', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: 'cb8a979ce6e4d83074e0c9046bbf3a60821e5262', 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: '74f9604ffd54e0c0bbd88996e32fdcb08f2c3645' }, ":"),
-            hAsync("input", { key: '52f9b637bba804cac6fadff06e8b077bb2f5748a', 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: '878bc9ce7557e9cf9471803a86956a9184d0ccb5' }, ":"),
-            hAsync("input", { key: 'b074d4d3ef80f66e7dbe051b6bc53f151661f409', 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: '3f5d78116ee60d1874a4629d9cf36a06d52b7df4', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '4b2356cf95131af213a4e98feede16fc8c4963db', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'f9b0e61037049a36ac900d1af9ecc71b211ebd88', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '6177abde559c57f2b0586368ead1a61d7b543838', name: "after-input" })), hAsync("div", { key: 'f6d5205a5011411550179f9337143163cb547fb1', class: "time-dropdown", slot: "content" }, hAsync("div", { key: '9f0b3e1423bef197b269c5b11ce744cabc2bd6c4', 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: '1076ded73b32ff9afbd0f02184febcc82f8d839e', class: "description" }, hAsync("slot", { key: '479d09b299d0e380533a6cd689ce7f03aa92ea8e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5615246dbd797c300be357be37d3b9d0aee56e31', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '6568ea3f9e0bdf85dd280c645956f8e0bb592e35', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '315b0a732c1ef8bee7aaa0141ce533ec265e35ab', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '100b75accd50c277e3ddd13c007e55dad8c6f8b7', htmlFor: this.inputId }, hAsync("slot", { key: 'cec67688f98fc7976299a2f55ba8ba859e4ecacc', name: "label" }, this.label))), hAsync("nv-popover", { key: 'feaaefb107251368db809babb02b8f8c7cb7baf0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'c539917597eebdd92bb2e832d1fd9d6afceb5c04', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '5a869349e9fd7a422d596f5bd05402d5559a6f2b', name: "before-input" }), hAsync("div", { key: '27dac6987b28d08bb54b9ffc70ddade28f527a9c', class: "input-container" }, hAsync("slot", { key: '9df638bb3d58df138a360966925b04092f1d4b9a', name: "leading-input" }), this.renderTimeInputFields(), hAsync("nv-iconbutton", { key: '8d6796d9fc57ef2a934bfe79621ff76def8e9507', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '15b593ce4e850d18a5f5f93120ae84e84054cffe', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '85e4a38c3ef64552fc7a47448471d4276ee5cc46', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '45cc1c26bc40425df62382a371ab658dd18aefa8', name: "after-input" })), hAsync("div", { key: '23432dd354491420e42400d9eeb22bc23e36623e', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'efb53556077c85ee94a8fe345a03d67a3e36cdc1', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '735447b328a8264739d3185ce6c65d48a01ec801', class: "description" }, hAsync("slot", { key: '86387e48804b2ac1842c64b4cf4f5ca9f34a6719', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b6cc406c6a872b5ebb83a35a84852e143781e12f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'c9dc284e202b081a61346796d21e73c8647c7daa', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["handleValueChange"],
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "format": ["handleFormatChange"]
     }; }
     static get style() { return NvFieldtimeStyle0; }
     static get cmpMeta() { return {
@@ -23744,7 +23792,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ffcdd0ea4ec0be20ac53e2997df9448d0c341ca3', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'da7318f5c81fcbdfd0d5ee1d90090e94e1bdfbb9', 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: '4e423acadf40aad63eff2bf4a016f63e71b3b5ac', href: `#nvicon_${this.name}` }))));
+        return (hAsync(Host, { key: '6e9c51edb80741f70c2d8f3a9b60670fcdbf1ffd', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '2df0f05d51b54ab78d4764375ae73c83c86a0c1c', 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: '6fb545fc4072b0de4edf5d76d15a0547dd5dd12e', href: `#nvicon_${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -23888,7 +23936,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '21aa46431d8a9f64cfc6fba04a04b72de31c74a4', 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: 'c2df9292a9c49f178e6e160dedeac3fe99776322', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'b7053d9e3a71a1464b41b021f41fe36c6591f114', name: this.name, size: this.size }), hAsync("slot", { key: '70e8576ea565651df7dca6221cfed4160f86f025' })));
+        return (hAsync(Host, { key: '4cda6f8b0c762c08964c5a4a882331d84eaa4514', 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: 'f433d942bad470a376ef8164e73b7025d15bd39e', size: this.size }), !this.loading && hAsync("nv-icon", { key: '1ceebfa6b5907dac279efff65a0f6d977d062453', name: this.name, size: this.size }), hAsync("slot", { key: 'd7f882e9c8dc0fcdb1bbb9ff783f7d387036d043' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -23936,7 +23984,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '932c76ef978e21bdab5a3502daadcdd7ecd05af4', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '4692310e37f31424602a1592cb0648e9bf95a609', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -24159,7 +24207,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: '9c580e2085804dead07f60f3ce4494bed123a58e' }, hAsync("slot", { key: '87740cf4b003379eb7a4d011b2b80640e9d7c24f', name: "trigger" }), hAsync("nv-popover", { key: '102ebedefdc1b6ac5f10900a82c904b12e4cddb1', 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: 'e563f1a78be7cd37b0fe353882cd5874f3a12e60' }, hAsync("slot", { key: 'd91afe28b83121707e752532d349fdc9b983ea71', name: "trigger" }), hAsync("nv-popover", { key: '90c1fc4e30d9cd7b02bd5ad620b3eb824f82d058', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (hAsync("ul", { slot: "content" }, this.renderMenuItems())) : (hAsync("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24233,7 +24281,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '254c76878476b6b22ea2278b86f0608c60a62660', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: 'f7bcdce916a8b0f4026eecd9a6ed060b7f16bcff', name: this.icon }), hAsync("slot", { key: '8557bad8db4a35cbe346e7e1e91d4ab1cde9d30b' }), this.label && hAsync("span", { key: '1ee543ddfec0e1ff91976ca9739de9f054aa6a5b', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'a51ca5b1c20591550e7481228ad4184246a1330e' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: 'f726623c78ea54091f7161c3261db3c22f2d3783', name: "chevron-right" })));
+        return (hAsync(Host, { key: '96933ba797e263a6c56e4b079227498eff19989e', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '17fd121521b54f2065b91a0921d7a2573139086e', name: this.icon }), hAsync("slot", { key: 'e503e3667ee008f6c370d928c2ba0781b1240200' }), this.label && hAsync("span", { key: '521f094eb6e3a4015424ef1516a10d6fa454d8ab', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'e27628004929e519503dac10f7c278b8a9330176' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: 'c706e459412f628a397f1b4d38010c5de23d643f', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -24418,7 +24466,7 @@ class NvNotification {
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: '6e0b8abd9cbcb62b0b133db77520aa5aaa4173c9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, hAsync("div", { key: '41b2ad35bf5220333e132d61f8843d1136cb1f40', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (hAsync("button", { key: '63116f239f7108ae945845c247c712827d8ae8a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, hAsync("nv-icon", { key: 'dc19bf166c6d2eccd3d40384d43206457f0d03f0', name: "x", size: "sm" }))), hAsync("nv-icon", { key: 'e673ac1cc78300bc3425018a0cdfc4b90c679796', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), hAsync("div", { key: '95cb6ec06d89cda8e5170f9ff0f863b6b0b7e32d', "data-scope": "content" }, (this.heading || this.headingSlot) && (hAsync("p", { key: 'ed654c0271d2ff8538295d8f7bf58a9754abb4c9', id: this.getHeadingId(), "data-scope": "heading" }, hAsync("slot", { key: '00cc14a709059b9caf2117174ef7fcc310f5965f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (hAsync("p", { key: 'c7c0bcbc2b54fdfdf8280af6a377929bf17fd688', id: this.getMessageId(), "data-scope": "message" }, hAsync("slot", { key: '946db5aeb667b67f52f51adbb1b8f600325f937e', name: "content" }, this.message))), this.actionsSlot && (hAsync("div", { key: 'd94560b658507a515a1360057121e933b95e6fe6', "data-scope": "actions" }, hAsync("slot", { key: 'db185d3924c7d1fbeb30578992f2375e92a0d4bc', name: "actions" })))))));
+        return (hAsync(Host, { key: '6e0908c4dc5bbd289b756703f19e932165da7eeb', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, hAsync("div", { key: 'c14fb6bcbfc7048bd1d2171e489e2b1d4a8d3486', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (hAsync("button", { key: 'dbc3162958edc2655d59e770b1e27f8226b2a2ec', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, hAsync("nv-icon", { key: '8ddb1a6ec22c343f5df6158418a4bf434b1d1169', name: "x", size: "sm" }))), hAsync("nv-icon", { key: '29e12bb41102cedf3f0b7d8680a265535b69ff23', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), hAsync("div", { key: '996b53cdfa47b14769a08d23b9971475521b94e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (hAsync("p", { key: '110046b680b485d323c49f0836589235aa695ff0', id: this.getHeadingId(), "data-scope": "heading" }, hAsync("slot", { key: 'f256cd10825ee24b4caef51c46ac8e9f7af152c0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (hAsync("p", { key: '73573a91e4cea1acdf12b428f217562eb4df5cf3', id: this.getMessageId(), "data-scope": "message" }, hAsync("slot", { key: '9bb41cd075367cc9c223ccd4fdb0ff47871941a6', name: "content" }, this.message))), this.actionsSlot && (hAsync("div", { key: '7fff75429d22bf9344f077672c18bfe583e99301', "data-scope": "actions" }, hAsync("slot", { key: 'e77b1c3e310db84e3965f097e595f11a8b32ebc3', name: "actions" })))))));
     }
     get el() { return getElement(this); }
     static get style() { return NvNotificationStyle0; }
@@ -24478,7 +24526,7 @@ class NvNotificationContainer {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'db4005459b926bcfef55e76f61bff0b5635f2872', class: `position-${this.position}` }, hAsync("slot", { key: '518909541ca3e9e82168436a43d5362c414c0ec3' })));
+        return (hAsync(Host, { key: '23a42b8ff4be4ca749656567ad5cbc64bba70466', class: `position-${this.position}` }, hAsync("slot", { key: '48a48d6b6e2580f072918192cf59e73cd3dfc1f5' })));
     }
     static get style() { return NvNotificationcontainerStyle0; }
     static get cmpMeta() { return {
@@ -26879,7 +26927,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '0644e319053ca1f216aac89f5737805008b097be' }, hAsync("slot", { key: '7f03080c300378be09e6fce9a44fa2a4a8730f40', name: "trigger" }), hAsync("div", { key: '801b7f1dd8c87db5eb06bcabddda8936c89a6ab2', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'd8e40589a4c53d4ac0c313f3d97cf61ef928f56d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'af0743b1a94c44dd161712e080dbf54a69c9d4a4', name: "content" }))));
+        return (hAsync(Host, { key: '8fdb18b1233e2f988d16b85927bbf5b1f7f47630' }, hAsync("slot", { key: '3dfc19787da335fa0e6b38fe2aebfa1a9df04ea8', name: "trigger" }), hAsync("div", { key: 'd529ca4a2efb62d6bfab679d85acbfb8002e1442', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'bb187c48e62a9653af8649c1a0670534499f6060', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'b60efb50e864ac0f530fcb7b9fc52c53924f29b1', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26926,7 +26974,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9623a4c73a5a2557b2ba7eb346ae0740ca7291c5' }, hAsync("slot", { key: '502ea804deec9e91057bfaf6f2fa4fdb4a5822c3' })));
+        return (hAsync(Host, { key: '664375922c55485e6b297f0e64950db684ecffa3' }, hAsync("slot", { key: '194e45ce439cadb2bdba17072070d3926a746d3f' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -27264,7 +27312,7 @@ class NvSplit {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, hAsync("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), hAsync("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
+        return (hAsync(Host, { key: 'b0874368ed8b3c1b5cd0676a1c8181e827369ad7', "data-dragging": this.isDragging.toString() }, hAsync("slot", { key: 'a0e35a851390bf1f0ffcf065fdeb23cba3c75c9c', name: "pane" }), hAsync("slot", { key: 'a80dbbc4862c3a30aac9e89d6b80a19245083c42', name: "gutter" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27314,7 +27362,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', 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: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
+        return (hAsync(Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', 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: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -27568,7 +27616,7 @@ class NvTable {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, hAsync("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
+        return (hAsync(Host, { key: '37c5e773664fc7bc324d46c003057f322e118c0d' }, hAsync("slot", { key: '28decbb3d75da3471a95d9130fdb8206df811270' })));
     }
     get host() { return getElement(this); }
     static get style() { return NvTableStyle0; }
@@ -27646,8 +27694,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, hAsync("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', 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: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, hAsync("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '3e1eecaddeab51801343663989a1554ae62794be', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'a67b9c8c0159d6b2a1f87d06d536116475fd9683', class: "input-container" }, hAsync("input", { key: '2ce5d01313da8fe74cdac78616c051236aa3102e', 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: '0e7e1960fc3cd8ff1c79b3c8d4fc306e2b761bfc', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0325700fc58d39878821a4b1871cb433eda18199', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '4b627dbbad2f52446a0ebb4eacdfe3d6d5ccdbb0', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'db7d0a200c66e234142b455686afdd409337b336', class: "description" }, hAsync("slot", { key: '171bb20b639a07bda52cb788fb367a51d6dbe7f8', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -27723,7 +27771,7 @@ class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
+        return (hAsync(Host, { key: '6965d7bd520347f5236cca32ca674875a9a4fd2f', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: '45ddd14b67904252c2e78b6357fbd33790facf23' })));
     }
     static get style() { return NvTogglebuttonStyle0; }
     static get cmpMeta() { return {
@@ -27897,7 +27945,7 @@ class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, hAsync("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
+        return (hAsync(Host, { key: '4e075360c060e6de5af80325f7b91e7573f89b16' }, hAsync("slot", { key: '7b361c2d608b17cb91814d279aac842e666fda5a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27968,7 +28016,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, hAsync("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), hAsync("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), hAsync("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
+        return (hAsync(Host, { key: 'bbf9407ca59c3e6122cbdc7c9e3aefe56b64311d' }, hAsync("slot", { key: 'b13ae1307843e66cd018ce204c94147b53a26649' }), hAsync("nv-popover", { key: '12d9bdca8d68eff93f6aa80304535df3be127c32', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '6f4e64e97cc644f9da030e30b1069150c47c2985', slot: "content" }, this.message), hAsync("slot", { key: '2b55d3b0c1279ce0a8bf165be1b26fe854e91d47', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }