@aurodesignsystem-dev/auro-formkit 0.0.0-pr1530.1 → 0.0.0-pr1530.2

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.
Files changed (50) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/customize.min.js +42 -29
  7. package/components/combobox/demo/getting-started.min.js +42 -29
  8. package/components/combobox/demo/index.min.js +42 -29
  9. package/components/combobox/dist/index.js +42 -29
  10. package/components/combobox/dist/registered.js +42 -29
  11. package/components/counter/demo/customize.min.js +2 -2
  12. package/components/counter/demo/index.min.js +2 -2
  13. package/components/counter/dist/index.js +2 -2
  14. package/components/counter/dist/registered.js +2 -2
  15. package/components/datepicker/demo/accessibility.md +4 -4
  16. package/components/datepicker/demo/customize.min.js +42 -29
  17. package/components/datepicker/demo/index.min.js +42 -29
  18. package/components/datepicker/demo/keyboard-behavior.md +3 -3
  19. package/components/datepicker/demo/voiceover.md +3 -3
  20. package/components/datepicker/demo/why-datepicker.md +2 -2
  21. package/components/datepicker/dist/index.js +42 -29
  22. package/components/datepicker/dist/registered.js +42 -29
  23. package/components/dropdown/demo/customize.min.js +1 -1
  24. package/components/dropdown/demo/getting-started.min.js +1 -1
  25. package/components/dropdown/demo/index.min.js +1 -1
  26. package/components/dropdown/dist/index.js +1 -1
  27. package/components/dropdown/dist/registered.js +1 -1
  28. package/components/form/demo/customize.min.js +190 -105
  29. package/components/form/demo/getting-started.min.js +190 -105
  30. package/components/form/demo/index.min.js +190 -105
  31. package/components/form/demo/registerDemoDeps.min.js +190 -105
  32. package/components/input/demo/customize.min.js +40 -27
  33. package/components/input/demo/getting-started.min.js +40 -27
  34. package/components/input/demo/index.min.js +40 -27
  35. package/components/input/dist/base-input.d.ts +20 -4
  36. package/components/input/dist/index.js +40 -27
  37. package/components/input/dist/registered.js +40 -27
  38. package/components/radio/demo/customize.min.js +1 -1
  39. package/components/radio/demo/getting-started.min.js +1 -1
  40. package/components/radio/demo/index.min.js +1 -1
  41. package/components/radio/dist/index.js +1 -1
  42. package/components/radio/dist/registered.js +1 -1
  43. package/components/select/demo/customize.min.js +62 -16
  44. package/components/select/demo/getting-started.min.js +62 -16
  45. package/components/select/demo/index.min.js +62 -16
  46. package/components/select/dist/auro-select.d.ts +6 -0
  47. package/components/select/dist/index.js +62 -16
  48. package/components/select/dist/registered.js +62 -16
  49. package/custom-elements.json +98 -44
  50. package/package.json +1 -1
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4812
4812
  }
4813
4813
  };
4814
4814
 
4815
- var formkitVersion$2 = '202607022134';
4815
+ var formkitVersion$2 = '202607022225';
4816
4816
 
4817
4817
  let AuroElement$2 = class AuroElement extends LitElement {
4818
4818
  static get properties() {
@@ -16820,14 +16820,16 @@ class BaseInput extends AuroElement$1 {
16820
16820
  this.label = 'Input label is undefined';
16821
16821
  this.layout = 'classic';
16822
16822
  this.locale = 'en-US';
16823
+ this._format = undefined;
16824
+
16825
+ /** @private */
16826
+ this._userSetFormat = false;
16823
16827
  this.max = undefined;
16824
16828
  this.maxLength = undefined;
16825
16829
  this.min = undefined;
16826
16830
  this.minLength = undefined;
16827
16831
  this.noValidate = false;
16828
16832
  this.onDark = false;
16829
- // Raw values returned from the input mask before model normalization.
16830
- this._rawMaskValue = undefined;
16831
16833
  this.required = false;
16832
16834
  this.setCustomValidityForType = undefined;
16833
16835
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -16985,7 +16987,8 @@ class BaseInput extends AuroElement$1 {
16985
16987
  */
16986
16988
  format: {
16987
16989
  type: String,
16988
- reflect: true
16990
+ reflect: true,
16991
+ noAccessor: true
16989
16992
  },
16990
16993
 
16991
16994
  /**
@@ -17323,6 +17326,34 @@ class BaseInput extends AuroElement$1 {
17323
17326
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
17324
17327
  }
17325
17328
 
17329
+ get format() {
17330
+ return this._format;
17331
+ }
17332
+
17333
+ /**
17334
+ * Overrides LitElement's generated accessor so we can track whether the
17335
+ * consumer explicitly set `format`. Locale-derived updates use
17336
+ * `_setFormatFromLocale` instead, which skips this flag.
17337
+ */
17338
+ set format(value) {
17339
+ const oldValue = this._format;
17340
+ this._format = value ? value.toLowerCase() : value;
17341
+ this._userSetFormat = Boolean(value);
17342
+ this.requestUpdate('format', oldValue);
17343
+ }
17344
+
17345
+ /**
17346
+ * Sets format without marking it as user-set. Used by locale auto-derive
17347
+ * so that a subsequent locale change can still update the format.
17348
+ * @private
17349
+ * @param {string} value
17350
+ */
17351
+ _setFormatFromLocale(value) {
17352
+ const oldValue = this._format;
17353
+ this._format = value ? value.toLowerCase() : value;
17354
+ this.requestUpdate('format', oldValue);
17355
+ }
17356
+
17326
17357
  connectedCallback() {
17327
17358
  super.connectedCallback();
17328
17359
 
@@ -17370,15 +17401,6 @@ class BaseInput extends AuroElement$1 {
17370
17401
 
17371
17402
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
17372
17403
 
17373
- // Normalize the format token to lowercase so case-mixed values supplied
17374
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
17375
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
17376
- // format silently misses the map and leaves `setCustomValidityForType`
17377
- // unset.
17378
- if (this.format) {
17379
- this.format = this.format.toLowerCase();
17380
- }
17381
-
17382
17404
  // use validity message override if declared when initializing the component
17383
17405
  if (this.hasAttribute('setCustomValidity')) {
17384
17406
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -17485,12 +17507,10 @@ class BaseInput extends AuroElement$1 {
17485
17507
  updated(changedProperties) {
17486
17508
  super.updated(changedProperties);
17487
17509
 
17488
- // When locale changes without an explicit format override, derive format from the new locale.
17489
- // Only runs if the current format is still the previous locale's default (not user-overridden).
17510
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
17490
17511
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
17491
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
17492
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
17493
- this.format = getDateFormatFromLocale(this.locale);
17512
+ if (!this._userSetFormat) {
17513
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
17494
17514
  }
17495
17515
  }
17496
17516
 
@@ -17661,9 +17681,6 @@ class BaseInput extends AuroElement$1 {
17661
17681
  this.maskInstance.on('accept', () => {
17662
17682
  if (this._configuringMask) return;
17663
17683
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
17664
- if (this.type === "date") {
17665
- this._rawMaskValue = this.maskInstance.value;
17666
- }
17667
17684
  });
17668
17685
 
17669
17686
  // Mask fires 'complete' on the restore step below for any value that
@@ -17671,9 +17688,6 @@ class BaseInput extends AuroElement$1 {
17671
17688
  this.maskInstance.on('complete', () => {
17672
17689
  if (this._configuringMask) return;
17673
17690
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
17674
- if (this.type === "date") {
17675
- this._rawMaskValue = this.maskInstance.value;
17676
- }
17677
17691
  });
17678
17692
 
17679
17693
  // Write existingValue through the mask (not the input directly) so
@@ -17910,8 +17924,7 @@ class BaseInput extends AuroElement$1 {
17910
17924
 
17911
17925
  // Set default date format if type=date and no format is defined
17912
17926
  if (this.type === "date" && !this.format) {
17913
- // Use locale to determine default date format
17914
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
17927
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
17915
17928
  this.util.updateFormat(this.format);
17916
17929
  }
17917
17930
  }
@@ -17940,7 +17953,7 @@ class BaseInput extends AuroElement$1 {
17940
17953
  const creditCard = this.matchInputValueToCreditCard();
17941
17954
  const previousFormat = this.format;
17942
17955
 
17943
- this.format = creditCard.maskFormat;
17956
+ this._setFormatFromLocale(creditCard.maskFormat);
17944
17957
 
17945
17958
  this.maxLength = creditCard.formatLength;
17946
17959
  this.minLength = creditCard.formatMinLength;
@@ -18414,7 +18427,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18414
18427
  }
18415
18428
  };
18416
18429
 
18417
- var formkitVersion$1 = '202607022134';
18430
+ var formkitVersion$1 = '202607022225';
18418
18431
 
18419
18432
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18420
18433
  // See LICENSE in the project root for license information.
@@ -19540,7 +19553,7 @@ class AuroBibtemplate extends LitElement {
19540
19553
  }
19541
19554
  }
19542
19555
 
19543
- var formkitVersion = '202607022134';
19556
+ var formkitVersion = '202607022225';
19544
19557
 
19545
19558
  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}`;
19546
19559
 
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4812
4812
  }
4813
4813
  };
4814
4814
 
4815
- var formkitVersion$2 = '202607022134';
4815
+ var formkitVersion$2 = '202607022225';
4816
4816
 
4817
4817
  let AuroElement$2 = class AuroElement extends LitElement {
4818
4818
  static get properties() {
@@ -16820,14 +16820,16 @@ class BaseInput extends AuroElement$1 {
16820
16820
  this.label = 'Input label is undefined';
16821
16821
  this.layout = 'classic';
16822
16822
  this.locale = 'en-US';
16823
+ this._format = undefined;
16824
+
16825
+ /** @private */
16826
+ this._userSetFormat = false;
16823
16827
  this.max = undefined;
16824
16828
  this.maxLength = undefined;
16825
16829
  this.min = undefined;
16826
16830
  this.minLength = undefined;
16827
16831
  this.noValidate = false;
16828
16832
  this.onDark = false;
16829
- // Raw values returned from the input mask before model normalization.
16830
- this._rawMaskValue = undefined;
16831
16833
  this.required = false;
16832
16834
  this.setCustomValidityForType = undefined;
16833
16835
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -16985,7 +16987,8 @@ class BaseInput extends AuroElement$1 {
16985
16987
  */
16986
16988
  format: {
16987
16989
  type: String,
16988
- reflect: true
16990
+ reflect: true,
16991
+ noAccessor: true
16989
16992
  },
16990
16993
 
16991
16994
  /**
@@ -17323,6 +17326,34 @@ class BaseInput extends AuroElement$1 {
17323
17326
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
17324
17327
  }
17325
17328
 
17329
+ get format() {
17330
+ return this._format;
17331
+ }
17332
+
17333
+ /**
17334
+ * Overrides LitElement's generated accessor so we can track whether the
17335
+ * consumer explicitly set `format`. Locale-derived updates use
17336
+ * `_setFormatFromLocale` instead, which skips this flag.
17337
+ */
17338
+ set format(value) {
17339
+ const oldValue = this._format;
17340
+ this._format = value ? value.toLowerCase() : value;
17341
+ this._userSetFormat = Boolean(value);
17342
+ this.requestUpdate('format', oldValue);
17343
+ }
17344
+
17345
+ /**
17346
+ * Sets format without marking it as user-set. Used by locale auto-derive
17347
+ * so that a subsequent locale change can still update the format.
17348
+ * @private
17349
+ * @param {string} value
17350
+ */
17351
+ _setFormatFromLocale(value) {
17352
+ const oldValue = this._format;
17353
+ this._format = value ? value.toLowerCase() : value;
17354
+ this.requestUpdate('format', oldValue);
17355
+ }
17356
+
17326
17357
  connectedCallback() {
17327
17358
  super.connectedCallback();
17328
17359
 
@@ -17370,15 +17401,6 @@ class BaseInput extends AuroElement$1 {
17370
17401
 
17371
17402
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
17372
17403
 
17373
- // Normalize the format token to lowercase so case-mixed values supplied
17374
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
17375
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
17376
- // format silently misses the map and leaves `setCustomValidityForType`
17377
- // unset.
17378
- if (this.format) {
17379
- this.format = this.format.toLowerCase();
17380
- }
17381
-
17382
17404
  // use validity message override if declared when initializing the component
17383
17405
  if (this.hasAttribute('setCustomValidity')) {
17384
17406
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -17485,12 +17507,10 @@ class BaseInput extends AuroElement$1 {
17485
17507
  updated(changedProperties) {
17486
17508
  super.updated(changedProperties);
17487
17509
 
17488
- // When locale changes without an explicit format override, derive format from the new locale.
17489
- // Only runs if the current format is still the previous locale's default (not user-overridden).
17510
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
17490
17511
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
17491
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
17492
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
17493
- this.format = getDateFormatFromLocale(this.locale);
17512
+ if (!this._userSetFormat) {
17513
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
17494
17514
  }
17495
17515
  }
17496
17516
 
@@ -17661,9 +17681,6 @@ class BaseInput extends AuroElement$1 {
17661
17681
  this.maskInstance.on('accept', () => {
17662
17682
  if (this._configuringMask) return;
17663
17683
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
17664
- if (this.type === "date") {
17665
- this._rawMaskValue = this.maskInstance.value;
17666
- }
17667
17684
  });
17668
17685
 
17669
17686
  // Mask fires 'complete' on the restore step below for any value that
@@ -17671,9 +17688,6 @@ class BaseInput extends AuroElement$1 {
17671
17688
  this.maskInstance.on('complete', () => {
17672
17689
  if (this._configuringMask) return;
17673
17690
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
17674
- if (this.type === "date") {
17675
- this._rawMaskValue = this.maskInstance.value;
17676
- }
17677
17691
  });
17678
17692
 
17679
17693
  // Write existingValue through the mask (not the input directly) so
@@ -17910,8 +17924,7 @@ class BaseInput extends AuroElement$1 {
17910
17924
 
17911
17925
  // Set default date format if type=date and no format is defined
17912
17926
  if (this.type === "date" && !this.format) {
17913
- // Use locale to determine default date format
17914
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
17927
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
17915
17928
  this.util.updateFormat(this.format);
17916
17929
  }
17917
17930
  }
@@ -17940,7 +17953,7 @@ class BaseInput extends AuroElement$1 {
17940
17953
  const creditCard = this.matchInputValueToCreditCard();
17941
17954
  const previousFormat = this.format;
17942
17955
 
17943
- this.format = creditCard.maskFormat;
17956
+ this._setFormatFromLocale(creditCard.maskFormat);
17944
17957
 
17945
17958
  this.maxLength = creditCard.formatLength;
17946
17959
  this.minLength = creditCard.formatMinLength;
@@ -18414,7 +18427,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18414
18427
  }
18415
18428
  };
18416
18429
 
18417
- var formkitVersion$1 = '202607022134';
18430
+ var formkitVersion$1 = '202607022225';
18418
18431
 
18419
18432
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18420
18433
  // See LICENSE in the project root for license information.
@@ -19540,7 +19553,7 @@ class AuroBibtemplate extends LitElement {
19540
19553
  }
19541
19554
  }
19542
19555
 
19543
- var formkitVersion = '202607022134';
19556
+ var formkitVersion = '202607022225';
19544
19557
 
19545
19558
  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}`;
19546
19559
 
@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1114
1114
  }
1115
1115
  };
1116
1116
 
1117
- var formkitVersion$1 = '202607022134';
1117
+ var formkitVersion$1 = '202607022225';
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 = '202607022134';
5463
+ var formkitVersion = '202607022225';
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 = '202607022134';
1117
+ var formkitVersion$1 = '202607022225';
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 = '202607022134';
5463
+ var formkitVersion = '202607022225';
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 = '202607022134';
1067
+ var formkitVersion$1 = '202607022225';
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 = '202607022134';
5395
+ var formkitVersion = '202607022225';
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 = '202607022134';
1067
+ var formkitVersion$1 = '202607022225';
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 = '202607022134';
5395
+ var formkitVersion = '202607022225';
5396
5396
 
5397
5397
  let AuroElement$1 = class AuroElement extends LitElement {
5398
5398
  static get properties() {
@@ -35,7 +35,7 @@ The calendar uses the WAI-ARIA grid pattern for screen reader navigation:
35
35
  | `role="rowgroup"` | Body group | Groups the week rows. |
36
36
  | `role="row"` | Week row | Groups each week of date cells. |
37
37
  | `role="columnheader"` | Day-of-week header | Each weekday cell in the header row exposes the abbreviated day name as visible text and the full localized day name via `aria-label` (e.g. `aria-label="Sunday"`). |
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`. |
38
+ | `role="gridcell"` | In-range date cell | Each selectable date cell. Includes `aria-selected`, `aria-current="date"` (for today), and an `aria-label` on the host with the full localized date string. |
39
39
  | Out-of-range date cell | Cells outside the valid min/max range | The button uses the native `disabled` attribute (spec-compliant way to express "not actionable" on a `<button>`) and is filtered out of keyboard navigation. The host cell drops its `role` and `aria-label` so assistive tech does not browse into it — no `aria-hidden` or `role="presentation"` is applied. |
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. |
@@ -44,8 +44,8 @@ The calendar uses the WAI-ARIA grid pattern for screen reader navigation:
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="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.
47
+ <auro-header level="3" id="activeCellTracking">Active Cell Tracking</auro-header>
48
+ The calendar tracks a single active cell across the rendered month(s). DOM focus stays on the `#calendarGrid` wrapper the entire time — arrow keys never move focus onto individual cell buttons. `setActiveCell()` imperatively marks the chosen cell (adds the `active` property on the cell host and an `.activeCell` class on its button) without a Lit re-render. Screen-reader awareness of the active cell is provided by an `aria-live` region rather than by `aria-activedescendant`, so the reader is never asked to shift its point of regard on every arrow keypress a debounce coalesces bursts (see [Screen Reader Announcements](#screenReaderAnnouncements)).
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 `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.
60
+ When the calendar bib opens, focus moves to the calendar grid wrapper (`#calendarGrid`). The initial active cell is marked via `setActiveCell()`, and the `aria-live` region announces its full localized label so screen readers describe the starting position. 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.
@@ -13717,7 +13717,7 @@ class AuroBibtemplate extends i$1 {
13717
13717
  }
13718
13718
  }
13719
13719
 
13720
- var formkitVersion$2 = '202607022134';
13720
+ var formkitVersion$2 = '202607022225';
13721
13721
 
13722
13722
  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
13723
  `,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}}
@@ -19634,7 +19634,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
19634
19634
  }
19635
19635
  };
19636
19636
 
19637
- var formkitVersion$1 = '202607022134';
19637
+ var formkitVersion$1 = '202607022225';
19638
19638
 
19639
19639
  let AuroElement$2 = class AuroElement extends i$1 {
19640
19640
  static get properties() {
@@ -31649,14 +31649,16 @@ class BaseInput extends AuroElement$1 {
31649
31649
  this.label = 'Input label is undefined';
31650
31650
  this.layout = 'classic';
31651
31651
  this.locale = 'en-US';
31652
+ this._format = undefined;
31653
+
31654
+ /** @private */
31655
+ this._userSetFormat = false;
31652
31656
  this.max = undefined;
31653
31657
  this.maxLength = undefined;
31654
31658
  this.min = undefined;
31655
31659
  this.minLength = undefined;
31656
31660
  this.noValidate = false;
31657
31661
  this.onDark = false;
31658
- // Raw values returned from the input mask before model normalization.
31659
- this._rawMaskValue = undefined;
31660
31662
  this.required = false;
31661
31663
  this.setCustomValidityForType = undefined;
31662
31664
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -31814,7 +31816,8 @@ class BaseInput extends AuroElement$1 {
31814
31816
  */
31815
31817
  format: {
31816
31818
  type: String,
31817
- reflect: true
31819
+ reflect: true,
31820
+ noAccessor: true
31818
31821
  },
31819
31822
 
31820
31823
  /**
@@ -32152,6 +32155,34 @@ class BaseInput extends AuroElement$1 {
32152
32155
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
32153
32156
  }
32154
32157
 
32158
+ get format() {
32159
+ return this._format;
32160
+ }
32161
+
32162
+ /**
32163
+ * Overrides LitElement's generated accessor so we can track whether the
32164
+ * consumer explicitly set `format`. Locale-derived updates use
32165
+ * `_setFormatFromLocale` instead, which skips this flag.
32166
+ */
32167
+ set format(value) {
32168
+ const oldValue = this._format;
32169
+ this._format = value ? value.toLowerCase() : value;
32170
+ this._userSetFormat = Boolean(value);
32171
+ this.requestUpdate('format', oldValue);
32172
+ }
32173
+
32174
+ /**
32175
+ * Sets format without marking it as user-set. Used by locale auto-derive
32176
+ * so that a subsequent locale change can still update the format.
32177
+ * @private
32178
+ * @param {string} value
32179
+ */
32180
+ _setFormatFromLocale(value) {
32181
+ const oldValue = this._format;
32182
+ this._format = value ? value.toLowerCase() : value;
32183
+ this.requestUpdate('format', oldValue);
32184
+ }
32185
+
32155
32186
  connectedCallback() {
32156
32187
  super.connectedCallback();
32157
32188
 
@@ -32199,15 +32230,6 @@ class BaseInput extends AuroElement$1 {
32199
32230
 
32200
32231
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
32201
32232
 
32202
- // Normalize the format token to lowercase so case-mixed values supplied
32203
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
32204
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
32205
- // format silently misses the map and leaves `setCustomValidityForType`
32206
- // unset.
32207
- if (this.format) {
32208
- this.format = this.format.toLowerCase();
32209
- }
32210
-
32211
32233
  // use validity message override if declared when initializing the component
32212
32234
  if (this.hasAttribute('setCustomValidity')) {
32213
32235
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -32314,12 +32336,10 @@ class BaseInput extends AuroElement$1 {
32314
32336
  updated(changedProperties) {
32315
32337
  super.updated(changedProperties);
32316
32338
 
32317
- // When locale changes without an explicit format override, derive format from the new locale.
32318
- // Only runs if the current format is still the previous locale's default (not user-overridden).
32339
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
32319
32340
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
32320
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
32321
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
32322
- this.format = getDateFormatFromLocale(this.locale);
32341
+ if (!this._userSetFormat) {
32342
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
32323
32343
  }
32324
32344
  }
32325
32345
 
@@ -32490,9 +32510,6 @@ class BaseInput extends AuroElement$1 {
32490
32510
  this.maskInstance.on('accept', () => {
32491
32511
  if (this._configuringMask) return;
32492
32512
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
32493
- if (this.type === "date") {
32494
- this._rawMaskValue = this.maskInstance.value;
32495
- }
32496
32513
  });
32497
32514
 
32498
32515
  // Mask fires 'complete' on the restore step below for any value that
@@ -32500,9 +32517,6 @@ class BaseInput extends AuroElement$1 {
32500
32517
  this.maskInstance.on('complete', () => {
32501
32518
  if (this._configuringMask) return;
32502
32519
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
32503
- if (this.type === "date") {
32504
- this._rawMaskValue = this.maskInstance.value;
32505
- }
32506
32520
  });
32507
32521
 
32508
32522
  // Write existingValue through the mask (not the input directly) so
@@ -32739,8 +32753,7 @@ class BaseInput extends AuroElement$1 {
32739
32753
 
32740
32754
  // Set default date format if type=date and no format is defined
32741
32755
  if (this.type === "date" && !this.format) {
32742
- // Use locale to determine default date format
32743
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
32756
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
32744
32757
  this.util.updateFormat(this.format);
32745
32758
  }
32746
32759
  }
@@ -32769,7 +32782,7 @@ class BaseInput extends AuroElement$1 {
32769
32782
  const creditCard = this.matchInputValueToCreditCard();
32770
32783
  const previousFormat = this.format;
32771
32784
 
32772
- this.format = creditCard.maskFormat;
32785
+ this._setFormatFromLocale(creditCard.maskFormat);
32773
32786
 
32774
32787
  this.maxLength = creditCard.formatLength;
32775
32788
  this.minLength = creditCard.formatMinLength;
@@ -33243,7 +33256,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
33243
33256
  }
33244
33257
  };
33245
33258
 
33246
- var formkitVersion = '202607022134';
33259
+ var formkitVersion = '202607022225';
33247
33260
 
33248
33261
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
33249
33262
  // See LICENSE in the project root for license information.