@govbr-ds/webcomponents 2.4.0 → 2.6.0

package/dist/collection/components/datetime-picker/date-picker/date-picker-locale.js

@@ -10,6 +10,26 @@ import { setMonth } from "date-fns/setMonth";
 import { startOfWeek } from "date-fns/startOfWeek";
 import { DATETIME_PICKER_LOCALE } from "../datetime-picker-constants";
 const registeredLocales = new Map([[localeCodeToKey(DATETIME_PICKER_LOCALE.DEFAULT), ptBR]]);
+/**
+ * Rótulos já gerados por locale (e início da semana), reaproveitados entre renderizações.
+ * São invalidados quando um locale é registrado novamente.
+ */
+const labelsCache = new Map();
+/**
+ * Retorna os rótulos memorizados para a chave ou os gera uma única vez.
+ *
+ * @param {string} cacheKey - Chave composta por tipo de rótulo e locale.
+ * @param {() => string[]} build - Gerador dos rótulos.
+ * @returns {readonly string[]} Rótulos memorizados.
+ */
+function getCachedLabels(cacheKey, build) {
+    let labels = labelsCache.get(cacheKey);
+    if (labels === undefined) {
+        labels = Object.freeze(build());
+        labelsCache.set(cacheKey, labels);
+    }
+    return labels;
+}
 /**
  * Converte um rótulo para capitalização de frase.
  *
@@ -50,6 +70,7 @@ export function registerDatePickerLocale(localeCode, locale) {
         throw new TypeError('locale deve ser um objeto compatível com date-fns');
     }
     registeredLocales.set(localeCodeToKey(localeCode), locale);
+    labelsCache.clear();
 }
 /**
  * Resolve o objeto `Locale` do date-fns a partir do código público informado.
@@ -68,27 +89,53 @@ export function resolveDateFnsLocale(localeCode = DATETIME_PICKER_LOCALE.DEFAULT
  * @returns {string[]} Lista com os 12 meses formatados para exibição.
  */
 export function getMonthLabels(localeCode) {
-    const locale = resolveDateFnsLocale(localeCode);
-    const baseDate = new Date(2026, 0, 1);
-    return Array.from({ length: 12 }, (_, monthIndex) => {
-        const monthDate = setMonth(baseDate, monthIndex);
-        return toLabelCase(format(monthDate, 'MMMM', { locale }));
+    return getCachedLabels(`month:${localeCodeToKey(localeCode)}`, () => {
+        const locale = resolveDateFnsLocale(localeCode);
+        const baseDate = new Date(2026, 0, 1);
+        return Array.from({ length: 12 }, (_, monthIndex) => {
+            const monthDate = setMonth(baseDate, monthIndex);
+            return toLabelCase(format(monthDate, 'MMMM', { locale }));
+        });
     });
 }
 /**
- * Gera os rótulos dos dias da semana considerando o início informado.
+ * Gera os nomes dos dias da semana considerando o início informado.
  *
  * @param {string} localeCode - Código de locale aceito pelo componente.
  * @param {WeekDayIndex} weekStartsOn - Índice do primeiro dia da semana.
- * @returns {string[]} Lista com abreviações dos sete dias da semana.
+ * @param {boolean} abbreviated - `true` para abreviações de três letras; `false` para nomes completos.
+ * @returns {readonly string[]} Lista com os sete dias da semana.
  */
-export function getWeekdayLabels(localeCode, weekStartsOn) {
-    const locale = resolveDateFnsLocale(localeCode);
-    const baseDate = new Date(2026, 0, 4);
-    const weekStartDate = startOfWeek(setDay(baseDate, weekStartsOn), { weekStartsOn });
-    return Array.from({ length: 7 }, (_, dayIndex) => {
-        const dayDate = addDays(weekStartDate, dayIndex);
-        const abbreviated = format(dayDate, 'EEE', { locale }).slice(0, 3);
-        return toLabelCase(abbreviated);
+function getWeekdayNames(localeCode, weekStartsOn, abbreviated) {
+    const cacheKey = `weekday:${abbreviated ? 'short' : 'long'}:${weekStartsOn}:${localeCodeToKey(localeCode)}`;
+    return getCachedLabels(cacheKey, () => {
+        const locale = resolveDateFnsLocale(localeCode);
+        const baseDate = new Date(2026, 0, 4);
+        const weekStartDate = startOfWeek(setDay(baseDate, weekStartsOn), { weekStartsOn });
+        return Array.from({ length: 7 }, (_, dayIndex) => {
+            const dayDate = addDays(weekStartDate, dayIndex);
+            const name = abbreviated ? format(dayDate, 'EEE', { locale }).slice(0, 3) : format(dayDate, 'EEEE', { locale });
+            return toLabelCase(name);
+        });
     });
 }
+/**
+ * Gera os rótulos abreviados dos dias da semana considerando o início informado.
+ *
+ * @param {string} localeCode - Código de locale aceito pelo componente.
+ * @param {WeekDayIndex} weekStartsOn - Índice do primeiro dia da semana.
+ * @returns {readonly string[]} Lista com abreviações dos sete dias da semana.
+ */
+export function getWeekdayLabels(localeCode, weekStartsOn) {
+    return getWeekdayNames(localeCode, weekStartsOn, true);
+}
+/**
+ * Gera os nomes completos dos dias da semana, usados como nome acessível dos cabeçalhos.
+ *
+ * @param {string} localeCode - Código de locale aceito pelo componente.
+ * @param {WeekDayIndex} weekStartsOn - Índice do primeiro dia da semana.
+ * @returns {readonly string[]} Lista com os nomes completos dos sete dias da semana.
+ */
+export function getWeekdayFullNames(localeCode, weekStartsOn) {
+    return getWeekdayNames(localeCode, weekStartsOn, false);
+}

package/dist/collection/components/datetime-picker/date-picker/date-picker.css

@@ -1 +1 @@
-*,*::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{display:block;width:100%;max-width:304px;height:auto;box-sizing:border-box}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-scale-base);width:100%;box-sizing:border-box}select{appearance:none;border:none;background:rgba(0,0,0,0);padding-right:20px;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);color:var(--blue-warm-vivid-70);outline:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%231351b4' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L224 285.229l154.706-154.705c9.373-9.373 24.569-9.373 33.941 0l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.373-24.569 9.373-33.942 0z'/></svg>");background-repeat:no-repeat;background-position:right .35rem center;background-size:10px}select option{color:var(--color)}select:focus{outline:none}select:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}select:hover{cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}input[type=number]{width:70px;padding:4px;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);background-color:var(--gray-0);color:var(--gray-80);text-align:center;border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width)}input[type=number]:hover{background:linear-gradient(rgb(var(--color-rgb), var(--hover)), rgb(var(--color-rgb), var(--hover)))}.weekdays{margin-bottom:var(--spacing-scale-half)}.weekdays,.monthdays{display:grid;grid-template-columns:repeat(7, 1fr);place-items:center center;text-align:center;gap:var(--spacing-scale-half) var(--spacing-scale-half);width:100%;box-sizing:border-box}.weekday{display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-medium);color:var(--gray-70);width:var(--spacing-scale-4x)}.week{display:contents}.day{display:flex;align-items:center;justify-content:center;justify-self:center;padding:var(--spacing-scale-half);font-weight:var(--font-weight-semi-bold);color:var(--blue-warm-vivid-70);border-radius:50%;width:var(--spacing-scale-4x);height:var(--spacing-scale-4x)}.day:hover{background:var(--hover-effect);cursor:pointer}.day:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}.day.selected{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold)}.day.in-range{background:var(--blue-warm-vivid-10);color:var(--blue-warm-vivid-70);border-radius:0;place-self:stretch stretch;width:100%;height:100%;overflow:hidden}.day.range-start{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold);width:100%;height:100%;border-radius:var(--surface-rounder-pill) 0 0 var(--surface-rounder-pill);place-self:stretch stretch;overflow:hidden}.day.range-end{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold);width:100%;height:100%;border-radius:0 var(--surface-rounder-pill) var(--surface-rounder-pill) 0;place-self:stretch stretch;overflow:hidden}.day.range-start.range-end{border-radius:var(--surface-rounder-pill);height:100%;overflow:hidden}.day.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.outside-month{font-weight:var(--font-weight-regular);color:var(--gray-70)}.today{background:var(--orange-vivid-5);color:var(--gray-80)}
+*,*::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}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.pt-half{padding-top:var(--spacing-scale-half) !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)}mark,.mark{background:var(--red-warm-vivid-10);color:var(--color)}*[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{display:block;width:100%;max-width:304px;height:auto;box-sizing:border-box}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-scale-base);width:100%;box-sizing:border-box}select{appearance:none;border:none;background:rgba(0,0,0,0);padding-right:20px;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);color:var(--blue-warm-vivid-70);outline:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%231351b4' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L224 285.229l154.706-154.705c9.373-9.373 24.569-9.373 33.941 0l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.373-24.569 9.373-33.942 0z'/></svg>");background-repeat:no-repeat;background-position:right .35rem center;background-size:10px}select option{color:var(--color)}select:focus{outline:none}select:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}select:hover{cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}input[type=number]{width:70px;padding:4px;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);background-color:var(--gray-0);color:var(--gray-80);text-align:center;border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width)}input[type=number]:hover{background:linear-gradient(rgb(var(--color-rgb), var(--hover)), rgb(var(--color-rgb), var(--hover)))}.weekdays{margin-bottom:var(--spacing-scale-half)}.weekdays,.monthdays{display:grid;grid-template-columns:repeat(7, 1fr);place-items:center center;text-align:center;gap:var(--spacing-scale-half) var(--spacing-scale-half);width:100%;box-sizing:border-box}.weekday{display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-medium);color:var(--gray-70);width:var(--spacing-scale-4x)}.week{display:contents}.day{display:flex;align-items:center;justify-content:center;justify-self:center;padding:var(--spacing-scale-half);font-weight:var(--font-weight-semi-bold);color:var(--blue-warm-vivid-70);border-radius:50%;width:var(--spacing-scale-4x);height:var(--spacing-scale-4x)}.day:hover{background:var(--hover-effect);cursor:pointer}.day:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}.day.selected{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold)}.day.in-range{background:var(--blue-warm-vivid-10);color:var(--blue-warm-vivid-70);border-radius:0;place-self:stretch stretch;width:100%;height:100%;overflow:hidden}.day.range-start{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold);width:100%;height:100%;border-radius:var(--surface-rounder-pill) 0 0 var(--surface-rounder-pill);place-self:stretch stretch;overflow:hidden}.day.range-end{background:var(--blue-warm-vivid-70);color:var(--color-secondary-01);font-weight:var(--font-weight-bold);width:100%;height:100%;border-radius:0 var(--surface-rounder-pill) var(--surface-rounder-pill) 0;place-self:stretch stretch;overflow:hidden}.day.range-start.range-end{border-radius:var(--surface-rounder-pill);height:100%;overflow:hidden}.day.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.outside-month{font-weight:var(--font-weight-regular);color:var(--gray-70)}.today{background:var(--orange-vivid-5);color:var(--gray-80)}

package/dist/collection/components/datetime-picker/date-picker/date-picker.js

@@ -2,14 +2,16 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
 import { addDays } from "date-fns/addDays";
 import { addMonths } from "date-fns/addMonths";
+import { addYears } from "date-fns/addYears";
 import { compareAsc } from "date-fns/compareAsc";
 import { eachDayOfInterval } from "date-fns/eachDayOfInterval";
 import { endOfMonth } from "date-fns/endOfMonth";
 import { endOfWeek } from "date-fns/endOfWeek";
 import { format } from "date-fns/format";
+import { getDaysInMonth } from "date-fns/getDaysInMonth";
 import { isAfter } from "date-fns/isAfter";
 import { isBefore } from "date-fns/isBefore";
 import { isSameDay } from "date-fns/isSameDay";
@@ -24,22 +26,30 @@ import { toDate } from "date-fns/toDate";
 import { dispatchNativeFormEvent } from "../../../shared/utils/event";
 import { resolveSsrLocalDate } from "../../../shared/utils/ssr-date";
 import { DATETIME_PICKER_LOCALE, NAVIGATION_ACTION } from "../datetime-picker-constants";
-import { getMonthLabels, getWeekdayLabels, resolveDateFnsLocale } from "./date-picker-locale";
+import { getMonthLabels, getWeekdayFullNames, getWeekdayLabels, resolveDateFnsLocale } from "./date-picker-locale";
 import { normalizeLocale, normalizeWeekStartsOn } from "./date-picker-props-validation";
+/** Formato da chave local de dia usada em `data-date` e nas buscas de datas bloqueadas. */
+const DAY_KEY_FORMAT = 'yyyy-MM-dd';
 /**
- * O `br-date-picker` é o subcomponente de calendário do `br-datetime-picker`, responsável pela seleção visual de uma data ou de um intervalo.
+ * Calendário usado pelo `br-datetime-picker`. Também pode ser usado sozinho, quando a tela precisa de um calendário sempre visível.
  *
- * ### Papel na composição
+ * Usado sozinho, ele não tem campo de texto nem participa de formulário: a aplicação lê a seleção e cuida da validação.
  *
- * Exibe a grade mensal, a navegação entre meses e anos e os estados de seleção e bloqueio dos dias. `referenceDate` determina o período exibido, enquanto `value` e os limites do intervalo representam a seleção.
+ * ```html
+ * <br-date-picker id="agenda"></br-date-picker>
+ * ```
  *
- * ### Regra de uso e relacionamento
+ * ```js
+ * const calendario = document.querySelector('#agenda');
+ * calendario.addEventListener('change', () => console.log(calendario.value));
+ * ```
  *
- * O `br-datetime-picker` instancia e configura este calendário internamente nos modos `date` e `datetime`, recebendo suas alterações pelo evento `dateStateChange`. Não declare o calendário em um slot do pai.
+ * - `value`: data selecionada (`Date`).
+ * - `referenceDate`: mês exibido.
+ * - `disabledDates`: datas que não podem ser escolhidas.
+ * - `selectionMode="range"`: seleção de intervalo, lida em `rangeValue`.
  *
- * Use diretamente quando precisar de um calendário embutido e permanentemente visível. Nesse caso, a aplicação deve coordenar valores e eventos e implementar a integração com formulários e a validação do fluxo completo. O calendário isolado não fornece o campo textual, o seletor de horários nem a associação ao formulário do orquestrador.
- *
- * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/date-picker?tab=designer).
+ * Para mudar o idioma, veja "Idiomas" na documentação do `br-datetime-picker`.
  *
  * @part container - Parte para o container base do calendário.
  * @part header - Cabeçalho do calendário (contendo navegação e seleção de mês/ano).
@@ -116,6 +126,11 @@ export class DatePicker {
          * @internal
          */
         this.shouldFocusDate = false;
+        /**
+         * Chaves `yyyy-MM-dd` das datas bloqueadas, para consulta O(1) por célula.
+         * @internal
+         */
+        this.disabledDateKeysCache = new Set();
         /**
          * Handler de mudança do seletor de mês.
          * @param event - evento de mudança do `<select>`
@@ -131,8 +146,7 @@ export class DatePicker {
                 console.warn(`Índice de mês inválido selecionado: ${select.value}`);
                 return;
             }
-            const date = set(this.baseDate, { month: monthIndex, date: 1 });
-            this.emitDateStateChange(date);
+            this.navigateToMonth(set(this.baseDate, { month: monthIndex, date: 1 }));
         };
         /**
          * Trata cliques nos botões de navegação do calendário.
@@ -178,11 +192,7 @@ export class DatePicker {
                 console.warn(`Ano inválido digitado: ${input.value}`);
                 return;
             }
-            const date = set(this.baseDate, { year, month: this.baseDate.getMonth(), date: 1 });
-            const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
-                ? { start: this.rangeStart, end: this.rangeEnd }
-                : undefined;
-            this.emitDateStateChange(date, this.value, range);
+            this.navigateToMonth(set(this.baseDate, { year, month: this.baseDate.getMonth(), date: 1 }));
         };
         /**
          * Trata cliques com um handler compartilhado, lendo a data local da célula.
@@ -195,7 +205,7 @@ export class DatePicker {
                 console.warn('Célula de dia clicada sem data-date definido');
                 return;
             }
-            const date = parse(cell.dataset.date, 'yyyy-MM-dd', this.baseDate);
+            const date = parse(cell.dataset.date, DAY_KEY_FORMAT, this.baseDate);
             if (Number.isNaN(date.getTime())) {
                 console.warn(`Data inválida na célula de dia: ${cell.dataset.date}`);
                 return;
@@ -204,7 +214,10 @@ export class DatePicker {
         };
         /**
          * Gerencia navegação por teclado dentro da grade de dias.
-         * Teclas suportadas: ArrowLeft/Right/Up/Down, PageUp/PageDown, Home/End, Enter/Space.
+         * Teclas suportadas: ArrowLeft/Right/Up/Down, PageUp/PageDown (mês), Shift+PageUp/PageDown (ano),
+         * Home/End, Enter/Space.
+         *
+         * Permanece ativo em datas bloqueadas para que o foco não fique preso nelas; somente a seleção é ignorada.
          * @param event - evento de teclado
          * @returns void
          * @internal
@@ -234,7 +247,7 @@ export class DatePicker {
             if (targetEl && targetEl.dataset?.date !== undefined) {
                 const dateKey = targetEl.dataset.date;
                 event.preventDefault();
-                current = parse(dateKey, 'yyyy-MM-dd', new Date());
+                current = parse(dateKey, DAY_KEY_FORMAT, new Date());
             }
             else {
                 event.preventDefault();
@@ -261,10 +274,10 @@ export class DatePicker {
                     next = addDays(current, 7);
                     break;
                 case 'PageUp':
-                    next = addMonths(current, -1);
+                    next = event.shiftKey ? addYears(current, -1) : addMonths(current, -1);
                     break;
                 case 'PageDown':
-                    next = addMonths(current, 1);
+                    next = event.shiftKey ? addYears(current, 1) : addMonths(current, 1);
                     break;
                 case 'Home':
                     next = startOfWeek(current, { weekStartsOn: this.weekStartsOn });
@@ -297,10 +310,12 @@ export class DatePicker {
     /**
      * Observador para a prop `value` — atualiza `focusedDate` quando a seleção externa muda.
      * @param {Date | null} newValue - novo valor de seleção (ou `null`)
+     * @param {Date | null} oldValue - valor anterior da seleção
      * @internal
      */
-    handleValueChange(newValue) {
-        if (newValue !== null) {
+    handleValueChange(newValue, oldValue) {
+        // Reatribuições com o mesmo instante (ex.: navegação entre meses) não devem mover o foco.
+        if (newValue !== null && newValue.getTime() !== oldValue?.getTime()) {
             this.focusedDate = toDate(newValue);
         }
     }
@@ -341,7 +356,7 @@ export class DatePicker {
             return;
         this.shouldFocusDate = false;
         const normalizedDate = this.getNormalizedFocusedDate();
-        const dateKey = format(normalizedDate, 'yyyy-MM-dd');
+        const dateKey = format(normalizedDate, DAY_KEY_FORMAT);
         const cell = this.el.shadowRoot?.querySelector(`[data-date="${dateKey}"]`);
         cell?.focus();
     }
@@ -404,11 +419,11 @@ export class DatePicker {
     getIconForAction(action) {
         switch (action) {
             case NAVIGATION_ACTION.PREVIOUS_MONTH:
-                return 'fa6-solid:chevron-left';
+                return 'fa-solid:chevron-left';
             case NAVIGATION_ACTION.NEXT_MONTH:
-                return 'fa6-solid:chevron-right';
+                return 'fa-solid:chevron-right';
             default:
-                return 'fa6-solid:question';
+                return 'fa-solid:question';
         }
     }
     /**
@@ -461,11 +476,7 @@ export class DatePicker {
         if (this.disabled) {
             return;
         }
-        const date = set(subMonths(this.baseDate, 1), { date: 1 });
-        const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
-            ? { start: this.rangeStart, end: this.rangeEnd }
-            : undefined;
-        this.emitDateStateChange(date, this.value, range);
+        this.navigateToMonth(set(subMonths(this.baseDate, 1), { date: 1 }));
     }
     /**
      * Incrementa o mês exibido e preserva seleção/intervalo quando aplicável.
@@ -475,11 +486,28 @@ export class DatePicker {
         if (this.disabled) {
             return;
         }
-        const date = set(addMonths(this.baseDate, 1), { date: 1 });
+        this.navigateToMonth(set(addMonths(this.baseDate, 1), { date: 1 }));
+    }
+    /**
+     * Exibe o mês informado preservando a seleção, o intervalo completo e o dia em foco.
+     *
+     * O foco vai para a data selecionada quando ela pertence ao novo mês; caso
+     * contrário, mantém o mesmo dia do mês, limitado ao último dia disponível
+     * (ex.: 31/01 → 28/02).
+     *
+     * @param monthDate - primeiro dia do mês de destino
+     * @internal
+     */
+    navigateToMonth(monthDate) {
+        const value = this.value;
+        this.focusedDate =
+            value !== null && isSameMonth(value, monthDate)
+                ? value
+                : set(monthDate, { date: Math.min(this.focusedDate.getDate(), getDaysInMonth(monthDate)) });
         const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
             ? { start: this.rangeStart, end: this.rangeEnd }
             : undefined;
-        this.emitDateStateChange(date, this.value, range);
+        this.emitDateStateChange(monthDate, value, range);
     }
     /**
      * Verifica se uma data está indisponível para seleção.
@@ -488,7 +516,22 @@ export class DatePicker {
      * @internal
      */
     isDateDisabled(date) {
-        return this.disabledDates.some((disabledDate) => isSameDay(disabledDate, date));
+        return this.disabledDateKeys.has(format(date, DAY_KEY_FORMAT));
+    }
+    /**
+     * Chaves locais das datas bloqueadas, recalculadas somente quando `disabledDates` é substituída.
+     * Entradas inválidas são ignoradas.
+     * @internal
+     */
+    get disabledDateKeys() {
+        if (this.disabledDateKeysSource !== this.disabledDates) {
+            this.disabledDateKeysSource = this.disabledDates;
+            this.disabledDateKeysCache = new Set((this.disabledDates ?? [])
+                .map((disabledDate) => toDate(disabledDate))
+                .filter((disabledDate) => !Number.isNaN(disabledDate.getTime()))
+                .map((disabledDate) => format(disabledDate, DAY_KEY_FORMAT)));
+        }
+        return this.disabledDateKeysCache;
     }
     /**
      * Data base usada para todos os cálculos de calendário.
@@ -510,25 +553,19 @@ export class DatePicker {
     /**
      * Constrói o rótulo acessível da célula de dia, incluindo estado (selecionado/início/fim).
      * @param date - dia representado pela célula
+     * @param state - estado já calculado da célula
      * @returns string para `aria-label`
      * @internal
      */
-    getDayCellAriaLabel(date) {
+    getDayCellAriaLabel(date, state) {
         const fullDate = format(date, "d 'de' MMMM 'de' yyyy", { locale: this.dateFnsLocale });
-        const isSelected = this.selectionMode === 'single' && this.value !== null && isSameDay(date, this.value);
-        const isRangeStart = this.selectionMode === 'range' && this.rangeStart !== null && isSameDay(date, this.rangeStart);
-        const isRangeEnd = this.selectionMode === 'range' && this.rangeEnd !== null && isSameDay(date, this.rangeEnd);
-        const isBetween = this.selectionMode === 'range' &&
-            this.rangeStart !== null &&
-            this.rangeEnd !== null &&
-            this.isDateBetweenRange(date, this.rangeStart, this.rangeEnd);
-        if (isSelected)
+        if (state.isSelected)
             return `${fullDate}, selecionado`;
-        if (isRangeStart)
+        if (state.isRangeStart)
             return `${fullDate}, início do intervalo`;
-        if (isRangeEnd)
+        if (state.isRangeEnd)
             return `${fullDate}, fim do intervalo`;
-        if (isBetween)
+        if (state.isInRange)
             return `${fullDate}, no intervalo selecionado`;
         return fullDate;
     }
@@ -540,28 +577,41 @@ export class DatePicker {
         return resolveDateFnsLocale(this.locale);
     }
     /**
-     * Calcula o mapa de classes CSS da célula do dia.
+     * Calcula uma única vez o estado de seleção da célula, compartilhado por classes, ARIA e foco.
      * @param date - dia da grade
      * @param today - instante atual compartilhado pela renderização da grade
+     * @returns estado da célula
+     * @internal
+     */
+    getDayCellState(date, today) {
+        const isRange = this.selectionMode === 'range';
+        const { value, rangeStart, rangeEnd } = this;
+        return {
+            isToday: isSameDay(date, today),
+            isOutsideMonth: !isSameMonth(date, this.baseDate),
+            isSelected: !isRange && value !== null && isSameDay(date, value),
+            isRangeStart: isRange && rangeStart !== null && isSameDay(date, rangeStart),
+            isRangeEnd: isRange && rangeEnd !== null && isSameDay(date, rangeEnd),
+            isInRange: isRange && rangeStart !== null && rangeEnd !== null && this.isDateBetweenRange(date, rangeStart, rangeEnd),
+        };
+    }
+    /**
+     * Calcula o mapa de classes CSS da célula do dia.
+     * @param state - estado já calculado da célula
+     * @param disabled - indica se a célula está bloqueada
      * @returns mapa de classes booleanas
      * @internal
      */
-    getDayCssClasses(date, today) {
-        const selected = this.value;
-        const rangeStart = this.rangeStart;
-        const rangeEnd = this.rangeEnd;
-        const hasRange = rangeStart !== null && rangeEnd !== null;
-        const isRangeStart = rangeStart !== null && isSameDay(date, rangeStart);
-        const isRangeEnd = rangeEnd !== null && isSameDay(date, rangeEnd);
-        const isBetweenRange = hasRange && this.isDateBetweenRange(date, rangeStart, rangeEnd);
+    getDayCssClasses(state, disabled) {
         return {
             day: true,
-            'outside-month': !isSameMonth(date, this.baseDate),
-            today: isSameDay(date, today),
-            selected: this.selectionMode === 'single' && selected !== null && isSameDay(date, selected),
-            'range-start': this.selectionMode === 'range' && isRangeStart,
-            'range-end': this.selectionMode === 'range' && isRangeEnd,
-            'in-range': this.selectionMode === 'range' && isBetweenRange,
+            'outside-month': state.isOutsideMonth,
+            today: state.isToday,
+            selected: state.isSelected,
+            'range-start': state.isRangeStart,
+            'range-end': state.isRangeEnd,
+            'in-range': state.isInRange,
+            disabled,
         };
     }
     /**
@@ -705,7 +755,7 @@ export class DatePicker {
      */
     renderCalendar() {
         const monthLabel = format(this.baseDate, "MMMM 'de' yyyy", { locale: this.dateFnsLocale });
-        return (h("div", { class: "calendar", role: "grid", "aria-label": `Calendário de ${monthLabel}`, part: "calendar" }, this.renderWeekdays(), this.renderMonthGrid()));
+        return (h(Fragment, null, h("div", { class: "visually-hidden", "aria-live": "polite" }, monthLabel), h("div", { class: "calendar", role: "grid", "aria-label": `Calendário de ${monthLabel}`, part: "calendar" }, this.renderWeekdays(), this.renderMonthGrid())));
     }
     /**
      * Renderiza os rótulos dos dias da semana.
@@ -714,7 +764,8 @@ export class DatePicker {
      */
     renderWeekdays() {
         const labels = this.getWeekdayLabels();
-        return (h("div", { class: "weekdays", role: "row", tabIndex: -1, part: "weekdays" }, labels.map((label, index) => (h("div", { key: `weekday-${index}`, class: "weekday", role: "columnheader", tabIndex: -1, "aria-label": label, part: "weekday" }, label)))));
+        const fullNames = getWeekdayFullNames(this.locale, this.weekStartsOn);
+        return (h("div", { class: "weekdays", role: "row", tabIndex: -1, part: "weekdays" }, labels.map((label, index) => (h("div", { key: `weekday-${index}`, class: "weekday", role: "columnheader", tabIndex: -1, "aria-label": fullNames[index], part: "weekday" }, label)))));
     }
     /**
      * Renderiza a grade de dias do mês atual.
@@ -727,7 +778,7 @@ export class DatePicker {
         const normalizedFocusedDate = this.getNormalizedFocusedDate(interval);
         const today = new Date();
         const weeks = Array.from({ length: Math.ceil(dates.length / 7) }, (_, index) => dates.slice(index * 7, index * 7 + 7));
-        return (h("div", { class: "monthdays", role: "rowgroup", part: "grid" }, weeks.map((week) => (h("div", { key: `week-${format(week[0], 'yyyy-MM-dd')}`, class: "week", role: "row", tabIndex: -1 }, week.map((date) => this.renderDayCell(date, normalizedFocusedDate, today)))))));
+        return (h("div", { class: "monthdays", role: "rowgroup", part: "grid" }, weeks.map((week) => (h("div", { key: `week-${format(week[0], DAY_KEY_FORMAT)}`, class: "week", role: "row", tabIndex: -1 }, week.map((date) => this.renderDayCell(date, normalizedFocusedDate, today)))))));
     }
     /**
      * Renderiza uma célula de dia com estado visual apropriado.
@@ -738,17 +789,15 @@ export class DatePicker {
      * @internal
      */
     renderDayCell(date, normalizedFocusedDate, today) {
-        const dateKey = format(date, 'yyyy-MM-dd');
-        const disabled = this.disabled || this.isDateDisabled(date);
-        const isSelected = this.selectionMode === 'single' && this.value !== null && isSameDay(date, this.value);
-        const isRangeStart = this.selectionMode === 'range' && this.rangeStart !== null && isSameDay(date, this.rangeStart);
-        const isRangeEnd = this.selectionMode === 'range' && this.rangeEnd !== null && isSameDay(date, this.rangeEnd);
-        const isActiveDay = isSelected || isRangeStart || isRangeEnd;
+        const dateKey = format(date, DAY_KEY_FORMAT);
+        const disabled = this.disabled || this.disabledDateKeys.has(dateKey);
+        const state = this.getDayCellState(date, today);
+        const isActiveDay = state.isSelected || state.isRangeStart || state.isRangeEnd;
         const isFocused = isSameDay(date, normalizedFocusedDate);
-        return (h("div", { key: dateKey, role: "gridcell", tabIndex: this.disabled ? undefined : isFocused ? 0 : -1, "data-date": dateKey, class: { ...this.getDayCssClasses(date, today), disabled }, onClick: disabled ? undefined : this.handleDayCellClick, onKeyDown: disabled ? undefined : this.handleGridKeydown, "aria-label": this.getDayCellAriaLabel(date), "aria-selected": isActiveDay ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, part: "day" }, this.getDayWithLeadingZero(date)));
+        return (h("div", { key: dateKey, role: "gridcell", tabIndex: this.disabled ? undefined : isFocused ? 0 : -1, "data-date": dateKey, class: this.getDayCssClasses(state, disabled), onClick: disabled ? undefined : this.handleDayCellClick, onKeyDown: this.handleGridKeydown, "aria-label": this.getDayCellAriaLabel(date, state), "aria-selected": isActiveDay ? 'true' : 'false', "aria-current": state.isToday ? 'date' : null, "aria-disabled": disabled ? 'true' : null, part: "day" }, this.getDayWithLeadingZero(date)));
     }
     render() {
-        return (h(Host, { key: '652b18891338dd9d009e87fb2383dc3c1c78c6ee' }, h("div", { key: '3c441b0df40d69767ee4c3e8166e9403988def5d', class: "br-date-picker", part: "container" }, this.renderCalendarHeader(), this.renderCalendar())));
+        return (h(Host, { key: 'a424375485910757405f135e35b7b07f0e1dccc2' }, h("div", { key: '3f79a2d3ed76cb113f047771e50d3410c15398e1', class: "br-date-picker", part: "container" }, this.renderCalendarHeader(), this.renderCalendar())));
     }
     static get is() { return "br-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime-picker/datetime-input/datetime-input.css

@@ -1 +1 @@
-*,*::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{display:block;width:100%}br-input[disabled]{opacity:1}
+*,*::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}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.pt-half{padding-top:var(--spacing-scale-half) !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)}mark,.mark{background:var(--red-warm-vivid-10);color:var(--color)}*[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{display:block;width:100%}br-input[disabled]{opacity:1}