{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-app",
  "description": "Application container component",
  "docUrl": "https://design.soracom.io/design-system/containers/app/",
  "category": "containers",
  "htmlElements": [
    "div",
    "main"
  ],
  "isWebComponent": false,
  "modifiers": {},
  "structure": {
    "parts": {
      "header": {
        "element": "header",
        "selector": "[class*=\"__header\"]",
        "required": true
      },
      "breadcrumb": {
        "element": "nav",
        "alternativeElements": [
          "div"
        ],
        "selector": "[class*=\"__breadcrumb\"]",
        "optional": true
      },
      "notice": {
        "element": "div",
        "selector": "[class*=\"__notice\"]",
        "optional": true
      },
      "main": {
        "element": "article",
        "alternativeElements": [
          "main",
          "div"
        ],
        "selector": "[class*=\"__main\"]",
        "required": true
      },
      "mainContent": {
        "element": "main",
        "alternativeElements": [
          "section",
          "div"
        ],
        "selector": "[class*=\"__main-content\"]",
        "required": true
      },
      "sidebar": {
        "element": "aside",
        "alternativeElements": [
          "iframe",
          "div"
        ],
        "selector": "[class*=\"__sidebar\"]",
        "optional": true
      },
      "footer": {
        "element": "footer",
        "alternativeElements": [
          "div"
        ],
        "selector": "[class*=\"__footer\"]",
        "optional": true
      }
    }
  },
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-app-state",
      "description": "Space-separated UI state tokens set on body to coordinate modal, sidebar, and AI-button layout.",
      "valueType": "space-separated tokens",
      "values": [
        "modal",
        "modal-right",
        "sidebar"
      ]
    },
    {
      "name": "data-app-page",
      "description": "Current product-page identifier set on body for page-specific application layout adjustments.",
      "valueType": "token",
      "values": [
        "app-harvest-data-intelligence",
        "app-feature-sim-details-page"
      ]
    },
    {
      "name": "data-app-layout",
      "description": "Application layout identifier set on body to activate a supported app-main grid composition.",
      "valueType": "token",
      "values": [
        "vertical-tabs",
        "scrolling-sidebar-with-details",
        "header-two-columns"
      ]
    },
    {
      "name": "data-ds-message",
      "description": "Message text set on the mainContent part to replace its child content with the SDS message state.",
      "valueType": "string"
    }
  ]
}