@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

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 (127) hide show
  1. package/CHANGELOG.md +16 -4
  2. package/components/checkbox/README.md +62 -62
  3. package/components/checkbox/demo/api.js +1 -1
  4. package/components/checkbox/demo/api.md +127 -84
  5. package/components/checkbox/demo/api.min.js +125 -42
  6. package/components/checkbox/demo/index.md +9 -281
  7. package/components/checkbox/demo/index.min.js +125 -42
  8. package/components/checkbox/demo/readme.html +3 -4
  9. package/components/checkbox/demo/readme.md +62 -62
  10. package/components/checkbox/dist/auro-checkbox-group.d.ts +7 -8
  11. package/components/checkbox/dist/auro-checkbox.d.ts +74 -20
  12. package/components/checkbox/dist/index.js +125 -42
  13. package/components/checkbox/dist/registered.js +125 -42
  14. package/components/combobox/README.md +76 -74
  15. package/components/combobox/demo/api.html +1 -0
  16. package/components/combobox/demo/api.js +11 -12
  17. package/components/combobox/demo/api.md +1302 -875
  18. package/components/combobox/demo/api.min.js +348 -420
  19. package/components/combobox/demo/index.html +1 -7
  20. package/components/combobox/demo/index.js +0 -19
  21. package/components/combobox/demo/index.md +43 -723
  22. package/components/combobox/demo/index.min.js +301 -230
  23. package/components/combobox/demo/readme.html +3 -4
  24. package/components/combobox/demo/readme.md +76 -74
  25. package/components/combobox/dist/auro-combobox.d.ts +39 -40
  26. package/components/combobox/dist/index.js +159 -143
  27. package/components/combobox/dist/registered.js +159 -143
  28. package/components/counter/README.md +81 -66
  29. package/components/counter/demo/api.html +1 -2
  30. package/components/counter/demo/api.js +2 -2
  31. package/components/counter/demo/api.md +777 -259
  32. package/components/counter/demo/api.min.js +84 -112
  33. package/components/counter/demo/index.html +0 -2
  34. package/components/counter/demo/index.md +20 -329
  35. package/components/counter/demo/index.min.js +82 -93
  36. package/components/counter/demo/readme.html +3 -4
  37. package/components/counter/demo/readme.md +81 -66
  38. package/components/counter/dist/auro-counter-group.d.ts +21 -36
  39. package/components/counter/dist/auro-counter-wrapper.d.ts +1 -6
  40. package/components/counter/dist/auro-counter.d.ts +5 -8
  41. package/components/counter/dist/index.js +82 -93
  42. package/components/counter/dist/registered.js +82 -93
  43. package/components/datepicker/README.md +57 -61
  44. package/components/datepicker/demo/api.js +8 -8
  45. package/components/datepicker/demo/api.md +720 -561
  46. package/components/datepicker/demo/api.min.js +427 -2424
  47. package/components/datepicker/demo/index.md +65 -117
  48. package/components/datepicker/demo/index.min.js +427 -2424
  49. package/components/datepicker/demo/readme.html +3 -4
  50. package/components/datepicker/demo/readme.md +57 -61
  51. package/components/datepicker/dist/auro-calendar.d.ts +60 -34
  52. package/components/datepicker/dist/auro-datepicker.d.ts +31 -31
  53. package/components/datepicker/dist/index.js +256 -2253
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +256 -2253
  56. package/components/dropdown/README.md +78 -62
  57. package/components/dropdown/demo/api.js +4 -4
  58. package/components/dropdown/demo/api.md +520 -478
  59. package/components/dropdown/demo/api.min.js +48 -39
  60. package/components/dropdown/demo/index.md +65 -119
  61. package/components/dropdown/demo/index.min.js +38 -29
  62. package/components/dropdown/demo/readme.html +3 -4
  63. package/components/dropdown/demo/readme.md +78 -62
  64. package/components/dropdown/dist/auro-dropdown.d.ts +42 -33
  65. package/components/dropdown/dist/index.js +38 -29
  66. package/components/dropdown/dist/registered.js +38 -29
  67. package/components/form/README.md +16 -58
  68. package/components/form/demo/api.md +16 -21
  69. package/components/form/demo/api.min.js +13 -8
  70. package/components/form/demo/index.md +38 -39
  71. package/components/form/demo/index.min.js +13 -8
  72. package/components/form/demo/readme.md +16 -58
  73. package/components/form/dist/auro-form.d.ts +15 -3
  74. package/components/form/dist/index.js +13 -8
  75. package/components/form/dist/registered.js +13 -8
  76. package/components/input/README.md +55 -60
  77. package/components/input/demo/api.js +3 -5
  78. package/components/input/demo/api.md +558 -537
  79. package/components/input/demo/api.min.js +100 -113
  80. package/components/input/demo/index.js +0 -1
  81. package/components/input/demo/index.md +90 -203
  82. package/components/input/demo/index.min.js +85 -97
  83. package/components/input/demo/readme.html +3 -4
  84. package/components/input/demo/readme.md +55 -60
  85. package/components/input/dist/auro-input.d.ts +6 -5
  86. package/components/input/dist/base-input.d.ts +67 -68
  87. package/components/input/dist/index.js +85 -80
  88. package/components/input/dist/registered.js +85 -80
  89. package/components/menu/README.md +61 -61
  90. package/components/menu/demo/api.js +6 -8
  91. package/components/menu/demo/api.md +520 -572
  92. package/components/menu/demo/api.min.js +176 -92
  93. package/components/menu/demo/index.js +0 -5
  94. package/components/menu/demo/index.md +36 -119
  95. package/components/menu/demo/index.min.js +141 -96
  96. package/components/menu/demo/readme.html +3 -4
  97. package/components/menu/demo/readme.md +61 -61
  98. package/components/menu/dist/auro-menu.d.ts +70 -37
  99. package/components/menu/dist/auro-menuoption.d.ts +36 -11
  100. package/components/menu/dist/index.js +141 -45
  101. package/components/menu/dist/registered.js +141 -45
  102. package/components/radio/README.md +61 -57
  103. package/components/radio/demo/api.js +2 -2
  104. package/components/radio/demo/api.md +241 -170
  105. package/components/radio/demo/api.min.js +154 -77
  106. package/components/radio/demo/index.md +22 -99
  107. package/components/radio/demo/index.min.js +145 -68
  108. package/components/radio/demo/readme.html +3 -4
  109. package/components/radio/demo/readme.md +61 -57
  110. package/components/radio/dist/auro-radio-group.d.ts +67 -35
  111. package/components/radio/dist/auro-radio.d.ts +56 -33
  112. package/components/radio/dist/index.js +145 -68
  113. package/components/radio/dist/registered.js +145 -68
  114. package/components/select/README.md +68 -65
  115. package/components/select/demo/api.html +1 -0
  116. package/components/select/demo/api.js +7 -7
  117. package/components/select/demo/api.md +1305 -625
  118. package/components/select/demo/api.min.js +300 -199
  119. package/components/select/demo/index.html +0 -2
  120. package/components/select/demo/index.md +25 -833
  121. package/components/select/demo/index.min.js +299 -167
  122. package/components/select/demo/readme.html +3 -4
  123. package/components/select/demo/readme.md +68 -65
  124. package/components/select/dist/auro-select.d.ts +99 -90
  125. package/components/select/dist/index.js +158 -122
  126. package/components/select/dist/registered.js +158 -122
  127. package/package.json +3 -3
package/components/datepicker/demo/index.md CHANGED
@@ -1,3 +1,9 @@
1
+ <!--
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
+ -->
6
+
1
7
  # Datepicker
2
8
 
3
9
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
@@ -5,7 +11,7 @@
5
11
  The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
6
12
  <!-- AURO-GENERATED-CONTENT:END -->
7
13
 
8
- ## auro-datepicker use cases
14
+ ## Use Cases
9
15
 
10
16
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
11
17
  <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
@@ -15,29 +21,15 @@ The `<auro-datepicker>` element should be used in situations where users may:
15
21
  * select a pair of dates which identify a calendar range
16
22
  <!-- AURO-GENERATED-CONTENT:END -->
17
23
 
18
- ## Examples
24
+ ## Example(s)
19
25
 
20
- ### Snowflake layout
26
+ ### Basic
21
27
 
22
- #### Single date
23
- <div class="exampleWrapper--ondark" style="width: 306px">
24
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/inverseAppearance.html) -->
25
- <!-- The below content is automatically added from ./../apiExamples/snowflake/inverseAppearance.html -->
26
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
27
- <span slot="ariaLabel.bib.close">Close Calendar</span>
28
- <span slot="label">Date</span>
29
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
30
- <span slot="fromLabel">Choose a date</span>
31
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
32
- </auro-datepicker>
33
- <!-- AURO-GENERATED-CONTENT:END -->
34
- </div>
35
- <div class="exampleWrapper--ondark">
36
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/inverseAppearance.html) -->
37
- <!-- The below content is automatically added from ./../apiExamples/snowflake/inverseAppearance.html -->
38
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
28
+ <div class="exampleWrapper">
29
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
30
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
31
+ <auro-datepicker>
39
32
  <span slot="ariaLabel.bib.close">Close Calendar</span>
40
- <span slot="label">Date</span>
41
33
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
42
34
  <span slot="fromLabel">Choose a date</span>
43
35
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -46,13 +38,12 @@ The `<auro-datepicker>` element should be used in situations where users may:
46
38
  </div>
47
39
  <auro-accordion alignRight>
48
40
  <span slot="trigger">See code</span>
49
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/inverseAppearance.html) -->
50
- <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/inverseAppearance.html -->
41
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
42
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
51
43
 
52
44
  ```html
53
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
45
+ <auro-datepicker>
54
46
  <span slot="ariaLabel.bib.close">Close Calendar</span>
55
- <span slot="label">Date</span>
56
47
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
57
48
  <span slot="fromLabel">Choose a date</span>
58
49
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -61,66 +52,49 @@ The `<auro-datepicker>` element should be used in situations where users may:
61
52
  <!-- AURO-GENERATED-CONTENT:END -->
62
53
  </auro-accordion>
63
54
 
64
- #### Range
65
- <div class="exampleWrapper--ondark" style="width: 306px">
66
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/inverseAppearance-range.html) -->
67
- <!-- The below content is automatically added from ./../apiExamples/snowflake/inverseAppearance-range.html -->
68
- <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY" dvInputOnly>
69
- <span slot="ariaLabel.bib.close">Close Calendar</span>
70
- <span slot="label">Dates</span>
71
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
72
- <span slot="fromLabel">Choose a date</span>
73
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
74
- </auro-datepicker>
75
- <!-- AURO-GENERATED-CONTENT:END -->
76
- </div>
77
- <div class="exampleWrapper--ondark">
78
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/inverseAppearance-range.html) -->
79
- <!-- The below content is automatically added from ./../apiExamples/snowflake/inverseAppearance-range.html -->
80
- <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY" dvInputOnly>
55
+ ### Range
56
+
57
+ The datepicker can also be used to select a range between two dates by adding the `range` attribute.
58
+
59
+ <div class="exampleWrapper">
60
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
61
+ <!-- The below content is automatically added from ./../apiExamples/range.html -->
62
+ <auro-datepicker range>
81
63
  <span slot="ariaLabel.bib.close">Close Calendar</span>
82
- <span slot="label">Dates</span>
83
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
84
- <span slot="fromLabel">Choose a date</span>
85
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
64
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
65
+ <span slot="fromLabel">Departure</span>
66
+ <span slot="toLabel">Return</span>
67
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
86
68
  </auro-datepicker>
87
69
  <!-- AURO-GENERATED-CONTENT:END -->
88
70
  </div>
89
71
  <auro-accordion alignRight>
90
72
  <span slot="trigger">See code</span>
91
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/inverseAppearance-range.html) -->
92
- <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/inverseAppearance-range.html -->
73
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
74
+ <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
93
75
 
94
76
  ```html
95
- <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY" dvInputOnly>
77
+ <auro-datepicker range>
96
78
  <span slot="ariaLabel.bib.close">Close Calendar</span>
97
- <span slot="label">Dates</span>
98
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
99
- <span slot="fromLabel">Choose a date</span>
100
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
79
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
80
+ <span slot="fromLabel">Departure</span>
81
+ <span slot="toLabel">Return</span>
82
+ <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
101
83
  </auro-datepicker>
102
84
  ```
103
85
  <!-- AURO-GENERATED-CONTENT:END -->
104
86
  </auro-accordion>
105
87
 
106
- ### Basic
88
+ ### Snowflake Layout
107
89
 
108
- <div class="exampleWrapper">
109
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
110
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
111
- <auro-datepicker required="">
112
- <span slot="ariaLabel.bib.close">Close Calendar</span>
113
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
114
- <span slot="fromLabel">Choose a date</span>
115
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
116
- </auro-datepicker>
117
- <!-- AURO-GENERATED-CONTENT:END -->
118
- </div>
119
- <div class="exampleWrapper--ondark" aria-hidden>
120
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
121
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
122
- <auro-datepicker appearance="inverse">
90
+ Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake layout to the datepicker. This layout is designed for use on dark backgrounds.
91
+
92
+ <div class="exampleWrapper--ondark">
93
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
94
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
95
+ <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
123
96
  <span slot="ariaLabel.bib.close">Close Calendar</span>
97
+ <span slot="label">Date</span>
124
98
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
125
99
  <span slot="fromLabel">Choose a date</span>
126
100
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -129,76 +103,50 @@ The `<auro-datepicker>` element should be used in situations where users may:
129
103
  </div>
130
104
  <auro-accordion alignRight>
131
105
  <span slot="trigger">See code</span>
132
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
133
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
106
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
107
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
134
108
 
135
109
  ```html
136
- <auro-datepicker required="">
110
+ <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
137
111
  <span slot="ariaLabel.bib.close">Close Calendar</span>
112
+ <span slot="label">Date</span>
138
113
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
139
114
  <span slot="fromLabel">Choose a date</span>
140
115
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
141
116
  </auro-datepicker>
142
117
  ```
143
118
  <!-- AURO-GENERATED-CONTENT:END -->
144
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
145
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
146
- <auro-datepicker appearance="inverse">
147
- <span slot="ariaLabel.bib.close">Close Calendar</span>
148
- <span slot="bib.fullscreen.headline">Datepicker Headline</span>
149
- <span slot="fromLabel">Choose a date</span>
150
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
151
- </auro-datepicker>
152
- <!-- AURO-GENERATED-CONTENT:END -->
153
119
  </auro-accordion>
154
120
 
155
- ### Range
121
+ #### Range
156
122
 
157
- <div class="exampleWrapper">
158
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
159
- <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
160
- <auro-datepicker range minDate="07/08/2025">
123
+ Ranged variation of the snowflake layout.
124
+
125
+ <div class="exampleWrapper--ondark">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/range.html) -->
127
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/range.html -->
128
+ <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
161
129
  <span slot="ariaLabel.bib.close">Close Calendar</span>
162
- <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
163
- <span slot="fromLabel">Departure</span>
164
- <span slot="toLabel">Return</span>
165
- <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
166
- </auro-datepicker>
167
- <!-- AURO-GENERATED-CONTENT:END -->
168
- </div>
169
- <div class="exampleWrapper--ondark" aria-hidden>
170
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceRange.html) -->
171
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceRange.html -->
172
- <auro-datepicker appearance="inverse" range>
173
- <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
174
- <span slot="fromLabel">Departure</span>
175
- <span slot="toLabel">Return</span>
176
- <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
130
+ <span slot="label">Dates</span>
131
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
132
+ <span slot="fromLabel">Choose a date</span>
133
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
177
134
  </auro-datepicker>
178
135
  <!-- AURO-GENERATED-CONTENT:END -->
179
136
  </div>
180
137
  <auro-accordion alignRight>
181
138
  <span slot="trigger">See code</span>
182
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
183
- <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
139
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/range.html) -->
140
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/range.html -->
184
141
 
185
142
  ```html
186
- <auro-datepicker range minDate="07/08/2025">
143
+ <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
187
144
  <span slot="ariaLabel.bib.close">Close Calendar</span>
188
- <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
189
- <span slot="fromLabel">Departure</span>
190
- <span slot="toLabel">Return</span>
191
- <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
145
+ <span slot="label">Dates</span>
146
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
147
+ <span slot="fromLabel">Choose a date</span>
148
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
192
149
  </auro-datepicker>
193
150
  ```
194
151
  <!-- AURO-GENERATED-CONTENT:END -->
195
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceRange.html) -->
196
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceRange.html -->
197
- <auro-datepicker appearance="inverse" range>
198
- <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
199
- <span slot="fromLabel">Departure</span>
200
- <span slot="toLabel">Return</span>
201
- <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
202
- </auro-datepicker>
203
- <!-- AURO-GENERATED-CONTENT:END -->
204
152
  </auro-accordion>