@fusion.dev/helix 0.100.0 → 0.102.0

package/types/svelte.d.ts

@@ -65,11 +65,14 @@ 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']
     'helix-listbox': CustomElements['helix-listbox']
     'helix-loader': CustomElements['helix-loader']
+    'helix-map': CustomElements['helix-map']
     'helix-megamenu': CustomElements['helix-megamenu']
     'helix-menu-item': CustomElements['helix-menu-item']
     'helix-menu': CustomElements['helix-menu']

package/types/vue.d.ts

@@ -57,11 +57,14 @@ import type {
   HelixInput,
   HelixKbd,
   HelixLegend,
+  HelixLightboxItem,
+  HelixLightbox,
   HelixLineChart,
   HelixListItem,
   HelixList,
   HelixListbox,
   HelixLoader,
+  HelixMap,
   HelixMegamenu,
   HelixMenuItem,
   HelixMenu,
@@ -159,8 +162,11 @@ import type {
   HelixFacetEvent,
   HelixResizeEvent,
   HelixShortcutEvent,
-  HelixReadEvent,
   HelixActivateEvent,
+  HelixBeforeActivateEvent,
+  HelixMapPanEvent,
+  HelixMapZoomEvent,
+  HelixReadEvent,
   HelixCompleteEvent,
   HelixConsoleEvent,
   HelixBeforeEditEvent,
@@ -169,7 +175,6 @@ import type {
   HelixCaretEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
-  HelixBeforeActivateEvent,
   HelixTourAskEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -5383,6 +5388,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.
 
@@ -5755,6 +5870,73 @@ around a logo reads as chrome bolted to the brand. */
 
 export type HelixLoaderVueEvents = {};
 
+/** `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 HelixMapVueProps = {
+  /** 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;
+};
+
+export type HelixMapVueEvents = {
+  /** The reader asked the map to move. Answer it against your own map. */
+  "helix-map-pan": HelixMapHelixMapPanElementEvent;
+  /** The reader asked the map to zoom, by a direction rather than to a level. */
+  "helix-map-zoom": HelixMapHelixMapZoomElementEvent;
+};
+
 /** `HelixMegamenu` component event */
 export type HelixMegamenuElementEvent<E = Event> = TypedEvent<HelixMegamenu, E>;
 /** `helix-before-close` event type */
@@ -11471,6 +11653,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. */
@@ -11519,6 +11713,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. */
@@ -12381,6 +12583,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,
@@ -12411,6 +12625,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixLoaderVueProps,
     HelixLoaderVueEvents
   >;
+  /** 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. */
+  "helix-map": DefineCustomElement<
+    HelixMap,
+    HelixMapVueProps,
+    HelixMapVueEvents
+  >;
   /** 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. */
   "helix-megamenu": DefineCustomElement<
     HelixMegamenu,