@aurodesignsystem-dev/auro-formkit 0.0.0-pr1498.0 → 0.0.0-pr1499.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.
Files changed (62) hide show
  1. package/components/checkbox/demo/customize.min.js +2 -2
  2. package/components/checkbox/demo/getting-started.min.js +2 -2
  3. package/components/checkbox/demo/index.min.js +2 -2
  4. package/components/checkbox/dist/index.js +2 -2
  5. package/components/checkbox/dist/registered.js +2 -2
  6. package/components/combobox/demo/customize.md +3 -7
  7. package/components/combobox/demo/customize.min.js +1703 -1461
  8. package/components/combobox/demo/getting-started.min.js +1703 -1461
  9. package/components/combobox/demo/index.min.js +1703 -1461
  10. package/components/combobox/dist/auro-combobox.d.ts +0 -5
  11. package/components/combobox/dist/index.js +162 -495
  12. package/components/combobox/dist/registered.js +162 -495
  13. package/components/counter/demo/customize.min.js +19 -18
  14. package/components/counter/demo/index.min.js +19 -18
  15. package/components/counter/dist/index.js +160 -5811
  16. package/components/counter/dist/registered.js +187 -5442
  17. package/components/datepicker/demo/customize.md +477 -384
  18. package/components/datepicker/demo/customize.min.js +99 -171
  19. package/components/datepicker/demo/index.md +0 -1
  20. package/components/datepicker/demo/index.min.js +99 -171
  21. package/components/datepicker/dist/index.js +99 -171
  22. package/components/datepicker/dist/registered.js +99 -171
  23. package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -2
  24. package/components/dropdown/demo/customize.min.js +17 -16
  25. package/components/dropdown/demo/getting-started.min.js +17 -16
  26. package/components/dropdown/demo/index.min.js +17 -16
  27. package/components/dropdown/dist/auro-dropdown.d.ts +2 -1
  28. package/components/dropdown/dist/index.js +17 -16
  29. package/components/dropdown/dist/registered.js +17 -16
  30. package/components/form/demo/customize.min.js +8494 -8428
  31. package/components/form/demo/getting-started.min.js +8494 -8428
  32. package/components/form/demo/index.min.js +8494 -8428
  33. package/components/form/demo/registerDemoDeps.min.js +8518 -8452
  34. package/components/input/demo/customize.md +539 -472
  35. package/components/input/demo/customize.min.js +61 -136
  36. package/components/input/demo/getting-started.min.js +61 -136
  37. package/components/input/demo/index.min.js +61 -136
  38. package/components/input/dist/base-input.d.ts +0 -16
  39. package/components/input/dist/index.js +61 -136
  40. package/components/input/dist/registered.js +61 -136
  41. package/components/menu/demo/api.md +45 -41
  42. package/components/menu/demo/customize.md +28 -0
  43. package/components/menu/demo/index.min.js +1358 -783
  44. package/components/menu/dist/auro-menu.context.d.ts +238 -0
  45. package/components/menu/dist/auro-menu.d.ts +110 -95
  46. package/components/menu/dist/auro-menuoption.d.ts +138 -32
  47. package/components/menu/dist/index.js +1312 -757
  48. package/components/menu/dist/registered.js +1312 -769
  49. package/components/radio/demo/customize.min.js +2 -2
  50. package/components/radio/demo/getting-started.min.js +2 -2
  51. package/components/radio/demo/index.min.js +2 -2
  52. package/components/radio/dist/index.js +2 -2
  53. package/components/radio/dist/registered.js +2 -2
  54. package/components/select/demo/customize.md +3 -7
  55. package/components/select/demo/customize.min.js +1634 -1089
  56. package/components/select/demo/getting-started.min.js +1634 -1089
  57. package/components/select/demo/index.min.js +1634 -1089
  58. package/components/select/dist/index.js +31 -61
  59. package/components/select/dist/registered.js +31 -61
  60. package/custom-elements.json +1024 -378
  61. package/package.json +1 -1
  62. package/components/select/dist/selectUtils.d.ts +0 -12
@@ -4548,7 +4548,7 @@ class AuroFormValidation {
4548
4548
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
4549
4549
  const input = elem.renderRoot.querySelector('input');
4550
4550
 
4551
- if (input && input.validationMessage.length > 0) {
4551
+ if (input.validationMessage.length > 0) {
4552
4552
  elem.errorMessage = input.validationMessage;
4553
4553
  }
4554
4554
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -10220,7 +10220,11 @@ class AuroInputUtilities {
10220
10220
  return part.value;
10221
10221
  }
10222
10222
  })
10223
- .join("");
10223
+ .join("")
10224
+ // Remove whitespace and leading/trailing special characters for IMask compatibility
10225
+ // for example, ko-KR's format is `YYYY. MM. DD.` which causes issues with IMask if we don't remove the trailing period.
10226
+ .replace(/\s/gu, '')
10227
+ .replace(/^[^A-Z0-9]+|[^A-Z0-9]+$/gu, '');
10224
10228
  }
10225
10229
 
10226
10230
  /**
@@ -10385,6 +10389,7 @@ class AuroInputUtilities {
10385
10389
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
10386
10390
 
10387
10391
  if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
10392
+ console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
10388
10393
  return undefined;
10389
10394
  }
10390
10395
 
@@ -11087,7 +11092,7 @@ class BaseInput extends AuroElement {
11087
11092
  * @returns {Date|undefined}
11088
11093
  */
11089
11094
  get valueObject() {
11090
- return this._valueObject || this._computeDateObjectFallback(this.value);
11095
+ return this._valueObject;
11091
11096
  }
11092
11097
 
11093
11098
  /**
@@ -11095,7 +11100,7 @@ class BaseInput extends AuroElement {
11095
11100
  * @returns {Date|undefined}
11096
11101
  */
11097
11102
  get minObject() {
11098
- return this._minObject || this._computeDateObjectFallback(this.min);
11103
+ return this._minObject;
11099
11104
  }
11100
11105
 
11101
11106
  /**
@@ -11103,31 +11108,7 @@ class BaseInput extends AuroElement {
11103
11108
  * @returns {Date|undefined}
11104
11109
  */
11105
11110
  get maxObject() {
11106
- return this._maxObject || this._computeDateObjectFallback(this.max);
11107
- }
11108
-
11109
- /**
11110
- * Parses a date string into a Date object when the corresponding `_*Object`
11111
- * field hasn't been synced yet by `updated()`. Returns undefined when the
11112
- * input type/format isn't a full date or the string is not a valid date.
11113
- *
11114
- * Why this exists: a parent (datepicker) can call `inputN.validate()` from
11115
- * inside its own `updated()` before this input's `updated()` has run
11116
- * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
11117
- * and range checks would otherwise silently no-op (flipping the result to
11118
- * `valid` or `patternMismatch`).
11119
- * @private
11120
- * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
11121
- * @returns {Date|undefined}
11122
- */
11123
- _computeDateObjectFallback(dateStr) {
11124
- if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
11125
- return undefined;
11126
- }
11127
- if (!dateFormatter.isValidDate(dateStr)) {
11128
- return undefined;
11129
- }
11130
- return dateFormatter.stringToDateInstance(dateStr);
11111
+ return this._maxObject;
11131
11112
  }
11132
11113
 
11133
11114
  /**
@@ -11152,30 +11133,8 @@ class BaseInput extends AuroElement {
11152
11133
  connectedCallback() {
11153
11134
  super.connectedCallback();
11154
11135
 
11155
- // Mark for query selectors when registered under a versioned tag (e.g. inside
11156
- // a datepicker/combobox). Must run before parent components call validate() on
11157
- // their inner inputs — the validation framework matches via tag-or-attribute,
11158
- // and parents trigger validation during their own updated() cycle, which can
11159
- // precede this input's firstUpdated().
11160
- if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
11161
- this.setAttribute('auro-input', '');
11162
- }
11163
-
11164
11136
  this.locale = this.domHandler.getLocale(this);
11165
11137
  notifyOnLangChange(this);
11166
-
11167
- // Pre-compute lengthForType and date-object fields so a parent (e.g. datepicker)
11168
- // calling our validate() synchronously during its own updated() cycle sees
11169
- // populated values. Without this, range validation silently no-ops because
11170
- // `max.length === lengthForType` fails when lengthForType is still undefined.
11171
- // Rebuild util here (constructor seeded with en-US default) so configureDataForType's
11172
- // locale-derived format lookup uses the actual locale just resolved above.
11173
- this.util = new AuroInputUtilities({
11174
- locale: this.locale,
11175
- format: this.format
11176
- });
11177
- this.configureDataForType();
11178
- this.syncDateValues();
11179
11138
  }
11180
11139
 
11181
11140
  disconnectedCallback() {
@@ -11196,8 +11155,8 @@ class BaseInput extends AuroElement {
11196
11155
  }
11197
11156
 
11198
11157
  // add attribute for query selectors when auro-input is registered under a custom name
11199
- if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
11200
- this.setAttribute('auro-input', '');
11158
+ if (this.tagName.toLowerCase() !== 'auro-input') {
11159
+ this.setAttribute('auro-input', true);
11201
11160
  }
11202
11161
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11203
11162
 
@@ -11245,12 +11204,6 @@ class BaseInput extends AuroElement {
11245
11204
  return;
11246
11205
  }
11247
11206
 
11248
- // While configureAutoFormatting is running, imask's internal updateControl
11249
- // writes el.value to align display with the masked value. A synthetic input
11250
- // event from that write would re-enter handleInput → processCreditCard mid-setup
11251
- // and clobber a Lit value that was just pushed by the parent combobox.
11252
- if (component._configuringMask) return;
11253
-
11254
11207
  // If all guard clauses are passed, dispatch the event
11255
11208
  const inputEvent = new InputEvent('input', {
11256
11209
  bubbles: true,
@@ -11369,16 +11322,7 @@ class BaseInput extends AuroElement {
11369
11322
 
11370
11323
  if (formattedValue !== this.inputElement.value) {
11371
11324
  this.skipNextProgrammaticInputEvent = true;
11372
- if (this.maskInstance && this.type === 'credit-card') {
11373
- // Route through the mask so its _value and el.value stay in lock-step
11374
- // (set value calls updateControl which writes el.value = displayValue).
11375
- // Writing el.value directly leaves the mask thinking displayValue is
11376
- // stale; _saveSelection on the next focus/click then warns. Scoped to
11377
- // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
11378
- // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
11379
- // and flip validity from patternMismatch to tooShort.
11380
- this.maskInstance.value = formattedValue || '';
11381
- } else if (formattedValue) {
11325
+ if (formattedValue) {
11382
11326
  this.inputElement.value = formattedValue;
11383
11327
  } else {
11384
11328
  this.inputElement.value = '';
@@ -11487,73 +11431,58 @@ class BaseInput extends AuroElement {
11487
11431
  * @returns {void}
11488
11432
  */
11489
11433
  configureAutoFormatting() {
11490
- // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
11491
- // by _configuringMask above) could otherwise trigger handleInput →
11492
- // processCreditCard → configureAutoFormatting before the outer call's
11493
- // set value has finished its alignCursor pass.
11494
- if (this._configuringMask) return;
11495
- this._configuringMask = true;
11496
- try {
11497
- if (this.maskInstance) {
11498
- this.maskInstance.destroy();
11499
- }
11434
+ if (this.maskInstance) {
11435
+ this.maskInstance.destroy();
11436
+ }
11500
11437
 
11501
- // Pass new format to util
11502
- this.util.updateFormat(this.format);
11438
+ // Pass new format to util
11439
+ this.util.updateFormat(this.format);
11503
11440
 
11504
- const maskOptions = this.util.getMaskOptions(this.type, this.format);
11505
-
11506
- if (this.inputElement && maskOptions.mask) {
11507
-
11508
- // Stash and clear any existing value before IMask init.
11509
- // IMask's constructor processes the current input value which requires
11510
- // selection state — clearing first avoids that scenario entirely.
11511
- // When the format changes (e.g. locale switch) and we have a valid ISO
11512
- // model value, compute the display string for the NEW format instead of
11513
- // re-using the old display string, which may be invalid in the new mask.
11514
- let existingValue = this.inputElement.value;
11515
- if (
11516
- this.util.isFullDateFormat(this.type, this.format) &&
11517
- this.value &&
11518
- dateFormatter.isValidDate(this.value) &&
11519
- this.valueObject instanceof Date &&
11520
- !Number.isNaN(this.valueObject.getTime()) &&
11521
- typeof maskOptions.format === 'function'
11522
- ) {
11523
- existingValue = maskOptions.format(this.valueObject);
11524
- }
11441
+ const maskOptions = this.util.getMaskOptions(this.type, this.format);
11525
11442
 
11526
- this.skipNextProgrammaticInputEvent = true;
11527
- this.inputElement.value = '';
11528
-
11529
- this.maskInstance = IMask(this.inputElement, maskOptions);
11530
-
11531
- this.maskInstance.on('accept', () => {
11532
- // Suppress propagation during configureAutoFormatting's own value-restoration
11533
- // (line below) — the mask emits 'accept' on every value-set, including ours,
11534
- // and we don't want to overwrite a value the parent just pushed.
11535
- if (this._configuringMask) return;
11536
- this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11537
- if (this.type === "date") {
11538
- this._rawMaskValue = this.maskInstance.value;
11539
- }
11540
- });
11443
+ if (this.inputElement && maskOptions.mask) {
11541
11444
 
11542
- this.maskInstance.on('complete', () => {
11543
- if (this._configuringMask) return;
11544
- this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11545
- if (this.type === "date") {
11546
- this._rawMaskValue = this.maskInstance.value;
11547
- }
11548
- });
11445
+ // Stash and clear any existing value before IMask init.
11446
+ // IMask's constructor processes the current input value which requires
11447
+ // selection state — clearing first avoids that scenario entirely.
11448
+ // When the format changes (e.g. locale switch) and we have a valid ISO
11449
+ // model value, compute the display string for the NEW format instead of
11450
+ // re-using the old display string, which may be invalid in the new mask.
11451
+ let existingValue = this.inputElement.value;
11452
+ if (
11453
+ this.util.isFullDateFormat(this.type, this.format) &&
11454
+ this.value &&
11455
+ dateFormatter.isValidDate(this.value) &&
11456
+ this.valueObject instanceof Date &&
11457
+ !Number.isNaN(this.valueObject.getTime()) &&
11458
+ typeof maskOptions.format === 'function'
11459
+ ) {
11460
+ existingValue = maskOptions.format(this.valueObject);
11461
+ }
11462
+
11463
+ this.skipNextProgrammaticInputEvent = true;
11464
+ this.inputElement.value = '';
11465
+
11466
+ this.maskInstance = IMask(this.inputElement, maskOptions);
11467
+
11468
+ this.maskInstance.on('accept', () => {
11469
+ this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11470
+ if (this.type === "date") {
11471
+ this._rawMaskValue = this.maskInstance.value;
11472
+ }
11473
+ });
11549
11474
 
11550
- // Restore the stashed value through IMask so it's properly masked
11551
- if (existingValue) {
11552
- this.maskInstance.value = existingValue;
11475
+ this.maskInstance.on('complete', () => {
11476
+ this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11477
+ if (this.type === "date") {
11478
+ this._rawMaskValue = this.maskInstance.value;
11553
11479
  }
11480
+ });
11481
+
11482
+ // Restore the stashed value through IMask so it's properly masked
11483
+ if (existingValue) {
11484
+ this.maskInstance.value = existingValue;
11554
11485
  }
11555
- } finally {
11556
- this._configuringMask = false;
11557
11486
  }
11558
11487
  }
11559
11488
 
@@ -11840,10 +11769,10 @@ class BaseInput extends AuroElement {
11840
11769
  },
11841
11770
  {
11842
11771
  name: 'Diners club',
11843
- regex: /^(?<num>30[0-5]|36|38)\d{0}/u,
11772
+ regex: /^(?<num>36|38)\d{0}/u,
11844
11773
  formatLength: 16,
11845
11774
  errorMessage: CreditCardValidationMessage,
11846
- cardIcon: 'cc-dinersclub',
11775
+ cardIcon: 'credit-card',
11847
11776
  maskFormat: "0000 000000 0000"
11848
11777
  },
11849
11778
  {
@@ -12253,7 +12182,7 @@ class AuroHelpText extends i$3 {
12253
12182
  }
12254
12183
  }
12255
12184
 
12256
- var formkitVersion = '202606100232';
12185
+ var formkitVersion = '202606101934';
12257
12186
 
12258
12187
  /**
12259
12188
  * @license
@@ -12603,10 +12532,6 @@ class AuroInput extends BaseInput {
12603
12532
  return i18n(this.lang, this.type);
12604
12533
  }
12605
12534
 
12606
- if (this.type === 'date') {
12607
- return i18n(this.lang, this.dateFormatMap[this.format] || 'dateMMDDYYYY');
12608
- }
12609
-
12610
12535
  return '';
12611
12536
  }
12612
12537
 
@@ -453,21 +453,6 @@ export default class BaseInput extends AuroElement {
453
453
  * @returns {Date|undefined}
454
454
  */
455
455
  get maxObject(): Date | undefined;
456
- /**
457
- * Parses a date string into a Date object when the corresponding `_*Object`
458
- * field hasn't been synced yet by `updated()`. Returns undefined when the
459
- * input type/format isn't a full date or the string is not a valid date.
460
- *
461
- * Why this exists: a parent (datepicker) can call `inputN.validate()` from
462
- * inside its own `updated()` before this input's `updated()` has run
463
- * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
464
- * and range checks would otherwise silently no-op (flipping the result to
465
- * `valid` or `patternMismatch`).
466
- * @private
467
- * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
468
- * @returns {Date|undefined}
469
- */
470
- private _computeDateObjectFallback;
471
456
  /**
472
457
  * Internal setter for readonly date object properties.
473
458
  * @private
@@ -538,7 +523,6 @@ export default class BaseInput extends AuroElement {
538
523
  * @returns {void}
539
524
  */
540
525
  private configureAutoFormatting;
541
- _configuringMask: boolean | undefined;
542
526
  maskInstance: import("imask").InputMask<any> | undefined;
543
527
  /**
544
528
  * Sends event notifying that the input has changed it's value.
@@ -4490,7 +4490,7 @@ class AuroFormValidation {
4490
4490
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
4491
4491
  const input = elem.renderRoot.querySelector('input');
4492
4492
 
4493
- if (input && input.validationMessage.length > 0) {
4493
+ if (input.validationMessage.length > 0) {
4494
4494
  elem.errorMessage = input.validationMessage;
4495
4495
  }
4496
4496
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -10162,7 +10162,11 @@ class AuroInputUtilities {
10162
10162
  return part.value;
10163
10163
  }
10164
10164
  })
10165
- .join("");
10165
+ .join("")
10166
+ // Remove whitespace and leading/trailing special characters for IMask compatibility
10167
+ // for example, ko-KR's format is `YYYY. MM. DD.` which causes issues with IMask if we don't remove the trailing period.
10168
+ .replace(/\s/gu, '')
10169
+ .replace(/^[^A-Z0-9]+|[^A-Z0-9]+$/gu, '');
10166
10170
  }
10167
10171
 
10168
10172
  /**
@@ -10327,6 +10331,7 @@ class AuroInputUtilities {
10327
10331
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
10328
10332
 
10329
10333
  if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
10334
+ console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
10330
10335
  return undefined;
10331
10336
  }
10332
10337
 
@@ -11029,7 +11034,7 @@ class BaseInput extends AuroElement {
11029
11034
  * @returns {Date|undefined}
11030
11035
  */
11031
11036
  get valueObject() {
11032
- return this._valueObject || this._computeDateObjectFallback(this.value);
11037
+ return this._valueObject;
11033
11038
  }
11034
11039
 
11035
11040
  /**
@@ -11037,7 +11042,7 @@ class BaseInput extends AuroElement {
11037
11042
  * @returns {Date|undefined}
11038
11043
  */
11039
11044
  get minObject() {
11040
- return this._minObject || this._computeDateObjectFallback(this.min);
11045
+ return this._minObject;
11041
11046
  }
11042
11047
 
11043
11048
  /**
@@ -11045,31 +11050,7 @@ class BaseInput extends AuroElement {
11045
11050
  * @returns {Date|undefined}
11046
11051
  */
11047
11052
  get maxObject() {
11048
- return this._maxObject || this._computeDateObjectFallback(this.max);
11049
- }
11050
-
11051
- /**
11052
- * Parses a date string into a Date object when the corresponding `_*Object`
11053
- * field hasn't been synced yet by `updated()`. Returns undefined when the
11054
- * input type/format isn't a full date or the string is not a valid date.
11055
- *
11056
- * Why this exists: a parent (datepicker) can call `inputN.validate()` from
11057
- * inside its own `updated()` before this input's `updated()` has run
11058
- * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
11059
- * and range checks would otherwise silently no-op (flipping the result to
11060
- * `valid` or `patternMismatch`).
11061
- * @private
11062
- * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
11063
- * @returns {Date|undefined}
11064
- */
11065
- _computeDateObjectFallback(dateStr) {
11066
- if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
11067
- return undefined;
11068
- }
11069
- if (!dateFormatter.isValidDate(dateStr)) {
11070
- return undefined;
11071
- }
11072
- return dateFormatter.stringToDateInstance(dateStr);
11053
+ return this._maxObject;
11073
11054
  }
11074
11055
 
11075
11056
  /**
@@ -11094,30 +11075,8 @@ class BaseInput extends AuroElement {
11094
11075
  connectedCallback() {
11095
11076
  super.connectedCallback();
11096
11077
 
11097
- // Mark for query selectors when registered under a versioned tag (e.g. inside
11098
- // a datepicker/combobox). Must run before parent components call validate() on
11099
- // their inner inputs — the validation framework matches via tag-or-attribute,
11100
- // and parents trigger validation during their own updated() cycle, which can
11101
- // precede this input's firstUpdated().
11102
- if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
11103
- this.setAttribute('auro-input', '');
11104
- }
11105
-
11106
11078
  this.locale = this.domHandler.getLocale(this);
11107
11079
  notifyOnLangChange(this);
11108
-
11109
- // Pre-compute lengthForType and date-object fields so a parent (e.g. datepicker)
11110
- // calling our validate() synchronously during its own updated() cycle sees
11111
- // populated values. Without this, range validation silently no-ops because
11112
- // `max.length === lengthForType` fails when lengthForType is still undefined.
11113
- // Rebuild util here (constructor seeded with en-US default) so configureDataForType's
11114
- // locale-derived format lookup uses the actual locale just resolved above.
11115
- this.util = new AuroInputUtilities({
11116
- locale: this.locale,
11117
- format: this.format
11118
- });
11119
- this.configureDataForType();
11120
- this.syncDateValues();
11121
11080
  }
11122
11081
 
11123
11082
  disconnectedCallback() {
@@ -11138,8 +11097,8 @@ class BaseInput extends AuroElement {
11138
11097
  }
11139
11098
 
11140
11099
  // add attribute for query selectors when auro-input is registered under a custom name
11141
- if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
11142
- this.setAttribute('auro-input', '');
11100
+ if (this.tagName.toLowerCase() !== 'auro-input') {
11101
+ this.setAttribute('auro-input', true);
11143
11102
  }
11144
11103
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11145
11104
 
@@ -11187,12 +11146,6 @@ class BaseInput extends AuroElement {
11187
11146
  return;
11188
11147
  }
11189
11148
 
11190
- // While configureAutoFormatting is running, imask's internal updateControl
11191
- // writes el.value to align display with the masked value. A synthetic input
11192
- // event from that write would re-enter handleInput → processCreditCard mid-setup
11193
- // and clobber a Lit value that was just pushed by the parent combobox.
11194
- if (component._configuringMask) return;
11195
-
11196
11149
  // If all guard clauses are passed, dispatch the event
11197
11150
  const inputEvent = new InputEvent('input', {
11198
11151
  bubbles: true,
@@ -11311,16 +11264,7 @@ class BaseInput extends AuroElement {
11311
11264
 
11312
11265
  if (formattedValue !== this.inputElement.value) {
11313
11266
  this.skipNextProgrammaticInputEvent = true;
11314
- if (this.maskInstance && this.type === 'credit-card') {
11315
- // Route through the mask so its _value and el.value stay in lock-step
11316
- // (set value calls updateControl which writes el.value = displayValue).
11317
- // Writing el.value directly leaves the mask thinking displayValue is
11318
- // stale; _saveSelection on the next focus/click then warns. Scoped to
11319
- // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
11320
- // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
11321
- // and flip validity from patternMismatch to tooShort.
11322
- this.maskInstance.value = formattedValue || '';
11323
- } else if (formattedValue) {
11267
+ if (formattedValue) {
11324
11268
  this.inputElement.value = formattedValue;
11325
11269
  } else {
11326
11270
  this.inputElement.value = '';
@@ -11429,73 +11373,58 @@ class BaseInput extends AuroElement {
11429
11373
  * @returns {void}
11430
11374
  */
11431
11375
  configureAutoFormatting() {
11432
- // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
11433
- // by _configuringMask above) could otherwise trigger handleInput →
11434
- // processCreditCard → configureAutoFormatting before the outer call's
11435
- // set value has finished its alignCursor pass.
11436
- if (this._configuringMask) return;
11437
- this._configuringMask = true;
11438
- try {
11439
- if (this.maskInstance) {
11440
- this.maskInstance.destroy();
11441
- }
11376
+ if (this.maskInstance) {
11377
+ this.maskInstance.destroy();
11378
+ }
11442
11379
 
11443
- // Pass new format to util
11444
- this.util.updateFormat(this.format);
11380
+ // Pass new format to util
11381
+ this.util.updateFormat(this.format);
11445
11382
 
11446
- const maskOptions = this.util.getMaskOptions(this.type, this.format);
11447
-
11448
- if (this.inputElement && maskOptions.mask) {
11449
-
11450
- // Stash and clear any existing value before IMask init.
11451
- // IMask's constructor processes the current input value which requires
11452
- // selection state — clearing first avoids that scenario entirely.
11453
- // When the format changes (e.g. locale switch) and we have a valid ISO
11454
- // model value, compute the display string for the NEW format instead of
11455
- // re-using the old display string, which may be invalid in the new mask.
11456
- let existingValue = this.inputElement.value;
11457
- if (
11458
- this.util.isFullDateFormat(this.type, this.format) &&
11459
- this.value &&
11460
- dateFormatter.isValidDate(this.value) &&
11461
- this.valueObject instanceof Date &&
11462
- !Number.isNaN(this.valueObject.getTime()) &&
11463
- typeof maskOptions.format === 'function'
11464
- ) {
11465
- existingValue = maskOptions.format(this.valueObject);
11466
- }
11383
+ const maskOptions = this.util.getMaskOptions(this.type, this.format);
11467
11384
 
11468
- this.skipNextProgrammaticInputEvent = true;
11469
- this.inputElement.value = '';
11470
-
11471
- this.maskInstance = IMask(this.inputElement, maskOptions);
11472
-
11473
- this.maskInstance.on('accept', () => {
11474
- // Suppress propagation during configureAutoFormatting's own value-restoration
11475
- // (line below) — the mask emits 'accept' on every value-set, including ours,
11476
- // and we don't want to overwrite a value the parent just pushed.
11477
- if (this._configuringMask) return;
11478
- this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11479
- if (this.type === "date") {
11480
- this._rawMaskValue = this.maskInstance.value;
11481
- }
11482
- });
11385
+ if (this.inputElement && maskOptions.mask) {
11483
11386
 
11484
- this.maskInstance.on('complete', () => {
11485
- if (this._configuringMask) return;
11486
- this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11487
- if (this.type === "date") {
11488
- this._rawMaskValue = this.maskInstance.value;
11489
- }
11490
- });
11387
+ // Stash and clear any existing value before IMask init.
11388
+ // IMask's constructor processes the current input value which requires
11389
+ // selection state — clearing first avoids that scenario entirely.
11390
+ // When the format changes (e.g. locale switch) and we have a valid ISO
11391
+ // model value, compute the display string for the NEW format instead of
11392
+ // re-using the old display string, which may be invalid in the new mask.
11393
+ let existingValue = this.inputElement.value;
11394
+ if (
11395
+ this.util.isFullDateFormat(this.type, this.format) &&
11396
+ this.value &&
11397
+ dateFormatter.isValidDate(this.value) &&
11398
+ this.valueObject instanceof Date &&
11399
+ !Number.isNaN(this.valueObject.getTime()) &&
11400
+ typeof maskOptions.format === 'function'
11401
+ ) {
11402
+ existingValue = maskOptions.format(this.valueObject);
11403
+ }
11404
+
11405
+ this.skipNextProgrammaticInputEvent = true;
11406
+ this.inputElement.value = '';
11407
+
11408
+ this.maskInstance = IMask(this.inputElement, maskOptions);
11409
+
11410
+ this.maskInstance.on('accept', () => {
11411
+ this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11412
+ if (this.type === "date") {
11413
+ this._rawMaskValue = this.maskInstance.value;
11414
+ }
11415
+ });
11491
11416
 
11492
- // Restore the stashed value through IMask so it's properly masked
11493
- if (existingValue) {
11494
- this.maskInstance.value = existingValue;
11417
+ this.maskInstance.on('complete', () => {
11418
+ this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11419
+ if (this.type === "date") {
11420
+ this._rawMaskValue = this.maskInstance.value;
11495
11421
  }
11422
+ });
11423
+
11424
+ // Restore the stashed value through IMask so it's properly masked
11425
+ if (existingValue) {
11426
+ this.maskInstance.value = existingValue;
11496
11427
  }
11497
- } finally {
11498
- this._configuringMask = false;
11499
11428
  }
11500
11429
  }
11501
11430
 
@@ -11782,10 +11711,10 @@ class BaseInput extends AuroElement {
11782
11711
  },
11783
11712
  {
11784
11713
  name: 'Diners club',
11785
- regex: /^(?<num>30[0-5]|36|38)\d{0}/u,
11714
+ regex: /^(?<num>36|38)\d{0}/u,
11786
11715
  formatLength: 16,
11787
11716
  errorMessage: CreditCardValidationMessage,
11788
- cardIcon: 'cc-dinersclub',
11717
+ cardIcon: 'credit-card',
11789
11718
  maskFormat: "0000 000000 0000"
11790
11719
  },
11791
11720
  {
@@ -12195,7 +12124,7 @@ class AuroHelpText extends LitElement {
12195
12124
  }
12196
12125
  }
12197
12126
 
12198
- var formkitVersion = '202606100232';
12127
+ var formkitVersion = '202606101934';
12199
12128
 
12200
12129
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12201
12130
  // See LICENSE in the project root for license information.
@@ -12533,10 +12462,6 @@ class AuroInput extends BaseInput {
12533
12462
  return i18n(this.lang, this.type);
12534
12463
  }
12535
12464
 
12536
- if (this.type === 'date') {
12537
- return i18n(this.lang, this.dateFormatMap[this.format] || 'dateMMDDYYYY');
12538
- }
12539
-
12540
12465
  return '';
12541
12466
  }
12542
12467