@aurodesignsystem-dev/auro-formkit 0.0.0-pr1514.4 → 0.0.0-pr1514.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/components/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 +120 -97
  9. package/components/combobox/demo/getting-started.min.js +120 -97
  10. package/components/combobox/demo/index.min.js +120 -97
  11. package/components/combobox/dist/index.js +119 -96
  12. package/components/combobox/dist/registered.js +119 -96
  13. package/components/counter/demo/customize.min.js +3 -3
  14. package/components/counter/demo/index.min.js +3 -3
  15. package/components/counter/dist/index.js +3 -3
  16. package/components/counter/dist/registered.js +3 -3
  17. package/components/datepicker/demo/customize.min.js +220 -118
  18. package/components/datepicker/demo/index.min.js +220 -118
  19. package/components/datepicker/dist/auro-calendar.d.ts +20 -5
  20. package/components/datepicker/dist/index.js +220 -118
  21. package/components/datepicker/dist/registered.js +220 -118
  22. package/components/dropdown/demo/customize.min.js +1 -1
  23. package/components/dropdown/demo/getting-started.min.js +1 -1
  24. package/components/dropdown/demo/index.min.js +1 -1
  25. package/components/dropdown/dist/index.js +1 -1
  26. package/components/dropdown/dist/registered.js +1 -1
  27. package/components/form/demo/customize.min.js +465 -317
  28. package/components/form/demo/getting-started.min.js +465 -317
  29. package/components/form/demo/index.min.js +465 -317
  30. package/components/form/demo/registerDemoDeps.min.js +465 -317
  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 +3 -3
  45. package/components/select/demo/getting-started.min.js +3 -3
  46. package/components/select/demo/index.min.js +3 -3
  47. package/components/select/dist/index.js +3 -3
  48. package/components/select/dist/registered.js +3 -3
  49. package/custom-elements.json +1945 -1735
  50. package/package.json +1 -1
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4873
4873
  }
4874
4874
  };
4875
4875
 
4876
- var formkitVersion$2 = '202606291737';
4876
+ var formkitVersion$2 = '202606291937';
4877
4877
 
4878
4878
  let AuroElement$2 = class AuroElement extends i$3 {
4879
4879
  static get properties() {
@@ -16599,6 +16599,13 @@ class AuroInputUtilities {
16599
16599
  * @returns {string | undefined}
16600
16600
  */
16601
16601
  toFormattedValue(valueObject, format) {
16602
+ // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
16603
+ // `format` argument has to fail gracefully rather than throw on
16604
+ // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
16605
+ // as "no format → no display value".
16606
+ if (!format) {
16607
+ return undefined;
16608
+ }
16602
16609
  const normalizedFormat = format.toLowerCase();
16603
16610
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
16604
16611
 
@@ -16749,79 +16756,18 @@ class BaseInput extends AuroElement$1 {
16749
16756
  constructor() {
16750
16757
  super();
16751
16758
 
16752
- this.appearance = "default";
16753
- this.disabled = false;
16754
- this.layout = 'classic';
16755
- this.locale = 'en-US';
16756
- this.max = undefined;
16757
- this._maxObject = undefined;
16758
- this.maxLength = undefined;
16759
- this.min = undefined;
16760
- this._minObject = undefined;
16761
- this.minLength = undefined;
16762
- this.required = false;
16763
- this.onDark = false;
16764
- this.setCustomValidityForType = undefined;
16765
- this.size = 'lg';
16766
- this.shape = 'classic';
16767
- this.value = undefined;
16768
- this._valueObject = undefined;
16769
-
16770
- this._initializePrivateDefaults();
16771
- }
16772
-
16773
- /**
16774
- * Internal Defaults.
16775
- * @private
16776
- * @returns {void}
16777
- */
16778
- _initializePrivateDefaults() {
16759
+ // Single-source initialization. Alphabetized so duplicate or stale
16760
+ // defaults are immediately obvious on a diff. Every field is assigned
16761
+ // exactly once here (previously the constructor + the old
16762
+ // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
16763
+ // fields and double-allocated `util` and `validation`, discarding the
16764
+ // first instance). `validation` is now allocated exactly once; `util`
16765
+ // is seeded here with an en-US default and then rebuilt in
16766
+ // `connectedCallback` once the consumer-resolved locale is available,
16767
+ // so a parent (datepicker/combobox) calling `validate()` synchronously
16768
+ // during its own update cycle sees a populated util instance.
16779
16769
  this.activeLabel = false;
16780
- this.appearance = "default";
16781
- this.icon = false;
16782
- this.disabled = false;
16783
- this.dvInputOnly = false;
16784
- this.hideLabelVisually = false;
16785
- this.max = undefined;
16786
- this.maxLength = undefined;
16787
- this.min = undefined;
16788
- this.minLength = undefined;
16789
- this.noValidate = false;
16790
- this.onDark = false;
16791
- this.required = false;
16792
- this.setCustomValidityForType = undefined;
16793
-
16794
- // Used for storing raw values returned from input mask.
16795
- this._rawMaskValue = undefined;
16796
-
16797
- /**
16798
- * @private
16799
- */
16800
- this.layout = 'classic';
16801
-
16802
- /**
16803
- * @private
16804
- */
16805
- this.shape = 'classic';
16806
-
16807
- /**
16808
- * @private
16809
- */
16810
- this.size = 'lg';
16811
-
16812
- this.touched = false;
16813
- this.util = new AuroInputUtilities({
16814
- locale: "en-US",
16815
- format: this.format
16816
- });
16817
- this.validation = new AuroFormValidation();
16818
- this.inputIconName = undefined;
16819
- this.showPassword = false;
16820
- this.validationCCLength = undefined;
16821
- this.hasValue = false;
16822
- this.label = 'Input label is undefined';
16823
-
16824
-
16770
+ /** @private */
16825
16771
  this.allowedInputTypes = [
16826
16772
  "text",
16827
16773
  "number",
@@ -16830,7 +16776,8 @@ class BaseInput extends AuroElement$1 {
16830
16776
  "credit-card",
16831
16777
  "tel"
16832
16778
  ];
16833
- this.icon = false;
16779
+ this.appearance = "default";
16780
+ /** @private */
16834
16781
  this.dateFormatMap = {
16835
16782
  'mm/dd/yyyy': 'dateMMDDYYYY',
16836
16783
  'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -16847,27 +16794,57 @@ class BaseInput extends AuroElement$1 {
16847
16794
  'dd/mm': 'dateDDMM',
16848
16795
  'mm/dd': 'dateMMDD'
16849
16796
  };
16797
+ this.disabled = false;
16798
+ /** @private */
16850
16799
  this.domHandler = new DomHandler();
16851
16800
  this.dvInputOnly = false;
16852
16801
  this.hasValue = false;
16802
+ this.hideLabelVisually = false;
16803
+ this.icon = false;
16804
+ /** @private */
16853
16805
  this.inputIconName = undefined;
16806
+ /** @private */
16854
16807
  this.label = 'Input label is undefined';
16808
+ this.layout = 'classic';
16809
+ this.locale = 'en-US';
16810
+ this.max = undefined;
16811
+ this._maxObject = undefined;
16812
+ this.maxLength = undefined;
16813
+ this.min = undefined;
16814
+ this._minObject = undefined;
16815
+ this.minLength = undefined;
16855
16816
  this.noValidate = false;
16856
- this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
16817
+ this.onDark = false;
16818
+ // Raw values returned from the input mask before model normalization.
16819
+ this._rawMaskValue = undefined;
16820
+ this.required = false;
16821
+ this.setCustomValidityForType = undefined;
16822
+ // Credit Card is intentionally excluded — its mask manages the cursor
16823
+ // itself, and listing it here caused cursor placement issues in Safari.
16824
+ /** @private */
16857
16825
  this.setSelectionInputTypes = [
16858
16826
  "text",
16859
16827
  "password",
16860
16828
  "email"
16861
- ]; // Credit Card is not included as this caused cursor placement issues in Safari.
16829
+ ];
16830
+ this.shape = 'classic';
16831
+ /** @private */
16862
16832
  this.showPassword = false;
16833
+ this.size = 'lg';
16863
16834
  this.touched = false;
16835
+ /** @private */
16864
16836
  this.uniqueId = new UniqueId().create();
16837
+ /** @private */
16865
16838
  this.util = new AuroInputUtilities({
16866
16839
  locale: this.locale,
16867
16840
  format: this.format
16868
16841
  });
16842
+ /** @private */
16869
16843
  this.validation = new AuroFormValidation();
16844
+ /** @private */
16870
16845
  this.validationCCLength = undefined;
16846
+ this.value = undefined;
16847
+ this._valueObject = undefined;
16871
16848
  }
16872
16849
 
16873
16850
  // function to define props used within the scope of this component
@@ -17415,6 +17392,15 @@ class BaseInput extends AuroElement$1 {
17415
17392
 
17416
17393
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
17417
17394
 
17395
+ // Normalize the format token to lowercase so case-mixed values supplied
17396
+ // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
17397
+ // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
17398
+ // format silently misses the map and leaves `setCustomValidityForType`
17399
+ // unset.
17400
+ if (this.format) {
17401
+ this.format = this.format.toLowerCase();
17402
+ }
17403
+
17418
17404
  // use validity message override if declared when initializing the component
17419
17405
  if (this.hasAttribute('setCustomValidity')) {
17420
17406
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -17848,6 +17834,38 @@ class BaseInput extends AuroElement$1 {
17848
17834
  this.touched = true;
17849
17835
  this.validation.validate(this);
17850
17836
  }
17837
+
17838
+ // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
17839
+ // update that can re-render the input and reset the native cursor; we
17840
+ // capture the caret position before that update commits and restore it
17841
+ // via `setSelectionRange` once the update has flushed. Gated on
17842
+ // `setSelectionInputTypes` so credit-card (and other masked types whose
17843
+ // formatter manages the cursor itself) doesn't get a competing write.
17844
+ // Capture the caret position INSIDE the gate — reading `selectionStart`
17845
+ // on input types that don't support text selection (number, email in
17846
+ // some browsers) throws InvalidStateError, which would crash all input
17847
+ // handling. Wrap the read in try/catch belt-and-suspenders even though
17848
+ // the gated types currently support it, since the list is a public
17849
+ // property a consumer could mutate.
17850
+ if (this.setSelectionInputTypes.includes(this.type)) {
17851
+ let selectionStart;
17852
+ try {
17853
+ selectionStart = this.inputElement.selectionStart;
17854
+ } catch (error) { // eslint-disable-line no-unused-vars
17855
+ return;
17856
+ }
17857
+ if (typeof selectionStart !== 'number') {
17858
+ return;
17859
+ }
17860
+ this.updateComplete.then(() => {
17861
+ try {
17862
+ this.inputElement.setSelectionRange(selectionStart, selectionStart);
17863
+ } catch (error) { // eslint-disable-line no-unused-vars
17864
+ // Some input types (number/email in certain UAs) throw on
17865
+ // setSelectionRange; swallow and let the native cursor stand.
17866
+ }
17867
+ });
17868
+ }
17851
17869
  }
17852
17870
 
17853
17871
  /**
@@ -18474,7 +18492,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18474
18492
  }
18475
18493
  };
18476
18494
 
18477
- var formkitVersion$1 = '202606291737';
18495
+ var formkitVersion$1 = '202606291937';
18478
18496
 
18479
18497
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18480
18498
  // See LICENSE in the project root for license information.
@@ -18977,6 +18995,7 @@ class AuroInput extends BaseInput {
18977
18995
  <${this.buttonTag}
18978
18996
  @click="${this.handleClickShowPassword}"
18979
18997
  appearance="${this.onDark ? 'inverse' : this.appearance}"
18998
+ aria-pressed="${this.showPassword ? 'true' : 'false'}"
18980
18999
  class="notificationBtn passwordBtn"
18981
19000
  shape="circle"
18982
19001
  size="sm"
@@ -19050,25 +19069,29 @@ class AuroInput extends BaseInput {
19050
19069
  * @returns {html} - Returns HTML for the help text and error message.
19051
19070
  */
19052
19071
  renderHtmlHelpText() {
19072
+ // Single `<p>` with stable identity across validity transitions —
19073
+ // previously two distinct templates (valid vs invalid) caused Lit to
19074
+ // replace the node entirely on a flip, and VoiceOver wouldn't
19075
+ // re-announce because the live-region element it was watching had been
19076
+ // removed and a new one inserted. Keeping one node means the `role`,
19077
+ // `aria-live`, and text content all change in-place, which AT does
19078
+ // observe and announce.
19079
+ const isError = this.validity && this.validity !== 'valid';
19053
19080
  return u$7`
19054
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
19055
- ? u$7`
19056
- <${this.helpTextTag}
19057
- appearance="${this.onDark ? 'inverse' : this.appearance}">
19058
- <p id="${this.uniqueId}" part="helpText">
19059
- <slot name="helpText">${this.getHelpText()}</slot>
19060
- </p>
19061
- </${this.helpTextTag}>
19062
- `
19063
- : u$7`
19064
- <${this.helpTextTag} error
19065
- appearance="${this.onDark ? 'inverse' : this.appearance}">
19066
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
19067
- ${this.errorMessage}
19068
- </p>
19069
- </${this.helpTextTag}>
19070
- `
19071
- }
19081
+ <${this.helpTextTag}
19082
+ appearance="${this.onDark ? 'inverse' : this.appearance}"
19083
+ ?error=${isError}>
19084
+ <p
19085
+ id="${this.uniqueId}"
19086
+ part="helpText"
19087
+ role="${o(isError ? 'alert' : undefined)}"
19088
+ aria-live="${o(isError ? 'assertive' : undefined)}">
19089
+ ${isError
19090
+ ? this.errorMessage
19091
+ : u$7`<slot name="helpText">${this.getHelpText()}</slot>`
19092
+ }
19093
+ </p>
19094
+ </${this.helpTextTag}>
19072
19095
  `;
19073
19096
  }
19074
19097
 
@@ -19200,7 +19223,7 @@ class AuroInput extends BaseInput {
19200
19223
 
19201
19224
  var colorCss$3 = i$6`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
19202
19225
 
19203
- var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
19226
+ var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
19204
19227
 
19205
19228
  var tokenCss = i$6`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
19206
19229
 
@@ -19595,7 +19618,7 @@ class AuroBibtemplate extends i$3 {
19595
19618
  }
19596
19619
  }
19597
19620
 
19598
- var formkitVersion = '202606291737';
19621
+ var formkitVersion = '202606291937';
19599
19622
 
19600
19623
  var styleCss$3 = i$6`.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}`;
19601
19624
 
@@ -4888,7 +4888,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4888
4888
  }
4889
4889
  };
4890
4890
 
4891
- var formkitVersion$2 = '202606291737';
4891
+ var formkitVersion$2 = '202606291937';
4892
4892
 
4893
4893
  let AuroElement$2 = class AuroElement extends i$3 {
4894
4894
  static get properties() {
@@ -16614,6 +16614,13 @@ class AuroInputUtilities {
16614
16614
  * @returns {string | undefined}
16615
16615
  */
16616
16616
  toFormattedValue(valueObject, format) {
16617
+ // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
16618
+ // `format` argument has to fail gracefully rather than throw on
16619
+ // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
16620
+ // as "no format → no display value".
16621
+ if (!format) {
16622
+ return undefined;
16623
+ }
16617
16624
  const normalizedFormat = format.toLowerCase();
16618
16625
  const maskOptions = this.getMaskOptions('date', normalizedFormat);
16619
16626
 
@@ -16764,79 +16771,18 @@ class BaseInput extends AuroElement$1 {
16764
16771
  constructor() {
16765
16772
  super();
16766
16773
 
16767
- this.appearance = "default";
16768
- this.disabled = false;
16769
- this.layout = 'classic';
16770
- this.locale = 'en-US';
16771
- this.max = undefined;
16772
- this._maxObject = undefined;
16773
- this.maxLength = undefined;
16774
- this.min = undefined;
16775
- this._minObject = undefined;
16776
- this.minLength = undefined;
16777
- this.required = false;
16778
- this.onDark = false;
16779
- this.setCustomValidityForType = undefined;
16780
- this.size = 'lg';
16781
- this.shape = 'classic';
16782
- this.value = undefined;
16783
- this._valueObject = undefined;
16784
-
16785
- this._initializePrivateDefaults();
16786
- }
16787
-
16788
- /**
16789
- * Internal Defaults.
16790
- * @private
16791
- * @returns {void}
16792
- */
16793
- _initializePrivateDefaults() {
16774
+ // Single-source initialization. Alphabetized so duplicate or stale
16775
+ // defaults are immediately obvious on a diff. Every field is assigned
16776
+ // exactly once here (previously the constructor + the old
16777
+ // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
16778
+ // fields and double-allocated `util` and `validation`, discarding the
16779
+ // first instance). `validation` is now allocated exactly once; `util`
16780
+ // is seeded here with an en-US default and then rebuilt in
16781
+ // `connectedCallback` once the consumer-resolved locale is available,
16782
+ // so a parent (datepicker/combobox) calling `validate()` synchronously
16783
+ // during its own update cycle sees a populated util instance.
16794
16784
  this.activeLabel = false;
16795
- this.appearance = "default";
16796
- this.icon = false;
16797
- this.disabled = false;
16798
- this.dvInputOnly = false;
16799
- this.hideLabelVisually = false;
16800
- this.max = undefined;
16801
- this.maxLength = undefined;
16802
- this.min = undefined;
16803
- this.minLength = undefined;
16804
- this.noValidate = false;
16805
- this.onDark = false;
16806
- this.required = false;
16807
- this.setCustomValidityForType = undefined;
16808
-
16809
- // Used for storing raw values returned from input mask.
16810
- this._rawMaskValue = undefined;
16811
-
16812
- /**
16813
- * @private
16814
- */
16815
- this.layout = 'classic';
16816
-
16817
- /**
16818
- * @private
16819
- */
16820
- this.shape = 'classic';
16821
-
16822
- /**
16823
- * @private
16824
- */
16825
- this.size = 'lg';
16826
-
16827
- this.touched = false;
16828
- this.util = new AuroInputUtilities({
16829
- locale: "en-US",
16830
- format: this.format
16831
- });
16832
- this.validation = new AuroFormValidation();
16833
- this.inputIconName = undefined;
16834
- this.showPassword = false;
16835
- this.validationCCLength = undefined;
16836
- this.hasValue = false;
16837
- this.label = 'Input label is undefined';
16838
-
16839
-
16785
+ /** @private */
16840
16786
  this.allowedInputTypes = [
16841
16787
  "text",
16842
16788
  "number",
@@ -16845,7 +16791,8 @@ class BaseInput extends AuroElement$1 {
16845
16791
  "credit-card",
16846
16792
  "tel"
16847
16793
  ];
16848
- this.icon = false;
16794
+ this.appearance = "default";
16795
+ /** @private */
16849
16796
  this.dateFormatMap = {
16850
16797
  'mm/dd/yyyy': 'dateMMDDYYYY',
16851
16798
  'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -16862,27 +16809,57 @@ class BaseInput extends AuroElement$1 {
16862
16809
  'dd/mm': 'dateDDMM',
16863
16810
  'mm/dd': 'dateMMDD'
16864
16811
  };
16812
+ this.disabled = false;
16813
+ /** @private */
16865
16814
  this.domHandler = new DomHandler();
16866
16815
  this.dvInputOnly = false;
16867
16816
  this.hasValue = false;
16817
+ this.hideLabelVisually = false;
16818
+ this.icon = false;
16819
+ /** @private */
16868
16820
  this.inputIconName = undefined;
16821
+ /** @private */
16869
16822
  this.label = 'Input label is undefined';
16823
+ this.layout = 'classic';
16824
+ this.locale = 'en-US';
16825
+ this.max = undefined;
16826
+ this._maxObject = undefined;
16827
+ this.maxLength = undefined;
16828
+ this.min = undefined;
16829
+ this._minObject = undefined;
16830
+ this.minLength = undefined;
16870
16831
  this.noValidate = false;
16871
- this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
16832
+ this.onDark = false;
16833
+ // Raw values returned from the input mask before model normalization.
16834
+ this._rawMaskValue = undefined;
16835
+ this.required = false;
16836
+ this.setCustomValidityForType = undefined;
16837
+ // Credit Card is intentionally excluded — its mask manages the cursor
16838
+ // itself, and listing it here caused cursor placement issues in Safari.
16839
+ /** @private */
16872
16840
  this.setSelectionInputTypes = [
16873
16841
  "text",
16874
16842
  "password",
16875
16843
  "email"
16876
- ]; // Credit Card is not included as this caused cursor placement issues in Safari.
16844
+ ];
16845
+ this.shape = 'classic';
16846
+ /** @private */
16877
16847
  this.showPassword = false;
16848
+ this.size = 'lg';
16878
16849
  this.touched = false;
16850
+ /** @private */
16879
16851
  this.uniqueId = new UniqueId().create();
16852
+ /** @private */
16880
16853
  this.util = new AuroInputUtilities({
16881
16854
  locale: this.locale,
16882
16855
  format: this.format
16883
16856
  });
16857
+ /** @private */
16884
16858
  this.validation = new AuroFormValidation();
16859
+ /** @private */
16885
16860
  this.validationCCLength = undefined;
16861
+ this.value = undefined;
16862
+ this._valueObject = undefined;
16886
16863
  }
16887
16864
 
16888
16865
  // function to define props used within the scope of this component
@@ -17430,6 +17407,15 @@ class BaseInput extends AuroElement$1 {
17430
17407
 
17431
17408
  this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
17432
17409
 
17410
+ // Normalize the format token to lowercase so case-mixed values supplied
17411
+ // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
17412
+ // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
17413
+ // format silently misses the map and leaves `setCustomValidityForType`
17414
+ // unset.
17415
+ if (this.format) {
17416
+ this.format = this.format.toLowerCase();
17417
+ }
17418
+
17433
17419
  // use validity message override if declared when initializing the component
17434
17420
  if (this.hasAttribute('setCustomValidity')) {
17435
17421
  this.ValidityMessageOverride = this.setCustomValidity;
@@ -17863,6 +17849,38 @@ class BaseInput extends AuroElement$1 {
17863
17849
  this.touched = true;
17864
17850
  this.validation.validate(this);
17865
17851
  }
17852
+
17853
+ // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
17854
+ // update that can re-render the input and reset the native cursor; we
17855
+ // capture the caret position before that update commits and restore it
17856
+ // via `setSelectionRange` once the update has flushed. Gated on
17857
+ // `setSelectionInputTypes` so credit-card (and other masked types whose
17858
+ // formatter manages the cursor itself) doesn't get a competing write.
17859
+ // Capture the caret position INSIDE the gate — reading `selectionStart`
17860
+ // on input types that don't support text selection (number, email in
17861
+ // some browsers) throws InvalidStateError, which would crash all input
17862
+ // handling. Wrap the read in try/catch belt-and-suspenders even though
17863
+ // the gated types currently support it, since the list is a public
17864
+ // property a consumer could mutate.
17865
+ if (this.setSelectionInputTypes.includes(this.type)) {
17866
+ let selectionStart;
17867
+ try {
17868
+ selectionStart = this.inputElement.selectionStart;
17869
+ } catch (error) { // eslint-disable-line no-unused-vars
17870
+ return;
17871
+ }
17872
+ if (typeof selectionStart !== 'number') {
17873
+ return;
17874
+ }
17875
+ this.updateComplete.then(() => {
17876
+ try {
17877
+ this.inputElement.setSelectionRange(selectionStart, selectionStart);
17878
+ } catch (error) { // eslint-disable-line no-unused-vars
17879
+ // Some input types (number/email in certain UAs) throw on
17880
+ // setSelectionRange; swallow and let the native cursor stand.
17881
+ }
17882
+ });
17883
+ }
17866
17884
  }
17867
17885
 
17868
17886
  /**
@@ -18489,7 +18507,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18489
18507
  }
18490
18508
  };
18491
18509
 
18492
- var formkitVersion$1 = '202606291737';
18510
+ var formkitVersion$1 = '202606291937';
18493
18511
 
18494
18512
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18495
18513
  // See LICENSE in the project root for license information.
@@ -18992,6 +19010,7 @@ class AuroInput extends BaseInput {
18992
19010
  <${this.buttonTag}
18993
19011
  @click="${this.handleClickShowPassword}"
18994
19012
  appearance="${this.onDark ? 'inverse' : this.appearance}"
19013
+ aria-pressed="${this.showPassword ? 'true' : 'false'}"
18995
19014
  class="notificationBtn passwordBtn"
18996
19015
  shape="circle"
18997
19016
  size="sm"
@@ -19065,25 +19084,29 @@ class AuroInput extends BaseInput {
19065
19084
  * @returns {html} - Returns HTML for the help text and error message.
19066
19085
  */
19067
19086
  renderHtmlHelpText() {
19087
+ // Single `<p>` with stable identity across validity transitions —
19088
+ // previously two distinct templates (valid vs invalid) caused Lit to
19089
+ // replace the node entirely on a flip, and VoiceOver wouldn't
19090
+ // re-announce because the live-region element it was watching had been
19091
+ // removed and a new one inserted. Keeping one node means the `role`,
19092
+ // `aria-live`, and text content all change in-place, which AT does
19093
+ // observe and announce.
19094
+ const isError = this.validity && this.validity !== 'valid';
19068
19095
  return u$7`
19069
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
19070
- ? u$7`
19071
- <${this.helpTextTag}
19072
- appearance="${this.onDark ? 'inverse' : this.appearance}">
19073
- <p id="${this.uniqueId}" part="helpText">
19074
- <slot name="helpText">${this.getHelpText()}</slot>
19075
- </p>
19076
- </${this.helpTextTag}>
19077
- `
19078
- : u$7`
19079
- <${this.helpTextTag} error
19080
- appearance="${this.onDark ? 'inverse' : this.appearance}">
19081
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
19082
- ${this.errorMessage}
19083
- </p>
19084
- </${this.helpTextTag}>
19085
- `
19086
- }
19096
+ <${this.helpTextTag}
19097
+ appearance="${this.onDark ? 'inverse' : this.appearance}"
19098
+ ?error=${isError}>
19099
+ <p
19100
+ id="${this.uniqueId}"
19101
+ part="helpText"
19102
+ role="${o(isError ? 'alert' : undefined)}"
19103
+ aria-live="${o(isError ? 'assertive' : undefined)}">
19104
+ ${isError
19105
+ ? this.errorMessage
19106
+ : u$7`<slot name="helpText">${this.getHelpText()}</slot>`
19107
+ }
19108
+ </p>
19109
+ </${this.helpTextTag}>
19087
19110
  `;
19088
19111
  }
19089
19112
 
@@ -19215,7 +19238,7 @@ class AuroInput extends BaseInput {
19215
19238
 
19216
19239
  var colorCss$3 = i$6`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
19217
19240
 
19218
- var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
19241
+ var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
19219
19242
 
19220
19243
  var tokenCss = i$6`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
19221
19244
 
@@ -19610,7 +19633,7 @@ class AuroBibtemplate extends i$3 {
19610
19633
  }
19611
19634
  }
19612
19635
 
19613
- var formkitVersion = '202606291737';
19636
+ var formkitVersion = '202606291937';
19614
19637
 
19615
19638
  var styleCss$3 = i$6`.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}`;
19616
19639