---
title: "Glossary"
description: "Every Clover component and helper in one place: the core components and primitives, the UI components, functions and hooks, and the package's structure."
url: https://clover.iiif.library.northwestern.edu/docs/composing/glossary
version: "4"
---

# Glossary

Every component and helper Clover exports. Place any component inside a `Root` (web components: `<clover-root>`), anywhere in your markup; one with nothing to show renders nothing.

## Core components

Each has a page of its own. A primitive shows one IIIF property of the Manifest, or of the current Canvas with `of="canvas"`. Given a `value`, it shows that instead, inside a `Root` (web components: `<clover-root>`) or not.

| Component                                                                                                                                              | Description                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`Root` (web components: `<clover-root>`)](https://clover.iiif.library.northwestern.edu/docs/root)                                                     | Loads a IIIF resource and holds its current view: every other component goes inside a Root and reads from it.                                           |
| [`Body` (web components: `<clover-body>`)](https://clover.iiif.library.northwestern.edu/docs/body)                                                     | The Root's current view, drawn by Canvas or by a renderer of your own, in a box with a height.                                                          |
| [`Canvas` (web components: `<clover-canvas>`)](https://clover.iiif.library.northwestern.edu/docs/canvas)                                               | The view that renders 2D images and video, with easy pan and zoom in an accessible and configurable interface.                                          |
| [`Timeline` (web components: `<clover-timeline>`)](https://clover.iiif.library.northwestern.edu/docs/timeline)                                         | Clover's player for IIIF Presentation 4 Timelines: sound played with its artwork, title, captions and chapters, on its own or in a Root.                |
| [`Scene` (web components: `<clover-scene>`)](https://clover.iiif.library.northwestern.edu/docs/scene)                                                  | Clover's 3D view for IIIF Presentation 4 Scenes: glTF models, lit and framed, turned and zoomed by pointer, key or control, on its own or in a Root.    |
| [`Items` (web components: `<clover-items>`)](https://clover.iiif.library.northwestern.edu/docs/items)                                                  | A sequence, its current item marked, as thumbnails in a slider, a list, a grid or masonry, or one item at a time.                                       |
| [`Panel` (web components: `<clover-panel>`)](https://clover.iiif.library.northwestern.edu/docs/panel)                                                  | What a IIIF resource says about itself, in sections as tabs or an accordion, including sections of your own.                                            |
| [`Annotations` (web components: `<clover-annotations>`)](https://clover.iiif.library.northwestern.edu/docs/annotations)                                | Every annotation of a IIIF resource, by layer and by Canvas, to read, to find on the Canvas, and to hide from it.                                       |
| [`Collection` (web components: `<clover-collection>`)](https://clover.iiif.library.northwestern.edu/docs/collection)                                   | The Collection a Manifest is in, described and its members listed, and a menu of its members to move between them.                                      |
| [`Contents` (web components: `<clover-contents>`)](https://clover.iiif.library.northwestern.edu/docs/contents)                                         | A Manifest's table of contents from its Ranges, the current entry marked, each entry going to its Canvas.                                               |
| [`Search` (web components: `<clover-search>`)](https://clover.iiif.library.northwestern.edu/docs/search)                                               | IIIF Content Search of the Root's Manifest, version 1 or 2: a field, then the hits by Canvas with the words around them, drawn on the Canvas.           |
| [`Transcript` (web components: `<clover-transcript>`)](https://clover.iiif.library.northwestern.edu/docs/transcript)                                   | The words of the recording or page in view: its captions as text, the cue playing marked, or its transcript as plain text.                              |
| [`Download` (web components: `<clover-download>`)](https://clover.iiif.library.northwestern.edu/docs/download)                                         | The rendering of the page in view and of the Manifest, a PDF, a text or a full-size file, as links in two groups.                                       |
| [`Map` (web components: `<clover-map>`)](https://clover.iiif.library.northwestern.edu/docs/map)                                                        | Where a IIIF resource is, on a map: its navPlace places, and its georeferenced images laid over the ground.                                             |
| [Primitives](https://clover.iiif.library.northwestern.edu/docs/primitives)                                                                             |                                                                                                                                                         |
| [`Label` (web components: `<clover-label>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/label)                                       | The resource's label, or the current Canvas's, in the defined language, in the element you choose.                                                      |
| [`Thumbnail` (web components: `<clover-thumbnail>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/thumbnail)                           | A small picture of the resource, or of the current Canvas, as an image named by its label.                                                              |
| [`Summary` (web components: `<clover-summary>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/summary)                                 | The summary of the resource, or of the current Canvas, cut to five lines with Read more when it runs longer.                                            |
| [`Metadata` (web components: `<clover-metadata>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/metadata)                              | The metadata of the resource, or of the current Canvas, as a description list of labels and values in the defined language.                             |
| [`RequiredStatement` (web components: `<clover-required-statement>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/required-statement) | The required statement of the resource, or of the current Canvas, such as an attribution, as a label and value in the defined language.                 |
| [`Rights` (web components: `<clover-rights>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/rights)                                    | The rights of the resource, or of the current Canvas, as a link to its license or rights statement.                                                     |
| [`Homepage` (web components: `<clover-homepage>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/homepage)                              | A IIIF resource's homepage, the web pages about it, as a list of links, each named by its label.                                                        |
| [`SeeAlso` (web components: `<clover-see-also>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/see-also)                               | A IIIF resource's seeAlso, the machine-readable descriptions of it elsewhere, as a list of links.                                                       |
| [`Rendering` (web components: `<clover-rendering>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/rendering)                           | A IIIF resource's rendering, the other formats it comes in, such as a PDF or a transcript, as a list of links.                                          |
| [`PartOf` (web components: `<clover-part-of>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/part-of)                                  | A IIIF resource's partOf, the Collections it belongs to, as a list of links, each named by its label.                                                   |
| [`Id` (web components: `<clover-id>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/id)                                                | A IIIF resource's id, its own address, as a link: the Manifest's, or the current Canvas's, in a Root or given on its own.                               |
| [`Provider` (web components: `<clover-provider>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/provider)                              | Who provided a IIIF resource: each provider's logo, and its name linked to its homepage. The components inside it read the provider they are drawn for. |
| [`Logo` (web components: `<clover-logo>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/logo)                                          | A IIIF provider's logo, each of the resource's providers' in turn, its alt text the provider's name; inside a Provider, that provider's.                |
| [`Value` (web components: `<clover-value>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/value)                                       | Any IIIF language map you hold, in the defined language, read strictly by its format as plain text, IIIF's HTML or Markdown.                            |

## UI components

These work with the core components. The ones templates share, `PanelPane` and `Lightbox`, are on [Helpers](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#templates).

| Component                                                                                                                                                                                                                                           | Description                                                                                                                                            |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`Previous` (web components: `<clover-previous>`), `Next` (web components: `<clover-next>`)](https://clover.iiif.library.northwestern.edu/docs/items#one-at-a-time)                                                                                 | Round buttons to the previous or next view (a spread, in a paged book), or with `of="members"` a Collection’s Manifest. Each shows disabled at an end. |
| [`Position` (web components: `<clover-position>`)](https://clover.iiif.library.northwestern.edu/docs/items#one-at-a-time)                                                                                                                           | The current view’s place, “2 / 5”, or a member’s with `of="members"`.                                                                                  |
| `Status` (web components: `<clover-status>`)                                                                                                                                                                                                        | Clover’s loading mark, or what went wrong, announced to assistive technology. `loading={false}` (web components: `loading="false"`) only announces it. |
| [`Tab` (web components: `<clover-tab>`)](https://clover.iiif.library.northwestern.edu/docs/panel#sections-of-your-own)                                                                                                                              | One section of the Panel: its `value`, its `label`, and what it shows.                                                                                 |
| [`About` (web components: `<clover-about>`)](https://clover.iiif.library.northwestern.edu/docs/panel#sections)                                                                                                                                      | A Manifest’s descriptive and linking properties, among them its summary, thumbnail, metadata and provider.                                             |
| [`PanelToggle` (web components: `<clover-panel-toggle>`)](https://clover.iiif.library.northwestern.edu/docs/panel#showing-and-hiding-it)                                                                                                            | Shows and hides the Panel. Inside a `Body` (web components: `<clover-body>`), it joins the Canvas’s controls.                                          |
| [`CollectionSelect` (web components: `<clover-collection-select>`)](https://clover.iiif.library.northwestern.edu/docs/collection)                                                                                                                   | A menu of a Collection’s members; choosing one shows it.                                                                                               |
| [`Split` (web components: `<clover-split>`), `SplitPane` (web components: `<clover-split-pane>`), `SplitHandle` (web components: `<clover-split-handle>`)](https://clover.iiif.library.northwestern.edu/docs/composing/customizing#splitting-panes) | Panes side by side, a `SplitHandle` (web components: `<clover-split-handle>`) between them to resize them.                                             |
| [`ReadMore` (web components: `<clover-read-more>`)](https://clover.iiif.library.northwestern.edu/docs/composing/customizing#long-values)                                                                                                            | A “Read more” button for text of your own, as `Summary` (web components: `<clover-summary>`) has.                                                      |
| [`Tip` (web components: `<clover-tip>`)](https://clover.iiif.library.northwestern.edu/docs/composing/customizing#controls-of-your-own)                                                                                                              | A control’s name and key, shown on hover and focus.                                                                                                    |

## Helpers

The functions and hooks Clover is built with. Each is on [Helpers](https://clover.iiif.library.northwestern.edu/docs/composing/helpers).

### IIIF resources

| Helper                                                                                                     | Description                                                                 |
| ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| [`toPresentation4`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)    | Upgrades a resource from an earlier Presentation version to Presentation 4. |
| [`readAs`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)             | Tells you whether a value is HTML, Markdown or plain text.                  |
| [`toPlainText`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)        | Turns a IIIF HTML value into plain text.                                    |
| [`localize`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)           | Picks a language map’s text in the defined language.                        |
| [`thumbnailSource`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)    | Finds a Manifest’s, Collection’s or Canvas’s thumbnail.                     |
| [`stillSource`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)        | Finds a picture to stand in for a Canvas at the size it’s drawn.            |
| [`regionSource`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)       | Finds an image of one region of a Canvas.                                   |
| [`resolveThumbnail`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)   | Turns a source into an image URL its `info.json` allows.                    |
| [`buildContentState`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)  | Writes a content state annotation for a Canvas, a region or a time.         |
| [`encodeContentState`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources) | Encodes a content state annotation for a link.                              |
| [`decodeContentState`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources) | Decodes an `iiif-content` value back into its annotation.                   |
| [`groupViews`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)         | Groups a Manifest’s Canvases into the views the Viewer shows.               |
| [`resolveBehavior`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)    | Reads the `behavior` that lays out a sequence.                              |
| [`resolveDirection`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#iiif-resources)   | Reads a `viewingDirection` (web components: `viewing-direction`).           |

### Maps

| Helper                                                                                         | Description                                                                                |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [`hasMapData`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)       | Tells you whether a Manifest has anything to put on a Map.                                 |
| [`navPlaceOf`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)       | Gathers every `navPlace` (web components: `.navPlace`) into one GeoJSON FeatureCollection. |
| [`georeferencesOf`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)  | Gathers the georeferenced images of a Manifest’s Canvases.                                 |
| [`readGeoreference`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps) | Reads one Georeference Extension annotation as an image to lay over a Map.                 |
| [`boundsOf`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)         | The box that holds places and georeferenced images.                                        |
| [`cornersOf`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)        | Where a georeferenced image’s corners land.                                                |
| [`affineTransform`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)  | The transform from a georeference’s image pixels to longitude and latitude.                |
| [`setMapWorkerUrl`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps)  | Serves MapLibre’s worker from an address of your own.                                      |

### Events

| Event                                                                                                                                                                               | Description                                  |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| [`onCanvasChange` (web components: `clover-canvas-change`), `clover-canvas-change`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#events)                     | The current Canvas changed.                  |
| [`onManifestChange` (web components: `clover-manifest-change`), `clover-manifest-change`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#events)               | Another Manifest of the Collection is shown. |
| [`onStatusChange` (web components: `clover-status-change`), `clover-status-change`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#events)                     | The Root began loading, finished, or failed. |
| [`onContentStateChange` (web components: `clover-content-state-change`), `clover-content-state-change`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#events) | The view changed, as a content state.        |

### Hooks

| Hook                                                                                                                                                               | Description                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| [`useStatus()` (web components: `root.clover.status()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usestatus)                            | Whether the Root is loading, ready or failed.                                 |
| [`useManifest()` (web components: `root.clover.manifest()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usemanifest)                      | The Manifest, in Presentation 4.                                              |
| [`useSequence()` (web components: `root.clover.sequence()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usesequence)                      | The Canvases, the views and the viewing direction.                            |
| [`useVisibleCanvases()` (web components: `root.clover.visibleCanvases()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usevisiblecanvases) | The Canvases of the current view.                                             |
| [`useActiveCanvas()` (web components: `root.clover.activeCanvas()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#useactivecanvas)          | The current Canvas.                                                           |
| [`useNavigation()` (web components: `root.clover.navigation()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usenavigation)                | Where the view is, and the steps to the others.                               |
| [`useAnnotationCollection()`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#useannotationcollection)                                         | The content’s annotations, walked as one whole.                               |
| [`useAnnotationPages()` (web components: `root.clover.annotationPages()`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#useannotationpages) | Each AnnotationPage, the Manifest’s and the Root’s own, with its annotations. |
| [`useLocalized(value)`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#uselocalizedvalue)                                                     | A language map’s text, in the Root’s language.                                |
| [`useT()`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#uset)                                                                               | The predefined strings, in Clover’s interface language.                       |
| [`useLangOf()`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#uselangof)                                                                     | A predefined string’s `lang`, where it isn’t the page’s.                      |
| [`usePanelSections(names)`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usepanelsections)                                                  | Which of the Panel’s default sections the resource has data for.              |
| [`useCloverSelector(select)`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usecloverselectorselect)                                         | Any value from the Root’s state.                                              |
| [`useClover()` (web components: `root.clover`)](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#useclover)                                     | The Root’s state and actions.                                                 |
| [`useUniqueId()`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#useuniqueid)                                                                 | An id unique on the page.                                                     |

### Templates

| Helper                                                                                                                            | Description                                             |
| --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| [`usePanelPane`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#usepanelpane-options)                        | Keeps the Panel’s state, beside the Body or over it.    |
| [`PanelPane`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#panelpane-props)                                | Draws the Panel in a SplitPane of its own.              |
| [`useWideEnough`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#room-beside-the-body)                       | Tells you whether an element is wide enough.            |
| [`BESIDE_REM`, `PAGE_MIN`, `PANEL_MIN`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#room-beside-the-body) | The room the Body and the Panel need.                   |
| [`useDrawer`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#more-splitpanes)                                | Gives a SplitPane of your own the Panel’s behavior.     |
| [`useFollowFocus`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#more-splitpanes)                           | Moves focus with a button that’s drawn somewhere new.   |
| [`preloadDrag`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#more-splitpanes)                              | Starts loading the code that drags a SplitPane closed.  |
| [`Lightbox`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#lightbox)                                        | The dialog Gallery opens for one cell of its grid.      |
| [`preloadLightbox`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#lightbox)                                 | Starts loading the Lightbox’s code.                     |
| [`useGivenAnnotations`](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#lightbox)                             | The annotations given to the Root as an AnnotationPage. |

## Structure of project

- `@nulib/clover`The [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer) (the default export), and every component, hook and helper (named).

  - `templates`The [templates](https://clover.iiif.library.northwestern.edu/docs/viewer#templates), and the [helpers they share](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#templates).

  - `map`[`Map`](https://clover.iiif.library.northwestern.edu/docs/map) and its [helpers](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#maps), as `@nulib/clover` exports them (`Clover.Map`).

  - `three``registerThreeEngine`, to draw a [Scene](https://clover.iiif.library.northwestern.edu/docs/scene) with three.js, which you install.

  - `web-components``<clover-viewer>`, and [every component as an element](https://clover.iiif.library.northwestern.edu/docs/composing/glossary#core-components), for a page without React.

    - `viewer``<clover-viewer>` alone, built whole, for a page that shows a Viewer and nothing else of Clover's.
    - `three`three.js for the elements' [Scene](https://clover.iiif.library.northwestern.edu/docs/scene), bundled.
    - `custom-elements.json`Each element's attributes, properties and events, for editors and tools.

  - `styles.css`Every component's styles, and the `Default` template's.

  - `styles/*.css`The same styles a component at a time ([Styling](https://clover.iiif.library.northwestern.edu/docs/styling#stylesheets)).

  - `templates.css`The other templates' styles.

The package is ES modules only.

**React**

React 18 and 19 are supported. Import the components from `@nulib/clover`, by name or as `Clover`, and your bundler keeps only those you use. Its types come with it: each component’s props are exported beside it (`ViewerProps`, `RootProps`, `BodyProps`…), with the types its props and hooks use.

**Web components**

The elements are built on their own, with [Preact](https://preactjs.com/) standing in for React, and carry Clover’s stylesheet. `index.umd.js` is a classic script that loads the elements’ module from beside itself, so it works from any CDN path. On a page with modules, load `web-components/index.mjs` with `<script type="module">` instead.

```html
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
```

A page that shows a Viewer and nothing else of Clover’s can load the Viewer’s own entry, built whole: `web-components/viewer/index.umd.js` (or `@nulib/clover/web-components/viewer` in a bundler) loads 110 kB to first view, where the one for every element loads 130 kB for the same page. Load one entry on a page, not both: each brings its own copy of Clover.

If you serve Clover’s files from your own server, copy the whole `dist/web-components` folder, not `viewer/` alone: the Viewer’s entry loads what the other entry has too (the map, streaming video, the languages) from the folder above its own.

The module’s types declare every element (`HTMLElementTagNameMap`) and every event, so `document.querySelector("clover-root")` is typed, and what a script reaches: `CloverRootApi`, `CloverCanvasHandle`, `CloverRenderer` and `CloverControlButtons`. Its [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest), `@nulib/clover/web-components/custom-elements.json` (the package’s `customElements`), gives each element’s attributes, properties and events to editors and tools.

**Web components**

## Web components

### The Viewer

A template takes its own attributes and ignores another’s: `size` does nothing in Default. `false` is read in any case. An `items` value not in the list shows the slider, with a warning in the console. With `header="false"` there is no title, and the panel’s sections take `heading-level` themselves.

### Languages

The elements carry their own copy of Clover’s translator, so a page calls it through them: from the module, or from any element’s class in a classic script. Either returns a promise of the translator.

```js
// With modules.
import { initCloverI18n } from ".../web-components/index.mjs";
initCloverI18n({ languages: ["fr", "en"] });
 
// From a classic script, once the element is defined: French, whatever the visitor's.
customElements
  .get("clover-viewer")
  .initCloverI18n()
  .then((i18n) => i18n.chooseInterfaceLanguage("fr"));
```

### Components

A component of a root draws nothing outside one, and says so in the console. Give an element no `aria-label` or `role`: it is a box with no role, and Clover names what it draws itself; a landmark of the page’s own around an element names it otherwise. The one exception is a Split’s handle, which is the separator itself: name it with `aria-label` where “Resize panels” is not the right word.

### Layouts

- **The panel’s tabs.** A `<clover-tab>`’s content stays where you wrote it until its section first opens, and then moves there. Its label is its `label`, or a copy of its `slot="label"` child, for markup.
- **The toggle** shows its target while the target is not `hidden`, so write `hidden` on the panel to start it shut, and hide or show it yourself whenever you like: the toggle follows.
- **The Split’s** elements are the panes and the bars themselves, as `Split` lays them out in React: one pane beside each handle has a `size`, and the other takes what is left. A handle beside a pane you hide is hidden with it.
- **Slots.** `<clover-status>` shows your own words while the root loads (`slot="loading"`) and if it fails (`slot="error"`), as copies, so give them no ids.

### Components of your own

Besides a method for each hook ([Helpers](https://clover.iiif.library.northwestern.edu/docs/composing/helpers#hooks)), a root’s `clover` has the table of contents (`contents()`, as `tableOfContents` gives React’s), `state`, the actions (`next()`, `goTo(id)`, `search(query)`…) and the channels (`viewport`, `media`…). `usePanelSections` has no method: a `<clover-panel>` draws nothing where it has no section, and a root would carry the panel’s checks on every page that uses any element.

### Styles

The element renders into its own children, with no shadow root, so the page’s CSS still reaches it, as 3.x’s does. Clover’s styles are added to the document once each, first in `<head>` and in the stylesheet’s order, so the page’s own rules win; see [Styling](https://clover.iiif.library.northwestern.edu/docs/styling).