@aurodesignsystem-dev/auro-formkit 0.0.0-pr1532.1 → 0.0.0-pr1533.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 (60) 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 +118 -50
  7. package/components/combobox/demo/getting-started.min.js +118 -50
  8. package/components/combobox/demo/index.min.js +118 -50
  9. package/components/combobox/dist/auro-combobox.d.ts +10 -0
  10. package/components/combobox/dist/index.js +118 -50
  11. package/components/combobox/dist/registered.js +118 -50
  12. package/components/counter/demo/customize.min.js +2 -2
  13. package/components/counter/demo/index.min.js +2 -2
  14. package/components/counter/dist/index.js +2 -2
  15. package/components/counter/dist/registered.js +2 -2
  16. package/components/datepicker/demo/accessibility.md +17 -8
  17. package/components/datepicker/demo/api.md +1 -1
  18. package/components/datepicker/demo/customize.min.js +229 -72
  19. package/components/datepicker/demo/index.min.js +229 -72
  20. package/components/datepicker/demo/keyboard-behavior.md +3 -3
  21. package/components/datepicker/demo/voiceover.md +4 -4
  22. package/components/datepicker/demo/why-datepicker.md +2 -2
  23. package/components/datepicker/dist/auro-calendar-cell.d.ts +11 -0
  24. package/components/datepicker/dist/auro-calendar.d.ts +26 -2
  25. package/components/datepicker/dist/auro-datepicker.d.ts +9 -1
  26. package/components/datepicker/dist/index.js +229 -72
  27. package/components/datepicker/dist/registered.js +229 -72
  28. package/components/dropdown/demo/customize.min.js +1 -1
  29. package/components/dropdown/demo/getting-started.min.js +1 -1
  30. package/components/dropdown/demo/index.min.js +1 -1
  31. package/components/dropdown/dist/index.js +1 -1
  32. package/components/dropdown/dist/registered.js +1 -1
  33. package/components/form/demo/api.md +3 -3
  34. package/components/form/demo/customize.md +345 -97
  35. package/components/form/demo/customize.min.js +441 -176
  36. package/components/form/demo/getting-started.md +344 -96
  37. package/components/form/demo/getting-started.min.js +461 -176
  38. package/components/form/demo/index.min.js +412 -176
  39. package/components/form/demo/registerDemoDeps.min.js +408 -172
  40. package/components/form/dist/auro-form.d.ts +7 -7
  41. package/components/form/dist/index.js +4 -4
  42. package/components/form/dist/registered.js +4 -4
  43. package/components/input/demo/customize.min.js +56 -45
  44. package/components/input/demo/getting-started.min.js +56 -45
  45. package/components/input/demo/index.min.js +56 -45
  46. package/components/input/dist/base-input.d.ts +20 -4
  47. package/components/input/dist/index.js +56 -45
  48. package/components/input/dist/registered.js +56 -45
  49. package/components/radio/demo/customize.min.js +1 -1
  50. package/components/radio/demo/getting-started.min.js +1 -1
  51. package/components/radio/demo/index.min.js +1 -1
  52. package/components/radio/dist/index.js +1 -1
  53. package/components/radio/dist/registered.js +1 -1
  54. package/components/select/demo/customize.min.js +2 -2
  55. package/components/select/demo/getting-started.min.js +2 -2
  56. package/components/select/demo/index.min.js +2 -2
  57. package/components/select/dist/index.js +2 -2
  58. package/components/select/dist/registered.js +2 -2
  59. package/custom-elements.json +5924 -5826
  60. package/package.json +1 -1
@@ -10657,14 +10657,16 @@ class BaseInput extends AuroElement {
10657
10657
  this.label = 'Input label is undefined';
10658
10658
  this.layout = 'classic';
10659
10659
  this.locale = 'en-US';
10660
+ this._format = undefined;
10661
+
10662
+ /** @private */
10663
+ this._userSetFormat = false;
10660
10664
  this.max = undefined;
10661
10665
  this.maxLength = undefined;
10662
10666
  this.min = undefined;
10663
10667
  this.minLength = undefined;
10664
10668
  this.noValidate = false;
10665
10669
  this.onDark = false;
10666
- // Raw values returned from the input mask before model normalization.
10667
- this._rawMaskValue = undefined;
10668
10670
  this.required = false;
10669
10671
  this.setCustomValidityForType = undefined;
10670
10672
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -10822,7 +10824,8 @@ class BaseInput extends AuroElement {
10822
10824
  */
10823
10825
  format: {
10824
10826
  type: String,
10825
- reflect: true
10827
+ reflect: true,
10828
+ noAccessor: true
10826
10829
  },
10827
10830
 
10828
10831
  /**
@@ -11160,6 +11163,34 @@ class BaseInput extends AuroElement {
11160
11163
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
11161
11164
  }
11162
11165
 
11166
+ get format() {
11167
+ return this._format;
11168
+ }
11169
+
11170
+ /**
11171
+ * Overrides LitElement's generated accessor so we can track whether the
11172
+ * consumer explicitly set `format`. Locale-derived updates use
11173
+ * `_setFormatFromLocale` instead, which skips this flag.
11174
+ */
11175
+ set format(value) {
11176
+ const oldValue = this._format;
11177
+ this._format = value ? value.toLowerCase() : value;
11178
+ this._userSetFormat = Boolean(value);
11179
+ this.requestUpdate('format', oldValue);
11180
+ }
11181
+
11182
+ /**
11183
+ * Sets format without marking it as user-set. Used by locale auto-derive
11184
+ * so that a subsequent locale change can still update the format.
11185
+ * @private
11186
+ * @param {string} value
11187
+ */
11188
+ _setFormatFromLocale(value) {
11189
+ const oldValue = this._format;
11190
+ this._format = value ? value.toLowerCase() : value;
11191
+ this.requestUpdate('format', oldValue);
11192
+ }
11193
+
11163
11194
  connectedCallback() {
11164
11195
  super.connectedCallback();
11165
11196
 
@@ -11207,15 +11238,6 @@ class BaseInput extends AuroElement {
11207
11238
 
11208
11239
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11209
11240
 
11210
- // Normalize the format token to lowercase so case-mixed values supplied
11211
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
11212
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
11213
- // format silently misses the map and leaves `setCustomValidityForType`
11214
- // unset.
11215
- if (this.format) {
11216
- this.format = this.format.toLowerCase();
11217
- }
11218
-
11219
11241
  // use validity message override if declared when initializing the component
11220
11242
  if (this.hasAttribute('setCustomValidity')) {
11221
11243
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -11322,12 +11344,10 @@ class BaseInput extends AuroElement {
11322
11344
  updated(changedProperties) {
11323
11345
  super.updated(changedProperties);
11324
11346
 
11325
- // When locale changes without an explicit format override, derive format from the new locale.
11326
- // Only runs if the current format is still the previous locale's default (not user-overridden).
11347
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
11327
11348
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
11328
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
11329
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
11330
- this.format = getDateFormatFromLocale(this.locale);
11349
+ if (!this._userSetFormat) {
11350
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
11331
11351
  }
11332
11352
  }
11333
11353
 
@@ -11498,9 +11518,6 @@ class BaseInput extends AuroElement {
11498
11518
  this.maskInstance.on('accept', () => {
11499
11519
  if (this._configuringMask) return;
11500
11520
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11501
- if (this.type === "date") {
11502
- this._rawMaskValue = this.maskInstance.value;
11503
- }
11504
11521
  });
11505
11522
 
11506
11523
  // Mask fires 'complete' on the restore step below for any value that
@@ -11508,9 +11525,6 @@ class BaseInput extends AuroElement {
11508
11525
  this.maskInstance.on('complete', () => {
11509
11526
  if (this._configuringMask) return;
11510
11527
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11511
- if (this.type === "date") {
11512
- this._rawMaskValue = this.maskInstance.value;
11513
- }
11514
11528
  });
11515
11529
 
11516
11530
  // Write existingValue through the mask (not the input directly) so
@@ -11531,14 +11545,17 @@ class BaseInput extends AuroElement {
11531
11545
  * @returns {void}
11532
11546
  */
11533
11547
  notifyValueChanged() {
11534
- let inputEvent = null;
11535
-
11536
- inputEvent = new Event('input', {
11548
+ // This echoes Lit's reactive value update (and handleClickClear's
11549
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
11550
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
11551
+ // it from genuine user typing and skip clobbering their own
11552
+ // programmatic state during init-time renders.
11553
+ const inputEvent = new Event('input', {
11537
11554
  bubbles: true,
11538
11555
  composed: true,
11539
11556
  });
11557
+ inputEvent.isProgrammatic = true;
11540
11558
 
11541
- // Dispatched event to alert outside shadow DOM context of event firing.
11542
11559
  this.dispatchEvent(inputEvent);
11543
11560
  }
11544
11561
 
@@ -11747,8 +11764,7 @@ class BaseInput extends AuroElement {
11747
11764
 
11748
11765
  // Set default date format if type=date and no format is defined
11749
11766
  if (this.type === "date" && !this.format) {
11750
- // Use locale to determine default date format
11751
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
11767
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
11752
11768
  this.util.updateFormat(this.format);
11753
11769
  }
11754
11770
  }
@@ -11777,7 +11793,7 @@ class BaseInput extends AuroElement {
11777
11793
  const creditCard = this.matchInputValueToCreditCard();
11778
11794
  const previousFormat = this.format;
11779
11795
 
11780
- this.format = creditCard.maskFormat;
11796
+ this._setFormatFromLocale(creditCard.maskFormat);
11781
11797
 
11782
11798
  this.maxLength = creditCard.formatLength;
11783
11799
  this.minLength = creditCard.formatMinLength;
@@ -12251,7 +12267,7 @@ class AuroHelpText extends i$3 {
12251
12267
  }
12252
12268
  }
12253
12269
 
12254
- var formkitVersion = '202607022050';
12270
+ var formkitVersion = '202607071532';
12255
12271
 
12256
12272
  /**
12257
12273
  * @license
@@ -12549,20 +12565,15 @@ class AuroInput extends BaseInput {
12549
12565
  * @returns {void}
12550
12566
  */
12551
12567
  checkDisplayValueSlotChange() {
12552
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
12553
-
12554
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
12555
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
12556
- nodes = nodes[0].assignedNodes();
12557
- }
12558
-
12559
- let hasContent = false;
12560
-
12561
- if (nodes.length > 0) {
12562
- hasContent = true;
12563
- }
12564
-
12565
- this.hasDisplayValueContent = hasContent;
12568
+ // flatten:true resolves through auro-combobox's forwarding slot
12569
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
12570
+ // directly to auro-input's light DOM alongside the forwarder still
12571
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
12572
+ // discarded any siblings past the forwarder.
12573
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
12574
+ const nodes = slot.assignedNodes({ flatten: true });
12575
+
12576
+ this.hasDisplayValueContent = nodes.length > 0;
12566
12577
  }
12567
12578
 
12568
12579
  firstUpdated() {
@@ -115,6 +115,7 @@ export default class BaseInput extends AuroElement {
115
115
  format: {
116
116
  type: StringConstructor;
117
117
  reflect: boolean;
118
+ noAccessor: boolean;
118
119
  };
119
120
  /**
120
121
  * Flag to indicate if the input currently has focus.
@@ -406,13 +407,15 @@ export default class BaseInput extends AuroElement {
406
407
  /** @private */
407
408
  private label;
408
409
  locale: string;
410
+ _format: any;
411
+ /** @private */
412
+ private _userSetFormat;
409
413
  max: any;
410
414
  maxLength: any;
411
415
  min: any;
412
416
  minLength: any;
413
417
  noValidate: boolean;
414
418
  onDark: boolean;
415
- _rawMaskValue: string | undefined;
416
419
  required: boolean;
417
420
  setCustomValidityForType: string | undefined;
418
421
  /** @private */
@@ -430,7 +433,7 @@ export default class BaseInput extends AuroElement {
430
433
  private validation;
431
434
  /** @private */
432
435
  private validationCCLength;
433
- value: any;
436
+ value: string | undefined;
434
437
  /**
435
438
  * Read-only Date object representation of `value` for full date formats.
436
439
  * @returns {Date|undefined}
@@ -446,12 +449,25 @@ export default class BaseInput extends AuroElement {
446
449
  * @returns {Date|undefined}
447
450
  */
448
451
  get maxObject(): Date | undefined;
452
+ /**
453
+ * Overrides LitElement's generated accessor so we can track whether the
454
+ * consumer explicitly set `format`. Locale-derived updates use
455
+ * `_setFormatFromLocale` instead, which skips this flag.
456
+ */
457
+ set format(value: any);
458
+ get format(): any;
459
+ /**
460
+ * Sets format without marking it as user-set. Used by locale auto-derive
461
+ * so that a subsequent locale change can still update the format.
462
+ * @private
463
+ * @param {string} value
464
+ */
465
+ private _setFormatFromLocale;
449
466
  firstUpdated(): void;
450
467
  wrapperElement: Element | null | undefined;
451
468
  inputElement: HTMLInputElement | null | undefined;
452
469
  labelElement: HTMLLabelElement | null | undefined;
453
470
  inputId: string | undefined;
454
- format: any;
455
471
  ValidityMessageOverride: any;
456
472
  /**
457
473
  * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
@@ -487,7 +503,7 @@ export default class BaseInput extends AuroElement {
487
503
  */
488
504
  private configureAutoFormatting;
489
505
  _configuringMask: boolean | undefined;
490
- maskInstance: import("imask").InputMask<any> | null | undefined;
506
+ maskInstance: import("imask").InputMask<object> | null | undefined;
491
507
  /**
492
508
  * Sends event notifying that the input has changed it's value.
493
509
  * @private
@@ -10599,14 +10599,16 @@ class BaseInput extends AuroElement {
10599
10599
  this.label = 'Input label is undefined';
10600
10600
  this.layout = 'classic';
10601
10601
  this.locale = 'en-US';
10602
+ this._format = undefined;
10603
+
10604
+ /** @private */
10605
+ this._userSetFormat = false;
10602
10606
  this.max = undefined;
10603
10607
  this.maxLength = undefined;
10604
10608
  this.min = undefined;
10605
10609
  this.minLength = undefined;
10606
10610
  this.noValidate = false;
10607
10611
  this.onDark = false;
10608
- // Raw values returned from the input mask before model normalization.
10609
- this._rawMaskValue = undefined;
10610
10612
  this.required = false;
10611
10613
  this.setCustomValidityForType = undefined;
10612
10614
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -10764,7 +10766,8 @@ class BaseInput extends AuroElement {
10764
10766
  */
10765
10767
  format: {
10766
10768
  type: String,
10767
- reflect: true
10769
+ reflect: true,
10770
+ noAccessor: true
10768
10771
  },
10769
10772
 
10770
10773
  /**
@@ -11102,6 +11105,34 @@ class BaseInput extends AuroElement {
11102
11105
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
11103
11106
  }
11104
11107
 
11108
+ get format() {
11109
+ return this._format;
11110
+ }
11111
+
11112
+ /**
11113
+ * Overrides LitElement's generated accessor so we can track whether the
11114
+ * consumer explicitly set `format`. Locale-derived updates use
11115
+ * `_setFormatFromLocale` instead, which skips this flag.
11116
+ */
11117
+ set format(value) {
11118
+ const oldValue = this._format;
11119
+ this._format = value ? value.toLowerCase() : value;
11120
+ this._userSetFormat = Boolean(value);
11121
+ this.requestUpdate('format', oldValue);
11122
+ }
11123
+
11124
+ /**
11125
+ * Sets format without marking it as user-set. Used by locale auto-derive
11126
+ * so that a subsequent locale change can still update the format.
11127
+ * @private
11128
+ * @param {string} value
11129
+ */
11130
+ _setFormatFromLocale(value) {
11131
+ const oldValue = this._format;
11132
+ this._format = value ? value.toLowerCase() : value;
11133
+ this.requestUpdate('format', oldValue);
11134
+ }
11135
+
11105
11136
  connectedCallback() {
11106
11137
  super.connectedCallback();
11107
11138
 
@@ -11149,15 +11180,6 @@ class BaseInput extends AuroElement {
11149
11180
 
11150
11181
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11151
11182
 
11152
- // Normalize the format token to lowercase so case-mixed values supplied
11153
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
11154
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
11155
- // format silently misses the map and leaves `setCustomValidityForType`
11156
- // unset.
11157
- if (this.format) {
11158
- this.format = this.format.toLowerCase();
11159
- }
11160
-
11161
11183
  // use validity message override if declared when initializing the component
11162
11184
  if (this.hasAttribute('setCustomValidity')) {
11163
11185
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -11264,12 +11286,10 @@ class BaseInput extends AuroElement {
11264
11286
  updated(changedProperties) {
11265
11287
  super.updated(changedProperties);
11266
11288
 
11267
- // When locale changes without an explicit format override, derive format from the new locale.
11268
- // Only runs if the current format is still the previous locale's default (not user-overridden).
11289
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
11269
11290
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
11270
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
11271
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
11272
- this.format = getDateFormatFromLocale(this.locale);
11291
+ if (!this._userSetFormat) {
11292
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
11273
11293
  }
11274
11294
  }
11275
11295
 
@@ -11440,9 +11460,6 @@ class BaseInput extends AuroElement {
11440
11460
  this.maskInstance.on('accept', () => {
11441
11461
  if (this._configuringMask) return;
11442
11462
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11443
- if (this.type === "date") {
11444
- this._rawMaskValue = this.maskInstance.value;
11445
- }
11446
11463
  });
11447
11464
 
11448
11465
  // Mask fires 'complete' on the restore step below for any value that
@@ -11450,9 +11467,6 @@ class BaseInput extends AuroElement {
11450
11467
  this.maskInstance.on('complete', () => {
11451
11468
  if (this._configuringMask) return;
11452
11469
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11453
- if (this.type === "date") {
11454
- this._rawMaskValue = this.maskInstance.value;
11455
- }
11456
11470
  });
11457
11471
 
11458
11472
  // Write existingValue through the mask (not the input directly) so
@@ -11473,14 +11487,17 @@ class BaseInput extends AuroElement {
11473
11487
  * @returns {void}
11474
11488
  */
11475
11489
  notifyValueChanged() {
11476
- let inputEvent = null;
11477
-
11478
- inputEvent = new Event('input', {
11490
+ // This echoes Lit's reactive value update (and handleClickClear's
11491
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
11492
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
11493
+ // it from genuine user typing and skip clobbering their own
11494
+ // programmatic state during init-time renders.
11495
+ const inputEvent = new Event('input', {
11479
11496
  bubbles: true,
11480
11497
  composed: true,
11481
11498
  });
11499
+ inputEvent.isProgrammatic = true;
11482
11500
 
11483
- // Dispatched event to alert outside shadow DOM context of event firing.
11484
11501
  this.dispatchEvent(inputEvent);
11485
11502
  }
11486
11503
 
@@ -11689,8 +11706,7 @@ class BaseInput extends AuroElement {
11689
11706
 
11690
11707
  // Set default date format if type=date and no format is defined
11691
11708
  if (this.type === "date" && !this.format) {
11692
- // Use locale to determine default date format
11693
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
11709
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
11694
11710
  this.util.updateFormat(this.format);
11695
11711
  }
11696
11712
  }
@@ -11719,7 +11735,7 @@ class BaseInput extends AuroElement {
11719
11735
  const creditCard = this.matchInputValueToCreditCard();
11720
11736
  const previousFormat = this.format;
11721
11737
 
11722
- this.format = creditCard.maskFormat;
11738
+ this._setFormatFromLocale(creditCard.maskFormat);
11723
11739
 
11724
11740
  this.maxLength = creditCard.formatLength;
11725
11741
  this.minLength = creditCard.formatMinLength;
@@ -12193,7 +12209,7 @@ class AuroHelpText extends LitElement {
12193
12209
  }
12194
12210
  }
12195
12211
 
12196
- var formkitVersion = '202607022050';
12212
+ var formkitVersion = '202607071532';
12197
12213
 
12198
12214
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12199
12215
  // See LICENSE in the project root for license information.
@@ -12479,20 +12495,15 @@ class AuroInput extends BaseInput {
12479
12495
  * @returns {void}
12480
12496
  */
12481
12497
  checkDisplayValueSlotChange() {
12482
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
12483
-
12484
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
12485
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
12486
- nodes = nodes[0].assignedNodes();
12487
- }
12488
-
12489
- let hasContent = false;
12490
-
12491
- if (nodes.length > 0) {
12492
- hasContent = true;
12493
- }
12494
-
12495
- this.hasDisplayValueContent = hasContent;
12498
+ // flatten:true resolves through auro-combobox's forwarding slot
12499
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
12500
+ // directly to auro-input's light DOM alongside the forwarder still
12501
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
12502
+ // discarded any siblings past the forwarder.
12503
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
12504
+ const nodes = slot.assignedNodes({ flatten: true });
12505
+
12506
+ this.hasDisplayValueContent = nodes.length > 0;
12496
12507
  }
12497
12508
 
12498
12509
  firstUpdated() {
@@ -10599,14 +10599,16 @@ class BaseInput extends AuroElement {
10599
10599
  this.label = 'Input label is undefined';
10600
10600
  this.layout = 'classic';
10601
10601
  this.locale = 'en-US';
10602
+ this._format = undefined;
10603
+
10604
+ /** @private */
10605
+ this._userSetFormat = false;
10602
10606
  this.max = undefined;
10603
10607
  this.maxLength = undefined;
10604
10608
  this.min = undefined;
10605
10609
  this.minLength = undefined;
10606
10610
  this.noValidate = false;
10607
10611
  this.onDark = false;
10608
- // Raw values returned from the input mask before model normalization.
10609
- this._rawMaskValue = undefined;
10610
10612
  this.required = false;
10611
10613
  this.setCustomValidityForType = undefined;
10612
10614
  // Credit Card is intentionally excluded — its mask manages the cursor
@@ -10764,7 +10766,8 @@ class BaseInput extends AuroElement {
10764
10766
  */
10765
10767
  format: {
10766
10768
  type: String,
10767
- reflect: true
10769
+ reflect: true,
10770
+ noAccessor: true
10768
10771
  },
10769
10772
 
10770
10773
  /**
@@ -11102,6 +11105,34 @@ class BaseInput extends AuroElement {
11102
11105
  return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
11103
11106
  }
11104
11107
 
11108
+ get format() {
11109
+ return this._format;
11110
+ }
11111
+
11112
+ /**
11113
+ * Overrides LitElement's generated accessor so we can track whether the
11114
+ * consumer explicitly set `format`. Locale-derived updates use
11115
+ * `_setFormatFromLocale` instead, which skips this flag.
11116
+ */
11117
+ set format(value) {
11118
+ const oldValue = this._format;
11119
+ this._format = value ? value.toLowerCase() : value;
11120
+ this._userSetFormat = Boolean(value);
11121
+ this.requestUpdate('format', oldValue);
11122
+ }
11123
+
11124
+ /**
11125
+ * Sets format without marking it as user-set. Used by locale auto-derive
11126
+ * so that a subsequent locale change can still update the format.
11127
+ * @private
11128
+ * @param {string} value
11129
+ */
11130
+ _setFormatFromLocale(value) {
11131
+ const oldValue = this._format;
11132
+ this._format = value ? value.toLowerCase() : value;
11133
+ this.requestUpdate('format', oldValue);
11134
+ }
11135
+
11105
11136
  connectedCallback() {
11106
11137
  super.connectedCallback();
11107
11138
 
@@ -11149,15 +11180,6 @@ class BaseInput extends AuroElement {
11149
11180
 
11150
11181
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11151
11182
 
11152
- // Normalize the format token to lowercase so case-mixed values supplied
11153
- // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
11154
- // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
11155
- // format silently misses the map and leaves `setCustomValidityForType`
11156
- // unset.
11157
- if (this.format) {
11158
- this.format = this.format.toLowerCase();
11159
- }
11160
-
11161
11183
  // use validity message override if declared when initializing the component
11162
11184
  if (this.hasAttribute('setCustomValidity')) {
11163
11185
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -11264,12 +11286,10 @@ class BaseInput extends AuroElement {
11264
11286
  updated(changedProperties) {
11265
11287
  super.updated(changedProperties);
11266
11288
 
11267
- // When locale changes without an explicit format override, derive format from the new locale.
11268
- // Only runs if the current format is still the previous locale's default (not user-overridden).
11289
+ // When locale changes, auto-derive format unless the consumer explicitly set one.
11269
11290
  if (changedProperties.has('locale') && !changedProperties.has('format') && this.type === 'date') {
11270
- const previousLocaleFormat = getDateFormatFromLocale(changedProperties.get('locale'));
11271
- if (!this.format || this.format.toLowerCase() === previousLocaleFormat) {
11272
- this.format = getDateFormatFromLocale(this.locale);
11291
+ if (!this._userSetFormat) {
11292
+ this._setFormatFromLocale(getDateFormatFromLocale(this.locale));
11273
11293
  }
11274
11294
  }
11275
11295
 
@@ -11440,9 +11460,6 @@ class BaseInput extends AuroElement {
11440
11460
  this.maskInstance.on('accept', () => {
11441
11461
  if (this._configuringMask) return;
11442
11462
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11443
- if (this.type === "date") {
11444
- this._rawMaskValue = this.maskInstance.value;
11445
- }
11446
11463
  });
11447
11464
 
11448
11465
  // Mask fires 'complete' on the restore step below for any value that
@@ -11450,9 +11467,6 @@ class BaseInput extends AuroElement {
11450
11467
  this.maskInstance.on('complete', () => {
11451
11468
  if (this._configuringMask) return;
11452
11469
  this.value = this.util.toModelValue(this.maskInstance.value, this.format);
11453
- if (this.type === "date") {
11454
- this._rawMaskValue = this.maskInstance.value;
11455
- }
11456
11470
  });
11457
11471
 
11458
11472
  // Write existingValue through the mask (not the input directly) so
@@ -11473,14 +11487,17 @@ class BaseInput extends AuroElement {
11473
11487
  * @returns {void}
11474
11488
  */
11475
11489
  notifyValueChanged() {
11476
- let inputEvent = null;
11477
-
11478
- inputEvent = new Event('input', {
11490
+ // This echoes Lit's reactive value update (and handleClickClear's
11491
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
11492
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
11493
+ // it from genuine user typing and skip clobbering their own
11494
+ // programmatic state during init-time renders.
11495
+ const inputEvent = new Event('input', {
11479
11496
  bubbles: true,
11480
11497
  composed: true,
11481
11498
  });
11499
+ inputEvent.isProgrammatic = true;
11482
11500
 
11483
- // Dispatched event to alert outside shadow DOM context of event firing.
11484
11501
  this.dispatchEvent(inputEvent);
11485
11502
  }
11486
11503
 
@@ -11689,8 +11706,7 @@ class BaseInput extends AuroElement {
11689
11706
 
11690
11707
  // Set default date format if type=date and no format is defined
11691
11708
  if (this.type === "date" && !this.format) {
11692
- // Use locale to determine default date format
11693
- this.format = this.util.getDateMaskFromLocale().toLowerCase();
11709
+ this._setFormatFromLocale(this.util.getDateMaskFromLocale().toLowerCase());
11694
11710
  this.util.updateFormat(this.format);
11695
11711
  }
11696
11712
  }
@@ -11719,7 +11735,7 @@ class BaseInput extends AuroElement {
11719
11735
  const creditCard = this.matchInputValueToCreditCard();
11720
11736
  const previousFormat = this.format;
11721
11737
 
11722
- this.format = creditCard.maskFormat;
11738
+ this._setFormatFromLocale(creditCard.maskFormat);
11723
11739
 
11724
11740
  this.maxLength = creditCard.formatLength;
11725
11741
  this.minLength = creditCard.formatMinLength;
@@ -12193,7 +12209,7 @@ class AuroHelpText extends LitElement {
12193
12209
  }
12194
12210
  }
12195
12211
 
12196
- var formkitVersion = '202607022050';
12212
+ var formkitVersion = '202607071532';
12197
12213
 
12198
12214
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12199
12215
  // See LICENSE in the project root for license information.
@@ -12479,20 +12495,15 @@ class AuroInput extends BaseInput {
12479
12495
  * @returns {void}
12480
12496
  */
12481
12497
  checkDisplayValueSlotChange() {
12482
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
12483
-
12484
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
12485
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
12486
- nodes = nodes[0].assignedNodes();
12487
- }
12488
-
12489
- let hasContent = false;
12490
-
12491
- if (nodes.length > 0) {
12492
- hasContent = true;
12493
- }
12494
-
12495
- this.hasDisplayValueContent = hasContent;
12498
+ // flatten:true resolves through auro-combobox's forwarding slot
12499
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
12500
+ // directly to auro-input's light DOM alongside the forwarder still
12501
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
12502
+ // discarded any siblings past the forwarder.
12503
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
12504
+ const nodes = slot.assignedNodes({ flatten: true });
12505
+
12506
+ this.hasDisplayValueContent = nodes.length > 0;
12496
12507
  }
12497
12508
 
12498
12509
  firstUpdated() {
@@ -1227,7 +1227,7 @@ class AuroHelpText extends i$2 {
1227
1227
  }
1228
1228
  }
1229
1229
 
1230
- var formkitVersion = '202607022050';
1230
+ var formkitVersion = '202607071532';
1231
1231
 
1232
1232
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1233
1233
  // See LICENSE in the project root for license information.
@@ -1227,7 +1227,7 @@ class AuroHelpText extends i$2 {
1227
1227
  }
1228
1228
  }
1229
1229
 
1230
- var formkitVersion = '202607022050';
1230
+ var formkitVersion = '202607071532';
1231
1231
 
1232
1232
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1233
1233
  // See LICENSE in the project root for license information.