@govbr-ds/webcomponents 2.3.0 → 2.4.0

package/dist/esm/br-datetime-picker.entry.js

@@ -3,13 +3,32 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-ConyRdJe.js';
-import { r as requireParse, p as parseExports, i as isValidExports, a as parseISOExports, t as toDateExports, b as isValidDatetimePickerDateRange, c as resolveSsrLocalDate, n as normalizeDatetimePickerSelectionMode, d as normalizeDatetimePickerWeekStartsOn, e as normalizeDatetimePickerDisabledDates, f as normalizeDatetimePickerInitialMoment, s as setExports, g as eachDayOfIntervalExports, h as isSameDayExports, j as normalizeDatetimePickerMode } from './datetime-picker-props-validation-BeTcUTnE.js';
-import { d as dispatchNativeFormEvent } from './event-CfuJQ1DY.js';
+import { r as requireParse, i as isValidExports, p as parseExports, t as toDateExports, s as setExports, a as resolveSsrLocalDate, e as eachDayOfIntervalExports, b as isSameDayExports } from './isValid-Bee0Uvqc.js';
+import { d as dispatchNativeFormEvent } from './event-6Da1SZ3J.js';
 import { r as resolveFormValidator, a as runFormValidator, g as getFormValidationState, c as setFormValidity, i as isFormControlDisabled } from './validator-BkWWrDEr.js';
-import { g as generateUniqueId } from './id-BeJxz5TQ.js';
-import { r as reportInvalidPropValue } from './prop-warning-BlGV-x0w.js';
+import { f as formatBytes$1 } from './format-bytes-B7bNfmgh.js';
+import { g as generateUniqueId$1 } from './id-BeJxz5TQ.js';
 import { a as hasAssignedSlotContent } from './slot-BIG-yees.js';
-import { r as requireIsValid, D as DATETIME_PICKER_MODE, f as formatExports, a as DATETIME_PICKER_LOCALE } from './datetime-picker-constants-BtRPYRvA.js';
+import { r as requireIsValid, a as requireConstructFrom, b as requireToDate, c as requireConstants, D as DATETIME_PICKER_MODE, f as formatExports, d as DATETIME_PICKER_LOCALE, e as DATETIME_RANGE_ORDER_MESSAGE } from './datetime-picker-constants-DDc4sADe.js';
+import { w as warnInvalidPropValue } from './prop-warning-BlGV-x0w.js';
+
+/**
+ * Utilitários Helpers com funções auxiliares para geração de IDs e formatação de bytes.
+ * Mantemos um `default` export com a API compatível para não quebrar importações existentes.
+ */
+function generateUniqueId(prefix) {
+    return generateUniqueId$1(prefix);
+}
+/**
+ * Formata um valor em bytes para uma representação humana (KB, MB, GB...).
+ * @param bytes Quantidade em bytes.
+ * @param decimals Número de casas decimais (padrão: 2).
+ * @returns Valor formatado com unidade.
+ */
+function formatBytes(bytes, decimals = 2) {
+    return formatBytes$1(bytes, decimals);
+}
+const Helpers = { generateUniqueId, formatBytes };
 
 var isMatch = {};
 
@@ -320,10 +339,323 @@ function requireIsMatch () {
 
 var isMatchExports = /*@__PURE__*/ requireIsMatch();
 
-/** Serializa o valor atual para envio em FormData conforme o modo ativo. */
+var parseISO = {};
+
+var hasRequiredParseISO;
+
+function requireParseISO () {
+	if (hasRequiredParseISO) return parseISO;
+	hasRequiredParseISO = 1;
+	parseISO.parseISO = parseISO$1;
+	var _index = /*@__PURE__*/ requireConstants();
+
+	var _index2 = /*@__PURE__*/ requireConstructFrom();
+	var _index3 = /*@__PURE__*/ requireToDate();
+
+	/**
+	 * The {@link parseISO} function options.
+	 */
+
+	/**
+	 * @name parseISO
+	 * @category Common Helpers
+	 * @summary Parse ISO string
+	 *
+	 * @description
+	 * Parse the given string in ISO 8601 format and return an instance of Date.
+	 *
+	 * Function accepts complete ISO 8601 formats as well as partial implementations.
+	 * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601
+	 *
+	 * If the argument isn't a string, the function cannot parse the string or
+	 * the values are invalid, it returns Invalid Date.
+	 *
+	 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+	 * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+	 *
+	 * @param argument - The value to convert
+	 * @param options - An object with options
+	 *
+	 * @returns The parsed date in the local time zone
+	 *
+	 * @example
+	 * // Convert string '2014-02-11T11:30:30' to date:
+	 * const result = parseISO('2014-02-11T11:30:30')
+	 * //=> Tue Feb 11 2014 11:30:30
+	 *
+	 * @example
+	 * // Convert string '+02014101' to date,
+	 * // if the additional number of digits in the extended year format is 1:
+	 * const result = parseISO('+02014101', { additionalDigits: 1 })
+	 * //=> Fri Apr 11 2014 00:00:00
+	 */
+	function parseISO$1(argument, options) {
+	  const invalidDate = () => (0, _index2.constructFrom)(options?.in, NaN);
+
+	  const additionalDigits = options?.additionalDigits ?? 2;
+	  const dateStrings = splitDateString(argument);
+
+	  let date;
+	  if (dateStrings.date) {
+	    const parseYearResult = parseYear(dateStrings.date, additionalDigits);
+	    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+	  }
+
+	  if (!date || isNaN(+date)) return invalidDate();
+
+	  const timestamp = +date;
+	  let time = 0;
+	  let offset;
+
+	  if (dateStrings.time) {
+	    time = parseTime(dateStrings.time);
+	    if (isNaN(time)) return invalidDate();
+	  }
+
+	  if (dateStrings.timezone) {
+	    offset = parseTimezone(dateStrings.timezone);
+	    if (isNaN(offset)) return invalidDate();
+	  } else {
+	    const tmpDate = new Date(timestamp + time);
+	    const result = (0, _index3.toDate)(0, options?.in);
+	    result.setFullYear(
+	      tmpDate.getUTCFullYear(),
+	      tmpDate.getUTCMonth(),
+	      tmpDate.getUTCDate(),
+	    );
+	    result.setHours(
+	      tmpDate.getUTCHours(),
+	      tmpDate.getUTCMinutes(),
+	      tmpDate.getUTCSeconds(),
+	      tmpDate.getUTCMilliseconds(),
+	    );
+	    return result;
+	  }
+
+	  return (0, _index3.toDate)(timestamp + time + offset, options?.in);
+	}
+
+	const patterns = {
+	  dateTimeDelimiter: /[T ]/,
+	  timeZoneDelimiter: /[Z ]/i,
+	  timezone: /([Z+-].*)$/,
+	};
+
+	const dateRegex =
+	  /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+	const timeRegex =
+	  /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+	const timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+
+	function splitDateString(dateString) {
+	  const dateStrings = {};
+	  const array = dateString.split(patterns.dateTimeDelimiter);
+	  let timeString;
+
+	  // The regex match should only return at maximum two array elements.
+	  // [date], [time], or [date, time].
+	  if (array.length > 2) {
+	    return dateStrings;
+	  }
+
+	  if (/:/.test(array[0])) {
+	    timeString = array[0];
+	  } else {
+	    dateStrings.date = array[0];
+	    timeString = array[1];
+	    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+	      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+	      timeString = dateString.substr(
+	        dateStrings.date.length,
+	        dateString.length,
+	      );
+	    }
+	  }
+
+	  if (timeString) {
+	    const token = patterns.timezone.exec(timeString);
+	    if (token) {
+	      dateStrings.time = timeString.replace(token[1], "");
+	      dateStrings.timezone = token[1];
+	    } else {
+	      dateStrings.time = timeString;
+	    }
+	  }
+
+	  return dateStrings;
+	}
+
+	function parseYear(dateString, additionalDigits) {
+	  const regex = new RegExp(
+	    "^(?:(\\d{4}|[+-]\\d{" +
+	      (4 + additionalDigits) +
+	      "})|(\\d{2}|[+-]\\d{" +
+	      (2 + additionalDigits) +
+	      "})$)",
+	  );
+
+	  const captures = dateString.match(regex);
+	  // Invalid ISO-formatted year
+	  if (!captures) return { year: NaN, restDateString: "" };
+
+	  const year = captures[1] ? parseInt(captures[1]) : null;
+	  const century = captures[2] ? parseInt(captures[2]) : null;
+
+	  // either year or century is null, not both
+	  return {
+	    year: century === null ? year : century * 100,
+	    restDateString: dateString.slice((captures[1] || captures[2]).length),
+	  };
+	}
+
+	function parseDate(dateString, year) {
+	  // Invalid ISO-formatted year
+	  if (year === null) return new Date(NaN);
+
+	  const captures = dateString.match(dateRegex);
+	  // Invalid ISO-formatted string
+	  if (!captures) return new Date(NaN);
+
+	  const isWeekDate = !!captures[4];
+	  const dayOfYear = parseDateUnit(captures[1]);
+	  const month = parseDateUnit(captures[2]) - 1;
+	  const day = parseDateUnit(captures[3]);
+	  const week = parseDateUnit(captures[4]);
+	  const dayOfWeek = parseDateUnit(captures[5]) - 1;
+
+	  if (isWeekDate) {
+	    if (!validateWeekDate(year, week, dayOfWeek)) {
+	      return new Date(NaN);
+	    }
+	    return dayOfISOWeekYear(year, week, dayOfWeek);
+	  } else {
+	    const date = new Date(0);
+	    if (
+	      !validateDate(year, month, day) ||
+	      !validateDayOfYearDate(year, dayOfYear)
+	    ) {
+	      return new Date(NaN);
+	    }
+	    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+	    return date;
+	  }
+	}
+
+	function parseDateUnit(value) {
+	  return value ? parseInt(value) : 1;
+	}
+
+	function parseTime(timeString) {
+	  const captures = timeString.match(timeRegex);
+	  if (!captures) return NaN; // Invalid ISO-formatted time
+
+	  const hours = parseTimeUnit(captures[1]);
+	  const minutes = parseTimeUnit(captures[2]);
+	  const seconds = parseTimeUnit(captures[3]);
+
+	  if (!validateTime(hours, minutes, seconds)) {
+	    return NaN;
+	  }
+
+	  return (
+	    hours * _index.millisecondsInHour +
+	    minutes * _index.millisecondsInMinute +
+	    seconds * 1000
+	  );
+	}
+
+	function parseTimeUnit(value) {
+	  return (value && parseFloat(value.replace(",", "."))) || 0;
+	}
+
+	function parseTimezone(timezoneString) {
+	  if (timezoneString === "Z") return 0;
+
+	  const captures = timezoneString.match(timezoneRegex);
+	  if (!captures) return 0;
+
+	  const sign = captures[1] === "+" ? -1 : 1;
+	  const hours = parseInt(captures[2]);
+	  const minutes = (captures[3] && parseInt(captures[3])) || 0;
+
+	  if (!validateTimezone(hours, minutes)) {
+	    return NaN;
+	  }
+
+	  return (
+	    sign *
+	    (hours * _index.millisecondsInHour + minutes * _index.millisecondsInMinute)
+	  );
+	}
+
+	function dayOfISOWeekYear(isoWeekYear, week, day) {
+	  const date = new Date(0);
+	  date.setUTCFullYear(isoWeekYear, 0, 4);
+	  const fourthOfJanuaryDay = date.getUTCDay() || 7;
+	  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+	  date.setUTCDate(date.getUTCDate() + diff);
+	  return date;
+	}
+
+	// Validation functions
+
+	// February is null to handle the leap year (using ||)
+	const daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+	function isLeapYearIndex(year) {
+	  return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
+	}
+
+	function validateDate(year, month, date) {
+	  return (
+	    month >= 0 &&
+	    month <= 11 &&
+	    date >= 1 &&
+	    date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28))
+	  );
+	}
+
+	function validateDayOfYearDate(year, dayOfYear) {
+	  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+	}
+
+	function validateWeekDate(_year, week, day) {
+	  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+	}
+
+	function validateTime(hours, minutes, seconds) {
+	  if (hours === 24) {
+	    return minutes === 0 && seconds === 0;
+	  }
+
+	  return (
+	    seconds >= 0 &&
+	    seconds < 60 &&
+	    minutes >= 0 &&
+	    minutes < 60 &&
+	    hours >= 0 &&
+	    hours < 25
+	  );
+	}
+
+	function validateTimezone(_hours, minutes) {
+	  return minutes >= 0 && minutes <= 59;
+	}
+	return parseISO;
+}
+
+var parseISOExports = /*@__PURE__*/ requireParseISO();
+
+/**
+ * Serializa o valor atual para envio em FormData conforme o modo ativo.
+ *
+ * @param {Date | null} value - Valor selecionado a ser serializado para submissão.
+ * @param {DatetimePickerFormContext} context - Contexto com `mode`, `selectionMode` e limites (rangeStart/rangeEnd).
+ * @returns {string | null} Representação serializada pronta para `FormData`, ou `null` quando não houver valor.
+ */
 function serializeDatetimePickerFormValue(value, context) {
     if (isDateRangeMode(context)) {
-        return serializeRangeFormValue(context.rangeStart, context.rangeEnd);
+        return serializeRangeFormValue(context.rangeStart, context.rangeEnd, context.mode);
     }
     if (value === null) {
         return null;
@@ -339,7 +671,14 @@ function serializeDatetimePickerFormValue(value, context) {
             return formatExports.format(value, "yyyy-MM-dd'T'HH:mm:ssXXX");
     }
 }
-/** Analisa um valor serializado de formulário para Date respeitando o modo atual. */
+/**
+ * Analisa um valor serializado de formulário para `Date` respeitando o modo atual.
+ *
+ * @param {string} value - String serializada vinda do formulário.
+ * @param {DatetimePickerMode} mode - Modo (`date` | `time` | `datetime`) que dita o parser a ser usado.
+ * @param {Date} referenceDate - Data de referência usada ao analisar valores de hora.
+ * @returns {Date | null} Objeto Date quando a análise for bem-sucedida, ou `null` quando inválido.
+ */
 function parseDatetimePickerSerializedValue(value, mode, referenceDate) {
     if (isBlankValue(value)) {
         return null;
@@ -353,20 +692,34 @@ function parseDatetimePickerSerializedValue(value, mode, referenceDate) {
             return parseIsoDate(value);
     }
 }
-/** Analisa intervalo serializado no formato YYYY-MM-DD/YYYY-MM-DD. */
-function parseDatetimePickerSerializedRange(value) {
+/**
+ * Analisa um intervalo serializado no formato `start/end` conforme o modo ativo.
+ *
+ * @param {string} value - String no formato `start/end` contendo os dois lados do intervalo.
+ * @param {DatetimePickerMode} mode - Modo a ser usado para análise (padrão: `date`).
+ * @param {Date} referenceDate - Data de referência para análise de horários.
+ * @returns {DatetimePickerDateRange | null} `{ start, end }` quando válido, ou `null` quando inválido.
+ */
+function parseDatetimePickerSerializedRange(value, mode = DATETIME_PICKER_MODE.DATE, referenceDate = new Date()) {
     const [startRaw, endRaw] = value.split('/');
     if (startRaw === undefined || endRaw === undefined) {
         return null;
     }
-    const start = parseDate(startRaw);
-    const end = parseDate(endRaw);
+    const start = parseDatetimePickerSerializedValue(startRaw, mode, referenceDate);
+    const end = parseDatetimePickerSerializedValue(endRaw, mode, referenceDate);
     if (start === null || end === null) {
         return null;
     }
     return { start, end };
 }
-/** Informa se o componente deve sinalizar valueMissing na validação nativa. */
+/**
+ * Indica se o componente deve sinalizar `valueMissing` na validação nativa.
+ *
+ * A função considera `required`, `disabled` e se o valor (ou intervalo) está incompleto.
+ *
+ * @param {DatetimePickerMissingValueContext} context - Contexto contendo `required`, `disabled`, `value` e, quando aplicável, `rangeStart`/`rangeEnd`.
+ * @returns {boolean} `true` quando o controle deve reportar `valueMissing`.
+ */
 function hasDatetimePickerMissingValue(context) {
     const { required, disabled, value } = context;
     if (!required || disabled) {
@@ -375,18 +728,52 @@ function hasDatetimePickerMissingValue(context) {
     const isRangeIncomplete = isDateRangeMode(context) && (context.rangeStart === null || context.rangeEnd === null);
     return value === null || isRangeIncomplete;
 }
+/**
+ * Retorna `true` quando a `value` dada é vazia ou composta apenas por espaços.
+ *
+ * @param {string} value - String a ser verificada.
+ * @returns {boolean} `true` quando a string é em branco.
+ */
 function isBlankValue(value) {
     return value.trim() === '';
 }
+/**
+ * Verifica se o contexto está no modo de intervalo (`selectionMode === 'range'`).
+ *
+ * @param {DatetimePickerFormContext} context - Contexto do formulário do componente.
+ * @returns {boolean} `true` quando `selectionMode` é `range`.
+ */
 function isDateRangeMode(context) {
-    return context.selectionMode === 'range' && context.mode === DATETIME_PICKER_MODE.DATE;
+    return context.selectionMode === 'range';
 }
-function serializeRangeFormValue(rangeStart, rangeEnd) {
+/**
+ * Serializa um par `rangeStart`/`rangeEnd` conforme o modo para submissão.
+ *
+ * @param {Date | null} rangeStart - Data inicial do intervalo (ou `null`).
+ * @param {Date | null} rangeEnd - Data final do intervalo (ou `null`).
+ * @param {DatetimePickerMode | undefined} mode - Modo que define o formato usado na conversão (date/time/datetime).
+ * @returns {string | null} String `start/end` quando ambos existem, caso contrário `null`.
+ */
+function serializeRangeFormValue(rangeStart, rangeEnd, mode) {
     if (rangeStart === null || rangeEnd === null) {
         return null;
     }
-    return `${serializeDate(rangeStart)}/${serializeDate(rangeEnd)}`;
+    const serialize = (date) => {
+        if (mode === DATETIME_PICKER_MODE.TIME)
+            return formatExports.format(date, 'HH:mm');
+        if (mode === DATETIME_PICKER_MODE.DATETIME)
+            return formatExports.format(date, "yyyy-MM-dd'T'HH:mm:ssXXX");
+        return serializeDate(date);
+    };
+    return `${serialize(rangeStart)}/${serialize(rangeEnd)}`;
 }
+/**
+ * Converte uma string de tempo `HH:mm` em um objeto `Date` combinando-a com a `referenceDate`.
+ *
+ * @param {string} value - String no formato `HH:mm`.
+ * @param {Date} referenceDate - Data base que receberá as horas e minutos analisados.
+ * @returns {Date | null} Data ajustada com horas/minutos, ou `null` se inválida.
+ */
 function parseTimeValue(value, referenceDate) {
     if (!isMatchExports.isMatch(value, 'HH:mm')) {
         return null;
@@ -399,10 +786,24 @@ function parseTimeValue(value, referenceDate) {
     baseDate.setHours(parsedTime.getHours(), parsedTime.getMinutes(), 0, 0);
     return baseDate;
 }
+/**
+ * Analisa uma string ISO em `Date` quando válida.
+ *
+ * @param {string} value - String ISO (ex: `2023-01-01T12:00:00-03:00`).
+ * @returns {Date | null} Objeto Date quando válido, ou `null` quando inválido.
+ */
 function parseIsoDate(value) {
     const parsedDate = parseISOExports.parseISO(value);
     return isValidExports.isValid(parsedDate) ? parsedDate : null;
 }
+/**
+ * Analisa uma string no formato `yyyy-MM-dd` em `Date`.
+ *
+ * Realiza validação estrita para evitar rollover de dias e zera horas.
+ *
+ * @param {string} value - String no formato `yyyy-MM-dd`.
+ * @returns {Date | null} Data normalizada (meia-noite) ou `null` quando inválida.
+ */
 function parseDate(value) {
     if (!isMatchExports.isMatch(value, 'yyyy-MM-dd')) {
         return null;
@@ -418,16 +819,209 @@ function parseDate(value) {
     parsedDate.setHours(0, 0, 0, 0);
     return parsedDate;
 }
+/**
+ * Serializa uma `Date` para o formato `yyyy-MM-dd`.
+ *
+ * @param {Date} value - Data a ser serializada.
+ * @returns {string} Representação no formato `yyyy-MM-dd`.
+ */
 function serializeDate(value) {
     return formatExports.format(value, 'yyyy-MM-dd');
 }
 
-const datetimePickerCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{box-sizing:border-box;display:block;margin-bottom:var(--spacing-scale-base);max-width:var(--br-datetime-picker-width, none);position:relative;width:100%}:host([mode=time]){max-width:var(--br-datetime-picker-time-width, var(--br-datetime-picker-width, none));width:100%}:host([mode=date]){max-width:var(--br-datetime-picker-date-width, var(--br-datetime-picker-width, none));width:100%}:host([mode=datetime]){max-width:var(--br-datetime-picker-datetime-width, var(--br-datetime-picker-width, none));width:100%}.br-datetime-picker{width:100%}.br-datetime-picker br-datetime-input,.br-datetime-picker br-card{display:block;width:100%}.br-datetime-picker br-card{font-size:var(--font-size-scale-base);animation:none}@media (prefers-reduced-motion: no-preference){.br-datetime-picker br-card{animation:datetime-panel-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}@keyframes datetime-panel-open{from{opacity:0}to{opacity:1}}`;
+const VALID_WEEK_START_DAYS = [0, 1, 2, 3, 4, 5, 6];
+const INITIAL_MOMENT_DATE_FORMATS = ['dd/MM/yyyy HH:mm', 'dd/MM/yyyy', 'yyyy-MM-dd HH:mm', 'yyyy-MM-dd'];
+/**
+ * Tenta analisar uma string que representa um momento inicial aceitável pelo componente.
+ *
+ * Suporta formatos ISO e padrões definidos em `INITIAL_MOMENT_DATE_FORMATS`.
+ * Retorna `null` quando a string não representa uma data válida.
+ *
+ * @param {string} value - String contendo a data/hora a ser analisada.
+ * @returns {Date | null} Date normalizada quando a string é válida, ou `null` caso contrário.
+ */
+function parseInitialMomentString(value) {
+    const trimmedValue = value.trim();
+    if (trimmedValue === '') {
+        return null;
+    }
+    const isoDate = parseISOExports.parseISO(trimmedValue);
+    if (isValidExports.isValid(isoDate)) {
+        return isoDate;
+    }
+    for (const formatPattern of INITIAL_MOMENT_DATE_FORMATS) {
+        const parsedDate = parseExports.parse(trimmedValue, formatPattern, new Date());
+        if (isValidExports.isValid(parsedDate)) {
+            return parsedDate;
+        }
+    }
+    return null;
+}
+/**
+ * Normaliza um candidato a data em um objeto `Date` válido.
+ *
+ * Aceita instâncias de `Date` e strings (repassadas a `parseInitialMomentString`).
+ * Retorna `null` quando o candidato não representa uma data válida.
+ *
+ * @param {unknown} value - Valor recebido via prop (pode ser `Date`, `string` ou outro).
+ * @returns {Date | null} `Date` quando válido ou `null` quando inválido.
+ */
+function normalizeDateCandidate(value) {
+    if (value instanceof Date) {
+        if (!Number.isNaN(value.getTime())) {
+            return new Date(value);
+        }
+        return null;
+    }
+    if (typeof value === 'string') {
+        return parseInitialMomentString(value);
+    }
+    return null;
+}
+/**
+ * Divide uma string de datas desabilitadas em tokens individuais.
+ *
+ * A string pode conter várias datas separadas por espaços; tokens vazios são
+ * descartados.
+ *
+ * @param {string} value - String contendo uma ou mais datas separadas por espaço.
+ * @returns {string[]} Array de tokens não vazios representando cada data individual.
+ */
+function tokenizeDisabledDatesString(value) {
+    return value
+        .trim()
+        .split(/\s+/)
+        .filter((token) => token.length > 0);
+}
+/**
+ * Verifica se o valor informado corresponde a um modo suportado pelo componente.
+ *
+ * @param {string} value - Valor recebido via prop ou atributo.
+ * @returns {boolean} `true` quando o valor pertence ao conjunto aceito de modos.
+ */
+function isValidDatetimePickerMode(value) {
+    return Object.values(DATETIME_PICKER_MODE).includes(value);
+}
+/**
+ * Normaliza o modo informado e aplica o valor padrão quando necessário.
+ *
+ * @param {string} value - Valor bruto recebido do consumidor do componente.
+ * @returns {DatetimePickerMode} O modo válido correspondente, ou o valor padrão quando o input for inválido.
+ */
+function normalizeDatetimePickerMode(value) {
+    if (isValidDatetimePickerMode(value))
+        return value;
+    warnInvalidPropValue('br-datetime-picker', 'mode', value, DATETIME_PICKER_MODE.DEFAULT);
+    return DATETIME_PICKER_MODE.DEFAULT;
+}
+/**
+ * Verifica se o valor representa um modo de seleção suportado.
+ *
+ * @param {string} value - Valor bruto recebido via prop.
+ * @returns {boolean} `true` quando o valor é `'single'` ou `'range'`.
+ */
+function isValidDatetimePickerSelectionMode(value) {
+    return value === 'single' || value === 'range';
+}
+/**
+ * Normaliza o modo de seleção informado e aplica o valor padrão quando necessário.
+ *
+ * @param {string} value - Valor bruto recebido do consumidor do componente.
+ * @returns {DatetimePickerSelectionMode} O modo de seleção válido correspondente, ou `'single'` quando o input for inválido.
+ */
+function normalizeDatetimePickerSelectionMode(value) {
+    if (isValidDatetimePickerSelectionMode(value))
+        return value;
+    warnInvalidPropValue('br-datetime-picker', 'selectionMode', value, 'single');
+    return 'single';
+}
+/**
+ * Normaliza a seleção inicial para um valor aplicável pelo componente.
+ *
+ * @param {unknown} value - Valor bruto recebido via prop.
+ * @returns {'now' | Date | null} `'now'`, `Date` normalizada ou `null` quando inválido.
+ */
+function normalizeDatetimePickerInitialMoment(value) {
+    if (value === null)
+        return null;
+    if (value === 'now')
+        return 'now';
+    const normalizedDate = normalizeDateCandidate(value);
+    if (normalizedDate !== null) {
+        return normalizedDate;
+    }
+    warnInvalidPropValue('br-datetime-picker', 'initialMoment', value, 'null');
+    return null;
+}
+/**
+ * Normaliza a lista de datas desabilitadas para uma coleção de `Date` válidas.
+ *
+ * @param {unknown} value - Valor bruto recebido via prop.
+ * @returns {Date[]} Lista normalizada de datas; retorna array vazio quando inválido.
+ */
+function normalizeDatetimePickerDisabledDates(value) {
+    if (value === null) {
+        return [];
+    }
+    if (typeof value === 'string') {
+        const tokens = tokenizeDisabledDatesString(value);
+        if (tokens.length === 0) {
+            warnInvalidPropValue('br-datetime-picker', 'disabledDates', value, '[]');
+            return [];
+        }
+        const normalizedDates = tokens
+            .map((dateCandidate) => normalizeDateCandidate(dateCandidate))
+            .filter((dateCandidate) => dateCandidate !== null);
+        if (normalizedDates.length !== tokens.length) {
+            warnInvalidPropValue('br-datetime-picker', 'disabledDates', value, '[]');
+        }
+        return normalizedDates;
+    }
+    if (!Array.isArray(value)) {
+        warnInvalidPropValue('br-datetime-picker', 'disabledDates', value, '[]');
+        return [];
+    }
+    const normalizedDates = value
+        .map((dateCandidate) => normalizeDateCandidate(dateCandidate))
+        .filter((dateCandidate) => dateCandidate !== null);
+    if (normalizedDates.length !== value.length) {
+        warnInvalidPropValue('br-datetime-picker', 'disabledDates', value, '[]');
+    }
+    return normalizedDates;
+}
+/**
+ * Verifica se o valor informado representa um índice válido de início da semana.
+ *
+ * @param {number} value - Valor bruto recebido via prop.
+ * @returns {boolean} `true` quando o valor está entre `0` e `6`.
+ */
+function isValidDatetimePickerWeekStartsOn(value) {
+    return VALID_WEEK_START_DAYS.includes(value);
+}
+/**
+ * Normaliza o índice de início da semana e aplica `0` quando o valor é inválido.
+ *
+ * @param {unknown} value - Valor bruto recebido do consumidor do componente.
+ * @returns {DatetimePickerWeekDayIndex} Índice normalizado para o primeiro dia da semana.
+ */
+function normalizeDatetimePickerWeekStartsOn(value) {
+    const numericValue = typeof value === 'string' ? Number(value) : value;
+    if (typeof numericValue === 'number' &&
+        Number.isInteger(numericValue) &&
+        isValidDatetimePickerWeekStartsOn(numericValue)) {
+        return numericValue;
+    }
+    warnInvalidPropValue('br-datetime-picker', 'weekStartsOn', String(value), '0');
+    return 0;
+}
+
+const datetimePickerCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{box-sizing:border-box;display:block;margin-bottom:var(--spacing-scale-base);max-width:var(--br-datetime-picker-width, none);position:relative;width:100%}:host([mode=time]){max-width:var(--br-datetime-picker-time-width, var(--br-datetime-picker-width, none));width:100%}:host([mode=time][selection-mode=range]){width:var(--br-datetime-picker-time-range-width, 304px)}:host([mode=date]){max-width:var(--br-datetime-picker-date-width, var(--br-datetime-picker-width, none));width:100%}:host([mode=datetime]){max-width:var(--br-datetime-picker-datetime-width, var(--br-datetime-picker-width, none));width:100%}:host([mode=datetime][selection-mode=range]){width:var(--br-datetime-picker-datetime-range-width, 320px)}.br-datetime-picker{width:100%}.br-datetime-picker br-datetime-input,.br-datetime-picker br-card{display:block;width:100%}.br-datetime-picker br-card{font-size:var(--font-size-scale-base);animation:none}@media (prefers-reduced-motion: no-preference){.br-datetime-picker br-card{animation:datetime-panel-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}@keyframes datetime-panel-open{from{opacity:0}to{opacity:1}}.range-time-pickers{align-items:center;box-sizing:border-box;display:flex;gap:var(--spacing-scale-half, 4px);justify-content:center;margin-inline:auto;max-width:304px;padding:0;width:100%}.range-time-picker{align-items:center;display:flex;flex:0 0 144px;flex-direction:column;min-width:0}.range-time-label{font-size:var(--font-size-scale-down-01, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);margin-bottom:var(--spacing-scale-base, 8px)}.range-time-separator{align-self:center;color:var(--gray-70);flex:0 0 auto;font-size:var(--font-size-scale-up-01, 1.2rem);font-weight:var(--font-weight-semi-bold, 600);margin-top:calc(var(--font-size-scale-down-01, 0.875rem) + var(--spacing-scale-base, 8px))}.br-datetime-picker br-date-picker{margin-inline:auto}:host([selection-mode=range]) br-card{text-align:initial}`;
 
 const DatetimePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dateStateChange = createEvent(this, "dateStateChange", 7);
+        this.brDatetimePickerChange = createEvent(this, "brDatetimePickerChange", 7);
         this.valueChange = createEvent(this, "valueChange", 7);
         this.brDatetimePickerValidationChange = createEvent(this, "brDatetimePickerValidationChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
@@ -438,188 +1032,334 @@ const DatetimePicker = class {
             hostRef.$hostElement$["s-ei"] = this.elementInternals;
         }
         /**
-         * Controla se o conteúdo do picker está visível.
-         */
-        this.isPickerOpen = false;
-        this.formDisabled = false;
-        this.hasFeedbackSlot = false;
-        this.customValidationMessage = '';
-        this.validatorMessage = null;
-        this.isValidating = false;
-        this.feedbackId = generateUniqueId('br-datetime-picker-feedback');
-        /** Lista normalizada de datas indisponíveis para seleção. */
-        this.normalizedDisabledDates = [];
-        /** Data final selecionada no modo de intervalo. */
-        this.rangeEnd = null;
-        /** Data inicial selecionada no modo de intervalo. */
-        this.rangeStart = null;
-        /**
-         * Mantém a data de referência que orienta a navegação visual do calendário.
-         */
-        this.referenceDate = new Date();
-        /**
-         * Define o modo de seleção exibido pelo componente: data, horário ou ambos.
+         * Modo exibido pelo componente.
          *
-         * Valores aceitos: `date`, `time` ou `datetime`.
-         * Valores inválidos são corrigidos automaticamente para o valor padrão,
-         * mantendo o atributo refletido sempre consistente com o modo exibido.
+         * Valores: `date` | `time` | `datetime`.
+         * Valores inválidos são normalizados para o padrão.
          *
          * @default 'datetime'
          */
         this.mode = DATETIME_PICKER_MODE.DEFAULT;
         /**
-         * Define o locale usado pelos subcomponentes para formatar datas e rótulos.
+         * Locale usado para formatação e rótulos.
          *
          * @default 'pt-BR'
          */
         this.locale = DATETIME_PICKER_LOCALE.DEFAULT;
         /**
-         * Define o placeholder exibido no campo de entrada do datetime picker.
+         * Texto placeholder exibido no input.
          *
          * @default ''
          */
         this.placeholder = '';
-        /** Nome do campo para submissão em formulários nativos. */
+        /**
+         * Nome do campo para submissão em formulários nativos.
+         *
+         * @default ''
+         */
         this.name = '';
-        /** Indica se o campo deve ter valor antes do envio do formulário. */
+        /**
+         * Indica se o campo é requerido para submissão do formulário.
+         *
+         * @default false
+         */
         this.required = false;
         /**
-         * Menor data/horário aceito, interpretado conforme `mode`. Valores inválidos são ignorados.
-         * Aceita texto no atributo HTML ou uma instância de `Date` por property binding.
+         * Menor data/hora aceito (Date | string | null).
          *
-         * @example
-         * ```html
-         * <br-datetime-picker mode="date" min="2026-01-01"></br-datetime-picker>
-         * ```
+         * @default null
          */
         this.min = null;
         /**
-         * Maior data/horário aceito, interpretado conforme `mode`. Valores inválidos são ignorados.
-         * Aceita texto no atributo HTML ou uma instância de `Date` por property binding.
+         * Maior data/hora aceito (Date | string | null).
          *
-         * @example
-         * ```html
-         * <br-datetime-picker mode="date" max="2026-12-31"></br-datetime-picker>
-         * ```
+         * @default null
          */
         this.max = null;
         /**
-         * Define o tipo de seleção de datas para o calendário: única ou intervalo.
+         * Tipo de seleção: `single` ou `range`.
          *
-         * `range` só funciona em conjunto com `mode="date"`.
-         * Se `selectionMode="range"` for informado, o componente ajusta automaticamente
-         * `mode` para `date`. Se `mode` mudar para `time` ou `datetime`, o componente
-         * normaliza `selectionMode` para `single` quando necessário.
-         * Valores inválidos usam `single`.
+         * @default 'single'
          */
         this.selectionMode = 'single';
         /**
-         * Define o dia inicial da semana exibida no calendário.
-         *
-         * Valores suportados: 0 (domingo) a 6 (sábado).
+         * Dia inicial da semana exibido no calendário (0 = Dom, 6 = Sáb).
          *
          * @default 0
          */
         this.weekStartsOn = 0;
         /**
-         * Define a seleção inicial do componente.
-         *
-         * Aceita:
-         * - `'now'`: seleciona o momento atual.
-         * - `Date` ou `string`: seleciona uma data arbitrária.
-         * - `null`: inicia sem seleção.
-         *
-         * Reativo em runtime: mudanças na prop atualizam estado e subcomponentes.
+         * Valor inicial da seleção: `'now' | Date | string | null`.
          *
          * @default null
-         * @example
-         * ```html
-         * <br-datetime-picker initial-moment="now"></br-datetime-picker>
-         * ```
          */
         this.initialMoment = null;
         /**
-         * Instância de `Date` selecionada pelo usuário no modo simples.
-         * Pode ser controlada por property binding e é atualizada pelo evento `valueChange`.
-         * Para formulários e atributos textuais, use `serializedValue`.
+         * Valor selecionado pelo usuário (Date | null).
+         *
+         * Pode ser controlado externamente e é refletido internamente.
          *
-         * @example
-         * ```js
-         * const picker = document.querySelector('br-datetime-picker');
-         * picker.value = new Date(2026, 8, 7, 14, 30);
-         * ```
+         * @default null
          */
         this.value = null;
         /**
          * Desabilita toda a interação do componente.
          *
-         * Quando `true`, impede abrir o picker, alterar valores e navegar entre datas/horários.
-         *
          * @default false
          */
         this.disabled = false;
         /**
-         * Define um conjunto de datas indisponíveis para seleção.
+         * Datas indisponíveis para seleção. Aceita `Date[]`, `string` ou `null`.
          *
-         * Aceita uma lista de `Date` e/ou strings analisáveis, ou uma string com datas
-         * separadas por espaço em branco. Datas inválidas são ignoradas com warning.
-         * A comparação considera apenas o dia (ano/mês/dia), ignorando hora.
+         * Datas inválidas são ignoradas. A comparação considera apenas o dia.
          *
          * @default null
-         * @example
-         * ```html
-         * <br-datetime-picker mode="date" disabled-dates="2026-09-07 2026-09-08"></br-datetime-picker>
-         * ```
-         * @example
-         * ```js
-         * const picker = document.querySelector('br-datetime-picker');
-         * picker.disabledDates = [new Date(2026, 8, 7), '2026-09-08'];
-         * ```
          */
         this.disabledDates = null;
         /**
-         * Define se o calendário deve manter um número fixo de linhas (6 semanas = 42 dias)
-         * ou variar conforme o mês.
-         *
-         * Quando `true`, o calendário sempre exibe 6 semanas completas.
-         * Quando `false`, o calendário adapta-se ao mês, exibindo apenas as semanas necessárias.
+         * Mantém número fixo de linhas no calendário (6 semanas) quando `true`.
          *
          * @default false
          */
         this.fixedRowCount = false;
-        /** Snapshot da seleção inicial usada para restaurar em reset de formulário. */
+        /**
+         * Controla se o conteúdo do picker está visível.
+         *
+         * @internal Estado reativo interno; não usar externamente.
+         */
+        this.isPickerOpen = false;
+        /**
+         * Indica se o formulário associado desabilitou o componente.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.formDisabled = false;
+        /**
+         * Indica se existe slot `feedback` presente no host.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.hasFeedbackSlot = false;
+        /**
+         * Mensagem de validação customizada definida por `setCustomValidity`.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.customValidationMessage = '';
+        /**
+         * Mensagem retornada pelo validator customizado, se houver.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.validatorMessage = null;
+        /**
+         * Mensagem textual de validação proveniente do input interno.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.inputValidationMessage = '';
+        /**
+         * Indica que o usuário está editando o texto do input e que a validação
+         * textual está pendente (mensagem escondida até commit/blur).
+         *
+         * @internal
+         */
+        this.inputValidationPending = false;
+        /**
+         * Indicador de execução do validator assíncrono.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.isValidating = false;
+        /**
+         * Lista normalizada de datas indisponíveis para seleção.
+         *
+         * @internal Mantida em formato `Date[]` para uso interno pelo calendário.
+         */
+        this.normalizedDisabledDates = [];
+        /**
+         * Data final selecionada no modo de intervalo.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.rangeEnd = null;
+        /**
+         * Data inicial selecionada no modo de intervalo.
+         *
+         * @internal Estado reativo interno.
+         */
+        this.rangeStart = null;
+        /**
+         * Data de referência usada para navegação visual (mês/semana exibidos).
+         *
+         * @internal Controle de navegação do calendário.
+         */
+        this.referenceDate = new Date();
+        /**
+         * ID único do contêiner de feedback interno.
+         * Gerado por `Helpers.generateUniqueId` no momento da criação da instância
+         * e usado para associar mensagens de validação ao input interno.
+         *
+         * @internal
+         */
+        this.feedbackId = Helpers.generateUniqueId('br-datetime-picker-feedback');
+        /**
+         * Snapshot da seleção inicial usada para restaurar em reset de formulário.
+         * Mantém uma cópia imutável do valor original para `formResetCallback`.
+         *
+         * @internal
+         */
         this.initialFormValue = null;
+        /**
+         * Contador monótono usado para invalidar execuções assíncronas de validação.
+         * Incrementado antes de cada execução; resultados com `runId` diferente são ignorados.
+         *
+         * @internal
+         */
         this.validationRunId = 0;
+        /**
+         * Indica se o componente já completou o ciclo `componentDidLoad`.
+         * Evita executar lógica de inicialização mais de uma vez.
+         *
+         * @internal
+         */
         this.isInitialized = false;
+        /**
+         * Flag para evitar loops de sincronização entre `value`, `valueAsDate` e `serializedValue`.
+         * Setada temporariamente durante operações programáticas de sincronização.
+         *
+         * @internal
+         */
         this.syncingCanonicalValues = false;
-        /** Mapeia cada modo para a função responsável por renderizar seu conteúdo. */
+        /**
+         * Flag que sinaliza atualizações internas em `rangeValue`.
+         * Usada para distinguir atribuições programáticas de alterações externas.
+         *
+         * @internal
+         */
+        this.syncingRangeValueInternally = false;
+        /**
+         * Mapeia cada modo para a função responsável por renderizar seu conteúdo.
+         * Facilita seleção de renderer sem condicionais espalhadas pelo código.
+         *
+         * @internal
+         */
         this.modeRendererMap = {
             [DATETIME_PICKER_MODE.DATE]: () => this.renderDatePicker(),
-            [DATETIME_PICKER_MODE.TIME]: () => this.renderTimePicker(),
+            [DATETIME_PICKER_MODE.TIME]: () => this.selectionMode === 'range' ? this.renderRangeTimePickers() : this.renderTimePicker(),
             [DATETIME_PICKER_MODE.DATETIME]: () => this.renderDateTimePicker(),
         };
         /**
-         * Sincroniza o estado local com a emissão dos subcomponentes de data e horário.
+         * Indica se o listener global de clique fora do componente está anexado.
+         * Evita anexações/remoções redundantes do mesmo handler.
          *
-         * @param event - Evento com a data de referência e o valor selecionado.
+         * @internal
+         */
+        this.outsideClickListenerAttached = false;
+        /**
+         * Handler disparado por `br-datetime-input` para propagar mensagens de
+         * validação do input interno para o estado do componente.
+         *
+         * @param event CustomEvent<{ valid: boolean; message: string }> — detalhe com `valid` e `message`.
+         * @returns void
+         */
+        this.handleInputValidationChange = (event) => {
+            event.stopPropagation();
+            const valid = event.detail.valid;
+            if (valid === null) {
+                // usuário está editando: escondemos a mensagem visual, mas mantemos
+                // o estado de validade indefinido até commit/blur/enter
+                this.inputValidationMessage = '';
+                this.inputValidationPending = true;
+            }
+            else {
+                this.inputValidationMessage = valid ? '' : event.detail.message;
+                this.inputValidationPending = false;
+            }
+            this.syncFormValidity();
+        };
+        /**
+         * Handler principal que consolida eventos de `br-date-picker` / `br-time-picker`.
+         * Contém lógica de proteção contra valores desabilitados, navegação e emissão
+         * de eventos públicos apropriados.
+         *
+         * @param event CustomEvent<DatetimePickerDateState> — detalhe com `referenceDate`, `value` e `range`.
          */
         this.handleDateStateChange = (event) => {
-            // Evita que o evento interno dos subcomponentes vaze para fora do host.
             event.stopPropagation();
             if (this.isDisabled()) {
                 return;
             }
+            const origin = event.detail.origin;
+            if (origin !== 'BR-DATETIME-INPUT') {
+                this.inputValidationMessage = '';
+            }
             const { referenceDate, value, range } = event.detail;
+            if (this.isRangeNavigationState(value, range)) {
+                this.referenceDate = toDateExports.toDate(referenceDate);
+                this.updateFormInternals();
+                return;
+            }
             const selectedDate = this.resolveSelectedDateFromEvent(range, value);
             if (selectedDate !== null && this.isDateDisabled(selectedDate)) {
                 return;
             }
             this.referenceDate = toDateExports.toDate(referenceDate);
             const shouldEmitPublicEvent = this.resolvePublicEventEmissionForRange(range);
-            this.setComponentValue(value === null ? null : toDateExports.toDate(value), shouldEmitPublicEvent && this.isInitialized);
+            const nextValue = value === null ? null : toDateExports.toDate(value);
+            if (this.sameDate(this.value, nextValue)) {
+                this.handleUnchangedDateState(range, shouldEmitPublicEvent);
+                return;
+            }
+            this.setComponentValue(nextValue, shouldEmitPublicEvent && this.isInitialized);
+            this.emitPendingRangeChange(range, shouldEmitPublicEvent);
         };
+        /**
+         * Atualiza somente o horário de um dos limites do intervalo.
+         *
+         * @param boundary 'start' | 'end' — qual limite será atualizado.
+         * @param event CustomEvent<DatetimePickerDateState> — detalhe com novo `value`.
+         */
+        this.handleRangeTimeStateChange = (boundary, event) => {
+            event.stopPropagation();
+            if (this.isDisabled() || event.detail.value === null)
+                return;
+            const displayedStart = this.cloneDate(this.rangeStart ?? this.referenceDate);
+            const displayedEnd = this.cloneDate(this.rangeEnd ?? this.referenceDate);
+            if (this.rangeStart === null)
+                this.rangeStart = displayedStart;
+            if (this.rangeEnd === null)
+                this.rangeEnd = displayedEnd;
+            const selected = toDateExports.toDate(event.detail.value);
+            const current = boundary === 'start' ? this.rangeStart : this.rangeEnd;
+            const base = current ?? this.referenceDate;
+            const next = setExports.set(base, {
+                hours: selected.getHours(),
+                minutes: selected.getMinutes(),
+                seconds: 0,
+                milliseconds: 0,
+            });
+            if (boundary === 'start')
+                this.rangeStart = next;
+            else
+                this.rangeEnd = next;
+            const nextComponentValue = this.rangeEnd ?? this.rangeStart;
+            if (!this.sameDate(this.value, nextComponentValue)) {
+                this.value = this.cloneDate(nextComponentValue);
+            }
+            this.syncCanonicalValues();
+            if (this.isInitialized) {
+                this.emitDateStateChange();
+                void this.validate();
+            }
+            this.updateFormInternals();
+        };
+        this.handleRangeStartTimeStateChange = (event) => this.handleRangeTimeStateChange('start', event);
+        this.handleRangeEndTimeStateChange = (event) => this.handleRangeTimeStateChange('end', event);
         /**
          * Alterna visibilidade do picker quando o input solicita.
+         *
+         * @param event Event — evento de toggle vindo do input.
          */
         this.handleTogglePicker = (event) => {
             if (this.isDisabled()) {
@@ -629,11 +1369,14 @@ const DatetimePicker = class {
             const willOpen = !this.isPickerOpen;
             if (willOpen) {
                 this.referenceDate = this.value === null ? toDateExports.toDate(new Date()) : toDateExports.toDate(this.value);
+                this.initializeTimeRangeBoundaries();
             }
             this.isPickerOpen = willOpen;
         };
         /**
          * Fecha o picker quando o clique acontece fora do host.
+         *
+         * @param event MouseEvent — clique ocorrido no documento.
          */
         this.handleOutsideClick = (event) => {
             const eventPath = event.composedPath();
@@ -642,7 +1385,6 @@ const DatetimePicker = class {
             }
             this.isPickerOpen = false;
         };
-        this.outsideClickListenerAttached = false;
         /**
          * Fecha o picker ao pressionar Escape, devolvendo o foco ao input interno.
          *
@@ -653,42 +1395,17 @@ const DatetimePicker = class {
                 return;
             event.stopPropagation();
             this.isPickerOpen = false;
-            void this.focusInput();
+            this.getNativeInputElement()?.focus();
         };
     }
-    formDisabledCallback(disabled) {
-        this.formDisabled = disabled;
-    }
-    /** API nativa de reset de form-associated custom elements. */
-    formResetCallback() {
-        this.customValidationMessage = '';
-        this.validatorMessage = null;
-        this.validationRunId++;
-        this.restoreSelection(this.initialFormValue);
-    }
-    /** API nativa de restauração de estado (histórico/autofill) do formulário. */
-    formStateRestoreCallback(state) {
-        if (typeof state !== 'string') {
-            this.restoreSelection(null);
-            return;
-        }
-        if (this.isRangeRestoreMode()) {
-            this.restoreRangeStateFromSerialized(state);
-            return;
-        }
-        this.restoreSingleStateFromSerialized(state);
-    }
     /**
      * Revalida o modo sempre que a prop mudar.
      *
-     * @param newValue - Valor recebido via atributo/prop.
+     * @param {string} newValue - Valor recebido via atributo/prop.
      */
     handleModeChange(newValue) {
         this.ensureValidMode(newValue);
-        if (this.selectionMode === 'range' && this.mode !== DATETIME_PICKER_MODE.DATE) {
-            this.selectionMode = 'single';
-            return;
-        }
+        this.initializeTimeRangeBoundaries();
         this.updateFormInternals();
     }
     /** Revalida o estado do formulário quando required mudar. */
@@ -705,14 +1422,11 @@ const DatetimePicker = class {
     /** Reage a mudanças no modo de seleção e limpa intervalo quando necessário. */
     handleSelectionModeChange(newValue) {
         this.ensureValidSelectionMode(newValue);
-        if (this.selectionMode === 'range' && this.mode !== DATETIME_PICKER_MODE.DATE) {
-            this.mode = DATETIME_PICKER_MODE.DATE;
-            return;
-        }
         if (this.selectionMode === 'single') {
             this.clearRangeState();
             return;
         }
+        this.initializeTimeRangeBoundaries();
         this.updateFormInternals();
     }
     /** Revalida o dia inicial da semana sempre que a prop mudar. */
@@ -722,13 +1436,16 @@ const DatetimePicker = class {
     /**
      * Aplica ou limpa a seleção da data atual conforme o novo valor da prop.
      *
-     * @param newValue - Novo estado da prop.
+     * @param {DatetimePickerInitialMoment} newValue - Novo estado da prop.
      */
     handleInitialMomentChange(newValue) {
         this.applyInitialMoment(newValue, this.isInitialized);
         this.initialFormValue = this.cloneDate(this.value);
     }
     /** Sincroniza alterações externas do valor com o estado visual e o formulário nativo. */
+    /**
+     * @param {Date | null} newValue - Novo valor recebido via prop.
+     */
     handleValueChange(newValue) {
         const normalizedValue = newValue instanceof Date && !Number.isNaN(newValue.getTime()) ? toDateExports.toDate(newValue) : null;
         if (newValue !== null && normalizedValue === null) {
@@ -773,45 +1490,33 @@ const DatetimePicker = class {
         this.syncDisabledDates(newValue);
     }
     handleRangeValueChange(newValue) {
-        if (!newValue || this.selectionMode !== 'range')
+        if (this.syncingRangeValueInternally || !newValue || this.selectionMode !== 'range')
             return;
-        if (!isValidDatetimePickerDateRange(newValue)) {
-            reportInvalidPropValue(this.el, 'rangeValue', newValue, 'Informe um objeto com `start` e `end` como Date válido ou null.', 'Mantendo o último intervalo efetivo.');
-            return;
-        }
         this.rangeStart = this.cloneDate(newValue.start);
         this.rangeEnd = this.cloneDate(newValue.end);
-        const nextValue = newValue.end ?? newValue.start;
-        this.referenceDate = nextValue ? toDateExports.toDate(nextValue) : this.referenceDate;
-        this.setComponentValue(nextValue);
+        const nextValue = this.rangeEnd ?? this.rangeStart;
+        this.setComponentValue(nextValue, false);
     }
-    /** Registra o listener global somente enquanto o picker está aberto. */
     connectedCallback() {
         if (this.isPickerOpen)
             this.attachOutsideClickListener();
     }
-    /** Remove o listener global para evitar vazamento de eventos ao desmontar. */
-    disconnectedCallback() {
-        this.detachOutsideClickListener();
-    }
-    /**
-     * Normaliza o modo antes da primeira renderização e aplica a data atual quando solicitado.
-     */
     componentWillLoad() {
-        // A inicialização dos defaults sincroniza os espelhos; preserve as entradas do consumidor.
-        const { serializedValue, valueAsDate } = this;
+        const initialSerializedValue = this.serializedValue;
+        const initialValueAsDate = this.valueAsDate;
         this.referenceDate = resolveSsrLocalDate(this.el, this.referenceDate);
         this.initializeMode();
         this.initializeSelectionMode();
         this.initializeWeekStartsOn();
         this.initializeDisabledDates();
         this.initializeDefaultValue();
-        if (serializedValue !== undefined) {
-            this.restoreSerializedValue(serializedValue);
+        if (initialSerializedValue !== undefined) {
+            this.restoreSerializedValue(initialSerializedValue);
         }
-        else if (valueAsDate !== undefined) {
-            this.handleValueAsDateChange(valueAsDate);
+        else if (initialValueAsDate !== undefined) {
+            this.handleValueAsDateChange(initialValueAsDate);
         }
+        this.initializeTimeRangeBoundaries(true);
         this.initialFormValue = this.cloneDate(this.value);
         this.syncCanonicalValues();
         this.updateFormInternals();
@@ -820,18 +1525,58 @@ const DatetimePicker = class {
         this.isInitialized = true;
         this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
     }
+    disconnectedCallback() {
+        this.detachOutsideClickListener();
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    /** Restaura o estado do componente quando o formulário é restaurado. */
+    formResetCallback() {
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.inputValidationMessage = '';
+        this.validationRunId++;
+        this.restoreSelection(this.initialFormValue);
+    }
     /**
-     * Define programaticamente as datas desabilitadas por meio de array.
+     * Restaura o estado do formulário (autofill / histórico).
      *
-     * Útil quando o componente é usado via HTML e o consumidor precisa enviar
-     * uma lista tipada em runtime.
+     * @param {string | File | FormData | null} state Estado serializado fornecido pelo navegador.
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string') {
+            this.restoreSelection(null);
+            return;
+        }
+        if (this.isRangeRestoreMode()) {
+            this.restoreRangeStateFromSerialized(state);
+            return;
+        }
+        this.restoreSingleStateFromSerialized(state);
+    }
+    /**
+     * Define programaticamente as datas desabilitadas.
      *
-     * @param dates - Lista de datas (Date|string) a bloquear.
+     * Use quando scripts externos precisam fornecer uma lista tipada de
+     * datas a bloquear no calendário. Substitui a prop `disabledDates` para
+     * atualizações imperativas.
+     *
+     * @param dates Lista de datas (`Date` | `string`) a bloquear, ou `null` para limpar.
+     * @returns Promise<void> — resolve quando a atualização interna for aplicada.
      */
     async setDisabledDates(dates) {
         this.syncDisabledDates(dates);
     }
-    /** Define o valor atual de forma imperativa aceitando Date, string serializada ou null. */
+    /**
+     * Define o valor do componente de forma imperativa.
+     *
+     * Aceita `Date`, string compatível com o `mode`, ou `null` para limpar a seleção.
+     * Validação de datas desabilitadas é aplicada antes da atribuição.
+     *
+     * @param value Date | string | null — valor a aplicar; `null` limpa a seleção.
+     * @returns Promise<void> — resolve quando o componente aplicar e sincronizar o valor.
+     */
     async setValue(value) {
         if (this.isDisabled()) {
             return;
@@ -848,18 +1593,32 @@ const DatetimePicker = class {
         this.referenceDate = nextValue === null ? toDateExports.toDate(new Date()) : toDateExports.toDate(nextValue);
         this.setComponentValue(nextValue);
     }
-    /** Retorna uma cópia do valor selecionado atualmente. */
+    /**
+     * Retorna uma cópia do valor selecionado atualmente.
+     *
+     * @returns Promise<Date | null> — cópia imutável do `value` atual, ou `null`.
+     */
     async getValue() {
         return this.cloneDate(this.value);
     }
-    /** Limpa valor e intervalo selecionados. */
+    /**
+     * Limpa valor e intervalo selecionados.
+     *
+     * Remove seleção atual e restaura a referência de navegação para a data atual.
+     *
+     * @returns Promise<void> — resolve após a limpeza e sincronização internas.
+     */
     async clear() {
         this.rangeStart = null;
         this.rangeEnd = null;
         this.referenceDate = toDateExports.toDate(new Date());
         this.setComponentValue(null);
     }
-    /** Abre o picker quando o componente estiver habilitado. */
+    /**
+     * Abre o picker quando o componente estiver habilitado.
+     *
+     * @returns Promise<void> — resolve quando o estado visual for atualizado.
+     */
     async open() {
         if (this.isDisabled()) {
             return;
@@ -867,11 +1626,19 @@ const DatetimePicker = class {
         this.referenceDate = this.value === null ? toDateExports.toDate(new Date()) : toDateExports.toDate(this.value);
         this.isPickerOpen = true;
     }
-    /** Fecha o picker. */
+    /**
+     * Fecha o picker.
+     *
+     * @returns Promise<void> — resolve após atualização do estado de visibilidade.
+     */
     async close() {
         this.isPickerOpen = false;
     }
-    /** Alterna o estado de abertura do picker. */
+    /**
+     * Alterna o estado de abertura do picker.
+     *
+     * @returns Promise<void> — resolve quando a transição de estado terminar.
+     */
     async toggle() {
         if (this.isPickerOpen) {
             await this.close();
@@ -879,20 +1646,32 @@ const DatetimePicker = class {
         }
         await this.open();
     }
-    /** Move o foco para o input nativo interno. */
+    /**
+     * Move o foco para o input nativo interno.
+     *
+     * @returns Promise<void> — resolve imediatamente após tentar focar o elemento.
+     */
     async focusInput() {
-        const input = this.datetimeInputElement ?? this.el.shadowRoot?.querySelector('br-datetime-input');
-        await input?.focusInput?.();
+        this.getNativeInputElement()?.focus();
     }
-    /** Define intervalo de datas de forma imperativa, forçando modo date e selectionMode range. */
+    /**
+     * Define um intervalo no modo atual e ativa `selectionMode="range"`.
+     *
+     * Valida datas contra bloqueios e sincroniza estado visual e de formulário.
+     * Em `datetime`, mantém os limites informados e sinaliza intervalo inválido
+     * quando o término precede o início, sem ajustar datas automaticamente.
+     *
+     * @param start Date | string | null — data inicial do intervalo.
+     * @param end Date | string | null — data final do intervalo.
+     * @returns Promise<void> — resolve quando o intervalo for aplicado e sincronizado.
+     */
     async setRange(start, end) {
         if (this.isDisabled()) {
             return;
         }
         this.selectionMode = 'range';
-        this.mode = DATETIME_PICKER_MODE.DATE;
-        const normalizedStart = this.parseMethodValue(start, DATETIME_PICKER_MODE.DATE);
-        const normalizedEnd = this.parseMethodValue(end, DATETIME_PICKER_MODE.DATE);
+        const normalizedStart = this.parseMethodValue(start, this.mode);
+        const normalizedEnd = this.parseMethodValue(end, this.mode);
         if ((normalizedStart !== null && this.isDateDisabled(normalizedStart)) ||
             (normalizedEnd !== null && this.isDateDisabled(normalizedEnd))) {
             this.clearRangeState();
@@ -900,17 +1679,18 @@ const DatetimePicker = class {
         }
         this.rangeStart = this.cloneDate(normalizedStart);
         this.rangeEnd = this.cloneDate(normalizedEnd);
-        const nextValue = normalizedEnd ?? normalizedStart;
+        const nextValue = this.rangeEnd ?? this.rangeStart;
         this.referenceDate = nextValue === null ? toDateExports.toDate(new Date()) : toDateExports.toDate(nextValue);
         this.setComponentValue(nextValue);
     }
     /**
      * Retorna o intervalo de datas selecionado quando em modo `selectionMode="range"`.
      *
-     * @returns Objeto com datas `start` e `end`, ou `null` se não estiver em modo range.
+     * @returns Promise<{ start: Date | null; end: Date | null } | null> — objeto com `start`/`end` ou `null` quando
+     * não estiver em modo `range`.
      */
     async getRange() {
-        if (this.selectionMode !== 'range' || this.mode !== DATETIME_PICKER_MODE.DATE) {
+        if (this.selectionMode !== 'range') {
             return null;
         }
         return {
@@ -921,29 +1701,52 @@ const DatetimePicker = class {
     /**
      * Consulta se o picker está atualmente aberto.
      *
-     * @returns `true` se o picker está visível, `false` caso contrário.
+     * @returns Promise<boolean> — `true` se o picker está visível, `false` caso contrário.
      */
     async isOpen() {
         return this.isPickerOpen;
     }
-    /** Restaura o estado inicial atualmente registrado para reset. */
+    /**
+     * Restaura o estado inicial atualmente registrado para reset.
+     *
+     * @returns Promise<void> — resolve quando a seleção inicial for restaurada.
+     */
     async resetToInitial() {
         this.restoreSelection(this.initialFormValue);
     }
-    /** Permite que consumidores acionem validação nativa do formulário via host. */
+    /**
+     * Permite que consumidores acionem validação nativa do formulário via host.
+     *
+     * @returns Promise<boolean> — resultado da Constraint Validation API para o host.
+     */
     async checkValidity() {
         return this.elementInternals.checkValidity();
     }
-    /** Permite exibir mensagens nativas de validação no host. */
+    /**
+     * Permite exibir mensagens nativas de validação no host.
+     *
+     * @returns Promise<boolean> — `true` se a mensagem foi exibida e o formulário é válido.
+     */
     async reportValidity() {
         return this.elementInternals.reportValidity();
     }
-    /** Define ou limpa uma mensagem de validade customizada. */
+    /**
+     * Define ou limpa uma mensagem de validade customizada.
+     *
+     * @param message string — mensagem de validação; string vazia remove a mensagem.
+     * @returns Promise<void> — resolve após sincronizar a validade no host.
+     */
     async setCustomValidity(message) {
         this.customValidationMessage = message;
         this.syncFormValidity();
     }
-    /** Executa o validator do picker e retorna se a seleção atual é válida. */
+    /**
+     * Executa o validator customizado (se houver) e valida o controle.
+     *
+     * Emite eventos de início/conclusão da validação e atualiza mensagens internas.
+     *
+     * @returns Promise<boolean> — `true` se a seleção for considerada válida.
+     */
     async validate() {
         const validator = resolveFormValidator(this.validator);
         if (!validator || this.isDisabled())
@@ -952,9 +1755,16 @@ const DatetimePicker = class {
         this.isValidating = true;
         this.validatorMessage = null;
         this.syncFormValidity();
-        this.brDatetimePickerValidationChange.emit({ validating: true, valid: null, message: null });
+        this.brDatetimePickerValidationChange.emit({
+            validating: true,
+            valid: null,
+            message: null,
+        });
         const value = this.selectionMode === 'range'
-            ? { start: this.cloneDate(this.rangeStart), end: this.cloneDate(this.rangeEnd) }
+            ? {
+                start: this.cloneDate(this.rangeStart),
+                end: this.cloneDate(this.rangeEnd),
+            }
             : this.cloneDate(this.value);
         const message = await runFormValidator(validator, value);
         if (runId !== this.validationRunId)
@@ -963,10 +1773,19 @@ const DatetimePicker = class {
         this.isValidating = false;
         this.syncFormValidity();
         const valid = message === null && (await this.checkValidity());
-        this.brDatetimePickerValidationChange.emit({ validating: false, valid, message });
+        this.brDatetimePickerValidationChange.emit({
+            validating: false,
+            valid,
+            message,
+        });
         return valid;
     }
-    /** Retorna um snapshot serializável da Constraint Validation API. */
+    /**
+     * Retorna um snapshot serializável da Constraint Validation API.
+     *
+     * @returns Promise<FormValidationState> — estado atual de validação do host,
+     * pronto para conversão e restauração via `formStateRestoreCallback`.
+     */
     async getValidationState() {
         return getFormValidationState(this.elementInternals);
     }
@@ -978,36 +1797,52 @@ const DatetimePicker = class {
     ensureValidSelectionMode(value) {
         this.selectionMode = normalizeDatetimePickerSelectionMode(value);
     }
-    /**
-     * Normaliza o modo de seleção logo na inicialização.
-     */
     initializeSelectionMode() {
         this.handleSelectionModeChange(this.selectionMode);
     }
-    /** Normaliza o dia inicial da semana logo na inicialização. */
     initializeWeekStartsOn() {
         this.handleWeekStartsOnChange(this.weekStartsOn);
     }
-    /** Valida o dia inicial da semana e corrige para padrão quando necessário. */
+    /**
+     * Valida o dia inicial da semana e corrige para padrão quando necessário.
+     *
+     * @param value unknown — valor recebido via prop/atributo a ser normalizado.
+     */
     ensureValidWeekStartsOn(value) {
         this.weekStartsOn = normalizeDatetimePickerWeekStartsOn(value);
     }
-    /**
-     * Limpa o estado do intervalo de datas ao mudar para modo single.
-     */
     clearRangeState() {
         this.rangeStart = null;
         this.rangeEnd = null;
         this.updateFormInternals();
     }
-    /** Indica quando o componente está operando em seleção de intervalo por data. */
+    /**
+     * Materializa os horários exibidos pelos dois timers como limites reais.
+     * Assim o range de horário já nasce completo, o input pode representá-lo na
+     * primeira renderização e nenhum timer depende da referência do outro.
+     */
+    initializeTimeRangeBoundaries(duringInitialization = false) {
+        if ((!this.isInitialized && !duringInitialization) ||
+            this.selectionMode !== 'range' ||
+            this.mode !== DATETIME_PICKER_MODE.TIME) {
+            return;
+        }
+        const fallback = this.cloneDate(this.value ?? this.referenceDate);
+        if (this.rangeStart === null)
+            this.rangeStart = this.cloneDate(fallback);
+        if (this.rangeEnd === null)
+            this.rangeEnd = this.cloneDate(fallback);
+        this.value = this.cloneDate(this.rangeEnd);
+    }
     isRangeDateSelectionMode() {
-        return this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE;
+        return this.selectionMode === 'range';
     }
     /**
-     * Resolve se o evento público deve ser emitido após um update vindo dos subcomponentes.
+     * Decide se um evento público deve ser emitido após atualização vinda de
+     * subcomponentes (calendário/relógio).
      *
-     * No modo range, o evento externo só é emitido no clique final (quando `end` é definido).
+     * @param range DatetimePickerDateRange | undefined — estado parcial do range vindo do subcomponente.
+     * @returns boolean — `true` quando o evento deve ser emitido externamente.
      */
     resolvePublicEventEmissionForRange(range) {
         if (!this.isRangeDateSelectionMode()) {
@@ -1020,13 +1855,63 @@ const DatetimePicker = class {
         this.setRangeState(range);
         return isFinalRangeClick;
     }
-    /** Resolve a data efetivamente selecionada no evento para validar bloqueio em single/range. */
+    /**
+     * Resolve a data efetivamente selecionada no evento para validações e bloqueios.
+     *
+     * @param range DatetimePickerDateRange | undefined — intervalo parcial (quando aplicável).
+     * @param value Date | null — valor principal vindo do subcomponente.
+     * @returns Date | null — data final a ser considerada para validação.
+     */
     resolveSelectedDateFromEvent(range, value) {
         if (!this.isRangeDateSelectionMode() || range === undefined) {
             return value;
         }
         return range.end ?? range.start ?? value;
     }
+    /**
+     * Identifica navegação visual que preserva integralmente o range selecionado.
+     *
+     * @param value Date | null — valor principal do evento.
+     * @param range DatetimePickerDateRange | undefined — range parcial do evento.
+     * @returns boolean — `true` quando a navegação não altera a seleção atual.
+     */
+    isRangeNavigationState(value, range) {
+        return (range !== undefined &&
+            this.sameDate(range.start, this.rangeStart) &&
+            this.sameDate(range.end, this.rangeEnd) &&
+            this.sameDate(value, this.value));
+    }
+    /**
+     * Consolida um evento cujo valor principal permaneceu inalterado.
+     *
+     * @param range DatetimePickerDateRange | undefined — estado parcial do range.
+     * @param shouldEmitPublicEvent boolean — indica se o evento público deve ser emitido.
+     */
+    handleUnchangedDateState(range, shouldEmitPublicEvent) {
+        this.syncCanonicalValues();
+        const shouldNotifyRange = this.isInitialized && this.isRangeDateSelectionMode() && range !== undefined;
+        if (shouldNotifyRange && shouldEmitPublicEvent) {
+            this.emitDateStateChange();
+            void this.validate();
+        }
+        else if (shouldNotifyRange) {
+            this.emitCanonicalChange(range);
+        }
+        this.updateFormInternals();
+    }
+    /**
+     * Emite a seleção parcial de range quando os eventos públicos foram adiados
+     * para evitar duplicidade com listeners legados.
+     *
+     * @param range DatetimePickerDateRange | undefined — snapshot parcial do range.
+     * @param shouldEmitPublicEvent boolean — se deve ser emitido publicamente.
+     */
+    emitPendingRangeChange(range, shouldEmitPublicEvent) {
+        if (shouldEmitPublicEvent || !this.isInitialized || !this.isRangeDateSelectionMode() || range === undefined) {
+            return;
+        }
+        this.emitCanonicalChange(range);
+    }
     attachOutsideClickListener() {
         if (this.outsideClickListenerAttached)
             return;
@@ -1039,15 +1924,9 @@ const DatetimePicker = class {
         document.removeEventListener('click', this.handleOutsideClick);
         this.outsideClickListenerAttached = false;
     }
-    /**
-     * Garante que o componente inicie com um modo suportado.
-     */
     initializeMode() {
         this.ensureValidMode(this.mode);
     }
-    /**
-     * Normaliza a coleção de datas desabilitadas na inicialização.
-     */
     initializeDisabledDates() {
         this.syncDisabledDates(this.disabledDates);
     }
@@ -1068,9 +1947,6 @@ const DatetimePicker = class {
             this.setComponentValue(null);
         }
     }
-    /**
-     * Aplica a seleção inicial configurada na prop.
-     */
     initializeDefaultValue() {
         if (this.value instanceof Date && !Number.isNaN(this.value.getTime())) {
             this.referenceDate = toDateExports.toDate(this.value);
@@ -1111,13 +1987,16 @@ const DatetimePicker = class {
         this.rangeEnd = null;
         this.setComponentValue(selectedDate, shouldEmitEvents);
     }
-    /** Indica se o estado serializado deve ser interpretado como intervalo. */
     isRangeRestoreMode() {
-        return this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE;
+        return this.selectionMode === 'range';
     }
-    /** Restaura estado de intervalo a partir do valor serializado do formulário. */
+    /**
+     * Restaura estado de intervalo a partir do valor serializado do formulário.
+     *
+     * @param serializedState string — valor serializado vindo do formulário.
+     */
     restoreRangeStateFromSerialized(serializedState) {
-        const restoredRange = parseDatetimePickerSerializedRange(serializedState);
+        const restoredRange = parseDatetimePickerSerializedRange(serializedState, this.mode, this.referenceDate);
         if (restoredRange === null) {
             this.restoreSelection(null);
             return;
@@ -1127,7 +2006,11 @@ const DatetimePicker = class {
         this.rangeEnd = end;
         this.restoreSelection(end);
     }
-    /** Restaura estado de seleção única a partir do valor serializado do formulário. */
+    /**
+     * Restaura estado de seleção única a partir do valor serializado do formulário.
+     *
+     * @param serializedState string — valor serializado vindo do formulário.
+     */
     restoreSingleStateFromSerialized(serializedState) {
         const restoredValue = parseDatetimePickerSerializedValue(serializedState, this.mode, this.referenceDate);
         if (restoredValue !== null && this.isDateDisabled(restoredValue)) {
@@ -1136,7 +2019,13 @@ const DatetimePicker = class {
         }
         this.restoreSelection(restoredValue);
     }
-    /** Resolve Date|null a partir de valores aceitos pelos métodos públicos. */
+    /**
+     * Converte entradas aceitas por métodos públicos em `Date | null`.
+     *
+     * @param value Date | string | null — valor bruto recebido pelo método público.
+     * @param mode DatetimePickerMode — modo atual para parsing de strings.
+     * @returns Date | null — representação normalizada ou `null` se inválida.
+     */
     parseMethodValue(value, mode) {
         if (value === null) {
             return null;
@@ -1146,7 +2035,11 @@ const DatetimePicker = class {
         }
         return parseDatetimePickerSerializedValue(value, mode, this.referenceDate);
     }
-    /** Aplica a ponte serializada usando os mesmos parsers já usados por restore de formulário. */
+    /**
+     * Aplica a ponte serializada usando os mesmos parsers já usados por restore de formulário.
+     *
+     * @param serializedValue string — valor serializado a ser restaurado.
+     */
     restoreSerializedValue(serializedValue) {
         if (this.isRangeRestoreMode()) {
             this.restoreRangeStateFromSerialized(serializedValue);
@@ -1165,7 +2058,11 @@ const DatetimePicker = class {
         this.valueAsDate = nextValueAsDate;
         this.syncingCanonicalValues = false;
     }
-    /** Retorna o mesmo valor que será submetido pelo ElementInternals. */
+    /**
+     * Retorna o mesmo valor que será submetido pelo ElementInternals.
+     *
+     * @returns string — valor serializado pronto para `setFormValue`.
+     */
     getSerializedValue() {
         const zero = (date) => (date === null ? null : setExports.set(date, { seconds: 0, milliseconds: 0 }));
         return (serializeDatetimePickerFormValue(this.value === null ? null : zero(this.value), {
@@ -1179,11 +2076,24 @@ const DatetimePicker = class {
     sameDate(left, right) {
         return left === right || (left !== null && right !== null && left.getTime() === right.getTime());
     }
-    /** Retorna a âncora de validação, ou undefined antes do primeiro render. */
+    /**
+     * Busca o input nativo interno para ações imperativas de foco.
+     *
+     * @returns HTMLElement | undefined — elemento `input` nativo interno, quando disponível.
+     */
     getNativeInputElement() {
-        return (this.datetimeInputElement ?? this.el.shadowRoot?.querySelector('br-datetime-input') ?? undefined);
+        return this.el.shadowRoot
+            ?.querySelector('br-datetime-input')
+            ?.shadowRoot?.querySelector('br-input')
+            ?.shadowRoot?.querySelector('input');
     }
-    /** Atualiza estado interno, FormData e validação com uma única chamada. */
+    /**
+     * Atualiza estado interno, FormData e validação com uma única chamada.
+     *
+     * @param nextValue Date | null — próximo valor a ser aplicado no componente.
+     * @param shouldEmitPublicEvent boolean — controla emissão de eventos públicos.
+     * @returns void
+     */
     setComponentValue(nextValue, shouldEmitPublicEvent = true) {
         this.value = this.cloneDate(nextValue);
         this.syncCanonicalValues();
@@ -1195,13 +2105,13 @@ const DatetimePicker = class {
     }
     /** Propaga o estado atual consolidado para consumidores externos do componente raiz. */
     emitDateStateChange() {
-        const range = this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE
+        const range = this.selectionMode === 'range'
             ? {
                 start: this.cloneDate(this.rangeStart),
                 end: this.cloneDate(this.rangeEnd),
             }
             : undefined;
-        const rangeDates = range !== undefined && range.start !== null && range.end !== null
+        const rangeDates = this.mode === DATETIME_PICKER_MODE.DATE && range !== undefined && range.start !== null && range.end !== null
             ? this.buildRangeDatesState(range.start, range.end)
             : undefined;
         this.dateStateChange.emit({
@@ -1210,13 +2120,116 @@ const DatetimePicker = class {
             range,
             rangeDates,
         });
-        if (range)
-            this.rangeValue = range;
+        this.emitCanonicalChange(range);
         this.valueChange.emit(this.cloneDate(this.value));
         dispatchNativeFormEvent(this.el, 'input');
         dispatchNativeFormEvent(this.el, 'change');
     }
-    /** Expande o intervalo completo e marca quais dias estão desabilitados. */
+    /** Emite o contrato público sem expor detalhes incidentais do estado interno. */
+    emitCanonicalChange(rangeSnapshot) {
+        const serializedValue = this.getSerializedValue();
+        if (this.selectionMode === 'range') {
+            const range = rangeSnapshot ?? {
+                start: this.rangeStart,
+                end: this.rangeEnd,
+            };
+            const rangeValue = {
+                start: this.cloneDate(range.start),
+                end: this.cloneDate(range.end),
+            };
+            this.syncingRangeValueInternally = true;
+            this.rangeValue = rangeValue;
+            this.syncingRangeValueInternally = false;
+            const value = {
+                start: this.serializeRangeBoundary(rangeValue.start),
+                end: this.serializeRangeBoundary(rangeValue.end),
+            };
+            const detail = {
+                selectionMode: 'range',
+                value,
+                serializedValue,
+                complete: value.start !== null && value.end !== null,
+            };
+            if (this.mode === DATETIME_PICKER_MODE.DATE) {
+                this.brDatetimePickerChange.emit({ mode: 'date', ...detail });
+            }
+            else if (this.mode === DATETIME_PICKER_MODE.TIME) {
+                this.brDatetimePickerChange.emit({ mode: 'time', ...detail });
+            }
+            else {
+                this.brDatetimePickerChange.emit({ mode: 'datetime', ...detail });
+            }
+            return;
+        }
+        if (this.mode === DATETIME_PICKER_MODE.TIME) {
+            this.brDatetimePickerChange.emit({
+                mode: 'time',
+                selectionMode: 'single',
+                value: this.value === null
+                    ? null
+                    : {
+                        hours: this.value.getHours(),
+                        minutes: this.value.getMinutes(),
+                    },
+                serializedValue,
+            });
+            return;
+        }
+        if (this.mode === DATETIME_PICKER_MODE.DATE) {
+            this.brDatetimePickerChange.emit({
+                mode: 'date',
+                selectionMode: 'single',
+                value: this.cloneDate(this.value),
+                serializedValue,
+            });
+            return;
+        }
+        this.brDatetimePickerChange.emit({
+            mode: 'datetime',
+            selectionMode: 'single',
+            value: this.cloneDate(this.value),
+            serializedValue,
+        });
+    }
+    /**
+     * Serializa uma data civil sem conversão para UTC ou mudança de dia.
+     *
+     * @param value Date — data a serializar (somente componente civil).
+     * @returns string — formato `YYYY-MM-DD`.
+     */
+    serializeDateOnly(value) {
+        const year = String(value.getFullYear()).padStart(4, '0');
+        const month = String(value.getMonth() + 1).padStart(2, '0');
+        const day = String(value.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    /**
+     * Serializa um limite do intervalo conforme o modo sem expor objetos Date no payload.
+     *
+     * @param value Date | null — limite a serializar.
+     * @returns string | null — representação serializada do limite ou `null`.
+     */
+    serializeRangeBoundary(value) {
+        if (value === null)
+            return null;
+        if (this.mode === DATETIME_PICKER_MODE.DATE)
+            return this.serializeDateOnly(value);
+        if (this.mode === DATETIME_PICKER_MODE.TIME) {
+            return `${String(value.getHours()).padStart(2, '0')}:${String(value.getMinutes()).padStart(2, '0')}`;
+        }
+        return serializeDatetimePickerFormValue(value, {
+            mode: DATETIME_PICKER_MODE.DATETIME,
+            selectionMode: 'single',
+            rangeStart: null,
+            rangeEnd: null});
+    }
+    /**
+     * Expande o intervalo completo e marca quais dias estão desabilitados.
+     *
+     * @param start Date — início do intervalo.
+     * @param end Date — fim do intervalo.
+     * @returns Array<{date: Date, disabled: boolean}> — lista diária com flags.
+     */
     buildRangeDatesState(start, end) {
         const intervalStart = start.getTime() <= end.getTime() ? start : end;
         const intervalEnd = start.getTime() <= end.getTime() ? end : start;
@@ -1228,8 +2241,13 @@ const DatetimePicker = class {
             disabled: this.isDateDisabled(date),
         }));
     }
-    /** Restaura seleção e data de referência a partir de uma data já validada. */
+    /**
+     * Restaura seleção e data de referência a partir de uma data já validada.
+     *
+     * @param nextValue Date | null — valor validado a ser restaurado como seleção.
+     */
     restoreSelection(nextValue) {
+        this.inputValidationMessage = '';
         this.value = this.cloneDate(nextValue);
         if (this.selectionMode === 'single') {
             this.rangeStart = null;
@@ -1239,12 +2257,15 @@ const DatetimePicker = class {
         this.syncCanonicalValues();
         this.updateFormInternals();
     }
-    /** Atualiza o estado local de intervalo a partir do evento do calendário. */
+    /**
+     * Atualiza o estado local de intervalo a partir do evento do calendário.
+     *
+     * @param nextRange DatetimePickerDateRange | undefined — novo snapshot do intervalo.
+     */
     setRangeState(nextRange) {
         this.rangeStart = this.cloneDate(nextRange?.start ?? null);
         this.rangeEnd = this.cloneDate(nextRange?.end ?? null);
     }
-    /** Mantém ElementInternals sincronizado com estado e regras do componente. */
     updateFormInternals() {
         this.syncFormValue();
         this.syncFormValidity();
@@ -1264,9 +2285,20 @@ const DatetimePicker = class {
                 });
             this.elementInternals.setFormValue(nextValue);
         }
-        catch {
-            // Ambientes de teste podem esconder attachInternals parcialmente.
-        }
+        catch { }
+    }
+    /** Deriva o erro de ordenação sem modificar os limites escolhidos. */
+    getRangeOrderValidationMessage() {
+        const invalidRange = this.selectionMode === 'range' &&
+            this.mode !== DATETIME_PICKER_MODE.TIME &&
+            this.rangeStart !== null &&
+            this.rangeEnd !== null &&
+            this.rangeStart.getTime() > this.rangeEnd.getTime();
+        if (!invalidRange)
+            return '';
+        return this.mode === DATETIME_PICKER_MODE.DATETIME
+            ? DATETIME_RANGE_ORDER_MESSAGE
+            : 'A data inicial deve anteceder a data final.';
     }
     /** Espelha a regra de required no mecanismo nativo de validade. */
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: consolida flags nativos relacionados sem esconder a precedência das mensagens.
@@ -1276,54 +2308,43 @@ const DatetimePicker = class {
                 required: this.required,
                 disabled: this.isDisabled(),
                 value: this.value,
-                mode: this.mode,
                 selectionMode: this.selectionMode,
                 rangeStart: this.rangeStart,
                 rangeEnd: this.rangeEnd});
-            const min = this.parseConstraintValue(this.min, 'min');
-            const max = this.parseConstraintValue(this.max, 'max');
+            const min = this.parseConstraintValue(this.min);
+            const max = this.parseConstraintValue(this.max);
             const values = this.selectionMode === 'range' ? [this.rangeStart, this.rangeEnd] : [this.value];
             const rangeUnderflow = min !== null && values.some((value) => value !== null && value.getTime() < min.getTime());
             const rangeOverflow = max !== null && values.some((value) => value !== null && value.getTime() > max.getTime());
-            const invalidRange = this.selectionMode === 'range' &&
-                this.rangeStart !== null &&
-                this.rangeEnd !== null &&
-                this.rangeStart.getTime() > this.rangeEnd.getTime();
+            const rangeOrderMessage = this.getRangeOrderValidationMessage();
             const flags = {
-                customError: this.customValidationMessage !== '' || Boolean(this.validatorMessage) || invalidRange,
+                customError: this.customValidationMessage !== '' ||
+                    this.inputValidationMessage !== '' ||
+                    Boolean(this.validatorMessage) ||
+                    rangeOrderMessage !== '' ||
+                    this.inputValidationPending,
                 rangeOverflow,
                 rangeUnderflow,
                 valueMissing: missing,
             };
             const message = this.customValidationMessage ||
+                this.inputValidationMessage ||
                 this.validatorMessage ||
                 (missing
                     ? 'Preencha este campo.'
-                    : invalidRange
-                        ? 'A data inicial deve anteceder a data final.'
+                    : rangeOrderMessage
+                        ? rangeOrderMessage
                         : rangeUnderflow
                             ? 'Selecione uma data igual ou posterior ao mínimo.'
                             : rangeOverflow
                                 ? 'Selecione uma data igual ou anterior ao máximo.'
                                 : '');
-            setFormValidity(this.elementInternals, flags, message, this.getNativeInputElement());
-        }
-        catch {
-            // Ambientes sem ElementInternals completo não devem falhar.
+            setFormValidity(this.elementInternals, flags, message, this.getNativeInputElement() ?? undefined);
         }
+        catch { }
     }
-    parseConstraintValue(value, propertyName) {
-        if (value === null)
-            return null;
-        if (!(value instanceof Date) && typeof value !== 'string') {
-            reportInvalidPropValue(this.el, propertyName, value, 'Informe uma data válida como Date ou string compatível com o modo atual.', 'Aplicando fallback null (sem limite).');
-            return null;
-        }
-        const parsedValue = this.parseMethodValue(value, this.mode);
-        if (parsedValue !== null)
-            return parsedValue;
-        reportInvalidPropValue(this.el, propertyName, value, 'Informe uma data válida como Date ou string compatível com o modo atual.', 'Aplicando fallback null (sem limite).');
-        return null;
+    parseConstraintValue(value) {
+        return value === null ? null : this.parseMethodValue(value, this.mode);
     }
     isDisabled() {
         return isFormControlDisabled(this.disabled, this.formDisabled);
@@ -1381,24 +2402,35 @@ const DatetimePicker = class {
     }
     /** Renderiza o campo de entrada responsável por abrir e sincronizar o picker. */
     renderInputField() {
-        return (h("br-datetime-input", { ref: (element) => {
-                this.datetimeInputElement = element;
-            }, referenceDate: this.referenceDate, value: this.value, selectionMode: this.selectionMode, rangeStart: this.rangeStart, rangeEnd: this.rangeEnd, placeholder: this.placeholder, mode: this.mode, disabled: this.isDisabled(), onDateStateChange: this.handleDateStateChange, onTogglePicker: this.handleTogglePicker, exportparts: "container: input-container, input: input-field, icon: input-icon" }));
+        return (h("br-datetime-input", { referenceDate: this.referenceDate, value: this.value, selectionMode: this.selectionMode, rangeStart: this.rangeStart, rangeEnd: this.rangeEnd, placeholder: this.placeholder, mode: this.mode, disabled: this.isDisabled(), onDateStateChange: this.handleDateStateChange, onInputValidationChange: this.handleInputValidationChange, onTogglePicker: this.handleTogglePicker, exportparts: "container: input-container, input: input-field, icon: input-icon" }));
     }
     /** Renderiza apenas o seletor de data. */
     renderDatePicker() {
-        const effectiveSelectionMode = this.mode === DATETIME_PICKER_MODE.DATE ? this.selectionMode : 'single';
+        const effectiveSelectionMode = this.selectionMode;
         return (h("br-date-picker", { ...this.getSharedDateStateBindings(), selectionMode: effectiveSelectionMode, weekStartsOn: this.weekStartsOn, locale: this.locale, disabled: this.isDisabled(), disabledDates: this.normalizedDisabledDates, fixedRowCount: this.fixedRowCount }));
     }
-    /** Renderiza apenas o seletor de hora. */
-    renderTimePicker() {
-        return h("br-time-picker", { ...this.getSharedDateStateBindings(), disabled: this.isDisabled() });
+    /** Renderiza um seletor de hora simples ou um limite do intervalo. */
+    renderTimePicker(boundary) {
+        const rangeValue = boundary === 'start' ? this.rangeStart : this.rangeEnd;
+        const referenceDate = this.cloneDate(rangeValue ?? this.referenceDate);
+        const selectedValue = this.cloneDate(rangeValue);
+        const timerKey = boundary === undefined ? 'single' : `${boundary}-${rangeValue?.getTime() ?? `empty-${referenceDate.getTime()}`}`;
+        const handler = boundary === 'start'
+            ? this.handleRangeStartTimeStateChange
+            : boundary === 'end'
+                ? this.handleRangeEndTimeStateChange
+                : this.handleDateStateChange;
+        return (h("br-time-picker", { key: timerKey, referenceDate: referenceDate, value: boundary === undefined ? this.cloneDate(this.value) : selectedValue, onDateStateChange: handler, disabled: this.isDisabled() }));
+    }
+    /** Renderiza os horários inicial e final lado a lado no modo range. */
+    renderRangeTimePickers() {
+        return (h("div", { class: "range-time-pickers", role: "group", "aria-label": "Intervalo de hor\u00E1rios" }, h("div", { class: "range-time-picker" }, h("span", { class: "range-time-label" }, "In\u00EDcio"), this.renderTimePicker('start')), h("span", { class: "range-time-separator", "aria-hidden": "true" }, "-"), h("div", { class: "range-time-picker" }, h("span", { class: "range-time-label" }, "Fim"), this.renderTimePicker('end'))));
     }
     /**
      * Renderiza a combinação de data e horário no modo `datetime`.
      */
     renderDateTimePicker() {
-        return (h(Fragment, null, this.renderDatePicker(), this.renderDivider(), this.renderTimePicker()));
+        return (h(Fragment, null, this.renderDatePicker(), this.renderDivider(), this.selectionMode === 'range' ? this.renderRangeTimePickers() : this.renderTimePicker()));
     }
     /** Renderiza o separador visual entre data e hora no modo combinado. */
     renderDivider() {
@@ -1418,7 +2450,11 @@ const DatetimePicker = class {
      * Renderização principal do componente.
      */
     render() {
-        return (h(Host, { key: 'b964215e48b1871bf6ab1b045612f3d166543177', onKeyDown: this.handlePickerKeydown, "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage ? this.feedbackId : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot ? this.feedbackId : null }, h("div", { key: '50ba10963ba4e8bdf7c70f0d4513eea657692df8', class: this.getCssClassMap(), part: "container" }, this.renderInputField(), this.renderPickerContent()), h("div", { key: 'b220e70a85d8ba941dabed18a5a0dcdc9a99124f', id: this.feedbackId, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'cdcc69b126491b2cea3b634066f1e4071c1c3b61', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+        const validationMessage = this.customValidationMessage ||
+            this.inputValidationMessage ||
+            this.validatorMessage ||
+            (this.inputValidationPending ? '' : this.getRangeOrderValidationMessage());
+        return (h(Host, { key: '0640504e844713daaf31d7c8a34b96fb48bcf499', onKeyDown: this.handlePickerKeydown, "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || validationMessage ? this.feedbackId : null, "aria-errormessage": validationMessage || this.hasFeedbackSlot ? this.feedbackId : null }, h("div", { key: '7512ed8a4437a99d6d0702351af659bfa1d270b0', class: this.getCssClassMap(), part: "container" }, this.renderInputField(), this.renderPickerContent()), h("div", { key: '80a8d3a717ceacc4dfb6bd0ac4850b61e3b2d311', id: this.feedbackId, part: "feedback", hidden: !this.hasFeedbackSlot && !validationMessage }, h("slot", { key: '41a8e4fad5edaa3729d63b7ee469f248a53129a1', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && validationMessage ? (h("br-message", { state: "danger", "attr:message": validationMessage, feedback: true })) : null)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }