@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.6 → 0.0.0-pr1477.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 (103) 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/demo/pages.json +1 -1
  8. package/components/checkbox/dist/index.js +1 -1
  9. package/components/checkbox/dist/registered.js +1 -1
  10. package/components/combobox/demo/customize.min.js +18 -236
  11. package/components/combobox/demo/getting-started.min.js +18 -236
  12. package/components/combobox/demo/index.min.js +18 -236
  13. package/components/combobox/demo/keyboard-behavior.md +68 -8
  14. package/components/combobox/demo/pages.json +1 -1
  15. package/components/combobox/dist/index.js +18 -236
  16. package/components/combobox/dist/registered.js +18 -236
  17. package/components/counter/demo/customize.min.js +15 -233
  18. package/components/counter/demo/index.min.js +15 -233
  19. package/components/counter/demo/keyboard-behavior.md +0 -1
  20. package/components/counter/demo/pages.json +1 -1
  21. package/components/counter/dist/index.js +2 -10
  22. package/components/counter/dist/registered.js +2 -10
  23. package/components/datepicker/demo/accessibility.md +3 -51
  24. package/components/datepicker/demo/api.md +2 -11
  25. package/components/datepicker/demo/customize.html +0 -2
  26. package/components/datepicker/demo/customize.md +8 -72
  27. package/components/datepicker/demo/design.md +1 -3
  28. package/components/datepicker/demo/index.js +1 -5
  29. package/components/datepicker/demo/index.md +2 -83
  30. package/components/datepicker/demo/index.min.js +100 -1567
  31. package/components/datepicker/demo/keyboard-behavior.md +2 -201
  32. package/components/datepicker/demo/pages.json +1 -1
  33. package/components/datepicker/demo/voiceover.md +12 -19
  34. package/components/datepicker/dist/index.js +98 -1489
  35. package/components/datepicker/dist/registered.js +98 -1489
  36. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +1 -66
  37. package/components/datepicker/dist/src/auro-calendar-month.d.ts +0 -28
  38. package/components/datepicker/dist/src/auro-calendar.d.ts +0 -100
  39. package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -88
  40. package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +3 -5
  41. package/components/dropdown/demo/accessibility.md +0 -11
  42. package/components/dropdown/demo/api.md +0 -1
  43. package/components/dropdown/demo/customize.md +0 -3
  44. package/components/dropdown/demo/customize.min.js +13 -223
  45. package/components/dropdown/demo/getting-started.min.js +13 -223
  46. package/components/dropdown/demo/index.min.js +13 -223
  47. package/components/dropdown/demo/keyboard-behavior.md +0 -1
  48. package/components/dropdown/demo/pages.json +1 -1
  49. package/components/dropdown/dist/auro-dropdown.d.ts +1 -33
  50. package/components/dropdown/dist/index.js +13 -223
  51. package/components/dropdown/dist/registered.js +13 -223
  52. package/components/form/demo/customize.min.js +165 -2208
  53. package/components/form/demo/getting-started.min.js +165 -2208
  54. package/components/form/demo/index.min.js +165 -2208
  55. package/components/form/demo/pages.json +1 -1
  56. package/components/form/demo/registerDemoDeps.min.js +165 -2208
  57. package/components/input/demo/customize.min.js +1 -1
  58. package/components/input/demo/getting-started.min.js +1 -1
  59. package/components/input/demo/index.min.js +1 -1
  60. package/components/input/demo/pages.json +1 -1
  61. package/components/input/dist/index.js +1 -1
  62. package/components/input/dist/registered.js +1 -1
  63. package/components/menu/demo/pages.json +1 -1
  64. package/components/radio/demo/getting-started.js +1 -1
  65. package/components/radio/demo/getting-started.md +1 -1
  66. package/components/radio/demo/index.min.js +1 -1
  67. package/components/radio/demo/pages.json +1 -1
  68. package/components/radio/dist/index.js +1 -1
  69. package/components/radio/dist/registered.js +1 -1
  70. package/components/select/demo/customize.min.js +33 -249
  71. package/components/select/demo/getting-started.min.js +33 -249
  72. package/components/select/demo/index.min.js +33 -249
  73. package/components/select/demo/keyboard-behavior.md +54 -9
  74. package/components/select/demo/pages.json +1 -1
  75. package/components/select/dist/index.js +33 -249
  76. package/components/select/dist/registered.js +33 -249
  77. package/custom-elements.json +21 -738
  78. package/package.json +2 -2
  79. package/components/checkbox/demo/why-checkbox.html +0 -57
  80. package/components/checkbox/demo/why-checkbox.md +0 -86
  81. package/components/combobox/demo/why-combobox.html +0 -57
  82. package/components/combobox/demo/why-combobox.md +0 -113
  83. package/components/counter/demo/why-counter.html +0 -57
  84. package/components/counter/demo/why-counter.md +0 -108
  85. package/components/datepicker/demo/customize.js +0 -19
  86. package/components/datepicker/demo/customize.min.js +0 -26028
  87. package/components/datepicker/demo/why-datepicker.html +0 -57
  88. package/components/datepicker/demo/why-datepicker.md +0 -133
  89. package/components/dropdown/demo/why-dropdown.html +0 -57
  90. package/components/dropdown/demo/why-dropdown.md +0 -97
  91. package/components/form/demo/why-form.html +0 -57
  92. package/components/form/demo/why-form.md +0 -101
  93. package/components/input/demo/why-input.html +0 -57
  94. package/components/input/demo/why-input.md +0 -121
  95. package/components/menu/demo/why-menu.html +0 -57
  96. package/components/menu/demo/why-menu.md +0 -104
  97. package/components/radio/demo/customize.min.js +0 -2186
  98. package/components/radio/demo/demo-support.min.js +0 -55807
  99. package/components/radio/demo/getting-started.min.js +0 -2205
  100. package/components/radio/demo/why-radio.html +0 -57
  101. package/components/radio/demo/why-radio.md +0 -92
  102. package/components/select/demo/why-select.html +0 -57
  103. package/components/select/demo/why-select.md +0 -128
@@ -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);
@@ -94,33 +85,12 @@ export class AuroCalendarCell extends LitElement {
94
85
  private handleTap;
95
86
  /**
96
87
  * Handles user hover events and dispatches a custom event.
97
- * Always dispatches for range pickers so the preview updates correctly.
98
88
  * @private
99
89
  * @returns {void}
100
90
  */
101
91
  private handleHover;
102
92
  /**
103
- * Checks if the current date is outside the valid min/max range.
104
- * Out-of-range cells are not focusable and are hidden from screen readers.
105
- * @private
106
- * @param {Object} day - An object containing the dateFrom and day of month values.
107
- * @param {Number} min - The minimum date value.
108
- * @param {Number} max - The maximum date value.
109
- * @returns {Boolean} - True if the date is out of range.
110
- */
111
- private isOutOfRange;
112
- /**
113
- * Checks if the current date is a blackout date (in disabledDays but within range).
114
- * Blackout cells are focusable but not selectable.
115
- * @private
116
- * @returns {Boolean} - True if the date is a blackout date.
117
- */
118
- private isBlackout;
119
- /**
120
- * Checks if the current date is disabled based on min/max range or the
121
- * legacy disabledDays timestamp list. Sets the `disabled` attribute on the
122
- * host when the date falls outside the allowed range or appears in
123
- * 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.
124
94
  * @private
125
95
  * @param {Object} day - An object containing the dateFrom and day of month values.
126
96
  * @param {Number} min - The minimum date value.
@@ -129,25 +99,6 @@ export class AuroCalendarCell extends LitElement {
129
99
  * @returns {Boolean} - True if the date is disabled.
130
100
  */
131
101
  private isEnabled;
132
- /**
133
- * Generates a unique cell ID in the format cell-YYYY-MM-DD.
134
- * @private
135
- * @returns {String} The unique cell ID.
136
- */
137
- private getCellId;
138
- /**
139
- * Generates a localized aria-label for the cell button using Intl.DateTimeFormat.
140
- * Includes range position and blackout status.
141
- * @private
142
- * @returns {String} The aria-label string.
143
- */
144
- private getAriaLabel;
145
- /**
146
- * Determines the range position of this cell relative to the current selection.
147
- * @private
148
- * @returns {String|null} Range position label or null if not in range mode.
149
- */
150
- private getRangePosition;
151
102
  /**
152
103
  * Checks if the current date is the depart date.
153
104
  * @private
@@ -211,24 +162,8 @@ export class AuroCalendarCell extends LitElement {
211
162
  private handleSlotContent;
212
163
  firstUpdated(): void;
213
164
  datepicker: any;
214
- _slotContentHandler: (() => void) | undefined;
215
- calendarMonth: any;
216
- /**
217
- * Configures the popover instance with the calendar month boundary.
218
- * Called from firstUpdated and updated because the popover element is only
219
- * rendered after hasPopoverContent becomes true (set by handleSlotContent).
220
- * @private
221
- * @returns {void}
222
- */
223
- private configurePopover;
224
165
  auroPopover: any;
225
166
  updated(properties: any): void;
226
- /**
227
- * Programmatically focuses the cell's interactive button element.
228
- * @returns {void}
229
- */
230
- focusButton(): void;
231
- renderCellButton(): import("lit-html").TemplateResult;
232
167
  render(): import("lit-html").TemplateResult;
233
168
  }
234
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,20 +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
- /**
164
- * Recomputes and sets the active cell for the newly visible month after
165
- * month navigation. Without this, activeCellDate can point at a date in
166
- * the old month, leaving no tabindex="0" cell in the grid.
167
- * @private
168
- * @returns {void}
169
- */
170
- private updateActiveCellForVisibleMonth;
171
151
  /**
172
152
  * Renders all of the auro-calendar-months HTML.
173
153
  * @private
@@ -187,86 +167,6 @@ export class AuroCalendar extends RangeDatepicker {
187
167
  * @returns {void}
188
168
  */
189
169
  scrollMonthIntoView(date: string): void;
190
- /**
191
- * Gets all rendered month components.
192
- * @private
193
- * @returns {Array} Array of auro-formkit-calendar-month elements.
194
- */
195
- private getMonthComponents;
196
- /**
197
- * Gets all focusable cells across all rendered months.
198
- * @private
199
- * @returns {Array} Array of auro-formkit-calendar-cell elements.
200
- */
201
- private getAllFocusableCells;
202
- /**
203
- * Sets the active cell across all months. Only one cell has tabindex="0" at a time.
204
- * @param {Number} date - Unix timestamp of the cell to activate.
205
- * @returns {void}
206
- */
207
- setActiveCell(date: number): void;
208
- /**
209
- * Focuses the currently active cell. If activeCellDate is set but no cell
210
- * has the active attribute yet, sets it first. Waits for the cell's render
211
- * to complete so the focused button is the final DOM element.
212
- * @returns {void}
213
- */
214
- focusActiveCell(): void;
215
- /**
216
- * Computes the initial active date from data properties alone — no DOM required.
217
- * Priority:
218
- * 1. Selected date (dateFrom) if within range
219
- * 2. Today's date if not disabled (in-range and not blackout)
220
- * 3. First future non-disabled date (scans day-by-day from today up to 1 year)
221
- * 4. First previous non-disabled date (scans day-by-day from today up to 1 year)
222
- * 5. First enabled date in finite [min, max] range
223
- * 5b. First enabled date scanning forward from finite min (unbounded max)
224
- * 5c. First enabled date scanning backward from finite max (unbounded min)
225
- * 6. First in-range date (even if blackout) so focus can land somewhere
226
- * 7. undefined — no valid target
227
- *
228
- * @private
229
- * @param {Object} [options] - Optional settings.
230
- * @param {boolean} [options.skipDateFrom=false] - When true, skip the selected-date
231
- * shortcut (step 1). Used after month navigation so the active cell lands in the
232
- * newly visible month instead of jumping back to the selected date's month.
233
- * @returns {Number|undefined} Unix timestamp (seconds) of the date to activate, or undefined.
234
- */
235
- private computeActiveDate;
236
- /**
237
- * Handles cross-month boundary navigation events from month components.
238
- * @private
239
- * @param {CustomEvent} event - The boundary event with direction and source date info.
240
- * @returns {void}
241
- */
242
- private handleMonthBoundary;
243
- /**
244
- * Handles cell activation events from month components.
245
- * @private
246
- * @param {CustomEvent} event - The activation event with target date.
247
- * @returns {void}
248
- */
249
- private handleCellActivate;
250
- /**
251
- * Scrolls the calendar to ensure the month containing the active cell is visible.
252
- * @private
253
- * @returns {void}
254
- */
255
- private scrollToActiveCell;
256
- /**
257
- * Announces a date selection via the live region.
258
- * @private
259
- * @param {String} dateStr - The localized date string to announce.
260
- * @returns {void}
261
- */
262
- private announceSelection;
263
- /**
264
- * Formats a Unix timestamp (seconds) as a localized date string for SR announcements.
265
- * @private
266
- * @param {String|Number} timestamp - Unix timestamp in seconds.
267
- * @returns {String} Localized date string.
268
- */
269
- private formatAnnouncementDate;
270
170
  injectSlot(slotName: any, nodes: any): void;
271
171
  render(): import("lit-html").TemplateResult;
272
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`.
@@ -334,7 +271,6 @@ export class AuroDatePicker extends AuroElement {
334
271
  };
335
272
  /**
336
273
  * Custom help text message to display when validity = `customError`.
337
- * Also used as the validation message when a blackout date is typed into the input.
338
274
  */
339
275
  setCustomValidityCustomError: {
340
276
  type: StringConstructor;
@@ -419,15 +355,6 @@ export class AuroDatePicker extends AuroElement {
419
355
  required: boolean;
420
356
  onDark: boolean;
421
357
  range: boolean;
422
- rangeLabelStart: string;
423
- rangeLabelEnd: string;
424
- rangeLabelBeforeRange: string;
425
- rangeLabelInRange: string;
426
- rangeLabelAfterRange: string;
427
- blackoutDates: any[];
428
- blackoutLabel: string;
429
- navLabelPrevMonth: string;
430
- navLabelNextMonth: string;
431
358
  stacked: boolean;
432
359
  noValidate: boolean;
433
360
  validity: any;
@@ -605,13 +532,6 @@ export class AuroDatePicker extends AuroElement {
605
532
  * @returns {void}
606
533
  */
607
534
  private notifyMonthChanged;
608
- /**
609
- * Attempts to focus the active calendar cell using a rAF retry loop.
610
- * Shared by both fullscreen and desktop open paths.
611
- * @private
612
- * @returns {void}
613
- */
614
- private focusActiveCellWhenReady;
615
535
  /**
616
536
  * Binds all behavior needed to the dropdown after rendering.
617
537
  * @private
@@ -686,13 +606,6 @@ export class AuroDatePicker extends AuroElement {
686
606
  * @returns {void}
687
607
  */
688
608
  clear(): void;
689
- /**
690
- * Checks whether a formatted date string matches a blackout date.
691
- * @private
692
- * @param {string} dateStr - A date string in the component's configured format.
693
- * @returns {boolean} True if the date is in the blackoutDates list.
694
- */
695
- private isBlackoutDate;
696
609
  /**
697
610
  * Validates value.
698
611
  * @param {boolean} [force=false] - Whether to force validation.
@@ -711,7 +624,6 @@ export class AuroDatePicker extends AuroElement {
711
624
  formattedFocusDate: boolean | undefined;
712
625
  formattedEndDate: boolean | undefined;
713
626
  formattedValue: boolean | undefined;
714
- wasCellClick: boolean | undefined;
715
627
  formattedValueEnd: boolean | undefined;
716
628
  formattedMinDate: boolean | undefined;
717
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">