@aurodesignsystem-dev/auro-formkit 0.0.0-pr1515.0 → 0.0.0-pr1515.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 (49) 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 +119 -96
  7. package/components/combobox/demo/getting-started.min.js +119 -96
  8. package/components/combobox/demo/index.min.js +119 -96
  9. package/components/combobox/dist/index.js +118 -95
  10. package/components/combobox/dist/registered.js +118 -95
  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/customize.min.js +139 -97
  16. package/components/datepicker/demo/index.min.js +139 -97
  17. package/components/datepicker/dist/index.js +139 -97
  18. package/components/datepicker/dist/registered.js +139 -97
  19. package/components/dropdown/demo/customize.min.js +1 -1
  20. package/components/dropdown/demo/getting-started.min.js +1 -1
  21. package/components/dropdown/demo/index.min.js +1 -1
  22. package/components/dropdown/dist/index.js +1 -1
  23. package/components/dropdown/dist/registered.js +1 -1
  24. package/components/form/demo/customize.min.js +381 -293
  25. package/components/form/demo/getting-started.min.js +381 -293
  26. package/components/form/demo/index.min.js +381 -293
  27. package/components/form/demo/registerDemoDeps.min.js +381 -293
  28. package/components/input/demo/api.md +5 -5
  29. package/components/input/demo/customize.md +8 -8
  30. package/components/input/demo/customize.min.js +116 -93
  31. package/components/input/demo/getting-started.min.js +116 -93
  32. package/components/input/demo/index.min.js +116 -93
  33. package/components/input/dist/base-input.d.ts +33 -44
  34. package/components/input/dist/index.js +129 -94
  35. package/components/input/dist/registered.js +116 -93
  36. package/components/radio/demo/customize.min.js +1 -1
  37. package/components/radio/demo/getting-started.min.js +1 -1
  38. package/components/radio/demo/index.min.js +1 -1
  39. package/components/radio/dist/index.js +1 -1
  40. package/components/radio/dist/registered.js +1 -1
  41. package/components/select/demo/customize.md +1 -1
  42. package/components/select/demo/index.min.js +2 -2
  43. package/components/select/dist/index.js +2 -2
  44. package/components/select/dist/registered.js +2 -2
  45. package/custom-elements.json +1944 -1734
  46. package/package.json +1 -1
  47. package/components/select/demo/customize.min.js +0 -10170
  48. package/components/select/demo/demo-support.min.js +0 -55807
  49. package/components/select/demo/getting-started.min.js +0 -10214
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4806
4806
  }
4807
4807
  };
4808
4808
 
4809
- var formkitVersion$2 = '202606291748';
4809
+ var formkitVersion$2 = '202606291813';
4810
4810
 
4811
4811
  let AuroElement$2 = class AuroElement extends LitElement {
4812
4812
  static get properties() {
@@ -16525,6 +16525,13 @@ class AuroInputUtilities {
16525
16525
  * @returns {string | undefined}
16526
16526
  */
16527
16527
  toFormattedValue(valueObject, format) {
16528
+ // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
16529
+ // `format` argument has to fail gracefully rather than throw on
16530
+ // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
16531
+ // as "no format → no display value".
16532
+ if (!format) {
16533
+ return undefined;
16534
+ }
16528
16535
  const normalizedFormat = format.toLowerCase();
16529
16536
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
16530
16537
 
@@ -16675,79 +16682,18 @@ class BaseInput extends AuroElement$1 {
16675
16682
  constructor() {
16676
16683
  super();
16677
16684
 
16678
- this.appearance = "default";
16679
- this.disabled = false;
16680
- this.layout = 'classic';
16681
- this.locale = 'en-US';
16682
- this.max = undefined;
16683
- this._maxObject = undefined;
16684
- this.maxLength = undefined;
16685
- this.min = undefined;
16686
- this._minObject = undefined;
16687
- this.minLength = undefined;
16688
- this.required = false;
16689
- this.onDark = false;
16690
- this.setCustomValidityForType = undefined;
16691
- this.size = 'lg';
16692
- this.shape = 'classic';
16693
- this.value = undefined;
16694
- this._valueObject = undefined;
16695
-
16696
- this._initializePrivateDefaults();
16697
- }
16698
-
16699
- /**
16700
- * Internal Defaults.
16701
- * @private
16702
- * @returns {void}
16703
- */
16704
- _initializePrivateDefaults() {
16685
+ // Single-source initialization. Alphabetized so duplicate or stale
16686
+ // defaults are immediately obvious on a diff. Every field is assigned
16687
+ // exactly once here (previously the constructor + the old
16688
+ // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
16689
+ // fields and double-allocated `util` and `validation`, discarding the
16690
+ // first instance). `validation` is now allocated exactly once; `util`
16691
+ // is seeded here with an en-US default and then rebuilt in
16692
+ // `connectedCallback` once the consumer-resolved locale is available,
16693
+ // so a parent (datepicker/combobox) calling `validate()` synchronously
16694
+ // during its own update cycle sees a populated util instance.
16705
16695
  this.activeLabel = false;
16706
- this.appearance = "default";
16707
- this.icon = false;
16708
- this.disabled = false;
16709
- this.dvInputOnly = false;
16710
- this.hideLabelVisually = false;
16711
- this.max = undefined;
16712
- this.maxLength = undefined;
16713
- this.min = undefined;
16714
- this.minLength = undefined;
16715
- this.noValidate = false;
16716
- this.onDark = false;
16717
- this.required = false;
16718
- this.setCustomValidityForType = undefined;
16719
-
16720
- // Used for storing raw values returned from input mask.
16721
- this._rawMaskValue = undefined;
16722
-
16723
- /**
16724
- * @private
16725
- */
16726
- this.layout = 'classic';
16727
-
16728
- /**
16729
- * @private
16730
- */
16731
- this.shape = 'classic';
16732
-
16733
- /**
16734
- * @private
16735
- */
16736
- this.size = 'lg';
16737
-
16738
- this.touched = false;
16739
- this.util = new AuroInputUtilities({
16740
- locale: "en-US",
16741
- format: this.format
16742
- });
16743
- this.validation = new AuroFormValidation();
16744
- this.inputIconName = undefined;
16745
- this.showPassword = false;
16746
- this.validationCCLength = undefined;
16747
- this.hasValue = false;
16748
- this.label = 'Input label is undefined';
16749
-
16750
-
16696
+ /** @private */
16751
16697
  this.allowedInputTypes = [
16752
16698
  "text",
16753
16699
  "number",
@@ -16756,7 +16702,8 @@ class BaseInput extends AuroElement$1 {
16756
16702
  "credit-card",
16757
16703
  "tel"
16758
16704
  ];
16759
- this.icon = false;
16705
+ this.appearance = "default";
16706
+ /** @private */
16760
16707
  this.dateFormatMap = {
16761
16708
  'mm/dd/yyyy': 'dateMMDDYYYY',
16762
16709
  'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -16773,27 +16720,57 @@ class BaseInput extends AuroElement$1 {
16773
16720
  'dd/mm': 'dateDDMM',
16774
16721
  'mm/dd': 'dateMMDD'
16775
16722
  };
16723
+ this.disabled = false;
16724
+ /** @private */
16776
16725
  this.domHandler = new DomHandler();
16777
16726
  this.dvInputOnly = false;
16778
16727
  this.hasValue = false;
16728
+ this.hideLabelVisually = false;
16729
+ this.icon = false;
16730
+ /** @private */
16779
16731
  this.inputIconName = undefined;
16732
+ /** @private */
16780
16733
  this.label = 'Input label is undefined';
16734
+ this.layout = 'classic';
16735
+ this.locale = 'en-US';
16736
+ this.max = undefined;
16737
+ this._maxObject = undefined;
16738
+ this.maxLength = undefined;
16739
+ this.min = undefined;
16740
+ this._minObject = undefined;
16741
+ this.minLength = undefined;
16781
16742
  this.noValidate = false;
16782
- this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
16743
+ this.onDark = false;
16744
+ // Raw values returned from the input mask before model normalization.
16745
+ this._rawMaskValue = undefined;
16746
+ this.required = false;
16747
+ this.setCustomValidityForType = undefined;
16748
+ // Credit Card is intentionally excluded — its mask manages the cursor
16749
+ // itself, and listing it here caused cursor placement issues in Safari.
16750
+ /** @private */
16783
16751
  this.setSelectionInputTypes = [
16784
16752
  "text",
16785
16753
  "password",
16786
16754
  "email"
16787
- ]; // Credit Card is not included as this caused cursor placement issues in Safari.
16755
+ ];
16756
+ this.shape = 'classic';
16757
+ /** @private */
16788
16758
  this.showPassword = false;
16759
+ this.size = 'lg';
16789
16760
  this.touched = false;
16761
+ /** @private */
16790
16762
  this.uniqueId = new UniqueId().create();
16763
+ /** @private */
16791
16764
  this.util = new AuroInputUtilities({
16792
16765
  locale: this.locale,
16793
16766
  format: this.format
16794
16767
  });
16768
+ /** @private */
16795
16769
  this.validation = new AuroFormValidation();
16770
+ /** @private */
16796
16771
  this.validationCCLength = undefined;
16772
+ this.value = undefined;
16773
+ this._valueObject = undefined;
16797
16774
  }
16798
16775
 
16799
16776
  // function to define props used within the scope of this component
@@ -17341,6 +17318,15 @@ class BaseInput extends AuroElement$1 {
17341
17318
 
17342
17319
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
17343
17320
 
17321
+ // Normalize the format token to lowercase so case-mixed values supplied
17322
+ // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
17323
+ // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
17324
+ // format silently misses the map and leaves `setCustomValidityForType`
17325
+ // unset.
17326
+ if (this.format) {
17327
+ this.format = this.format.toLowerCase();
17328
+ }
17329
+
17344
17330
  // use validity message override if declared when initializing the component
17345
17331
  if (this.hasAttribute('setCustomValidity')) {
17346
17332
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -17774,6 +17760,38 @@ class BaseInput extends AuroElement$1 {
17774
17760
  this.touched = true;
17775
17761
  this.validation.validate(this);
17776
17762
  }
17763
+
17764
+ // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
17765
+ // update that can re-render the input and reset the native cursor; we
17766
+ // capture the caret position before that update commits and restore it
17767
+ // via `setSelectionRange` once the update has flushed. Gated on
17768
+ // `setSelectionInputTypes` so credit-card (and other masked types whose
17769
+ // formatter manages the cursor itself) doesn't get a competing write.
17770
+ // Capture the caret position INSIDE the gate — reading `selectionStart`
17771
+ // on input types that don't support text selection (number, email in
17772
+ // some browsers) throws InvalidStateError, which would crash all input
17773
+ // handling. Wrap the read in try/catch belt-and-suspenders even though
17774
+ // the gated types currently support it, since the list is a public
17775
+ // property a consumer could mutate.
17776
+ if (this.setSelectionInputTypes.includes(this.type)) {
17777
+ let selectionStart;
17778
+ try {
17779
+ selectionStart = this.inputElement.selectionStart;
17780
+ } catch (error) { // eslint-disable-line no-unused-vars
17781
+ return;
17782
+ }
17783
+ if (typeof selectionStart !== 'number') {
17784
+ return;
17785
+ }
17786
+ this.updateComplete.then(() => {
17787
+ try {
17788
+ this.inputElement.setSelectionRange(selectionStart, selectionStart);
17789
+ } catch (error) { // eslint-disable-line no-unused-vars
17790
+ // Some input types (number/email in certain UAs) throw on
17791
+ // setSelectionRange; swallow and let the native cursor stand.
17792
+ }
17793
+ });
17794
+ }
17777
17795
  }
17778
17796
 
17779
17797
  /**
@@ -18400,7 +18418,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18400
18418
  }
18401
18419
  };
18402
18420
 
18403
- var formkitVersion$1 = '202606291748';
18421
+ var formkitVersion$1 = '202606291813';
18404
18422
 
18405
18423
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18406
18424
  // See LICENSE in the project root for license information.
@@ -18903,6 +18921,7 @@ class AuroInput extends BaseInput {
18903
18921
  <${this.buttonTag}
18904
18922
  @click="${this.handleClickShowPassword}"
18905
18923
  appearance="${this.onDark ? 'inverse' : this.appearance}"
18924
+ aria-pressed="${this.showPassword ? 'true' : 'false'}"
18906
18925
  class="notificationBtn passwordBtn"
18907
18926
  shape="circle"
18908
18927
  size="sm"
@@ -18976,25 +18995,29 @@ class AuroInput extends BaseInput {
18976
18995
  * @returns {html} - Returns HTML for the help text and error message.
18977
18996
  */
18978
18997
  renderHtmlHelpText() {
18998
+ // Single `<p>` with stable identity across validity transitions —
18999
+ // previously two distinct templates (valid vs invalid) caused Lit to
19000
+ // replace the node entirely on a flip, and VoiceOver wouldn't
19001
+ // re-announce because the live-region element it was watching had been
19002
+ // removed and a new one inserted. Keeping one node means the `role`,
19003
+ // `aria-live`, and text content all change in-place, which AT does
19004
+ // observe and announce.
19005
+ const isError = this.validity && this.validity !== 'valid';
18979
19006
  return html`
18980
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
18981
- ? html`
18982
- <${this.helpTextTag}
18983
- appearance="${this.onDark ? 'inverse' : this.appearance}">
18984
- <p id="${this.uniqueId}" part="helpText">
18985
- <slot name="helpText">${this.getHelpText()}</slot>
18986
- </p>
18987
- </${this.helpTextTag}>
18988
- `
18989
- : html`
18990
- <${this.helpTextTag} error
18991
- appearance="${this.onDark ? 'inverse' : this.appearance}">
18992
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
18993
- ${this.errorMessage}
18994
- </p>
18995
- </${this.helpTextTag}>
18996
- `
19007
+ <${this.helpTextTag}
19008
+ appearance="${this.onDark ? 'inverse' : this.appearance}"
19009
+ ?error=${isError}>
19010
+ <p
19011
+ id="${this.uniqueId}"
19012
+ part="helpText"
19013
+ role="${ifDefined(isError ? 'alert' : undefined)}"
19014
+ aria-live="${ifDefined(isError ? 'assertive' : undefined)}">
19015
+ ${isError
19016
+ ? this.errorMessage
19017
+ : html`<slot name="helpText">${this.getHelpText()}</slot>`
18997
19018
  }
19019
+ </p>
19020
+ </${this.helpTextTag}>
18998
19021
  `;
18999
19022
  }
19000
19023
 
@@ -19521,7 +19544,7 @@ class AuroBibtemplate extends LitElement {
19521
19544
  }
19522
19545
  }
19523
19546
 
19524
- var formkitVersion = '202606291748';
19547
+ var formkitVersion = '202606291813';
19525
19548
 
19526
19549
  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}`;
19527
19550
 
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606291748';
1102
+ var formkitVersion$1 = '202606291813';
1103
1103
 
1104
1104
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1105
1105
  // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
5445
5445
  }
5446
5446
  }
5447
5447
 
5448
- var formkitVersion = '202606291748';
5448
+ var formkitVersion = '202606291813';
5449
5449
 
5450
5450
  let AuroElement$1 = class AuroElement extends i$2 {
5451
5451
  static get properties() {
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606291748';
1102
+ var formkitVersion$1 = '202606291813';
1103
1103
 
1104
1104
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1105
1105
  // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
5445
5445
  }
5446
5446
  }
5447
5447
 
5448
- var formkitVersion = '202606291748';
5448
+ var formkitVersion = '202606291813';
5449
5449
 
5450
5450
  let AuroElement$1 = class AuroElement extends i$2 {
5451
5451
  static get properties() {
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
1049
1049
  }
1050
1050
  };
1051
1051
 
1052
- var formkitVersion$1 = '202606291748';
1052
+ var formkitVersion$1 = '202606291813';
1053
1053
 
1054
1054
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1055
1055
  // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
5377
5377
  }
5378
5378
  }
5379
5379
 
5380
- var formkitVersion = '202606291748';
5380
+ var formkitVersion = '202606291813';
5381
5381
 
5382
5382
  let AuroElement$1 = class AuroElement extends LitElement {
5383
5383
  static get properties() {
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
1049
1049
  }
1050
1050
  };
1051
1051
 
1052
- var formkitVersion$1 = '202606291748';
1052
+ var formkitVersion$1 = '202606291813';
1053
1053
 
1054
1054
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1055
1055
  // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
5377
5377
  }
5378
5378
  }
5379
5379
 
5380
- var formkitVersion = '202606291748';
5380
+ var formkitVersion = '202606291813';
5381
5381
 
5382
5382
  let AuroElement$1 = class AuroElement extends LitElement {
5383
5383
  static get properties() {