@aurodesignsystem-dev/auro-datetime 0.0.0-pr93.0 → 0.0.0-pr95.0

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 (7) hide show
  1. package/demo/api.md +142 -116
  2. package/demo/api.min.js +1 -606
  3. package/demo/auro-datetime.min.js +608 -0
  4. package/demo/index.md +16 -12
  5. package/demo/index.min.js +1 -606
  6. package/package.json +1 -1
  7. package/demo/readme.md +0 -116
package/demo/api.md CHANGED
@@ -33,34 +33,38 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
33
33
  ## Basic Date
34
34
 
35
35
  <div class="exampleWrapper">
36
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
37
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
38
- <auro-datetime type="date"></auro-datetime>
39
- <!-- AURO-GENERATED-CONTENT:END -->
36
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
37
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
38
+ <auro-datetime type="date"></auro-datetime>
39
+ <!-- AURO-GENERATED-CONTENT:END -->
40
40
  </div>
41
41
  <auro-accordion alignRight>
42
- <span slot="trigger">See code</span>
42
+ <span slot="trigger">See code</span>
43
43
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
44
44
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
45
45
 
46
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="date"&gt;&lt;/auro-datetime&gt;</code></pre>
46
+ ```html
47
+ <auro-datetime type="date"></auro-datetime>
48
+ ```
47
49
  <!-- AURO-GENERATED-CONTENT:END -->
48
50
  </auro-accordion>
49
51
 
50
52
  ## Basic Time
51
53
 
52
54
  <div class="exampleWrapper">
53
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
54
- <!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
55
- <auro-datetime type="time"></auro-datetime>
56
- <!-- AURO-GENERATED-CONTENT:END -->
55
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
56
+ <!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
57
+ <auro-datetime type="time"></auro-datetime>
58
+ <!-- AURO-GENERATED-CONTENT:END -->
57
59
  </div>
58
60
  <auro-accordion alignRight>
59
- <span slot="trigger">See code</span>
61
+ <span slot="trigger">See code</span>
60
62
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
61
63
  <!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
62
64
 
63
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="time"&gt;&lt;/auro-datetime&gt;</code></pre>
65
+ ```html
66
+ <auro-datetime type="time"></auro-datetime>
67
+ ```
64
68
  <!-- AURO-GENERATED-CONTENT:END -->
65
69
  </auro-accordion>
66
70
 
@@ -73,42 +77,46 @@ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozill
73
77
  #### Locale with type="date"
74
78
 
75
79
  <div class="exampleWrapper">
76
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
77
- <!-- The below content is automatically added from ../apiExamples/locale-date.html -->
78
- <auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
79
- <auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
80
- <auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
81
- <!-- AURO-GENERATED-CONTENT:END -->
80
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
81
+ <!-- The below content is automatically added from ../apiExamples/locale-date.html -->
82
+ <auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
83
+ <auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
84
+ <auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
85
+ <!-- AURO-GENERATED-CONTENT:END -->
82
86
  </div>
83
87
  <auro-accordion alignRight>
84
- <span slot="trigger">See code</span>
88
+ <span slot="trigger">See code</span>
85
89
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-date.html) -->
86
90
  <!-- The below code snippet is automatically added from ../apiExamples/locale-date.html -->
87
91
 
88
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
89
- &lt;auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
90
- &lt;auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;</code></pre>
92
+ ```html
93
+ <auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
94
+ <auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
95
+ <auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
96
+ ```
91
97
  <!-- AURO-GENERATED-CONTENT:END -->
92
98
  </auro-accordion>
93
99
 
94
100
  #### Locale with type="numeric"
95
101
 
96
102
  <div class="exampleWrapper">
97
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
98
- <!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
99
- <auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
100
- <auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
101
- <auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
102
- <!-- AURO-GENERATED-CONTENT:END -->
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
104
+ <!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
105
+ <auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
106
+ <auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
107
+ <auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
108
+ <!-- AURO-GENERATED-CONTENT:END -->
103
109
  </div>
104
110
  <auro-accordion alignRight>
105
- <span slot="trigger">See code</span>
111
+ <span slot="trigger">See code</span>
106
112
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-numeric.html) -->
107
113
  <!-- The below code snippet is automatically added from ../apiExamples/locale-numeric.html -->
108
114
 
109
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
110
- &lt;auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
111
- &lt;auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;</code></pre>
115
+ ```html
116
+ <auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
117
+ <auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
118
+ <auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
119
+ ```
112
120
  <!-- AURO-GENERATED-CONTENT:END -->
113
121
  </auro-accordion>
114
122
 
@@ -119,23 +127,25 @@ Time is the most format-divergent type across locales. The examples below highli
119
127
  Note: the choice of 12-hour vs 24-hour is decided by the runtime's `Intl.DateTimeFormat` per locale, not by this component. Several locales (`zh-CN`, `ja-JP`, `de-DE`, `fr-FR`, `en-GB`) default to a 24-hour clock for the short-time skeleton even though the language has 12-hour period words available — the component honors whatever the platform produces.
120
128
 
121
129
  <div class="exampleWrapper">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-time.html) -->
123
- <!-- The below content is automatically added from ../apiExamples/locale-time.html -->
124
- <auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
125
- <auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
126
- <auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
127
- <auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
128
- <!-- AURO-GENERATED-CONTENT:END -->
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-time.html) -->
131
+ <!-- The below content is automatically added from ../apiExamples/locale-time.html -->
132
+ <auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
133
+ <auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
134
+ <auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
135
+ <auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
136
+ <!-- AURO-GENERATED-CONTENT:END -->
129
137
  </div>
130
138
  <auro-accordion alignRight>
131
- <span slot="trigger">See code</span>
139
+ <span slot="trigger">See code</span>
132
140
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-time.html) -->
133
141
  <!-- The below code snippet is automatically added from ../apiExamples/locale-time.html -->
134
142
 
135
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
136
- &lt;auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
137
- &lt;auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
138
- &lt;auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"&gt;&lt;/auro-datetime&gt;</code></pre>
143
+ ```html
144
+ <auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
145
+ <auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
146
+ <auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
147
+ <auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
148
+ ```
139
149
  <!-- AURO-GENERATED-CONTENT:END -->
140
150
  </auro-accordion>
141
151
 
@@ -144,17 +154,19 @@ Note: the choice of 12-hour vs 24-hour is decided by the runtime's `Intl.DateTim
144
154
  Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
145
155
 
146
156
  <div class="exampleWrapper">
147
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
148
- <!-- The below content is automatically added from ../apiExamples/long.html -->
149
- <auro-datetime type="date" month="long" weekday="long"></auro-datetime>
150
- <!-- AURO-GENERATED-CONTENT:END -->
157
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
158
+ <!-- The below content is automatically added from ../apiExamples/long.html -->
159
+ <auro-datetime type="date" month="long" weekday="long"></auro-datetime>
160
+ <!-- AURO-GENERATED-CONTENT:END -->
151
161
  </div>
152
162
  <auro-accordion alignRight>
153
- <span slot="trigger">See code</span>
163
+ <span slot="trigger">See code</span>
154
164
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/long.html) -->
155
165
  <!-- The below code snippet is automatically added from ../apiExamples/long.html -->
156
166
 
157
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="date" month="long" weekday="long"&gt;&lt;/auro-datetime&gt;</code></pre>
167
+ ```html
168
+ <auro-datetime type="date" month="long" weekday="long"></auro-datetime>
169
+ ```
158
170
  <!-- AURO-GENERATED-CONTENT:END -->
159
171
  </auro-accordion>
160
172
 
@@ -170,21 +182,23 @@ Use the `value` attribute to pass a single ISO 8601 date or date-time string int
170
182
  Invalid input is logged as a warning and renders nothing.
171
183
 
172
184
  <div class="exampleWrapper">
173
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
174
- <!-- The below content is automatically added from ../apiExamples/set-date.html -->
175
- <auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
176
- <auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
177
- <auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
178
- <!-- AURO-GENERATED-CONTENT:END -->
185
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
186
+ <!-- The below content is automatically added from ../apiExamples/set-date.html -->
187
+ <auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
188
+ <auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
189
+ <auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
190
+ <!-- AURO-GENERATED-CONTENT:END -->
179
191
  </div>
180
192
  <auro-accordion alignRight>
181
- <span slot="trigger">See code</span>
193
+ <span slot="trigger">See code</span>
182
194
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-date.html) -->
183
195
  <!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
184
196
 
185
- <pre class="language-html"><code class="language-html">&lt;auro-datetime value="1975-08-19T23:15:30"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
186
- &lt;auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
187
- &lt;auro-datetime type="time" value="1975-08-19T23:15:30"&gt;&lt;/auro-datetime&gt;</code></pre>
197
+ ```html
198
+ <auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
199
+ <auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
200
+ <auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
201
+ ```
188
202
  <!-- AURO-GENERATED-CONTENT:END -->
189
203
  </auro-accordion>
190
204
 
@@ -197,17 +211,19 @@ Use `type` to define the type of data to render. Options are `[date, time, year,
197
211
  Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
198
212
 
199
213
  <div class="exampleWrapper">
200
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
201
- <!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
202
- <auro-datetime type="numeric"></auro-datetime>
203
- <!-- AURO-GENERATED-CONTENT:END -->
214
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
215
+ <!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
216
+ <auro-datetime type="numeric"></auro-datetime>
217
+ <!-- AURO-GENERATED-CONTENT:END -->
204
218
  </div>
205
219
  <auro-accordion alignRight>
206
- <span slot="trigger">See code</span>
220
+ <span slot="trigger">See code</span>
207
221
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numeric-date.html) -->
208
222
  <!-- The below code snippet is automatically added from ../apiExamples/numeric-date.html -->
209
223
 
210
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="numeric"&gt;&lt;/auro-datetime&gt;</code></pre>
224
+ ```html
225
+ <auro-datetime type="numeric"></auro-datetime>
226
+ ```
211
227
  <!-- AURO-GENERATED-CONTENT:END -->
212
228
  </auro-accordion>
213
229
 
@@ -218,19 +234,21 @@ When the `value` attribute contains a timezone offset (or `Z`) and no `timezone`
218
234
  Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identically regardless of the viewer's location.
219
235
 
220
236
  <div class="exampleWrapper">
221
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
222
- <!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
223
- <auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
224
- <auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
225
- <!-- AURO-GENERATED-CONTENT:END -->
237
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
238
+ <!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
239
+ <auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
240
+ <auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
241
+ <!-- AURO-GENERATED-CONTENT:END -->
226
242
  </div>
227
243
  <auro-accordion alignRight>
228
- <span slot="trigger">See code</span>
244
+ <span slot="trigger">See code</span>
229
245
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plus-minus.html) -->
230
246
  <!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
231
247
 
232
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="time" value="2022-07-13T21:35:00-07:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
233
- &lt;auro-datetime type="date" value="2022-07-13T21:35:00-07:00"&gt;&lt;/auro-datetime&gt;</code></pre>
248
+ ```html
249
+ <auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
250
+ <auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
251
+ ```
234
252
  <!-- AURO-GENERATED-CONTENT:END -->
235
253
  </auro-accordion>
236
254
 
@@ -239,21 +257,23 @@ Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identical
239
257
  The `value` attribute also accepts ISO 8601 strings ending in the `Z` designator. Without a `timezone` attribute, the wall-clock components are rendered as written. To convert into a viewer-meaningful timezone, also set `timezone` (see the timezone example).
240
258
 
241
259
  <div class="exampleWrapper">
242
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
243
- <!-- The below content is automatically added from ../apiExamples/utc.html -->
244
- <auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
245
- <auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
246
- <auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
247
- <!-- AURO-GENERATED-CONTENT:END -->
260
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
261
+ <!-- The below content is automatically added from ../apiExamples/utc.html -->
262
+ <auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
263
+ <auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
264
+ <auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
265
+ <!-- AURO-GENERATED-CONTENT:END -->
248
266
  </div>
249
267
  <auro-accordion alignRight>
250
- <span slot="trigger">See code</span>
268
+ <span slot="trigger">See code</span>
251
269
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
252
270
  <!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
253
271
 
254
- <pre class="language-html"><code class="language-html">&lt;auro-datetime value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
255
- &lt;auro-datetime type="time" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
256
- &lt;auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"&gt;&lt;/auro-datetime&gt;</code></pre>
272
+ ```html
273
+ <auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
274
+ <auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
275
+ <auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
276
+ ```
257
277
  <!-- AURO-GENERATED-CONTENT:END -->
258
278
  </auro-accordion>
259
279
 
@@ -278,29 +298,31 @@ Both attributes are validated up-front. Invalid inputs do **not** crash the comp
278
298
  This example demonstrates the use of the `pre` and `post` slots to customize the content before and after the datetime output.
279
299
 
280
300
  <div class="exampleWrapper">
281
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
282
- <!-- The below content is automatically added from ../apiExamples/slots.html -->
283
- <auro-datetime type="year">
284
- <span slot="pre">In the year </span>
285
- <span slot="post">
301
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
302
+ <!-- The below content is automatically added from ../apiExamples/slots.html -->
303
+ <auro-datetime type="year">
304
+ <span slot="pre">In the year </span>
305
+ <span slot="post">
286
306
  day<auro-datetime type="day"></auro-datetime>
287
307
  of <auro-datetime type="month" month="long"></auro-datetime>
288
- </span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
289
- </auro-datetime>
290
- <!-- AURO-GENERATED-CONTENT:END -->
308
+ </span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
309
+ </auro-datetime>
310
+ <!-- AURO-GENERATED-CONTENT:END -->
291
311
  </div>
292
312
  <auro-accordion alignRight>
293
- <span slot="trigger">See code</span>
313
+ <span slot="trigger">See code</span>
294
314
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
295
315
  <!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
296
316
 
297
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="year"&gt;
298
- &lt;span slot="pre"&gt;In the year &lt;/span&gt;
299
- &lt;span slot="post"&gt;
300
- day&lt;auro-datetime type="day"&gt;&lt;/auro-datetime&gt;
301
- of &lt;auro-datetime type="month" month="long"&gt;&lt;/auro-datetime&gt;
302
- &lt;/span&gt;falls on a &lt;auro-datetime type="weekday" weekday="long"&gt;&lt;/auro-datetime&gt;
303
- &lt;/auro-datetime&gt;</code></pre>
317
+ ```html
318
+ <auro-datetime type="year">
319
+ <span slot="pre">In the year </span>
320
+ <span slot="post">
321
+ day<auro-datetime type="day"></auro-datetime>
322
+ of <auro-datetime type="month" month="long"></auro-datetime>
323
+ </span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
324
+ </auro-datetime>
325
+ ```
304
326
  <!-- AURO-GENERATED-CONTENT:END -->
305
327
  </auro-accordion>
306
328
 
@@ -311,19 +333,21 @@ This example demonstrates the use of the `pre` and `post` slots to customize the
311
333
  Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
312
334
 
313
335
  <div class="exampleWrapper">
314
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
315
- <!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
316
- <auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
317
- <auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
318
- <!-- AURO-GENERATED-CONTENT:END -->
336
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
337
+ <!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
338
+ <auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
339
+ <auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
340
+ <!-- AURO-GENERATED-CONTENT:END -->
319
341
  </div>
320
342
  <auro-accordion alignRight>
321
- <span slot="trigger">See code</span>
343
+ <span slot="trigger">See code</span>
322
344
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/east-plus-minus.html) -->
323
345
  <!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
324
346
 
325
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="time" value="2022-07-14T06:00:00-04:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
326
- &lt;auro-datetime type="date" value="2022-07-14T06:00:00-04:00"&gt;&lt;/auro-datetime&gt;</code></pre>
347
+ ```html
348
+ <auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
349
+ <auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
350
+ ```
327
351
  <!-- AURO-GENERATED-CONTENT:END -->
328
352
  </auro-accordion>
329
353
 
@@ -332,18 +356,20 @@ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
332
356
  Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
333
357
 
334
358
  <div class="exampleWrapper">
335
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
336
- <!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
337
- <auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
338
- <auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
339
- <!-- AURO-GENERATED-CONTENT:END -->
359
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
360
+ <!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
361
+ <auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
362
+ <auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
363
+ <!-- AURO-GENERATED-CONTENT:END -->
340
364
  </div>
341
365
  <auro-accordion alignRight>
342
- <span slot="trigger">See code</span>
366
+ <span slot="trigger">See code</span>
343
367
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaii-plus-minus.html) -->
344
368
  <!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
345
369
 
346
- <pre class="language-html"><code class="language-html">&lt;auro-datetime type="time" value="2022-07-16T08:00:00-10:00"&gt;&lt;/auro-datetime&gt;&lt;br&gt;
347
- &lt;auro-datetime type="date" value="2022-07-16T08:00:00-10:00"&gt;&lt;/auro-datetime&gt;</code></pre>
370
+ ```html
371
+ <auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
372
+ <auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
373
+ ```
348
374
  <!-- AURO-GENERATED-CONTENT:END -->
349
375
  </auro-accordion>