- {
- return (
- Prev
+ Next
+ (currentIndexSig.value = i)}
- >
- {i}
-
- );
- })}
- />
+ {index === 1 && }
+ isPlaying: {isPlaying.value.toString()}
+ + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx b/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx new file mode 100644 index 000000000..b05735d6b --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx @@ -0,0 +1,31 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + const selectedIndex = useSignal
-
- );
-});
diff --git a/packages/kit-headless/src/components/carousel/carousel-context-id.ts b/packages/kit-headless/src/components/carousel/carousel-context-id.ts
deleted file mode 100644
index b63a3db52..000000000
--- a/packages/kit-headless/src/components/carousel/carousel-context-id.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createContextId } from '@builder.io/qwik';
-import { type CarouselContext } from './carousel-context.type';
-
-const CarouselContextId = createContextId {
- // Do nothing if this is not the primary button (e.g., right click).
- if (e.pointerType === 'mouse' && e.button !== 0) {
- return;
- }
-
- context.initialX.value = e.clientX;
- if (context.containerRef.value) {
- const style = window.getComputedStyle(context.containerRef.value);
- const matrix = new DOMMatrix(style.transform);
- context.initialTransformX.value = matrix.m41;
-
- context.isDraggingSig.value = true;
- }
-
- window.addEventListener('pointermove', handlePointerMove$);
- }}
- /* removes pointer move event from pointer up created in slide.tsx */
- window:onPointerUp$={() =>
- window.removeEventListener('pointermove', handlePointerMove$)
- }
- ref={context.viewportRef}
- style={{ overflowX: 'visible', position: 'relative' }}
- onTransitionEnd$={() => (context.transitionDurationSig.value = 0)}
- {...props}
- >
-
- );
-});
diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css
new file mode 100644
index 000000000..91aa581ef
--- /dev/null
+++ b/packages/kit-headless/src/components/carousel/carousel.css
@@ -0,0 +1,80 @@
+@layer qwik-ui {
+ [data-qui-carousel-scroller] {
+ overflow: hidden;
+ display: flex;
+ gap: var(--gap);
+ /* for mobile & scroll-snap-start */
+ scroll-snap-type: x mandatory;
+ }
+
+ [data-qui-carousel-slide] {
+ /* default, feel free to override */
+ --total-gap-width: calc(var(--gap) * (var(--slides-per-view) - 1));
+ --available-slide-width: calc(100% - var(--total-gap-width));
+ --slide-width: calc(var(--available-slide-width) / var(--slides-per-view));
+
+ flex-basis: var(--slide-width);
+ flex-shrink: 0;
+ }
+
+ @media (pointer: coarse) {
+ [data-qui-carousel-scroller][data-draggable] {
+ overflow-x: scroll;
+ }
+
+ /* make sure snap align is added after initial index animation */
+ [data-draggable][data-initial-touch] [data-qui-carousel-slide] {
+ scroll-snap-align: start;
+ }
+
+ [data-draggable][data-align='center'][data-initial-touch] [data-qui-carousel-slide] {
+ scroll-snap-align: center;
+ }
+
+ [data-draggable][data-align='end'][data-initial-touch] [data-qui-carousel-slide] {
+ scroll-snap-align: end;
+ }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ [data-qui-carousel-player] {
+ display: none;
+ }
+ }
+
+ /* workaround until scroll-snap-start is added to CSS */
+ [data-qui-scroll-start] {
+ clip-path: inset(50%);
+ height: 1px;
+ width: 1px;
+ white-space: nowrap;
+ visibility: hidden;
+ }
+
+ /* so the snap start marker is not included in the scroll snap position */
+ [data-qui-scroll-start][data-start] {
+ margin-right: calc(-1 * var(--gap) - 1px);
+ }
+
+ [data-qui-scroll-start][data-center] {
+ margin-left: 0px;
+ }
+
+ [data-qui-scroll-start][data-end] {
+ margin-left: calc(-1 * var(--gap) - 1px);
+ }
+
+ [data-qui-scroll-start]::before {
+ content: '';
+ height: 1px;
+ width: 1px;
+ display: block;
+ /* changes to none on first interaction */
+ scroll-snap-align: var(--scroll-snap-align, start);
+ }
+
+ /* remove the marker's snap-align on hover */
+ [data-qui-carousel-scroller]:hover [data-qui-scroll-start]::before {
+ scroll-snap-align: unset;
+ }
+}
diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts
new file mode 100644
index 000000000..a8434d916
--- /dev/null
+++ b/packages/kit-headless/src/components/carousel/carousel.test.ts
@@ -0,0 +1,516 @@
+import { test, type Page, expect } from '@playwright/test';
+import { createTestDriver } from './driver';
+import { AxeBuilder } from '@axe-core/playwright';
+
+async function setup(page: Page, exampleName: string) {
+ await page.goto(`headless/carousel/${exampleName}`);
+
+ const driver = createTestDriver(page);
+
+ return {
+ driver,
+ };
+}
+
+test.describe('Mouse Behavior', () => {
+ test(`GIVEN a carousel
+ WHEN clicking on the next button
+ THEN it should move to the next slide
+ `, async ({ page }) => {
+ /*
+ example that gets used goes here. In this case it's hero from:
+ apps/website/src/routes/docs/headless/carousel/examples/hero.tsx
+
+ If you type in 'test' in the setup parameter it will look for the test.tsx file
+ */
+ const { driver: d } = await setup(page, 'hero');
+
+ await d.getNextButton().click();
+
+ // every slide might be "visible" in the case of scroller carousels. It might be easier to check if the slide has the data-active attribute.
+ await expect(d.getSlideAt(1)).toBeVisible();
+ });
+
+ test(`GIVEN a carousel
+ WHEN clicking on the previous button
+ THEN it should move to the previous slide
+ `, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // initial setup (if this gets used often we can make it a function in dthe drriver)
+ await d.getNextButton().click();
+ await expect(d.getSlideAt(1)).toBeVisible();
+
+ // test previous work
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN using a pointer device and dragging to the left
+ THEN it should move to the next slide
+ `, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN using a pointer device and dragging to the right
+ THEN it should move to the previous slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN clicking on the pagination bullets
+ THEN it should move to the corresponding slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN on the first slide and the mouse is moved far right
+ THEN it should stay snapped on the first slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN on the last slide and the mouse is moved far left
+ THEN it should stay snapped on the last slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+});
+
+test.describe('Keyboard Behavior', () => {
+ test(`GIVEN a carousel
+ WHEN the enter key is pressed on the focused next button
+ THEN it should move to the next slide
+ `, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ await d.getNextButton().press('Enter');
+
+ await expect(d.getSlideAt(1)).toBeVisible();
+ });
+
+ test(`GIVEN a carousel
+ WHEN the enter key is pressed on the focused previous button
+ THEN it should move to the previous slide
+ `, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the first bullet is focused and the right arrow key is pressed
+ THEN focus should move to the next bullet
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the 2nd bullet is focused and the left arrow key is pressed
+ THEN focus should move to the previous bullet
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the first bullet is focused and the right arrow key is pressed
+ THEN focus should move to the 2nd slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the 2nd bullet is focused and the left arrow key is pressed
+ THEN it should move to the 1st slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the 1st bullet is focused and the end key is pressed
+ THEN it should move to the last slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN the last bullet is focused and the home key is pressed
+ THEN it should move to the first slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+});
+
+test.describe('Mobile / Touch Behavior', () => {
+ test(`GIVEN a carousel with dragging enabled
+ WHEN swiping to the left
+ THEN it should move to the next slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN swiping to the right
+ THEN it should move to the previous slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN tapping on the pagination bullets
+ THEN it should move to the corresponding slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN on the first slide and is mobile swiped far left
+ THEN it should stay snapped on the last slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with dragging enabled
+ WHEN on the last slide and is mobile swiped far right
+ THEN it should stay snapped on the first slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+});
+
+test.describe('Accessibility', () => {
+ test('Axe Validation Test', async ({ page }) => {
+ await setup(page, 'hero');
+
+ const initialResults = await new AxeBuilder({ page })
+ .include('[data-qui-carousel]')
+ .analyze();
+
+ expect(initialResults.violations).toEqual([]);
+ });
+
+ test(`GIVEN a carousel
+ WHEN it is rendered
+ THEN it should have an accessible name
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ await expect(d.getRoot()).toBeVisible();
+ await expect(d.getRoot()).toHaveAttribute('aria-label', 'content slideshow');
+ });
+
+ test(`GIVEN a carousel with a title
+ WHEN it is rendered
+ THEN the carousel container should have the role of group
+ AND the title should be the accessible name`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'title');
+
+ await expect(d.getRoot()).toBeVisible();
+ await expect(d.getRoot()).toHaveAttribute('aria-labelledby', 'Favorite Colors');
+ });
+
+ test(`GIVEN a carousel
+ WHEN it is rendered
+ THEN the carousel container should have the role of group
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel
+ WHEN it is rendered
+ THEN the items should have a posinset of its current index
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN it is rendered
+ THEN the parent of the slide tabs should have the role of tablist
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a pagination control
+ WHEN it is rendered
+ THEN each bullet should have the role of tab
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'pagination');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ // it should also have aria-live polite and announce the current slide
+
+ test(`GIVEN a carousel
+ WHEN a slide is not the current slide
+ THEN it should be inert
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel
+ WHEN on the current slide
+ THEN items inside the slide should be the only focusable items
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with loop disabled
+ WHEN on the last slide
+ THEN the previous button should be focused
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with loop disabled
+ WHEN on the first slide
+ THEN the next button should be focused
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+});
+
+test.describe('Props', () => {
+ test.describe('loop', () => {
+ test(`GIVEN a carousel with loop disabled
+ WHEN on the last slide
+ THEN the next button should be disabled
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with loop disabled
+ WHEN on the first slide
+ THEN the previous button should be disabled
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'hero');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with loop enabled
+ WHEN on the last slide and the next button is clicked
+ THEN it should move to the first slide
+`, async ({ page }) => {
+ // JACK HASNT DONE THIS YET
+ const { driver: d } = await setup(page, 'loop');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with loop enabled
+ WHEN on the first slide and the previous button is clicked
+ THEN it should move to the first slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'loop');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+ });
+
+ test(`GIVEN a carousel with a prop changing its initial index
+ WHEN rendered
+ THEN its scroll position should be at the initial index slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'initial');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test.describe('reactive', () => {
+ test(`GIVEN a carousel with a bind prop
+ WHEN rendered
+ THEN the selected slide should be at the initial index slide
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'reactive');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+
+ test(`GIVEN a carousel with a bind prop
+ WHEN the signal passed to bind changes
+ THEN the selected slide should be at the new signal value
+`, async ({ page }) => {
+ const { driver: d } = await setup(page, 'reactive');
+
+ // remove this (there so that TS doesn't complain)
+ d;
+
+ // TODO
+ });
+ });
+});
+
+// TODO: finish test cases, create new ones based on the expected behavior in Figma.
+
+// Getting a failing test when the test is expected to work helps us find bugs.
+
+// https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ <-- another good resource for what functionality is expected
+
+/**
+ *
+ * When there is a use case that the default hero.tsx example doesn't cover, add a new test file in the docs headless/carousel/examples folder.
+ *
+ *
+ */
+
+/**
+ * Future possible tests:
+ * Autoplay
+ *
+ * Snapping between center and end of slides
+ *
+ * Non-scroller or "conditional" carousels
+ *
+ * Multiple slides per view (2-n slides at a time)
+ *
+ * Multiple slider per move (+n slides per navigation)
+ *
+ */
diff --git a/packages/kit-headless/src/components/carousel/carousel.tsx b/packages/kit-headless/src/components/carousel/carousel.tsx
deleted file mode 100644
index c4ece9c04..000000000
--- a/packages/kit-headless/src/components/carousel/carousel.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
- type PropsOf,
- type Signal,
- Slot,
- component$,
- useContextProvider,
- useSignal,
-} from '@builder.io/qwik';
-import { type CarouselContext } from './carousel-context.type';
-import CarouselContextId from './carousel-context-id';
-import { VisuallyHidden } from '../../utils/visually-hidden';
-
-export type CarouselRootProps = PropsOf<'section'> & {
- spaceBetweenSlides?: number;
- 'bind:currSlideIndex'?: Signal
- {Array.from({ length: context.numSlidesSig.value }, (v, i) => i).map((num) => (
- <>
- {renderBullet$ ? (
- renderBullet$(num)
- ) : (
-
- );
- },
-);
+export const CarouselPagination = component$(({ ...props }: CarouselPaginationProps) => {
+ return (
+
- {num}
-
- )}
-
- ))}
-
+
+ );
+});
diff --git a/packages/kit-headless/src/components/carousel/player.tsx b/packages/kit-headless/src/components/carousel/player.tsx
new file mode 100644
index 000000000..884c7b88b
--- /dev/null
+++ b/packages/kit-headless/src/components/carousel/player.tsx
@@ -0,0 +1,80 @@
+import {
+ component$,
+ PropsOf,
+ Slot,
+ useContext,
+ $,
+ useTask$,
+ useSignal,
+} from '@builder.io/qwik';
+import { carouselContextId } from './context';
+import { isServer } from '@builder.io/qwik/build';
+
+export const CarouselPlayer = component$((props: PropsOf<'button'>) => {
+ const context = useContext(carouselContextId);
+ const intervalIdSig = useSignal
+
+ );
+ },
+);
diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx
new file mode 100644
index 000000000..06ed4ac9a
--- /dev/null
+++ b/packages/kit-headless/src/components/carousel/scroller.tsx
@@ -0,0 +1,192 @@
+import {
+ component$,
+ type PropsOf,
+ Slot,
+ useContext,
+ useSignal,
+ $,
+ useTask$,
+} from '@builder.io/qwik';
+import { carouselContextId } from './context';
+import { useStyles$ } from '@builder.io/qwik';
+import styles from './carousel.css?inline';
+import { isServer } from '@builder.io/qwik/build';
+
+type CarouselContainerProps = PropsOf<'div'>;
+
+export const CarouselScroller = component$((props: CarouselContainerProps) => {
+ const context = useContext(carouselContextId);
+ useStyles$(styles);
+ const startXSig = useSignal
+ isTouchDeviceSig.value && isTouchMovingSig.value && updateTouchDeviceIndex$(),
+ ),
+ props.onScroll$,
+ ]}
+ onTouchMove$={() => {
+ isTouchMovingSig.value = true;
+ }}
+ onTouchStart$={() => {
+ isTouchStartSig.value = true;
+ }}
+ window:onTouchStart$={() => {
+ isTouchMovingSig.value = false;
+ isTouchDeviceSig.value = true;
+ }}
+ preventdefault:mousemove
+ data-align={context.alignSig.value}
+ data-initial-touch={isTouchStartSig.value ? '' : undefined}
+ {...props}
+ >
+
+ );
+});
diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx
index dca53fb1b..60ed1c259 100644
--- a/packages/kit-headless/src/components/carousel/slide.tsx
+++ b/packages/kit-headless/src/components/carousel/slide.tsx
@@ -5,115 +5,75 @@ import {
useContext,
useTask$,
useSignal,
+ useComputed$,
$,
} from '@builder.io/qwik';
-import CarouselContextId from './carousel-context-id';
-import { isServer } from '@builder.io/qwik/build';
+import { carouselContextId } from './context';
-export type CarouselSlideProps = PropsOf<'div'>;
+export type CarouselSlideProps = PropsOf<'div'> & {
+ _index?: number;
+};
-export const HCarouselSlide = component$(({ ...props }: CarouselSlideProps) => {
- const context = useContext(CarouselContextId);
+export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProps) => {
+ const context = useContext(carouselContextId);
const slideRef = useSignal
-
+ <>
+ {/* start marker */}
+ {context.initialIndex === _index && context.alignSig.value === 'start' && (
+
+ )}
+ 0 ? 'tabpanel' : undefined}
+ data-qui-carousel-slide
+ data-active={isVisibleSig.value ? '' : undefined}
+ aria-label={`${_index !== undefined && _index + 1} of ${context.numSlidesSig.value}`}
+ onFocusIn$={[handleFocusIn$, props.onFocusIn$]}
+ {...props}
+ >
+
+
+ {/* end marker */}
+ {context.initialIndex === _index && context.alignSig.value === 'end' && (
+
+ )}
+
);
});
diff --git a/packages/kit-headless/src/components/carousel/title.tsx b/packages/kit-headless/src/components/carousel/title.tsx
new file mode 100644
index 000000000..cd1b43771
--- /dev/null
+++ b/packages/kit-headless/src/components/carousel/title.tsx
@@ -0,0 +1,14 @@
+import { component$, Slot, useContext } from '@builder.io/qwik';
+import { carouselContextId } from './context';
+
+/** Used to distinguish accessible label from other carousels */
+export const CarouselTitle = component$(() => {
+ const context = useContext(carouselContextId);
+ const titleId = `${context.localId}-title`;
+
+ return (
+
+
+ );
+});
diff --git a/packages/kit-headless/src/components/carousel/types.ts b/packages/kit-headless/src/components/carousel/types.ts
deleted file mode 100644
index c7a3999f0..000000000
--- a/packages/kit-headless/src/components/carousel/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { type PropsOf } from '@builder.io/qwik';
-
-export type CarouselButtonProps = PropsOf<'button'>;
diff --git a/packages/kit-headless/src/components/carousel/utils.ts b/packages/kit-headless/src/components/carousel/utils.ts
deleted file mode 100644
index c350b8948..000000000
--- a/packages/kit-headless/src/components/carousel/utils.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function getContainerTranslateX(
- containerElement: HTMLDivElement,
- e: PointerEvent,
-): number {
- const style = window.getComputedStyle(containerElement);
- const matrix = new DOMMatrix(style.transform);
- return matrix.m41 + e.movementX;
-}
diff --git a/packages/kit-headless/src/components/collapsible/collapsible.tsx b/packages/kit-headless/src/components/collapsible/collapsible.tsx
index 5ac2f2d0e..aafe8e107 100644
--- a/packages/kit-headless/src/components/collapsible/collapsible.tsx
+++ b/packages/kit-headless/src/components/collapsible/collapsible.tsx
@@ -113,6 +113,7 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
data-disabled={context.disabled ? '' : undefined}
data-open={context.isOpenSig.value ? '' : undefined}
data-closed={!context.isOpenSig.value ? '' : undefined}
+ aria-live="polite"
{...rest}
>