{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:ui",
  "title": "Chip (MIAN)",
  "description": "Removable tags and toggleable filter chips.",
  "categories": [
    "data display",
    "chip",
    "tag",
    "token",
    "filter"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/chip.css",
      "type": "registry:file",
      "target": "mian/components/chip.css",
      "content": ".mn-chip {\n  display: inline-flex; align-items: center; gap: .35rem;\n  height: 1.875rem; padding: 0 .35rem 0 .7rem;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px;\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  font: 500 calc(var(--mn-text-sm) - 1px)/1 var(--mn-font); white-space: nowrap;\n}\n.mn-chip:not(:has(.mn-chip-remove)) { padding-inline-end: .7rem; }\n.mn-chip.mn-primary, .mn-chip.mn-accent, .mn-chip.mn-success, .mn-chip.mn-warning, .mn-chip.mn-danger, .mn-chip.mn-info {\n  background: color-mix(in oklab, var(--_c) 13%, transparent); color: var(--_ct); border-color: color-mix(in oklab, var(--_c) 30%, transparent);\n}\n.mn-chip > img { width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-inline-start: -.45rem; object-fit: cover; }\n.mn-chip-remove {\n  display: grid; place-items: center; width: 1.25rem; height: 1.25rem;\n  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer;\n}\n.mn-chip-remove:hover { opacity: 1; background: var(--mn-active); }\n.mn-chip-remove:focus-visible { outline: none; box-shadow: var(--mn-focus); opacity: 1; }\n.mn-chip-remove svg { width: .8rem; height: .8rem; }\nbutton.mn-chip { cursor: pointer; }\nbutton.mn-chip[aria-pressed=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mn-primary); }"
    },
    {
      "path": "mian/examples/chip.html",
      "type": "registry:file",
      "target": "mian/examples/chip.html",
      "content": "<!-- Removable -->\n<div class=\"mn-row\">\n  <span class=\"mn-chip\">Design<button class=\"mn-chip-remove\" aria-label=\"Remove Design\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></span>\n  <span class=\"mn-chip\">Engineering<button class=\"mn-chip-remove\" aria-label=\"Remove Engineering\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></span>\n  <span class=\"mn-chip mn-primary\">Research<button class=\"mn-chip-remove\" aria-label=\"Remove Research\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></span>\n</div>\n\n<!-- Filters -->\n<div class=\"mn-row\" role=\"group\" aria-label=\"Filters\">\n  <button class=\"mn-chip\" aria-pressed=\"true\">All</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Open</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Closed</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Mine</button>\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/chip",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-chip",
        "mn-chip-remove",
        "button.mn-chip[aria-pressed]"
      ],
      "accessibility": [
        "Each remove button needs a label naming what it removes. Focus moves to the neighbouring chip after removal."
      ],
      "intents": [
        "filter chips",
        "removable tags",
        "selected filters",
        "toggle filters"
      ]
    }
  }
}