@fusion.dev/helix-headless 0.100.0 → 0.102.0

package/types/jsx.d.ts

@@ -74,11 +74,14 @@ import type {
   HelixHeadlessInput,
   HelixHeadlessKbd,
   HelixHeadlessLegend,
+  HelixHeadlessLightbox,
+  HelixHeadlessLightboxItem,
   HelixHeadlessLineChart,
   HelixHeadlessList,
   HelixHeadlessListItem,
   HelixHeadlessListbox,
   HelixHeadlessLoader,
+  HelixHeadlessMap,
   HelixHeadlessMegamenu,
   HelixHeadlessMenu,
   HelixHeadlessMenuItem,
@@ -148,6 +151,8 @@ import type {
   HelixHeadlessVideoPlaylistMenu,
   HelixHeadlessVirtualList,
   HelixHistoryEvent,
+  HelixMapPanEvent,
+  HelixMapZoomEvent,
   HelixNavigateEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -8525,6 +8530,231 @@ shadow root reads a table in that root rather than one in the document.
   textContent?: (string | number) | undefined;
 };
 
+export type HelixHeadlessLightboxItemProps = {
+  /** Whether this is the one being shown.
+
+Written by the root, which is the only thing that sees the set. */
+  current?: (HelixHeadlessLightboxItem["current"]) | undefined;
+  /** What this item is called, for the reading that says where the reader is. */
+  label?: (HelixHeadlessLightboxItem["label"]) | undefined;
+  /** What names this item, and what `active` on the root is compared against. */
+  value?: (HelixHeadlessLightboxItem["value"]) | undefined;
+};
+
+export type HelixHeadlessLightboxItemSolidJsProps = {
+  /** Whether this is the one being shown.
+
+Written by the root, which is the only thing that sees the set. */
+  "prop:current"?: (HelixHeadlessLightboxItem["current"]) | undefined;
+  /** What this item is called, for the reading that says where the reader is. */
+  "prop:label"?: (HelixHeadlessLightboxItem["label"]) | undefined;
+  /** What names this item, and what `active` on the root is compared against. */
+  "prop:value"?: (HelixHeadlessLightboxItem["value"]) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
+/** `HelixHeadlessLightbox` component event */
+export type HelixHeadlessLightboxElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessLightbox,
+  E
+>;
+/** `helix-activate` event type */
+export type HelixHeadlessLightboxHelixActivateElementEvent =
+  HelixHeadlessLightboxElementEvent<HelixActivateEvent>;
+/** `helix-before-activate` event type */
+export type HelixHeadlessLightboxHelixBeforeActivateElementEvent =
+  HelixHeadlessLightboxElementEvent<HelixBeforeActivateEvent>;
+/** `helix-before-close` event type */
+export type HelixHeadlessLightboxHelixBeforeCloseElementEvent =
+  HelixHeadlessLightboxElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessLightboxHelixBeforeOpenElementEvent =
+  HelixHeadlessLightboxElementEvent<HelixBeforeOpenEvent>;
+
+export type HelixHeadlessLightboxProps = {
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is what a viewer with a caption worth reading
+wants. The wait is only ever about idling: whether anything else should
+keep the chrome up is the consumer's to decide with this. */
+  "idle-delay"?: (HelixHeadlessLightbox["idleDelay"] | `${number}`) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is what a viewer with a caption worth reading
+wants. The wait is only ever about idling: whether anything else should
+keep the chrome up is the consumer's to decide with this. */
+  idleDelay?: (HelixHeadlessLightbox["idleDelay"]) | undefined;
+  /** Accessible name for the viewer. */
+  label?: (HelixHeadlessLightbox["label"]) | undefined;
+  /** Whether walking past the end comes back to the beginning. */
+  loop?: (HelixHeadlessLightbox["loop"]) | undefined;
+  /** The reading that says where in the set the reader is, with `{index}` and
+`{count}` filled in.
+
+Announced rather than only drawn, because the picture changing under a
+reader who cannot see it is otherwise silent. A consumer who has their own
+counter in the chrome can empty this and say it themselves. */
+  "status-label"?: (HelixHeadlessLightbox["statusLabel"]) | undefined;
+  /** The reading that says where in the set the reader is, with `{index}` and
+`{count}` filled in.
+
+Announced rather than only drawn, because the picture changing under a
+reader who cannot see it is otherwise silent. A consumer who has their own
+counter in the chrome can empty this and say it themselves. */
+  statusLabel?: (HelixHeadlessLightbox["statusLabel"]) | undefined;
+  /** Which item is current, by its `value`.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  active?: (HelixHeadlessLightbox["active"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "default-active"?: (HelixHeadlessLightbox["defaultActive"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  defaultActive?: (HelixHeadlessLightbox["defaultActive"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixHeadlessLightbox["open"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "default-open"?: (HelixHeadlessLightbox["defaultOpen"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  defaultOpen?: (HelixHeadlessLightbox["defaultOpen"]) | undefined;
+
+  /** Relayed, because the platform's own does not escape. */
+  onclose?: ((e: HelixHeadlessLightboxElementEvent) => void) | undefined;
+  /** Fired once the shown item has moved, so the element already holds it. */
+  "onhelix-activate"?: ((
+    e: HelixHeadlessLightboxHelixActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before the shown item changes, and cancelable. The only way to refuse one. */
+  "onhelix-before-activate"?: ((
+    e: HelixHeadlessLightboxHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before it closes, and cancelable. */
+  "onhelix-before-close"?: ((
+    e: HelixHeadlessLightboxHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before it opens, and cancelable. */
+  "onhelix-before-open"?: ((
+    e: HelixHeadlessLightboxHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
+  /** Says the state moved, carrying `newState` and `oldState`. */
+  ontoggle?: ((e: HelixHeadlessLightboxElementEvent) => void) | undefined;
+};
+
+export type HelixHeadlessLightboxSolidJsProps = {
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is what a viewer with a caption worth reading
+wants. The wait is only ever about idling: whether anything else should
+keep the chrome up is the consumer's to decide with this. */
+  "attr:idle-delay"?: (HelixHeadlessLightbox["idleDelay"] | `${number}`) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is what a viewer with a caption worth reading
+wants. The wait is only ever about idling: whether anything else should
+keep the chrome up is the consumer's to decide with this. */
+  "prop:idleDelay"?: (HelixHeadlessLightbox["idleDelay"]) | undefined;
+  /** Accessible name for the viewer. */
+  "prop:label"?: (HelixHeadlessLightbox["label"]) | undefined;
+  /** Whether walking past the end comes back to the beginning. */
+  "prop:loop"?: (HelixHeadlessLightbox["loop"]) | undefined;
+  /** The reading that says where in the set the reader is, with `{index}` and
+`{count}` filled in.
+
+Announced rather than only drawn, because the picture changing under a
+reader who cannot see it is otherwise silent. A consumer who has their own
+counter in the chrome can empty this and say it themselves. */
+  "attr:status-label"?: (HelixHeadlessLightbox["statusLabel"]) | undefined;
+  /** The reading that says where in the set the reader is, with `{index}` and
+`{count}` filled in.
+
+Announced rather than only drawn, because the picture changing under a
+reader who cannot see it is otherwise silent. A consumer who has their own
+counter in the chrome can empty this and say it themselves. */
+  "prop:statusLabel"?: (HelixHeadlessLightbox["statusLabel"]) | undefined;
+  /** Which item is current, by its `value`.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  "prop:active"?: (HelixHeadlessLightbox["active"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "attr:default-active"?: (HelixHeadlessLightbox["defaultActive"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "prop:defaultActive"?: (HelixHeadlessLightbox["defaultActive"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  "prop:open"?: (HelixHeadlessLightbox["open"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "bool:default-open"?: (HelixHeadlessLightbox["defaultOpen"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "prop:defaultOpen"?: (HelixHeadlessLightbox["defaultOpen"]) | undefined;
+  /** Relayed, because the platform's own does not escape. */
+  "on:close"?: ((e: HelixHeadlessLightboxElementEvent) => void) | undefined;
+  /** Fired once the shown item has moved, so the element already holds it. */
+  "on:helix-activate"?: ((
+    e: HelixHeadlessLightboxHelixActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before the shown item changes, and cancelable. The only way to refuse one. */
+  "on:helix-before-activate"?: ((
+    e: HelixHeadlessLightboxHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before it closes, and cancelable. */
+  "on:helix-before-close"?: ((
+    e: HelixHeadlessLightboxHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before it opens, and cancelable. */
+  "on:helix-before-open"?: ((
+    e: HelixHeadlessLightboxHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
+  /** Says the state moved, carrying `newState` and `oldState`. */
+  "on:toggle"?: ((e: HelixHeadlessLightboxElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 export type HelixHeadlessLineChartProps = {
   /** Whether a wash is drawn under each line, each from the floor on its own.
 The washes overlap rather than add up: for parts that make a total, use
@@ -9153,6 +9383,134 @@ export type HelixHeadlessLoaderSolidJsProps = {
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixHeadlessMap` component event */
+export type HelixHeadlessMapElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessMap,
+  E
+>;
+/** `helix-map-pan` event type */
+export type HelixHeadlessMapHelixMapPanElementEvent =
+  HelixHeadlessMapElementEvent<HelixMapPanEvent>;
+/** `helix-map-zoom` event type */
+export type HelixHeadlessMapHelixMapZoomElementEvent =
+  HelixHeadlessMapElementEvent<HelixMapZoomEvent>;
+
+export type HelixHeadlessMapProps = {
+  /** What the control that fills the screen is called. */
+  "fullscreen-label"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
+  /** What the control that fills the screen is called. */
+  fullscreenLabel?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is the default: a map's controls are how a keyboard
+reader operates it, and chrome that hides itself by default would be this
+component undoing its own argument. Set it for a display map nobody drives. */
+  "idle-delay"?: (HelixHeadlessMap["idleDelay"] | `${number}`) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is the default: a map's controls are how a keyboard
+reader operates it, and chrome that hides itself by default would be this
+component undoing its own argument. Set it for a display map nobody drives. */
+  idleDelay?: (HelixHeadlessMap["idleDelay"]) | undefined;
+  /** Accessible name for the map, which is the one thing a consumer must write.
+
+There is no sensible default. "Map" names the widget rather than the place,
+and a reader meeting three of them on a page learns nothing from hearing the
+same word three times. */
+  label?: (HelixHeadlessMap["label"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "pan-label"?: (HelixHeadlessMap["panLabel"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  panLabel?: (HelixHeadlessMap["panLabel"]) | undefined;
+  /** How far one press moves the map, as a fraction of what is on screen.
+
+A fraction rather than a distance, because this frame does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture at
+street level and at country level, and a consumer who wants metres can
+multiply by their own. */
+  "pan-step"?: (HelixHeadlessMap["panStep"] | `${number}`) | undefined;
+  /** How far one press moves the map, as a fraction of what is on screen.
+
+A fraction rather than a distance, because this frame does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture at
+street level and at country level, and a consumer who wants metres can
+multiply by their own. */
+  panStep?: (HelixHeadlessMap["panStep"]) | undefined;
+  /** What the zoom controls are called. */
+  "zoom-in-label"?: (HelixHeadlessMap["zoomInLabel"]) | undefined;
+  /** What the zoom controls are called. */
+  zoomInLabel?: (HelixHeadlessMap["zoomInLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "zoom-out-label"?: (HelixHeadlessMap["zoomOutLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  zoomOutLabel?: (HelixHeadlessMap["zoomOutLabel"]) | undefined;
+
+  /** The reader asked the map to move. Answer it against your own map. */
+  "onhelix-map-pan"?: ((e: HelixHeadlessMapHelixMapPanElementEvent) => void) | undefined;
+  /** The reader asked the map to zoom, by a direction rather than to a level. */
+  "onhelix-map-zoom"?: ((e: HelixHeadlessMapHelixMapZoomElementEvent) => void) | undefined;
+};
+
+export type HelixHeadlessMapSolidJsProps = {
+  /** What the control that fills the screen is called. */
+  "attr:fullscreen-label"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
+  /** What the control that fills the screen is called. */
+  "prop:fullscreenLabel"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is the default: a map's controls are how a keyboard
+reader operates it, and chrome that hides itself by default would be this
+component undoing its own argument. Set it for a display map nobody drives. */
+  "attr:idle-delay"?: (HelixHeadlessMap["idleDelay"] | `${number}`) | undefined;
+  /** How long the reader may be still before the chrome hides, in milliseconds.
+
+Zero keeps it up, which is the default: a map's controls are how a keyboard
+reader operates it, and chrome that hides itself by default would be this
+component undoing its own argument. Set it for a display map nobody drives. */
+  "prop:idleDelay"?: (HelixHeadlessMap["idleDelay"]) | undefined;
+  /** Accessible name for the map, which is the one thing a consumer must write.
+
+There is no sensible default. "Map" names the widget rather than the place,
+and a reader meeting three of them on a page learns nothing from hearing the
+same word three times. */
+  "prop:label"?: (HelixHeadlessMap["label"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "attr:pan-label"?: (HelixHeadlessMap["panLabel"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "prop:panLabel"?: (HelixHeadlessMap["panLabel"]) | undefined;
+  /** How far one press moves the map, as a fraction of what is on screen.
+
+A fraction rather than a distance, because this frame does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture at
+street level and at country level, and a consumer who wants metres can
+multiply by their own. */
+  "attr:pan-step"?: (HelixHeadlessMap["panStep"] | `${number}`) | undefined;
+  /** How far one press moves the map, as a fraction of what is on screen.
+
+A fraction rather than a distance, because this frame does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture at
+street level and at country level, and a consumer who wants metres can
+multiply by their own. */
+  "prop:panStep"?: (HelixHeadlessMap["panStep"]) | undefined;
+  /** What the zoom controls are called. */
+  "attr:zoom-in-label"?: (HelixHeadlessMap["zoomInLabel"]) | undefined;
+  /** What the zoom controls are called. */
+  "prop:zoomInLabel"?: (HelixHeadlessMap["zoomInLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "attr:zoom-out-label"?: (HelixHeadlessMap["zoomOutLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "prop:zoomOutLabel"?: (HelixHeadlessMap["zoomOutLabel"]) | undefined;
+  /** The reader asked the map to move. Answer it against your own map. */
+  "on:helix-map-pan"?: ((e: HelixHeadlessMapHelixMapPanElementEvent) => void) | undefined;
+  /** The reader asked the map to zoom, by a direction rather than to a level. */
+  "on:helix-map-zoom"?: ((e: HelixHeadlessMapHelixMapZoomElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixHeadlessMegamenu` component event */
 export type HelixHeadlessMegamenuElementEvent<E = Event> = TypedEvent<
   HelixHeadlessMegamenu,
@@ -26157,6 +26515,227 @@ export type CustomElements = {
     HelixHeadlessLegendProps & BaseProps<HelixHeadlessLegend> & BaseEvents<HelixHeadlessLegend>
   >;
 
+  /**
+   * A wrapper around whatever the consumer opened, which is the whole of what it
+   * is: a picture, a frame of video, a chart. The family shows one at a time and
+   * this is how it says which, so the content stays the consumer's and the
+   * arithmetic stays the root's.
+   *
+   * Hidden rather than unmounted while another item is current, for the reason
+   * `TabPanel` gives: what is in the markup is what a crawler reads and what a
+   * server sent, and an `<img>` that has already decoded does not decode again
+   * when the reader walks back to it.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current`: Whether this is the one being shown.
+   *
+   * Written by the root, which is the only thing that sees the set.
+   * - `label`: What this item is called, for the reading that says where the reader is.
+   * - `value`: What names this item, and what `active` on the root is compared against.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: What is being shown.
+   * - `description`: A line under it saying what it is.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: The box the content is shown in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `current`: While this is the item the lightbox is showing.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-lightbox-item": Partial<
+    HelixHeadlessLightboxItemProps &
+      BaseProps<HelixHeadlessLightboxItem> &
+      BaseEvents<HelixHeadlessLightboxItem>
+  >;
+
+  /**
+   * **A lightbox is chrome around a picture rather than a picture.** It draws
+   * nothing of its own: what it shows is whatever the consumer opened, so this
+   * earns its place on the frame, the keyboard and the reading that says where in
+   * the set the reader is.
+   *
+   * **The modal half is the platform's.** A real `<dialog>` opened with
+   * `showModal()` brings the top layer, a backdrop, Escape and `inert` behind it,
+   * and this repository has already removed one hand-written focus trap for being
+   * worse than that: `inert` on the rest of the document is something no
+   * JavaScript trap can achieve. Every way it can close comes back through
+   * `requestOpen`, which is what `Dialog` and `Drawer` both do and for the reason
+   * they both give.
+   *
+   * **The set is this component's own and not `Carousel`'s.** A carousel is a
+   * track: a scroller with snap points, per-view arithmetic and stops it can rest
+   * between. A lightbox shows one thing at a time and has no track, so what it
+   * needs is which item is current, which is `active` and the same pair `Tabs`
+   * uses. The arrow keys move the picture under a reader whose focus stays in the
+   * dialog, which is also why `KeyboardNavigationController` is not the right
+   * tool: that one moves focus between focusable items, and these are pictures.
+   *
+   * **Chrome hides while the reader is still**, on `IdleController`, and comes
+   * back on a pointer move or a focus. `fullscreen` is `FullscreenController`, the
+   * same pair `Video` holds and the only two it shares.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `idle-delay`/`idleDelay`: How long the reader may be still before the chrome hides, in milliseconds.
+   *
+   * Zero keeps it up, which is what a viewer with a caption worth reading
+   * wants. The wait is only ever about idling: whether anything else should
+   * keep the chrome up is the consumer's to decide with this.
+   * - `label`: Accessible name for the viewer.
+   * - `loop`: Whether walking past the end comes back to the beginning.
+   * - `status-label`/`statusLabel`: The reading that says where in the set the reader is, with `{index}` and
+   * `{count}` filled in.
+   *
+   * Announced rather than only drawn, because the picture changing under a
+   * reader who cannot see it is otherwise silent. A consumer who has their own
+   * counter in the chrome can empty this and say it themselves.
+   * - `active`: Which item is current, by its `value`.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: Which item the markup declared current.
+   *
+   * Ignored once `active` is written.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
+   * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `close`: Relayed, because the platform's own does not escape.
+   * - `helix-activate`: Fired once the shown item has moved, so the element already holds it.
+   * - `helix-before-activate`: Fired before the shown item changes, and cancelable. The only way to refuse one.
+   * - `helix-before-close`: Fired before it closes, and cancelable.
+   * - `helix-before-open`: Fired before it opens, and cancelable.
+   * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The items, which are `<helix-headless-lightbox-item>` elements.
+   * - `footer`: Chrome below the item, such as a counter or a thumbnail strip.
+   * - `header`: Chrome above the item, such as a title and a close button.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `show() => void`: Opens the viewer, which makes the rest of the page inert.
+   * - `close() => void`: Asks to close, which a consumer may refuse.
+   * - `next() => void`: Shows the next item, or the first where it is past the end and looping.
+   * - `previous() => void`: Shows the previous item, or the last where it is past the start and looping.
+   * - `toggleFullscreen() => void`: Fills the screen with the viewer, or comes back.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and reports whether the request stood.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   * - `requestOpen(next: boolean) => boolean`: Requests an open-state change, and reports whether it was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `dialog`: The native dialog element.
+   * - `live`: The region that says which item is shown.
+   * - `viewport`: The box the current item is shown in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: While the viewer fills the screen.
+   * - `idle`: While the reader has been still long enough to hide the chrome.
+   * - `open`: While the viewer is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-lightbox": Partial<
+    HelixHeadlessLightboxProps & BaseProps<HelixHeadlessLightbox> & BaseEvents<HelixHeadlessLightbox>
+  >;
+
   /**
    * The chart for a shape rather than for a quantity, which is what decides the
    * one thing a bar chart is not allowed to do.
@@ -26906,6 +27485,127 @@ export type CustomElements = {
     HelixHeadlessLoaderProps & BaseProps<HelixHeadlessLoader> & BaseEvents<HelixHeadlessLoader>
   >;
 
+  /**
+   * **Helix draws no map.** There are no tiles here, no projection and no
+   * network, and there should not be: a tile renderer is a library, and what a
+   * design system can add to MapLibre or Leaflet is the frame. The consumer slots
+   * their map and this owns the box, the name, the controls and the way out,
+   * which is the shape `VideoPlaylist` uses for a player it never renders.
+   *
+   * **The accessibility argument is the reason this exists**, and it was measured
+   * rather than assumed: a map embedded the ordinary way is a canvas with no role
+   * and no name, and it has *no node at all* in the accessibility tree. A reader
+   * using a screen reader does not walk past it so much as never meet it. A named
+   * region with controls in it is the whole of the difference.
+   *
+   * **The controls are buttons, and that is a deliberate choice against arrow
+   * keys.** Arrows work here too, but what a screen reader does with them is not
+   * ours to decide: macOS passes them through, Windows readers hold them for
+   * their own reading mode unless a page takes `role="application"`, which costs
+   * the reader their normal way of reading everything else in the frame. A button
+   * is findable and operable in every screen reader on every platform without
+   * that bargain, so panning and zooming are buttons first and keys second.
+   *
+   * **Nothing here moves the map.** Both controls ask, through `helix-map-pan`
+   * and `helix-map-zoom`, and the consumer answers against whatever they slotted.
+   * A frame that moved the map would have to know whose map it was.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `fullscreen-label`/`fullscreenLabel`: What the control that fills the screen is called.
+   * - `idle-delay`/`idleDelay`: How long the reader may be still before the chrome hides, in milliseconds.
+   *
+   * Zero keeps it up, which is the default: a map's controls are how a keyboard
+   * reader operates it, and chrome that hides itself by default would be this
+   * component undoing its own argument. Set it for a display map nobody drives.
+   * - `label`: Accessible name for the map, which is the one thing a consumer must write.
+   *
+   * There is no sensible default. "Map" names the widget rather than the place,
+   * and a reader meeting three of them on a page learns nothing from hearing the
+   * same word three times.
+   * - `pan-label`/`panLabel`: What the controls are called, for a page not in English.
+   * - `pan-step`/`panStep`: How far one press moves the map, as a fraction of what is on screen.
+   *
+   * A fraction rather than a distance, because this frame does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture at
+   * street level and at country level, and a consumer who wants metres can
+   * multiply by their own.
+   * - `zoom-in-label`/`zoomInLabel`: What the zoom controls are called.
+   * - `zoom-out-label`/`zoomOutLabel`: What the zoom control that goes the other way is called.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-map-pan`: The reader asked the map to move. Answer it against your own map.
+   * - `helix-map-zoom`: The reader asked the map to zoom, by a direction rather than to a level.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The map, which is the consumer's own.
+   * - `attribution`: Whoever the tiles belong to, which most licenses require you to say.
+   * - `footer`: Chrome below the map, such as a legend or a scale.
+   * - `header`: Chrome above the map, such as a title or a search field.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `toggleFullscreen() => void`: Fills the screen with the frame, or comes back.
+   * - `pan(to: Way) => void`: Asks for the map to move, which the consumer answers.
+   * - `zoom(by: number) => void`: Asks for the map to zoom, `1` in and `-1` out.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `fullscreen`: The button that fills the screen.
+   * - `pan-down`: The button that moves the map down.
+   * - `pan-end`: The button that moves the map the way the text ends, which is right on an English page.
+   * - `pan-start`: The button that moves the map the way the text starts, which is left on an English page.
+   * - `pan-up`: The button that moves the map up.
+   * - `region`: The named region the map is slotted into.
+   * - `viewport`: The box the map is drawn in.
+   * - `zoom-in`: The button that zooms in.
+   * - `zoom-out`: The button that zooms out.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: While the frame fills the screen.
+   * - `idle`: While the reader has been still long enough to hide the chrome.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-map": Partial<
+    HelixHeadlessMapProps & BaseProps<HelixHeadlessMap> & BaseEvents<HelixHeadlessMap>
+  >;
+
   /**
    * **A disclosure, not a menu, and that is the whole design.** `role="menu"` and
    * `menuitem` are for an application's commands: they take over the arrow keys,
@@ -44264,6 +44964,231 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixHeadlessLegend>
   >;
 
+  /**
+   * A wrapper around whatever the consumer opened, which is the whole of what it
+   * is: a picture, a frame of video, a chart. The family shows one at a time and
+   * this is how it says which, so the content stays the consumer's and the
+   * arithmetic stays the root's.
+   *
+   * Hidden rather than unmounted while another item is current, for the reason
+   * `TabPanel` gives: what is in the markup is what a crawler reads and what a
+   * server sent, and an `<img>` that has already decoded does not decode again
+   * when the reader walks back to it.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current`: Whether this is the one being shown.
+   *
+   * Written by the root, which is the only thing that sees the set.
+   * - `label`: What this item is called, for the reading that says where the reader is.
+   * - `value`: What names this item, and what `active` on the root is compared against.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: What is being shown.
+   * - `description`: A line under it saying what it is.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: The box the content is shown in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `current`: While this is the item the lightbox is showing.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-lightbox-item": Partial<
+    HelixHeadlessLightboxItemProps &
+      HelixHeadlessLightboxItemSolidJsProps &
+      BaseProps<HelixHeadlessLightboxItem> &
+      BaseEvents<HelixHeadlessLightboxItem>
+  >;
+
+  /**
+   * **A lightbox is chrome around a picture rather than a picture.** It draws
+   * nothing of its own: what it shows is whatever the consumer opened, so this
+   * earns its place on the frame, the keyboard and the reading that says where in
+   * the set the reader is.
+   *
+   * **The modal half is the platform's.** A real `<dialog>` opened with
+   * `showModal()` brings the top layer, a backdrop, Escape and `inert` behind it,
+   * and this repository has already removed one hand-written focus trap for being
+   * worse than that: `inert` on the rest of the document is something no
+   * JavaScript trap can achieve. Every way it can close comes back through
+   * `requestOpen`, which is what `Dialog` and `Drawer` both do and for the reason
+   * they both give.
+   *
+   * **The set is this component's own and not `Carousel`'s.** A carousel is a
+   * track: a scroller with snap points, per-view arithmetic and stops it can rest
+   * between. A lightbox shows one thing at a time and has no track, so what it
+   * needs is which item is current, which is `active` and the same pair `Tabs`
+   * uses. The arrow keys move the picture under a reader whose focus stays in the
+   * dialog, which is also why `KeyboardNavigationController` is not the right
+   * tool: that one moves focus between focusable items, and these are pictures.
+   *
+   * **Chrome hides while the reader is still**, on `IdleController`, and comes
+   * back on a pointer move or a focus. `fullscreen` is `FullscreenController`, the
+   * same pair `Video` holds and the only two it shares.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `idle-delay`/`idleDelay`: How long the reader may be still before the chrome hides, in milliseconds.
+   *
+   * Zero keeps it up, which is what a viewer with a caption worth reading
+   * wants. The wait is only ever about idling: whether anything else should
+   * keep the chrome up is the consumer's to decide with this.
+   * - `label`: Accessible name for the viewer.
+   * - `loop`: Whether walking past the end comes back to the beginning.
+   * - `status-label`/`statusLabel`: The reading that says where in the set the reader is, with `{index}` and
+   * `{count}` filled in.
+   *
+   * Announced rather than only drawn, because the picture changing under a
+   * reader who cannot see it is otherwise silent. A consumer who has their own
+   * counter in the chrome can empty this and say it themselves.
+   * - `active`: Which item is current, by its `value`.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: Which item the markup declared current.
+   *
+   * Ignored once `active` is written.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
+   * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `close`: Relayed, because the platform's own does not escape.
+   * - `helix-activate`: Fired once the shown item has moved, so the element already holds it.
+   * - `helix-before-activate`: Fired before the shown item changes, and cancelable. The only way to refuse one.
+   * - `helix-before-close`: Fired before it closes, and cancelable.
+   * - `helix-before-open`: Fired before it opens, and cancelable.
+   * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The items, which are `<helix-headless-lightbox-item>` elements.
+   * - `footer`: Chrome below the item, such as a counter or a thumbnail strip.
+   * - `header`: Chrome above the item, such as a title and a close button.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `show() => void`: Opens the viewer, which makes the rest of the page inert.
+   * - `close() => void`: Asks to close, which a consumer may refuse.
+   * - `next() => void`: Shows the next item, or the first where it is past the end and looping.
+   * - `previous() => void`: Shows the previous item, or the last where it is past the start and looping.
+   * - `toggleFullscreen() => void`: Fills the screen with the viewer, or comes back.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and reports whether the request stood.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   * - `requestOpen(next: boolean) => boolean`: Requests an open-state change, and reports whether it was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `dialog`: The native dialog element.
+   * - `live`: The region that says which item is shown.
+   * - `viewport`: The box the current item is shown in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: While the viewer fills the screen.
+   * - `idle`: While the reader has been still long enough to hide the chrome.
+   * - `open`: While the viewer is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-lightbox": Partial<
+    HelixHeadlessLightboxProps &
+      HelixHeadlessLightboxSolidJsProps &
+      BaseProps<HelixHeadlessLightbox> &
+      BaseEvents<HelixHeadlessLightbox>
+  >;
+
   /**
    * The chart for a shape rather than for a quantity, which is what decides the
    * one thing a bar chart is not allowed to do.
@@ -45028,6 +45953,130 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixHeadlessLoader>
   >;
 
+  /**
+   * **Helix draws no map.** There are no tiles here, no projection and no
+   * network, and there should not be: a tile renderer is a library, and what a
+   * design system can add to MapLibre or Leaflet is the frame. The consumer slots
+   * their map and this owns the box, the name, the controls and the way out,
+   * which is the shape `VideoPlaylist` uses for a player it never renders.
+   *
+   * **The accessibility argument is the reason this exists**, and it was measured
+   * rather than assumed: a map embedded the ordinary way is a canvas with no role
+   * and no name, and it has *no node at all* in the accessibility tree. A reader
+   * using a screen reader does not walk past it so much as never meet it. A named
+   * region with controls in it is the whole of the difference.
+   *
+   * **The controls are buttons, and that is a deliberate choice against arrow
+   * keys.** Arrows work here too, but what a screen reader does with them is not
+   * ours to decide: macOS passes them through, Windows readers hold them for
+   * their own reading mode unless a page takes `role="application"`, which costs
+   * the reader their normal way of reading everything else in the frame. A button
+   * is findable and operable in every screen reader on every platform without
+   * that bargain, so panning and zooming are buttons first and keys second.
+   *
+   * **Nothing here moves the map.** Both controls ask, through `helix-map-pan`
+   * and `helix-map-zoom`, and the consumer answers against whatever they slotted.
+   * A frame that moved the map would have to know whose map it was.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `fullscreen-label`/`fullscreenLabel`: What the control that fills the screen is called.
+   * - `idle-delay`/`idleDelay`: How long the reader may be still before the chrome hides, in milliseconds.
+   *
+   * Zero keeps it up, which is the default: a map's controls are how a keyboard
+   * reader operates it, and chrome that hides itself by default would be this
+   * component undoing its own argument. Set it for a display map nobody drives.
+   * - `label`: Accessible name for the map, which is the one thing a consumer must write.
+   *
+   * There is no sensible default. "Map" names the widget rather than the place,
+   * and a reader meeting three of them on a page learns nothing from hearing the
+   * same word three times.
+   * - `pan-label`/`panLabel`: What the controls are called, for a page not in English.
+   * - `pan-step`/`panStep`: How far one press moves the map, as a fraction of what is on screen.
+   *
+   * A fraction rather than a distance, because this frame does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture at
+   * street level and at country level, and a consumer who wants metres can
+   * multiply by their own.
+   * - `zoom-in-label`/`zoomInLabel`: What the zoom controls are called.
+   * - `zoom-out-label`/`zoomOutLabel`: What the zoom control that goes the other way is called.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-map-pan`: The reader asked the map to move. Answer it against your own map.
+   * - `helix-map-zoom`: The reader asked the map to zoom, by a direction rather than to a level.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The map, which is the consumer's own.
+   * - `attribution`: Whoever the tiles belong to, which most licenses require you to say.
+   * - `footer`: Chrome below the map, such as a legend or a scale.
+   * - `header`: Chrome above the map, such as a title or a search field.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `toggleFullscreen() => void`: Fills the screen with the frame, or comes back.
+   * - `pan(to: Way) => void`: Asks for the map to move, which the consumer answers.
+   * - `zoom(by: number) => void`: Asks for the map to zoom, `1` in and `-1` out.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `fullscreen`: The button that fills the screen.
+   * - `pan-down`: The button that moves the map down.
+   * - `pan-end`: The button that moves the map the way the text ends, which is right on an English page.
+   * - `pan-start`: The button that moves the map the way the text starts, which is left on an English page.
+   * - `pan-up`: The button that moves the map up.
+   * - `region`: The named region the map is slotted into.
+   * - `viewport`: The box the map is drawn in.
+   * - `zoom-in`: The button that zooms in.
+   * - `zoom-out`: The button that zooms out.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: While the frame fills the screen.
+   * - `idle`: While the reader has been still long enough to hide the chrome.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
+   */
+  "helix-headless-map": Partial<
+    HelixHeadlessMapProps &
+      HelixHeadlessMapSolidJsProps &
+      BaseProps<HelixHeadlessMap> &
+      BaseEvents<HelixHeadlessMap>
+  >;
+
   /**
    * **A disclosure, not a menu, and that is the whole design.** `role="menu"` and
    * `menuitem` are for an application's commands: they take over the arrow keys,