{
  "name": "structured-liquidity",
  "description": "Copy-paste component registry for the Structured Liquidity design language. Each component lists its class names, variants, and ready-to-paste HTML. Include the stylesheets and kit script below, then use the markup verbatim.",
  "homepage": "/",
  "dependencies": {
    "css": [
      "structured-liquidity.css",
      "structured-liquidity-components.css",
      "structured-liquidity-kit.css"
    ],
    "js": ["structured-liquidity-kit.js"],
    "tokens": "design-tokens.json",
    "fonts": ["Archivo", "Outfit", "Space Mono"]
  },
  "conventions": {
    "container": "Rigid container = border var(--border-w) solid rgb(var(--edge)) + flat shadow var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow) + border-radius var(--radius).",
    "glass": "Add the .glass class (or backdrop-filter blur(var(--glass-blur)) over rgba(var(--glass-tint), var(--glass-alpha))) for liquid depth.",
    "accent": "Exactly one accent (--accent) carries emphasis.",
    "icons": "Leading Lucide icon first, then the label, on nav links and buttons.",
    "interactivity": "Elements with data-toggle-aria / data-toggle-group / data-open-overlay / data-close-overlay are wired by structured-liquidity-kit.js."
  },
  "components": [
    {
      "name": "button",
      "description": "Primary action. Variants and sizes via class. Leading Lucide icon optional.",
      "variants": ["default", "secondary", "outline", "ghost", "destructive", "link"],
      "sizes": ["sm", "default", "lg", "icon"],
      "html": "<button class=\"sl-btn default\"><i data-lucide=\"plus\"></i>Primary</button>\n<button class=\"sl-btn secondary\">Secondary</button>\n<button class=\"sl-btn outline\">Outline</button>\n<button class=\"sl-btn ghost\">Ghost</button>\n<button class=\"sl-btn destructive\">Delete</button>\n<button class=\"sl-btn lg\">Large</button>\n<button class=\"sl-btn icon ghost\" aria-label=\"Close\">x</button>"
    },
    {
      "name": "badge",
      "description": "Compact status/label chip.",
      "variants": ["default", "secondary", "outline", "destructive"],
      "html": "<span class=\"sl-badge default\">Default</span>\n<span class=\"sl-badge secondary\">Secondary</span>\n<span class=\"sl-badge outline\">Outline</span>\n<span class=\"sl-badge default\"><span class=\"ico\"></span>Live</span>\n<span class=\"sl-badge destructive\">Error</span>"
    },
    {
      "name": "toggle",
      "description": "Single pressable toggle and an exclusive toggle group. Wired by the kit script.",
      "html": "<button class=\"sl-toggle\" data-toggle-aria=\"pressed\" aria-pressed=\"false\">B</button>\n<div class=\"sl-toggle-group\" data-toggle-group>\n  <button class=\"sl-toggle\" aria-pressed=\"true\">Left</button>\n  <button class=\"sl-toggle\" aria-pressed=\"false\">Center</button>\n  <button class=\"sl-toggle\" aria-pressed=\"false\">Right</button>\n</div>"
    },
    {
      "name": "switch",
      "description": "On/off switch. Toggle state via aria-checked; wired by the kit script.",
      "html": "<div class=\"sl-switch\" data-toggle-aria=\"checked\" aria-checked=\"true\" tabindex=\"0\"><span class=\"knob\"></span></div>"
    },
    {
      "name": "checkbox",
      "description": "Checkbox. State via aria-checked; wired by the kit script. Keep the .sl-box + .tick SVG so the checked state renders.",
      "html": "<div class=\"sl-check\" data-toggle-aria=\"checked\" aria-checked=\"true\" tabindex=\"0\">\n  <span class=\"sl-box\"><svg class=\"tick\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M5 13l4 4L19 7\"/></svg></span>Label text\n</div>"
    },
    {
      "name": "radio-group",
      "description": "Mutually exclusive radio items. The [data-radio-group] wrapper is required — the kit script enforces single selection within it.",
      "html": "<div class=\"kit-col\" data-radio-group>\n  <div class=\"sl-radio-item\" aria-checked=\"true\" tabindex=\"0\"><span class=\"sl-radio\"><span class=\"dot\"></span></span>Dark mode</div>\n  <div class=\"sl-radio-item\" aria-checked=\"false\" tabindex=\"0\"><span class=\"sl-radio\"><span class=\"dot\"></span></span>Light mode</div>\n  <div class=\"sl-radio-item\" aria-checked=\"false\" tabindex=\"0\"><span class=\"sl-radio\"><span class=\"dot\"></span></span>System</div>\n</div>"
    },
    {
      "name": "input",
      "description": "Text field with label. Pair with .sl-field for description/error rows.",
      "html": "<label class=\"sl-label\">Email</label>\n<input class=\"sl-input\" type=\"email\" placeholder=\"you@studio.com\" />"
    },
    {
      "name": "slider",
      "description": "Range slider with filled track and thumb.",
      "html": "<div class=\"sl-slider\"><div class=\"trk\"><div class=\"fl\" style=\"width:60%\"></div><div class=\"th\" style=\"left:60%\"></div></div></div>"
    },
    {
      "name": "progress",
      "description": "Determinate progress bar.",
      "html": "<div class=\"sl-progress\"><span style=\"width:68%\"></span></div>"
    },
    {
      "name": "avatar",
      "description": "Avatar and stacked avatar group.",
      "html": "<span class=\"sl-ava\">SL</span>\n<div class=\"sl-ava-group\">\n  <span class=\"sl-ava\">A</span><span class=\"sl-ava\">B</span><span class=\"sl-ava\">+5</span>\n</div>"
    },
    {
      "name": "card",
      "description": "Glass card — the canonical rigid container holding liquid glass. Use .glass for depth.",
      "html": "<div class=\"glass kit-cell\">\n  <span class=\"kit-cap\">Card title</span>\n  <p>Body copy inside a rigid container holding liquid glass.</p>\n</div>"
    },
    {
      "name": "tabs",
      "description": "Tabbed navigation. The .tablist holds buttons with aria-selected; sibling .panel nodes hold content (the active one carries .show). Wired by the kit script.",
      "html": "<div class=\"sl-tabs\">\n  <div class=\"tablist\">\n    <button aria-selected=\"true\">Preview</button>\n    <button aria-selected=\"false\">Code</button>\n    <button aria-selected=\"false\">Tokens</button>\n  </div>\n  <div class=\"panel show\">First panel content.</div>\n  <div class=\"panel\">Second panel content.</div>\n  <div class=\"panel\">Third panel content.</div>\n</div>"
    },
    {
      "name": "dialog",
      "description": "Modal dialog. Trigger with data-open-overlay; close with data-close-overlay. Wired by the kit script.",
      "html": "<button class=\"sl-btn default\" data-open-overlay=\"my-dialog\">Open dialog</button>\n<div class=\"sl-overlay\" id=\"my-dialog\">\n  <div class=\"sl-dialog\">\n    <h3>Title</h3>\n    <p>Dialog body copy.</p>\n    <div class=\"actions\">\n      <button class=\"sl-btn ghost\" data-close-overlay>Cancel</button>\n      <button class=\"sl-btn default\" data-close-overlay>Confirm</button>\n    </div>\n  </div>\n</div>"
    },
    {
      "name": "sheet",
      "description": "Side panel sliding in from the structural edge.",
      "html": "<button class=\"sl-btn secondary\" data-open-overlay=\"my-sheet\">Open sheet</button>\n<div class=\"sl-overlay sl-sheet-overlay\" id=\"my-sheet\">\n  <div class=\"sl-sheet\">\n    <h3>Settings</h3>\n    <button class=\"sl-btn default\" data-close-overlay>Save</button>\n  </div>\n</div>"
    }
  ]
}