{
  "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 an enclosing [`<ed-app>`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app): in the desktop view, elements with `ed-mobile-only` are hidden; when the page reflects `view=\"mobile\"`, elements with `ed-desktop-only` are hidden. Desktop is the default view and is not written to the DOM — only an app that returns from mobile may carry `view=\"desktop\"` — so `ed-mobile-only` is hidden below every `<ed-app>` that is not `view=\"mobile\"`, including one whose script has not loaded yet: the rule is `ed-app:not([view='mobile']) .ed-mobile-only`. Match the desktop view the same way in your own styles, never with `[view='desktop']`.\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 `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```"
    }
  ]
}