@aurodesignsystem-dev/auro-carousel 0.0.0-pr93.2 → 0.0.0-pr97.1

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 +73 -55
  2. package/demo/auro-carousel.min.js +47 -22
  3. package/dist/{auro-carousel-kNJ2VOwC.js → auro-carousel-DbNzxhOH.js} +30 -21
  4. package/dist/index.d.ts +29 -20
  5. package/dist/index.js +1 -1
  6. package/dist/registered.js +1 -1
  7. package/package.json +6 -6
package/demo/api.md CHANGED
@@ -11,7 +11,7 @@ The auro-carousel component displays a group of elements in a scrollable contain
11
11
  |------------------|------------------|-----------|---------|--------------------------------------------------|
12
12
  | [centerSelected](#centerSelected) | `centerSelected` | `String` | | Apply to outer auro-carousel element to automatically center the selected node on UI render. |
13
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. |
14
+ | [label](#label) | `label` | `String` | | DEPRECATED - Use `ariaLabel` slot instead. |
15
15
  | [scrollDistance](#scrollDistance) | `scrollDistance` | `Number` | 300 | How many pixels to scroll the carousel when the shoulder buttons are triggered. |
16
16
 
17
17
  ## Methods
@@ -32,9 +32,12 @@ The auro-carousel component displays a group of elements in a scrollable contain
32
32
 
33
33
  ## Slots
34
34
 
35
- | Name | Description |
36
- |------|------------------------------|
37
- | | the elements in the carousel |
35
+ | Name | Description |
36
+ |--------------------------|--------------------------------------------------|
37
+ | | the elements in the carousel |
38
+ | [ariaLabel](#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
42
  ## CSS Shadow Parts
40
43
 
@@ -224,56 +227,6 @@ 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.
229
-
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
230
  #### <a name="scrollDistance"></a>`scrollDistance`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
278
231
  How many pixels to scroll the carousel when the shoulder buttons are triggered.
279
232
 
@@ -486,7 +439,7 @@ Used for all elements inside the scrolling carousel.
486
439
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
487
440
  </auro-carousel>
488
441
  <!-- AURO-GENERATED-CONTENT:END -->
489
- </div>
442
+ </div>
490
443
  <auro-accordion alignRight>
491
444
  <span slot="trigger">See code</span>
492
445
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -509,6 +462,71 @@ Used for all elements inside the scrolling carousel.
509
462
  <!-- AURO-GENERATED-CONTENT:END -->
510
463
  </auro-accordion>
511
464
 
465
+ #### aria label slots
466
+
467
+ 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.
468
+
469
+ <div class="exampleWrapper">
470
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
471
+ <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlots.html -->
472
+ <auro-carousel centerSelected>
473
+ <span slot="ariaLabel">My Carousel</span>
474
+ <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
475
+ <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
476
+ <auro-pane date="2020-10-10" price="$435"></auro-pane>
477
+ <auro-pane date="2020-10-11" price="$435"></auro-pane>
478
+ <auro-pane date="2020-10-12" price="$435"></auro-pane>
479
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
480
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
481
+ <auro-pane date="2020-10-15" price="$435"></auro-pane>
482
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
483
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
484
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
485
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
486
+ <auro-pane date="2020-10-20" price="$435"></auro-pane>
487
+ <auro-pane date="2020-10-21" price="$435"></auro-pane>
488
+ <auro-pane date="2020-10-22" price="$435"></auro-pane>
489
+ <auro-pane date="2020-10-23" price="$435"></auro-pane>
490
+ <auro-pane date="2020-10-24" price="$435"></auro-pane>
491
+ <auro-pane date="2020-10-25" price="$435"></auro-pane>
492
+ <auro-pane date="2020-10-26" price="$435"></auro-pane>
493
+ <auro-pane date="2020-10-27" price="$435"></auro-pane>
494
+ </auro-carousel>
495
+ <!-- AURO-GENERATED-CONTENT:END -->
496
+ </div>
497
+ <auro-accordion alignRight>
498
+ <span slot="trigger">See code</span>
499
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlots.html) -->
500
+ <!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlots.html -->
501
+
502
+ ```html
503
+ <auro-carousel centerSelected>
504
+ <span slot="ariaLabel">My Carousel</span>
505
+ <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
506
+ <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
507
+ <auro-pane date="2020-10-10" price="$435"></auro-pane>
508
+ <auro-pane date="2020-10-11" price="$435"></auro-pane>
509
+ <auro-pane date="2020-10-12" price="$435"></auro-pane>
510
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
511
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
512
+ <auro-pane date="2020-10-15" price="$435"></auro-pane>
513
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
514
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
515
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
516
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
517
+ <auro-pane date="2020-10-20" price="$435"></auro-pane>
518
+ <auro-pane date="2020-10-21" price="$435"></auro-pane>
519
+ <auro-pane date="2020-10-22" price="$435"></auro-pane>
520
+ <auro-pane date="2020-10-23" price="$435"></auro-pane>
521
+ <auro-pane date="2020-10-24" price="$435"></auro-pane>
522
+ <auro-pane date="2020-10-25" price="$435"></auro-pane>
523
+ <auro-pane date="2020-10-26" price="$435"></auro-pane>
524
+ <auro-pane date="2020-10-27" price="$435"></auro-pane>
525
+ </auro-carousel>
526
+ ```
527
+ <!-- AURO-GENERATED-CONTENT:END -->
528
+ </auro-accordion>
529
+
512
530
  ### Theme Support
513
531
 
514
532
  The component may be restyled using the following code sample and changing the values of the following token(s).