A fully assembled demo page, featuring a tree and a gallery (with something configured in every slot)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Anura Webcomponents Example</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="adapters/some-adapter.js"></script>
<script type="module" src="components/anura-tree.js"></script>
<script type="module" src="components/anura-gallery.js"></script>
<script type="module" src="components/anura-lightbox.js"></script>
<script type="module" src="components/anura-counter.js"></script>
</head>
<body>
<some-adapter url="https://my.server.io/api" locale="de"></some-adapter>
<div style="display: flex">
<aside aria-label="Navigation">
<anura-tree adapter="some-adapter" show-root="true" depth="1" root="1737" selected="1738" icon="archive" aria-live="polite"></anura-tree>
</aside>
<main aria-label="Gallery">
<anura-counter parent="anura-gallery"></anura-counter>
<anura-gallery adapter="some-adapter" source="anura-tree" page-size="32" aria-live="polite">
<anura-asset slot="asset" buttons="download,checkbox,info" quick-download="1"></anura-asset>
<anura-paginator slot="paginator" mode="auto" detect-scroll="false"></anura-paginator>
<anura-lightbox slot="lightbox" buttons="fullscreen,sidebar,close">
<anura-details slot="sidebar" allowlist="id,name,info_102,info_103"></anura-details>
</anura-lightbox>
</anura-gallery>
</main>
</div>
</body>
</html>