@aurodesignsystem-dev/auro-formkit 0.0.0-pr1514.3 → 0.0.0-pr1514.5

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 (52) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/customize.min.js +1 -1
  4. package/components/checkbox/demo/getting-started.min.js +1 -1
  5. package/components/checkbox/demo/index.min.js +1 -1
  6. package/components/checkbox/dist/index.js +1 -1
  7. package/components/checkbox/dist/registered.js +1 -1
  8. package/components/combobox/demo/customize.min.js +121 -97
  9. package/components/combobox/demo/getting-started.min.js +121 -97
  10. package/components/combobox/demo/index.min.js +121 -97
  11. package/components/combobox/dist/index.js +120 -96
  12. package/components/combobox/dist/registered.js +120 -96
  13. package/components/counter/demo/customize.min.js +11 -3
  14. package/components/counter/demo/index.min.js +11 -3
  15. package/components/counter/dist/index.js +11 -3
  16. package/components/counter/dist/registered.js +11 -3
  17. package/components/datepicker/demo/customize.min.js +224 -119
  18. package/components/datepicker/demo/index.min.js +224 -119
  19. package/components/datepicker/dist/auro-calendar.d.ts +24 -7
  20. package/components/datepicker/dist/index.js +224 -119
  21. package/components/datepicker/dist/registered.js +224 -119
  22. package/components/dropdown/demo/customize.min.js +2 -1
  23. package/components/dropdown/demo/getting-started.min.js +2 -1
  24. package/components/dropdown/demo/index.min.js +2 -1
  25. package/components/dropdown/dist/index.js +2 -1
  26. package/components/dropdown/dist/registered.js +2 -1
  27. package/components/form/demo/customize.min.js +662 -378
  28. package/components/form/demo/getting-started.min.js +662 -378
  29. package/components/form/demo/index.min.js +662 -378
  30. package/components/form/demo/registerDemoDeps.min.js +662 -378
  31. package/components/input/demo/api.md +5 -5
  32. package/components/input/demo/customize.md +8 -8
  33. package/components/input/demo/customize.min.js +116 -93
  34. package/components/input/demo/getting-started.min.js +116 -93
  35. package/components/input/demo/index.min.js +116 -93
  36. package/components/input/dist/base-input.d.ts +33 -44
  37. package/components/input/dist/index.js +129 -94
  38. package/components/input/dist/registered.js +116 -93
  39. package/components/radio/demo/customize.min.js +1 -1
  40. package/components/radio/demo/getting-started.min.js +1 -1
  41. package/components/radio/demo/index.min.js +1 -1
  42. package/components/radio/dist/index.js +1 -1
  43. package/components/radio/dist/registered.js +1 -1
  44. package/components/select/demo/customize.min.js +187 -63
  45. package/components/select/demo/getting-started.min.js +187 -63
  46. package/components/select/demo/index.min.js +187 -63
  47. package/components/select/demo/keyboard-behavior.md +18 -4
  48. package/components/select/dist/auro-select.d.ts +20 -8
  49. package/components/select/dist/index.js +187 -63
  50. package/components/select/dist/registered.js +187 -63
  51. package/custom-elements.json +1940 -1734
  52. package/package.json +1 -1
@@ -10327,6 +10327,13 @@ class AuroInputUtilities {
10327
10327
  * @returns {string | undefined}
10328
10328
  */
10329
10329
  toFormattedValue(valueObject, format) {
10330
+ // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
10331
+ // `format` argument has to fail gracefully rather than throw on
10332
+ // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
10333
+ // as "no format → no display value".
10334
+ if (!format) {
10335
+ return undefined;
10336
+ }
10330
10337
  const normalizedFormat = format.toLowerCase();
10331
10338
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
10332
10339
 
@@ -10477,79 +10484,18 @@ class BaseInput extends AuroElement {
10477
10484
  constructor() {
10478
10485
  super();
10479
10486
 
10480
- this.appearance = "default";
10481
- this.disabled = false;
10482
- this.layout = 'classic';
10483
- this.locale = 'en-US';
10484
- this.max = undefined;
10485
- this._maxObject = undefined;
10486
- this.maxLength = undefined;
10487
- this.min = undefined;
10488
- this._minObject = undefined;
10489
- this.minLength = undefined;
10490
- this.required = false;
10491
- this.onDark = false;
10492
- this.setCustomValidityForType = undefined;
10493
- this.size = 'lg';
10494
- this.shape = 'classic';
10495
- this.value = undefined;
10496
- this._valueObject = undefined;
10497
-
10498
- this._initializePrivateDefaults();
10499
- }
10500
-
10501
- /**
10502
- * Internal Defaults.
10503
- * @private
10504
- * @returns {void}
10505
- */
10506
- _initializePrivateDefaults() {
10487
+ // Single-source initialization. Alphabetized so duplicate or stale
10488
+ // defaults are immediately obvious on a diff. Every field is assigned
10489
+ // exactly once here (previously the constructor + the old
10490
+ // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
10491
+ // fields and double-allocated `util` and `validation`, discarding the
10492
+ // first instance). `validation` is now allocated exactly once; `util`
10493
+ // is seeded here with an en-US default and then rebuilt in
10494
+ // `connectedCallback` once the consumer-resolved locale is available,
10495
+ // so a parent (datepicker/combobox) calling `validate()` synchronously
10496
+ // during its own update cycle sees a populated util instance.
10507
10497
  this.activeLabel = false;
10508
- this.appearance = "default";
10509
- this.icon = false;
10510
- this.disabled = false;
10511
- this.dvInputOnly = false;
10512
- this.hideLabelVisually = false;
10513
- this.max = undefined;
10514
- this.maxLength = undefined;
10515
- this.min = undefined;
10516
- this.minLength = undefined;
10517
- this.noValidate = false;
10518
- this.onDark = false;
10519
- this.required = false;
10520
- this.setCustomValidityForType = undefined;
10521
-
10522
- // Used for storing raw values returned from input mask.
10523
- this._rawMaskValue = undefined;
10524
-
10525
- /**
10526
- * @private
10527
- */
10528
- this.layout = 'classic';
10529
-
10530
- /**
10531
- * @private
10532
- */
10533
- this.shape = 'classic';
10534
-
10535
- /**
10536
- * @private
10537
- */
10538
- this.size = 'lg';
10539
-
10540
- this.touched = false;
10541
- this.util = new AuroInputUtilities({
10542
- locale: "en-US",
10543
- format: this.format
10544
- });
10545
- this.validation = new AuroFormValidation();
10546
- this.inputIconName = undefined;
10547
- this.showPassword = false;
10548
- this.validationCCLength = undefined;
10549
- this.hasValue = false;
10550
- this.label = 'Input label is undefined';
10551
-
10552
-
10498
+ /** @private */
10553
10499
  this.allowedInputTypes = [
10554
10500
  "text",
10555
10501
  "number",
@@ -10558,7 +10504,8 @@ class BaseInput extends AuroElement {
10558
10504
  "credit-card",
10559
10505
  "tel"
10560
10506
  ];
10561
- this.icon = false;
10507
+ this.appearance = "default";
10508
+ /** @private */
10562
10509
  this.dateFormatMap = {
10563
10510
  'mm/dd/yyyy': 'dateMMDDYYYY',
10564
10511
  'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -10575,27 +10522,57 @@ class BaseInput extends AuroElement {
10575
10522
  'dd/mm': 'dateDDMM',
10576
10523
  'mm/dd': 'dateMMDD'
10577
10524
  };
10525
+ this.disabled = false;
10526
+ /** @private */
10578
10527
  this.domHandler = new DomHandler();
10579
10528
  this.dvInputOnly = false;
10580
10529
  this.hasValue = false;
10530
+ this.hideLabelVisually = false;
10531
+ this.icon = false;
10532
+ /** @private */
10581
10533
  this.inputIconName = undefined;
10534
+ /** @private */
10582
10535
  this.label = 'Input label is undefined';
10536
+ this.layout = 'classic';
10537
+ this.locale = 'en-US';
10538
+ this.max = undefined;
10539
+ this._maxObject = undefined;
10540
+ this.maxLength = undefined;
10541
+ this.min = undefined;
10542
+ this._minObject = undefined;
10543
+ this.minLength = undefined;
10583
10544
  this.noValidate = false;
10584
- this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
10545
+ this.onDark = false;
10546
+ // Raw values returned from the input mask before model normalization.
10547
+ this._rawMaskValue = undefined;
10548
+ this.required = false;
10549
+ this.setCustomValidityForType = undefined;
10550
+ // Credit Card is intentionally excluded — its mask manages the cursor
10551
+ // itself, and listing it here caused cursor placement issues in Safari.
10552
+ /** @private */
10585
10553
  this.setSelectionInputTypes = [
10586
10554
  "text",
10587
10555
  "password",
10588
10556
  "email"
10589
- ]; // Credit Card is not included as this caused cursor placement issues in Safari.
10557
+ ];
10558
+ this.shape = 'classic';
10559
+ /** @private */
10590
10560
  this.showPassword = false;
10561
+ this.size = 'lg';
10591
10562
  this.touched = false;
10563
+ /** @private */
10592
10564
  this.uniqueId = new UniqueId().create();
10565
+ /** @private */
10593
10566
  this.util = new AuroInputUtilities({
10594
10567
  locale: this.locale,
10595
10568
  format: this.format
10596
10569
  });
10570
+ /** @private */
10597
10571
  this.validation = new AuroFormValidation();
10572
+ /** @private */
10598
10573
  this.validationCCLength = undefined;
10574
+ this.value = undefined;
10575
+ this._valueObject = undefined;
10599
10576
  }
10600
10577
 
10601
10578
  // function to define props used within the scope of this component
@@ -11143,6 +11120,15 @@ class BaseInput extends AuroElement {
11143
11120
 
11144
11121
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
11145
11122
 
11123
+ // Normalize the format token to lowercase so case-mixed values supplied
11124
+ // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
11125
+ // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
11126
+ // format silently misses the map and leaves `setCustomValidityForType`
11127
+ // unset.
11128
+ if (this.format) {
11129
+ this.format = this.format.toLowerCase();
11130
+ }
11131
+
11146
11132
  // use validity message override if declared when initializing the component
11147
11133
  if (this.hasAttribute('setCustomValidity')) {
11148
11134
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -11576,6 +11562,38 @@ class BaseInput extends AuroElement {
11576
11562
  this.touched = true;
11577
11563
  this.validation.validate(this);
11578
11564
  }
11565
+
11566
+ // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
11567
+ // update that can re-render the input and reset the native cursor; we
11568
+ // capture the caret position before that update commits and restore it
11569
+ // via `setSelectionRange` once the update has flushed. Gated on
11570
+ // `setSelectionInputTypes` so credit-card (and other masked types whose
11571
+ // formatter manages the cursor itself) doesn't get a competing write.
11572
+ // Capture the caret position INSIDE the gate — reading `selectionStart`
11573
+ // on input types that don't support text selection (number, email in
11574
+ // some browsers) throws InvalidStateError, which would crash all input
11575
+ // handling. Wrap the read in try/catch belt-and-suspenders even though
11576
+ // the gated types currently support it, since the list is a public
11577
+ // property a consumer could mutate.
11578
+ if (this.setSelectionInputTypes.includes(this.type)) {
11579
+ let selectionStart;
11580
+ try {
11581
+ selectionStart = this.inputElement.selectionStart;
11582
+ } catch (error) { // eslint-disable-line no-unused-vars
11583
+ return;
11584
+ }
11585
+ if (typeof selectionStart !== 'number') {
11586
+ return;
11587
+ }
11588
+ this.updateComplete.then(() => {
11589
+ try {
11590
+ this.inputElement.setSelectionRange(selectionStart, selectionStart);
11591
+ } catch (error) { // eslint-disable-line no-unused-vars
11592
+ // Some input types (number/email in certain UAs) throw on
11593
+ // setSelectionRange; swallow and let the native cursor stand.
11594
+ }
11595
+ });
11596
+ }
11579
11597
  }
11580
11598
 
11581
11599
  /**
@@ -12202,7 +12220,7 @@ class AuroHelpText extends LitElement {
12202
12220
  }
12203
12221
  }
12204
12222
 
12205
- var formkitVersion = '202606291727';
12223
+ var formkitVersion = '202606291930';
12206
12224
 
12207
12225
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12208
12226
  // See LICENSE in the project root for license information.
@@ -12705,6 +12723,7 @@ class AuroInput extends BaseInput {
12705
12723
  <${this.buttonTag}
12706
12724
  @click="${this.handleClickShowPassword}"
12707
12725
  appearance="${this.onDark ? 'inverse' : this.appearance}"
12726
+ aria-pressed="${this.showPassword ? 'true' : 'false'}"
12708
12727
  class="notificationBtn passwordBtn"
12709
12728
  shape="circle"
12710
12729
  size="sm"
@@ -12778,25 +12797,29 @@ class AuroInput extends BaseInput {
12778
12797
  * @returns {html} - Returns HTML for the help text and error message.
12779
12798
  */
12780
12799
  renderHtmlHelpText() {
12800
+ // Single `<p>` with stable identity across validity transitions —
12801
+ // previously two distinct templates (valid vs invalid) caused Lit to
12802
+ // replace the node entirely on a flip, and VoiceOver wouldn't
12803
+ // re-announce because the live-region element it was watching had been
12804
+ // removed and a new one inserted. Keeping one node means the `role`,
12805
+ // `aria-live`, and text content all change in-place, which AT does
12806
+ // observe and announce.
12807
+ const isError = this.validity && this.validity !== 'valid';
12781
12808
  return html$1`
12782
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
12783
- ? html$1`
12784
- <${this.helpTextTag}
12785
- appearance="${this.onDark ? 'inverse' : this.appearance}">
12786
- <p id="${this.uniqueId}" part="helpText">
12787
- <slot name="helpText">${this.getHelpText()}</slot>
12788
- </p>
12789
- </${this.helpTextTag}>
12790
- `
12791
- : html$1`
12792
- <${this.helpTextTag} error
12793
- appearance="${this.onDark ? 'inverse' : this.appearance}">
12794
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
12795
- ${this.errorMessage}
12796
- </p>
12797
- </${this.helpTextTag}>
12798
- `
12809
+ <${this.helpTextTag}
12810
+ appearance="${this.onDark ? 'inverse' : this.appearance}"
12811
+ ?error=${isError}>
12812
+ <p
12813
+ id="${this.uniqueId}"
12814
+ part="helpText"
12815
+ role="${ifDefined(isError ? 'alert' : undefined)}"
12816
+ aria-live="${ifDefined(isError ? 'assertive' : undefined)}">
12817
+ ${isError
12818
+ ? this.errorMessage
12819
+ : html$1`<slot name="helpText">${this.getHelpText()}</slot>`
12799
12820
  }
12821
+ </p>
12822
+ </${this.helpTextTag}>
12800
12823
  `;
12801
12824
  }
12802
12825
 
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606291727';
1215
+ var formkitVersion = '202606291930';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606291727';
1215
+ var formkitVersion = '202606291930';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606291727';
1215
+ var formkitVersion = '202606291930';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
1151
1151
  }
1152
1152
  }
1153
1153
 
1154
- var formkitVersion = '202606291727';
1154
+ var formkitVersion = '202606291930';
1155
1155
 
1156
1156
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1157
1157
  // See LICENSE in the project root for license information.
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
1151
1151
  }
1152
1152
  }
1153
1153
 
1154
- var formkitVersion = '202606291727';
1154
+ var formkitVersion = '202606291930';
1155
1155
 
1156
1156
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1157
1157
  // See LICENSE in the project root for license information.