@fusion.dev/helix-headless 0.102.0 → 0.103.1

package/custom-elements.json

@@ -55446,14 +55446,26 @@
           "description": "**Helix draws no map.** There are no tiles here, no projection and no\nnetwork, and there should not be: a tile renderer is a library, and what a\ndesign system can add to MapLibre or Leaflet is the frame. The consumer slots\ntheir map and this owns the box, the name, the controls and the way out,\nwhich is the shape `VideoPlaylist` uses for a player it never renders.\n\n**The accessibility argument is the reason this exists**, and it was measured\nrather than assumed: a map embedded the ordinary way is a canvas with no role\nand no name, and it has *no node at all* in the accessibility tree. A reader\nusing a screen reader does not walk past it so much as never meet it. A named\nregion with controls in it is the whole of the difference.\n\n**The controls are buttons, and that is a deliberate choice against arrow\nkeys.** Arrows work here too, but what a screen reader does with them is not\nours to decide: macOS passes them through, Windows readers hold them for\ntheir own reading mode unless a page takes `role=\"application\"`, which costs\nthe reader their normal way of reading everything else in the frame. A button\nis findable and operable in every screen reader on every platform without\nthat bargain, so panning and zooming are buttons first and keys second.\n\n**Nothing here moves the map.** Both controls ask, through `helix-map-pan`\nand `helix-map-zoom`, and the consumer answers against whatever they slotted.\nA frame that moved the map would have to know whose map it was.",
           "name": "HelixHeadlessMap",
           "cssParts": [
+            {
+              "description": "The strip the credit sits in, under the map.",
+              "name": "attribution"
+            },
             {
               "description": "The group the pan and zoom buttons sit in.",
               "name": "controls"
             },
+            {
+              "description": "The strip below the map, for what a consumer slots there.",
+              "name": "footer"
+            },
             {
               "description": "The button that fills the screen.",
               "name": "fullscreen"
             },
+            {
+              "description": "The strip above the map, for what a consumer slots there.",
+              "name": "header"
+            },
             {
               "description": "The button that moves the map down.",
               "name": "pan-down"
@@ -55506,6 +55518,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "controls",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Which of the controls this frame draws, as a list of what to keep.\n\n**A list rather than a switch, because the overlap is not symmetric.**\nEvery map library draws zoom controls and none of them draws pan buttons:\nMapLibre's navigation control is zoom and a compass, Leaflet's is zoom,\nGoogle's is zoom. So a consumer slotting one of those has our zoom twice\nover and our pan pad not at all, and a single switch would make them choose\nbetween a duplicate and nothing.\n\n`none` draws none of them, which is the right answer where the slotted map\nalready has controls a reader can find: what this family argues for is that\n*a* findable control exists, never that it is ours. The methods stay public\neither way, so a consumer drawing their own chrome can still drive the\nframe.\n\nAbsent is all three, which is this library's rule that a resting value is an\nattribute's absence, and it is what the stylesheet asks about: the layout\nrules are written against `[controls]:not([controls~=\"zoom\"])` rather than\nthe bare negation, or a frame that named no list at all would be laid out as\nthough it had dropped everything.",
+              "attribute": "controls",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "controlsPlacement",
+              "type": {
+                "text": "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | undefined"
+              },
+              "description": "Which corner the controls sit in.\n\n**Configurable because there is no safe default**, and this is a collision\nrather than a taste: MapLibre puts its own controls at the top end, Leaflet\nand OpenLayers at the top start, Google's zoom at the bottom end. Whichever\ncorner this took would land on somebody's, which is why every one of those\nlibraries made it a setting too.\n\nLogical corners rather than left and right, so a right-to-left page moves\nthem without a consumer writing a second rule.\n\nAbsent is the top end, which is this library's rule that a resting value is\nan attribute's absence: a default that reflected would write an attribute\nonto every host that no server sent and nobody asked for.",
+              "attribute": "controls-placement",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "fullscreenLabel",
@@ -55610,6 +55642,25 @@
               "readonly": true,
               "default": "new IdleController( this, () => this.idleDelay, (resting) => { this.resting = resting }, )"
             },
+            {
+              "kind": "method",
+              "name": "draws",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "'pan' | 'zoom' | 'fullscreen'"
+                  }
+                }
+              ],
+              "description": "Whether a named group of controls is one this frame draws."
+            },
             {
               "kind": "method",
               "name": "toggleFullscreen",
@@ -55691,6 +55742,17 @@
               ],
               "description": "What one pan button is called, with the way it goes filled in.\n\nLeft and right rather than start and end, because the label is read aloud\nand a reader knows which way left is. The event keeps the reading-order\nname, which is the one a right-to-left page needs."
             },
+            {
+              "kind": "method",
+              "name": "renderControls",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "The controls, or nothing where a consumer kept none of them.\n\n**Written out rather than generated**, because a part name behind an\ninterpolation is a part the manifest cannot see: it would publish `pan-`\nand a consumer's `::part(pan-up)` would match nothing. The same cost\n`drawIcon` names for `Trend`."
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -56035,6 +56097,22 @@
             }
           ],
           "attributes": [
+            {
+              "name": "controls",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Which of the controls this frame draws, as a list of what to keep.\n\n**A list rather than a switch, because the overlap is not symmetric.**\nEvery map library draws zoom controls and none of them draws pan buttons:\nMapLibre's navigation control is zoom and a compass, Leaflet's is zoom,\nGoogle's is zoom. So a consumer slotting one of those has our zoom twice\nover and our pan pad not at all, and a single switch would make them choose\nbetween a duplicate and nothing.\n\n`none` draws none of them, which is the right answer where the slotted map\nalready has controls a reader can find: what this family argues for is that\n*a* findable control exists, never that it is ours. The methods stay public\neither way, so a consumer drawing their own chrome can still drive the\nframe.\n\nAbsent is all three, which is this library's rule that a resting value is an\nattribute's absence, and it is what the stylesheet asks about: the layout\nrules are written against `[controls]:not([controls~=\"zoom\"])` rather than\nthe bare negation, or a frame that named no list at all would be laid out as\nthough it had dropped everything.",
+              "fieldName": "controls"
+            },
+            {
+              "name": "controls-placement",
+              "type": {
+                "text": "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | undefined"
+              },
+              "description": "Which corner the controls sit in.\n\n**Configurable because there is no safe default**, and this is a collision\nrather than a taste: MapLibre puts its own controls at the top end, Leaflet\nand OpenLayers at the top start, Google's zoom at the bottom end. Whichever\ncorner this took would land on somebody's, which is why every one of those\nlibraries made it a setting too.\n\nLogical corners rather than left and right, so a right-to-left page moves\nthem without a consumer writing a second rule.\n\nAbsent is the top end, which is this library's rule that a resting value is\nan attribute's absence: a default that reflected would write an attribute\nonto every host that no server sent and nobody asked for.",
+              "fieldName": "controlsPlacement"
+            },
             {
               "name": "fullscreen-label",
               "type": {

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

@@ -2,6 +2,8 @@ import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /** Which way a press or a key asked the map to go. */
 type Way = 'up' | 'down' | 'start' | 'end';
+/** Where the controls sit, in the corner words the rest of the library uses. */
+export type MapControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 /**
  * @summary A frame around somebody else's map.
  *
@@ -44,8 +46,11 @@ type Way = 'up' | 'down' | 'start' | 'end';
  * @event {HelixMapPanEvent} helix-map-pan - The reader asked the map to move. Answer it against your own map.
  * @event {HelixMapZoomEvent} helix-map-zoom - The reader asked the map to zoom, by a direction rather than to a level.
  *
+ * @csspart attribution - The strip the credit sits in, under the map.
  * @csspart controls - The group the pan and zoom buttons sit in.
+ * @csspart footer - The strip below the map, for what a consumer slots there.
  * @csspart fullscreen - The button that fills the screen.
+ * @csspart header - The strip above the map, for what a consumer slots there.
  * @csspart pan-down - The button that moves the map down.
  * @csspart pan-end - The button that moves the map the way the text ends, which is right on an English page.
  * @csspart pan-start - The button that moves the map the way the text starts, which is left on an English page.
@@ -59,6 +64,46 @@ type Way = 'up' | 'down' | 'start' | 'end';
  * @cssstate idle - While the reader has been still long enough to hide the chrome.
  */
 export declare class HelixHeadlessMap extends HelixElement {
+    /**
+     * Which of the controls this frame draws, as a list of what to keep.
+     *
+     * **A list rather than a switch, because the overlap is not symmetric.**
+     * Every map library draws zoom controls and none of them draws pan buttons:
+     * MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+     * Google's is zoom. So a consumer slotting one of those has our zoom twice
+     * over and our pan pad not at all, and a single switch would make them choose
+     * between a duplicate and nothing.
+     *
+     * `none` draws none of them, which is the right answer where the slotted map
+     * already has controls a reader can find: what this family argues for is that
+     * *a* findable control exists, never that it is ours. The methods stay public
+     * either way, so a consumer drawing their own chrome can still drive the
+     * frame.
+     *
+     * Absent is all three, which is this library's rule that a resting value is an
+     * attribute's absence, and it is what the stylesheet asks about: the layout
+     * rules are written against `[controls]:not([controls~="zoom"])` rather than
+     * the bare negation, or a frame that named no list at all would be laid out as
+     * though it had dropped everything.
+     */
+    controls?: string;
+    /**
+     * Which corner the controls sit in.
+     *
+     * **Configurable because there is no safe default**, and this is a collision
+     * rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+     * and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+     * corner this took would land on somebody's, which is why every one of those
+     * libraries made it a setting too.
+     *
+     * Logical corners rather than left and right, so a right-to-left page moves
+     * them without a consumer writing a second rule.
+     *
+     * Absent is the top end, which is this library's rule that a resting value is
+     * an attribute's absence: a default that reflected would write an attribute
+     * onto every host that no server sent and nobody asked for.
+     */
+    controlsPlacement?: MapControlsPlacement;
     /** What the control that fills the screen is called. */
     fullscreenLabel: string;
     /**
@@ -100,6 +145,8 @@ export declare class HelixHeadlessMap extends HelixElement {
     private filled;
     private readonly fullscreen;
     private readonly idle;
+    /** Whether a named group of controls is one this frame draws. */
+    private draws;
     /** Fills the screen with the frame, or comes back. */
     toggleFullscreen(): void;
     /** Asks for the map to move, which the consumer answers. */
@@ -132,6 +179,27 @@ export declare class HelixHeadlessMap extends HelixElement {
      * name, which is the one a right-to-left page needs.
      */
     private named;
+    /**
+     * The controls, or nothing where a consumer kept none of them.
+     *
+     * **Written out rather than generated**, because a part name behind an
+     * interpolation is a part the manifest cannot see: it would publish `pan-`
+     * and a consumer's `::part(pan-up)` would match nothing. The same cost
+     * `drawIcon` names for `Trend`.
+     */
+    private renderControls;
+    /**
+     * The frame, with each region in a box of its own.
+     *
+     * **The boxes are load-bearing rather than tidiness.** A `<slot>` is
+     * `display: contents`, so what lands in the grid is whatever a consumer
+     * assigned rather than the slot itself: with no header slotted, the viewport
+     * took the first row and the attribution took the `1fr`, and the map collapsed
+     * to the height of one line of text. Which slots a consumer fills is not
+     * something the layout may depend on, so each region is a box that holds its
+     * row whether or not anything is in it, and an empty one is a row of no
+     * height.
+     */
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, FullscreenController, HelixElement, HelixMapPanEvent, HelixMapZoomEvent, hostAria, IdleController, inlineStep, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
     constructor() {
@@ -53,6 +53,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
             }
         };
     }
+    draws(group) {
+        return this.controls === undefined ? true : this.controls.split(/\s+/).includes(group);
+    }
     toggleFullscreen() {
         void this.fullscreen.toggle();
     }
@@ -76,6 +79,49 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
         const spoken = way === 'start' ? 'left' : way === 'end' ? 'right' : way;
         return this.panLabel.replace('{way}', spoken);
     }
+    renderControls() {
+        const pan = this.draws('pan');
+        const zoom = this.draws('zoom');
+        const fullscreen = this.draws('fullscreen');
+        if (!pan && !zoom && !fullscreen) {
+            return nothing;
+        }
+        return html `<div part="controls" role="group" aria-label="Map controls">
+      ${pan
+            ? html `<button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
+                ↑
+              </button>
+              <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
+                ←
+              </button>
+              <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
+                →
+              </button>
+              <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
+                ↓
+              </button>`
+            : nothing}
+      ${zoom
+            ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+                +
+              </button>
+              <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+                −
+              </button>`
+            : nothing}
+      ${fullscreen
+            ? html `<button
+              part="fullscreen"
+              aria-label=${this.fullscreenLabel}
+              aria-pressed=${this.filled ? 'true' : 'false'}
+              type="button"
+              @click=${this.toggleFullscreen}
+            >
+              ⤢
+            </button>`
+            : nothing}
+    </div>`;
+    }
     render() {
         return html `<div
       part="region"
@@ -86,48 +132,28 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
       @pointerleave=${this.idle.leave}
       @pointermove=${this.idle.stir}
     >
-      <slot name="header"></slot>
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
       <div part="viewport">
         <slot></slot>
       </div>
-      <div part="controls" role="group" aria-label="Map controls">
-        <!-- **Written out rather than generated in a loop**, because a part name
-             behind an interpolation is a part the manifest cannot see: it would
-             publish \`pan-\` and a consumer's \`::part(pan-up)\` would match
-             nothing. The same cost \`drawIcon\` names for \`Trend\`. -->
-        <button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
-          ↑
-        </button>
-        <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
-          ←
-        </button>
-        <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
-          →
-        </button>
-        <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
-          ↓
-        </button>
-        <button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-          +
-        </button>
-        <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-          −
-        </button>
-        <button
-          part="fullscreen"
-          aria-label=${this.fullscreenLabel}
-          aria-pressed=${this.filled ? 'true' : 'false'}
-          type="button"
-          @click=${this.toggleFullscreen}
-        >
-          ⤢
-        </button>
+      ${this.renderControls()}
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+      <div part="attribution">
+        <slot name="attribution"></slot>
       </div>
-      <slot name="footer"></slot>
-      <slot name="attribution"></slot>
     </div>`;
     }
 };
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessMap.prototype, "controls", void 0);
+__decorate([
+    property({ attribute: 'controls-placement', reflect: true })
+], HelixHeadlessMap.prototype, "controlsPlacement", void 0);
 __decorate([
     property({ attribute: 'fullscreen-label' })
 ], HelixHeadlessMap.prototype, "fullscreenLabel", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.102.0",
+  "version": "0.103.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.102.0",
-    "@fusion.dev/helix-icons": "0.102.0",
+    "@fusion.dev/helix-core": "0.103.1",
+    "@fusion.dev/helix-icons": "0.103.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.102.0",
-    "@fusion.dev/helix-testing": "0.102.0",
+    "@fusion.dev/helix-cem": "0.103.1",
+    "@fusion.dev/helix-testing": "0.103.1",
     "@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

@@ -9396,6 +9396,57 @@ export type HelixHeadlessMapHelixMapZoomElementEvent =
   HelixHeadlessMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixHeadlessMapProps = {
+  /** Which of the controls this frame draws, as a list of what to keep.
+
+**A list rather than a switch, because the overlap is not symmetric.**
+Every map library draws zoom controls and none of them draws pan buttons:
+MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+Google's is zoom. So a consumer slotting one of those has our zoom twice
+over and our pan pad not at all, and a single switch would make them choose
+between a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where the slotted map
+already has controls a reader can find: what this family argues for is that
+*a* findable control exists, never that it is ours. The methods stay public
+either way, so a consumer drawing their own chrome can still drive the
+frame.
+
+Absent is all three, which is this library's rule that a resting value is an
+attribute's absence, and it is what the stylesheet asks about: the layout
+rules are written against `[controls]:not([controls~="zoom"])` rather than
+the bare negation, or a frame that named no list at all would be laid out as
+though it had dropped everything. */
+  controls?: (HelixHeadlessMap["controls"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  "controls-placement"?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  controlsPlacement?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "fullscreen-label"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */
@@ -9452,6 +9503,57 @@ multiply by their own. */
 };
 
 export type HelixHeadlessMapSolidJsProps = {
+  /** Which of the controls this frame draws, as a list of what to keep.
+
+**A list rather than a switch, because the overlap is not symmetric.**
+Every map library draws zoom controls and none of them draws pan buttons:
+MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+Google's is zoom. So a consumer slotting one of those has our zoom twice
+over and our pan pad not at all, and a single switch would make them choose
+between a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where the slotted map
+already has controls a reader can find: what this family argues for is that
+*a* findable control exists, never that it is ours. The methods stay public
+either way, so a consumer drawing their own chrome can still drive the
+frame.
+
+Absent is all three, which is this library's rule that a resting value is an
+attribute's absence, and it is what the stylesheet asks about: the layout
+rules are written against `[controls]:not([controls~="zoom"])` rather than
+the bare negation, or a frame that named no list at all would be laid out as
+though it had dropped everything. */
+  "prop:controls"?: (HelixHeadlessMap["controls"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  "attr:controls-placement"?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  "prop:controlsPlacement"?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "attr:fullscreen-label"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */
@@ -27514,6 +27616,40 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `controls`: Which of the controls this frame draws, as a list of what to keep.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.**
+   * Every map library draws zoom controls and none of them draws pan buttons:
+   * MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+   * Google's is zoom. So a consumer slotting one of those has our zoom twice
+   * over and our pan pad not at all, and a single switch would make them choose
+   * between a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where the slotted map
+   * already has controls a reader can find: what this family argues for is that
+   * *a* findable control exists, never that it is ours. The methods stay public
+   * either way, so a consumer drawing their own chrome can still drive the
+   * frame.
+   *
+   * Absent is all three, which is this library's rule that a resting value is an
+   * attribute's absence, and it is what the stylesheet asks about: the layout
+   * rules are written against `[controls]:not([controls~="zoom"])` rather than
+   * the bare negation, or a frame that named no list at all would be laid out as
+   * though it had dropped everything.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, and this is a collision
+   * rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+   * and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+   * corner this took would land on somebody's, which is why every one of those
+   * libraries made it a setting too.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule.
+   *
+   * Absent is the top end, which is this library's rule that a resting value is
+   * an attribute's absence: a default that reflected would write an attribute
+   * onto every host that no server sent and nobody asked for.
    * - `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.
    *
@@ -27583,8 +27719,11 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `attribution`: The strip the credit sits in, under the map.
    * - `controls`: The group the pan and zoom buttons sit in.
+   * - `footer`: The strip below the map, for what a consumer slots there.
    * - `fullscreen`: The button that fills the screen.
+   * - `header`: The strip above the map, for what a consumer slots there.
    * - `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.
@@ -45982,6 +46121,40 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `controls`: Which of the controls this frame draws, as a list of what to keep.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.**
+   * Every map library draws zoom controls and none of them draws pan buttons:
+   * MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+   * Google's is zoom. So a consumer slotting one of those has our zoom twice
+   * over and our pan pad not at all, and a single switch would make them choose
+   * between a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where the slotted map
+   * already has controls a reader can find: what this family argues for is that
+   * *a* findable control exists, never that it is ours. The methods stay public
+   * either way, so a consumer drawing their own chrome can still drive the
+   * frame.
+   *
+   * Absent is all three, which is this library's rule that a resting value is an
+   * attribute's absence, and it is what the stylesheet asks about: the layout
+   * rules are written against `[controls]:not([controls~="zoom"])` rather than
+   * the bare negation, or a frame that named no list at all would be laid out as
+   * though it had dropped everything.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, and this is a collision
+   * rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+   * and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+   * corner this took would land on somebody's, which is why every one of those
+   * libraries made it a setting too.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule.
+   *
+   * Absent is the top end, which is this library's rule that a resting value is
+   * an attribute's absence: a default that reflected would write an attribute
+   * onto every host that no server sent and nobody asked for.
    * - `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.
    *
@@ -46051,8 +46224,11 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `attribution`: The strip the credit sits in, under the map.
    * - `controls`: The group the pan and zoom buttons sit in.
+   * - `footer`: The strip below the map, for what a consumer slots there.
    * - `fullscreen`: The button that fills the screen.
+   * - `header`: The strip above the map, for what a consumer slots there.
    * - `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.

package/types/vue.d.ts

@@ -4808,6 +4808,57 @@ export type HelixHeadlessMapHelixMapZoomElementEvent =
   HelixHeadlessMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixHeadlessMapVueProps = {
+  /** Which of the controls this frame draws, as a list of what to keep.
+
+**A list rather than a switch, because the overlap is not symmetric.**
+Every map library draws zoom controls and none of them draws pan buttons:
+MapLibre's navigation control is zoom and a compass, Leaflet's is zoom,
+Google's is zoom. So a consumer slotting one of those has our zoom twice
+over and our pan pad not at all, and a single switch would make them choose
+between a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where the slotted map
+already has controls a reader can find: what this family argues for is that
+*a* findable control exists, never that it is ours. The methods stay public
+either way, so a consumer drawing their own chrome can still drive the
+frame.
+
+Absent is all three, which is this library's rule that a resting value is an
+attribute's absence, and it is what the stylesheet asks about: the layout
+rules are written against `[controls]:not([controls~="zoom"])` rather than
+the bare negation, or a frame that named no list at all would be laid out as
+though it had dropped everything. */
+  controls?: (HelixHeadlessMap["controls"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  "controls-placement"?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, and this is a collision
+rather than a taste: MapLibre puts its own controls at the top end, Leaflet
+and OpenLayers at the top start, Google's zoom at the bottom end. Whichever
+corner this took would land on somebody's, which is why every one of those
+libraries made it a setting too.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule.
+
+Absent is the top end, which is this library's rule that a resting value is
+an attribute's absence: a default that reflected would write an attribute
+onto every host that no server sent and nobody asked for. */
+  controlsPlacement?: (HelixHeadlessMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "fullscreen-label"?: (HelixHeadlessMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */