{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-details",
  "description": "Label/value pair display component using dl or table",
  "docUrl": "https://design.soracom.io/design-system/elements/details/",
  "category": "elements",
  "htmlElements": [
    "div",
    "table",
    "dl"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "variant": {
      "support": "custom",
      "values": [
        "--simple",
        "--plain"
      ]
    },
    "layout": {
      "support": "subset",
      "values": [
        "--vertical"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--wide"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading"
      ]
    },
    "indent": {
      "support": "all"
    }
  },
  "structure": {
    "parts": {
      "list": {
        "element": "dl",
        "optional": true
      },
      "table": {
        "element": "table",
        "optional": true
      },
      "label": {
        "element": "dt",
        "alternativeElements": [
          "th"
        ],
        "required": true,
        "repeatable": true
      },
      "value": {
        "element": "dd",
        "alternativeElements": [
          "td"
        ],
        "required": true,
        "repeatable": true
      }
    },
    "patterns": {
      "definition-list-wrapper": "<div class=\"ds-details\"><dl><dt>{label}</dt><dd><div>{value}</div></dd></dl></div>",
      "definition-list-root": "<dl class=\"ds-details\"><dt>{label}</dt><dd><div>{value}</div></dd></dl>",
      "table-root": "<table class=\"ds-details\"><tr><th>{label}</th><td><div>{value}</div></td></tr></table>",
      "table-wrapper": "<div class=\"ds-details\"><table><tr><th>{label}</th><td><div>{value}</div></td></tr></table></div>"
    }
  },
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-label",
      "description": "Enables the responsive stacked layout when present on thead and rows; on table cells, its text becomes the mobile field label.",
      "valueType": "string"
    },
    {
      "name": "data-ds-message",
      "description": "Message text that hides the details contents and renders the SDS message state.",
      "valueType": "string"
    }
  ],
  "examples": [
    {
      "name": "basic-dl",
      "html": "<div class=\"ds-details\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "basic-table",
      "html": "<table class=\"ds-details\"><tr><th>Label</th><td><div>Value</div></td></tr><tr><th>Another Label</th><td><div>Another Value</div></td></tr></table>"
    },
    {
      "name": "vertical",
      "html": "<div class=\"ds-details --vertical\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "simple",
      "html": "<table class=\"ds-details --simple\"><tr><th>Label</th><td>Value</td></tr><tr><th>Another Label</th><td>Another Value</td></tr></table>"
    },
    {
      "name": "plain",
      "html": "<div class=\"ds-details --plain\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "wide",
      "html": "<div class=\"ds-details --wide\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "alert",
      "html": "<div class=\"ds-details --alert\"><dl><dt>Label</dt><dd><div>Value</div></dd></dl></div>"
    },
    {
      "name": "with-footer",
      "html": "<table class=\"ds-details\"><tr><th>Label</th><td><div>Value</div></td></tr><tfoot><tr><td colspan=\"999\"><button class=\"ds-button --plain\"><span>Add row</span></button></td></tr></tfoot></table>"
    }
  ]
}