@fusion.dev/helix 0.101.0 → 0.102.0

package/dist/element-events.generated.js

@@ -85,6 +85,7 @@ registerElementEvents({
         'toggle',
     ],
     'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-map': ['helix-map-pan', 'helix-map-zoom'],
     'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-menu-item': ['helix-select'],

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';

package/dist/index.js

@@ -52,6 +52,7 @@ export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';

package/dist/map/index.d.ts

@@ -0,0 +1 @@
+export { HelixMap } from './root/map-root.js';

package/dist/map/index.js

@@ -0,0 +1 @@
+export { HelixMap } from './root/map-root.js';

package/dist/map/root/map-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/map/root/map-root.css.js

@@ -0,0 +1,112 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="region"] {
+background-color: var(--map-background-color, var(--helix-color-surface-sunken));
+block-size: var(--map-block-size, 24rem);
+border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+display: grid;
+grid-template-rows: auto 1fr auto auto;
+overflow: hidden;
+position: relative;
+}
+
+[part="region"]:focus-within {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="viewport"] {
+min-block-size: 0;
+overflow: hidden;
+position: relative;
+}
+
+[part="viewport"] ::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+}
+
+[part="controls"] {
+display: grid;
+gap: var(--helix-space-2xs);
+
+grid-template-areas:
+".      up    .      zoomin"
+"start  .     end    zoomout"
+".      down  .      full";
+inset-block-start: var(--helix-space-sm);
+inset-inline-end: var(--helix-space-sm);
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="pan-up"] {
+grid-area: up;
+}
+[part="pan-down"] {
+grid-area: down;
+}
+[part="pan-start"] {
+grid-area: start;
+}
+[part="pan-end"] {
+grid-area: end;
+}
+[part="zoom-in"] {
+grid-area: zoomin;
+}
+[part="zoom-out"] {
+grid-area: zoomout;
+}
+[part="fullscreen"] {
+grid-area: full;
+}
+
+[part="controls"] button {
+align-items: center;
+background-color: var(--map-control-background-color, var(--helix-color-surface-overlay));
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+block-size: var(--helix-size-control-sm);
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: var(--helix-size-control-sm);
+justify-content: center;
+padding: 0;
+}
+
+[part="controls"] button:hover {
+background-color: var(--helix-color-surface-raised);
+}
+
+:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {
+opacity: 0;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+::slotted([slot="attribution"]) {
+color: var(--helix-color-foreground-subtle);
+font-size: var(--helix-text-xs);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+:host(:state(fullscreen)) [part="region"] {
+block-size: 100dvh;
+border: none;
+border-radius: 0;
+}
+
+@media print {
+[part="controls"] {
+display: none;
+}
+}`);

package/dist/map/root/map-root.d.ts

@@ -0,0 +1,33 @@
+import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A frame around somebody else's map.
+ *
+ * @description
+ * 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.
+ *
+ * @since 0.100.0
+ * @status stable
+ * @category media
+ * @aliases Map frame, Map container, Geo
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-background-color - The well behind the map, seen while tiles are on their way.
+ * @cssproperty --map-block-size - How tall the frame is. A length, since the map fills it.
+ * @cssproperty --map-border-color - Color of the frame's edge.
+ * @cssproperty --map-control-background-color - The ground under the pan and zoom buttons.
+ */
+export declare class HelixMap extends HelixHeadlessMap {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map': HelixMap;
+    }
+}

package/dist/map/root/map-root.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-root.css.js';
+let HelixMap = class HelixMap extends HelixHeadlessMap {
+    static { this.styles = styles; }
+};
+HelixMap = __decorate([
+    customElement('helix-map')
+], HelixMap);
+export { HelixMap };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.101.0",
+  "version": "0.102.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.101.0",
-    "@fusion.dev/helix-headless": "0.101.0",
-    "@fusion.dev/helix-styles": "0.101.0"
+    "@fusion.dev/helix-core": "0.102.0",
+    "@fusion.dev/helix-headless": "0.102.0",
+    "@fusion.dev/helix-styles": "0.102.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.101.0",
-    "@fusion.dev/helix-testing": "0.101.0",
+    "@fusion.dev/helix-cem": "0.102.0",
+    "@fusion.dev/helix-testing": "0.102.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -89,6 +89,9 @@ import type {
   HelixListItem,
   HelixListbox,
   HelixLoader,
+  HelixMap,
+  HelixMapPanEvent,
+  HelixMapZoomEvent,
   HelixMegamenu,
   HelixMenu,
   HelixMenuItem,
@@ -11497,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 */
@@ -31630,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.
@@ -51717,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.
@@ -62432,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. */

package/types/svelte.d.ts

@@ -72,6 +72,7 @@ declare module 'svelte/elements' {
     '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']