@aurodesignsystem-dev/auro-formkit 0.0.0-pr1508.0 → 0.0.0-pr1508.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) 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 +8 -6
  4. package/components/checkbox/demo/getting-started.min.js +8 -6
  5. package/components/checkbox/demo/index.min.js +8 -6
  6. package/components/checkbox/dist/index.js +8 -6
  7. package/components/checkbox/dist/registered.js +8 -6
  8. package/components/combobox/demo/customize.md +2 -10
  9. package/components/combobox/demo/customize.min.js +386 -305
  10. package/components/combobox/demo/getting-started.min.js +386 -301
  11. package/components/combobox/demo/index.min.js +386 -301
  12. package/components/combobox/demo/keyboard-behavior.md +2 -142
  13. package/components/combobox/demo/why-combobox.md +1 -1
  14. package/components/combobox/dist/auro-combobox.d.ts +23 -16
  15. package/components/combobox/dist/index.js +385 -300
  16. package/components/combobox/dist/registered.js +385 -300
  17. package/components/counter/demo/customize.min.js +18 -8
  18. package/components/counter/demo/index.min.js +18 -8
  19. package/components/counter/dist/index.js +18 -8
  20. package/components/counter/dist/registered.js +18 -8
  21. package/components/datepicker/demo/accessibility.md +2 -1
  22. package/components/datepicker/demo/api.md +63 -62
  23. package/components/datepicker/demo/customize.md +12 -1
  24. package/components/datepicker/demo/customize.min.js +932 -335
  25. package/components/datepicker/demo/index.min.js +932 -335
  26. package/components/datepicker/dist/{src/auro-calendar-cell.d.ts → auro-calendar-cell.d.ts} +20 -3
  27. package/components/datepicker/dist/{src/auro-calendar.d.ts → auro-calendar.d.ts} +121 -7
  28. package/components/datepicker/dist/{src/auro-datepicker.d.ts → auro-datepicker.d.ts} +78 -5
  29. package/components/datepicker/dist/blackoutUtils.d.ts +43 -0
  30. package/components/datepicker/dist/index.js +932 -335
  31. package/components/datepicker/dist/registered.js +932 -335
  32. package/components/dropdown/demo/customize.min.js +2 -1
  33. package/components/dropdown/demo/getting-started.min.js +2 -1
  34. package/components/dropdown/demo/index.min.js +2 -1
  35. package/components/dropdown/dist/index.js +2 -1
  36. package/components/dropdown/dist/registered.js +2 -1
  37. package/components/form/demo/customize.min.js +1690 -826
  38. package/components/form/demo/getting-started.min.js +1690 -826
  39. package/components/form/demo/index.min.js +1690 -826
  40. package/components/form/demo/registerDemoDeps.min.js +1690 -826
  41. package/components/input/demo/api.md +5 -5
  42. package/components/input/demo/customize.md +8 -8
  43. package/components/input/demo/customize.min.js +137 -95
  44. package/components/input/demo/getting-started.min.js +137 -95
  45. package/components/input/demo/index.min.js +137 -95
  46. package/components/input/dist/base-input.d.ts +33 -44
  47. package/components/input/dist/index.js +150 -96
  48. package/components/input/dist/registered.js +137 -95
  49. package/components/radio/demo/customize.min.js +8 -6
  50. package/components/radio/demo/getting-started.min.js +8 -6
  51. package/components/radio/demo/index.min.js +8 -6
  52. package/components/radio/dist/index.js +8 -6
  53. package/components/radio/dist/registered.js +8 -6
  54. package/components/select/demo/customize.md +86 -0
  55. package/components/select/demo/customize.min.js +194 -68
  56. package/components/select/demo/getting-started.min.js +196 -115
  57. package/components/select/demo/index.min.js +194 -68
  58. package/components/select/demo/keyboard-behavior.md +18 -4
  59. package/components/select/dist/auro-select.d.ts +20 -8
  60. package/components/select/dist/index.js +194 -68
  61. package/components/select/dist/registered.js +194 -68
  62. package/custom-elements.json +2365 -1819
  63. package/package.json +6 -2
  64. package/components/checkbox/demo/customize.js +0 -22
  65. package/components/checkbox/demo/demo-support.js +0 -1
  66. package/components/checkbox/demo/getting-started.js +0 -22
  67. package/components/checkbox/demo/index.js +0 -8
  68. package/components/checkbox/demo/styles.scss +0 -1
  69. package/components/combobox/demo/customize.js +0 -24
  70. package/components/combobox/demo/demo-support.js +0 -1
  71. package/components/combobox/demo/getting-started.js +0 -21
  72. package/components/combobox/demo/index.js +0 -23
  73. package/components/combobox/demo/styles.scss +0 -1
  74. package/components/counter/demo/customize.js +0 -21
  75. package/components/counter/demo/demo-support.js +0 -1
  76. package/components/counter/demo/index.js +0 -21
  77. package/components/counter/demo/styles.scss +0 -1
  78. package/components/datepicker/demo/customize.js +0 -17
  79. package/components/datepicker/demo/demo-support.js +0 -1
  80. package/components/datepicker/demo/index.js +0 -23
  81. package/components/datepicker/demo/styles.scss +0 -1
  82. package/components/dropdown/demo/customize.js +0 -9
  83. package/components/dropdown/demo/demo-support.js +0 -1
  84. package/components/dropdown/demo/getting-started.js +0 -9
  85. package/components/dropdown/demo/index.js +0 -16
  86. package/components/dropdown/demo/styles.scss +0 -1
  87. package/components/form/demo/customize.js +0 -28
  88. package/components/form/demo/demo-support.js +0 -1
  89. package/components/form/demo/getting-started.js +0 -9
  90. package/components/form/demo/index.js +0 -5
  91. package/components/form/demo/registerDemoDeps.js +0 -23
  92. package/components/form/demo/styles.scss +0 -1
  93. package/components/input/demo/customize.js +0 -25
  94. package/components/input/demo/demo-support.js +0 -1
  95. package/components/input/demo/getting-started.js +0 -8
  96. package/components/input/demo/index.js +0 -8
  97. package/components/input/demo/styles.css +0 -974
  98. package/components/input/demo/styles.scss +0 -1
  99. package/components/menu/demo/demo-support.js +0 -1
  100. package/components/menu/demo/index.js +0 -25
  101. package/components/menu/demo/styles.scss +0 -1
  102. package/components/radio/demo/customize.js +0 -22
  103. package/components/radio/demo/demo-support.js +0 -1
  104. package/components/radio/demo/getting-started.js +0 -24
  105. package/components/radio/demo/index.js +0 -8
  106. package/components/radio/demo/styles.scss +0 -1
  107. package/components/select/demo/customize.js +0 -11
  108. package/components/select/demo/demo-support.js +0 -1
  109. package/components/select/demo/getting-started.js +0 -26
  110. package/components/select/demo/index.js +0 -11
  111. package/components/select/demo/styles.scss +0 -1
  112. /package/components/datepicker/dist/{src/auro-calendar-month.d.ts → auro-calendar-month.d.ts} +0 -0
  113. /package/components/datepicker/dist/{src/buttonVersion.d.ts → buttonVersion.d.ts} +0 -0
  114. /package/components/datepicker/dist/{src/datepickerKeyboardStrategy.d.ts → datepickerKeyboardStrategy.d.ts} +0 -0
  115. /package/components/datepicker/dist/{src/iconVersion.d.ts → iconVersion.d.ts} +0 -0
  116. /package/components/datepicker/dist/{src/index.d.ts → index.d.ts} +0 -0
  117. /package/components/datepicker/dist/{src/popoverVersion.d.ts → popoverVersion.d.ts} +0 -0
  118. /package/components/datepicker/dist/{src/styles → styles}/classic/color-css.d.ts +0 -0
  119. /package/components/datepicker/dist/{src/styles → styles}/classic/style-css.d.ts +0 -0
  120. /package/components/datepicker/dist/{src/styles → styles}/color-calendar-css.d.ts +0 -0
  121. /package/components/datepicker/dist/{src/styles → styles}/color-cell-css.d.ts +0 -0
  122. /package/components/datepicker/dist/{src/styles → styles}/color-css.d.ts +0 -0
  123. /package/components/datepicker/dist/{src/styles → styles}/color-month-css.d.ts +0 -0
  124. /package/components/datepicker/dist/{src/styles → styles}/shapeSize-css.d.ts +0 -0
  125. /package/components/datepicker/dist/{src/styles → styles}/snowflake/color-css.d.ts +0 -0
  126. /package/components/datepicker/dist/{src/styles → styles}/snowflake/style-css.d.ts +0 -0
  127. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-cell-css.d.ts +0 -0
  128. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-css.d.ts +0 -0
  129. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-month-css.d.ts +0 -0
  130. /package/components/datepicker/dist/{src/styles → styles}/style-css.d.ts +0 -0
  131. /package/components/datepicker/dist/{src/styles → styles}/tokens-css.d.ts +0 -0
  132. /package/components/datepicker/dist/{src/utilities.d.ts → utilities.d.ts} +0 -0
  133. /package/components/datepicker/dist/{src/utilitiesCalendar.d.ts → utilitiesCalendar.d.ts} +0 -0
  134. /package/components/datepicker/dist/{src/utilitiesCalendarRender.d.ts → utilitiesCalendarRender.d.ts} +0 -0
  135. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/day.d.ts +0 -0
  136. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
  137. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
  138. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
@@ -30,7 +30,7 @@
30
30
  </thead>
31
31
  <tbody>
32
32
  <tr>
33
- <td rowspan="8">ArrowDown</td>
33
+ <td rowspan="2">ArrowDown</td>
34
34
  <td rowspan="2">-</td>
35
35
  <td>Collapsed, list options have been populated</td>
36
36
  <td>
@@ -51,77 +51,7 @@
51
51
  </td>
52
52
  </tr>
53
53
  <tr>
54
- <td rowspan="2">Meta (Command / Windows key)</td>
55
- <td>Collapsed, list options have been populated</td>
56
- <td>
57
- Trigger input element, <strong>NOT</strong> the trigger input clear button
58
- </td>
59
- <td>
60
- Opens the bib.
61
- <div class="note">
62
- <strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
63
- </div>
64
- </td>
65
- </tr>
66
- <tr>
67
- <td>Expanded</td>
68
- <td>
69
- Input element, <strong>NOT</strong> the input clear button
70
- <div class="note">
71
- <strong>Note:</strong> Includes both trigger and bib content inputs.
72
- </div>
73
- </td>
74
- <td>
75
- Advances the <code>focused</code> option to the last enabled option in the list.
76
- </td>
77
- </tr>
78
- <tr>
79
- <td rowspan="2">Alt (Option)</td>
80
- <td>Collapsed, list options have been populated</td>
81
- <td>
82
- Trigger input element, <strong>NOT</strong> the trigger input clear button
83
- </td>
84
- <td>Opens the bib.</td>
85
- </tr>
86
- <tr>
87
- <td>Expanded</td>
88
- <td>
89
- Input element, <strong>NOT</strong> the input clear button
90
- <div class="note">
91
- <strong>Note:</strong> Includes both trigger and bib content inputs.
92
- </div>
93
- </td>
94
- <td>
95
- Advances the <code>focused</code> option to the last enabled option in the list.
96
- </td>
97
- </tr>
98
- <tr>
99
- <td rowspan="2">Control</td>
100
- <td>Collapsed, list options have been populated</td>
101
- <td>
102
- Trigger input element, <strong>NOT</strong> the trigger input clear button
103
- </td>
104
- <td>
105
- Opens the bib.
106
- <div class="note">
107
- <strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
108
- </div>
109
- </td>
110
- </tr>
111
- <tr>
112
- <td>Expanded</td>
113
- <td>
114
- Input element, <strong>NOT</strong> the input clear button
115
- <div class="note">
116
- <strong>Note:</strong> Includes both trigger and bib content inputs.
117
- </div>
118
- </td>
119
- <td>
120
- Advances the <code>focused</code> option to the last enabled option in the list.
121
- </td>
122
- </tr>
123
- <tr>
124
- <td rowspan="8">ArrowUp</td>
54
+ <td rowspan="2">ArrowUp</td>
125
55
  <td rowspan="2">-</td>
126
56
  <td>Collapsed, list options have been populated</td>
127
57
  <td>
@@ -142,76 +72,6 @@
142
72
  </td>
143
73
  </tr>
144
74
  <tr>
145
- <td rowspan="2">Meta (Command / Windows key)</td>
146
- <td>Collapsed, list options have been populated</td>
147
- <td>
148
- Trigger input element, <strong>NOT</strong> the trigger input clear button
149
- </td>
150
- <td>
151
- Opens the bib.
152
- <div class="note">
153
- <strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
154
- </div>
155
- </td>
156
- </tr>
157
- <tr>
158
- <td>Expanded</td>
159
- <td>
160
- Input element, <strong>NOT</strong> the input clear button
161
- <div class="note">
162
- <strong>Note:</strong> Includes both trigger and bib content inputs.
163
- </div>
164
- </td>
165
- <td>
166
- Advances the <code>focused</code> option to the first enabled option in the list.
167
- </td>
168
- </tr>
169
- <tr>
170
- <td rowspan="2">Alt (Option)</td>
171
- <td>Collapsed, list options have been populated</td>
172
- <td>
173
- Input element, <strong>NOT</strong> the input clear button
174
- </td>
175
- <td>Opens the bib.</td>
176
- </tr>
177
- <tr>
178
- <td>Expanded</td>
179
- <td>
180
- Input element, <strong>NOT</strong> the input clear button
181
- <div class="note">
182
- <strong>Note:</strong> Includes both trigger and bib content inputs.
183
- </div>
184
- </td>
185
- <td>
186
- Advances the <code>focused</code> option to the first enabled option in the list.
187
- </td>
188
- </tr>
189
- <tr>
190
- <td rowspan="2">Control</td>
191
- <td>Collapsed, list options have been populated</td>
192
- <td>
193
- Trigger input element, <strong>NOT</strong> the trigger input clear button
194
- </td>
195
- <td>
196
- Opens the bib.
197
- <div class="note">
198
- <strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
199
- </div>
200
- </td>
201
- </tr>
202
- <tr>
203
- <td>Expanded</td>
204
- <td>
205
- Input element, <strong>NOT</strong> the input clear button
206
- <div class="note">
207
- <strong>Note:</strong> Includes both trigger and bib content inputs.
208
- </div>
209
- </td>
210
- <td>
211
- Advances the <code>focused</code> option to the first enabled option in the list.
212
- </td>
213
- </tr>
214
- <tr>
215
75
  <td>End</td>
216
76
  <td>-</td>
217
77
  <td>Expanded</td>
@@ -4,7 +4,7 @@
4
4
  <p>Native <code>&lt;datalist&gt;</code> support varies between browsers. Some announce suggestion counts, others do not. Keyboard behavior is inconsistent, and there is no standard way to communicate selection state to screen readers.</p>
5
5
  <p><code>auro-combobox</code> provides:</p>
6
6
  <ul>
7
- <li><strong>ARIA combobox pattern</strong> — The input carries <code>aria-expanded</code>, <code>aria-owns</code>, and <code>aria-haspopup</code> to properly describe the relationship between the input and the suggestions list.</li>
7
+ <li><strong>ARIA combobox pattern</strong> — The input carries <code>role="combobox"</code>, <code>aria-expanded</code>, and <code>aria-controls</code> to properly describe the relationship between the input and the suggestions list.</li>
8
8
  <li><strong>Active descendant tracking</strong> — <code>aria-activedescendant</code> moves with keyboard navigation so screen readers announce the highlighted option without moving DOM focus.</li>
9
9
  <li><strong>Live region announcements</strong> — Selections are announced via <code>aria-live="polite"</code>, and validation errors use <code>aria-live="assertive"</code>.</li>
10
10
  <li><strong>Full keyboard navigation</strong> — Arrow keys navigate options, Enter selects, Escape closes, Home/End jump to boundaries. A dedicated keyboard strategy handles all interactions.</li>
@@ -303,17 +303,6 @@ export class AuroCombobox extends AuroElement {
303
303
  reflect: boolean;
304
304
  attribute: boolean;
305
305
  };
306
- /**
307
- * Deferred aria-expanded state for the trigger input.
308
- * Delays the "true" transition so VoiceOver finishes its character echo
309
- * before announcing "expanded".
310
- * @private
311
- */
312
- triggerExpandedState: {
313
- type: BooleanConstructor;
314
- reflect: boolean;
315
- attribute: boolean;
316
- };
317
306
  };
318
307
  static get styles(): import("lit").CSSResult[];
319
308
  /**
@@ -360,8 +349,6 @@ export class AuroCombobox extends AuroElement {
360
349
  availableOptions: any[] | any[] | undefined;
361
350
  dropdownId: any;
362
351
  dropdownOpen: any;
363
- triggerExpandedState: boolean | undefined;
364
- _expandedTimeout: number | null | undefined;
365
352
  _inFullscreenTransition: boolean | undefined;
366
353
  errorMessage: any;
367
354
  isHiddenWhileLoading: boolean | undefined;
@@ -372,6 +359,18 @@ export class AuroCombobox extends AuroElement {
372
359
  touched: boolean | undefined;
373
360
  validation: AuroFormValidation | undefined;
374
361
  validity: any;
362
+ _userTyped: boolean | undefined;
363
+ _pendingTimers: Set<any> | undefined;
364
+ /**
365
+ * setTimeout wrapper that records the timer id so disconnectedCallback
366
+ * can cancel any outstanding callbacks. The id is removed from the set
367
+ * once the callback fires so the set doesn't grow unbounded.
368
+ * @param {Function} fn - Callback to run.
369
+ * @param {number} ms - Delay in milliseconds.
370
+ * @returns {number} The timer id.
371
+ * @private
372
+ */
373
+ private _scheduleTimer;
375
374
  /**
376
375
  * Returns the current value of the input element within the combobox.
377
376
  * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
@@ -416,8 +415,8 @@ export class AuroCombobox extends AuroElement {
416
415
  * Writes nextValue to the trigger input and the bib input when their current
417
416
  * value differs, then re-asserts imask after Lit's update flushes.
418
417
  * @param {string} nextValue - The value to write to both inputs.
419
- * @returns {Promise<void> | null} Promise that resolves after the inputs flush,
420
- * or null when no sync was needed (so callers can skip post-flush work).
418
+ * @returns {Promise<void>} Resolves after both inputs flush and imask
419
+ * re-asserts; resolves immediately when no sync is needed.
421
420
  * @private
422
421
  */
423
422
  private syncInputValuesAcrossTriggerAndBib;
@@ -526,6 +525,15 @@ export class AuroCombobox extends AuroElement {
526
525
  */
527
526
  private handleInputValueChange;
528
527
  _syncingBibValue: boolean | undefined;
528
+ /**
529
+ * Handles input value changes originating from the trigger input.
530
+ * Refreshes menu options and filtering, delegates to handleInputValueChange
531
+ * for value synchronization, and manages fullscreen bib focus.
532
+ * @private
533
+ * @param {Event} event - The input event from the trigger input element.
534
+ * @returns {void}
535
+ */
536
+ private handleTriggerInputValueChange;
529
537
  /**
530
538
  * Binds all behavior needed to the combobox after rendering.
531
539
  * @private
@@ -564,7 +572,6 @@ export class AuroCombobox extends AuroElement {
564
572
  */
565
573
  validate(force?: boolean): void;
566
574
  updated(changedProperties: any): void;
567
- hasValue: boolean | undefined;
568
575
  /**
569
576
  * Applies slotted nodes to a target element with a new slot name.
570
577
  * @private