@aurodesignsystem/auro-formkit 5.9.0 → 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 (136) hide show
  1. package/CHANGELOG.md +13 -4
  2. package/README.md +4 -4
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +2 -2
  5. package/components/bibtemplate/dist/registered.js +2 -2
  6. package/components/checkbox/README.md +62 -62
  7. package/components/checkbox/demo/api.js +1 -1
  8. package/components/checkbox/demo/api.md +127 -84
  9. package/components/checkbox/demo/api.min.js +125 -42
  10. package/components/checkbox/demo/index.md +9 -281
  11. package/components/checkbox/demo/index.min.js +125 -42
  12. package/components/checkbox/demo/readme.html +3 -4
  13. package/components/checkbox/demo/readme.md +62 -62
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +7 -8
  15. package/components/checkbox/dist/auro-checkbox.d.ts +74 -20
  16. package/components/checkbox/dist/index.js +125 -42
  17. package/components/checkbox/dist/registered.js +125 -42
  18. package/components/combobox/README.md +76 -74
  19. package/components/combobox/demo/api.html +1 -0
  20. package/components/combobox/demo/api.js +11 -12
  21. package/components/combobox/demo/api.md +1302 -875
  22. package/components/combobox/demo/api.min.js +416 -492
  23. package/components/combobox/demo/index.html +1 -7
  24. package/components/combobox/demo/index.js +0 -19
  25. package/components/combobox/demo/index.md +43 -723
  26. package/components/combobox/demo/index.min.js +369 -302
  27. package/components/combobox/demo/readme.html +3 -4
  28. package/components/combobox/demo/readme.md +76 -74
  29. package/components/combobox/dist/auro-combobox.d.ts +42 -42
  30. package/components/combobox/dist/index.js +204 -210
  31. package/components/combobox/dist/registered.js +204 -210
  32. package/components/counter/README.md +81 -66
  33. package/components/counter/demo/api.html +1 -2
  34. package/components/counter/demo/api.js +2 -2
  35. package/components/counter/demo/api.md +777 -259
  36. package/components/counter/demo/api.min.js +119 -171
  37. package/components/counter/demo/index.html +0 -2
  38. package/components/counter/demo/index.md +20 -329
  39. package/components/counter/demo/index.min.js +117 -152
  40. package/components/counter/demo/readme.html +3 -4
  41. package/components/counter/demo/readme.md +81 -66
  42. package/components/counter/dist/auro-counter-group.d.ts +21 -36
  43. package/components/counter/dist/auro-counter-wrapper.d.ts +1 -6
  44. package/components/counter/dist/auro-counter.d.ts +5 -8
  45. package/components/counter/dist/index.js +117 -152
  46. package/components/counter/dist/registered.js +117 -152
  47. package/components/datepicker/README.md +57 -61
  48. package/components/datepicker/demo/api.js +8 -8
  49. package/components/datepicker/demo/api.md +720 -561
  50. package/components/datepicker/demo/api.min.js +678 -2769
  51. package/components/datepicker/demo/index.md +65 -117
  52. package/components/datepicker/demo/index.min.js +678 -2769
  53. package/components/datepicker/demo/readme.html +3 -4
  54. package/components/datepicker/demo/readme.md +57 -61
  55. package/components/datepicker/dist/auro-calendar.d.ts +60 -34
  56. package/components/datepicker/dist/auro-datepicker.d.ts +32 -32
  57. package/components/datepicker/dist/iconVersion.d.ts +1 -1
  58. package/components/datepicker/dist/index.js +505 -2596
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +505 -2596
  61. package/components/dropdown/README.md +78 -62
  62. package/components/dropdown/demo/api.js +4 -4
  63. package/components/dropdown/demo/api.md +520 -478
  64. package/components/dropdown/demo/api.min.js +80 -95
  65. package/components/dropdown/demo/index.md +65 -119
  66. package/components/dropdown/demo/index.min.js +70 -85
  67. package/components/dropdown/demo/readme.html +3 -4
  68. package/components/dropdown/demo/readme.md +78 -62
  69. package/components/dropdown/dist/auro-dropdown.d.ts +42 -33
  70. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  71. package/components/dropdown/dist/index.js +70 -85
  72. package/components/dropdown/dist/registered.js +70 -85
  73. package/components/form/README.md +16 -58
  74. package/components/form/demo/api.md +16 -21
  75. package/components/form/demo/api.min.js +13 -8
  76. package/components/form/demo/index.md +38 -39
  77. package/components/form/demo/index.min.js +13 -8
  78. package/components/form/demo/readme.md +16 -58
  79. package/components/form/demo/working.html +1 -1
  80. package/components/form/dist/auro-form.d.ts +15 -3
  81. package/components/form/dist/index.js +13 -8
  82. package/components/form/dist/registered.js +13 -8
  83. package/components/input/README.md +55 -60
  84. package/components/input/demo/api.js +3 -5
  85. package/components/input/demo/api.md +558 -537
  86. package/components/input/demo/api.min.js +102 -115
  87. package/components/input/demo/index.js +0 -1
  88. package/components/input/demo/index.md +90 -203
  89. package/components/input/demo/index.min.js +87 -99
  90. package/components/input/demo/readme.html +3 -4
  91. package/components/input/demo/readme.md +55 -60
  92. package/components/input/dist/auro-input.d.ts +6 -5
  93. package/components/input/dist/base-input.d.ts +68 -69
  94. package/components/input/dist/iconVersion.d.ts +1 -1
  95. package/components/input/dist/index.js +87 -82
  96. package/components/input/dist/registered.js +87 -82
  97. package/components/menu/README.md +61 -61
  98. package/components/menu/demo/api.js +6 -8
  99. package/components/menu/demo/api.md +520 -577
  100. package/components/menu/demo/api.min.js +199 -97
  101. package/components/menu/demo/index.js +0 -5
  102. package/components/menu/demo/index.md +36 -119
  103. package/components/menu/demo/index.min.js +164 -101
  104. package/components/menu/demo/readme.html +3 -4
  105. package/components/menu/demo/readme.md +61 -61
  106. package/components/menu/dist/auro-menu.context.d.ts +5 -0
  107. package/components/menu/dist/auro-menu.d.ts +75 -37
  108. package/components/menu/dist/auro-menuoption.d.ts +38 -13
  109. package/components/menu/dist/index.js +164 -50
  110. package/components/menu/dist/registered.js +164 -50
  111. package/components/radio/README.md +61 -57
  112. package/components/radio/demo/api.js +2 -2
  113. package/components/radio/demo/api.md +241 -170
  114. package/components/radio/demo/api.min.js +154 -77
  115. package/components/radio/demo/index.md +22 -99
  116. package/components/radio/demo/index.min.js +145 -68
  117. package/components/radio/demo/readme.html +3 -4
  118. package/components/radio/demo/readme.md +61 -57
  119. package/components/radio/dist/auro-radio-group.d.ts +67 -35
  120. package/components/radio/dist/auro-radio.d.ts +56 -33
  121. package/components/radio/dist/index.js +145 -68
  122. package/components/radio/dist/registered.js +145 -68
  123. package/components/select/README.md +68 -65
  124. package/components/select/demo/api.html +1 -0
  125. package/components/select/demo/api.js +7 -7
  126. package/components/select/demo/api.md +1305 -625
  127. package/components/select/demo/api.min.js +357 -262
  128. package/components/select/demo/index.html +0 -2
  129. package/components/select/demo/index.md +25 -833
  130. package/components/select/demo/index.min.js +356 -230
  131. package/components/select/demo/readme.html +3 -4
  132. package/components/select/demo/readme.md +68 -65
  133. package/components/select/dist/auro-select.d.ts +99 -90
  134. package/components/select/dist/index.js +192 -180
  135. package/components/select/dist/registered.js +192 -180
  136. package/package.json +9 -4
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>