{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "select",
    "type": "registry:component",
    "title": "Select",
    "description": "Native select styled to match the input, with a custom chevron and three sizes set with data-size.",
    "registryDependencies": [
        "tokens",
        "input"
    ],
    "meta": {
        "category": "Forms",
        "layout": "form"
    },
    "files": [
        {
            "path": "components/select.html",
            "type": "registry:file",
            "target": "components/select.html",
            "content": "<!-- Select\n     Native select with a custom chevron. Sizes: sm, default, lg (data-size).\n     Wrap label, select and hint in .dp-field. -->\n\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"tld\">Top level domain</label>\n  <select class=\"dp-select\" id=\"tld\">\n    <option value=\"\">Choose a TLD</option>\n    <option>.com</option>\n    <option>.nl</option>\n    <option>.org</option>\n    <option>.io</option>\n  </select>\n</div>\n\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"rows\">Rows per page</label>\n  <select class=\"dp-select\" id=\"rows\" data-size=\"sm\">\n    <option>25</option>\n    <option>50</option>\n    <option>100</option>\n  </select>\n</div>\n\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"region\">Region</label>\n  <select class=\"dp-select\" id=\"region\" disabled>\n    <option>Europe</option>\n  </select>\n</div>\n"
        },
        {
            "path": "components/select.css",
            "type": "registry:file",
            "target": "components/select.css",
            "content": "/* Select\n   Native select styled to match the input field, with a custom chevron.\n   Sizes are set with data-size. Wrap label, control and hint in .dp-field.\n   All colour, radius and type come from tokens.css. */\n\n.dp-select {\n  width: 100%;\n  height: 2.5rem;\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-base);\n  color: var(--dp-navy);\n  background-color: var(--dp-white);\n  border: 1px solid var(--dp-border-neutral);\n  border-radius: var(--dp-radius-xs);\n  padding: 0 calc(var(--dp-space-3) * 2 + 1rem) 0 var(--dp-space-3);\n  appearance: none;\n  cursor: pointer;\n  /* Chevron drawn as an inline SVG, tinted to the muted text colour */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--dp-space-3) center;\n  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);\n}\n\n.dp-select:hover {\n  border-color: var(--dp-blue-400);\n}\n\n.dp-select:focus {\n  outline: none;\n  border-color: var(--dp-primary-bg);\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-select:disabled {\n  background-color: var(--dp-neutral-200);\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n\n.dp-select[aria-invalid=\"true\"] {\n  border-color: var(--dp-danger);\n}\n\n.dp-select[data-size=\"sm\"] {\n  height: 2.125rem;\n  font-size: var(--dp-text-sm);\n}\n\n.dp-select[data-size=\"lg\"] {\n  height: 3rem;\n  font-size: var(--dp-text-lg);\n}\n"
        }
    ]
}