@aurodesignsystem-dev/auro-formkit 0.0.0-pr1530.2 → 0.0.0-pr1531.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/accessibility.md +8 -17
- package/components/datepicker/demo/api.md +1 -1
- package/components/datepicker/demo/customize.min.js +29 -175
- package/components/datepicker/demo/index.min.js +29 -175
- package/components/datepicker/demo/keyboard-behavior.md +3 -3
- package/components/datepicker/demo/voiceover.md +4 -4
- package/components/datepicker/demo/why-datepicker.md +2 -2
- package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -11
- package/components/datepicker/dist/auro-calendar.d.ts +2 -26
- package/components/datepicker/dist/auro-datepicker.d.ts +1 -9
- package/components/datepicker/dist/index.js +29 -175
- package/components/datepicker/dist/registered.js +29 -175
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +53 -245
- package/components/form/demo/getting-started.min.js +53 -245
- package/components/form/demo/index.min.js +53 -245
- package/components/form/demo/registerDemoDeps.min.js +53 -245
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.min.js +16 -62
- package/components/select/demo/getting-started.min.js +16 -62
- package/components/select/demo/index.min.js +16 -62
- package/components/select/dist/auro-select.d.ts +0 -6
- package/components/select/dist/index.js +16 -62
- package/components/select/dist/registered.js +16 -62
- package/custom-elements.json +8 -38
- package/package.json +1 -1
|
@@ -11680,28 +11680,23 @@ var popoverVersion = '6.0.1';
|
|
|
11680
11680
|
* @returns {number|null} Local-midnight Unix timestamp (seconds), or null.
|
|
11681
11681
|
*/
|
|
11682
11682
|
function parseIsoToTimestamp(isoStr) {
|
|
11683
|
-
// Strict YYYY-MM-DD matcher with named groups. Rejects trailing garbage
|
|
11684
|
-
// ("2024x-01-01"), short segments ("2024-1-1"), and any non-digit
|
|
11685
|
-
// characters. `parseInt` alone accepted both because it stops at the
|
|
11686
|
-
// first non-digit and doesn't require a minimum length.
|
|
11687
|
-
const ISO_DATE_RE = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/u;
|
|
11688
|
-
const MAX_MONTH = 12;
|
|
11689
|
-
const MAX_DAY = 31;
|
|
11690
|
-
|
|
11691
11683
|
if (typeof isoStr !== 'string') {
|
|
11692
11684
|
return null;
|
|
11693
11685
|
}
|
|
11694
|
-
const
|
|
11695
|
-
if (
|
|
11686
|
+
const parts = isoStr.split('-');
|
|
11687
|
+
if (parts.length !== 3) {
|
|
11688
|
+
return null;
|
|
11689
|
+
}
|
|
11690
|
+
const year = parseInt(parts[0], 10);
|
|
11691
|
+
const month = parseInt(parts[1], 10);
|
|
11692
|
+
const day = parseInt(parts[2], 10);
|
|
11693
|
+
if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) {
|
|
11696
11694
|
return null;
|
|
11697
11695
|
}
|
|
11698
|
-
const year = Number(match.groups.year);
|
|
11699
|
-
const month = Number(match.groups.month);
|
|
11700
|
-
const day = Number(match.groups.day);
|
|
11701
11696
|
// Reject overflow values like "2024-13-40" — JS `new Date(year, month, day)`
|
|
11702
11697
|
// silently normalizes those to a different calendar day, which would
|
|
11703
11698
|
// disable the wrong date if we let the result through.
|
|
11704
|
-
if (month < 1 || month >
|
|
11699
|
+
if (month < 1 || month > 12 || day < 1 || day > 31) {
|
|
11705
11700
|
return null;
|
|
11706
11701
|
}
|
|
11707
11702
|
const date = new Date(year, month - 1, day);
|
|
@@ -12279,36 +12274,13 @@ class AuroCalendarCell extends i$1 {
|
|
|
12279
12274
|
}
|
|
12280
12275
|
|
|
12281
12276
|
firstUpdated() {
|
|
12282
|
-
this._initFromAncestors();
|
|
12283
|
-
}
|
|
12284
|
-
|
|
12285
|
-
/**
|
|
12286
|
-
* Wires the cell to its ancestor calendar-month and calendar (and, via
|
|
12287
|
-
* the calendar, to the datepicker). Extracted from firstUpdated() so the
|
|
12288
|
-
* retry loop can re-attempt without recursively invoking a Lit lifecycle
|
|
12289
|
-
* method (which is outside the framework's contract).
|
|
12290
|
-
* @private
|
|
12291
|
-
* @returns {void}
|
|
12292
|
-
*/
|
|
12293
|
-
_initFromAncestors() {
|
|
12294
12277
|
const calendarMonth = this.runtimeUtils.closestElement('auro-formkit-calendar-month', this);
|
|
12295
12278
|
const calendar = this.runtimeUtils.closestElement('auro-formkit-calendar', calendarMonth);
|
|
12296
12279
|
|
|
12297
12280
|
if (!calendar) {
|
|
12298
|
-
|
|
12299
|
-
// to attach — but cap attempts so a permanently detached cell doesn't
|
|
12300
|
-
// spin forever. 10 turns is far more than any observed race needs.
|
|
12301
|
-
this._firstUpdatedRetries = (this._firstUpdatedRetries || 0) + 1;
|
|
12302
|
-
if (this._firstUpdatedRetries > 10) {
|
|
12303
|
-
return;
|
|
12304
|
-
}
|
|
12305
|
-
this._firstUpdatedRetryTimer = setTimeout(() => {
|
|
12306
|
-
this._firstUpdatedRetryTimer = null;
|
|
12307
|
-
this._initFromAncestors();
|
|
12308
|
-
}, 0);
|
|
12281
|
+
setTimeout(() => this.firstUpdated(), 0);
|
|
12309
12282
|
return;
|
|
12310
12283
|
}
|
|
12311
|
-
this._firstUpdatedRetries = 0;
|
|
12312
12284
|
this.calendar = calendar;
|
|
12313
12285
|
this.datepicker = calendar.datepicker;
|
|
12314
12286
|
this._slotContentHandler = () => {
|
|
@@ -12336,10 +12308,6 @@ class AuroCalendarCell extends i$1 {
|
|
|
12336
12308
|
if (this.datepicker && this._slotContentHandler) {
|
|
12337
12309
|
this.datepicker.removeEventListener('auroDatePicker-newSlotContent', this._slotContentHandler);
|
|
12338
12310
|
}
|
|
12339
|
-
if (this._firstUpdatedRetryTimer) {
|
|
12340
|
-
clearTimeout(this._firstUpdatedRetryTimer);
|
|
12341
|
-
this._firstUpdatedRetryTimer = null;
|
|
12342
|
-
}
|
|
12343
12311
|
}
|
|
12344
12312
|
|
|
12345
12313
|
/**
|
|
@@ -13717,7 +13685,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
13717
13685
|
}
|
|
13718
13686
|
}
|
|
13719
13687
|
|
|
13720
|
-
var formkitVersion$2 = '
|
|
13688
|
+
var formkitVersion$2 = '202607022150';
|
|
13721
13689
|
|
|
13722
13690
|
let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
13723
13691
|
`,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -13856,10 +13824,7 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
13856
13824
|
* Support will be removed in a future major release.
|
|
13857
13825
|
* @private
|
|
13858
13826
|
*/
|
|
13859
|
-
|
|
13860
|
-
// empty array doesn't trigger the deprecation warning. Assignments from
|
|
13861
|
-
// consumers still route through the setter below.
|
|
13862
|
-
this._disabledDays = [];
|
|
13827
|
+
this.disabledDays = [];
|
|
13863
13828
|
|
|
13864
13829
|
/**
|
|
13865
13830
|
* @private
|
|
@@ -13892,44 +13857,6 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
13892
13857
|
this._calendarInstanceId = Date.now().toString(36);
|
|
13893
13858
|
}
|
|
13894
13859
|
|
|
13895
|
-
/**
|
|
13896
|
-
* @deprecated See constructor JSDoc — migrate to
|
|
13897
|
-
* `auro-datepicker.blackoutDates`. The getter/setter pair exists so the
|
|
13898
|
-
* one-time deprecation warning fires as soon as a consumer assigns a
|
|
13899
|
-
* non-empty array (empty assignments are ignored — an empty array is
|
|
13900
|
-
* indistinguishable from the constructor default and would produce a
|
|
13901
|
-
* spurious warning), rather than only when `_getBlackoutSet()` happens
|
|
13902
|
-
* to rebuild.
|
|
13903
|
-
* @returns {Array} The current legacy `disabledDays` array.
|
|
13904
|
-
*/
|
|
13905
|
-
get disabledDays() {
|
|
13906
|
-
return this._disabledDays;
|
|
13907
|
-
}
|
|
13908
|
-
|
|
13909
|
-
/**
|
|
13910
|
-
* @param {Array} value - The legacy `disabledDays` array to set.
|
|
13911
|
-
*/
|
|
13912
|
-
set disabledDays(value) {
|
|
13913
|
-
const oldValue = this._disabledDays;
|
|
13914
|
-
// Coerce non-arrays to `[]`. Consumers occasionally pass `null`
|
|
13915
|
-
// (Lit's Array attribute converter returns null for a missing/empty
|
|
13916
|
-
// attribute) or misuse the API; downstream code in
|
|
13917
|
-
// `auro-calendar-cell.isEnabled` calls `.findIndex()` on this value
|
|
13918
|
-
// without an Array.isArray guard, so a truthy non-array would throw
|
|
13919
|
-
// at render.
|
|
13920
|
-
const coerced = Array.isArray(value) ? value : [];
|
|
13921
|
-
if (coerced.length > 0) {
|
|
13922
|
-
this._warnDisabledDaysDeprecated();
|
|
13923
|
-
}
|
|
13924
|
-
this._disabledDays = coerced;
|
|
13925
|
-
// `disabledDays` is a Lit `@property({ type: Array })` on the
|
|
13926
|
-
// RangeDatepicker base class; Lit's generated setter (which we've
|
|
13927
|
-
// overridden here to insert the warning) is what normally invalidates
|
|
13928
|
-
// the reactive cycle. Re-invoke requestUpdate manually so consumer
|
|
13929
|
-
// assignments still re-render the calendar.
|
|
13930
|
-
this.requestUpdate('disabledDays', oldValue);
|
|
13931
|
-
}
|
|
13932
|
-
|
|
13933
13860
|
static get styles() {
|
|
13934
13861
|
return [
|
|
13935
13862
|
styleCss$7,
|
|
@@ -14475,19 +14402,8 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
14475
14402
|
/**
|
|
14476
14403
|
* Returns a memoized Set of blackout timestamps (seconds) drawn from both
|
|
14477
14404
|
* the legacy `disabledDays` array and the datepicker's ISO `blackoutDates`.
|
|
14478
|
-
*
|
|
14479
|
-
*
|
|
14480
|
-
* consumer reassigns the array (`el.blackoutDates = [...]`), matching
|
|
14481
|
-
* Lit's own reactivity semantics for array properties. In-place mutations
|
|
14482
|
-
* on the existing array (`push`, `splice`, index assignment) will NOT
|
|
14483
|
-
* invalidate the cache and the new entries will be silently ignored.
|
|
14484
|
-
* Consumers must reassign to update — see the JSDoc on
|
|
14485
|
-
* `auro-datepicker.blackoutDates` for the recommended pattern.
|
|
14486
|
-
*
|
|
14487
|
-
* A shallow-equality tier was considered but rejected: it would run
|
|
14488
|
-
* O(N) work on every cell render (this method is called per-cell via
|
|
14489
|
-
* `isBlackout()`) and still wouldn't catch same-length value swaps,
|
|
14490
|
-
* offering a false sense of safety.
|
|
14405
|
+
* The cache invalidates when either source array's reference changes, which
|
|
14406
|
+
* matches Lit's own reactive identity semantics for array properties.
|
|
14491
14407
|
* @private
|
|
14492
14408
|
* @returns {Set<Number>}
|
|
14493
14409
|
*/
|
|
@@ -14668,24 +14584,7 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
14668
14584
|
// rendered month(s) first so a single-month calendar does not pick a date
|
|
14669
14585
|
// that has no DOM cell. Determine the visible range based on centralDate and
|
|
14670
14586
|
// the number of rendered months.
|
|
14671
|
-
|
|
14672
|
-
// numCalendars is assigned inside renderAllCalendars(), which runs during
|
|
14673
|
-
// render() — so by the time the visible-change handler in updated()
|
|
14674
|
-
// calls computeActiveDate() in the same cycle, numCalendars is normally
|
|
14675
|
-
// set. Guard against the pre-first-render path anyway (e.g. any future
|
|
14676
|
-
// caller that reaches computeActiveDate before render() has run):
|
|
14677
|
-
// Math.max(undefined, 1) is NaN, which would silently skip the
|
|
14678
|
-
// visible-month scan below. Fall back to maximumRenderableMonths'
|
|
14679
|
-
// desktop default (1 for non-range, 2 for range) so the scan window is
|
|
14680
|
-
// correctly sized whenever numCalendars is not yet populated.
|
|
14681
|
-
let renderedMonths = null;
|
|
14682
|
-
|
|
14683
|
-
if (Number.isFinite(this.numCalendars) && this.numCalendars > 0) {
|
|
14684
|
-
renderedMonths = this.numCalendars;
|
|
14685
|
-
} else {
|
|
14686
|
-
renderedMonths = this.noRange ? 1 : 2;
|
|
14687
|
-
}
|
|
14688
|
-
|
|
14587
|
+
const renderedMonths = Math.max(this.numCalendars, 1);
|
|
14689
14588
|
const visibleAnchor = this.centralDateObject ?? new Date(now * 1000);
|
|
14690
14589
|
const visMonthStart = new Date(visibleAnchor.getFullYear(), visibleAnchor.getMonth(), 1);
|
|
14691
14590
|
visMonthStart.setHours(0, 0, 0, 0);
|
|
@@ -14955,8 +14854,6 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
14955
14854
|
let targetIndex = -1;
|
|
14956
14855
|
if (direction === 'next') {
|
|
14957
14856
|
targetIndex = currentIndex + 1;
|
|
14958
|
-
} else if (direction === 'prev') {
|
|
14959
|
-
targetIndex = currentIndex - 1;
|
|
14960
14857
|
}
|
|
14961
14858
|
|
|
14962
14859
|
if (targetIndex >= 0 && targetIndex < allCells.length) {
|
|
@@ -15561,10 +15458,6 @@ class AuroCalendar extends RangeDatepicker {
|
|
|
15561
15458
|
* originally tried aria-live="polite" here, but VoiceOver treats
|
|
15562
15459
|
* polite as "wait until idle" — which never happens during active
|
|
15563
15460
|
* keyboard navigation — so the announcements were silently dropped.
|
|
15564
|
-
*
|
|
15565
|
-
* This is a documented deviation from WCAG 2.1 SC 4.1.3, which
|
|
15566
|
-
* prefers `polite` for status messages. See the "Documented
|
|
15567
|
-
* Deviation" section in components/datepicker/docs/pages/accessibility.md.
|
|
15568
15461
|
* @private
|
|
15569
15462
|
* @param {String} dateStr - The localized date string to announce.
|
|
15570
15463
|
* @returns {void}
|
|
@@ -19634,7 +19527,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
19634
19527
|
}
|
|
19635
19528
|
};
|
|
19636
19529
|
|
|
19637
|
-
var formkitVersion$1 = '
|
|
19530
|
+
var formkitVersion$1 = '202607022150';
|
|
19638
19531
|
|
|
19639
19532
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
19640
19533
|
static get properties() {
|
|
@@ -33256,7 +33149,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
33256
33149
|
}
|
|
33257
33150
|
};
|
|
33258
33151
|
|
|
33259
|
-
var formkitVersion = '
|
|
33152
|
+
var formkitVersion = '202607022150';
|
|
33260
33153
|
|
|
33261
33154
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
33262
33155
|
// See LICENSE in the project root for license information.
|
|
@@ -34633,15 +34526,6 @@ const datepickerKeyboardStrategy = {
|
|
|
34633
34526
|
evt.stopPropagation();
|
|
34634
34527
|
evt.preventDefault();
|
|
34635
34528
|
|
|
34636
|
-
// Signal to the visibility-change handler in auro-datepicker.js that
|
|
34637
|
-
// focus should be restored to the trigger regardless of hasFocus.
|
|
34638
|
-
// hidePopover() (desktop non-modal path) does not auto-restore focus,
|
|
34639
|
-
// and hiding the grid's popover ancestor drops focus to <body>. That
|
|
34640
|
-
// synchronously fires focusout on the datepicker host — clearing
|
|
34641
|
-
// hasFocus — before updated() runs, which would otherwise skip the
|
|
34642
|
-
// input refocus. Native <dialog>.close() (modal path) restores focus
|
|
34643
|
-
// itself, but the flag is harmless there.
|
|
34644
|
-
component._restoreFocusOnClose = true;
|
|
34645
34529
|
component.hideBib();
|
|
34646
34530
|
},
|
|
34647
34531
|
|
|
@@ -34915,14 +34799,6 @@ class AuroDatePicker extends AuroElement {
|
|
|
34915
34799
|
|
|
34916
34800
|
/**
|
|
34917
34801
|
* Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
|
|
34918
|
-
*
|
|
34919
|
-
* **Immutable update required.** The datepicker treats this array as
|
|
34920
|
-
* immutable and memoizes a lookup Set keyed on the array's reference
|
|
34921
|
-
* identity — matching Lit's own reactivity semantics for array
|
|
34922
|
-
* properties. In-place mutations (`blackoutDates.push(...)`,
|
|
34923
|
-
* `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
|
|
34924
|
-
* invalidate the cache and the new entries will be silently ignored.
|
|
34925
|
-
* To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
|
|
34926
34802
|
*/
|
|
34927
34803
|
blackoutDates: {
|
|
34928
34804
|
type: Array,
|
|
@@ -35808,13 +35684,12 @@ class AuroDatePicker extends AuroElement {
|
|
|
35808
35684
|
this.calendar.activeCellDate = null;
|
|
35809
35685
|
|
|
35810
35686
|
// Show the month containing the selected date (or today) instead of
|
|
35811
|
-
// whichever month the user last navigated to.
|
|
35812
|
-
// updateCentralDate so centralDate stays first-of-month.
|
|
35687
|
+
// whichever month the user last navigated to.
|
|
35813
35688
|
// Respect consumer-provided centralDate/calendarStartDate if no value is set.
|
|
35814
35689
|
if (this.valueObject) {
|
|
35815
|
-
this.
|
|
35690
|
+
this.centralDate = this.value;
|
|
35816
35691
|
} else if (!this.centralDate && !this.calendarStartDate && !this.minDate) {
|
|
35817
|
-
this.
|
|
35692
|
+
this.centralDate = dateFormatter$1.toISOFormatString(new Date());
|
|
35818
35693
|
}
|
|
35819
35694
|
}
|
|
35820
35695
|
|
|
@@ -35872,15 +35747,8 @@ class AuroDatePicker extends AuroElement {
|
|
|
35872
35747
|
// Always clear the inert flag. Only restore focus to the input when the datepicker
|
|
35873
35748
|
// still has focus (e.g. Escape, date selected) — not when the user tabbed away,
|
|
35874
35749
|
// which would pull them back and require extra Tab presses to escape.
|
|
35875
|
-
//
|
|
35876
|
-
// `_restoreFocusOnClose` is set by the Escape handler in
|
|
35877
|
-
// datepickerKeyboardStrategy.js to force restore even when hasFocus
|
|
35878
|
-
// has already been cleared — hidePopover() (desktop non-modal path)
|
|
35879
|
-
// can drop focus to <body> before this update fires.
|
|
35880
35750
|
this.dropdown.trigger.inert = false;
|
|
35881
|
-
|
|
35882
|
-
this._restoreFocusOnClose = false;
|
|
35883
|
-
if (shouldRestoreFocus) {
|
|
35751
|
+
if (this.hasFocus) {
|
|
35884
35752
|
requestAnimationFrame(() => {
|
|
35885
35753
|
if (!this.dropdown.isPopoverVisible) {
|
|
35886
35754
|
this.inputList[0].focus();
|
|
@@ -36326,18 +36194,6 @@ class AuroDatePicker extends AuroElement {
|
|
|
36326
36194
|
this.calendar.requestUpdate();
|
|
36327
36195
|
this.dispatchEvent(new CustomEvent('auroDatePicker-newSlotContent'));
|
|
36328
36196
|
}
|
|
36329
|
-
|
|
36330
|
-
// Range invariant: if a value change (from click or programmatic) has
|
|
36331
|
-
// moved start past end, clear valueEnd here so both properties land in
|
|
36332
|
-
// the SAME reactive cycle. Doing it in updated() would schedule a
|
|
36333
|
-
// second cycle after cellClickActive/wasCellClick has already been
|
|
36334
|
-
// consumed by the value branch, leaving the valueEnd branch to run
|
|
36335
|
-
// with a stale handshake and racing with any intervening programmatic
|
|
36336
|
-
// value assignments.
|
|
36337
|
-
if ((changedProperties.has('value') || changedProperties.has('valueEnd')) &&
|
|
36338
|
-
this.valueObject && this.valueEndObject && this.valueObject > this.valueEndObject) {
|
|
36339
|
-
this.valueEnd = undefined;
|
|
36340
|
-
}
|
|
36341
36197
|
}
|
|
36342
36198
|
|
|
36343
36199
|
updated(changedProperties) {
|
|
@@ -36405,12 +36261,8 @@ class AuroDatePicker extends AuroElement {
|
|
|
36405
36261
|
|
|
36406
36262
|
if (this.value && this.value.length === this.inputList[0].lengthForType && !(this.wasCellClick && this.range)) {
|
|
36407
36263
|
// Skip centralDate update when user clicked a cell in range mode
|
|
36408
|
-
// to prevent the displayed months from shifting
|
|
36409
|
-
|
|
36410
|
-
// assignment of the raw value briefly holds a mid-month string
|
|
36411
|
-
// and violates the invariant that observers (e.g. calendar sync)
|
|
36412
|
-
// rely on.
|
|
36413
|
-
this.calendarRenderUtil.updateCentralDate(this, this.value);
|
|
36264
|
+
// to prevent the displayed months from shifting
|
|
36265
|
+
this.centralDate = this.value;
|
|
36414
36266
|
}
|
|
36415
36267
|
|
|
36416
36268
|
this.setHasValue();
|
|
@@ -36468,10 +36320,8 @@ class AuroDatePicker extends AuroElement {
|
|
|
36468
36320
|
|
|
36469
36321
|
if (this.valueEnd && this.valueEnd.length === this.inputList[1].lengthForType && !this.wasCellClick) {
|
|
36470
36322
|
// Skip centralDate update when user clicked a cell in range mode
|
|
36471
|
-
// to prevent the displayed months from shifting
|
|
36472
|
-
|
|
36473
|
-
// (see matching comment in the value branch above).
|
|
36474
|
-
this.calendarRenderUtil.updateCentralDate(this, this.valueEnd);
|
|
36323
|
+
// to prevent the displayed months from shifting
|
|
36324
|
+
this.centralDate = this.valueEnd;
|
|
36475
36325
|
}
|
|
36476
36326
|
|
|
36477
36327
|
this.validate();
|
|
@@ -36495,6 +36345,10 @@ class AuroDatePicker extends AuroElement {
|
|
|
36495
36345
|
this.validation.validate(lastInput, true);
|
|
36496
36346
|
}
|
|
36497
36347
|
|
|
36348
|
+
if (this.valueObject && this.valueEndObject && this.valueObject > this.valueEndObject) {
|
|
36349
|
+
this.valueEnd = undefined;
|
|
36350
|
+
}
|
|
36351
|
+
|
|
36498
36352
|
// This resets the datepicker when the minDate is set to a new value that is
|
|
36499
36353
|
// a later date than the current value date
|
|
36500
36354
|
if (changedProperties.has('minDate') && this.minDate) {
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
<td>-</td>
|
|
34
34
|
<td>Collapsed</td>
|
|
35
35
|
<td>Trigger input, <strong>NOT</strong> the input clear button</td>
|
|
36
|
-
<td>Opens the calendar bib. Focus moves to the calendar grid
|
|
36
|
+
<td>Opens the calendar bib. Focus moves to the calendar grid, with <code>aria-activedescendant</code> pointing to the active date cell. The Enter key behavior overrides the inherited <code>auro-dropdown</code> key behavior outlined below.</td>
|
|
37
37
|
</tr>
|
|
38
38
|
<tr>
|
|
39
39
|
<td>Space</td>
|
|
40
40
|
<td>-</td>
|
|
41
41
|
<td>Collapsed</td>
|
|
42
42
|
<td>Trigger input, <strong>NOT</strong> the input clear button</td>
|
|
43
|
-
<td>Opens the calendar bib. Focus moves to the calendar grid
|
|
43
|
+
<td>Opens the calendar bib. Focus moves to the calendar grid, with <code>aria-activedescendant</code> pointing to the active date cell. The Space key behavior overrides the inherited <code>auro-dropdown</code> key behavior outlined below.</td>
|
|
44
44
|
</tr>
|
|
45
45
|
</tbody>
|
|
46
46
|
</table>
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
</tbody>
|
|
90
90
|
</table>
|
|
91
91
|
<auro-header level="3" id="keyEvents-calendarGrid">Calendar grid</auro-header>
|
|
92
|
-
<p>When the calendar bib is open, DOM focus
|
|
92
|
+
<p>When the calendar bib is open, DOM focus remains on a wrapper element (<code>#calendarGrid</code>) while <code>aria-activedescendant</code> points to a proxy element that mirrors the active cell's ARIA attributes. Arrow keys move the active cell indicator without wrapping — when a boundary is reached the calendar navigates to the adjacent month. A debounced live region announces the full date context after navigation pauses.</p>
|
|
93
93
|
<table>
|
|
94
94
|
<thead>
|
|
95
95
|
<tr>
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
<auro-header level="3" id="voiceOverClearButton">Clear Button</auro-header>
|
|
38
38
|
<p>When the clear button is focused, VoiceOver announces the <code>aria-label</code> from the <code>ariaLabel.input.clear</code> slot (or the default i18n text), followed by <em>"button"</em>.</p>
|
|
39
39
|
<auro-header level="3" id="voiceOverCalendarNavigation">Calendar Navigation</auro-header>
|
|
40
|
-
<p>When the calendar bib is open, DOM focus stays on the calendar grid wrapper
|
|
40
|
+
<p>When the calendar bib is open, DOM focus stays on the calendar grid wrapper while <code>aria-activedescendant</code> points to a proxy element that mirrors the active cell's ARIA attributes. This prevents duplicate screen reader announcements during rapid arrow-key navigation. A debounced live region (150 ms) announces the full context after the user pauses.</p>
|
|
41
41
|
<p>Users can navigate calendar cells using VoiceOver gestures (swipe left/right) or arrow keys. Each cell announces:</p>
|
|
42
42
|
<ul>
|
|
43
43
|
<li>The full localized date (e.g. <em>"Thursday, May 14, 2026"</em>)</li>
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
<li><em>"current date"</em> for today's date (via <code>aria-current="date"</code>)</li>
|
|
48
48
|
<li>Selection state: <em>"selected"</em> or not (via <code>aria-selected</code>)</li>
|
|
49
49
|
</ul>
|
|
50
|
-
<p>Out-of-range cells (outside min/max bounds)
|
|
50
|
+
<p>Out-of-range cells (outside min/max bounds) are completely hidden from VoiceOver with <code>aria-hidden="true"</code>.</p>
|
|
51
51
|
<auro-header level="3" id="voiceOverDateSelection">Date Selection</auro-header>
|
|
52
52
|
<p>When a date is selected, an <code>aria-live="assertive"</code> region announces the selected date (e.g. <em>"Thursday, May 14, 2026"</em>). For range datepickers, both the start and end selections are announced.</p>
|
|
53
53
|
<auro-header level="3" id="voiceOverDialogName">Dialog Name</auro-header>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
<ol>
|
|
71
71
|
<li><strong>Focus</strong> — Tab to the datepicker input.</li>
|
|
72
72
|
<li><strong>Type a date</strong> — Enter a date value directly, or press Enter/Space to open the calendar.</li>
|
|
73
|
-
<li><strong>Calendar opens</strong> — Focus moves to the calendar grid wrapper
|
|
73
|
+
<li><strong>Calendar opens</strong> — Focus moves to the calendar grid wrapper, with <code>aria-activedescendant</code> pointing to the active date. VoiceOver announces the active date. Navigate dates with VoiceOver gestures (swipe) or arrow keys.</li>
|
|
74
74
|
<li><strong>Select a date</strong> — Activate a calendar cell (double-tap with VoiceOver, or Enter/Space with keyboard) to select the date. The selected date is announced via a live region and populates the input. The calendar remains open; close it by pressing Escape or activating the Done button.</li>
|
|
75
75
|
</ol>
|
|
76
76
|
<auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
<ol>
|
|
79
79
|
<li><strong>Focus</strong> — Tab or swipe to the datepicker input.</li>
|
|
80
80
|
<li>
|
|
81
|
-
<strong>Open:</strong> The fullscreen modal dialog opens. VoiceOver announces the dialog name (e.g. <em>"Departure date, dialog"</em>). Focus is moved to the calendar grid wrapper,
|
|
81
|
+
<strong>Open:</strong> The fullscreen modal dialog opens. VoiceOver announces the dialog name (e.g. <em>"Departure date, dialog"</em>). Focus is moved to the calendar grid wrapper, with <code>aria-activedescendant</code> pointing to the active date.
|
|
82
82
|
</li>
|
|
83
83
|
<li><strong>Navigate dates</strong> — Swipe through calendar cells or use arrow keys.</li>
|
|
84
84
|
<li>
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
<p>Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management.</p>
|
|
5
5
|
<p><code>auro-datepicker</code> provides:</p>
|
|
6
6
|
<ul>
|
|
7
|
-
<li><strong>Full keyboard navigation</strong> — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar. DOM focus
|
|
7
|
+
<li><strong>Full keyboard navigation</strong> — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar. The <code>aria-activedescendant</code> pattern keeps DOM focus on the calendar grid wrapper while visually indicating the active cell, so screen readers stay in sync without duplicate announcements during rapid navigation.</li>
|
|
8
8
|
<li><strong>Rich ARIA semantics</strong> — Every cell is labeled with its full date, day-of-week, and contextual state (e.g. "selected", "today", "unavailable", "range start", "in range"). Screen reader users hear meaningful announcements, not just numbers.</li>
|
|
9
9
|
<li><strong>Live region announcements</strong> — Month changes are announced via <code>aria-live</code> so assistive technology users know the visible month has changed.</li>
|
|
10
10
|
<li><strong>Reduced motion support</strong> — Scrolling and transitions respect <code>prefers-reduced-motion</code>.</li>
|
|
11
|
-
<li><strong>Focus management</strong> — Opening the calendar moves focus to the calendar grid wrapper
|
|
11
|
+
<li><strong>Focus management</strong> — Opening the calendar moves focus to the calendar grid wrapper, with <code>aria-activedescendant</code> pointing to the active date cell. Closing it returns focus to the trigger input. The fullscreen dialog uses <code>showModal()</code> for native inert-background behavior, while the desktop modal traps focus within the bib.</li>
|
|
12
12
|
</ul>
|
|
13
13
|
<p>By contrast, native <code><input type="date"></code> delegates all of this to the browser, and the result differs significantly between Chrome, Safari, and Firefox — often with no keyboard navigation of the calendar grid at all on some platforms.</p>
|
|
14
14
|
<auro-header level="2" id="dateRangeSelection">Date range selection</auro-header>
|
|
@@ -219,17 +219,6 @@ export class AuroCalendarCell extends LitElement {
|
|
|
219
219
|
*/
|
|
220
220
|
private handleSlotContent;
|
|
221
221
|
firstUpdated(): void;
|
|
222
|
-
/**
|
|
223
|
-
* Wires the cell to its ancestor calendar-month and calendar (and, via
|
|
224
|
-
* the calendar, to the datepicker). Extracted from firstUpdated() so the
|
|
225
|
-
* retry loop can re-attempt without recursively invoking a Lit lifecycle
|
|
226
|
-
* method (which is outside the framework's contract).
|
|
227
|
-
* @private
|
|
228
|
-
* @returns {void}
|
|
229
|
-
*/
|
|
230
|
-
private _initFromAncestors;
|
|
231
|
-
_firstUpdatedRetries: any;
|
|
232
|
-
_firstUpdatedRetryTimer: any;
|
|
233
222
|
calendar: any;
|
|
234
223
|
datepicker: any;
|
|
235
224
|
_slotContentHandler: (() => void) | undefined;
|
|
@@ -173,15 +173,6 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
173
173
|
* @private
|
|
174
174
|
*/
|
|
175
175
|
private calendarRangeMonths;
|
|
176
|
-
/**
|
|
177
|
-
* @deprecated Use `auro-datepicker.blackoutDates` (an array of
|
|
178
|
-
* `YYYY-MM-DD` ISO strings) instead. This legacy array of Unix
|
|
179
|
-
* timestamps is still honored for backward compatibility but emits a
|
|
180
|
-
* one-time `console.debug` the first time a non-empty value is observed.
|
|
181
|
-
* Support will be removed in a future major release.
|
|
182
|
-
* @private
|
|
183
|
-
*/
|
|
184
|
-
private _disabledDays;
|
|
185
176
|
/**
|
|
186
177
|
* @private
|
|
187
178
|
*/
|
|
@@ -346,19 +337,8 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
346
337
|
/**
|
|
347
338
|
* Returns a memoized Set of blackout timestamps (seconds) drawn from both
|
|
348
339
|
* the legacy `disabledDays` array and the datepicker's ISO `blackoutDates`.
|
|
349
|
-
*
|
|
350
|
-
*
|
|
351
|
-
* consumer reassigns the array (`el.blackoutDates = [...]`), matching
|
|
352
|
-
* Lit's own reactivity semantics for array properties. In-place mutations
|
|
353
|
-
* on the existing array (`push`, `splice`, index assignment) will NOT
|
|
354
|
-
* invalidate the cache and the new entries will be silently ignored.
|
|
355
|
-
* Consumers must reassign to update — see the JSDoc on
|
|
356
|
-
* `auro-datepicker.blackoutDates` for the recommended pattern.
|
|
357
|
-
*
|
|
358
|
-
* A shallow-equality tier was considered but rejected: it would run
|
|
359
|
-
* O(N) work on every cell render (this method is called per-cell via
|
|
360
|
-
* `isBlackout()`) and still wouldn't catch same-length value swaps,
|
|
361
|
-
* offering a false sense of safety.
|
|
340
|
+
* The cache invalidates when either source array's reference changes, which
|
|
341
|
+
* matches Lit's own reactive identity semantics for array properties.
|
|
362
342
|
* @private
|
|
363
343
|
* @returns {Set<Number>}
|
|
364
344
|
*/
|
|
@@ -608,10 +588,6 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
608
588
|
* originally tried aria-live="polite" here, but VoiceOver treats
|
|
609
589
|
* polite as "wait until idle" — which never happens during active
|
|
610
590
|
* keyboard navigation — so the announcements were silently dropped.
|
|
611
|
-
*
|
|
612
|
-
* This is a documented deviation from WCAG 2.1 SC 4.1.3, which
|
|
613
|
-
* prefers `polite` for status messages. See the "Documented
|
|
614
|
-
* Deviation" section in components/datepicker/docs/pages/accessibility.md.
|
|
615
591
|
* @private
|
|
616
592
|
* @param {String} dateStr - The localized date string to announce.
|
|
617
593
|
* @returns {void}
|
|
@@ -54,14 +54,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
54
54
|
};
|
|
55
55
|
/**
|
|
56
56
|
* Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
|
|
57
|
-
*
|
|
58
|
-
* **Immutable update required.** The datepicker treats this array as
|
|
59
|
-
* immutable and memoizes a lookup Set keyed on the array's reference
|
|
60
|
-
* identity — matching Lit's own reactivity semantics for array
|
|
61
|
-
* properties. In-place mutations (`blackoutDates.push(...)`,
|
|
62
|
-
* `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
|
|
63
|
-
* invalidate the cache and the new entries will be silently ignored.
|
|
64
|
-
* To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
|
|
65
57
|
*/
|
|
66
58
|
blackoutDates: {
|
|
67
59
|
type: ArrayConstructor;
|
|
@@ -753,7 +745,7 @@ export class AuroDatePicker extends AuroElement {
|
|
|
753
745
|
*/
|
|
754
746
|
private configureDropdown;
|
|
755
747
|
dropdown: any;
|
|
756
|
-
|
|
748
|
+
centralDate: any;
|
|
757
749
|
/**
|
|
758
750
|
* Binds all behavior needed to the input after rendering.
|
|
759
751
|
* @private
|