@aurodesignsystem/auro-formkit 2.0.0-beta.50 → 2.0.0-beta.52

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 (41) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/components/checkbox/README.md +1 -1
  3. package/components/combobox/README.md +4 -4
  4. package/components/combobox/demo/api.md +1 -1
  5. package/components/combobox/demo/api.min.js +3 -3
  6. package/components/combobox/demo/index.min.js +3 -3
  7. package/components/combobox/dist/auro-combobox.d.ts +2 -2
  8. package/components/combobox/dist/index.js +3 -3
  9. package/components/combobox/dist/registered.js +3 -3
  10. package/components/counter/README.md +1 -1
  11. package/components/counter/demo/api.md +10 -10
  12. package/components/counter/demo/api.min.js +3 -3
  13. package/components/counter/demo/index.min.js +3 -3
  14. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  15. package/components/counter/dist/index.js +3 -3
  16. package/components/counter/dist/registered.js +3 -3
  17. package/components/datepicker/README.md +8 -8
  18. package/components/datepicker/demo/api.md +125 -124
  19. package/components/datepicker/demo/api.min.js +14 -14
  20. package/components/datepicker/demo/index.md +12 -12
  21. package/components/datepicker/demo/index.min.js +14 -14
  22. package/components/datepicker/dist/auro-calendar.d.ts +1 -1
  23. package/components/datepicker/dist/auro-datepicker.d.ts +4 -4
  24. package/components/datepicker/dist/index.js +14 -14
  25. package/components/datepicker/dist/registered.js +14 -14
  26. package/components/dropdown/README.md +1 -1
  27. package/components/form/README.md +1 -1
  28. package/components/form/demo/working.html +2 -2
  29. package/components/input/README.md +1 -1
  30. package/components/menu/README.md +1 -1
  31. package/components/radio/README.md +1 -1
  32. package/components/select/README.md +5 -3
  33. package/components/select/demo/api.md +101 -21
  34. package/components/select/demo/api.min.js +1058 -195
  35. package/components/select/demo/index.md +20 -0
  36. package/components/select/demo/index.min.js +1058 -195
  37. package/components/select/dist/auro-select.d.ts +38 -2
  38. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  39. package/components/select/dist/index.js +1069 -206
  40. package/components/select/dist/registered.js +1069 -206
  41. package/package.json +1 -1
package/components/datepicker/demo/api.md CHANGED
@@ -14,7 +14,7 @@
14
14
  | [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the datepicker. |
15
15
  | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
16
16
  | [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
17
- | [largeMobileHeadline](#largeMobileHeadline) | `largeMobileHeadline` | | `boolean` | | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600. |
17
+ | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
18
18
  | [maxDate](#maxDate) | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
19
19
  | [minDate](#minDate) | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
20
20
  | [monthNames](#monthNames) | `monthNames` | | `array` | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
@@ -51,15 +51,15 @@
51
51
 
52
52
  ## Slots
53
53
 
54
- | Name | Description |
55
- |----------------------|--------------------------------------------------|
56
- | `date_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot. |
57
- | [fromLabel](#fromLabel) | Defines the label content for the first input. |
58
- | [helpText](#helpText) | Defines the content of the helpText. |
59
- | [mobileDateLabel](#mobileDateLabel) | Defines the content to display above selected dates in the mobile layout. |
60
- | [mobileHeadline](#mobileHeadline) | Defines the headline to display above mobileDateLabels in the mobile layout. |
61
- | `popover_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell popover for the specified date. |
62
- | [toLabel](#toLabel) | Defines the label content for the second input when the `range` attribute is used. |
54
+ | Name | Description |
55
+ |----------------------------|--------------------------------------------------|
56
+ | `bib.fullscreen.dateLabel` | Defines the content to display above selected dates in the mobile layout. |
57
+ | `bib.fullscreen.headline` | Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout. |
58
+ | `date_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot. |
59
+ | [fromLabel](#fromLabel) | Defines the label content for the first input. |
60
+ | [helpText](#helpText) | Defines the content of the helpText. |
61
+ | `popover_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell popover for the specified date. |
62
+ | [toLabel](#toLabel) | Defines the label content for the second input when the `range` attribute is used. |
63
63
 
64
64
  ## CSS Shadow Parts
65
65
 
@@ -82,9 +82,9 @@
82
82
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
83
83
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
84
84
  <auro-datepicker>
85
- <span slot="mobileHeadline">Datepicker Headline</span>
85
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
86
86
  <span slot="fromLabel">Choose a date</span>
87
- <span slot="mobileDateLabel">Choose a date</span>
87
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
88
88
  </auro-datepicker>
89
89
  <!-- AURO-GENERATED-CONTENT:END -->
90
90
  </div>
@@ -95,9 +95,9 @@
95
95
 
96
96
  ```html
97
97
  <auro-datepicker>
98
- <span slot="mobileHeadline">Datepicker Headline</span>
98
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
99
99
  <span slot="fromLabel">Choose a date</span>
100
- <span slot="mobileDateLabel">Choose a date</span>
100
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
101
101
  </auro-datepicker>
102
102
  ```
103
103
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -111,10 +111,10 @@ When used, the datepicker will display two inputs and the component will support
111
111
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
112
112
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
113
113
  <auro-datepicker range>
114
- <span slot="mobileHeadline">Datepicker Range Headline</span>
114
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
115
115
  <span slot="fromLabel">Departure</span>
116
116
  <span slot="toLabel">Return</span>
117
- <span slot="mobileDateLabel">Roundtrip</span>
117
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
118
118
  </auro-datepicker>
119
119
  <!-- AURO-GENERATED-CONTENT:END -->
120
120
  </div>
@@ -125,10 +125,10 @@ When used, the datepicker will display two inputs and the component will support
125
125
 
126
126
  ```html
127
127
  <auro-datepicker range>
128
- <span slot="mobileHeadline">Datepicker Range Headline</span>
128
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
129
129
  <span slot="fromLabel">Departure</span>
130
130
  <span slot="toLabel">Return</span>
131
- <span slot="mobileDateLabel">Roundtrip</span>
131
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
132
132
  </auro-datepicker>
133
133
  ```
134
134
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -145,7 +145,7 @@ If set, disables the datepicker.
145
145
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
146
146
  <auro-datepicker disabled>
147
147
  <span slot="fromLabel">Choose a date</span>
148
- <span slot="mobileDateLabel">Choose a date</span>
148
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
149
149
  </auro-datepicker>
150
150
  <!-- AURO-GENERATED-CONTENT:END -->
151
151
  </div>
@@ -157,7 +157,7 @@ If set, disables the datepicker.
157
157
  ```html
158
158
  <auro-datepicker disabled>
159
159
  <span slot="fromLabel">Choose a date</span>
160
- <span slot="mobileDateLabel">Choose a date</span>
160
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
161
161
  </auro-datepicker>
162
162
  ```
163
163
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -173,9 +173,9 @@ A custom error message can be set using the `error` attribute, or it can be used
173
173
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
174
174
  <!-- The below content is automatically added from ./../apiExamples/error.html -->
175
175
  <auro-datepicker error="Custom error message" id="errorExample">
176
- <span slot="mobileHeadline">Error Example</span>
176
+ <span slot="bib.fullscreen.headline">Error Example</span>
177
177
  <span slot="fromLabel">Choose a date</span>
178
- <span slot="mobileDateLabel">Choose a date</span>
178
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
179
179
  </auro-datepicker>
180
180
  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
181
181
  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
@@ -188,9 +188,9 @@ A custom error message can be set using the `error` attribute, or it can be used
188
188
 
189
189
  ```html
190
190
  <auro-datepicker error="Custom error message" id="errorExample">
191
- <span slot="mobileHeadline">Error Example</span>
191
+ <span slot="bib.fullscreen.headline">Error Example</span>
192
192
  <span slot="fromLabel">Choose a date</span>
193
- <span slot="mobileDateLabel">Choose a date</span>
193
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
194
194
  </auro-datepicker>
195
195
  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
196
196
  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
@@ -231,9 +231,9 @@ Note: This does not restrict setting a value outside of those date constraints.
231
231
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarStartAndEndDate.html) -->
232
232
  <!-- The below content is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
233
233
  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
234
- <span slot="mobileHeadline">calendarStartDate & calendarEndDate Example</span>
234
+ <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
235
235
  <span slot="fromLabel">Choose a date</span>
236
- <span slot="mobileDateLabel">Choose a date</span>
236
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
237
237
  </auro-datepicker>
238
238
  <!-- AURO-GENERATED-CONTENT:END -->
239
239
  </div>
@@ -244,9 +244,9 @@ Note: This does not restrict setting a value outside of those date constraints.
244
244
 
245
245
  ```html
246
246
  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
247
- <span slot="mobileHeadline">calendarStartDate & calendarEndDate Example</span>
247
+ <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
248
248
  <span slot="fromLabel">Choose a date</span>
249
- <span slot="mobileDateLabel">Choose a date</span>
249
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
250
250
  </auro-datepicker>
251
251
  ```
252
252
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -264,9 +264,9 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
264
264
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarFocusDate.html) -->
265
265
  <!-- The below content is automatically added from ./../apiExamples/calendarFocusDate.html -->
266
266
  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
267
- <span slot="mobileHeadline">calendarFocusDate Example</span>
267
+ <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
268
268
  <span slot="fromLabel">Choose a date</span>
269
- <span slot="mobileDateLabel">Choose a date</span>
269
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
270
270
  </auro-datepicker>
271
271
  <!-- AURO-GENERATED-CONTENT:END -->
272
272
  </div>
@@ -277,9 +277,9 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
277
277
 
278
278
  ```html
279
279
  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
280
- <span slot="mobileHeadline">calendarFocusDate Example</span>
280
+ <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
281
281
  <span slot="fromLabel">Choose a date</span>
282
- <span slot="mobileDateLabel">Choose a date</span>
282
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
283
283
  </auro-datepicker>
284
284
  ```
285
285
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -293,9 +293,9 @@ To give a higher limit you can bind a date to the `maxDate` attribute. It is rec
293
293
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/maxDate.html) -->
294
294
  <!-- The below content is automatically added from ./../apiExamples/maxDate.html -->
295
295
  <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
296
- <span slot="mobileHeadline">maxDate Example</span>
296
+ <span slot="bib.fullscreen.headline">maxDate Example</span>
297
297
  <span slot="fromLabel">Choose a date</span>
298
- <span slot="mobileDateLabel">Choose a date</span>
298
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
299
299
  </auro-datepicker>
300
300
  <!-- AURO-GENERATED-CONTENT:END -->
301
301
  </div>
@@ -306,9 +306,9 @@ To give a higher limit you can bind a date to the `maxDate` attribute. It is rec
306
306
 
307
307
  ```html
308
308
  <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
309
- <span slot="mobileHeadline">maxDate Example</span>
309
+ <span slot="bib.fullscreen.headline">maxDate Example</span>
310
310
  <span slot="fromLabel">Choose a date</span>
311
- <span slot="mobileDateLabel">Choose a date</span>
311
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
312
312
  </auro-datepicker>
313
313
  ```
314
314
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -324,9 +324,9 @@ This example demonstrates that behavior.
324
324
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMaxDate.html) -->
325
325
  <!-- The below content is automatically added from ./../apiExamples/updateMaxDate.html -->
326
326
  <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
327
- <span slot="mobileHeadline">maxDate Example</span>
327
+ <span slot="bib.fullscreen.headline">maxDate Example</span>
328
328
  <span slot="fromLabel">Choose a date</span>
329
- <span slot="mobileDateLabel">Choose a date</span>
329
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
330
330
  </auro-datepicker>
331
331
  <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
332
332
  <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
@@ -339,9 +339,9 @@ This example demonstrates that behavior.
339
339
 
340
340
  ```html
341
341
  <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
342
- <span slot="mobileHeadline">maxDate Example</span>
342
+ <span slot="bib.fullscreen.headline">maxDate Example</span>
343
343
  <span slot="fromLabel">Choose a date</span>
344
- <span slot="mobileDateLabel">Choose a date</span>
344
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
345
345
  </auro-datepicker>
346
346
  <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
347
347
  <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
@@ -398,9 +398,9 @@ To give a lower limit you can bind a date to the `minDate` attribute. It is reco
398
398
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/minDate.html) -->
399
399
  <!-- The below content is automatically added from ./../apiExamples/minDate.html -->
400
400
  <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
401
- <span slot="mobileHeadline">minDate Example</span>
401
+ <span slot="bib.fullscreen.headline">minDate Example</span>
402
402
  <span slot="fromLabel">Choose a date</span>
403
- <span slot="mobileDateLabel">Choose a date</span>
403
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
404
404
  </auro-datepicker>
405
405
  <!-- AURO-GENERATED-CONTENT:END -->
406
406
  </div>
@@ -411,9 +411,9 @@ To give a lower limit you can bind a date to the `minDate` attribute. It is reco
411
411
 
412
412
  ```html
413
413
  <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
414
- <span slot="mobileHeadline">minDate Example</span>
414
+ <span slot="bib.fullscreen.headline">minDate Example</span>
415
415
  <span slot="fromLabel">Choose a date</span>
416
- <span slot="mobileDateLabel">Choose a date</span>
416
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
417
417
  </auro-datepicker>
418
418
  ```
419
419
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -429,9 +429,9 @@ This example demonstrates that behavior.
429
429
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMinDate.html) -->
430
430
  <!-- The below content is automatically added from ./../apiExamples/updateMinDate.html -->
431
431
  <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
432
- <span slot="mobileHeadline">minDate Example</span>
432
+ <span slot="bib.fullscreen.headline">minDate Example</span>
433
433
  <span slot="fromLabel">Choose a date</span>
434
- <span slot="mobileDateLabel">Choose a date</span>
434
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
435
435
  </auro-datepicker>
436
436
  <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
437
437
  <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
@@ -444,9 +444,9 @@ This example demonstrates that behavior.
444
444
 
445
445
  ```html
446
446
  <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
447
- <span slot="mobileHeadline">minDate Example</span>
447
+ <span slot="bib.fullscreen.headline">minDate Example</span>
448
448
  <span slot="fromLabel">Choose a date</span>
449
- <span slot="mobileDateLabel">Choose a date</span>
449
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
450
450
  </auro-datepicker>
451
451
  <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
452
452
  <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
@@ -505,9 +505,9 @@ When set, the datepicker will not validate when navigating away from the compone
505
505
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noValidate.html) -->
506
506
  <!-- The below content is automatically added from ./../apiExamples/noValidate.html -->
507
507
  <auro-datepicker required noValidate>
508
- <span slot="mobileHeadline">noValidate Example</span>
508
+ <span slot="bib.fullscreen.headline">noValidate Example</span>
509
509
  <span slot="fromLabel">Choose a date</span>
510
- <span slot="mobileDateLabel">Choose a date</span>
510
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
511
511
  </auro-datepicker>
512
512
  <!-- AURO-GENERATED-CONTENT:END -->
513
513
  </div>
@@ -518,9 +518,9 @@ When set, the datepicker will not validate when navigating away from the compone
518
518
 
519
519
  ```html
520
520
  <auro-datepicker required noValidate>
521
- <span slot="mobileHeadline">noValidate Example</span>
521
+ <span slot="bib.fullscreen.headline">noValidate Example</span>
522
522
  <span slot="fromLabel">Choose a date</span>
523
- <span slot="mobileDateLabel">Choose a date</span>
523
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
524
524
  </auro-datepicker>
525
525
  ```
526
526
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -536,15 +536,15 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
536
536
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
537
537
  <!-- The below content is automatically added from ./../apiExamples/required.html -->
538
538
  <auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
539
- <span slot="mobileHeadline">Required Example</span>
539
+ <span slot="bib.fullscreen.headline">Required Example</span>
540
540
  <span slot="fromLabel">Choose a date</span>
541
- <span slot="mobileDateLabel">Choose a date</span>
541
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
542
542
  </auro-datepicker>
543
543
  <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
544
- <span slot="mobileHeadline">Required Example</span>
544
+ <span slot="bib.fullscreen.headline">Required Example</span>
545
545
  <span slot="fromLabel">Departure</span>
546
546
  <span slot="toLabel">Return</span>
547
- <span slot="mobileDateLabel">Roundtrip</span>
547
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
548
548
  </auro-datepicker>
549
549
  <!-- AURO-GENERATED-CONTENT:END -->
550
550
  </div>
@@ -555,15 +555,15 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
555
555
 
556
556
  ```html
557
557
  <auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
558
- <span slot="mobileHeadline">Required Example</span>
558
+ <span slot="bib.fullscreen.headline">Required Example</span>
559
559
  <span slot="fromLabel">Choose a date</span>
560
- <span slot="mobileDateLabel">Choose a date</span>
560
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
561
561
  </auro-datepicker>
562
562
  <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
563
- <span slot="mobileHeadline">Required Example</span>
563
+ <span slot="bib.fullscreen.headline">Required Example</span>
564
564
  <span slot="fromLabel">Departure</span>
565
565
  <span slot="toLabel">Return</span>
566
- <span slot="mobileDateLabel">Roundtrip</span>
566
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
567
567
  </auro-datepicker>
568
568
  ```
569
569
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -577,9 +577,9 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
577
577
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/validity.html) -->
578
578
  <!-- The below content is automatically added from ./../apiExamples/validity.html -->
579
579
  <auro-datepicker required id="validityExample">
580
- <span slot="mobileHeadline">validity Example</span>
580
+ <span slot="bib.fullscreen.headline">validity Example</span>
581
581
  <span slot="fromLabel">Choose a date</span>
582
- <span slot="mobileDateLabel">Choose a date</span>
582
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
583
583
  </auro-datepicker>
584
584
  <auro-button id="validityExampleBtn">Get validity</auro-button>
585
585
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -591,9 +591,9 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
591
591
 
592
592
  ```html
593
593
  <auro-datepicker required id="validityExample">
594
- <span slot="mobileHeadline">validity Example</span>
594
+ <span slot="bib.fullscreen.headline">validity Example</span>
595
595
  <span slot="fromLabel">Choose a date</span>
596
- <span slot="mobileDateLabel">Choose a date</span>
596
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
597
597
  </auro-datepicker>
598
598
  <auro-button id="validityExampleBtn">Get validity</auro-button>
599
599
  ```
@@ -623,9 +623,9 @@ Value selected for the datepicker. Can be used to pre-set the value of the datep
623
623
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
624
624
  <!-- The below content is automatically added from ./../apiExamples/value.html -->
625
625
  <auro-datepicker id="valueExample" value="02/02/2022">
626
- <span slot="mobileHeadline">value Example</span>
626
+ <span slot="bib.fullscreen.headline">value Example</span>
627
627
  <span slot="fromLabel">Choose a date</span>
628
- <span slot="mobileDateLabel">Choose a date</span>
628
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
629
629
  </auro-datepicker>
630
630
  <!-- AURO-GENERATED-CONTENT:END -->
631
631
  </div>
@@ -636,9 +636,9 @@ Value selected for the datepicker. Can be used to pre-set the value of the datep
636
636
 
637
637
  ```html
638
638
  <auro-datepicker id="valueExample" value="02/02/2022">
639
- <span slot="mobileHeadline">value Example</span>
639
+ <span slot="bib.fullscreen.headline">value Example</span>
640
640
  <span slot="fromLabel">Choose a date</span>
641
- <span slot="mobileDateLabel">Choose a date</span>
641
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
642
642
  </auro-datepicker>
643
643
  ```
644
644
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -652,10 +652,10 @@ Value of the second input (end date), selected for the datepicker. Can be used t
652
652
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueEnd.html) -->
653
653
  <!-- The below content is automatically added from ./../apiExamples/valueEnd.html -->
654
654
  <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
655
- <span slot="mobileHeadline">valueEnd Example</span>
655
+ <span slot="bib.fullscreen.headline">valueEnd Example</span>
656
656
  <span slot="fromLabel">Departure</span>
657
657
  <span slot="toLabel">Return</span>
658
- <span slot="mobileDateLabel">Choose a date</span>
658
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
659
659
  </auro-datepicker>
660
660
  <!-- AURO-GENERATED-CONTENT:END -->
661
661
  </div>
@@ -666,10 +666,10 @@ Value of the second input (end date), selected for the datepicker. Can be used t
666
666
 
667
667
  ```html
668
668
  <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
669
- <span slot="mobileHeadline">valueEnd Example</span>
669
+ <span slot="bib.fullscreen.headline">valueEnd Example</span>
670
670
  <span slot="fromLabel">Departure</span>
671
671
  <span slot="toLabel">Return</span>
672
- <span slot="mobileDateLabel">Choose a date</span>
672
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
673
673
  </auro-datepicker>
674
674
  ```
675
675
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -683,9 +683,9 @@ The `format` attribute is used to define the date format used by the datepicker.
683
683
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/format.html) -->
684
684
  <!-- The below content is automatically added from ./../apiExamples/format.html -->
685
685
  <auro-datepicker format="yyyy/mm/dd">
686
- <span slot="mobileHeadline">Format Headline</span>
686
+ <span slot="bib.fullscreen.headline">Format Headline</span>
687
687
  <span slot="fromLabel">Choose a date</span>
688
- <span slot="mobileDateLabel">Choose a date</span>
688
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
689
689
  </auro-datepicker>
690
690
  <!-- AURO-GENERATED-CONTENT:END -->
691
691
  </div>
@@ -696,9 +696,9 @@ The `format` attribute is used to define the date format used by the datepicker.
696
696
 
697
697
  ```html
698
698
  <auro-datepicker format="yyyy/mm/dd">
699
- <span slot="mobileHeadline">Format Headline</span>
699
+ <span slot="bib.fullscreen.headline">Format Headline</span>
700
700
  <span slot="fromLabel">Choose a date</span>
701
- <span slot="mobileDateLabel">Choose a date</span>
701
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
702
702
  </auro-datepicker>
703
703
  ```
704
704
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -714,10 +714,10 @@ The focus method will apply focus state to the datepicker's input field.
714
714
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
715
715
  <!-- The below content is automatically added from ./../apiExamples/focus.html -->
716
716
  <auro-datepicker id="focusExampleElem" range>
717
- <span slot="mobileHeadline">Focus Example</span>
717
+ <span slot="bib.fullscreen.headline">Focus Example</span>
718
718
  <span slot="fromLabel">Departure</span>
719
719
  <span slot="toLabel">Return</span>
720
- <span slot="mobileDateLabel">Choose a date</span>
720
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
721
721
  </auro-datepicker>
722
722
  <auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
723
723
  <auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
@@ -730,10 +730,10 @@ The focus method will apply focus state to the datepicker's input field.
730
730
 
731
731
  ```html
732
732
  <auro-datepicker id="focusExampleElem" range>
733
- <span slot="mobileHeadline">Focus Example</span>
733
+ <span slot="bib.fullscreen.headline">Focus Example</span>
734
734
  <span slot="fromLabel">Departure</span>
735
735
  <span slot="toLabel">Return</span>
736
- <span slot="mobileDateLabel">Choose a date</span>
736
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
737
737
  </auro-datepicker>
738
738
  <auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
739
739
  <auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
@@ -770,9 +770,9 @@ Sets the label used for the input. When the `range` attribute is used this is th
770
770
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
771
771
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
772
772
  <auro-datepicker>
773
- <span slot="mobileHeadline">Datepicker Headline</span>
773
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
774
774
  <span slot="fromLabel">Choose a date</span>
775
- <span slot="mobileDateLabel">Choose a date</span>
775
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
776
776
  </auro-datepicker>
777
777
  <!-- AURO-GENERATED-CONTENT:END -->
778
778
  </div>
@@ -783,9 +783,9 @@ Sets the label used for the input. When the `range` attribute is used this is th
783
783
 
784
784
  ```html
785
785
  <auro-datepicker>
786
- <span slot="mobileHeadline">Datepicker Headline</span>
786
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
787
787
  <span slot="fromLabel">Choose a date</span>
788
- <span slot="mobileDateLabel">Choose a date</span>
788
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
789
789
  </auro-datepicker>
790
790
  ```
791
791
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -799,9 +799,9 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
799
799
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
800
800
  <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
801
801
  <auro-datepicker>
802
- <span slot="mobileHeadline">helpText Example</span>
802
+ <span slot="bib.fullscreen.headline">helpText Example</span>
803
803
  <span slot="fromLabel">Choose a date</span>
804
- <span slot="mobileDateLabel">Choose a date</span>
804
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
805
805
  <span slot="helpText">Choose a date must be today or earlier.</span>
806
806
  </auro-datepicker>
807
807
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -813,26 +813,27 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
813
813
 
814
814
  ```html
815
815
  <auro-datepicker>
816
- <span slot="mobileHeadline">helpText Example</span>
816
+ <span slot="bib.fullscreen.headline">helpText Example</span>
817
817
  <span slot="fromLabel">Choose a date</span>
818
- <span slot="mobileDateLabel">Choose a date</span>
818
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
819
819
  <span slot="helpText">Choose a date must be today or earlier.</span>
820
820
  </auro-datepicker>
821
821
  ```
822
822
  <!-- AURO-GENERATED-CONTENT:END -->
823
823
  </auro-accordion>
824
824
 
825
- #### mobileDateLabel
825
+ #### bib.fullscreen.dateLabel and bib.fullscreen.headline
826
826
 
827
- Sets the label used for the selected date display at the top of the bib when viewed in the mobile layout. To view this demo, set your window to a mobile screen size.
827
+ Sets the headline and the label at the top of the bib when viewed in the mobile layout.
828
+ To view this demo, set your window to a mobile screen size.
828
829
 
829
830
  <div class="exampleWrapper">
830
831
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
831
832
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
832
833
  <auro-datepicker>
833
- <span slot="mobileHeadline">Datepicker Headline</span>
834
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
834
835
  <span slot="fromLabel">Choose a date</span>
835
- <span slot="mobileDateLabel">Choose a date</span>
836
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
836
837
  </auro-datepicker>
837
838
  <!-- AURO-GENERATED-CONTENT:END -->
838
839
  </div>
@@ -843,9 +844,9 @@ Sets the label used for the selected date display at the top of the bib when vie
843
844
 
844
845
  ```html
845
846
  <auro-datepicker>
846
- <span slot="mobileHeadline">Datepicker Headline</span>
847
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
847
848
  <span slot="fromLabel">Choose a date</span>
848
- <span slot="mobileDateLabel">Choose a date</span>
849
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
849
850
  </auro-datepicker>
850
851
  ```
851
852
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -859,10 +860,10 @@ Only for use with the `range` attribute. Sets the label for the second input.
859
860
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
860
861
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
861
862
  <auro-datepicker range>
862
- <span slot="mobileHeadline">Datepicker Range Headline</span>
863
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
863
864
  <span slot="fromLabel">Departure</span>
864
865
  <span slot="toLabel">Return</span>
865
- <span slot="mobileDateLabel">Roundtrip</span>
866
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
866
867
  </auro-datepicker>
867
868
  <!-- AURO-GENERATED-CONTENT:END -->
868
869
  </div>
@@ -873,10 +874,10 @@ Only for use with the `range` attribute. Sets the label for the second input.
873
874
 
874
875
  ```html
875
876
  <auro-datepicker range>
876
- <span slot="mobileHeadline">Datepicker Range Headline</span>
877
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
877
878
  <span slot="fromLabel">Departure</span>
878
879
  <span slot="toLabel">Return</span>
879
- <span slot="mobileDateLabel">Roundtrip</span>
880
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
880
881
  </auro-datepicker>
881
882
  ```
882
883
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -896,9 +897,9 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
896
897
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dateSlot.html) -->
897
898
  <!-- The below content is automatically added from ./../apiExamples/dateSlot.html -->
898
899
  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
899
- <span slot="mobileHeadline">dateSlot Example</span>
900
+ <span slot="bib.fullscreen.headline">dateSlot Example</span>
900
901
  <span slot="fromLabel">Choose a date</span>
901
- <span slot="mobileDateLabel">Choose a date</span>
902
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
902
903
  <span slot="date_12_03_2023">Sold</span>
903
904
  <span highlight slot="date_12_04_2023">$89</span>
904
905
  <span slot="date_12_05_2023">$100</span>
@@ -916,9 +917,9 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
916
917
 
917
918
  ```html
918
919
  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
919
- <span slot="mobileHeadline">dateSlot Example</span>
920
+ <span slot="bib.fullscreen.headline">dateSlot Example</span>
920
921
  <span slot="fromLabel">Choose a date</span>
921
- <span slot="mobileDateLabel">Choose a date</span>
922
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
922
923
  <span slot="date_12_03_2023">Sold</span>
923
924
  <span highlight slot="date_12_04_2023">$89</span>
924
925
  <span slot="date_12_05_2023">$100</span>
@@ -941,9 +942,9 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
941
942
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverSlot.html) -->
942
943
  <!-- The below content is automatically added from ./../apiExamples/popoverSlot.html -->
943
944
  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
944
- <span slot="mobileHeadline">Popover Slot Example</span>
945
+ <span slot="bib.fullscreen.headline">Popover Slot Example</span>
945
946
  <span slot="fromLabel">Choose a date</span>
946
- <span slot="mobileDateLabel">Choose a date</span>
947
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
947
948
  <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
948
949
  <span slot="popover_12_04_2023">Tickets for this day are $89</span>
949
950
  <span slot="popover_12_05_2023">Tickets for this day are $100</span>
@@ -961,9 +962,9 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
961
962
 
962
963
  ```html
963
964
  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
964
- <span slot="mobileHeadline">Popover Slot Example</span>
965
+ <span slot="bib.fullscreen.headline">Popover Slot Example</span>
965
966
  <span slot="fromLabel">Choose a date</span>
966
- <span slot="mobileDateLabel">Choose a date</span>
967
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
967
968
  <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
968
969
  <span slot="popover_12_04_2023">Tickets for this day are $89</span>
969
970
  <span slot="popover_12_05_2023">Tickets for this day are $100</span>
@@ -988,9 +989,9 @@ This example demonstrates how to set the `monthNames` property to Korean month n
988
989
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
989
990
  <!-- The below content is automatically added from ./../apiExamples/localization.html -->
990
991
  <auro-datepicker format="yyyy/mm/dd" id="localizationExample">
991
- <span slot="mobileHeadline">Localization Headline</span>
992
+ <span slot="bib.fullscreen.headline">Localization Headline</span>
992
993
  <span slot="fromLabel">Choose a date</span>
993
- <span slot="mobileDateLabel">Choose a date</span>
994
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
994
995
  </auro-datepicker>
995
996
  <!-- AURO-GENERATED-CONTENT:END -->
996
997
  </div>
@@ -1001,9 +1002,9 @@ This example demonstrates how to set the `monthNames` property to Korean month n
1001
1002
 
1002
1003
  ```html
1003
1004
  <auro-datepicker format="yyyy/mm/dd" id="localizationExample">
1004
- <span slot="mobileHeadline">Localization Headline</span>
1005
+ <span slot="bib.fullscreen.headline">Localization Headline</span>
1005
1006
  <span slot="fromLabel">Choose a date</span>
1006
- <span slot="mobileDateLabel">Choose a date</span>
1007
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1007
1008
  </auro-datepicker>
1008
1009
  ```
1009
1010
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1028,10 +1029,10 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
1028
1029
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
1029
1030
  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
1030
1031
  <auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
1031
- <span slot="mobileHeadline">Reset Example</span>
1032
+ <span slot="bib.fullscreen.headline">Reset Example</span>
1032
1033
  <span slot="fromLabel">Departure</span>
1033
1034
  <span slot="toLabel">Return</span>
1034
- <span slot="mobileDateLabel">Choose a date</span>
1035
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1035
1036
  </auro-datepicker>
1036
1037
  <auro-button id="resetStateBtn">Reset</auro-button>
1037
1038
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1043,10 +1044,10 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
1043
1044
 
1044
1045
  ```html
1045
1046
  <auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
1046
- <span slot="mobileHeadline">Reset Example</span>
1047
+ <span slot="bib.fullscreen.headline">Reset Example</span>
1047
1048
  <span slot="fromLabel">Departure</span>
1048
1049
  <span slot="toLabel">Return</span>
1049
- <span slot="mobileDateLabel">Choose a date</span>
1050
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1050
1051
  </auro-datepicker>
1051
1052
  <auro-button id="resetStateBtn">Reset</auro-button>
1052
1053
  ```
@@ -1074,10 +1075,10 @@ This example demonstrates data driven slot content for days in the calendar. In
1074
1075
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamicSlot.html) -->
1075
1076
  <!-- The below content is automatically added from ./../apiExamples/dynamicSlot.html -->
1076
1077
  <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
1077
- <span slot="mobileHeadline">dynamic slot Example</span>
1078
+ <span slot="bib.fullscreen.headline">dynamic slot Example</span>
1078
1079
  <span slot="fromLabel">Departure</span>
1079
1080
  <span slot="toLabel">Return</span>
1080
- <span slot="mobileDateLabel">Choose a date</span>
1081
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1081
1082
  </auro-datepicker>
1082
1083
  <!-- AURO-GENERATED-CONTENT:END -->
1083
1084
  </div>
@@ -1088,10 +1089,10 @@ This example demonstrates data driven slot content for days in the calendar. In
1088
1089
 
1089
1090
  ```html
1090
1091
  <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
1091
- <span slot="mobileHeadline">dynamic slot Example</span>
1092
+ <span slot="bib.fullscreen.headline">dynamic slot Example</span>
1092
1093
  <span slot="fromLabel">Departure</span>
1093
1094
  <span slot="toLabel">Return</span>
1094
- <span slot="mobileDateLabel">Choose a date</span>
1095
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1095
1096
  </auro-datepicker>
1096
1097
  ```
1097
1098
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1230,9 +1231,9 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
1230
1231
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alertValue.html) -->
1231
1232
  <!-- The below content is automatically added from ./../apiExamples/alertValue.html -->
1232
1233
  <auro-datepicker id="datePickerValueAlert">
1233
- <span slot="mobileHeadline">Alert Value Example</span>
1234
+ <span slot="bib.fullscreen.headline">Alert Value Example</span>
1234
1235
  <span slot="fromLabel">Choose a date</span>
1235
- <span slot="mobileDateLabel">Choose a date</span>
1236
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1236
1237
  </auro-datepicker>
1237
1238
  <!-- AURO-GENERATED-CONTENT:END -->
1238
1239
  </div>
@@ -1243,9 +1244,9 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
1243
1244
 
1244
1245
  ```html
1245
1246
  <auro-datepicker id="datePickerValueAlert">
1246
- <span slot="mobileHeadline">Alert Value Example</span>
1247
+ <span slot="bib.fullscreen.headline">Alert Value Example</span>
1247
1248
  <span slot="fromLabel">Choose a date</span>
1248
- <span slot="mobileDateLabel">Choose a date</span>
1249
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
1249
1250
  </auro-datepicker>
1250
1251
  ```
1251
1252
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1275,7 +1276,7 @@ The component can be in a dialog.
1275
1276
  <div>
1276
1277
  <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
1277
1278
  <auro-dialog id="datepicker-dialog">
1278
- <span slot="mobileHeadline">inDialog Example</span>
1279
+ <span slot="bib.fullscreen.headline">inDialog Example</span>
1279
1280
  <span slot="header">Datepicker in Dialog</span>
1280
1281
  <div slot="content">
1281
1282
  <auro-datepicker />
@@ -1293,7 +1294,7 @@ The component can be in a dialog.
1293
1294
  <div>
1294
1295
  <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
1295
1296
  <auro-dialog id="datepicker-dialog">
1296
- <span slot="mobileHeadline">inDialog Example</span>
1297
+ <span slot="bib.fullscreen.headline">inDialog Example</span>
1297
1298
  <span slot="header">Datepicker in Dialog</span>
1298
1299
  <div slot="content">
1299
1300
  <auro-datepicker />