@aurodesignsystem-dev/auro-formkit 0.0.0-pr1507.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 (148) 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.html +1 -2
  4. package/components/checkbox/demo/customize.min.js +8 -6
  5. package/components/checkbox/demo/getting-started.min.js +8 -6
  6. package/components/checkbox/demo/index.min.js +8 -6
  7. package/components/checkbox/dist/index.js +8 -6
  8. package/components/checkbox/dist/registered.js +8 -6
  9. package/components/combobox/demo/customize.html +1 -2
  10. package/components/combobox/demo/customize.md +105 -137
  11. package/components/combobox/demo/customize.min.js +506 -568
  12. package/components/combobox/demo/getting-started.min.js +506 -564
  13. package/components/combobox/demo/index.min.js +506 -564
  14. package/components/combobox/demo/keyboard-behavior.md +2 -142
  15. package/components/combobox/demo/why-combobox.md +1 -1
  16. package/components/combobox/dist/auro-combobox.d.ts +30 -14
  17. package/components/combobox/dist/index.js +505 -563
  18. package/components/combobox/dist/registered.js +505 -563
  19. package/components/counter/demo/customize.min.js +26 -8
  20. package/components/counter/demo/index.min.js +26 -8
  21. package/components/counter/dist/index.js +26 -8
  22. package/components/counter/dist/registered.js +26 -8
  23. package/components/datepicker/demo/accessibility.md +2 -1
  24. package/components/datepicker/demo/api.md +65 -62
  25. package/components/datepicker/demo/customize.md +150 -39
  26. package/components/datepicker/demo/customize.min.js +988 -500
  27. package/components/datepicker/demo/index.min.js +988 -482
  28. package/components/datepicker/dist/{src/auro-calendar-cell.d.ts → auro-calendar-cell.d.ts} +20 -3
  29. package/components/datepicker/dist/{src/auro-calendar.d.ts → auro-calendar.d.ts} +121 -7
  30. package/components/datepicker/dist/{src/auro-datepicker.d.ts → auro-datepicker.d.ts} +80 -5
  31. package/components/datepicker/dist/blackoutUtils.d.ts +43 -0
  32. package/components/datepicker/dist/index.js +988 -482
  33. package/components/datepicker/dist/registered.js +988 -482
  34. package/components/dropdown/demo/customize.min.js +10 -1
  35. package/components/dropdown/demo/getting-started.min.js +10 -1
  36. package/components/dropdown/demo/index.min.js +10 -1
  37. package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
  38. package/components/dropdown/dist/index.js +10 -1
  39. package/components/dropdown/dist/registered.js +10 -1
  40. package/components/form/demo/customize.html +6 -6
  41. package/components/form/demo/customize.md +203 -51
  42. package/components/form/demo/customize.min.js +2357 -1419
  43. package/components/form/demo/getting-started.min.js +2285 -1419
  44. package/components/form/demo/index.min.js +2285 -1419
  45. package/components/form/demo/registerDemoDeps.min.js +1922 -1382
  46. package/components/form/dist/auro-form.d.ts +122 -4
  47. package/components/form/dist/index.js +363 -37
  48. package/components/form/dist/registered.js +363 -37
  49. package/components/input/demo/api.md +5 -5
  50. package/components/input/demo/customize.html +1 -2
  51. package/components/input/demo/customize.md +62 -61
  52. package/components/input/demo/customize.min.js +177 -241
  53. package/components/input/demo/getting-started.min.js +177 -241
  54. package/components/input/demo/index.min.js +177 -241
  55. package/components/input/dist/base-input.d.ts +34 -93
  56. package/components/input/dist/index.js +190 -242
  57. package/components/input/dist/registered.js +177 -241
  58. package/components/radio/demo/customize.min.js +8 -6
  59. package/components/radio/demo/getting-started.min.js +8 -6
  60. package/components/radio/demo/index.min.js +8 -6
  61. package/components/radio/dist/index.js +8 -6
  62. package/components/radio/dist/registered.js +8 -6
  63. package/components/select/demo/customize.html +1 -2
  64. package/components/select/demo/customize.md +86 -0
  65. package/components/select/demo/customize.min.js +202 -68
  66. package/components/select/demo/getting-started.min.js +204 -115
  67. package/components/select/demo/index.min.js +202 -68
  68. package/components/select/demo/keyboard-behavior.md +18 -4
  69. package/components/select/dist/auro-select.d.ts +20 -8
  70. package/components/select/dist/index.js +202 -68
  71. package/components/select/dist/registered.js +202 -68
  72. package/custom-elements.json +1035 -604
  73. package/package.json +6 -2
  74. package/components/checkbox/demo/customize.js +0 -22
  75. package/components/checkbox/demo/demo-support.js +0 -1
  76. package/components/checkbox/demo/getting-started.js +0 -22
  77. package/components/checkbox/demo/index.js +0 -8
  78. package/components/checkbox/demo/styles.scss +0 -1
  79. package/components/combobox/demo/customize.js +0 -24
  80. package/components/combobox/demo/demo-support.js +0 -1
  81. package/components/combobox/demo/getting-started.js +0 -21
  82. package/components/combobox/demo/index.js +0 -23
  83. package/components/combobox/demo/styles.scss +0 -1
  84. package/components/counter/demo/customize.js +0 -21
  85. package/components/counter/demo/demo-support.js +0 -1
  86. package/components/counter/demo/index.js +0 -21
  87. package/components/counter/demo/styles.scss +0 -1
  88. package/components/datepicker/demo/customize.js +0 -19
  89. package/components/datepicker/demo/demo-support.js +0 -1
  90. package/components/datepicker/demo/index.js +0 -23
  91. package/components/datepicker/demo/styles.scss +0 -1
  92. package/components/dropdown/demo/customize.js +0 -9
  93. package/components/dropdown/demo/demo-support.js +0 -1
  94. package/components/dropdown/demo/getting-started.js +0 -9
  95. package/components/dropdown/demo/index.js +0 -16
  96. package/components/dropdown/demo/styles.scss +0 -1
  97. package/components/form/demo/customize.js +0 -9
  98. package/components/form/demo/demo-support.js +0 -1
  99. package/components/form/demo/getting-started.js +0 -9
  100. package/components/form/demo/index.js +0 -5
  101. package/components/form/demo/registerDemoDeps.js +0 -23
  102. package/components/form/demo/styles.scss +0 -1
  103. package/components/input/demo/customize.js +0 -25
  104. package/components/input/demo/demo-support.js +0 -1
  105. package/components/input/demo/getting-started.js +0 -8
  106. package/components/input/demo/index.js +0 -8
  107. package/components/input/demo/styles.css +0 -974
  108. package/components/input/demo/styles.scss +0 -1
  109. package/components/menu/demo/demo-support.js +0 -1
  110. package/components/menu/demo/index.js +0 -25
  111. package/components/menu/demo/styles.scss +0 -1
  112. package/components/radio/demo/customize.js +0 -22
  113. package/components/radio/demo/demo-support.js +0 -1
  114. package/components/radio/demo/getting-started.js +0 -24
  115. package/components/radio/demo/index.js +0 -8
  116. package/components/radio/demo/styles.scss +0 -1
  117. package/components/select/demo/customize.js +0 -11
  118. package/components/select/demo/demo-support.js +0 -1
  119. package/components/select/demo/getting-started.js +0 -26
  120. package/components/select/demo/index.js +0 -11
  121. package/components/select/demo/styles.scss +0 -1
  122. /package/components/datepicker/dist/{src/auro-calendar-month.d.ts → auro-calendar-month.d.ts} +0 -0
  123. /package/components/datepicker/dist/{src/buttonVersion.d.ts → buttonVersion.d.ts} +0 -0
  124. /package/components/datepicker/dist/{src/datepickerKeyboardStrategy.d.ts → datepickerKeyboardStrategy.d.ts} +0 -0
  125. /package/components/datepicker/dist/{src/iconVersion.d.ts → iconVersion.d.ts} +0 -0
  126. /package/components/datepicker/dist/{src/index.d.ts → index.d.ts} +0 -0
  127. /package/components/datepicker/dist/{src/popoverVersion.d.ts → popoverVersion.d.ts} +0 -0
  128. /package/components/datepicker/dist/{src/styles → styles}/classic/color-css.d.ts +0 -0
  129. /package/components/datepicker/dist/{src/styles → styles}/classic/style-css.d.ts +0 -0
  130. /package/components/datepicker/dist/{src/styles → styles}/color-calendar-css.d.ts +0 -0
  131. /package/components/datepicker/dist/{src/styles → styles}/color-cell-css.d.ts +0 -0
  132. /package/components/datepicker/dist/{src/styles → styles}/color-css.d.ts +0 -0
  133. /package/components/datepicker/dist/{src/styles → styles}/color-month-css.d.ts +0 -0
  134. /package/components/datepicker/dist/{src/styles → styles}/shapeSize-css.d.ts +0 -0
  135. /package/components/datepicker/dist/{src/styles → styles}/snowflake/color-css.d.ts +0 -0
  136. /package/components/datepicker/dist/{src/styles → styles}/snowflake/style-css.d.ts +0 -0
  137. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-cell-css.d.ts +0 -0
  138. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-css.d.ts +0 -0
  139. /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-month-css.d.ts +0 -0
  140. /package/components/datepicker/dist/{src/styles → styles}/style-css.d.ts +0 -0
  141. /package/components/datepicker/dist/{src/styles → styles}/tokens-css.d.ts +0 -0
  142. /package/components/datepicker/dist/{src/utilities.d.ts → utilities.d.ts} +0 -0
  143. /package/components/datepicker/dist/{src/utilitiesCalendar.d.ts → utilitiesCalendar.d.ts} +0 -0
  144. /package/components/datepicker/dist/{src/utilitiesCalendarRender.d.ts → utilitiesCalendarRender.d.ts} +0 -0
  145. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/day.d.ts +0 -0
  146. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
  147. /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
  148. /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.
@@ -412,6 +411,15 @@ export class AuroCombobox extends AuroElement {
412
411
  * @private
413
412
  */
414
413
  private updateTriggerTextDisplay;
414
+ /**
415
+ * Writes nextValue to the trigger input and the bib input when their current
416
+ * value differs, then re-asserts imask after Lit's update flushes.
417
+ * @param {string} nextValue - The value to write to both inputs.
418
+ * @returns {Promise<void>} Resolves after both inputs flush and imask
419
+ * re-asserts; resolves immediately when no sync is needed.
420
+ * @private
421
+ */
422
+ private syncInputValuesAcrossTriggerAndBib;
415
423
  _syncingDisplayValue: boolean | undefined;
416
424
  /**
417
425
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
@@ -517,6 +525,15 @@ export class AuroCombobox extends AuroElement {
517
525
  */
518
526
  private handleInputValueChange;
519
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;
520
537
  /**
521
538
  * Binds all behavior needed to the combobox after rendering.
522
539
  * @private
@@ -555,7 +572,6 @@ export class AuroCombobox extends AuroElement {
555
572
  */
556
573
  validate(force?: boolean): void;
557
574
  updated(changedProperties: any): void;
558
- hasValue: boolean | undefined;
559
575
  /**
560
576
  * Applies slotted nodes to a target element with a new slot name.
561
577
  * @private