{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "title": "Tabs (MIAN)",
  "description": "Switch between views. Underlined, boxed (segmented), pill and vertical variants; full WAI-ARIA keyboard support.",
  "categories": [
    "navigation",
    "tabs",
    "tab bar",
    "segmented",
    "views"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/tabs.css",
      "type": "registry:file",
      "target": "mian/components/tabs.css",
      "content": ".mn-tabs { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }\n.mn-tab-list { position: relative; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-tab-list::-webkit-scrollbar { display: none; }\n.mn-tab {\n  position: relative; display: inline-flex; align-items: center; gap: .45rem; flex: none;\n  height: var(--mn-size-md); padding: 0 .9rem;\n  border: 0; background: none; color: var(--mn-muted);\n  font: 500 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap; cursor: pointer;\n  transition: color var(--mn-duration) var(--mn-ease);\n}\n.mn-tab::after { content: \"\"; position: absolute; inset: auto .5rem calc(var(--mn-border-w) * -1); height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--mn-duration) var(--mn-ease); }\n.mn-tab:hover { color: var(--mn-fg); }\n.mn-tab[aria-selected=\"true\"] { color: var(--mn-fg); }\n.mn-tab[aria-selected=\"true\"]::after { background: var(--mn-fg); }\n.mn-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); border-radius: var(--mn-radius-field); }\n.mn-tab svg { width: 1rem; height: 1rem; }\n@media (max-width: 26rem) { .mn-tab { padding-inline: .5rem; } }\n.mn-tab-panel:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); }\n.mn-tab-panel[hidden] { display: none; }\n/* Boxed variant: the segmented look. */\n.mn-tabs-boxed .mn-tab-list { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border: 0; border-radius: calc(var(--mn-radius-field) + 3px); background: var(--mn-surface-2); }\n.mn-tabs-boxed .mn-tab { height: calc(var(--mn-size-md) - 6px); border-radius: var(--mn-radius-field); }\n.mn-tabs-boxed .mn-tab::after { display: none; }\n.mn-tabs-boxed .mn-tab[aria-selected=\"true\"] { background: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border); }\n.mn-tabs-pills .mn-tab-list { border: 0; gap: .25rem; }\n.mn-tabs-pills .mn-tab { border-radius: 999px; height: var(--mn-size-sm); }\n.mn-tabs-pills .mn-tab::after { display: none; }\n.mn-tabs-pills .mn-tab[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-tabs-vertical { flex-direction: row; }\n.mn-tabs-vertical .mn-tab-list { flex-direction: column; border-bottom: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); min-width: 10rem; }\n.mn-tabs-vertical .mn-tab { justify-content: flex-start; }\n.mn-tabs-vertical .mn-tab::after { inset: .4rem calc(var(--mn-border-w) * -1) .4rem auto; width: 2px; height: auto; }"
    },
    {
      "path": "mian/examples/tabs.html",
      "type": "registry:file",
      "target": "mian/examples/tabs.html",
      "content": "<!-- Underlined -->\n<div class=\"mn-tabs\">\n  <div class=\"mn-tab-list\" aria-label=\"Account\">\n    <button class=\"mn-tab\" aria-selected=\"true\">Account</button>\n    <button class=\"mn-tab\">Password</button>\n    <button class=\"mn-tab\">Notifications</button>\n  </div>\n  <div class=\"mn-tab-panel\">Make changes to your account here.</div>\n  <div class=\"mn-tab-panel\">Change your password here.</div>\n  <div class=\"mn-tab-panel\">Choose what we email you about.</div>\n</div>\n\n<!-- Boxed -->\n<div class=\"mn-tabs mn-tabs-boxed\">\n  <div class=\"mn-tab-list\" aria-label=\"Period\">\n    <button class=\"mn-tab\">Day</button><button class=\"mn-tab\" aria-selected=\"true\">Week</button><button class=\"mn-tab\">Month</button><button class=\"mn-tab\">Year</button>\n  </div>\n  <div class=\"mn-tab-panel\">Daily figures.</div><div class=\"mn-tab-panel\">Weekly figures.</div><div class=\"mn-tab-panel\">Monthly figures.</div><div class=\"mn-tab-panel\">Yearly figures.</div>\n</div>\n\n<!-- Pills with icons -->\n<div class=\"mn-tabs mn-tabs-pills\">\n  <div class=\"mn-tab-list\" aria-label=\"Media\">\n    <button class=\"mn-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11 12 3l9 8\"/><path d=\"M5 10v10h14V10\"/></svg> Overview</button><button class=\"mn-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\"/></svg> Analytics</button><button class=\"mn-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> Reports</button>\n  </div>\n  <div class=\"mn-tab-panel\">Overview content.</div><div class=\"mn-tab-panel\">Analytics content.</div><div class=\"mn-tab-panel\">Reports content.</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/tabs",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-tabs",
        "mn-tab-list · mn-tab · mn-tab-panel",
        "mn-tabs-boxed · mn-tabs-pills · mn-tabs-vertical"
      ],
      "accessibility": [
        "role=\"tablist\", \"tab\", \"tabpanel\" with aria-controls, aria-labelledby and aria-selected. Arrow keys, Home and End move and activate; Tab moves into the panel."
      ],
      "intents": [
        "tabs",
        "switch views",
        "segmented tabs",
        "settings sections"
      ]
    }
  }
}