{
  "name": "utilities/visibility",
  "title": "Visibility",
  "description": "Use the `ed-mobile-only` and `ed-desktop-only` classes to show or hide content depending on the page's current view.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/visibility/",
  "sections": [
    {
      "heading": "Visibility",
      "markdown": "The visibility helpers key off the view state of the closest [`<ed-app>`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app): when the page reflects `view=\"desktop\"`, elements with `ed-mobile-only` are hidden; when it reflects `view=\"mobile\"`, elements with `ed-desktop-only` are hidden.\n\n```html\n<ed-app mobile-breakpoint=\"768px\">\n  <nav slot=\"navigation\">\n    <span class=\"ed-desktop-only\">Full navigation</span>\n    <ed-button class=\"ed-mobile-only\" appearance=\"plain\">\n      <ed-icon name=\"menu\" label=\"Menu\"></ed-icon>\n    </ed-button>\n  </nav>\n  <main>…</main>\n</ed-app>\n```\n\nTwo constraints to be aware of:\n\n-   The classes only work on light-DOM content **below an `<ed-app>`** — the selectors read the page's reflected `view` attribute, so without a page ancestor nothing is hidden.\n-   They don't reach into shadow roots. Apply them to your own markup, not to a component's internals."
    },
    {
      "heading": "Importing",
      "markdown": "The visibility helpers are part of `utilities.css`, or available standalone:\n\n```js\nimport '@eurodata/eurodata-ui/dist/styles/utilities/visibility.css';\n```"
    }
  ]
}