@aurodesignsystem-dev/auro-formkit 0.0.0-pr1530.2 → 0.0.0-pr1531.0
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 +15 -6
- package/components/combobox/demo/getting-started.min.js +15 -6
- package/components/combobox/demo/index.min.js +15 -6
- package/components/combobox/dist/index.js +15 -6
- package/components/combobox/dist/registered.js +15 -6
- 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 +41 -178
- package/components/datepicker/demo/index.min.js +41 -178
- 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 +41 -178
- package/components/datepicker/dist/registered.js +41 -178
- 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 +89 -254
- package/components/form/demo/getting-started.min.js +89 -254
- package/components/form/demo/index.min.js +89 -254
- package/components/form/demo/registerDemoDeps.min.js +89 -254
- package/components/input/demo/customize.min.js +13 -4
- package/components/input/demo/getting-started.min.js +13 -4
- package/components/input/demo/index.min.js +13 -4
- package/components/input/dist/index.js +13 -4
- package/components/input/dist/registered.js +13 -4
- 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 +1480 -1510
- package/package.json +1 -1
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607022131';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607022131';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607022131';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607022131';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607022131';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4879
|
}
|
|
4880
4880
|
};
|
|
4881
4881
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4882
|
+
var formkitVersion$2 = '202607022131';
|
|
4883
4883
|
|
|
4884
4884
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4885
|
static get properties() {
|
|
@@ -17411,8 +17411,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17411
17411
|
*/
|
|
17412
17412
|
set format(value) {
|
|
17413
17413
|
const oldValue = this._format;
|
|
17414
|
-
this._format = value
|
|
17415
|
-
this._userSetFormat =
|
|
17414
|
+
this._format = value;
|
|
17415
|
+
this._userSetFormat = true;
|
|
17416
17416
|
this.requestUpdate('format', oldValue);
|
|
17417
17417
|
}
|
|
17418
17418
|
|
|
@@ -17424,7 +17424,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17424
17424
|
*/
|
|
17425
17425
|
_setFormatFromLocale(value) {
|
|
17426
17426
|
const oldValue = this._format;
|
|
17427
|
-
this._format = value
|
|
17427
|
+
this._format = value;
|
|
17428
17428
|
this.requestUpdate('format', oldValue);
|
|
17429
17429
|
}
|
|
17430
17430
|
|
|
@@ -17475,6 +17475,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17475
17475
|
|
|
17476
17476
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17477
17477
|
|
|
17478
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17479
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17480
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17481
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17482
|
+
// unset.
|
|
17483
|
+
if (this.format) {
|
|
17484
|
+
this._setFormatFromLocale(this.format.toLowerCase());
|
|
17485
|
+
}
|
|
17486
|
+
|
|
17478
17487
|
// use validity message override if declared when initializing the component
|
|
17479
17488
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17480
17489
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -18501,7 +18510,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18501
18510
|
}
|
|
18502
18511
|
};
|
|
18503
18512
|
|
|
18504
|
-
var formkitVersion$1 = '
|
|
18513
|
+
var formkitVersion$1 = '202607022131';
|
|
18505
18514
|
|
|
18506
18515
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18507
18516
|
// See LICENSE in the project root for license information.
|
|
@@ -19627,7 +19636,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19627
19636
|
}
|
|
19628
19637
|
}
|
|
19629
19638
|
|
|
19630
|
-
var formkitVersion = '
|
|
19639
|
+
var formkitVersion = '202607022131';
|
|
19631
19640
|
|
|
19632
19641
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19633
19642
|
|
|
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4879
|
}
|
|
4880
4880
|
};
|
|
4881
4881
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4882
|
+
var formkitVersion$2 = '202607022131';
|
|
4883
4883
|
|
|
4884
4884
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4885
|
static get properties() {
|
|
@@ -17411,8 +17411,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17411
17411
|
*/
|
|
17412
17412
|
set format(value) {
|
|
17413
17413
|
const oldValue = this._format;
|
|
17414
|
-
this._format = value
|
|
17415
|
-
this._userSetFormat =
|
|
17414
|
+
this._format = value;
|
|
17415
|
+
this._userSetFormat = true;
|
|
17416
17416
|
this.requestUpdate('format', oldValue);
|
|
17417
17417
|
}
|
|
17418
17418
|
|
|
@@ -17424,7 +17424,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17424
17424
|
*/
|
|
17425
17425
|
_setFormatFromLocale(value) {
|
|
17426
17426
|
const oldValue = this._format;
|
|
17427
|
-
this._format = value
|
|
17427
|
+
this._format = value;
|
|
17428
17428
|
this.requestUpdate('format', oldValue);
|
|
17429
17429
|
}
|
|
17430
17430
|
|
|
@@ -17475,6 +17475,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17475
17475
|
|
|
17476
17476
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17477
17477
|
|
|
17478
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17479
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17480
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17481
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17482
|
+
// unset.
|
|
17483
|
+
if (this.format) {
|
|
17484
|
+
this._setFormatFromLocale(this.format.toLowerCase());
|
|
17485
|
+
}
|
|
17486
|
+
|
|
17478
17487
|
// use validity message override if declared when initializing the component
|
|
17479
17488
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17480
17489
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -18501,7 +18510,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18501
18510
|
}
|
|
18502
18511
|
};
|
|
18503
18512
|
|
|
18504
|
-
var formkitVersion$1 = '
|
|
18513
|
+
var formkitVersion$1 = '202607022131';
|
|
18505
18514
|
|
|
18506
18515
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18507
18516
|
// See LICENSE in the project root for license information.
|
|
@@ -19627,7 +19636,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19627
19636
|
}
|
|
19628
19637
|
}
|
|
19629
19638
|
|
|
19630
|
-
var formkitVersion = '
|
|
19639
|
+
var formkitVersion = '202607022131';
|
|
19631
19640
|
|
|
19632
19641
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19633
19642
|
|
|
@@ -4894,7 +4894,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4894
4894
|
}
|
|
4895
4895
|
};
|
|
4896
4896
|
|
|
4897
|
-
var formkitVersion$2 = '
|
|
4897
|
+
var formkitVersion$2 = '202607022131';
|
|
4898
4898
|
|
|
4899
4899
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4900
4900
|
static get properties() {
|
|
@@ -17426,8 +17426,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17426
17426
|
*/
|
|
17427
17427
|
set format(value) {
|
|
17428
17428
|
const oldValue = this._format;
|
|
17429
|
-
this._format = value
|
|
17430
|
-
this._userSetFormat =
|
|
17429
|
+
this._format = value;
|
|
17430
|
+
this._userSetFormat = true;
|
|
17431
17431
|
this.requestUpdate('format', oldValue);
|
|
17432
17432
|
}
|
|
17433
17433
|
|
|
@@ -17439,7 +17439,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17439
17439
|
*/
|
|
17440
17440
|
_setFormatFromLocale(value) {
|
|
17441
17441
|
const oldValue = this._format;
|
|
17442
|
-
this._format = value
|
|
17442
|
+
this._format = value;
|
|
17443
17443
|
this.requestUpdate('format', oldValue);
|
|
17444
17444
|
}
|
|
17445
17445
|
|
|
@@ -17490,6 +17490,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17490
17490
|
|
|
17491
17491
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17492
17492
|
|
|
17493
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17494
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17495
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17496
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17497
|
+
// unset.
|
|
17498
|
+
if (this.format) {
|
|
17499
|
+
this._setFormatFromLocale(this.format.toLowerCase());
|
|
17500
|
+
}
|
|
17501
|
+
|
|
17493
17502
|
// use validity message override if declared when initializing the component
|
|
17494
17503
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17495
17504
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -18516,7 +18525,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18516
18525
|
}
|
|
18517
18526
|
};
|
|
18518
18527
|
|
|
18519
|
-
var formkitVersion$1 = '
|
|
18528
|
+
var formkitVersion$1 = '202607022131';
|
|
18520
18529
|
|
|
18521
18530
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18522
18531
|
// See LICENSE in the project root for license information.
|
|
@@ -19642,7 +19651,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19642
19651
|
}
|
|
19643
19652
|
}
|
|
19644
19653
|
|
|
19645
|
-
var formkitVersion = '
|
|
19654
|
+
var formkitVersion = '202607022131';
|
|
19646
19655
|
|
|
19647
19656
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19648
19657
|
|
|
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4812
4812
|
}
|
|
4813
4813
|
};
|
|
4814
4814
|
|
|
4815
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607022131';
|
|
4816
4816
|
|
|
4817
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4818
4818
|
static get properties() {
|
|
@@ -17337,8 +17337,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17337
17337
|
*/
|
|
17338
17338
|
set format(value) {
|
|
17339
17339
|
const oldValue = this._format;
|
|
17340
|
-
this._format = value
|
|
17341
|
-
this._userSetFormat =
|
|
17340
|
+
this._format = value;
|
|
17341
|
+
this._userSetFormat = true;
|
|
17342
17342
|
this.requestUpdate('format', oldValue);
|
|
17343
17343
|
}
|
|
17344
17344
|
|
|
@@ -17350,7 +17350,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17350
17350
|
*/
|
|
17351
17351
|
_setFormatFromLocale(value) {
|
|
17352
17352
|
const oldValue = this._format;
|
|
17353
|
-
this._format = value
|
|
17353
|
+
this._format = value;
|
|
17354
17354
|
this.requestUpdate('format', oldValue);
|
|
17355
17355
|
}
|
|
17356
17356
|
|
|
@@ -17401,6 +17401,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17401
17401
|
|
|
17402
17402
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17403
17403
|
|
|
17404
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17405
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17406
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17407
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17408
|
+
// unset.
|
|
17409
|
+
if (this.format) {
|
|
17410
|
+
this._setFormatFromLocale(this.format.toLowerCase());
|
|
17411
|
+
}
|
|
17412
|
+
|
|
17404
17413
|
// use validity message override if declared when initializing the component
|
|
17405
17414
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17406
17415
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -18427,7 +18436,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18427
18436
|
}
|
|
18428
18437
|
};
|
|
18429
18438
|
|
|
18430
|
-
var formkitVersion$1 = '
|
|
18439
|
+
var formkitVersion$1 = '202607022131';
|
|
18431
18440
|
|
|
18432
18441
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18433
18442
|
// See LICENSE in the project root for license information.
|
|
@@ -19553,7 +19562,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19553
19562
|
}
|
|
19554
19563
|
}
|
|
19555
19564
|
|
|
19556
|
-
var formkitVersion = '
|
|
19565
|
+
var formkitVersion = '202607022131';
|
|
19557
19566
|
|
|
19558
19567
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19559
19568
|
|
|
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4812
4812
|
}
|
|
4813
4813
|
};
|
|
4814
4814
|
|
|
4815
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607022131';
|
|
4816
4816
|
|
|
4817
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4818
4818
|
static get properties() {
|
|
@@ -17337,8 +17337,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17337
17337
|
*/
|
|
17338
17338
|
set format(value) {
|
|
17339
17339
|
const oldValue = this._format;
|
|
17340
|
-
this._format = value
|
|
17341
|
-
this._userSetFormat =
|
|
17340
|
+
this._format = value;
|
|
17341
|
+
this._userSetFormat = true;
|
|
17342
17342
|
this.requestUpdate('format', oldValue);
|
|
17343
17343
|
}
|
|
17344
17344
|
|
|
@@ -17350,7 +17350,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17350
17350
|
*/
|
|
17351
17351
|
_setFormatFromLocale(value) {
|
|
17352
17352
|
const oldValue = this._format;
|
|
17353
|
-
this._format = value
|
|
17353
|
+
this._format = value;
|
|
17354
17354
|
this.requestUpdate('format', oldValue);
|
|
17355
17355
|
}
|
|
17356
17356
|
|
|
@@ -17401,6 +17401,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17401
17401
|
|
|
17402
17402
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17403
17403
|
|
|
17404
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17405
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17406
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17407
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17408
|
+
// unset.
|
|
17409
|
+
if (this.format) {
|
|
17410
|
+
this._setFormatFromLocale(this.format.toLowerCase());
|
|
17411
|
+
}
|
|
17412
|
+
|
|
17404
17413
|
// use validity message override if declared when initializing the component
|
|
17405
17414
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17406
17415
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -18427,7 +18436,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18427
18436
|
}
|
|
18428
18437
|
};
|
|
18429
18438
|
|
|
18430
|
-
var formkitVersion$1 = '
|
|
18439
|
+
var formkitVersion$1 = '202607022131';
|
|
18431
18440
|
|
|
18432
18441
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18433
18442
|
// See LICENSE in the project root for license information.
|
|
@@ -19553,7 +19562,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19553
19562
|
}
|
|
19554
19563
|
}
|
|
19555
19564
|
|
|
19556
|
-
var formkitVersion = '
|
|
19565
|
+
var formkitVersion = '202607022131';
|
|
19557
19566
|
|
|
19558
19567
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19559
19568
|
|
|
@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
};
|
|
1116
1116
|
|
|
1117
|
-
var formkitVersion$1 = '
|
|
1117
|
+
var formkitVersion$1 = '202607022131';
|
|
1118
1118
|
|
|
1119
1119
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1120
1120
|
// See LICENSE in the project root for license information.
|
|
@@ -5460,7 +5460,7 @@ class AuroHelpText extends i$2 {
|
|
|
5460
5460
|
}
|
|
5461
5461
|
}
|
|
5462
5462
|
|
|
5463
|
-
var formkitVersion = '
|
|
5463
|
+
var formkitVersion = '202607022131';
|
|
5464
5464
|
|
|
5465
5465
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5466
5466
|
static get properties() {
|
|
@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
};
|
|
1116
1116
|
|
|
1117
|
-
var formkitVersion$1 = '
|
|
1117
|
+
var formkitVersion$1 = '202607022131';
|
|
1118
1118
|
|
|
1119
1119
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1120
1120
|
// See LICENSE in the project root for license information.
|
|
@@ -5460,7 +5460,7 @@ class AuroHelpText extends i$2 {
|
|
|
5460
5460
|
}
|
|
5461
5461
|
}
|
|
5462
5462
|
|
|
5463
|
-
var formkitVersion = '
|
|
5463
|
+
var formkitVersion = '202607022131';
|
|
5464
5464
|
|
|
5465
5465
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5466
5466
|
static get properties() {
|
|
@@ -1064,7 +1064,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
};
|
|
1066
1066
|
|
|
1067
|
-
var formkitVersion$1 = '
|
|
1067
|
+
var formkitVersion$1 = '202607022131';
|
|
1068
1068
|
|
|
1069
1069
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1070
1070
|
// See LICENSE in the project root for license information.
|
|
@@ -5392,7 +5392,7 @@ class AuroHelpText extends LitElement {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
}
|
|
5394
5394
|
|
|
5395
|
-
var formkitVersion = '
|
|
5395
|
+
var formkitVersion = '202607022131';
|
|
5396
5396
|
|
|
5397
5397
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5398
5398
|
static get properties() {
|
|
@@ -1064,7 +1064,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
};
|
|
1066
1066
|
|
|
1067
|
-
var formkitVersion$1 = '
|
|
1067
|
+
var formkitVersion$1 = '202607022131';
|
|
1068
1068
|
|
|
1069
1069
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1070
1070
|
// See LICENSE in the project root for license information.
|
|
@@ -5392,7 +5392,7 @@ class AuroHelpText extends LitElement {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
}
|
|
5394
5394
|
|
|
5395
|
-
var formkitVersion = '
|
|
5395
|
+
var formkitVersion = '202607022131';
|
|
5396
5396
|
|
|
5397
5397
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5398
5398
|
static get properties() {
|
|
@@ -32,20 +32,20 @@ The calendar uses the WAI-ARIA grid pattern for screen reader navigation:
|
|
|
32
32
|
| Attribute | Applied to | Description |
|
|
33
33
|
|---|---|---|
|
|
34
34
|
| `role="grid"` | Calendar table | Identifies the calendar as a grid. The month heading is rendered as visible text adjacent to the grid but is excluded from the accessibility tree (announcements are handled via the live region described below). |
|
|
35
|
-
| `role="rowgroup"` | Body group | Groups the week rows. |
|
|
35
|
+
| `role="rowgroup"` | Body group | Groups the week rows. The day-of-week header row is `aria-hidden="true"` (see below). |
|
|
36
36
|
| `role="row"` | Week row | Groups each week of date cells. |
|
|
37
|
-
|
|
|
38
|
-
| `role="gridcell"` | In-range date cell | Each selectable date cell. Includes `aria-selected`, `aria-current="date"` (for today), and
|
|
39
|
-
| Out-of-range date cell | Cells outside the valid min/max range
|
|
37
|
+
| Day-of-week header | Day-of-week row | Rendered as visible `<abbr>` elements with the full day name in the `title` attribute, but the row is `aria-hidden="true"` since the per-cell accessible name already includes the weekday name. |
|
|
38
|
+
| `role="gridcell"` | In-range date cell, active-descendant proxy | Each selectable date cell. Includes `aria-selected`, `aria-current="date"` (for today), and a visually-hidden text label. A proxy `<span>` inside the calendar grid wrapper mirrors the active cell's ARIA attributes for `aria-activedescendant`. |
|
|
39
|
+
| `role="presentation"` | Out-of-range date cell | Cells outside the valid min/max range. Also receive `aria-hidden="true"` and `tabindex="-1"` to remove them from both the accessibility tree and the tab order. |
|
|
40
40
|
| `aria-disabled="true"` | Blackout date cell | Cells matching the `blackout` dates list. Unlike out-of-range cells, blackout cells **remain focusable** via arrow-key navigation so screen reader users can discover them. The cell's label includes ", unavailable" to communicate that the date cannot be selected. |
|
|
41
41
|
| `aria-selected` | Date cell button | `"true"` for the selected date(s), `"false"` for all other in-range cells. |
|
|
42
|
-
| Accessible name | Date cell
|
|
42
|
+
| Accessible name | Date cell button | Provided via visually-hidden text content (not an `aria-label` attribute). Localized label built from `Intl.DateTimeFormat` (weekday, month, day, year), plus any date slot content (e.g. prices), the range position label (e.g., "range start"), and availability status (", unavailable" for blackout dates). |
|
|
43
43
|
|
|
44
44
|
<auro-header level="2" id="focusManagement">Focus Management</auro-header>
|
|
45
45
|
The component uses `delegatesFocus: true` on its shadow root, meaning focus is automatically delegated to the first focusable element inside the component (the date input).
|
|
46
46
|
|
|
47
|
-
<auro-header level="3" id="
|
|
48
|
-
The calendar
|
|
47
|
+
<auro-header level="3" id="ariaActivedescendant">aria-activedescendant</auro-header>
|
|
48
|
+
The calendar grid uses an **`aria-activedescendant`** pattern for keyboard navigation. DOM focus remains on a wrapper element (`#calendarGrid`) while `aria-activedescendant` points to a proxy `<span>` that mirrors the active cell's ARIA attributes (`aria-label`, `aria-selected`, `aria-current`, `aria-disabled`). This approach keeps the screen reader in sync with the visually active cell without moving DOM focus on every keystroke, which prevents duplicate announcements during rapid arrow-key navigation.
|
|
49
49
|
|
|
50
50
|
The active cell receives an `.activeCell` CSS class to display a visible focus ring, since the native `:focus-visible` pseudo-class applies to the grid wrapper (which holds actual DOM focus), not to individual cells.
|
|
51
51
|
|
|
@@ -57,7 +57,7 @@ The initial active cell is determined in priority order:
|
|
|
57
57
|
4. The first past enabled date.
|
|
58
58
|
|
|
59
59
|
<auro-header level="3" id="focusOnOpen">Focus on Open</auro-header>
|
|
60
|
-
When the calendar bib opens, focus moves to the calendar grid wrapper (`#calendarGrid`). The
|
|
60
|
+
When the calendar bib opens, focus moves to the calendar grid wrapper (`#calendarGrid`). The `aria-activedescendant` attribute points to a proxy element that carries the active date cell's label, so screen readers announce the active date. This applies to both desktop and fullscreen modes.
|
|
61
61
|
|
|
62
62
|
<auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
|
|
63
63
|
- **Date selection** — When a date is selected, the calendar's live region (`aria-live="assertive"`) announces the formatted date (e.g., "Wednesday, January 15, 2025"). For range datepickers, both the start and end date selections are announced.
|
|
@@ -66,15 +66,6 @@ When the calendar bib opens, focus moves to the calendar grid wrapper (`#calenda
|
|
|
66
66
|
- **Validation errors** — When a validation error occurs, the error message is rendered with `role="alert"` and `aria-live="assertive"`, causing it to be announced immediately without requiring focus.
|
|
67
67
|
- **Help text** — The help text content is associated with the input so that screen readers announce it as part of the element description when focused.
|
|
68
68
|
|
|
69
|
-
<auro-header level="3" id="ariaLiveDeviation">Documented Deviation: `aria-live="assertive"` for Arrow-Key Navigation</auro-header>
|
|
70
|
-
WCAG 2.1 SC 4.1.3 (Status Messages) generally recommends `aria-live="polite"` for non-critical status updates so screen readers don't interrupt the user. The calendar's navigation live region intentionally uses `aria-live="assertive"` instead. This is a knowing deviation, made for the following reasons:
|
|
71
|
-
|
|
72
|
-
- **VoiceOver behavior** — VoiceOver treats `polite` announcements as "wait until idle," and during active arrow-key traversal the screen reader is never idle. Polite announcements are silently dropped, leaving keyboard users with no feedback about which cell is now active. `assertive` is the only reliable way to communicate the newly focused date on macOS/iOS VoiceOver during navigation.
|
|
73
|
-
- **Interruption mitigation** — A 150 ms debounce is applied in [`announceFocusDebounced`](../../src/auro-calendar.js) so only the final cell after a burst of arrow keys is announced. Rapid navigation produces one announcement per pause, not one per keystroke, which minimizes the interruption cost of `assertive`.
|
|
74
|
-
- **Scope** — The same live region is reused for date selection and month-change announcements, all of which are user-initiated and expected. It is never used for background/system-generated updates.
|
|
75
|
-
|
|
76
|
-
Consumers auditing against APG or WCAG 4.1.3 should treat this as an intentional, documented trade-off between spec-preferred politeness and reliable VoiceOver support.
|
|
77
|
-
|
|
78
69
|
<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
|
|
79
70
|
- The `fromLabel` slot content is used as the accessible name for the first date input. It is also forwarded to the dropdown bib as the dialog's accessible name (`aria-labelledby`).
|
|
80
71
|
- When `range` is set, the `toLabel` slot content provides the accessible name for the second date input.
|
|
@@ -11,7 +11,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
11
11
|
|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
|
|
12
12
|
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
13
13
|
| `autoPlacement` | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
14
|
-
| `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD)
|
|
14
|
+
| `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
|
|
15
15
|
| `blackoutLabel` | `blackoutLabel` | | `string` | "'unavailable'" | Label announced for blackout (disabled but in-range) date cells. |
|
|
16
16
|
| `calendarEndDate` | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
17
17
|
| `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
|