{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select (MIAN)",
  "description": "A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere.",
  "categories": [
    "forms",
    "select",
    "dropdown",
    "picker",
    "options"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/select.css",
      "type": "registry:file",
      "target": "mian/components/select.css",
      "content": ".mn-select {\n  padding-inline-end: 2.25rem; cursor: pointer;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--mn-muted) 50%),\n    linear-gradient(135deg, var(--mn-muted) 50%, transparent 50%);\n  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;\n  background-size: 5px 5px, 5px 5px;\n  background-repeat: no-repeat;\n}\n.mn-select.mn-input-sm, .mn-select.mn-input-lg { padding-inline-end: 2.1rem; }\n.mn-select.mn-input-sm { background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; }\n.mn-select[multiple] { height: auto; padding: .35rem; background-image: none; }\n.mn-select option { color: var(--mn-fg); background: var(--mn-surface); }"
    },
    {
      "path": "mian/examples/select.html",
      "type": "registry:file",
      "target": "mian/examples/select.html",
      "content": "<!-- Basic -->\n<div class=\"mn-field\" style=\"max-width:20rem\">\n  <label class=\"mn-label\" for=\"sel-1\">Country</label>\n  <select class=\"mn-select\" id=\"sel-1\">\n    <option>Romania</option><option>Japan</option><option>Vietnam</option><option>Malaysia</option>\n  </select>\n</div>\n\n<!-- With groups -->\n<select class=\"mn-select\" style=\"max-width:20rem\" aria-label=\"Noodle\">\n  <optgroup label=\"Japan\"><option>Udon</option><option>Soba</option><option>Ramen</option></optgroup>\n  <optgroup label=\"Vietnam\"><option>Pho</option><option>Bún</option></optgroup>\n</select>"
    }
  ],
  "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/select",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-select",
        "mn-input-sm · mn-input-lg"
      ],
      "accessibility": [
        "It is a real select: every assistive technology already knows how to use it. For search-as-you-type, use Combobox."
      ],
      "intents": [
        "dropdown select",
        "choose from list",
        "country select",
        "native select"
      ]
    }
  }
}