@rcarls/rc-carousel 0.1.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.
- package/README.md +38 -0
- package/dist/custom-elements.json +937 -0
- package/dist/rc-carousel-CdDEH9fb.js +658 -0
- package/dist/rc-carousel-CdDEH9fb.js.map +1 -0
- package/dist/rc-carousel-define.js +8 -0
- package/dist/rc-carousel-define.js.map +1 -0
- package/dist/rc-carousel.js +6 -0
- package/dist/rc-carousel.js.map +1 -0
- package/dist/types/packages/rc-carousel/src/define.d.ts +1 -0
- package/dist/types/packages/rc-carousel/src/index.d.ts +2 -0
- package/dist/types/packages/rc-carousel/src/rc-carousel-item.d.ts +63 -0
- package/dist/types/packages/rc-carousel/src/rc-carousel-item.styles.d.ts +2 -0
- package/dist/types/packages/rc-carousel/src/rc-carousel.d.ts +270 -0
- package/dist/types/packages/rc-carousel/src/rc-carousel.styles.d.ts +2 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# @rcarls/rc-carousel
|
|
2
|
+
|
|
3
|
+
A swipe-driven slide carousel following the [WAI-ARIA APG Carousel
|
|
4
|
+
pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/), built on native
|
|
5
|
+
CSS scroll-snap. `rc-carousel` is the track and chrome; `rc-carousel-item`
|
|
6
|
+
is the slide wrapper, keeping authored light-DOM content directly available
|
|
7
|
+
to assistive technology.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<rc-carousel navigation pagination loop aria-label="Recipe photos">
|
|
11
|
+
<rc-carousel-item><img src="/pie.jpg" alt="Apple pie, sliced" /></rc-carousel-item>
|
|
12
|
+
<rc-carousel-item><img src="/risotto.jpg" alt="Mushroom risotto" /></rc-carousel-item>
|
|
13
|
+
</rc-carousel>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Give the host a definite `inline-size`/`block-size` (`navigation` and
|
|
17
|
+
`pagination` are absolutely positioned over the track).
|
|
18
|
+
|
|
19
|
+
`active-index`/`default-active-index` follow this monorepo's controlled/
|
|
20
|
+
uncontrolled property convention; settling reports the new index via
|
|
21
|
+
`rc-carousel-change` (`detail: { index, trigger }`). `loop` wraps
|
|
22
|
+
seamlessly past the first/last slide via cloned lead/trail slides, rather
|
|
23
|
+
than a discontinuous index jump. Set `--rc-carousel-slide-size` directly or
|
|
24
|
+
from a consumer container query to coordinate hero, multi-browse, and other
|
|
25
|
+
layouts. `mouse-dragging` adds desktop click-and-drag scrolling, with
|
|
26
|
+
drag-vs-click disambiguation so interactive slide content stays clickable.
|
|
27
|
+
|
|
28
|
+
Navigation and pagination buttons use `aria-disabled`, never native
|
|
29
|
+
`disabled`, so a boundary stays Tab-reachable. Off-screen and peeking
|
|
30
|
+
slides get `aria-hidden`/`inert` via an `IntersectionObserver`. The picker
|
|
31
|
+
is APG's "grouped" (non-tab) style, deliberately not `role="tablist"`.
|
|
32
|
+
|
|
33
|
+
See the [full documentation](https://richardcarls.github.io/rc-webcomponents/components/rc-carousel)
|
|
34
|
+
for the complete API, accessibility notes, and live demo.
|
|
35
|
+
|
|
36
|
+
Import `@rcarls/rc-carousel` to use the classes without registering them, or
|
|
37
|
+
import `@rcarls/rc-carousel/define` to register `<rc-carousel>` and
|
|
38
|
+
`<rc-carousel-item>`.
|