@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.4 → 0.0.0-pr1477.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 (73) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -7
  2. package/components/bibtemplate/dist/index.js +1 -9
  3. package/components/bibtemplate/dist/registered.js +1 -9
  4. package/components/checkbox/demo/customize.min.js +1 -1
  5. package/components/checkbox/demo/getting-started.min.js +1 -1
  6. package/components/checkbox/demo/index.min.js +1 -1
  7. package/components/checkbox/dist/index.js +1 -1
  8. package/components/checkbox/dist/registered.js +1 -1
  9. package/components/combobox/demo/customize.min.js +18 -234
  10. package/components/combobox/demo/getting-started.min.js +18 -234
  11. package/components/combobox/demo/index.min.js +18 -234
  12. package/components/combobox/demo/keyboard-behavior.md +68 -8
  13. package/components/combobox/dist/index.js +18 -234
  14. package/components/combobox/dist/registered.js +18 -234
  15. package/components/counter/demo/customize.min.js +15 -231
  16. package/components/counter/demo/index.min.js +15 -231
  17. package/components/counter/demo/keyboard-behavior.md +0 -1
  18. package/components/counter/dist/index.js +433 -45
  19. package/components/counter/dist/registered.js +2 -10
  20. package/components/datepicker/demo/accessibility.md +3 -51
  21. package/components/datepicker/demo/api.md +0 -9
  22. package/components/datepicker/demo/customize.html +0 -2
  23. package/components/datepicker/demo/customize.md +8 -72
  24. package/components/datepicker/demo/design.md +1 -3
  25. package/components/datepicker/demo/index.js +1 -5
  26. package/components/datepicker/demo/index.md +1 -81
  27. package/components/datepicker/demo/index.min.js +101 -1350
  28. package/components/datepicker/demo/keyboard-behavior.md +2 -201
  29. package/components/datepicker/demo/voiceover.md +12 -19
  30. package/components/datepicker/dist/index.js +111 -1284
  31. package/components/datepicker/dist/registered.js +111 -1284
  32. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +1 -64
  33. package/components/datepicker/dist/src/auro-calendar-month.d.ts +0 -28
  34. package/components/datepicker/dist/src/auro-calendar.d.ts +0 -84
  35. package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -80
  36. package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +3 -5
  37. package/components/dropdown/demo/accessibility.md +0 -11
  38. package/components/dropdown/demo/api.md +0 -1
  39. package/components/dropdown/demo/customize.md +0 -3
  40. package/components/dropdown/demo/customize.min.js +13 -221
  41. package/components/dropdown/demo/getting-started.min.js +13 -221
  42. package/components/dropdown/demo/index.min.js +13 -221
  43. package/components/dropdown/demo/keyboard-behavior.md +0 -1
  44. package/components/dropdown/dist/auro-dropdown.d.ts +1 -31
  45. package/components/dropdown/dist/index.js +13 -221
  46. package/components/dropdown/dist/registered.js +13 -221
  47. package/components/form/demo/customize.min.js +987 -2806
  48. package/components/form/demo/getting-started.min.js +987 -2806
  49. package/components/form/demo/index.min.js +987 -2806
  50. package/components/form/demo/registerDemoDeps.min.js +982 -2801
  51. package/components/input/demo/customize.min.js +1 -1
  52. package/components/input/demo/getting-started.min.js +1 -1
  53. package/components/input/demo/index.min.js +1 -1
  54. package/components/input/dist/index.js +1 -1
  55. package/components/input/dist/registered.js +1 -1
  56. package/components/radio/demo/getting-started.js +1 -1
  57. package/components/radio/demo/getting-started.md +1 -1
  58. package/components/radio/demo/index.min.js +1 -1
  59. package/components/radio/dist/index.js +1 -1
  60. package/components/radio/dist/registered.js +1 -1
  61. package/components/select/demo/customize.min.js +33 -247
  62. package/components/select/demo/getting-started.min.js +33 -247
  63. package/components/select/demo/index.min.js +33 -247
  64. package/components/select/demo/keyboard-behavior.md +54 -9
  65. package/components/select/dist/index.js +33 -247
  66. package/components/select/dist/registered.js +33 -247
  67. package/custom-elements.json +1491 -2163
  68. package/package.json +2 -2
  69. package/components/datepicker/demo/customize.js +0 -19
  70. package/components/datepicker/demo/customize.min.js +0 -25810
  71. package/components/radio/demo/customize.min.js +0 -2186
  72. package/components/radio/demo/demo-support.min.js +0 -55807
  73. package/components/radio/demo/getting-started.min.js +0 -2205
@@ -46,13 +46,6 @@ export class AuroCalendarCell extends LitElement {
46
46
  renderForDateSlot: {
47
47
  type: BooleanConstructor;
48
48
  };
49
- active: {
50
- type: BooleanConstructor;
51
- reflect: boolean;
52
- };
53
- hasPopoverContent: {
54
- type: BooleanConstructor;
55
- };
56
49
  };
57
50
  static get styles(): import("lit").CSSResult[];
58
51
  day: any;
@@ -70,8 +63,6 @@ export class AuroCalendarCell extends LitElement {
70
63
  _locale: any;
71
64
  dateStr: string | null;
72
65
  renderForDateSlot: boolean;
73
- active: boolean;
74
- hasPopoverContent: boolean;
75
66
  runtimeUtils: any;
76
67
  popoverTag: any;
77
68
  set locale(value: any);
@@ -99,27 +90,7 @@ export class AuroCalendarCell extends LitElement {
99
90
  */
100
91
  private handleHover;
101
92
  /**
102
- * Checks if the current date is outside the valid min/max range.
103
- * Out-of-range cells are not focusable and are hidden from screen readers.
104
- * @private
105
- * @param {Object} day - An object containing the dateFrom and day of month values.
106
- * @param {Number} min - The minimum date value.
107
- * @param {Number} max - The maximum date value.
108
- * @returns {Boolean} - True if the date is out of range.
109
- */
110
- private isOutOfRange;
111
- /**
112
- * Checks if the current date is a blackout date (in disabledDays but within range).
113
- * Blackout cells are focusable but not selectable.
114
- * @private
115
- * @returns {Boolean} - True if the date is a blackout date.
116
- */
117
- private isBlackout;
118
- /**
119
- * Checks if the current date is disabled based on min/max range or the
120
- * legacy disabledDays timestamp list. Sets the `disabled` attribute on the
121
- * host when the date falls outside the allowed range or appears in
122
- * disabledDays. Note: blackout dates are handled separately by `isBlackout()`.
93
+ * Checks if the current date is a valid date depending on the min and max values.
123
94
  * @private
124
95
  * @param {Object} day - An object containing the dateFrom and day of month values.
125
96
  * @param {Number} min - The minimum date value.
@@ -128,25 +99,6 @@ export class AuroCalendarCell extends LitElement {
128
99
  * @returns {Boolean} - True if the date is disabled.
129
100
  */
130
101
  private isEnabled;
131
- /**
132
- * Generates a unique cell ID in the format cell-YYYY-MM-DD.
133
- * @private
134
- * @returns {String} The unique cell ID.
135
- */
136
- private getCellId;
137
- /**
138
- * Generates a localized aria-label for the cell button using Intl.DateTimeFormat.
139
- * Includes range position and blackout status.
140
- * @private
141
- * @returns {String} The aria-label string.
142
- */
143
- private getAriaLabel;
144
- /**
145
- * Determines the range position of this cell relative to the current selection.
146
- * @private
147
- * @returns {String|null} Range position label or null if not in range mode.
148
- */
149
- private getRangePosition;
150
102
  /**
151
103
  * Checks if the current date is the depart date.
152
104
  * @private
@@ -210,23 +162,8 @@ export class AuroCalendarCell extends LitElement {
210
162
  private handleSlotContent;
211
163
  firstUpdated(): void;
212
164
  datepicker: any;
213
- calendarMonth: any;
214
- /**
215
- * Configures the popover instance with the calendar month boundary.
216
- * Called from firstUpdated and updated because the popover element is only
217
- * rendered after hasPopoverContent becomes true (set by handleSlotContent).
218
- * @private
219
- * @returns {void}
220
- */
221
- private configurePopover;
222
165
  auroPopover: any;
223
166
  updated(properties: any): void;
224
- /**
225
- * Programmatically focuses the cell's interactive button element.
226
- * @returns {void}
227
- */
228
- focusButton(): void;
229
- renderCellButton(): import("lit-html").TemplateResult;
230
167
  render(): import("lit-html").TemplateResult;
231
168
  }
232
169
  import { LitElement } from "lit";
@@ -16,33 +16,5 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
16
16
  * @returns {String} The name of the month.
17
17
  */
18
18
  private computeCurrentMonthName;
19
- /**
20
- * Returns the unique heading ID for this month, used by aria-labelledby.
21
- * @private
22
- * @returns {String} The heading ID.
23
- */
24
- private getHeadingId;
25
- dayFullNames: any[] | undefined;
26
- /**
27
- * Renders a day-of-week header with abbr attribute for the full day name.
28
- * @private
29
- * @param {String} dayOfWeek - The short day name.
30
- * @param {Number} index - The index in the dayNamesOfTheWeek array.
31
- * @returns {Object} The header HTML.
32
- */
33
- private renderDayOfWeek;
34
- /**
35
- * Returns all focusable cell elements (enabled + blackout, not out-of-range) in this month.
36
- * @returns {Array} Array of auro-formkit-calendar-cell elements.
37
- */
38
- getFocusableCells(): any[];
39
- /**
40
- * Handles arrow key navigation within the month grid.
41
- * Dispatches a cross-month navigation event when the boundary is reached.
42
- * @private
43
- * @param {KeyboardEvent} event - The keyboard event.
44
- * @returns {void}
45
- */
46
- private handleGridKeyDown;
47
19
  }
48
20
  import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';
@@ -123,12 +123,6 @@ export class AuroCalendar extends RangeDatepicker {
123
123
  visible: boolean;
124
124
  largeFullscreenHeadline: boolean;
125
125
  isFullscreen: boolean;
126
- /**
127
- * The date of the currently active cell (Unix timestamp).
128
- * Only one cell across the entire calendar has tabindex="0" at a time.
129
- * @private
130
- */
131
- private activeCellDate;
132
126
  /**
133
127
  * @private
134
128
  */
@@ -154,12 +148,6 @@ export class AuroCalendar extends RangeDatepicker {
154
148
  */
155
149
  private buttonTag;
156
150
  dropdown: any;
157
- /**
158
- * Announces the current month and year via the live region after navigation.
159
- * @private
160
- * @returns {void}
161
- */
162
- private announceMonthChange;
163
151
  /**
164
152
  * Renders all of the auro-calendar-months HTML.
165
153
  * @private
@@ -179,78 +167,6 @@ export class AuroCalendar extends RangeDatepicker {
179
167
  * @returns {void}
180
168
  */
181
169
  scrollMonthIntoView(date: string): void;
182
- /**
183
- * Gets all rendered month components.
184
- * @private
185
- * @returns {Array} Array of auro-formkit-calendar-month elements.
186
- */
187
- private getMonthComponents;
188
- /**
189
- * Gets all focusable cells across all rendered months.
190
- * @private
191
- * @returns {Array} Array of auro-formkit-calendar-cell elements.
192
- */
193
- private getAllFocusableCells;
194
- /**
195
- * Sets the active cell across all months. Only one cell has tabindex="0" at a time.
196
- * @param {Number} date - Unix timestamp of the cell to activate.
197
- * @returns {void}
198
- */
199
- setActiveCell(date: number): void;
200
- /**
201
- * Focuses the currently active cell. If activeCellDate is set but no cell
202
- * has the active attribute yet, sets it first. Waits for the cell's render
203
- * to complete so the focused button is the final DOM element.
204
- * @returns {void}
205
- */
206
- focusActiveCell(): void;
207
- /**
208
- * Computes the initial active date from data properties alone — no DOM required.
209
- * Priority:
210
- * 1. Selected date (dateFrom) if within range
211
- * 2. Today's date if not disabled (in-range and not blackout)
212
- * 3. First future non-disabled date (scans day-by-day from today up to 1 year)
213
- * 4. First previous non-disabled date (scans day-by-day from today up to 1 year)
214
- * 5. undefined — no valid target
215
- *
216
- * @private
217
- * @returns {Number|undefined} Unix timestamp (seconds) of the date to activate, or undefined.
218
- */
219
- private computeActiveDate;
220
- /**
221
- * Handles cross-month boundary navigation events from month components.
222
- * @private
223
- * @param {CustomEvent} event - The boundary event with direction and source date info.
224
- * @returns {void}
225
- */
226
- private handleMonthBoundary;
227
- /**
228
- * Handles cell activation events from month components.
229
- * @private
230
- * @param {CustomEvent} event - The activation event with target date.
231
- * @returns {void}
232
- */
233
- private handleCellActivate;
234
- /**
235
- * Scrolls the calendar to ensure the month containing the active cell is visible.
236
- * @private
237
- * @returns {void}
238
- */
239
- private scrollToActiveCell;
240
- /**
241
- * Announces a date selection via the live region.
242
- * @private
243
- * @param {String} dateStr - The localized date string to announce.
244
- * @returns {void}
245
- */
246
- private announceSelection;
247
- /**
248
- * Formats a Unix timestamp (seconds) as a localized date string for SR announcements.
249
- * @private
250
- * @param {String|Number} timestamp - Unix timestamp in seconds.
251
- * @returns {String} Localized date string.
252
- */
253
- private formatAnnouncementDate;
254
170
  injectSlot(slotName: any, nodes: any): void;
255
171
  render(): import("lit-html").TemplateResult;
256
172
  }
@@ -248,69 +248,6 @@ export class AuroDatePicker extends AuroElement {
248
248
  type: BooleanConstructor;
249
249
  reflect: boolean;
250
250
  };
251
- /**
252
- * Label announced for the range start date cell.
253
- */
254
- rangeLabelStart: {
255
- type: StringConstructor;
256
- reflect: boolean;
257
- };
258
- /**
259
- * Label announced for the range end date cell.
260
- */
261
- rangeLabelEnd: {
262
- type: StringConstructor;
263
- reflect: boolean;
264
- };
265
- /**
266
- * Label announced for cells before the range start.
267
- */
268
- rangeLabelBeforeRange: {
269
- type: StringConstructor;
270
- reflect: boolean;
271
- };
272
- /**
273
- * Label announced for cells within the selected range.
274
- */
275
- rangeLabelInRange: {
276
- type: StringConstructor;
277
- reflect: boolean;
278
- };
279
- /**
280
- * Label announced for cells after the range (or after start when no end is selected).
281
- */
282
- rangeLabelAfterRange: {
283
- type: StringConstructor;
284
- reflect: boolean;
285
- };
286
- /**
287
- * Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
288
- */
289
- blackoutDates: {
290
- type: ArrayConstructor;
291
- reflect: boolean;
292
- };
293
- /**
294
- * Label announced for blackout (disabled but in-range) date cells.
295
- */
296
- blackoutLabel: {
297
- type: StringConstructor;
298
- reflect: boolean;
299
- };
300
- /**
301
- * Accessible label for the previous month navigation button.
302
- */
303
- navLabelPrevMonth: {
304
- type: StringConstructor;
305
- reflect: boolean;
306
- };
307
- /**
308
- * Accessible label for the next month navigation button.
309
- */
310
- navLabelNextMonth: {
311
- type: StringConstructor;
312
- reflect: boolean;
313
- };
314
251
  /**
315
252
  * Dates that the user should have for reference as part of their decision making when selecting a date.
316
253
  * This should be a JSON string array of dates in the format of `MM/DD/YYYY`.
@@ -418,15 +355,6 @@ export class AuroDatePicker extends AuroElement {
418
355
  required: boolean;
419
356
  onDark: boolean;
420
357
  range: boolean;
421
- rangeLabelStart: string;
422
- rangeLabelEnd: string;
423
- rangeLabelBeforeRange: string;
424
- rangeLabelInRange: string;
425
- rangeLabelAfterRange: string;
426
- blackoutDates: any[];
427
- blackoutLabel: string;
428
- navLabelPrevMonth: string;
429
- navLabelNextMonth: string;
430
358
  stacked: boolean;
431
359
  noValidate: boolean;
432
360
  validity: any;
@@ -604,13 +532,6 @@ export class AuroDatePicker extends AuroElement {
604
532
  * @returns {void}
605
533
  */
606
534
  private notifyMonthChanged;
607
- /**
608
- * Attempts to focus the active calendar cell using a rAF retry loop.
609
- * Shared by both fullscreen and desktop open paths.
610
- * @private
611
- * @returns {void}
612
- */
613
- private focusActiveCellWhenReady;
614
535
  /**
615
536
  * Binds all behavior needed to the dropdown after rendering.
616
537
  * @private
@@ -703,7 +624,6 @@ export class AuroDatePicker extends AuroElement {
703
624
  formattedFocusDate: boolean | undefined;
704
625
  formattedEndDate: boolean | undefined;
705
626
  formattedValue: boolean | undefined;
706
- wasCellClick: boolean | undefined;
707
627
  formattedValueEnd: boolean | undefined;
708
628
  formattedMinDate: boolean | undefined;
709
629
  formattedMaxDate: boolean | undefined;
@@ -1,5 +1,3 @@
1
- export const datepickerKeyboardStrategy: {
2
- Escape(component: any, evt: any, ctx: any): void;
3
- Enter(component: any, evt: any, ctx: any): void;
4
- ' '(component: any, evt: any, ctx: any): void;
5
- };
1
+ export namespace datepickerKeyboardStrategy {
2
+ function Escape(component: any, evt: any): void;
3
+ }
@@ -28,23 +28,12 @@
28
28
  </ol>
29
29
  </section>
30
30
  <section>
31
- <auro-header level="2" id="desktopModal">Desktop Modal</auro-header>
32
- <p>When the <code>desktopModal</code> attribute is set, the dropdown behaves as a modal dialog on desktop viewports:</p>
33
- <ul>
34
- <li>All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown.</li>
35
- <li>Focus is trapped within the bib content using a Tab-key handler.</li>
36
- <li>The <code>inert</code> state and focus trap are automatically cleaned up when the bib is closed or the component is disconnected.</li>
37
- </ul>
38
- <p>In fullscreen mode, the native <code>&lt;dialog&gt;</code> <code>showModal()</code> API provides equivalent behavior, so <code>desktopModal</code> only applies to desktop-sized viewports.</p>
39
- </section>
40
- <section>
41
31
  <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
42
32
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/tabindex.md) -->
43
33
  <!-- The below content is automatically added from ./../docs/partials/tabindex.md -->
44
34
  <p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
45
35
  <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
46
36
  <p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
47
- <p>When the <code>desktopModal</code> attribute is set, focus is also trapped within the bib on desktop viewports. All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown until it is closed.</p>
48
37
  <!-- AURO-GENERATED-CONTENT:END -->
49
38
  </section>
50
39
  <section>
@@ -13,7 +13,6 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
13
13
  | `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
14
14
  | `autoPlacement` | `autoPlacement` | `boolean` | | If declared, bib's position will be automatically calculated where to appear. |
15
15
  | `chevron` | `chevron` | `boolean` | | If declared, the dropdown displays a chevron on the right. |
16
- | `desktopModal` | `desktopModal` | `boolean` | | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
17
16
  | `disableEventShow` | `disableEventShow` | `boolean` | | If declared, the dropdown will only show by calling the API .show() public method. |
18
17
  | `disableKeyboardHandling` | `disableKeyboardHandling` | `boolean` | | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
19
18
  | `disabled` | `disabled` | `boolean` | | If declared, the dropdown is not interactive. |
@@ -13,7 +13,6 @@
13
13
  <auro-anchorlink fluid href="#matchWidth" class="level2 body-xs">Match Width</auro-anchorlink>
14
14
  <auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
15
15
  <auro-anchorlink fluid href="#chevron" class="level2 body-xs">Chevron</auro-anchorlink>
16
- <auro-anchorlink fluid href="#desktopModal" class="level2 body-xs">Desktop Modal</auro-anchorlink>
17
16
  <auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
18
17
  <auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
19
18
  <auro-anchorlink fluid href="#noToggle" class="level2 body-xs">No Toggle</auro-anchorlink>
@@ -570,8 +569,6 @@
570
569
  &lt;/auro-dropdown&gt;</code></pre>
571
570
  <!-- AURO-GENERATED-CONTENT:END -->
572
571
  </auro-accordion>
573
- <auro-header level="3" id="desktopModal">Desktop Modal</auro-header>
574
- <p>Use the <code>desktopModal</code> attribute to make the dropdown behave as a modal dialog on desktop viewports. When set, all sibling elements on the page are marked <code>inert</code> and focus is trapped within the bib content. In fullscreen mode, the native <code>&lt;dialog&gt;</code> <code>showModal()</code> API provides equivalent behavior automatically.</p>
575
572
  <auro-header level="3" id="disabled">Disabled</auro-header>
576
573
  <p>Use the <code>disabled</code> attribute to disable interaction with the dropdown.</p>
577
574
  <div class="exampleWrapper">