@fusion.dev/helix-headless 0.103.0 → 0.103.2

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"
@@ -55553,7 +55565,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the map, which is the one thing a consumer must write.\n\nThere is no sensible default. \"Map\" names the widget rather than the place,\nand a reader meeting three of them on a page learns nothing from hearing the\nsame word three times.",
+              "description": "Accessible name for the map, which is the one thing a consumer must write.\n\nThere is no sensible default. \"Map\" names the widget rather than the place,\nand a reader meeting three of them on a page learns nothing from hearing the\nsame word three times.\n\n**The region is a tab stop**, so the keys are reachable however the controls\nare configured: the listener is on the region, and without a stop of its own\na frame at `controls=\"none\"` around a map with nothing focusable in it had\narrow keys no reader could ever press. `aria-keyshortcuts` says which keys\nrather than spelling them into the name, which would otherwise be read out\nat every encounter.",
               "attribute": "label"
             },
             {
@@ -55709,7 +55721,7 @@
               "name": "handleKeydown",
               "privacy": "private",
               "readonly": true,
-              "description": "The arrow keys, which are the second way rather than the only one.\n\n`inlineStep` rather than a test against `ArrowLeft`, so the reader on a\nright-to-left page gets `end` from the key that points the way their text\nruns, which is what the pan buttons say too."
+              "description": "The arrow keys, which are the second way rather than the only one.\n\n`inlineStep` rather than a test against `ArrowLeft`, so the reader on a\nright-to-left page gets `end` from the key that points the way their text\nruns, which is what the pan buttons say too.\n\n**Only from this frame's own chrome, and that is the difference between one\nmove and two.** MapLibre and Leaflet both answer the arrow keys themselves,\nso a press inside a slotted map moves it once on its own and once more on\nthe event this would have sent: every press moving twice, and the consumer\nwith no way to tell which half to turn off. A press that started in the\nshadow root is this frame's to relay; anything from the map belongs to the\nmap."
             },
             {
               "kind": "method",
@@ -56125,7 +56137,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the map, which is the one thing a consumer must write.\n\nThere is no sensible default. \"Map\" names the widget rather than the place,\nand a reader meeting three of them on a page learns nothing from hearing the\nsame word three times.",
+              "description": "Accessible name for the map, which is the one thing a consumer must write.\n\nThere is no sensible default. \"Map\" names the widget rather than the place,\nand a reader meeting three of them on a page learns nothing from hearing the\nsame word three times.\n\n**The region is a tab stop**, so the keys are reachable however the controls\nare configured: the listener is on the region, and without a stop of its own\na frame at `controls=\"none\"` around a map with nothing focusable in it had\narrow keys no reader could ever press. `aria-keyshortcuts` says which keys\nrather than spelling them into the name, which would otherwise be read out\nat every encounter.",
               "fieldName": "label"
             },
             {

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

@@ -46,8 +46,11 @@ export type MapControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'b
  * @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.
@@ -117,6 +120,13 @@ export declare class HelixHeadlessMap extends HelixElement {
      * There is no sensible default. "Map" names the widget rather than the place,
      * and a reader meeting three of them on a page learns nothing from hearing the
      * same word three times.
+     *
+     * **The region is a tab stop**, so the keys are reachable however the controls
+     * are configured: the listener is on the region, and without a stop of its own
+     * a frame at `controls="none"` around a map with nothing focusable in it had
+     * arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+     * rather than spelling them into the name, which would otherwise be read out
+     * at every encounter.
      */
     label: string;
     /**
@@ -156,6 +166,14 @@ export declare class HelixHeadlessMap extends HelixElement {
      * `inlineStep` rather than a test against `ArrowLeft`, so the reader on a
      * right-to-left page gets `end` from the key that points the way their text
      * runs, which is what the pan buttons say too.
+     *
+     * **Only from this frame's own chrome, and that is the difference between one
+     * move and two.** MapLibre and Leaflet both answer the arrow keys themselves,
+     * so a press inside a slotted map moves it once on its own and once more on
+     * the event this would have sent: every press moving twice, and the consumer
+     * with no way to tell which half to turn off. A press that started in the
+     * shadow root is this frame's to relay; anything from the map belongs to the
+     * map.
      */
     private readonly handleKeydown;
     /**
@@ -185,6 +203,18 @@ export declare class HelixHeadlessMap extends HelixElement {
      * `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

@@ -26,6 +26,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
             this.resting = resting;
         });
         this.handleKeydown = (event) => {
+            if (!this.renderRoot.contains(event.target)) {
+                return;
+            }
             const along = inlineStep(this, event.key);
             if (along === 1) {
                 event.preventDefault();
@@ -127,18 +130,26 @@ let HelixHeadlessMap = class HelixHeadlessMap extends HelixElement {
       part="region"
       role="group"
       aria-label=${this.label || 'Map'}
+      aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
+      tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
       @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>
       ${this.renderControls()}
-      <slot name="footer"></slot>
-      <slot name="attribution"></slot>
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+      <div part="attribution">
+        <slot name="attribution"></slot>
+      </div>
     </div>`;
     }
 };

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.103.0",
+  "version": "0.103.2",
   "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.103.0",
-    "@fusion.dev/helix-icons": "0.103.0",
+    "@fusion.dev/helix-core": "0.103.2",
+    "@fusion.dev/helix-icons": "0.103.2",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.103.0",
-    "@fusion.dev/helix-testing": "0.103.0",
+    "@fusion.dev/helix-cem": "0.103.2",
+    "@fusion.dev/helix-testing": "0.103.2",
     "@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

@@ -9467,7 +9467,14 @@ component undoing its own argument. Set it for a display map nobody drives. */
 
 There is no sensible default. "Map" names the widget rather than the place,
 and a reader meeting three of them on a page learns nothing from hearing the
-same word three times. */
+same word three times.
+
+**The region is a tab stop**, so the keys are reachable however the controls
+are configured: the listener is on the region, and without a stop of its own
+a frame at `controls="none"` around a map with nothing focusable in it had
+arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+rather than spelling them into the name, which would otherwise be read out
+at every encounter. */
   label?: (HelixHeadlessMap["label"]) | undefined;
   /** What the controls are called, for a page not in English. */
   "pan-label"?: (HelixHeadlessMap["panLabel"]) | undefined;
@@ -9574,7 +9581,14 @@ component undoing its own argument. Set it for a display map nobody drives. */
 
 There is no sensible default. "Map" names the widget rather than the place,
 and a reader meeting three of them on a page learns nothing from hearing the
-same word three times. */
+same word three times.
+
+**The region is a tab stop**, so the keys are reachable however the controls
+are configured: the listener is on the region, and without a stop of its own
+a frame at `controls="none"` around a map with nothing focusable in it had
+arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+rather than spelling them into the name, which would otherwise be read out
+at every encounter. */
   "prop:label"?: (HelixHeadlessMap["label"]) | undefined;
   /** What the controls are called, for a page not in English. */
   "attr:pan-label"?: (HelixHeadlessMap["panLabel"]) | undefined;
@@ -27661,6 +27675,13 @@ export type CustomElements = {
    * There is no sensible default. "Map" names the widget rather than the place,
    * and a reader meeting three of them on a page learns nothing from hearing the
    * same word three times.
+   *
+   * **The region is a tab stop**, so the keys are reachable however the controls
+   * are configured: the listener is on the region, and without a stop of its own
+   * a frame at `controls="none"` around a map with nothing focusable in it had
+   * arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+   * rather than spelling them into the name, which would otherwise be read out
+   * at every encounter.
    * - `pan-label`/`panLabel`: What the controls are called, for a page not in English.
    * - `pan-step`/`panStep`: How far one press moves the map, as a fraction of what is on screen.
    *
@@ -27719,8 +27740,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.
@@ -46163,6 +46187,13 @@ export type CustomElementsSolidJs = {
    * There is no sensible default. "Map" names the widget rather than the place,
    * and a reader meeting three of them on a page learns nothing from hearing the
    * same word three times.
+   *
+   * **The region is a tab stop**, so the keys are reachable however the controls
+   * are configured: the listener is on the region, and without a stop of its own
+   * a frame at `controls="none"` around a map with nothing focusable in it had
+   * arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+   * rather than spelling them into the name, which would otherwise be read out
+   * at every encounter.
    * - `pan-label`/`panLabel`: What the controls are called, for a page not in English.
    * - `pan-step`/`panStep`: How far one press moves the map, as a fraction of what is on screen.
    *
@@ -46221,8 +46252,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

@@ -4879,7 +4879,14 @@ component undoing its own argument. Set it for a display map nobody drives. */
 
 There is no sensible default. "Map" names the widget rather than the place,
 and a reader meeting three of them on a page learns nothing from hearing the
-same word three times. */
+same word three times.
+
+**The region is a tab stop**, so the keys are reachable however the controls
+are configured: the listener is on the region, and without a stop of its own
+a frame at `controls="none"` around a map with nothing focusable in it had
+arrow keys no reader could ever press. `aria-keyshortcuts` says which keys
+rather than spelling them into the name, which would otherwise be read out
+at every encounter. */
   label?: (HelixHeadlessMap["label"]) | undefined;
   /** What the controls are called, for a page not in English. */
   "pan-label"?: (HelixHeadlessMap["panLabel"]) | undefined;