{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-group",
  "description": "Generic grouping container",
  "docUrl": "https://design.soracom.io/design-system/containers/group/",
  "category": "containers",
  "htmlElements": [
    "div",
    "fieldset",
    "details"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "notification-state": {
      "support": "all"
    },
    "variant": {
      "support": "custom",
      "values": [
        "--fee",
        "--flow-down"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading",
        "--loading-refresh"
      ]
    },
    "icon": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    }
  },
  "structure": {
    "parts": {
      "title": {
        "element": "header",
        "alternativeElements": [
          "legend",
          "summary",
          "div"
        ],
        "selector": "header, legend, summary, .__title",
        "optional": true,
        "position": [
          "first"
        ]
      }
    },
    "patterns": {
      "div": "<div class=\"ds-group\"><header>{title}</header>{content}</div>",
      "fieldset": "<fieldset class=\"ds-group\"><legend>{title}</legend>{content}</fieldset>",
      "disclosure": "<details class=\"ds-group\"><summary>{title}</summary>{content}</details>"
    }
  },
  "attributes": {
    "open": {
      "description": "Controls the expanded state when ds-group is applied to a details element.",
      "appliesTo": [
        {
          "elements": [
            "details"
          ]
        }
      ]
    },
    "disabled": {
      "description": "Disables descendant form controls when ds-group is applied to a fieldset element.",
      "appliesTo": [
        {
          "elements": [
            "fieldset"
          ]
        }
      ]
    }
  },
  "dataAttributes": [
    {
      "name": "data-ds-message",
      "description": "Message text that hides the group contents and renders the SDS message state.",
      "valueType": "string"
    },
    {
      "name": "data-notification-counter",
      "description": "Displays a numeric counter badge on the group. Used with a --notification modifier.",
      "valueType": "number"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-group\"><header>Group Title</header><p class=\"ds-text\">This is a group container that provides proper spacing and organization for related content elements.</p></div>"
    },
    {
      "name": "with-header",
      "html": "<div class=\"ds-group\"><header>Main Heading</header><p class=\"ds-text\">Content paragraph with proper text styling.</p><p class=\"ds-text\">Additional paragraph content.</p></div>"
    },
    {
      "name": "with-banner-header",
      "html": "<div class=\"ds-group\"><header class=\"ds-banner --info\"><p>Important information header</p></header><p class=\"ds-text\">Group content follows the banner header.</p></div>"
    },
    {
      "name": "with-footer",
      "html": "<div class=\"ds-group\"><header>Group with Footer</header><p class=\"ds-text\">Main content area with important information.</p><div class=\"ds-notice --warning\"><p>This is a footer notice providing additional context.</p></div></div>"
    },
    {
      "name": "complete-structure",
      "html": "<div class=\"ds-group\"><header class=\"ds-heading --large\">Complete Group</header><p class=\"ds-text\">Body content with various elements.</p><button class=\"ds-button --primary\">Action Button</button><div class=\"ds-notice --success\"><p>Success footer message</p></div></div>"
    },
    {
      "name": "with-modifiers",
      "html": "<div class=\"ds-group --small --alert --gap-large\"><header>Alert Group</header><p class=\"ds-text\">This group demonstrates size, state, and gap modifiers.</p></div>"
    },
    {
      "name": "with-loading",
      "html": "<div class=\"ds-group --loading --icon-refresh\" data-ds-message=\"Loading content...\"><header>Loading Group</header><p class=\"ds-text\">Content is being loaded.</p></div>"
    },
    {
      "name": "with-notification",
      "html": "<div class=\"ds-group --notification-alert\" data-notification-counter=\"3\"><header>Notifications</header><p class=\"ds-text\">You have important notifications.</p></div>"
    },
    {
      "name": "color-theme",
      "html": "<div class=\"ds-group --color-blue-light\"><header>Themed Group</header><p class=\"ds-text\">This group has a light blue color theme applied.</p></div>"
    },
    {
      "name": "with-allowed-children",
      "html": "<div class=\"ds-group\"><header>Group with Various Children</header><label class=\"ds-field\"><div class=\"ds-text --label\">Input Field</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter text\"></div></label><div class=\"ds-cols\"><div>Column 1</div><div>Column 2</div></div><button class=\"ds-button --primary\">Submit</button></div>"
    }
  ]
}