{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "title": "Combobox (MIAN)",
  "description": "Autocomplete: a text input that filters a listbox as you type. Keyboard navigation and aria-activedescendant included.",
  "categories": [
    "forms",
    "combobox",
    "autocomplete",
    "typeahead",
    "searchable select"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/combobox.css",
      "type": "registry:file",
      "target": "mian/components/combobox.css",
      "content": ".mn-combobox { position: relative; }\n.mn-combobox > .mn-input { padding-inline-end: 2.25rem; }\n.mn-combobox-toggle {\n  position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.25rem;\n  display: grid; place-items: center; border: 0; background: none; color: var(--mn-muted); cursor: pointer;\n  border-radius: 0 var(--mn-radius-field) var(--mn-radius-field) 0;\n}\n.mn-combobox-toggle svg { width: 1rem; height: 1rem; transition: transform var(--mn-duration) var(--mn-ease); }\n.mn-combobox[data-open] .mn-combobox-toggle svg { transform: rotate(180deg); }\n.mn-combobox-list {\n  position: absolute; z-index: 50; inset-inline: 0; top: calc(100% + 4px);\n  max-height: 16rem; overflow: auto; margin: 0; padding: 4px; list-style: none;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-popover); box-shadow: var(--mn-shadow-lg);\n  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);\n}\n.mn-combobox-list[hidden] { display: none; }\n.mn-combobox-list > [role=\"option\"] {\n  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;\n  border-radius: calc(var(--mn-radius-box) - 4px); cursor: pointer;\n}\n.mn-combobox-list > [role=\"option\"][data-active] { background: var(--mn-hover); }\n.mn-combobox-list > [role=\"option\"][aria-selected=\"true\"] { font-weight: 600; }\n.mn-combobox-list > [role=\"option\"][aria-selected=\"true\"]::after { content: \"✓\"; margin-inline-start: auto; }\n.mn-combobox-list > [role=\"option\"][hidden] { display: none; }\n.mn-combobox-empty { padding: .6rem; color: var(--mn-muted); text-align: center; }"
    },
    {
      "path": "mian/examples/combobox.html",
      "type": "registry:file",
      "target": "mian/examples/combobox.html",
      "content": "<!-- Framework picker -->\n<div class=\"mn-field\" style=\"max-width:22rem\">\n  <label class=\"mn-label\" for=\"cb-1\">Framework</label>\n  <div class=\"mn-combobox\">\n    <input class=\"mn-input\" id=\"cb-1\" placeholder=\"Search frameworks…\">\n    <button class=\"mn-combobox-toggle\" type=\"button\" aria-label=\"Show frameworks\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></button>\n    <ul class=\"mn-combobox-list\">\n      <li role=\"option\" data-value=\"astro\">Astro</li>\n      <li role=\"option\" data-value=\"laravel\">Laravel</li>\n      <li role=\"option\" data-value=\"next\">Next.js</li>\n      <li role=\"option\" data-value=\"nuxt\">Nuxt</li>\n      <li role=\"option\" data-value=\"rails\">Ruby on Rails</li>\n      <li role=\"option\" data-value=\"svelte\">SvelteKit</li>\n      <li role=\"option\" data-value=\"wordpress\">WordPress</li>\n    </ul>\n  </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/combobox",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-combobox",
        "mn-combobox-list",
        "mn-combobox-toggle"
      ],
      "accessibility": [
        "Follows the WAI-ARIA combobox pattern: role=\"combobox\", aria-expanded, aria-controls, aria-activedescendant.",
        "ArrowDown opens and moves, Enter selects, Escape closes then clears. Focus never leaves the input.",
        "Emits mn:change with the selected value."
      ],
      "intents": [
        "autocomplete",
        "searchable select",
        "typeahead",
        "filter as you type"
      ]
    }
  }
}