{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "swap",
  "name": "Swap",
  "category": "Actions",
  "description": "An icon toggle that swaps between two states with a small rotation, menu/close, play/pause, sun/moon.",
  "tags": [
    "swap",
    "icon toggle",
    "toggle button",
    "hamburger",
    "animated icon",
    "like"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "icon toggle",
      "play pause",
      "hamburger to close",
      "favourite toggle"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/swap",
  "markdownUrl": "https://mian.ro/ai/components/swap.md",
  "classes": [
    {
      "name": "mn-swap",
      "description": "A label with a checkbox inside."
    },
    {
      "name": "mn-swap-on · mn-swap-off",
      "description": "Content for the checked and unchecked states."
    },
    {
      "name": "mn-swap-flip",
      "description": "Flip instead of rotate."
    }
  ],
  "accessibility": [
    "The checkbox carries the name (aria-label) and the state; screen readers announce it as a checkbox.",
    "For a toggle that is not a setting (e.g. opening a menu), use a button with aria-expanded instead."
  ],
  "examples": [
    {
      "title": "Swaps",
      "description": null,
      "html": "<label class=\"mn-swap\"><input type=\"checkbox\" aria-label=\"Menu open\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 7h16M4 12h16M4 17h16\"/></svg></span><span class=\"mn-swap-on\"><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></span></label>\n<label class=\"mn-swap\"><input type=\"checkbox\" aria-label=\"Dark mode\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"/></svg></span><span class=\"mn-swap-on\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\"/></svg></span></label>\n<label class=\"mn-swap mn-swap-flip\"><input type=\"checkbox\" aria-label=\"Favourite\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></span><span class=\"mn-swap-on\" style=\"color:var(--mn-danger)\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></span></label>"
    }
  ],
  "css": ".mn-swap { position: relative; display: inline-grid; place-items: center; width: var(--mn-size-md); height: var(--mn-size-md); border-radius: var(--mn-radius-field); cursor: pointer; color: var(--mn-fg); }\n.mn-swap:hover { background: var(--mn-hover); }\n.mn-swap > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.mn-swap:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-swap > .mn-swap-on, .mn-swap > .mn-swap-off { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--mn-duration) var(--mn-ease), transform calc(var(--mn-duration) * 1.6) var(--mn-spring); pointer-events: none; }\n.mn-swap svg { width: 1.25rem; height: 1.25rem; }\n.mn-swap > .mn-swap-on { opacity: 0; transform: rotate(-90deg) scale(.6); }\n.mn-swap:has(input:checked) > .mn-swap-on { opacity: 1; transform: none; }\n.mn-swap:has(input:checked) > .mn-swap-off { opacity: 0; transform: rotate(90deg) scale(.6); }\n.mn-swap-flip > .mn-swap-on { transform: rotateY(90deg); }\n.mn-swap-flip:has(input:checked) > .mn-swap-off { transform: rotateY(-90deg); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/swap.json"
  }
}