@fusion.dev/helix 0.99.0 → 0.101.0

package/types/svelte.d.ts

@@ -65,6 +65,8 @@ declare module 'svelte/elements' {
     'helix-input': CustomElements['helix-input']
     'helix-kbd': CustomElements['helix-kbd']
     'helix-legend': CustomElements['helix-legend']
+    'helix-lightbox-item': CustomElements['helix-lightbox-item']
+    'helix-lightbox': CustomElements['helix-lightbox']
     'helix-line-chart': CustomElements['helix-line-chart']
     'helix-list-item': CustomElements['helix-list-item']
     'helix-list': CustomElements['helix-list']

package/types/vue.d.ts

@@ -57,6 +57,8 @@ import type {
   HelixInput,
   HelixKbd,
   HelixLegend,
+  HelixLightboxItem,
+  HelixLightbox,
   HelixLineChart,
   HelixListItem,
   HelixList,
@@ -159,8 +161,9 @@ import type {
   HelixFacetEvent,
   HelixResizeEvent,
   HelixShortcutEvent,
-  HelixReadEvent,
   HelixActivateEvent,
+  HelixBeforeActivateEvent,
+  HelixReadEvent,
   HelixCompleteEvent,
   HelixConsoleEvent,
   HelixBeforeEditEvent,
@@ -169,7 +172,6 @@ import type {
   HelixCaretEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
-  HelixBeforeActivateEvent,
   HelixTourAskEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -5383,6 +5385,116 @@ shadow root reads a table in that root rather than one in the document.
 
 export type HelixLegendVueEvents = {};
 
+export type HelixLightboxItemVueProps = {
+  /** 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 HelixLightboxItemVueEvents = {};
+
+/** `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 HelixLightboxVueProps = {
+  /** 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;
+};
+
+export type HelixLightboxVueEvents = {
+  /** Fired once the shown item has moved, so the element already holds it. */
+  "helix-activate": HelixLightboxHelixActivateElementEvent;
+  /** Relayed, because the platform's own does not escape. */
+  close: HelixLightboxElementEvent;
+  /** Fired before the shown item changes, and cancelable. The only way to refuse one. */
+  "helix-before-activate": HelixLightboxHelixBeforeActivateElementEvent;
+  /** Fired before it closes, and cancelable. */
+  "helix-before-close": HelixLightboxHelixBeforeCloseElementEvent;
+  /** Fired before it opens, and cancelable. */
+  "helix-before-open": HelixLightboxHelixBeforeOpenElementEvent;
+  /** Says the state moved, carrying `newState` and `oldState`. */
+  toggle: HelixLightboxElementEvent;
+};
+
 export type HelixLineChartVueProps = {
   /** How much ink the lines claim.
 
@@ -11471,6 +11583,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. */
@@ -12381,6 +12505,18 @@ export interface WcToolkitVueGlobalComponents {
     HelixLegendVueProps,
     HelixLegendVueEvents
   >;
+  /** 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. */
+  "helix-lightbox-item": DefineCustomElement<
+    HelixLightboxItem,
+    HelixLightboxItemVueProps,
+    HelixLightboxItemVueEvents
+  >;
+  /** **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. */
+  "helix-lightbox": DefineCustomElement<
+    HelixLightbox,
+    HelixLightboxVueProps,
+    HelixLightboxVueEvents
+  >;
   /** 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 twenty-four.  The stroke does not scale with the box. 'preserveAspectRatio="none"' is what lets one drawing fill a narrow card and a wide panel, and without 'vector-effect: non-scaling-stroke' the same line comes out hairline in the first and heavy in the second. It rescues strokes and not geometry, which is why nothing inside the drawing marks a reading: a circle in a stretched coordinate space is an ellipse, and there is no vector-effect that answers for a shape.  **The last reading of each series is marked, and that is the same rule rather than an exception to it.** 'terminus' draws an HTML element placed over the plot by percentage instead of a shape inside it, so it keeps its shape at any width. It is on by default, as a dot, because the column of marks at the far edge is where a reader looks for "and what is it now". */
   "helix-line-chart": DefineCustomElement<
     HelixLineChart,