@fusion.dev/helix-headless 0.209.0 → 0.210.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.209.0",
+  "version": "0.210.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -58,14 +58,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.209.0",
-    "@fusion.dev/helix-icons": "0.209.0",
+    "@fusion.dev/helix-core": "0.210.0",
+    "@fusion.dev/helix-icons": "0.210.0",
     "tslib": "^2.8.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.209.0",
-    "@fusion.dev/helix-testing": "0.209.0",
+    "@fusion.dev/helix-cem": "0.210.0",
+    "@fusion.dev/helix-testing": "0.210.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -43083,6 +43083,9 @@ export type CustomElements<F extends Framework = "other"> = {
    *   board, where the arrow keys pan it.
    * - Plus and minus zoom the board, on the board and on a card or a
    *   connection.
+   * - The pan and zoom buttons are a toolbar and one tab stop. The arrow keys
+   *   move between them by where they sit, Right from the up arrow to zoom in,
+   *   and Enter or Space presses one.
    * - The arrow keys move through the cards in reading order. The card you land
    *   on scrolls into view, and its connections are announced with it.
    * - The card you land on is selected. Control or Command with an arrow key,
@@ -43523,7 +43526,7 @@ export type CustomElements<F extends Framework = "other"> = {
    *
    * - `arrow`: The arrowhead at an end of a connection that has one.
    * - `board`: The plane the cards are placed on, which pans and zooms.
-   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `controls`: The toolbar the pan and zoom buttons sit in, one tab stop.
    * - `draft`: The connection being drawn, before `helix-connect` is sent.
    * - `edge`: One connector between two cards.
    * - `edge-end`: An end of a selected connection. Drag it, or click it to pick it up.
@@ -51622,7 +51625,9 @@ export type CustomElements<F extends Framework = "other"> = {
    * or hides its notes. `hiddenGroups` holds the groups turned off, and the
    * list holds only what the drawing shows. The legend is a toolbar and one tab
    * stop: the arrow keys, Home, End and a group's first letters move between
-   * its buttons, and Space or Enter presses one.
+   * its buttons, and Space or Enter presses one. The pan and zoom buttons are
+   * a toolbar and one tab stop too, the arrow keys moving between them by where
+   * they sit on screen.
    *
    * `nodes` and `links` are properties, never markup: a graph of ten thousand
    * notes as ten thousand elements would cost what the renderer exists to save.
@@ -51896,7 +51901,7 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
    * - `before`: The room the notes before those drawn would take.
    * - `body`: The drawing beside the list, or above it where the frame is narrow.
-   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `controls`: The toolbar the pan and zoom buttons sit in, one tab stop.
    * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
    * - `empty`: The box in place of the list when it holds no notes, holding the `empty` slot.
    * - `filter-icon`: The icon beside the search field.
@@ -56275,7 +56280,9 @@ export type CustomElements<F extends Framework = "other"> = {
    * map. Dragging is otherwise the only way a pointer moves the map, so add them
    * where the map has to be usable without dragging, as WCAG 2.2 asks at level
    * AA. The arrow keys pan the map and Shift with Left or Right turns it either
-   * way.
+   * way. The buttons are a toolbar and one tab stop: on them, the arrow keys
+   * move between the buttons by where they sit, and Shift with an arrow still
+   * turns or tilts the map.
    *
    * The pan and zoom buttons and the arrow keys send `helix-map-pan` and
    * `helix-map-zoom`. Move your map in response, or connect it with
@@ -56546,7 +56553,7 @@ export type CustomElements<F extends Framework = "other"> = {
    *
    * - `attribution`: The strip under the map that holds the credit.
    * - `compass`: The compass and the pan and rotate buttons around it.
-   * - `controls`: The column of buttons that move the map.
+   * - `controls`: The column of buttons that move the map, a toolbar and one tab stop.
    * - `face-north`: The compass: its needle points north as the map turns, and pressing it turns the map to face north.
    * - `footer`: The strip below the map.
    * - `fullscreen`: The button that makes the map fill the screen.
@@ -75778,6 +75785,9 @@ export type CustomElementsSolidJs = {
    *   board, where the arrow keys pan it.
    * - Plus and minus zoom the board, on the board and on a card or a
    *   connection.
+   * - The pan and zoom buttons are a toolbar and one tab stop. The arrow keys
+   *   move between them by where they sit, Right from the up arrow to zoom in,
+   *   and Enter or Space presses one.
    * - The arrow keys move through the cards in reading order. The card you land
    *   on scrolls into view, and its connections are announced with it.
    * - The card you land on is selected. Control or Command with an arrow key,
@@ -76218,7 +76228,7 @@ export type CustomElementsSolidJs = {
    *
    * - `arrow`: The arrowhead at an end of a connection that has one.
    * - `board`: The plane the cards are placed on, which pans and zooms.
-   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `controls`: The toolbar the pan and zoom buttons sit in, one tab stop.
    * - `draft`: The connection being drawn, before `helix-connect` is sent.
    * - `edge`: One connector between two cards.
    * - `edge-end`: An end of a selected connection. Drag it, or click it to pick it up.
@@ -84385,7 +84395,9 @@ export type CustomElementsSolidJs = {
    * or hides its notes. `hiddenGroups` holds the groups turned off, and the
    * list holds only what the drawing shows. The legend is a toolbar and one tab
    * stop: the arrow keys, Home, End and a group's first letters move between
-   * its buttons, and Space or Enter presses one.
+   * its buttons, and Space or Enter presses one. The pan and zoom buttons are
+   * a toolbar and one tab stop too, the arrow keys moving between them by where
+   * they sit on screen.
    *
    * `nodes` and `links` are properties, never markup: a graph of ten thousand
    * notes as ten thousand elements would cost what the renderer exists to save.
@@ -84659,7 +84671,7 @@ export type CustomElementsSolidJs = {
    * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
    * - `before`: The room the notes before those drawn would take.
    * - `body`: The drawing beside the list, or above it where the frame is narrow.
-   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `controls`: The toolbar the pan and zoom buttons sit in, one tab stop.
    * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
    * - `empty`: The box in place of the list when it holds no notes, holding the `empty` slot.
    * - `filter-icon`: The icon beside the search field.
@@ -89104,7 +89116,9 @@ export type CustomElementsSolidJs = {
    * map. Dragging is otherwise the only way a pointer moves the map, so add them
    * where the map has to be usable without dragging, as WCAG 2.2 asks at level
    * AA. The arrow keys pan the map and Shift with Left or Right turns it either
-   * way.
+   * way. The buttons are a toolbar and one tab stop: on them, the arrow keys
+   * move between the buttons by where they sit, and Shift with an arrow still
+   * turns or tilts the map.
    *
    * The pan and zoom buttons and the arrow keys send `helix-map-pan` and
    * `helix-map-zoom`. Move your map in response, or connect it with
@@ -89375,7 +89389,7 @@ export type CustomElementsSolidJs = {
    *
    * - `attribution`: The strip under the map that holds the credit.
    * - `compass`: The compass and the pan and rotate buttons around it.
-   * - `controls`: The column of buttons that move the map.
+   * - `controls`: The column of buttons that move the map, a toolbar and one tab stop.
    * - `face-north`: The compass: its needle points north as the map turns, and pressing it turns the map to face north.
    * - `footer`: The strip below the map.
    * - `fullscreen`: The button that makes the map fill the screen.

package/types/vue.d.ts

@@ -20949,7 +20949,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop, and the board itself leaves the tab   order while a card can hold it. Escape on a card goes back out to the   board, where the arrow keys pan it. - Plus and minus zoom the board, on the board and on a card or a   connection. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop, and the board itself leaves the tab   order while a card can hold it. Escape on a card goes back out to the   board, where the arrow keys pan it. - Plus and minus zoom the board, on the board and on a card or a   connection. - The pan and zoom buttons are a toolbar and one tab stop. The arrow keys   move between them by where they sit, Right from the up arrow to zoom in,   and Enter or Space presses one. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -21153,7 +21153,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFormatDateVueProps,
     HelixHeadlessFormatDateVueEvents
   >;
-  /** The frame draws no graph itself. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does, and an architecture diagram is drawn by 'isometricDriver' from '@fusion.dev/helix-graph/isometric'. Put the drawing's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
+  /** The frame draws no graph itself. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does, and an architecture diagram is drawn by 'isometricDriver' from '@fusion.dev/helix-graph/isometric'. Put the drawing's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one. The pan and zoom buttons are a toolbar and one tab stop too, the arrow keys moving between them by where they sit on screen.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
   "helix-headless-graph": DefineCustomElement<
     HelixHeadlessGraph,
     HelixHeadlessGraphVueProps,
@@ -21309,7 +21309,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapRasterVueProps,
     HelixHeadlessMapRasterVueEvents
   >;
-  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Escape closes the menu and returns focus to its button, and the menu closes when focus moves on from it or a press lands outside the map.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
+  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way. The buttons are a toolbar and one tab stop: on them, the arrow keys move between the buttons by where they sit, and Shift with an arrow still turns or tilts the map.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Escape closes the menu and returns focus to its button, and the menu closes when focus moves on from it or a press lands outside the map.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
   "helix-headless-map": DefineCustomElement<
     HelixHeadlessMap,
     HelixHeadlessMapVueProps,