{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "title": "Carousel",
  "description": "Carrousel à défilement horizontal avec contrôles et scroll-snap.",
  "files": [
    {
      "path": "registry/valraiso/carousel/carousel.astro",
      "content": "---\nimport styles from \"./carousel.module.css\";\n\n/**\n * Carousel — défilement horizontal de cartes (`<section>` placées en slot) avec\n * boutons de navigation qui s'activent/désactivent selon le débordement.\n *\n * Comportement : ResizeObserver + scroll-spy pour activer les contrôles,\n * scroll-snap, défilement fluide, nettoyage sur `astro:before-swap`.\n *\n * Personnalisation :\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *  - variables CSS : --carousel-inset-start / --carousel-inset-end (marges de\n *    scroll), --ads-carousel-control-bg, --ads-carousel-control-disabled-bg,\n *    --ads-carousel-control-color, --ads-carousel-control-size,\n *    --ads-carousel-control-gap.\n */\ninterface Props {\n  class?: string;\n}\n\nconst { class: className } = Astro.props;\n---\n\n<div class:list={[styles.carousel, className]} data-carousel>\n  <div class={styles.controls} data-controls>\n    <button\n      class={styles.control}\n      data-control=\"prev\"\n      disabled\n      aria-label=\"Précédent\"\n    >\n      <svg\n        class={styles.controlIcon}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M15 18l-6-6 6-6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          fill=\"none\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n    <button\n      class={styles.control}\n      data-control=\"next\"\n      disabled\n      aria-label=\"Suivant\"\n    >\n      <svg\n        class={styles.controlIcon}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M9 18l6-6-6-6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          fill=\"none\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n  <div class={styles.inner} data-inner>\n    <slot />\n  </div>\n</div>\n\n<script>\n  function initCarousel(carousel: HTMLElement) {\n    const inner = carousel.querySelector<HTMLElement>(\"[data-inner]\");\n    const controls = carousel.querySelector<HTMLElement>(\"[data-controls]\");\n    const prevBtn = carousel.querySelector<HTMLButtonElement>(\n      '[data-control=\"prev\"]',\n    );\n    const nextBtn = carousel.querySelector<HTMLButtonElement>(\n      '[data-control=\"next\"]',\n    );\n\n    if (!inner || !controls || !prevBtn || !nextBtn) return;\n\n    function getCards(): HTMLElement[] {\n      const zone = inner!.firstElementChild as HTMLElement | null;\n      if (!zone) return [];\n      return Array.from(zone.querySelectorAll<HTMLElement>(\":scope > section\"));\n    }\n\n    function getInsetStart(): number {\n      const v = parseFloat(getComputedStyle(inner!).scrollPaddingInlineStart);\n      return Number.isFinite(v) ? v : 0;\n    }\n\n    function refreshControls() {\n      const cards = getCards();\n      if (!cards.length) {\n        controls!.style.display = \"none\";\n        return;\n      }\n\n      const maxScroll = inner!.scrollWidth - inner!.clientWidth;\n      const hasOverflow = maxScroll > 1;\n      controls!.style.display = hasOverflow ? \"\" : \"none\";\n      if (!hasOverflow) return;\n\n      prevBtn!.disabled = inner!.scrollLeft <= 0;\n      nextBtn!.disabled = inner!.scrollLeft >= maxScroll - 1;\n    }\n\n    function slideTo(direction: -1 | 1) {\n      const cards = getCards();\n      if (!cards.length) return;\n\n      const insetStart = getInsetStart();\n      const scrollLeft = inner!.scrollLeft;\n      const current = cards.findLastIndex(\n        (c) => c.offsetLeft <= scrollLeft + insetStart + 1,\n      );\n      const target = Math.max(\n        0,\n        Math.min(cards.length - 1, (current < 0 ? 0 : current) + direction),\n      );\n\n      const maxScroll = inner!.scrollWidth - inner!.clientWidth;\n      const rawLeft =\n        target === cards.length - 1\n          ? maxScroll\n          : cards[target].offsetLeft - insetStart;\n      const left = Math.max(0, Math.min(maxScroll, rawLeft));\n\n      inner!.scrollTo({ left, behavior: \"smooth\" });\n    }\n\n    prevBtn.addEventListener(\"click\", () => slideTo(-1));\n    nextBtn.addEventListener(\"click\", () => slideTo(1));\n    inner.addEventListener(\"scroll\", refreshControls, { passive: true });\n\n    const resizeObserver = new ResizeObserver(refreshControls);\n    resizeObserver.observe(inner);\n    const zone = inner.firstElementChild as HTMLElement | null;\n    if (zone) resizeObserver.observe(zone);\n\n    refreshControls();\n    document.fonts?.ready?.then(refreshControls);\n\n    document.addEventListener(\n      \"astro:before-swap\",\n      () => {\n        resizeObserver.disconnect();\n        inner.removeEventListener(\"scroll\", refreshControls);\n      },\n      { once: true },\n    );\n  }\n\n  function mountAll() {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-carousel]\")\n      .forEach((carousel) => {\n        initCarousel(carousel);\n      });\n  }\n\n  document.addEventListener(\"astro:page-load\", mountAll);\n  mountAll();\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/carousel/carousel.astro"
    },
    {
      "path": "registry/valraiso/carousel/carousel.module.css",
      "content": ".carousel {\n  position: relative;\n}\n\n.inner {\n  position: relative;\n  display: flex;\n  overflow-x: auto;\n  scrollbar-width: none;\n  scroll-snap-type: x proximity;\n  scroll-behavior: smooth;\n  padding-inline-start: var(--carousel-inset-start, 0px);\n  scroll-padding-inline-start: var(--carousel-inset-start, 0px);\n  scroll-padding-inline-end: var(--carousel-inset-end, 0px);\n}\n\n/* Espaceur de fin : étend physiquement la zone scrollable pour que le scroll-padding-inline-end soit atteignable (contourne le bug flex+overflow qui ignore padding-inline-end) */\n.inner::after {\n  content: \"\";\n  flex: 0 0 var(--carousel-inset-end, 0px);\n}\n\n.inner::-webkit-scrollbar {\n  display: none;\n}\n\n.inner :global(section) {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* Dernière carte : snap-end pour rester atteignable quand son snap \"start\" dépasserait maxScroll */\n.inner :global(section:last-child) {\n  scroll-snap-align: end;\n}\n\n.controls {\n  position: absolute;\n  bottom: calc(100% - 16px);\n  right: 16px;\n  display: flex;\n  gap: var(--ads-carousel-control-gap, 10px);\n\n  @media (width >= 420px) {\n    bottom: calc(100% + 16px);\n  }\n\n  @media (width >= 630px) {\n    bottom: calc(100% + 32px);\n  }\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(\n    --ads-carousel-control-bg,\n    hsl(var(--accent, 200 80% 45%))\n  );\n  cursor: pointer;\n  padding: var(--ads-carousel-control-size, 10px);\n  border: none;\n  border-radius: 50%;\n}\n\n.control:disabled {\n  background-color: var(\n    --ads-carousel-control-disabled-bg,\n    hsla(var(--light-grey, 0 0% 80%), 30%)\n  );\n  cursor: default;\n}\n\n.controlIcon {\n  flex: 0 0 14px;\n  height: 14px;\n  width: 14px;\n  color: var(--ads-carousel-control-color, hsl(var(--white, 0 0% 100%)));\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/carousel/carousel.module.css"
    }
  ],
  "type": "registry:component"
}