@aurodesignsystem-dev/auro-slideshow 0.0.0-pr54.1 → 0.0.0-pr59.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 +52 -36
  2. package/demo/auro-slideshow.min.js +56 -28
  3. package/dist/{auro-slideshow-B6wRoVRO.js → auro-slideshow-vHKongBF.js} +23 -13
  4. package/dist/index.d.ts +23 -13
  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
@@ -14,8 +14,8 @@
14
14
  | [loop](#loop) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
15
15
  | [navigation](#navigation) | `navigation` | `boolean` | false | If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered. |
16
16
  | [pagination](#pagination) | `pagination` | `boolean` | false | If true, the slideshow will display pagination dots for each slide. If autoplay is on, the active dot will also show a progress bar. |
17
- | [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | The aria-label for the pause button. |
18
- | [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | The aria-label for the play button. |
17
+ | [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | DEPRECATED - Use `ariaLabel.slideshow.pause` instead. |
18
+ | [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | DEPRECATED - Use `ariaLabel.slideshow.play` instead. |
19
19
  | [playOnInit](#playOnInit) | `playOnInit` | `boolean` | false | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
20
20
  | [scrollSpeed](#scrollSpeed) | `scrollSpeed` | `number` | 0.75 | Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`) |
21
21
  | [startDelay](#startDelay) | `startDelay` | `number` | 1000 | Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`) |
@@ -31,9 +31,13 @@
31
31
 
32
32
  ## Slots
33
33
 
34
- | Name | Description |
35
- |------|--------------------------------------------------|
36
- | | Default slot for the slides. Each child element will be treated as a slide. |
34
+ | Name | Description |
35
+ |-----------------------------|--------------------------------------------------|
36
+ | | Default slot for the slides. Each child element will be treated as a slide. |
37
+ | `ariaLabel.scroll.left` | The aria-label for the button navigating to the previous slide. Default is "Previous slide". |
38
+ | `ariaLabel.scroll.right` | The aria-label for the button navigating to the next slide. Default is "Next slide". |
39
+ | `ariaLabel.slideshow.pause` | The aria-label for the button that pauses the slideshow. Default is "Pause slideshow". |
40
+ | `ariaLabel.slideshow.play` | The aria-label for the button that starts the slideshow. Default is "Play slideshow". |
37
41
 
38
42
  ## CSS Shadow Parts
39
43
 
@@ -584,39 +588,22 @@ Setting the `playOnInit` attribute will start playing the slideshow when the pag
584
588
  <!-- AURO-GENERATED-CONTENT:END -->
585
589
  </auro-accordion>
586
590
 
587
- ### Custom labels for Play/Pause button
591
+ ### Custom labels for accessibility
588
592
 
589
- To set a custom aria-label for the play/pause button, pass in new values to the `playLabel` and `pauseLabel` attributes respectively. If not provided, they will default to "Play slideshow" and "Pause slideshow".
593
+ To customize the aria-labels for the slideshow controls, use the following slots:
594
+ - `ariaLabel.scroll.left` - Previous slide button
595
+ - `ariaLabel.scroll.right` - Next slide button
596
+ - `ariaLabel.slideshow.play` - Play slideshow button
597
+ - `ariaLabel.slideshow.pause` - Pause slideshow button
590
598
 
591
599
  <div class="exampleWrapper">
592
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customlabels.html) -->
593
- <!-- The below content is automatically added from ./../apiExamples/customlabels.html -->
594
- <auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
595
- <div style="height: 480px">
596
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
597
- </div>
598
- <div style="height: 480px">
599
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
600
- </div>
601
- <div style="height: 480px">
602
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
603
- </div>
604
- <div style="height: 480px">
605
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
606
- </div>
607
- <div style="height: 480px">
608
- <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
609
- </div>
610
- </auro-slideshow>
611
- <!-- AURO-GENERATED-CONTENT:END -->
612
- </div>
613
- <auro-accordion alignRight>
614
- <span slot="trigger">See code</span>
615
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customlabels.html) -->
616
- <!-- The below code snippet is automatically added from ./../apiExamples/customlabels.html -->
617
-
618
- ```html
619
- <auro-slideshow pagination autoplay playLabel="Reproducir diapositivas" pauseLabel="Pausar diapositivas">
600
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
601
+ <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlots.html -->
602
+ <auro-slideshow autoplay navigation>
603
+ <span slot="ariaLabel.scroll.left">Custom label for previous slide</span>
604
+ <span slot="ariaLabel.scroll.right">Custom label for next slide</span>
605
+ <span slot="ariaLabel.slideshow.play">Custom label for play slideshow</span>
606
+ <span slot="ariaLabel.slideshow.pause">Custom label for pause slideshow</span>
620
607
  <div style="height: 480px">
621
608
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
622
609
  </div>
@@ -632,7 +619,36 @@ To set a custom aria-label for the play/pause button, pass in new values to the
632
619
  <div style="height: 480px">
633
620
  <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
634
621
  </div>
635
- </auro-slideshow>
622
+ </auro-slideshow>
623
+ <!-- AURO-GENERATED-CONTENT:END -->
624
+ </div>
625
+ <auro-accordion alignRight>
626
+ <span slot="trigger">See code</span>
627
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlots.html) -->
628
+ <!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlots.html -->
629
+
630
+ ```html
631
+ <auro-slideshow autoplay navigation>
632
+ <span slot="ariaLabel.scroll.left">Custom label for previous slide</span>
633
+ <span slot="ariaLabel.scroll.right">Custom label for next slide</span>
634
+ <span slot="ariaLabel.slideshow.play">Custom label for play slideshow</span>
635
+ <span slot="ariaLabel.slideshow.pause">Custom label for pause slideshow</span>
636
+ <div style="height: 480px">
637
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
638
+ </div>
639
+ <div style="height: 480px">
640
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
641
+ </div>
642
+ <div style="height: 480px">
643
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
644
+ </div>
645
+ <div style="height: 480px">
646
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
647
+ </div>
648
+ <div style="height: 480px">
649
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
650
+ </div>
651
+ </auro-slideshow>
636
652
  ```
637
653
  <!-- AURO-GENERATED-CONTENT:END -->
638
654
  </auro-accordion>