feat: better scroll markers and gap management in carousel

.cursor/worktrees.json

@@ -0,0 +1,3 @@
+{
+  "setup-worktree": ["npm install"]
+}

docs/package.json

@@ -31,8 +31,8 @@
     "@qds.dev/tools": "workspace:*",
     "@qds.dev/ui": "workspace:*",
     "@qds.dev/utils": "workspace:*",
-    "@qwik.dev/core": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144",
-    "@qwik.dev/router": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "@qwikest/icons": "^0.0.13",
     "@tailwindcss/vite": "^4.1.3",
     "@types/estree-jsx": "1.0.5",

docs/src/routes/components/carousel/examples/basic.tsx

@@ -12,13 +12,18 @@ export default component$(() => {
       class="carousel-root"
       autoplayInterval={1000}
       bind:value={selectedSlide}
+      itemsPerView={3}
     >
       <Carousel.PrevTrigger>Prev</Carousel.PrevTrigger>
       <Carousel.NextTrigger>Next</Carousel.NextTrigger>
       <div class="border border-red-500">
-        <Carousel.ScrollArea class="h-40">
+        <Carousel.ScrollArea class="h-40 gap-4">
           {colors.map((color) => (
-            <Carousel.Item value={color} key={color} class="carousel-item h-20">
+            <Carousel.Item
+              value={color}
+              key={color}
+              class="bg-red-50 h-20 border-4 border-red-500"
+            >
               {color}
             </Carousel.Item>
           ))}

libs/components/package.json

@@ -30,16 +30,16 @@
   "devDependencies": {
     "@fluejs/noscroll": "^1.0.0",
     "@qds.dev/utils": "workspace:*",
-    "@qwik.dev/core": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144",
+    "@qwik.dev/core": "2.0.0-beta.15",
     "@qds.dev/tools": "workspace:*",
     "@types/node": "24.9.0",
     "rolldown": "1.0.0-beta.45",
     "typescript": "5.4.5",
     "uqr": "^0.1.2",
-    "vitest-browser-qwik": "0.0.12"
+    "vitest-browser-qwik": "0.1"
   },
   "peerDependencies": {
-    "@qwik.dev/core": ">=https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144"
+    "@qwik.dev/core": ">=2.0.0-beta.15"
   },
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.6"

libs/components/src/carousel/carousel-item.tsx

@@ -77,56 +77,23 @@ export const CarouselItem = component$((props: CarouselItemProps) => {
   });
 
   return (
-    <>
-      <ScrollMarker align="start" index={index} value={itemValue} />
-      <Render
-        {...rest}
-        fallback="div"
-        internalRef={itemRef}
-        id={itemId}
-        inert={!isVisible.value}
-        hidden={isInactive.value}
-        aria-roledescription="slide"
-        role={context.navTriggerRefsArray.value.length > 0 ? "tabpanel" : undefined}
-        ui-qds-carousel-item
-        ui-qds-scope
-        ui-current={isVisible.value ? "" : undefined}
-        aria-label={`${index + 1} of ${context.totalItems.value}`}
-        onFocusIn$={[handleFocusIn$, rest.onFocusIn$]}
-      >
-        <Slot />
-        <ScrollMarker align="center" index={index} value={itemValue} />
-      </Render>
-      <ScrollMarker align="end" index={index} value={itemValue} />
-    </>
-  );
-});
-
-type ScrollMarkerProps = PropsOf<"div"> & {
-  align: "start" | "center" | "end";
-  index: number;
-  value: string;
-};
-
-const ScrollMarker = component$((props: ScrollMarkerProps) => {
-  const context = useContext(carouselContextId);
-
-  const { align, index, value, ...rest } = props;
-
-  const isVisible = useComputed$(
-    () =>
-      context.startValue === value &&
-      context.currentIndex.value === index &&
-      context.align.value === align
-  );
-
-  return (
-    <div
-      ref={context.scrollStartRef}
-      ui-qds-scroll-start
-      hidden={!isVisible.value}
-      {...{ [`ui-${align}`]: "" }}
+    <Render
       {...rest}
-    />
+      fallback="div"
+      internalRef={itemRef}
+      id={itemId}
+      inert={!isVisible.value}
+      hidden={isInactive.value}
+      aria-roledescription="slide"
+      role={context.navTriggerRefsArray.value.length > 0 ? "tabpanel" : undefined}
+      ui-qds-carousel-item
+      ui-qds-scope
+      ui-current={isVisible.value ? "" : undefined}
+      ui-initial-item={context.startValue === itemValue ? "" : undefined}
+      aria-label={`${index + 1} of ${context.totalItems.value}`}
+      onFocusIn$={[handleFocusIn$, rest.onFocusIn$]}
+    >
+      <Slot />
+    </Render>
   );
 });

libs/components/src/carousel/carousel-root.tsx

@@ -22,7 +22,6 @@ export type CarouselContext = {
   // core state
   localId: string;
   scrollAreaRef: Signal<HTMLDivElement | undefined>;
-  scrollStartRef: Signal<HTMLDivElement | undefined>;
   nextButtonRef: Signal<HTMLButtonElement | undefined>;
   prevButtonRef: Signal<HTMLButtonElement | undefined>;
   isMouseDragging: Signal<boolean>;
@@ -39,7 +38,6 @@ export type CarouselContext = {
   // derived
   isDraggable: Signal<boolean>;
   itemsPerView: Signal<number>;
-  gap: Signal<number>;
   align: Signal<"start" | "center" | "end">;
   isRewind: Signal<boolean>;
   autoPlayIntervalMs: Signal<number>;
@@ -56,9 +54,6 @@ export type CarouselContext = {
 };
 
 export type PublicCarouselRootProps = PropsOf<"div"> & {
-  /** The gap between items */
-  gap?: number;
-
   /** Number of items to show at once */
   itemsPerView?: number;
 
@@ -107,7 +102,6 @@ export const CarouselRoot = component$((props: PublicCarouselRootProps) => {
   const scrollAreaRef = useSignal<HTMLDivElement>();
   const nextButtonRef = useSignal<HTMLButtonElement>();
   const prevButtonRef = useSignal<HTMLButtonElement>();
-  const scrollStartRef = useSignal<HTMLDivElement>();
   const isMouseDragging = useSignal<boolean>(false);
   const itemRefsArray = useSignal<Array<Signal>>([]);
   const itemValuesArray = useSignal<string[]>([]);
@@ -128,7 +122,6 @@ export const CarouselRoot = component$((props: PublicCarouselRootProps) => {
   // derived
   const isDraggable = useComputed$(() => props.draggable ?? true);
   const itemsPerView = useComputed$(() => props.itemsPerView ?? 1);
-  const gap = useComputed$(() => props.gap ?? 0);
   const align = useComputed$(() => props.align ?? "start");
   const isRewind = useComputed$(() => props.rewind ?? false);
 
@@ -202,7 +195,6 @@ export const CarouselRoot = component$((props: PublicCarouselRootProps) => {
     scrollAreaRef,
     nextButtonRef,
     prevButtonRef,
-    scrollStartRef,
     isMouseDragging,
     isMouseWheel,
     itemRefsArray,
@@ -215,7 +207,6 @@ export const CarouselRoot = component$((props: PublicCarouselRootProps) => {
     autoplayValue,
     isDraggable,
     itemsPerView,
-    gap,
     align,
     isRewind,
     autoPlayIntervalMs,
@@ -247,7 +238,6 @@ export const CarouselRoot = component$((props: PublicCarouselRootProps) => {
       ui-vertical={orientation.value === "vertical"}
       style={{
         "--items-per-view": itemsPerView.value,
-        "--gap": `${gap.value}px`,
         "--scroll-snap-align": align.value,
         "--orientation": orientation.value === "vertical" ? "column" : "row"
       }}