{
  "name": "ds-dialog",
  "description": "Dialog container component",
  "docUrl": "https://design.soracom.io/design-system/containers/dialog/",
  "category": "containers",
  "htmlElements": [
    "dialog",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "variant": {
      "support": "custom",
      "values": [
        "--simple",
        "--plain"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--narrow",
        "--mid",
        "--medium",
        "--wide",
        "--auto",
        "--min"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading"
      ]
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<dialog class=\"ds-dialog\" open><header class=\"ds-banner\"><div><h2>Dialog Title</h2><p>Description text.</p></div></header><section><p>Dialog content goes here.</p></section><footer><button class=\"ds-button --primary\"><span>Confirm</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "basic-plain-banner",
      "html": "<dialog class=\"ds-dialog\" open><header class=\"ds-banner --plain\"><h2>Dialog Title</h2></header><section><p>Dialog with a plain banner header (no gradient).</p></section><footer><button class=\"ds-button --primary\"><span>Confirm</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "simple",
      "html": "<dialog class=\"ds-dialog --simple\" open><header class=\"ds-banner\"><h2>Simple Dialog</h2></header><section><p>Dialog without the accent border.</p></section><footer><button class=\"ds-button --primary\"><span>OK</span></button></footer></dialog>"
    },
    {
      "name": "plain",
      "html": "<dialog class=\"ds-dialog --plain\" open><header class=\"ds-banner\"><h2>Plain Dialog</h2></header><section><p>Dialog with dark accent border.</p></section><footer><button class=\"ds-button --primary\"><span>Confirm</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "alert",
      "html": "<dialog class=\"ds-dialog --alert\" open><header class=\"ds-banner\"><div><h2>Delete Confirmation</h2><p>This action cannot be undone.</p></div></header><section><p>Are you sure you want to delete this item?</p></section><footer><button class=\"ds-button --alert\"><span>Delete</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "warning",
      "html": "<dialog class=\"ds-dialog --warning\" open><header class=\"ds-banner\"><h2>Warning</h2></header><section><p>This action may have unintended consequences.</p></section><footer><button class=\"ds-button --warning\"><span>Proceed</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "success",
      "html": "<dialog class=\"ds-dialog --success\" open><header class=\"ds-banner\"><h2>Success</h2></header><section><p>Operation completed successfully.</p></section><footer><button class=\"ds-button --success\"><span>Done</span></button></footer></dialog>"
    },
    {
      "name": "narrow",
      "html": "<dialog class=\"ds-dialog --narrow\" open><header class=\"ds-banner\"><h2>Narrow Dialog</h2></header><section><p>A narrower dialog (max 550px).</p></section><footer><button class=\"ds-button --primary\"><span>OK</span></button></footer></dialog>"
    },
    {
      "name": "wide",
      "html": "<dialog class=\"ds-dialog --wide\" open><header class=\"ds-banner\"><div><h2>Wide Dialog</h2><p>A wider dialog (max 1100px).</p></div></header><section><p>Content for wide dialog.</p></section><footer><button class=\"ds-button --primary\"><span>OK</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "with-icon",
      "html": "<dialog class=\"ds-dialog\" open><header class=\"ds-banner\"><i class=\"ds-icon --icon-settings\"></i><div><h2>Settings</h2><p>Configure your preferences.</p></div></header><section><p>Dialog with icon in the banner header.</p></section><footer><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "with-form",
      "html": "<dialog class=\"ds-dialog\" open><header class=\"ds-banner\"><div><h2>Edit Settings</h2><p>Update your configuration.</p></div></header><section><label class=\"ds-field\"><div class=\"ds-text --label\">Name</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter name\" /></div></label><label class=\"ds-field\"><div class=\"ds-text --label\">Region</div><div class=\"ds-select\"><select><option>Select region</option><option>Japan</option><option>US</option></select></div></label></section><footer><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    },
    {
      "name": "with-promotion",
      "html": "<dialog class=\"ds-dialog\" open><aside class=\"ds-promotion\"><p>Promotional content</p></aside><header class=\"ds-banner\"><div><h2>Dialog Title</h2><p>With aside promotion area.</p></div></header><section><p>Main content area.</p></section><footer><button class=\"ds-button --primary\"><span>Action</span></button></footer></dialog>"
    },
    {
      "name": "footer-start",
      "html": "<dialog class=\"ds-dialog\" open><header class=\"ds-banner\"><h2>Dialog Title</h2></header><section><p>Footer with --start makes buttons flow left-to-right.</p></section><footer class=\"--start\"><button class=\"ds-button --primary\"><span>Confirm</span></button><button class=\"ds-button\"><span>Cancel</span></button></footer></dialog>"
    }
  ]
}