{
  "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": {
    "flow": [
      "--flow-down"
    ],
    "color": "all",
    "visual-state": "all",
    "notification-state": "all",
    "state": [
      "--loading",
      "--loading-refresh"
    ],
    "icon": "all",
    "gap": "all",
    "indent": "all"
  },
  "structure": {
    "parts": {
      "header": {
        "element": "header",
        "optional": true
      },
      "body": {
        "element": "div",
        "required": true
      },
      "footer": {
        "element": "div",
        "optional": true
      }
    },
    "allowedChildren": [
      "ds-autocomplete",
      "ds-checkbox",
      "ds-input",
      "ds-radio",
      "ds-range",
      "ds-select",
      "ds-switch",
      "ds-button",
      "ds-disclosure",
      "ds-menu",
      "ds-menubutton",
      "ds-tabs",
      "ds-banner",
      "ds-breadcrumb",
      "ds-card",
      "ds-chart",
      "ds-codeblock",
      "ds-datatable",
      "ds-details",
      "ds-heading",
      "ds-list",
      "ds-notice",
      "ds-tag",
      "ds-text",
      "ds-cols",
      "ds-rows",
      "ds-field"
    ]
  },
  "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>"
    }
  ]
}