@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.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 (231) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +66 -0
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  5. package/components/bibtemplate/dist/index.d.ts +2 -0
  6. package/components/bibtemplate/dist/index.js +395 -0
  7. package/components/bibtemplate/dist/registered.js +395 -0
  8. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  9. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  10. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  11. package/components/checkbox/demo/api.md +489 -0
  12. package/components/checkbox/demo/api.min.js +2133 -0
  13. package/components/checkbox/demo/index.md +55 -0
  14. package/components/checkbox/demo/index.min.js +2108 -0
  15. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  16. package/components/checkbox/demo/readme.md +142 -0
  17. package/components/checkbox/dist/auro-checkbox-group.d.ts +176 -0
  18. package/components/checkbox/dist/auro-checkbox.d.ts +209 -0
  19. package/components/checkbox/dist/index.d.ts +3 -0
  20. package/components/checkbox/dist/index.js +2057 -0
  21. package/components/checkbox/dist/registered.js +2058 -0
  22. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  23. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  24. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  25. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  26. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  27. package/components/combobox/demo/api.md +2287 -0
  28. package/components/combobox/demo/api.min.js +18025 -0
  29. package/components/combobox/demo/index.md +196 -0
  30. package/components/combobox/demo/index.min.js +17930 -0
  31. package/components/combobox/demo/keyboardBehavior.md +281 -0
  32. package/components/combobox/demo/readme.md +158 -0
  33. package/components/combobox/dist/auro-combobox.d.ts +578 -0
  34. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +9 -0
  35. package/components/combobox/dist/index.d.ts +2 -0
  36. package/components/combobox/dist/index.js +15845 -0
  37. package/components/combobox/dist/registered.js +15847 -0
  38. package/components/combobox/dist/styles/emphasized/style-css.d.ts +2 -0
  39. package/components/combobox/dist/styles/snowflake/style-css.d.ts +2 -0
  40. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  41. package/components/counter/demo/api.md +1285 -0
  42. package/components/counter/demo/api.min.js +8237 -0
  43. package/components/counter/demo/index.md +92 -0
  44. package/components/counter/demo/index.min.js +8218 -0
  45. package/components/counter/demo/keyboardBehavior.md +127 -0
  46. package/components/counter/demo/readme.md +161 -0
  47. package/components/counter/dist/auro-counter-button.d.ts +14 -0
  48. package/components/counter/dist/auro-counter-group.d.ts +390 -0
  49. package/components/counter/dist/auro-counter-wrapper.d.ts +17 -0
  50. package/components/counter/dist/auro-counter.d.ts +136 -0
  51. package/components/counter/dist/buttonVersion.d.ts +2 -0
  52. package/components/counter/dist/iconVersion.d.ts +2 -0
  53. package/components/counter/dist/index.d.ts +3 -0
  54. package/components/counter/dist/index.js +8140 -0
  55. package/components/counter/dist/keyboardStrategy.d.ts +4 -0
  56. package/components/counter/dist/registered.js +8141 -0
  57. package/components/counter/dist/styles/color-css.d.ts +2 -0
  58. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  59. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  60. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  61. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  62. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  63. package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
  64. package/components/counter/dist/styles/style-css.d.ts +2 -0
  65. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  66. package/components/datepicker/demo/api.md +1824 -0
  67. package/components/datepicker/demo/api.min.js +24654 -0
  68. package/components/datepicker/demo/index.md +158 -0
  69. package/components/datepicker/demo/index.min.js +24375 -0
  70. package/components/datepicker/demo/keyboardBehavior.md +19 -0
  71. package/components/datepicker/demo/readme.md +137 -0
  72. package/components/datepicker/dist/auro-calendar-cell.d.ts +169 -0
  73. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  74. package/components/datepicker/dist/auro-calendar.d.ts +173 -0
  75. package/components/datepicker/dist/auro-datepicker.d.ts +716 -0
  76. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  77. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +1 -0
  78. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  79. package/components/datepicker/dist/index.d.ts +2 -0
  80. package/components/datepicker/dist/index.js +24290 -0
  81. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  82. package/components/datepicker/dist/registered.js +24290 -0
  83. package/components/datepicker/dist/styles/classic/color-css.d.ts +2 -0
  84. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  85. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  86. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  87. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  88. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  89. package/components/datepicker/dist/styles/shapeSize-css.d.ts +2 -0
  90. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +2 -0
  91. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
  92. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  93. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  94. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  95. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  96. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  97. package/components/datepicker/dist/utilities.d.ts +78 -0
  98. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  99. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  100. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  101. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  104. package/components/dropdown/demo/api.md +1358 -0
  105. package/components/dropdown/demo/api.min.js +5019 -0
  106. package/components/dropdown/demo/index.md +283 -0
  107. package/components/dropdown/demo/index.min.js +4954 -0
  108. package/components/dropdown/demo/keyboardBehavior.md +77 -0
  109. package/components/dropdown/demo/readme.md +160 -0
  110. package/components/dropdown/dist/auro-dropdown.d.ts +482 -0
  111. package/components/dropdown/dist/auro-dropdownBib.d.ts +128 -0
  112. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
  113. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  114. package/components/dropdown/dist/index.d.ts +2 -0
  115. package/components/dropdown/dist/index.js +4847 -0
  116. package/components/dropdown/dist/registered.js +4847 -0
  117. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +2 -0
  118. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +2 -0
  119. package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
  120. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  121. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  122. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  123. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  124. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  125. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  126. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  127. package/components/form/demo/api.md +319 -0
  128. package/components/form/demo/api.min.js +71170 -0
  129. package/components/form/demo/index.md +128 -0
  130. package/components/form/demo/index.min.js +71170 -0
  131. package/components/form/demo/keyboardBehavior.md +0 -0
  132. package/components/form/demo/readme.md +145 -0
  133. package/components/form/dist/auro-form.d.ts +280 -0
  134. package/components/form/dist/index.d.ts +2 -0
  135. package/components/form/dist/index.js +718 -0
  136. package/components/form/dist/registered.d.ts +1 -0
  137. package/components/form/dist/registered.js +718 -0
  138. package/components/form/dist/styles/style-css.d.ts +2 -0
  139. package/components/helptext/dist/auro-helptext.d.ts +69 -0
  140. package/components/helptext/dist/index.d.ts +2 -0
  141. package/components/helptext/dist/index.js +231 -0
  142. package/components/helptext/dist/registered.js +231 -0
  143. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  144. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  145. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  146. package/components/input/demo/api.md +1397 -0
  147. package/components/input/demo/api.min.js +7473 -0
  148. package/components/input/demo/index.md +161 -0
  149. package/components/input/demo/index.min.js +7393 -0
  150. package/components/input/demo/keyboardBehavior.md +0 -0
  151. package/components/input/demo/readme.md +134 -0
  152. package/components/input/dist/auro-input.d.ts +207 -0
  153. package/components/input/dist/base-input.d.ts +628 -0
  154. package/components/input/dist/buttonVersion.d.ts +2 -0
  155. package/components/input/dist/i18n.d.ts +18 -0
  156. package/components/input/dist/iconVersion.d.ts +2 -0
  157. package/components/input/dist/index.d.ts +2 -0
  158. package/components/input/dist/index.js +7305 -0
  159. package/components/input/dist/registered.js +7305 -0
  160. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  161. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  162. package/components/input/dist/styles/color-css.d.ts +2 -0
  163. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  164. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  165. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  166. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  167. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  168. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  169. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  170. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  171. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  172. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  173. package/components/input/dist/styles/style-css.d.ts +2 -0
  174. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  175. package/components/input/dist/utilities.d.ts +25 -0
  176. package/components/layoutElement/dist/auroElement.d.ts +40 -0
  177. package/components/layoutElement/dist/index.d.ts +2 -0
  178. package/components/layoutElement/dist/index.js +107 -0
  179. package/components/layoutElement/dist/registered.js +107 -0
  180. package/components/menu/demo/api.md +1201 -0
  181. package/components/menu/demo/api.min.js +2397 -0
  182. package/components/menu/demo/index.md +72 -0
  183. package/components/menu/demo/index.min.js +2290 -0
  184. package/components/menu/demo/keyboardBehavior.md +0 -0
  185. package/components/menu/demo/readme.md +145 -0
  186. package/components/menu/dist/auro-menu-utils.d.ts +34 -0
  187. package/components/menu/dist/auro-menu.context.d.ts +239 -0
  188. package/components/menu/dist/auro-menu.d.ts +317 -0
  189. package/components/menu/dist/auro-menuoption.d.ts +210 -0
  190. package/components/menu/dist/iconVersion.d.ts +2 -0
  191. package/components/menu/dist/index.d.ts +4 -0
  192. package/components/menu/dist/index.js +2253 -0
  193. package/components/menu/dist/registered.js +2201 -0
  194. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  195. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  196. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  197. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  198. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  199. package/components/radio/demo/api.md +675 -0
  200. package/components/radio/demo/api.min.js +2210 -0
  201. package/components/radio/demo/index.md +73 -0
  202. package/components/radio/demo/index.min.js +2167 -0
  203. package/components/radio/demo/keyboardBehavior.md +0 -0
  204. package/components/radio/demo/readme.md +141 -0
  205. package/components/radio/dist/auro-radio-group.d.ts +250 -0
  206. package/components/radio/dist/auro-radio.d.ts +180 -0
  207. package/components/radio/dist/index.d.ts +3 -0
  208. package/components/radio/dist/index.js +2116 -0
  209. package/components/radio/dist/registered.js +2117 -0
  210. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  211. package/components/radio/dist/styles/color-css.d.ts +2 -0
  212. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  213. package/components/radio/dist/styles/style-css.d.ts +2 -0
  214. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  215. package/components/select/demo/api.md +2378 -0
  216. package/components/select/demo/api.min.js +10542 -0
  217. package/components/select/demo/index.md +355 -0
  218. package/components/select/demo/index.min.js +10449 -0
  219. package/components/select/demo/keyboardBehavior.md +245 -0
  220. package/components/select/demo/readme.md +148 -0
  221. package/components/select/dist/auro-select.d.ts +553 -0
  222. package/components/select/dist/index.d.ts +2 -0
  223. package/components/select/dist/index.js +8376 -0
  224. package/components/select/dist/registered.js +8376 -0
  225. package/components/select/dist/selectKeyboardStrategy.d.ts +11 -0
  226. package/components/select/dist/styles/emphasized/color-css.d.ts +2 -0
  227. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  228. package/components/select/dist/styles/style-css.d.ts +2 -0
  229. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  230. package/custom-elements.json +18806 -0
  231. package/package.json +2 -2
package/components/datepicker/demo/index.md ADDED
@@ -0,0 +1,158 @@
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
+
7
+ # Datepicker
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
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).
12
+ <!-- AURO-GENERATED-CONTENT:END -->
13
+
14
+ ## Use Cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
+ The `<auro-datepicker>` element should be used in situations where users may:
19
+
20
+ * select a single date
21
+ * select a pair of dates which identify a calendar range
22
+ <!-- AURO-GENERATED-CONTENT:END -->
23
+
24
+ ## Example(s)
25
+
26
+ ### Basic
27
+
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>
32
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
33
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
34
+ <span slot="fromLabel">Choose a date</span>
35
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
36
+ </auro-datepicker>
37
+ <!-- AURO-GENERATED-CONTENT:END -->
38
+ </div>
39
+ <auro-accordion alignRight>
40
+ <span slot="trigger">See code</span>
41
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
42
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
43
+
44
+ ```html
45
+ <auro-datepicker>
46
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
47
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
48
+ <span slot="fromLabel">Choose a date</span>
49
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
50
+ </auro-datepicker>
51
+ ```
52
+ <!-- AURO-GENERATED-CONTENT:END -->
53
+ </auro-accordion>
54
+
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>
63
+ <span slot="ariaLabel.bib.close">Close Calendar</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.fromLabel">Departure</span>
68
+ <span slot="bib.fullscreen.toLabel">Return</span>
69
+ </auro-datepicker>
70
+ <!-- AURO-GENERATED-CONTENT:END -->
71
+ </div>
72
+ <auro-accordion alignRight>
73
+ <span slot="trigger">See code</span>
74
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
75
+ <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
76
+
77
+ ```html
78
+ <auro-datepicker range>
79
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
80
+ <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
81
+ <span slot="fromLabel">Departure</span>
82
+ <span slot="toLabel">Return</span>
83
+ <span slot="bib.fullscreen.fromLabel">Departure</span>
84
+ <span slot="bib.fullscreen.toLabel">Return</span>
85
+ </auro-datepicker>
86
+ ```
87
+ <!-- AURO-GENERATED-CONTENT:END -->
88
+ </auro-accordion>
89
+
90
+ ### Snowflake Layout
91
+
92
+ 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.
93
+
94
+ <div class="exampleWrapper--ondark">
95
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
96
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
97
+ <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
98
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
99
+ <span slot="label">Date</span>
100
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
101
+ <span slot="fromLabel">Choose a date</span>
102
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
103
+ </auro-datepicker>
104
+ <!-- AURO-GENERATED-CONTENT:END -->
105
+ </div>
106
+ <auro-accordion alignRight>
107
+ <span slot="trigger">See code</span>
108
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
109
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
110
+
111
+ ```html
112
+ <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
113
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
114
+ <span slot="label">Date</span>
115
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
116
+ <span slot="fromLabel">Choose a date</span>
117
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
118
+ </auro-datepicker>
119
+ ```
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </auro-accordion>
122
+
123
+ #### Range
124
+
125
+ Ranged variation of the snowflake layout.
126
+
127
+ <div class="exampleWrapper--ondark">
128
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/range.html) -->
129
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/range.html -->
130
+ <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
131
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
132
+ <span slot="fromLabel">From Date Test</span>
133
+ <span slot="toLabel">To Date Test</span>
134
+ <span slot="label">Testing Date Label</span>
135
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
136
+ <span slot="bib.fullscreen.fromLabel">Choose a departing date</span>
137
+ <span slot="bib.fullscreen.toLabel">Choose a returning date</span>
138
+ </auro-datepicker>
139
+ <!-- AURO-GENERATED-CONTENT:END -->
140
+ </div>
141
+ <auro-accordion alignRight>
142
+ <span slot="trigger">See code</span>
143
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/range.html) -->
144
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/range.html -->
145
+
146
+ ```html
147
+ <auro-datepicker range layout="snowflake" shape="snowflake" appearance="inverse" placeholder="MM/DD/YYYY">
148
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
149
+ <span slot="fromLabel">From Date Test</span>
150
+ <span slot="toLabel">To Date Test</span>
151
+ <span slot="label">Testing Date Label</span>
152
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
153
+ <span slot="bib.fullscreen.fromLabel">Choose a departing date</span>
154
+ <span slot="bib.fullscreen.toLabel">Choose a returning date</span>
155
+ </auro-datepicker>
156
+ ```
157
+ <!-- AURO-GENERATED-CONTENT:END -->
158
+ </auro-accordion>