@fusion.dev/helix 0.101.0 → 0.102.0

package/types/vue.d.ts

@@ -64,6 +64,7 @@ import type {
   HelixList,
   HelixListbox,
   HelixLoader,
+  HelixMap,
   HelixMegamenu,
   HelixMenuItem,
   HelixMenu,
@@ -163,6 +164,8 @@ import type {
   HelixShortcutEvent,
   HelixActivateEvent,
   HelixBeforeActivateEvent,
+  HelixMapPanEvent,
+  HelixMapZoomEvent,
   HelixReadEvent,
   HelixCompleteEvent,
   HelixConsoleEvent,
@@ -5867,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 */
@@ -11643,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. */
@@ -12547,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,