{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "spinner",
    "type": "registry:component",
    "title": "Spinner",
    "description": "Spinning loading indicator in three sizes. Inherits the current colour or takes a neutral tone, and slows under reduced-motion.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Feedback",
        "layout": "cluster"
    },
    "files": [
        {
            "path": "components/spinner.html",
            "type": "registry:file",
            "target": "components/spinner.html",
            "content": "<!-- Spinner\n     Sizes: sm, default, lg (data-size). Tone: default (blue) or neutral.\n     Include a label for screen readers. -->\n\n<span class=\"dp-spinner\" data-size=\"sm\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"dp-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"dp-spinner\" data-size=\"lg\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"dp-spinner\" data-tone=\"neutral\" role=\"status\" aria-label=\"Loading\"></span>\n"
        },
        {
            "path": "components/spinner.css",
            "type": "registry:file",
            "target": "components/spinner.css",
            "content": "/* Spinner\n   A spinning loading indicator. Sizes are set with data-size (sm, default,\n   lg). Inherits the current text colour, or set data-tone. Add a visually\n   hidden label for screen readers. Colour from tokens.css. */\n\n.dp-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid var(--dp-blue-200);\n  border-top-color: var(--dp-primary-bg);\n  border-radius: var(--dp-radius-full);\n  animation: dp-spin 0.7s linear infinite;\n}\n\n.dp-spinner[data-size=\"sm\"] {\n  width: 1rem;\n  height: 1rem;\n  border-width: 2px;\n}\n\n.dp-spinner[data-size=\"lg\"] {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-width: 3px;\n}\n\n.dp-spinner[data-tone=\"neutral\"] {\n  border-color: var(--dp-neutral-300);\n  border-top-color: var(--dp-text-muted);\n}\n\n@keyframes dp-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dp-spinner { animation-duration: 2s; }\n}\n"
        }
    ]
}