{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "cookie-consent",
  "name": "Cookie consent",
  "category": "Feedback",
  "description": "A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible.",
  "tags": [
    "cookie consent",
    "cookie banner",
    "gdpr",
    "privacy",
    "consent",
    "tracking preferences",
    "legal",
    "cookies"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "cookie banner",
      "cookie consent",
      "gdpr consent",
      "privacy choices",
      "tracking consent"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/cookie-consent",
  "markdownUrl": "https://mian.ro/ai/components/cookie-consent.md",
  "classes": [
    {
      "name": "mn-consent",
      "description": "The notice (a region). Add mn-consent-fixed to pin it to the bottom of the viewport."
    },
    {
      "name": "mn-consent-actions",
      "description": "Reject and Accept with equal weight, then Customise."
    },
    {
      "name": "mn-consent-options",
      "description": "A <details> with one switch per purpose; necessary is on and disabled."
    }
  ],
  "accessibility": [
    "It is a labelled region (role=\"region\" with aria-label), not a modal: the page stays usable.",
    "Reject and Accept have the same size and weight; nothing is pre-ticked except strictly necessary storage.",
    "Buttons with data-mn-dismiss close it; store the choice and do not show it again."
  ],
  "examples": [
    {
      "title": "Consent",
      "description": null,
      "html": "<section class=\"mn-consent\" role=\"region\" aria-label=\"Cookie choices\">\n  <p><strong>Cookies on this site.</strong> We use necessary storage to keep you signed in. With your permission we also measure visits to improve pages. <a class=\"mn-link\" href=\"#\">Privacy notice</a></p>\n  <details class=\"mn-consent-options\"><summary>Customise</summary>\n    <label class=\"mn-row\"><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" checked disabled> Necessary: always on</label>\n    <label class=\"mn-row\"><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\"> Measurement</label>\n    <label class=\"mn-row\"><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\"> Marketing</label>\n  </details>\n  <div class=\"mn-consent-actions\"><button class=\"mn-btn mn-btn-outline\" type=\"button\" data-mn-dismiss=\".mn-consent\">Reject all</button><button class=\"mn-btn\" type=\"button\" data-mn-dismiss=\".mn-consent\">Accept all</button></div>\n</section>"
    }
  ],
  "css": ".mn-consent { display: grid; gap: .9rem; max-width: 34rem; padding: 1.1rem 1.25rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-size: var(--mn-text-sm); line-height: 1.55; }\n.mn-consent > p { margin: 0; }\n.mn-consent-fixed { position: fixed; z-index: 60; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) auto; width: min(34rem, calc(100vw - 2rem)); }\n.mn-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }\n.mn-consent-options > summary { width: fit-content; cursor: pointer; color: var(--mn-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }\n.mn-consent-options[open] { display: grid; gap: .55rem; }\n.mn-consent-options[open] > summary { margin-bottom: .2rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/cookie-consent.json"
  }
}