{
  "name": "ds-codeblock",
  "description": "Preformatted code display block with optional caption",
  "docUrl": "https://design.soracom.io/design-system/elements/codeblock/",
  "category": "elements",
  "htmlElements": [
    "figure",
    "pre",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": [
      "--wrap",
      "--auto",
      "--light"
    ],
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<figure class=\"ds-codeblock\"><pre><code>const greeting = 'Hello, world!';\nconsole.log(greeting);</code></pre></figure>"
    },
    {
      "name": "light",
      "html": "<figure class=\"ds-codeblock --light\"><pre><code>const greeting = 'Hello, world!';\nconsole.log(greeting);</code></pre></figure>"
    },
    {
      "name": "wrap",
      "html": "<figure class=\"ds-codeblock --wrap\"><pre><code>This is a long line of code that will wrap instead of scrolling horizontally when it exceeds the container width.</code></pre></figure>"
    },
    {
      "name": "auto",
      "html": "<figure class=\"ds-codeblock --auto\"><pre><code>// Auto-height adjusts to content\nconst a = 1;\nconst b = 2;</code></pre></figure>"
    },
    {
      "name": "with-caption",
      "html": "<figure class=\"ds-codeblock\"><figcaption>example.js</figcaption><pre><code>function add(a, b) {\n  return a + b;\n}</code></pre></figure>"
    },
    {
      "name": "with-tag",
      "html": "<figure class=\"ds-codeblock\"><span class=\"ds-tag --pinned\"><span>JavaScript</span></span><pre><code>const items = [1, 2, 3];\nitems.forEach(item => console.log(item));</code></pre></figure>"
    }
  ]
}