@fusion.dev/helix 0.100.0 → 0.102.0

package/types/jsx.d.ts

@@ -82,11 +82,16 @@ import type {
   HelixInput,
   HelixKbd,
   HelixLegend,
+  HelixLightbox,
+  HelixLightboxItem,
   HelixLineChart,
   HelixList,
   HelixListItem,
   HelixListbox,
   HelixLoader,
+  HelixMap,
+  HelixMapPanEvent,
+  HelixMapZoomEvent,
   HelixMegamenu,
   HelixMenu,
   HelixMenuItem,
@@ -10536,6 +10541,222 @@ shadow root reads a table in that root rather than one in the document.
   textContent?: (string | number) | undefined;
 };
 
+export type HelixLightboxItemProps = {
+  /** Whether this is the one being shown.
+
+Written by the root, which is the only thing that sees the set. */
+  current?: (HelixLightboxItem["current"]) | undefined;
+  /** What this item is called, for the reading that says where the reader is. */
+  label?: (HelixLightboxItem["label"]) | undefined;
+  /** What names this item, and what `active` on the root is compared against. */
+  value?: (HelixLightboxItem["value"]) | undefined;
+};
+
+export type HelixLightboxItemSolidJsProps = {
+  /** Whether this is the one being shown.
+
+Written by the root, which is the only thing that sees the set. */
+  "prop:current"?: (HelixLightboxItem["current"]) | undefined;
+  /** What this item is called, for the reading that says where the reader is. */
+  "prop:label"?: (HelixLightboxItem["label"]) | undefined;
+  /** What names this item, and what `active` on the root is compared against. */
+  "prop:value"?: (HelixLightboxItem["value"]) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
+/** `HelixLightbox` component event */
+export type HelixLightboxElementEvent<E = Event> = TypedEvent<HelixLightbox, E>;
+/** `helix-activate` event type */
+export type HelixLightboxHelixActivateElementEvent =
+  HelixLightboxElementEvent<HelixActivateEvent>;
+/** `helix-before-activate` event type */
+export type HelixLightboxHelixBeforeActivateElementEvent =
+  HelixLightboxElementEvent<HelixBeforeActivateEvent>;
+/** `helix-before-close` event type */
+export type HelixLightboxHelixBeforeCloseElementEvent =
+  HelixLightboxElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixLightboxHelixBeforeOpenElementEvent =
+  HelixLightboxElementEvent<HelixBeforeOpenEvent>;
+
+export type HelixLightboxProps = {
+  /** 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?: (HelixLightbox["active"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "default-active"?: (HelixLightbox["defaultActive"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  defaultActive?: (HelixLightbox["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?: (HelixLightbox["open"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "default-open"?: (HelixLightbox["defaultOpen"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  defaultOpen?: (HelixLightbox["defaultOpen"]) | 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. */
+  "idle-delay"?: (HelixLightbox["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?: (HelixLightbox["idleDelay"]) | undefined;
+  /** Accessible name for the viewer. */
+  label?: (HelixLightbox["label"]) | undefined;
+  /** Whether walking past the end comes back to the beginning. */
+  loop?: (HelixLightbox["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"?: (HelixLightbox["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?: (HelixLightbox["statusLabel"]) | undefined;
+
+  /** Fired once the shown item has moved, so the element already holds it. */
+  "onhelix-activate"?: ((e: HelixLightboxHelixActivateElementEvent) => void) | undefined;
+  /** Relayed, because the platform's own does not escape. */
+  onclose?: ((e: HelixLightboxElementEvent) => void) | undefined;
+  /** Fired before the shown item changes, and cancelable. The only way to refuse one. */
+  "onhelix-before-activate"?: ((
+    e: HelixLightboxHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before it closes, and cancelable. */
+  "onhelix-before-close"?: ((
+    e: HelixLightboxHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before it opens, and cancelable. */
+  "onhelix-before-open"?: ((e: HelixLightboxHelixBeforeOpenElementEvent) => void) | undefined;
+  /** Says the state moved, carrying `newState` and `oldState`. */
+  ontoggle?: ((e: HelixLightboxElementEvent) => void) | undefined;
+};
+
+export type HelixLightboxSolidJsProps = {
+  /** 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"?: (HelixLightbox["active"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "attr:default-active"?: (HelixLightbox["defaultActive"]) | undefined;
+  /** Which item the markup declared current.
+
+Ignored once `active` is written. */
+  "prop:defaultActive"?: (HelixLightbox["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"?: (HelixLightbox["open"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "bool:default-open"?: (HelixLightbox["defaultOpen"]) | undefined;
+  /** Whether the markup declared it open. Ignored once `open` is written. */
+  "prop:defaultOpen"?: (HelixLightbox["defaultOpen"]) | 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. */
+  "attr:idle-delay"?: (HelixLightbox["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"?: (HelixLightbox["idleDelay"]) | undefined;
+  /** Accessible name for the viewer. */
+  "prop:label"?: (HelixLightbox["label"]) | undefined;
+  /** Whether walking past the end comes back to the beginning. */
+  "prop:loop"?: (HelixLightbox["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"?: (HelixLightbox["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"?: (HelixLightbox["statusLabel"]) | undefined;
+  /** Fired once the shown item has moved, so the element already holds it. */
+  "on:helix-activate"?: ((e: HelixLightboxHelixActivateElementEvent) => void) | undefined;
+  /** Relayed, because the platform's own does not escape. */
+  "on:close"?: ((e: HelixLightboxElementEvent) => void) | undefined;
+  /** Fired before the shown item changes, and cancelable. The only way to refuse one. */
+  "on:helix-before-activate"?: ((
+    e: HelixLightboxHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** Fired before it closes, and cancelable. */
+  "on:helix-before-close"?: ((
+    e: HelixLightboxHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before it opens, and cancelable. */
+  "on:helix-before-open"?: ((
+    e: HelixLightboxHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
+  /** Says the state moved, carrying `newState` and `oldState`. */
+  "on:toggle"?: ((e: HelixLightboxElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 export type HelixLineChartProps = {
   /** How much ink the lines claim.
 
@@ -11279,6 +11500,131 @@ around a logo reads as chrome bolted to the brand. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixMap` component event */
+export type HelixMapElementEvent<E = Event> = TypedEvent<HelixMap, E>;
+/** `helix-map-pan` event type */
+export type HelixMapHelixMapPanElementEvent =
+  HelixMapElementEvent<HelixMapPanEvent>;
+/** `helix-map-zoom` event type */
+export type HelixMapHelixMapZoomElementEvent =
+  HelixMapElementEvent<HelixMapZoomEvent>;
+
+export type HelixMapProps = {
+  /** What the control that fills the screen is called. */
+  "fullscreen-label"?: (HelixMap["fullscreenLabel"]) | undefined;
+  /** What the control that fills the screen is called. */
+  fullscreenLabel?: (HelixMap["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"?: (HelixMap["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?: (HelixMap["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?: (HelixMap["label"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "pan-label"?: (HelixMap["panLabel"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  panLabel?: (HelixMap["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"?: (HelixMap["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?: (HelixMap["panStep"]) | undefined;
+  /** What the zoom controls are called. */
+  "zoom-in-label"?: (HelixMap["zoomInLabel"]) | undefined;
+  /** What the zoom controls are called. */
+  zoomInLabel?: (HelixMap["zoomInLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "zoom-out-label"?: (HelixMap["zoomOutLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  zoomOutLabel?: (HelixMap["zoomOutLabel"]) | undefined;
+
+  /** The reader asked the map to move. Answer it against your own map. */
+  "onhelix-map-pan"?: ((e: HelixMapHelixMapPanElementEvent) => void) | undefined;
+  /** The reader asked the map to zoom, by a direction rather than to a level. */
+  "onhelix-map-zoom"?: ((e: HelixMapHelixMapZoomElementEvent) => void) | undefined;
+};
+
+export type HelixMapSolidJsProps = {
+  /** What the control that fills the screen is called. */
+  "attr:fullscreen-label"?: (HelixMap["fullscreenLabel"]) | undefined;
+  /** What the control that fills the screen is called. */
+  "prop:fullscreenLabel"?: (HelixMap["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"?: (HelixMap["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"?: (HelixMap["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"?: (HelixMap["label"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "attr:pan-label"?: (HelixMap["panLabel"]) | undefined;
+  /** What the controls are called, for a page not in English. */
+  "prop:panLabel"?: (HelixMap["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"?: (HelixMap["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"?: (HelixMap["panStep"]) | undefined;
+  /** What the zoom controls are called. */
+  "attr:zoom-in-label"?: (HelixMap["zoomInLabel"]) | undefined;
+  /** What the zoom controls are called. */
+  "prop:zoomInLabel"?: (HelixMap["zoomInLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "attr:zoom-out-label"?: (HelixMap["zoomOutLabel"]) | undefined;
+  /** What the zoom control that goes the other way is called. */
+  "prop:zoomOutLabel"?: (HelixMap["zoomOutLabel"]) | undefined;
+  /** The reader asked the map to move. Answer it against your own map. */
+  "on:helix-map-pan"?: ((e: HelixMapHelixMapPanElementEvent) => void) | undefined;
+  /** The reader asked the map to zoom, by a direction rather than to a level. */
+  "on:helix-map-zoom"?: ((e: HelixMapHelixMapZoomElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixMegamenu` component event */
 export type HelixMegamenuElementEvent<E = Event> = TypedEvent<HelixMegamenu, E>;
 /** `helix-before-close` event type */
@@ -30391,6 +30737,225 @@ export type CustomElements = {
     HelixLegendProps & BaseProps<HelixLegend> & BaseEvents<HelixLegend>
   >;
 
+  /**
+   * Presentation only: the box centers what it was given and holds it inside the
+   * viewport rather than sizing it, because what is in here is the consumer's and
+   * may be a picture, a frame of video or a chart. Which item is shown, and the
+   * arithmetic that decides, is the base class.
+   *
+   * ## 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 Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--lightbox-item-description-color`: Color of the line under the content. (default: `undefined`)
+   * - `--lightbox-item-gap`: Space between the content and the line under it. (default: `undefined`)
+   *
+   * ## 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-lightbox-item": Partial<
+    HelixLightboxItemProps & BaseProps<HelixLightboxItem> & BaseEvents<HelixLightboxItem>
+  >;
+
+  /**
+   * **A takeover rather than a panel, which is the whole difference from
+   * `Dialog`.** A dialog is a thing over the page and stops short of the edges to
+   * say so; a lightbox is the page for as long as it is open. The scrim is heavier
+   * for the same reason: what is behind it is not meant to be read.
+   *
+   * **A dark region that says so once**, with `color-scheme: dark` on the host,
+   * which is `Video`'s answer to the same problem: the chrome is the consumer's
+   * own components and they resolve their own tokens, so without a scheme on the
+   * region they draw page-colored ink on a black room and disappear into it.
+   *
+   * The chrome fades rather than leaves while the reader is still, because a bar
+   * that is removed from the layout takes the picture's size with it and the
+   * reader watches it jump every time they stop moving.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `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.
+   * - `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.
+   * - `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-activate`: Fired once the shown item has moved, so the element already holds it.
+   * - `close`: Relayed, because the platform's own does not escape.
+   * - `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.
+   *
+   * - `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.
+   * - `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.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--lightbox-foreground`: Color of the chrome drawn over the content. (default: `undefined`)
+   * - `--lightbox-gap`: Space between the chrome and the content. (default: `undefined`)
+   * - `--lightbox-padding`: Inset from the edges of the screen. (default: `undefined`)
+   * - `--lightbox-scrim`: The wash over the page behind the viewer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one. (default: `undefined`)
+   *
+   * ## 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-lightbox": Partial<
+    HelixLightboxProps & BaseProps<HelixLightbox> & BaseEvents<HelixLightbox>
+  >;
+
   /**
    * The lines take the series palette in order, so a chart of one is series one
    * and a chart of four is the first four, and a legend beside it maps the same
@@ -31193,6 +31758,118 @@ export type CustomElements = {
     HelixLoaderProps & BaseProps<HelixLoader> & BaseEvents<HelixLoader>
   >;
 
+  /**
+   * Presentation only: a bordered well with the controls over it, at the corner
+   * every map puts them. What the frame is for, and why the controls are buttons
+   * rather than arrow keys, is the base class.
+   *
+   * **The controls do not fade with the chrome.** A reader who has gone still has
+   * not stopped needing the only controls this frame offers, so the idle state
+   * takes the header and footer a consumer slotted and leaves the buttons alone.
+   *
+   * ## 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 Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--map-background-color`: The well behind the map, seen while tiles are on their way. (default: `undefined`)
+   * - `--map-block-size`: How tall the frame is. A length, since the map fills it. (default: `undefined`)
+   * - `--map-border-color`: Color of the frame's edge. (default: `undefined`)
+   * - `--map-control-background-color`: The ground under the pan and zoom buttons. (default: `undefined`)
+   *
+   * ## 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-map": Partial<HelixMapProps & BaseProps<HelixMap> & BaseEvents<HelixMap>>;
+
   /**
    * Presentation only: the trigger, and the panel it opens as a grid of columns.
    * Everything about what opens it and what closes it is the base class.
@@ -50239,6 +50916,231 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixLegend>
   >;
 
+  /**
+   * Presentation only: the box centers what it was given and holds it inside the
+   * viewport rather than sizing it, because what is in here is the consumer's and
+   * may be a picture, a frame of video or a chart. Which item is shown, and the
+   * arithmetic that decides, is the base class.
+   *
+   * ## 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 Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--lightbox-item-description-color`: Color of the line under the content. (default: `undefined`)
+   * - `--lightbox-item-gap`: Space between the content and the line under it. (default: `undefined`)
+   *
+   * ## 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-lightbox-item": Partial<
+    HelixLightboxItemProps &
+      HelixLightboxItemSolidJsProps &
+      BaseProps<HelixLightboxItem> &
+      BaseEvents<HelixLightboxItem>
+  >;
+
+  /**
+   * **A takeover rather than a panel, which is the whole difference from
+   * `Dialog`.** A dialog is a thing over the page and stops short of the edges to
+   * say so; a lightbox is the page for as long as it is open. The scrim is heavier
+   * for the same reason: what is behind it is not meant to be read.
+   *
+   * **A dark region that says so once**, with `color-scheme: dark` on the host,
+   * which is `Video`'s answer to the same problem: the chrome is the consumer's
+   * own components and they resolve their own tokens, so without a scheme on the
+   * region they draw page-colored ink on a black room and disappear into it.
+   *
+   * The chrome fades rather than leaves while the reader is still, because a bar
+   * that is removed from the layout takes the picture's size with it and the
+   * reader watches it jump every time they stop moving.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `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.
+   * - `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.
+   * - `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-activate`: Fired once the shown item has moved, so the element already holds it.
+   * - `close`: Relayed, because the platform's own does not escape.
+   * - `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.
+   *
+   * - `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.
+   * - `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.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--lightbox-foreground`: Color of the chrome drawn over the content. (default: `undefined`)
+   * - `--lightbox-gap`: Space between the chrome and the content. (default: `undefined`)
+   * - `--lightbox-padding`: Inset from the edges of the screen. (default: `undefined`)
+   * - `--lightbox-scrim`: The wash over the page behind the viewer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one. (default: `undefined`)
+   *
+   * ## 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-lightbox": Partial<
+    HelixLightboxProps &
+      HelixLightboxSolidJsProps &
+      BaseProps<HelixLightbox> &
+      BaseEvents<HelixLightbox>
+  >;
+
   /**
    * The lines take the series palette in order, so a chart of one is series one
    * and a chart of four is the first four, and a legend beside it maps the same
@@ -51055,6 +51957,120 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixLoader>
   >;
 
+  /**
+   * Presentation only: a bordered well with the controls over it, at the corner
+   * every map puts them. What the frame is for, and why the controls are buttons
+   * rather than arrow keys, is the base class.
+   *
+   * **The controls do not fade with the chrome.** A reader who has gone still has
+   * not stopped needing the only controls this frame offers, so the idle state
+   * takes the header and footer a consumer slotted and leaves the buttons alone.
+   *
+   * ## 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 Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--map-background-color`: The well behind the map, seen while tiles are on their way. (default: `undefined`)
+   * - `--map-block-size`: How tall the frame is. A length, since the map fills it. (default: `undefined`)
+   * - `--map-border-color`: Color of the frame's edge. (default: `undefined`)
+   * - `--map-control-background-color`: The ground under the pan and zoom buttons. (default: `undefined`)
+   *
+   * ## 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-map": Partial<
+    HelixMapProps & HelixMapSolidJsProps & BaseProps<HelixMap> & BaseEvents<HelixMap>
+  >;
+
   /**
    * Presentation only: the trigger, and the panel it opens as a grid of columns.
    * Everything about what opens it and what closes it is the base class.
@@ -61710,6 +62726,18 @@ export type CustomCssProperties = {
   "--legend-swatch-size"?: (string) | undefined;
   /** Width of the edge an `outlined` or `subtle` swatch is drawn with. */
   "--legend-swatch-stroke"?: (string) | undefined;
+  /** Color of the line under the content. */
+  "--lightbox-item-description-color"?: (string) | undefined;
+  /** Space between the content and the line under it. */
+  "--lightbox-item-gap"?: (string) | undefined;
+  /** Color of the chrome drawn over the content. */
+  "--lightbox-foreground"?: (string) | undefined;
+  /** Space between the chrome and the content. */
+  "--lightbox-gap"?: (string) | undefined;
+  /** Inset from the edges of the screen. */
+  "--lightbox-padding"?: (string) | undefined;
+  /** The wash over the page behind the viewer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one. */
+  "--lightbox-scrim"?: (string) | undefined;
   /** A fill for the middle of a `ring` terminus, which is otherwise open. One name across this family and Sparkline, the two reading one shared sheet. */
   "--chart-terminus-hole"?: (string) | undefined;
   /** Size of the mark on each series' last reading. One name across this family and Sparkline, the two reading one shared sheet. */
@@ -61758,6 +62786,14 @@ export type CustomCssProperties = {
   "--loader-size"?: (string) | undefined;
   /** Color of the circle behind it. */
   "--loader-track-color"?: (string) | undefined;
+  /** The well behind the map, seen while tiles are on their way. */
+  "--map-background-color"?: (string) | undefined;
+  /** How tall the frame is. A length, since the map fills it. */
+  "--map-block-size"?: (string) | undefined;
+  /** Color of the frame's edge. */
+  "--map-border-color"?: (string) | undefined;
+  /** The ground under the pan and zoom buttons. */
+  "--map-control-background-color"?: (string) | undefined;
   /** A filter behind the panel, which is `none` until one is asked for: this family carries no `material`, so the pair is two hooks rather than a word. */
   "--megamenu-backdrop"?: (string) | undefined;
   /** The panel's own fill. */