feat: carousel waapi new

.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

@@ -5,37 +5,75 @@ export default component$(() => {
   const colors = ["red", "green", "blue", "yellow", "purple", "orange", "pink"];
 
   const selectedSlide = useSignal("yellow");
-  // const isRendered = useSignal(false);
+  const isRendered = useSignal(false);
 
   return (
-    <Carousel.Root
-      class="carousel-root"
-      autoplayInterval={1000}
-      bind:value={selectedSlide}
-    >
-      <Carousel.PrevTrigger>Prev</Carousel.PrevTrigger>
-      <Carousel.NextTrigger>Next</Carousel.NextTrigger>
-      <div class="border border-red-500">
-        <Carousel.ScrollArea class="h-40">
+    <>
+      <button type="button" onClick$={() => (isRendered.value = true)}>
+        Render
+      </button>
+
+      {isRendered.value && (
+        <Carousel.Root class="carousel-root" autoplayInterval={1000} loop move="view">
+          <Carousel.PrevTrigger>Prev</Carousel.PrevTrigger>
+          <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+          <div class="border border-red-500">
+            <Carousel.ScrollArea class="h-40 gap-4">
+              {colors.map((color) => (
+                <Carousel.Item
+                  value={color}
+                  key={color}
+                  class="bg-red-50 h-20 border-4 border-red-500 w-[31.75%]"
+                >
+                  {color}
+                </Carousel.Item>
+              ))}
+            </Carousel.ScrollArea>
+          </div>
+
+          <Carousel.NavList>
+            {colors.map((color) => (
+              <Carousel.NavTrigger key={color}>{color}</Carousel.NavTrigger>
+            ))}
+          </Carousel.NavList>
+
+          <p>Selected slide: {selectedSlide.value}</p>
+
+          <button onClick$={() => (selectedSlide.value = "green")}>Set to green</button>
+
+          <Carousel.PlayTrigger>Autoplay</Carousel.PlayTrigger>
+        </Carousel.Root>
+      )}
+
+      <Carousel.Root class="carousel-root" autoplayInterval={1000} loop move="view">
+        <Carousel.PrevTrigger>Prev</Carousel.PrevTrigger>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+        <div class="border border-red-500">
+          <Carousel.ScrollArea class="h-40 gap-4">
+            {colors.map((color) => (
+              <Carousel.Item
+                value={color}
+                key={color}
+                class="bg-red-50 h-20 border-4 border-red-500 w-[31.75%]"
+              >
+                {color}
+              </Carousel.Item>
+            ))}
+          </Carousel.ScrollArea>
+        </div>
+
+        <Carousel.NavList>
           {colors.map((color) => (
-            <Carousel.Item value={color} key={color} class="carousel-item h-20">
-              {color}
-            </Carousel.Item>
+            <Carousel.NavTrigger key={color}>{color}</Carousel.NavTrigger>
           ))}
-        </Carousel.ScrollArea>
-      </div>
-
-      <Carousel.NavList>
-        {colors.map((color) => (
-          <Carousel.NavTrigger key={color}>{color}</Carousel.NavTrigger>
-        ))}
-      </Carousel.NavList>
+        </Carousel.NavList>
 
-      <p>Selected slide: {selectedSlide.value}</p>
+        <p>Selected slide: {selectedSlide.value}</p>
 
-      <button onClick$={() => (selectedSlide.value = "green")}>Set to green</button>
+        <button onClick$={() => (selectedSlide.value = "green")}>Set to green</button>
 
-      <Carousel.PlayTrigger>Autoplay</Carousel.PlayTrigger>
-    </Carousel.Root>
+        <Carousel.PlayTrigger>Autoplay</Carousel.PlayTrigger>
+      </Carousel.Root>
+    </>
   );
 });

docs/src/routes/components/carousel/index.mdx

@@ -1,5 +1,8 @@
 import Basic from "./examples/basic";
+import { Link } from "@qwik.dev/router"
 
 # Carousel  
 
+<Link class="size-4" href="/components/checkbox">Go to checkbox</Link>
+
 <Basic />

docs/src/routes/components/checkbox/index.mdx

@@ -1,8 +1,11 @@
 import api from "./code-notate/api.json";
 import Template, { config } from "./template";
+import { Link } from "@qwik.dev/router";
 
 # Checkbox
 
+<Link class="size-4" href="/components/carousel">Go to carousel</Link>
+
 <Subtitle>A clickable input that lets users make binary choices or select multiple options.</Subtitle>
 
 <Playground template={Template} config={config} />

docs/vite.config.ts

@@ -1,6 +1,5 @@
 import { resolve } from "node:path";
-import { qdsTransformPlugin } from "@qds.dev/tools/rolldown";
-import { asChild, icons } from "@qds.dev/tools/vite";
+import { asChild, icons, minifyContentPlugin } from "@qds.dev/tools/vite";
 import { qwikVite } from "@qwik.dev/core/optimizer";
 import { qwikRouter } from "@qwik.dev/router/vite";
 import tailwindcss from "@tailwindcss/vite";
@@ -36,8 +35,9 @@ export default defineConfig((): UserConfig => {
     plugins: [
       asChild(),
       icons(),
-      // This plugin handles transforms for our lib author DX. We add it here so it runs in the docs dev mode as well.
-      qdsTransformPlugin(),
+      minifyContentPlugin({
+        outputDir: resolve(__dirname, "../libs/components")
+      }),
       tailwindcss(),
       qwikRouter({
         mdx: {

libs/components/env.d.ts

@@ -1,7 +1,16 @@
 /// <reference types="@qwik.dev/core" />
 
-// CSS inline imports
-declare module "*.css?inline" {
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*?minify" {
   const content: string;
   export default content;
 }
+
+declare module "*.css?inline" {
+  const list: string;
+  export default list;
+}

libs/components/injected-scripts.ts

@@ -0,0 +1,4 @@
+export const INJECTED_SCRIPTS = {
+  "view-navigation":
+    '(()=>{let e=document.currentScript,t=e?.closest(`[ui-qds-carousel-root]`);if(!t||!(t instanceof HTMLElement)||t.dataset.measured)return;t.dataset.measured=`1`;let n=t.id||e?.getAttribute(`ui-scope-id`)||`default`,r=window.carouselState||={};r[n]||={};let i=n=>e?.getAttribute(n)??t.getAttribute(n),a=(n=>e?.hasAttribute(n)??t.hasAttribute(n))(`ui-loop`),o=(e,t)=>{if(e.right<=t.left||e.left>=t.right||e.bottom<=t.top||e.top>=t.bottom)return!1;let n=Math.min(t.right,e.right)-Math.max(t.left,e.left),r=Math.min(t.bottom,e.bottom)-Math.max(t.top,e.top);return n>0&&r>0&&n*r/(e.width*e.height)>=.5},s=globalThis._qdsCache||=new Map,c=e=>{let n=t.querySelector(`[ui-qds-carousel-item]`),r=parseFloat(getComputedStyle(n||t).width)||0,i=parseFloat(getComputedStyle(t).gap)||0,a=`${Math.round(e.width)}|${devicePixelRatio}|${Math.round(r+i)}`;if(s.has(a))return s.get(a);let c=new Set,{width:l,height:u,left:d,top:f}=e;for(let e of[.2,.5,.8])for(let n of[.1,.3,.5,.7,.9]){let r=d+l*n,i=f+u*e;if(r<0||i<0||r>innerWidth||i>innerHeight)continue;let a=document.elementsFromPoint(r,i).find(e=>e.closest(`[ui-qds-carousel-item]`)?.closest(`[ui-qds-carousel-root]`)===t);a&&c.add(a.closest(`[ui-qds-carousel-item]`))}for(let t of c){let n=t.previousElementSibling;for(;n?.hasAttribute(`ui-qds-carousel-item`)&&o(n.getBoundingClientRect(),e);)c.add(n),n=n.previousElementSibling;for(n=t.nextElementSibling;n?.hasAttribute(`ui-qds-carousel-item`)&&o(n.getBoundingClientRect(),e);)c.add(n),n=n.nextElementSibling}for(let e of c)e.setAttribute(`ui-current`,``),e.removeAttribute(`inert`);return s.set(a,c.size),c.size},l=e=>{let o=Number(i(`ui-total-items`)||`0`);r[n].itemsVisible=e;let s=`[ui-qds-carousel-item]:nth-child(-n+${e})`;if(t.querySelectorAll(s).forEach(e=>{e.setAttribute(`ui-current`,``),e.removeAttribute(`inert`)}),e>=o&&o>0){t.setAttribute(`ui-all-fit`,``);return}t.removeAttribute(`ui-all-fit`);let c=a?o-1:o-e,l=[];for(let t=0;t<=c;t+=e)l.push(t);l[l.length-1]!==c&&l.push(c);let u=l.map(e=>`[ui-qds-carousel-nav-trigger][data-qds-index="${e}"]`).join(`,`);t.querySelectorAll(u).forEach(e=>e.setAttribute(`ui-visible`,``))},u=()=>{let e=t.getBoundingClientRect();return e.width===0||e.height===0?!1:(l(c(e)),!0)};requestAnimationFrame(()=>{if(u())return;let e=()=>requestAnimationFrame(()=>requestAnimationFrame(u));addEventListener(`load`,e,{once:!0}),document.fonts?.ready.then(e).catch(()=>{}),`requestIdleCallback`in window&&window.requestIdleCallback(e,{timeout:250})})})();'
+} as const;

libs/components/package.json

@@ -25,21 +25,22 @@
     "build.lib": "rolldown -c rolldown.config.ts",
     "build.types": "tsc --emitDeclarationOnly --outDir ./lib-types && pnpm run transform.types",
     "transform.types": "node ../tools/utils/transform-dts.ts ./src ./lib-types/src",
-    "generate.styles": "node styles/tailwind/generate.ts"
+    "generate.styles": "node styles/tailwind/generate.ts",
+    "dev": "rolldown -c rolldown.config.ts -w"
   },
   "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/rolldown.config.ts

@@ -1,8 +1,4 @@
-import {
-  inlineCssPlugin,
-  qdsTransformPlugin,
-  qwikRolldown
-} from "@qds.dev/tools/rolldown";
+import { inlineCssPlugin, qwikRolldown } from "@qds.dev/tools/rolldown";
 import { type PackageJson, readPackageJson } from "@qds.dev/tools/utils";
 import { qwikRollup } from "@qwik.dev/core/optimizer";
 import { defineConfig } from "rolldown";
@@ -27,12 +23,14 @@ export default defineConfig({
     }),
     // qwikRollup overrides the default output dir to dist, we need to fix this. qwikRolldown overrides it back to lib.
     qwikRolldown(),
-    qdsTransformPlugin(),
     inlineCssPlugin()
   ],
   external: [/^node:.*/, ...excludeAll(dependencies), ...excludeAll(peerDependencies)],
   platform: "neutral",
   resolve: {
     mainFields: ["module", "main"]
+  },
+  watch: {
+    exclude: ["injected-scripts.ts"]
   }
 });

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

@@ -1,6 +1,7 @@
 import {
   $,
   component$,
+  isBrowser,
   type PropsOf,
   Slot,
   useComputed$,
@@ -37,8 +38,31 @@ export const CarouselItem = component$((props: CarouselItemProps) => {
   const isVisible = useComputed$(() => {
     const currentIdx = context.currentIndex.value;
     const start = currentIdx;
-    const end = start + context.itemsPerView.value;
-    return index !== undefined && index >= start && index < end;
+    const itemsPerView = context.itemsPerView.value;
+    const end = start + itemsPerView;
+    const total = context.totalItems.value;
+    const isLoop = context.isLoop.value;
+
+    let shouldBeVisible = index !== undefined && index >= start && index < end;
+
+    if (!shouldBeVisible && isLoop && total > 0 && index !== undefined) {
+      if (end > total) {
+        const wrappedEnd = end % total;
+        shouldBeVisible = index < wrappedEnd;
+      }
+    }
+
+    if (isBrowser && context.scrollAreaRef.value) {
+      if (shouldBeVisible) {
+        itemRef.value?.setAttribute("ui-current", "");
+        itemRef.value?.removeAttribute("inert");
+      } else {
+        itemRef.value?.removeAttribute("ui-current");
+        itemRef.value?.setAttribute("inert", "");
+      }
+    }
+
+    return shouldBeVisible;
   });
 
   const isActive = useComputed$(() => {
@@ -78,7 +102,6 @@ export const CarouselItem = component$((props: CarouselItemProps) => {
 
   return (
     <>
-      <ScrollMarker align="start" index={index} value={itemValue} />
       <Render
         {...rest}
         fallback="div"
@@ -91,42 +114,12 @@ export const CarouselItem = component$((props: CarouselItemProps) => {
         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 />
-        <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}`]: "" }}
-      {...rest}
-    />
-  );
-});

libs/components/src/carousel/carousel-nav-trigger.tsx

@@ -125,6 +125,8 @@ export const CarouselNavTrigger = component$((props: NavTriggerProps) => {
       aria-controls={itemId}
       ui-current={isActiveNavTrigger.value ? "" : undefined}
       ui-qds-scope
+      ui-qds-carousel-nav-trigger
+      data-qds-index={index}
       aria-selected={isActiveNavTrigger.value}
       onClick$={[handleClick$, props.onClick$]}
       onFocus$={[handleFocus$, props.onFocus$]}

libs/components/src/carousel/carousel-next-trigger.tsx

@@ -1,44 +1,15 @@
-import {
-  $,
-  component$,
-  PropsOf,
-  Slot,
-  useContext,
-  useSignal,
-  useTask$
-} from "@qwik.dev/core";
+import { $, component$, PropsOf, Slot, useContext } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { carouselContextId } from "./carousel-root";
+import { getNextValue } from "./carousel-utils";
 
 export const CarouselNextTrigger = component$((props: PropsOf<"button">) => {
   const context = useContext(carouselContextId);
-  const isLastItemInView = useSignal(false);
-  const initialLoad = useSignal(true);
-
-  useTask$(({ track }) => {
-    track(() => context.currentValue.value);
-
-    if (initialLoad.value) return;
-
-    const validValues = context.validValues.value;
-    const currentValue = context.currentValue.value;
-    isLastItemInView.value = validValues.indexOf(currentValue) === validValues.length - 1;
-  });
-
-  useTask$(() => {
-    initialLoad.value = false;
-  });
 
   const handleClick$ = $(() => {
-    const validValues = context.validValues.value;
-    const currentValue = context.currentValue.value;
-    const currentPosition = validValues.indexOf(currentValue);
-
-    if (currentPosition === validValues.length - 1 && context.isRewind.value) {
-      context.currentValue.value = validValues[0];
-    } else {
-      const nextPosition = Math.min(currentPosition + 1, validValues.length - 1);
-      context.currentValue.value = validValues[nextPosition];
+    const nextValue = getNextValue(context);
+    if (nextValue !== undefined) {
+      context.currentValue.value = nextValue;
     }
   });
 
@@ -47,8 +18,6 @@ export const CarouselNextTrigger = component$((props: PropsOf<"button">) => {
       {...props}
       fallback="button"
       internalRef={context.nextButtonRef}
-      aria-disabled={isLastItemInView.value && !context.isRewind.value}
-      ui-disabled={isLastItemInView.value && !context.isRewind.value}
       ui-qds-scope
       onClick$={[handleClick$, props.onClick$]}
       ui-qds-carousel-next-trigger