@fusion.dev/helix 0.99.0 → 0.101.0

package/types/jsx.d.ts

@@ -82,6 +82,8 @@ import type {
   HelixInput,
   HelixKbd,
   HelixLegend,
+  HelixLightbox,
+  HelixLightboxItem,
   HelixLineChart,
   HelixList,
   HelixListItem,
@@ -10536,6 +10538,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.
 
@@ -30391,6 +30609,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
@@ -50239,6 +50676,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
@@ -61710,6 +62372,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. */