{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "type": "registry:ui",
  "title": "Carousel (MIAN)",
  "description": "A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots.",
  "categories": [
    "layout & utilities",
    "carousel",
    "slider",
    "gallery",
    "slideshow"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/carousel.css",
      "type": "registry:file",
      "target": "mian/components/carousel.css",
      "content": ".mn-carousel { position: relative; }\n.mn-carousel-track {\n  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;\n  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;\n  border-radius: var(--mn-radius-box);\n}\n.mn-carousel-track::-webkit-scrollbar { display: none; }\n.mn-carousel-track:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-carousel-item { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }\n.mn-carousel-peek .mn-carousel-item { flex-basis: 82%; }\n.mn-carousel-multi .mn-carousel-item { flex-basis: calc((100% - 2rem) / 3); }\n@media (max-width: 40rem) { .mn-carousel-multi .mn-carousel-item { flex-basis: 82%; } }\n.mn-carousel-prev, .mn-carousel-next {\n  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;\n  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: 50%;\n  background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-md); cursor: pointer;\n}\n.mn-carousel-prev { left: .6rem; } .mn-carousel-next { right: .6rem; }\n.mn-carousel-prev:disabled, .mn-carousel-next:disabled { opacity: 0; pointer-events: none; }\n.mn-carousel-prev:focus-visible, .mn-carousel-next:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-carousel-prev svg, .mn-carousel-next svg { width: 1rem; height: 1rem; }\n.mn-carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .75rem; }\n.mn-carousel-dots button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: var(--mn-input); cursor: pointer; transition: width var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); }\n.mn-carousel-dots button[aria-current=\"true\"] { width: 1.25rem; background: var(--mn-fg); }\n.mn-carousel-dots button:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n@media (prefers-reduced-motion: reduce) { .mn-carousel-track { scroll-behavior: auto; } }"
    },
    {
      "path": "mian/examples/carousel.html",
      "type": "registry:file",
      "target": "mian/examples/carousel.html",
      "content": "<!-- With controls -->\n<div class=\"mn-carousel mn-carousel-peek\" aria-label=\"Featured noodles\" style=\"max-width:34rem\">\n  <div class=\"mn-carousel-track\">\n    <div class=\"mn-carousel-item\"><div class=\"mn-card mn-card-flat\" style=\"height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 10%, var(--mn-surface))\"><span class=\"mn-h3\">Udon</span></div></div>\n    <div class=\"mn-carousel-item\"><div class=\"mn-card mn-card-flat\" style=\"height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 18%, var(--mn-surface))\"><span class=\"mn-h3\">Soba</span></div></div>\n    <div class=\"mn-carousel-item\"><div class=\"mn-card mn-card-flat\" style=\"height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 26%, var(--mn-surface))\"><span class=\"mn-h3\">Ramen</span></div></div>\n    <div class=\"mn-carousel-item\"><div class=\"mn-card mn-card-flat\" style=\"height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 34%, var(--mn-surface))\"><span class=\"mn-h3\">Pho</span></div></div>\n    <div class=\"mn-carousel-item\"><div class=\"mn-card mn-card-flat\" style=\"height:10rem;display:grid;place-items:center;background:color-mix(in oklab, var(--mn-primary) 42%, var(--mn-surface))\"><span class=\"mn-h3\">Mee</span></div></div>\n  </div>\n  <button class=\"mn-carousel-prev\" aria-label=\"Previous slide\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 6-6 6 6 6\"/></svg></button>\n  <button class=\"mn-carousel-next\" aria-label=\"Next slide\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 6 6 6-6 6\"/></svg></button>\n  <div class=\"mn-carousel-dots\"></div>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/carousel",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-carousel",
        "mn-carousel-track · mn-carousel-item",
        "mn-carousel-prev · mn-carousel-next · mn-carousel-dots",
        "mn-carousel-peek · mn-carousel-multi"
      ],
      "accessibility": [
        "The track is a focusable region; arrow keys move one slide. Each slide is labelled \"n of N\". Nothing auto-advances."
      ],
      "intents": [
        "carousel",
        "slider of cards",
        "horizontal scroll",
        "image slider"
      ]
    }
  }
}