@fusion.dev/helix 0.112.0 → 0.114.0

package/custom-elements.json

@@ -83172,7 +83172,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The styled frame: a bordered box with the pan and zoom buttons in its top\ncorner. The buttons stay visible when the header and footer fade.",
+          "description": "The styled frame: a bordered box with the pan and zoom buttons in its top\ncorner. The buttons stay visible when the header and footer fade.\n\nSet `fill` to lay the map behind a page's own content, such as a hero whose\nwords decide its height: the frame covers its container, which needs a\nposition of its own, such as `position: relative`. Set `credit-placement`\nto draw the map's credit compact in a corner over the map, which suits a\nmap the width of the page.",
           "name": "HelixMap",
           "cssProperties": [
             {
@@ -83180,7 +83180,7 @@
               "name": "--map-background-color"
             },
             {
-              "description": "The frame's height, as a length.",
+              "description": "The frame's height, as a length. Ignored with `fill`, where the container decides it.",
               "name": "--map-block-size"
             },
             {
@@ -83201,6 +83201,27 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "creditPlacement",
+              "type": {
+                "text": "'bottom-end' | 'bottom-start' | undefined"
+              },
+              "description": "Where the map's credit is drawn. Unset, it is a strip under the map.\n`bottom-end` or `bottom-start` draws it in that corner over the map, on\none line that shows the whole credit on hover or focus, the form\nOpenStreetMap's attribution guidance accepts for a small credit. Keep it\nclear of a corner the controls are in.",
+              "attribute": "credit-placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Covers the container instead of taking a height of its own, for a map\nbehind a page's content. The container needs a position, such as\n`position: relative`. The frame draws no border or corners then, since\nthe container's edge is the map's.",
+              "attribute": "fill",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "material",
@@ -84147,6 +84168,56 @@
                 "module": "src/map/root/map-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "ready",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the map has been drawn whole, which `drawn()` says. For a page that\nconnects after `helix-map-ready` has been sent, and missed it.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "whole",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "What `ready` reads, written by `drawn()`.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "drawn",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "whole",
+                  "default": "true"
+                }
+              ],
+              "description": "Says the map has been drawn whole, or with `false`, that it no longer is.\n\n**Called by whatever draws the map**, as `connectMap` does once its driver\nhas every tile the view needs and the ground where there is terrain, and\nwith `false` when it disconnects. A page drawing its own map calls it when\nthat map is finished. The first call after the map was not drawn sends\n`helix-map-ready` and turns on `:state(ready)`, so a page can wait on the\nevent or select on the state, and a page that connects late reads `ready`.",
+              "type": {
+                "text": "drawn(whole = true) => void"
+              },
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "say",
@@ -85025,6 +85096,23 @@
             }
           ],
           "attributes": [
+            {
+              "name": "credit-placement",
+              "type": {
+                "text": "'bottom-end' | 'bottom-start' | undefined"
+              },
+              "description": "Where the map's credit is drawn. Unset, it is a strip under the map.\n`bottom-end` or `bottom-start` draws it in that corner over the map, on\none line that shows the whole credit on hover or focus, the form\nOpenStreetMap's attribution guidance accepts for a small credit. Keep it\nclear of a corner the controls are in.",
+              "fieldName": "creditPlacement"
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Covers the container instead of taking a height of its own, for a map\nbehind a page's content. The container needs a position, such as\n`position: relative`. The frame draws no border or corners then, since\nthe container's edge is the map's.",
+              "fieldName": "fill"
+            },
             {
               "name": "material",
               "type": {
@@ -85520,6 +85608,10 @@
                 "description": "A frame around a map, with pan and zoom buttons and the map credit.",
                 "slug": "preview"
               },
+              {
+                "description": "A map behind a page's own words, filling a hero whose words decide its height, with its credit in a corner and no landmarks.",
+                "slug": "behind-content"
+              },
               {
                 "description": "Buildings raised to their real heights on a tilted map of downtown Austin.",
                 "slug": "buildings"
@@ -85914,6 +86006,18 @@
                 "module": "src/map/root/map-root.ts"
               }
             },
+            {
+              "type": {
+                "text": "HelixMapReadyEvent"
+              },
+              "description": "The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages.",
+              "name": "helix-map-ready",
+              "reactProp": "onhelix-map-ready",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "type": {
                 "text": "HelixMapRotateEvent"
@@ -85968,6 +86072,14 @@
                 "module": "src/map/root/map-root.ts"
               }
             },
+            {
+              "description": "The map has been drawn whole, after `helix-map-ready`.",
+              "name": "ready",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
               "name": "settled",

package/dist/element-events.generated.js

@@ -105,6 +105,7 @@ registerElementEvents({
         'helix-map-cluster',
         'helix-map-pan',
         'helix-map-part-change',
+        'helix-map-ready',
         'helix-map-rotate',
         'helix-map-tilt',
         'helix-map-zoom',

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

@@ -15,6 +15,15 @@ overflow: hidden;
 position: relative;
 }
 
+:host([fill]) [part="region"] {
+block-size: auto;
+border: none;
+border-radius: 0;
+container-type: size;
+inset: 0;
+position: absolute;
+}
+
 [part="viewport"] {
 isolation: isolate;
 min-block-size: 0;
@@ -54,6 +63,38 @@ font-size: var(--helix-text-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 }
 
+:host([credit-placement]) [part="attribution"] {
+inset-block-end: var(--helix-space-2xs);
+max-inline-size: calc(100% - var(--helix-space-2xs) * 2);
+position: absolute;
+}
+
+:host([credit-placement="bottom-end"]) [part="attribution"] {
+inset-inline-end: var(--helix-space-2xs);
+}
+
+:host([credit-placement="bottom-start"]) [part="attribution"] {
+inset-inline-start: var(--helix-space-2xs);
+}
+
+:host([credit-placement]) ::slotted([slot="attribution"]) {
+backdrop-filter: var(--helix-material-backdrop);
+background-color: var(--helix-material-translucent);
+border-block-start: none;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+overflow: hidden;
+padding: var(--helix-space-none) var(--helix-space-xs);
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+:host([credit-placement])
+[part="attribution"]:is(:hover, :focus-within)
+::slotted([slot="attribution"]) {
+white-space: normal;
+}
+
 :host([material="glass"]) [part="controls"] button {
 backdrop-filter: var(--helix-material-backdrop);
 background-color: var(--viewport-control-background-color, var(--helix-material-translucent));
@@ -187,6 +228,10 @@ padding: var(--helix-space-sm);
 position: absolute;
 }
 
+:host([fill]) [part="layers-menu"] {
+max-block-size: calc(100cqb - var(--helix-space-sm) * 2);
+}
+
 [part="layers-menu"][hidden] {
 display: none;
 }

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

@@ -7,6 +7,12 @@ import type { CSSResultGroup } from 'lit';
  * The styled frame: a bordered box with the pan and zoom buttons in its top
  * corner. The buttons stay visible when the header and footer fade.
  *
+ * Set `fill` to lay the map behind a page's own content, such as a hero whose
+ * words decide its height: the frame covers its container, which needs a
+ * position of its own, such as `position: relative`. Set `credit-placement`
+ * to draw the map's credit compact in a corner over the map, which suits a
+ * map the width of the page.
+ *
  * @since 0.100.0
  * @status experimental
  * @category media
@@ -14,11 +20,26 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/map
  *
  * @cssproperty --map-background-color - The color behind the map while tiles load.
- * @cssproperty --map-block-size - The frame's height, as a length.
+ * @cssproperty --map-block-size - The frame's height, as a length. Ignored with `fill`, where the container decides it.
  * @cssproperty --map-border-color - The frame's border color.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. Canvas uses the same property.
  */
 export declare class HelixMap extends HelixHeadlessMap {
+    /**
+     * Where the map's credit is drawn. Unset, it is a strip under the map.
+     * `bottom-end` or `bottom-start` draws it in that corner over the map, on
+     * one line that shows the whole credit on hover or focus, the form
+     * OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+     * clear of a corner the controls are in.
+     */
+    creditPlacement?: 'bottom-end' | 'bottom-start';
+    /**
+     * Covers the container instead of taking a height of its own, for a map
+     * behind a page's content. The container needs a position, such as
+     * `position: relative`. The frame draws no border or corners then, since
+     * the container's edge is the map's.
+     */
+    fill: boolean;
     /**
      * The background of the pan and zoom buttons. Leave unset for solid. `glass`
      * shows the map through a blur, `frosted` blurs more, and `transparent` has

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

@@ -11,8 +11,18 @@ import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
 import { styles } from './map-root.css.js';
 let HelixMap = class HelixMap extends HelixHeadlessMap {
+    constructor() {
+        super(...arguments);
+        this.fill = false;
+    }
     static { this.styles = [liveStyles, viewportStyles, styles]; }
 };
+__decorate([
+    property({ attribute: 'credit-placement', reflect: true })
+], HelixMap.prototype, "creditPlacement", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixMap.prototype, "fill", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixMap.prototype, "material", void 0);

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.112.0",
+  "version": "0.114.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.112.0",
-    "@fusion.dev/helix-headless": "0.112.0",
-    "@fusion.dev/helix-styles": "0.112.0"
+    "@fusion.dev/helix-core": "0.114.0",
+    "@fusion.dev/helix-headless": "0.114.0",
+    "@fusion.dev/helix-styles": "0.114.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.112.0",
-    "@fusion.dev/helix-testing": "0.112.0",
+    "@fusion.dev/helix-cem": "0.114.0",
+    "@fusion.dev/helix-testing": "0.114.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

@@ -112,6 +112,7 @@ import type {
   HelixMapPoints,
   HelixMapPosition,
   HelixMapRaster,
+  HelixMapReadyEvent,
   HelixMapRotateEvent,
   HelixMapRoute,
   HelixMapTerrain,
@@ -14227,6 +14228,9 @@ export type HelixMapHelixMapPanElementEvent =
 /** `helix-map-part-change` event type */
 export type HelixMapHelixMapPartChangeElementEvent =
   HelixMapElementEvent<HelixMapPartChangeEvent>;
+/** `helix-map-ready` event type */
+export type HelixMapHelixMapReadyElementEvent =
+  HelixMapElementEvent<HelixMapReadyEvent>;
 /** `helix-map-rotate` event type */
 export type HelixMapHelixMapRotateElementEvent =
   HelixMapElementEvent<HelixMapRotateEvent>;
@@ -14238,6 +14242,23 @@ export type HelixMapHelixMapZoomElementEvent =
   HelixMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixMapProps = {
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  "credit-placement"?: (HelixMap["creditPlacement"]) | undefined;
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  creditPlacement?: (HelixMap["creditPlacement"]) | undefined;
+  /** Covers the container instead of taking a height of its own, for a map
+behind a page's content. The container needs a position, such as
+`position: relative`. The frame draws no border or corners then, since
+the container's edge is the map's. */
+  fill?: (HelixMap["fill"]) | undefined;
   /** The background of the pan and zoom buttons. Leave unset for solid. `glass`
 shows the map through a blur, `frosted` blurs more, and `transparent` has
 no background. Your theme sets how see-through each one is. */
@@ -14484,6 +14505,8 @@ current, and the map says it after a zoom. */
   "onhelix-map-part-change"?: ((
     e: HelixMapHelixMapPartChangeElementEvent,
   ) => void) | undefined;
+  /** The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages. */
+  "onhelix-map-ready"?: ((e: HelixMapHelixMapReadyElementEvent) => void) | undefined;
   /** A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response. */
   "onhelix-map-rotate"?: ((e: HelixMapHelixMapRotateElementEvent) => void) | undefined;
   /** The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response. */
@@ -14493,6 +14516,23 @@ current, and the map says it after a zoom. */
 };
 
 export type HelixMapSolidJsProps = {
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  "attr:credit-placement"?: (HelixMap["creditPlacement"]) | undefined;
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  "prop:creditPlacement"?: (HelixMap["creditPlacement"]) | undefined;
+  /** Covers the container instead of taking a height of its own, for a map
+behind a page's content. The container needs a position, such as
+`position: relative`. The frame draws no border or corners then, since
+the container's edge is the map's. */
+  "prop:fill"?: (HelixMap["fill"]) | undefined;
   /** The background of the pan and zoom buttons. Leave unset for solid. `glass`
 shows the map through a blur, `frosted` blurs more, and `transparent` has
 no background. Your theme sets how see-through each one is. */
@@ -14738,6 +14778,8 @@ current, and the map says it after a zoom. */
   "on:helix-map-part-change"?: ((
     e: HelixMapHelixMapPartChangeElementEvent,
   ) => void) | undefined;
+  /** The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages. */
+  "on:helix-map-ready"?: ((e: HelixMapHelixMapReadyElementEvent) => void) | undefined;
   /** A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response. */
   "on:helix-map-rotate"?: ((e: HelixMapHelixMapRotateElementEvent) => void) | undefined;
   /** The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response. */
@@ -37542,10 +37584,25 @@ export type CustomElements = {
    * The styled frame: a bordered box with the pan and zoom buttons in its top
    * corner. The buttons stay visible when the header and footer fade.
    *
+   * Set `fill` to lay the map behind a page's own content, such as a hero whose
+   * words decide its height: the frame covers its container, which needs a
+   * position of its own, such as `position: relative`. Set `credit-placement`
+   * to draw the map's credit compact in a corner over the map, which suits a
+   * map the width of the page.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `credit-placement`/`creditPlacement`: Where the map's credit is drawn. Unset, it is a strip under the map.
+   * `bottom-end` or `bottom-start` draws it in that corner over the map, on
+   * one line that shows the whole credit on hover or focus, the form
+   * OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+   * clear of a corner the controls are in.
+   * - `fill`: Covers the container instead of taking a height of its own, for a map
+   * behind a page's content. The container needs a position, such as
+   * `position: relative`. The frame draws no border or corners then, since
+   * the container's edge is the map's.
    * - `material`: The background of the pan and zoom buttons. Leave unset for solid. `glass`
    * shows the map through a blur, `frosted` blurs more, and `transparent` has
    * no background. Your theme sets how see-through each one is.
@@ -37646,6 +37703,8 @@ export type CustomElements = {
    * - `zoomed-label`/`zoomedLabel`: What screen readers hear after a zoom. `{level}` is the zoom level.
    * - `zoom-level`/`zoomLevel`: How far the map is zoomed, in its renderer's levels. `connectMap` keeps it
    * current, and the map says it after a zoom.
+   * - `ready`: Whether the map has been drawn whole, which `drawn()` says. For a page that
+   * connects after `helix-map-ready` has been sent, and missed it. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -37675,6 +37734,7 @@ export type CustomElements = {
    * - `helix-map-cluster`: A cluster was pressed. Sent from the marker that shows the cluster, with the names of its places.
    * - `helix-map-pan`: A pan button or arrow key was pressed. Move your map in response.
    * - `helix-map-part-change`: Clustering was turned on or off. Used by `connectMap`; pages do not need to listen for it.
+   * - `helix-map-ready`: The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages.
    * - `helix-map-rotate`: A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response.
    * - `helix-map-tilt`: The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response.
    * - `helix-map-zoom`: A zoom button or key was pressed, with a direction. Zoom your map in response.
@@ -37709,6 +37769,14 @@ export type CustomElements = {
    * animation is one sentence, and it is the view's state where there is one:
    * the zoom level, the way the map faces, its tilt. A pan has no state to
    * say, so it says which way the map moved.
+   * - `drawn(whole = true) => void`: Says the map has been drawn whole, or with `false`, that it no longer is.
+   *
+   * **Called by whatever draws the map**, as `connectMap` does once its driver
+   * has every tile the view needs and the ground where there is terrain, and
+   * with `false` when it disconnects. A page drawing its own map calls it when
+   * that map is finished. The first call after the map was not drawn sends
+   * `helix-map-ready` and turns on `:state(ready)`, so a page can wait on the
+   * event or select on the state, and a page that connects late reads `ready`.
    * - `rotate(by: number) => void`: Turns the map by some degrees, clockwise where positive.
    * - `faceNorth() => void`: Turns the map to face north.
    * - `tilt(by: number) => void`: Tilts the map by some degrees, toward the horizon where positive.
@@ -37719,7 +37787,7 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--map-background-color`: The color behind the map while tiles load. (default: `undefined`)
-   * - `--map-block-size`: The frame's height, as a length. (default: `undefined`)
+   * - `--map-block-size`: The frame's height, as a length. Ignored with `fill`, where the container decides it. (default: `undefined`)
    * - `--map-border-color`: The frame's border color. (default: `undefined`)
    * - `--viewport-control-background-color`: The background of the pan and zoom buttons. Canvas uses the same property. (default: `undefined`)
    * - `--map-needle-turn`: How far the needle turns to point north, as an angle. The frame writes it from `bearing`. (default: `undefined`)
@@ -37767,6 +37835,7 @@ export type CustomElements = {
    *
    * - `fullscreen`: The map fills the screen.
    * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The map has been drawn whole, after `helix-map-ready`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-map": Partial<HelixMapProps & BaseProps<HelixMap> & BaseEvents<HelixMap>>;
@@ -59541,10 +59610,25 @@ export type CustomElementsSolidJs = {
    * The styled frame: a bordered box with the pan and zoom buttons in its top
    * corner. The buttons stay visible when the header and footer fade.
    *
+   * Set `fill` to lay the map behind a page's own content, such as a hero whose
+   * words decide its height: the frame covers its container, which needs a
+   * position of its own, such as `position: relative`. Set `credit-placement`
+   * to draw the map's credit compact in a corner over the map, which suits a
+   * map the width of the page.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `credit-placement`/`creditPlacement`: Where the map's credit is drawn. Unset, it is a strip under the map.
+   * `bottom-end` or `bottom-start` draws it in that corner over the map, on
+   * one line that shows the whole credit on hover or focus, the form
+   * OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+   * clear of a corner the controls are in.
+   * - `fill`: Covers the container instead of taking a height of its own, for a map
+   * behind a page's content. The container needs a position, such as
+   * `position: relative`. The frame draws no border or corners then, since
+   * the container's edge is the map's.
    * - `material`: The background of the pan and zoom buttons. Leave unset for solid. `glass`
    * shows the map through a blur, `frosted` blurs more, and `transparent` has
    * no background. Your theme sets how see-through each one is.
@@ -59645,6 +59729,8 @@ export type CustomElementsSolidJs = {
    * - `zoomed-label`/`zoomedLabel`: What screen readers hear after a zoom. `{level}` is the zoom level.
    * - `zoom-level`/`zoomLevel`: How far the map is zoomed, in its renderer's levels. `connectMap` keeps it
    * current, and the map says it after a zoom.
+   * - `ready`: Whether the map has been drawn whole, which `drawn()` says. For a page that
+   * connects after `helix-map-ready` has been sent, and missed it. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -59674,6 +59760,7 @@ export type CustomElementsSolidJs = {
    * - `helix-map-cluster`: A cluster was pressed. Sent from the marker that shows the cluster, with the names of its places.
    * - `helix-map-pan`: A pan button or arrow key was pressed. Move your map in response.
    * - `helix-map-part-change`: Clustering was turned on or off. Used by `connectMap`; pages do not need to listen for it.
+   * - `helix-map-ready`: The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages.
    * - `helix-map-rotate`: A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response.
    * - `helix-map-tilt`: The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response.
    * - `helix-map-zoom`: A zoom button or key was pressed, with a direction. Zoom your map in response.
@@ -59708,6 +59795,14 @@ export type CustomElementsSolidJs = {
    * animation is one sentence, and it is the view's state where there is one:
    * the zoom level, the way the map faces, its tilt. A pan has no state to
    * say, so it says which way the map moved.
+   * - `drawn(whole = true) => void`: Says the map has been drawn whole, or with `false`, that it no longer is.
+   *
+   * **Called by whatever draws the map**, as `connectMap` does once its driver
+   * has every tile the view needs and the ground where there is terrain, and
+   * with `false` when it disconnects. A page drawing its own map calls it when
+   * that map is finished. The first call after the map was not drawn sends
+   * `helix-map-ready` and turns on `:state(ready)`, so a page can wait on the
+   * event or select on the state, and a page that connects late reads `ready`.
    * - `rotate(by: number) => void`: Turns the map by some degrees, clockwise where positive.
    * - `faceNorth() => void`: Turns the map to face north.
    * - `tilt(by: number) => void`: Tilts the map by some degrees, toward the horizon where positive.
@@ -59718,7 +59813,7 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--map-background-color`: The color behind the map while tiles load. (default: `undefined`)
-   * - `--map-block-size`: The frame's height, as a length. (default: `undefined`)
+   * - `--map-block-size`: The frame's height, as a length. Ignored with `fill`, where the container decides it. (default: `undefined`)
    * - `--map-border-color`: The frame's border color. (default: `undefined`)
    * - `--viewport-control-background-color`: The background of the pan and zoom buttons. Canvas uses the same property. (default: `undefined`)
    * - `--map-needle-turn`: How far the needle turns to point north, as an angle. The frame writes it from `bearing`. (default: `undefined`)
@@ -59766,6 +59861,7 @@ export type CustomElementsSolidJs = {
    *
    * - `fullscreen`: The map fills the screen.
    * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The map has been drawn whole, after `helix-map-ready`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-map": Partial<
@@ -70862,7 +70958,7 @@ export type CustomCssProperties = {
   "--map-position-size"?: (string) | undefined;
   /** The color behind the map while tiles load. */
   "--map-background-color"?: (string) | undefined;
-  /** The frame's height, as a length. */
+  /** The frame's height, as a length. Ignored with `fill`, where the container decides it. */
   "--map-block-size"?: (string) | undefined;
   /** The frame's border color. */
   "--map-border-color"?: (string) | undefined;

package/types/vue.d.ts

@@ -192,6 +192,7 @@ import type {
   HelixMapPartChangeEvent,
   HelixMapClusterEvent,
   HelixMapPanEvent,
+  HelixMapReadyEvent,
   HelixMapRotateEvent,
   HelixMapTiltEvent,
   HelixMapZoomEvent,
@@ -7290,6 +7291,9 @@ export type HelixMapHelixMapPanElementEvent =
 /** `helix-map-part-change` event type */
 export type HelixMapHelixMapPartChangeElementEvent =
   HelixMapElementEvent<HelixMapPartChangeEvent>;
+/** `helix-map-ready` event type */
+export type HelixMapHelixMapReadyElementEvent =
+  HelixMapElementEvent<HelixMapReadyEvent>;
 /** `helix-map-rotate` event type */
 export type HelixMapHelixMapRotateElementEvent =
   HelixMapElementEvent<HelixMapRotateEvent>;
@@ -7301,6 +7305,23 @@ export type HelixMapHelixMapZoomElementEvent =
   HelixMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixMapVueProps = {
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  "credit-placement"?: (HelixMap["creditPlacement"]) | undefined;
+  /** Where the map's credit is drawn. Unset, it is a strip under the map.
+`bottom-end` or `bottom-start` draws it in that corner over the map, on
+one line that shows the whole credit on hover or focus, the form
+OpenStreetMap's attribution guidance accepts for a small credit. Keep it
+clear of a corner the controls are in. */
+  creditPlacement?: (HelixMap["creditPlacement"]) | undefined;
+  /** Covers the container instead of taking a height of its own, for a map
+behind a page's content. The container needs a position, such as
+`position: relative`. The frame draws no border or corners then, since
+the container's edge is the map's. */
+  fill?: (HelixMap["fill"]) | undefined;
   /** The background of the pan and zoom buttons. Leave unset for solid. `glass`
 shows the map through a blur, `frosted` blurs more, and `transparent` has
 no background. Your theme sets how see-through each one is. */
@@ -7547,6 +7568,8 @@ export type HelixMapVueEvents = {
   "helix-map-pan": HelixMapHelixMapPanElementEvent;
   /** Clustering was turned on or off. Used by `connectMap`; pages do not need to listen for it. */
   "helix-map-part-change": HelixMapHelixMapPartChangeElementEvent;
+  /** The map has been drawn whole: its style, every tile the view needs, and the ground where it has terrain. Sent once per connection. Show a map that is finished on it, where it would otherwise draw in stages. */
+  "helix-map-ready": HelixMapHelixMapReadyElementEvent;
   /** A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response. */
   "helix-map-rotate": HelixMapHelixMapRotateElementEvent;
   /** The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response. */
@@ -14059,7 +14082,7 @@ export type CustomCssProperties = {
   "--map-position-size"?: (string) | undefined;
   /** The color behind the map while tiles load. */
   "--map-background-color"?: (string) | undefined;
-  /** The frame's height, as a length. */
+  /** The frame's height, as a length. Ignored with `fill`, where the container decides it. */
   "--map-block-size"?: (string) | undefined;
   /** The frame's border color. */
   "--map-border-color"?: (string) | undefined;
@@ -15045,7 +15068,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixMapRasterVueProps,
     HelixMapRasterVueEvents
   >;
-  /** The styled frame: a bordered box with the pan and zoom buttons in its top corner. The buttons stay visible when the header and footer fade. */
+  /** The styled frame: a bordered box with the pan and zoom buttons in its top corner. The buttons stay visible when the header and footer fade.  Set 'fill' to lay the map behind a page's own content, such as a hero whose words decide its height: the frame covers its container, which needs a position of its own, such as 'position: relative'. Set 'credit-placement' to draw the map's credit compact in a corner over the map, which suits a map the width of the page. */
   "helix-map": DefineCustomElement<
     HelixMap,
     HelixMapVueProps,