@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.3 → 0.0.0-pr1512.0

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