@aurodesignsystem-dev/auro-carousel 0.0.0-pr93.2 → 0.0.0-pr94.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 (12) hide show
  1. package/README.md +79 -68
  2. package/demo/api.html +1 -1
  3. package/demo/api.js +1 -1
  4. package/demo/api.md +133 -163
  5. package/demo/auro-carousel.min.js +81 -38
  6. package/demo/index.html +2 -3
  7. package/demo/index.md +22 -300
  8. package/dist/{auro-carousel-kNJ2VOwC.js → auro-carousel-D1ntQpGY.js} +30 -21
  9. package/dist/index.d.ts +209 -119
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +19 -12
package/demo/api.md CHANGED
@@ -3,87 +3,88 @@
3
3
 
4
4
  # auro-carousel
5
5
 
6
- The auro-carousel component displays a group of elements in a scrollable container.
6
+ The `auro-carousel` element displays a group of elements in a scrollable container.
7
7
 
8
- ## Properties
8
+ ### Properties & Attributes
9
9
 
10
- | Property | Attribute | Type | Default | Description |
11
- |------------------|------------------|-----------|---------|--------------------------------------------------|
12
- | [centerSelected](#centerSelected) | `centerSelected` | `String` | | Apply to outer auro-carousel element to automatically center the selected node on UI render. |
13
- | [displayArrows](#displayArrows) | `displayArrows` | `Boolean` | | Forces left and right navigation to stick in DOM regardless of content width |
14
- | [label](#label) | `label` | `String` | | The accessible name for the carousel. Logs a console warning if not set. |
15
- | [scrollDistance](#scrollDistance) | `scrollDistance` | `Number` | 300 | How many pixels to scroll the carousel when the shoulder buttons are triggered. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | -------------- | -------------- | --------- | ------- | ------- | ---------------------------------------------------------------------------------------------- |
12
+ | centerSelected | centerSelected | | string | | Automatically centers the selected node on UI render |
13
+ | displayArrows | displayArrows | | boolean | | Always displays the left and right arrows, regardless of content width |
14
+ | label | label | | string | | DEPRECATED - Use `ariaLabel` slot instead. |
15
+ | scrollDistance | scrollDistance | | number | `300` | The number of pixels to scroll the carousel when the left or right buttons are interacted with |
16
16
 
17
- ## Methods
17
+ ### Methods
18
18
 
19
- | Method | Type | Description |
20
- |-------------------------|-----------------------|--------------------------------------------------|
21
- | [actionOnChildrenReady](#actionOnChildrenReady) | `(): void` | Function handler for anything that happens when all its children is ready. |
22
- | [centerElement](#centerElement) | `(el: Element): void` | Centers the given element inside the carousel.<br /><br />**el**: The element to center inside the carousel. Must be a descendant of the carousel. |
23
- | [scrollCarousel](#scrollCarousel) | `(num: number): void` | Scrolls the carousel by the given amount.<br /><br />**num**: The number of pixels to scroll the carousel by. Positive scrolls to the<br />right, negative scrolls to the left. |
24
- | [scrollToSelected](#scrollToSelected) | `(): void` | Scroll to the first child component that have 'selected' attribute. |
19
+ | Name | Parameters | Return | Description |
20
+ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------- |
21
+ | centerElement | `el` (Element) - The element to center inside the carousel. Must be a descendant of the carousel. | void | Centers the given element inside the carousel. |
22
+ | register | `name` (string) - The name of the element that you want to register. | void | This will register this element with the browser. |
23
+ | scrollCarousel | `num` (number) - The number of pixels to scroll the carousel by. Positive scrolls to the<br>right, negative scrolls to the left. | void | Scrolls the carousel by the given amount. |
24
+ | scrollToSelected | None | void | Scroll to the first child component that have 'selected' attribute. |
25
25
 
26
- ## Events
26
+ ### Events
27
27
 
28
- | Event | Type | Description |
29
- |---------------|--------------------|--------------------------------------------------|
30
- | [scrollLeft](#scrollLeft) | `CustomEvent<any>` | when the guest clicks the 'left' carousel button |
31
- | [scrollRight](#scrollRight) | `CustomEvent<any>` | when the guest clicks the 'right' carousel button |
28
+ | Name | Description |
29
+ | ----------- | ------------------------------------------------------------ |
30
+ | scrollLeft | Dispatched when the guest clicks the 'left' carousel button |
31
+ | scrollRight | Dispatched when the guest clicks the 'right' carousel button |
32
32
 
33
- ## Slots
33
+ ### Slots
34
34
 
35
- | Name | Description |
36
- |------|------------------------------|
37
- | | the elements in the carousel |
35
+ | Name | Description |
36
+ | ---------------------- | ---------------------------------------------------------- |
37
+ | (default) | Default slot for the elements in the carousel |
38
+ | ariaLabel | Text to give an accessible name to the carousel |
39
+ | ariaLabel.scroll.left | Text to give an accessible name to the left scroll button |
40
+ | ariaLabel.scroll.right | Text to give an accessible name to the right scroll button |
38
41
 
39
- ## CSS Shadow Parts
42
+ ### CSS Shadow Parts
40
43
 
41
- | Part | Description |
42
- |-----------|-------------------------------------------------|
43
- | [wrapper](#wrapper) | The primary root HTML element of the component. |
44
+ | Name | Description |
45
+ | ------- | ----------------------------------------------- |
46
+ | wrapper | The primary root HTML element of the component. |
44
47
  <!-- AURO-GENERATED-CONTENT:END -->
45
48
 
46
- ## API Examples
47
-
48
- ### Default
49
+ ## Basic
49
50
 
50
- <div class="exampleWrapper">
51
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/default.html) -->
52
- <!-- The below content is automatically added from ./../apiExamples/default.html -->
53
- <auro-carousel>
54
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
55
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
56
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
57
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
58
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
59
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
60
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
61
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
62
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
63
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
64
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
65
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
66
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
67
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
68
- </auro-carousel>
69
- <!-- AURO-GENERATED-CONTENT:END -->
70
- </div>
51
+ <div class="exampleWrapper">
52
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
53
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
54
+ <auro-carousel>
55
+ <auro-pane date="2020-10-10" price="$435"></auro-pane>
56
+ <auro-pane date="2020-10-11" price="$435"></auro-pane>
57
+ <auro-pane date="2020-10-12" price="$435"></auro-pane>
58
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
59
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
60
+ <auro-pane date="2020-10-15" price="$435"></auro-pane>
61
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
62
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
63
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
64
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
65
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
66
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
67
+ <auro-pane date="2020-10-18" price="$435"></auro-pane>
68
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
69
+ </auro-carousel>
70
+ <!-- AURO-GENERATED-CONTENT:END -->
71
+ </div>
71
72
  <auro-accordion alignRight>
72
73
  <span slot="trigger">See code</span>
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/default.html) -->
74
- <!-- The below code snippet is automatically added from ./../apiExamples/default.html -->
74
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
75
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
75
76
 
76
77
  ```html
77
78
  <auro-carousel>
78
79
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
79
80
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
80
81
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
81
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
82
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
82
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
83
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
83
84
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
84
85
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
85
86
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
86
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
87
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
87
88
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
88
89
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
89
90
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
@@ -94,14 +95,15 @@ The auro-carousel component displays a group of elements in a scrollable contain
94
95
  <!-- AURO-GENERATED-CONTENT:END -->
95
96
  </auro-accordion>
96
97
 
97
- ### Property Examples
98
+ ## Property & Attribute Examples
98
99
 
99
- #### <a name="centerSelected"></a>`centerSelected`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
100
- Apply to the `auro-carousel` element to automatically center the selected node on UI render.
100
+ #### Center Selected
101
+
102
+ Set the `centerSelected` attribute to automatically center the selected node upon rendering the UI.
101
103
 
102
104
  <div class="exampleWrapper">
103
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/centerSelected.html) -->
104
- <!-- The below content is automatically added from ./../apiExamples/centerSelected.html -->
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/center-selected.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/center-selected.html -->
105
107
  <auro-carousel centerSelected>
106
108
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
107
109
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
@@ -119,11 +121,11 @@ Apply to the `auro-carousel` element to automatically center the selected node o
119
121
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
120
122
  </auro-carousel>
121
123
  <!-- AURO-GENERATED-CONTENT:END -->
122
- </div>
124
+ </div>
123
125
  <auro-accordion alignRight>
124
126
  <span slot="trigger">See code</span>
125
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerSelected.html) -->
126
- <!-- The below code snippet is automatically added from ./../apiExamples/centerSelected.html -->
127
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-selected.html) -->
128
+ <!-- The below code snippet is automatically added from ./../apiExamples/center-selected.html -->
127
129
 
128
130
  ```html
129
131
  <auro-carousel centerSelected>
@@ -146,12 +148,13 @@ Apply to the `auro-carousel` element to automatically center the selected node o
146
148
  <!-- AURO-GENERATED-CONTENT:END -->
147
149
  </auro-accordion>
148
150
 
149
- #### <a name="displayArrows"></a>`displayArrows`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
151
+ #### Display Arrows
152
+
150
153
  Using the `displayArrows` attribute will persistently show the left and right arrow buttons without consideration of scroll position.
151
154
 
152
155
  <div class="exampleWrapper">
153
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayArrows.html) -->
154
- <!-- The below content is automatically added from ./../apiExamples/displayArrows.html -->
156
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/display-arrows.html) -->
157
+ <!-- The below content is automatically added from ./../apiExamples/display-arrows.html -->
155
158
  <auro-carousel displayarrows>
156
159
  <auro-pane date="2021-10-01"></auro-pane>
157
160
  <auro-pane date="2021-10-02"></auro-pane>
@@ -183,11 +186,11 @@ Using the `displayArrows` attribute will persistently show the left and right ar
183
186
  <auro-pane date="2021-10-28"></auro-pane>
184
187
  </auro-carousel>
185
188
  <!-- AURO-GENERATED-CONTENT:END -->
186
- </div>
189
+ </div>
187
190
  <auro-accordion alignRight>
188
191
  <span slot="trigger">See code</span>
189
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayArrows.html) -->
190
- <!-- The below code snippet is automatically added from ./../apiExamples/displayArrows.html -->
192
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/display-arrows.html) -->
193
+ <!-- The below code snippet is automatically added from ./../apiExamples/display-arrows.html -->
191
194
 
192
195
  ```html
193
196
  <auro-carousel displayarrows>
@@ -224,62 +227,13 @@ Using the `displayArrows` attribute will persistently show the left and right ar
224
227
  <!-- AURO-GENERATED-CONTENT:END -->
225
228
  </auro-accordion>
226
229
 
227
- #### <a name="label"></a>`label`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
228
- The accessible name for the carousel. Logs a console warning if not set.
230
+ #### Scroll Distance
229
231
 
230
- <div class="exampleWrapper">
231
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
232
- <!-- The below content is automatically added from ./../apiExamples/label.html -->
233
- <auro-carousel label="Flight options">
234
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
235
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
236
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
237
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
238
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
239
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
240
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
241
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
242
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
243
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
244
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
245
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
246
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
247
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
248
- </auro-carousel>
249
- <!-- AURO-GENERATED-CONTENT:END -->
250
- </div>
251
- <auro-accordion alignRight>
252
- <span slot="trigger">See code</span>
253
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/label.html) -->
254
- <!-- The below code snippet is automatically added from ./../apiExamples/label.html -->
255
-
256
- ```html
257
- <auro-carousel label="Flight options">
258
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
259
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
260
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
261
- <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
262
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
263
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
264
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
265
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
266
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
267
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
268
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
269
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
270
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
271
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
272
- </auro-carousel>
273
- ```
274
- <!-- AURO-GENERATED-CONTENT:END -->
275
- </auro-accordion>
276
-
277
- #### <a name="scrollDistance"></a>`scrollDistance`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
278
- How many pixels to scroll the carousel when the shoulder buttons are triggered.
232
+ Use the `scrollDistance` attribute to specify how many pixels to scroll the carousel when the shoulder buttons are interacted with.
279
233
 
280
234
  <div class="exampleWrapper">
281
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scrollDistance.html) -->
282
- <!-- The below content is automatically added from ./../apiExamples/scrollDistance.html -->
235
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scroll-distance.html) -->
236
+ <!-- The below content is automatically added from ./../apiExamples/scroll-distance.html -->
283
237
  <auro-carousel scrollDistance="200">
284
238
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
285
239
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
@@ -297,11 +251,11 @@ How many pixels to scroll the carousel when the shoulder buttons are triggered.
297
251
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
298
252
  </auro-carousel>
299
253
  <!-- AURO-GENERATED-CONTENT:END -->
300
- </div>
254
+ </div>
301
255
  <auro-accordion alignRight>
302
256
  <span slot="trigger">See code</span>
303
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scrollDistance.html) -->
304
- <!-- The below code snippet is automatically added from ./../apiExamples/scrollDistance.html -->
257
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scroll-distance.html) -->
258
+ <!-- The below code snippet is automatically added from ./../apiExamples/scroll-distance.html -->
305
259
 
306
260
  ```html
307
261
  <auro-carousel scrollDistance="200">
@@ -324,16 +278,17 @@ How many pixels to scroll the carousel when the shoulder buttons are triggered.
324
278
  <!-- AURO-GENERATED-CONTENT:END -->
325
279
  </auro-accordion>
326
280
 
327
- ### Method Examples
281
+ ## Method Examples
328
282
 
329
- #### <a name="centerElement"></a>`centerElement`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
330
- The following example illustrates the use of the `centerElement` method. This feature will attempt top center the selected pane element when clicked if there are enough surrounding nodes. This example DOES NOT center on load.
283
+ #### Center Element
284
+
285
+ The following example illustrates the use of the `centerElement` method. This feature will center the selected pane element when clicked if there are enough surrounding nodes. This example **DOES NOT** center on load, as shown by the `centerSelected` attribute.
331
286
 
332
287
  This method requires the user to invoke this feature based on a click event. See both a vanilla JS and React example below.
333
288
 
334
289
  <div class="exampleWrapper">
335
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/centerElement.html) -->
336
- <!-- The below content is automatically added from ./../apiExamples/centerElement.html -->
290
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/center-element.html) -->
291
+ <!-- The below content is automatically added from ./../apiExamples/center-element.html -->
337
292
  <auro-carousel label="Flight options" id="centerElement">
338
293
  <auro-pane date="2021-10-01"></auro-pane>
339
294
  <auro-pane date="2021-10-02"></auro-pane>
@@ -368,8 +323,8 @@ This method requires the user to invoke this feature based on a click event. See
368
323
  </div>
369
324
  <auro-accordion alignRight>
370
325
  <span slot="trigger">See code</span>
371
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElement.html) -->
372
- <!-- The below code snippet is automatically added from ./../apiExamples/centerElement.html -->
326
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element.html) -->
327
+ <!-- The below code snippet is automatically added from ./../apiExamples/center-element.html -->
373
328
 
374
329
  ```html
375
330
  <auro-carousel label="Flight options" id="centerElement">
@@ -404,8 +359,8 @@ This method requires the user to invoke this feature based on a click event. See
404
359
  </auro-carousel>
405
360
  ```
406
361
  <!-- AURO-GENERATED-CONTENT:END -->
407
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElement.js) -->
408
- <!-- The below code snippet is automatically added from ./../apiExamples/centerElement.js -->
362
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element.js) -->
363
+ <!-- The below code snippet is automatically added from ./../apiExamples/center-element.js -->
409
364
 
410
365
  ```js
411
366
  // Vanilla JS example
@@ -427,8 +382,8 @@ export function centerElementExample() {
427
382
  }
428
383
  ```
429
384
  <!-- AURO-GENERATED-CONTENT:END -->
430
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElementReact.js) -->
431
- <!-- The below code snippet is automatically added from ./../apiExamples/centerElementReact.js -->
385
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element-react.js) -->
386
+ <!-- The below code snippet is automatically added from ./../apiExamples/center-element-react.js -->
432
387
 
433
388
  ```js
434
389
  // React example
@@ -454,65 +409,80 @@ const days = [...Array(28).keys()];
454
409
  <!-- AURO-GENERATED-CONTENT:END -->
455
410
  </auro-accordion>
456
411
 
457
- ### Events
458
-
459
- #### <a name="scrollLeft"></a>`scrollLeft`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
460
- When the guest clicks the 'left' carousel button.
412
+ ## Slot Examples
461
413
 
462
- #### <a name="scrollRight"></a>`scrollRight`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
463
- When the guest clicks the 'right' carousel button.
414
+ ### Aria Label Slots
464
415
 
465
- </auro-accordion>
466
-
467
- ### Slot Example
468
-
469
- #### default
416
+ Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots to customize the accessible names for the carousel container and the left and right scroll buttons.
470
417
 
471
- Used for all elements inside the scrolling carousel.
418
+ **Note:** Do not use the `aria-label` attribute on the `auro-carousel` element itself. This will be ignored in favor of the `ariaLabel` slot.
472
419
 
473
420
  <div class="exampleWrapper">
474
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
475
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
421
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-slots.html) -->
422
+ <!-- The below content is automatically added from ./../apiExamples/aria-label-slots.html -->
476
423
  <auro-carousel centerSelected>
424
+ <span slot="ariaLabel">My Carousel</span>
425
+ <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
426
+ <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
477
427
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
478
428
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
479
429
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
480
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
481
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
430
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
431
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
482
432
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
483
433
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
484
434
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
485
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
435
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
486
436
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
437
+ <auro-pane date="2020-10-20" price="$435"></auro-pane>
438
+ <auro-pane date="2020-10-21" price="$435"></auro-pane>
439
+ <auro-pane date="2020-10-22" price="$435"></auro-pane>
440
+ <auro-pane date="2020-10-23" price="$435"></auro-pane>
441
+ <auro-pane date="2020-10-24" price="$435"></auro-pane>
442
+ <auro-pane date="2020-10-25" price="$435"></auro-pane>
443
+ <auro-pane date="2020-10-26" price="$435"></auro-pane>
444
+ <auro-pane date="2020-10-27" price="$435"></auro-pane>
487
445
  </auro-carousel>
488
446
  <!-- AURO-GENERATED-CONTENT:END -->
489
- </div>
447
+ </div>
490
448
  <auro-accordion alignRight>
491
449
  <span slot="trigger">See code</span>
492
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
493
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
450
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label-slots.html) -->
451
+ <!-- The below code snippet is automatically added from ./../apiExamples/aria-label-slots.html -->
494
452
 
495
453
  ```html
496
454
  <auro-carousel centerSelected>
455
+ <span slot="ariaLabel">My Carousel</span>
456
+ <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
457
+ <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
497
458
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
498
459
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
499
460
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
500
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
501
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
461
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
462
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
502
463
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
503
464
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
504
465
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
505
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
466
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
506
467
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
468
+ <auro-pane date="2020-10-20" price="$435"></auro-pane>
469
+ <auro-pane date="2020-10-21" price="$435"></auro-pane>
470
+ <auro-pane date="2020-10-22" price="$435"></auro-pane>
471
+ <auro-pane date="2020-10-23" price="$435"></auro-pane>
472
+ <auro-pane date="2020-10-24" price="$435"></auro-pane>
473
+ <auro-pane date="2020-10-25" price="$435"></auro-pane>
474
+ <auro-pane date="2020-10-26" price="$435"></auro-pane>
475
+ <auro-pane date="2020-10-27" price="$435"></auro-pane>
507
476
  </auro-carousel>
508
477
  ```
509
478
  <!-- AURO-GENERATED-CONTENT:END -->
510
479
  </auro-accordion>
511
480
 
512
- ### Theme Support
481
+ ## Restyle Component with CSS Variables
513
482
 
514
- The component may be restyled using the following code sample and changing the values of the following token(s).
483
+ The component may be restyled by changing the values of the following token(s).
515
484
 
485
+ <!-- Remove section if component does not have any component specific tokens -->
516
486
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
517
487
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
518
488