{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slides",
  "type": "registry:ui",
  "title": "Slides (MIAN)",
  "description": "A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress.",
  "categories": [
    "sections",
    "slides",
    "presentation",
    "deck",
    "pitch deck"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/slides.css",
      "type": "registry:file",
      "target": "mian/components/slides.css",
      "content": ".mn-deck { position: relative; }\n.mn-slides { container: mn / inline-size; height: var(--h, 100dvh); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; }\n.mn-slides::-webkit-scrollbar { display: none; }\n.mn-slides:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: -2px; }\n.mn-slide { display: grid; align-content: center; gap: 1.5rem; min-height: 100%; padding: clamp(1.5rem, 7cqi, 6rem); scroll-snap-align: start; scroll-snap-stop: always; }\n.mn-slide > * { margin: 0; }\n.mn-slide-center { justify-items: center; text-align: center; }\n.mn-deck-bar { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .3rem .3rem .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--mn-surface) 88%, transparent); box-shadow: var(--mn-shadow-md); color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }\n.mn-deck-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: color-mix(in oklab, var(--mn-fg) 8%, transparent); }\n.mn-deck-progress::after { content: \"\"; position: absolute; inset: 0 auto 0 0; width: var(--_v, 0%); background: var(--mn-primary); transition: width 300ms var(--mn-ease); }\n@media (prefers-reduced-motion: reduce) { .mn-slides { scroll-behavior: auto; } }"
    },
    {
      "path": "mian/examples/slides.html",
      "type": "registry:file",
      "target": "mian/examples/slides.html",
      "content": "<!-- Deck -->\n<div class=\"mn-deck\" style=\"border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden\">\n  <div class=\"mn-deck-progress\"></div>\n  <div class=\"mn-slides\" tabindex=\"0\" aria-label=\"Ledger, Series A\" style=\"--h:22rem\">\n    <section class=\"mn-slide mn-slide-center\"><p class=\"mn-eyebrow\">Series A · 2026</p><h3 class=\"mn-title\">Close the books in four days.</h3><p class=\"mn-intro\">Ledger, for finance teams of 5 to 500.</p></section>\n    <section class=\"mn-slide\"><p class=\"mn-eyebrow\">The problem</p><h3 class=\"mn-title\">Month-end takes 14 days. 10 of them are data entry.</h3></section>\n    <section class=\"mn-slide\"><dl class=\"mn-figures\" style=\"--cols:3\"><div><dt>Customers</dt><dd>1,400</dd></div><div><dt>ARR</dt><dd>€8.2 M</dd></div><div><dt>Net retention</dt><dd>131%</dd></div></dl></section>\n  </div>\n  <div class=\"mn-deck-bar\"><span data-mn-slide-count>1 / 3</span><button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm\" type=\"button\" data-mn-slide=\"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><button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm\" type=\"button\" data-mn-slide=\"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></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/slides",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-deck",
        "mn-slides",
        "mn-slide",
        "mn-deck-bar",
        "mn-deck-progress"
      ],
      "accessibility": [
        "The deck is focusable with an aria-label; arrow keys, Page Up/Down, Space, Home and End move between slides.",
        "Each slide gets aria-roledescription=\"slide\" and a “3 of 8” label; the counter is visible text.",
        "Scroll snapping stays usable with a mouse wheel, touch and assistive tech: nothing is hidden."
      ],
      "intents": [
        "presentation website",
        "pitch deck",
        "keynote",
        "slides",
        "investor deck",
        "one idea per screen"
      ]
    }
  }
}