@fusion.dev/helix-core 0.105.0 → 0.106.0

package/custom-elements.json

@@ -3625,6 +3625,50 @@
           },
           "helix": {}
         },
+        {
+          "kind": "class",
+          "description": "The user asked the map to rotate, from a rotate button or key. Turn your map\nin response. Not cancelable, because the frame moves nothing itself.",
+          "name": "HelixMapRotateEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "eventName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "'helix-map-rotate'"
+            }
+          ],
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/events/events.ts"
+          },
+          "helix": {}
+        },
+        {
+          "kind": "class",
+          "description": "The user asked the map to tilt, from a tilt button or key. Tilt your map in\nresponse. Not cancelable, because the frame moves nothing itself.",
+          "name": "HelixMapTiltEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "eventName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "'helix-map-tilt'"
+            }
+          ],
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/events/events.ts"
+          },
+          "helix": {}
+        },
         {
           "kind": "class",
           "description": "A marker, a position, a route or an area changed what it says: where it is,\nits points, its progress, its name.\n\n**Said rather than reflected.** The connector and the frame follow the\nparts, and heard them through their attributes until the parts reflected\nnothing CSS selects on: a live position's coordinates are state, and a\nroute's points are a payload, neither of which belongs in the markup. It\nbubbles to the frame, whose light-DOM children the parts are, and goes no\nfurther, being the family's own bookkeeping rather than news for a page.",
@@ -4422,6 +4466,22 @@
             "module": "src/events/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixMapRotateEvent",
+          "declaration": {
+            "name": "HelixMapRotateEvent",
+            "module": "src/events/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HelixMapTiltEvent",
+          "declaration": {
+            "name": "HelixMapTiltEvent",
+            "module": "src/events/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixMapPartChangeEvent",
@@ -4654,7 +4714,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Owns only what is universal: normalizing `box-sizing` inside the shadow root,\nso component CSS can rely on border-box on both sides of the boundary.\n\nThere is deliberately no `emit(name, detail)` helper. A dispatch through a\ngeneric helper cannot be named by the manifest analyzer, which recorded the\nparameter identifier and produced a phantom event on every element that\ninherited it. Components dispatch concrete event classes from `events.ts`,\nwhich the analyzer and TypeScript can both see.",
+          "description": "Handles only what every component needs: it sets `box-sizing` inside the\nshadow root, so component CSS can rely on border-box on both sides of the\nboundary.\n\nThere is no `emit(name, detail)` helper. The manifest analyzer cannot name an\nevent dispatched through a generic helper, so components dispatch the\nconcrete event classes from `events.ts`, which the analyzer and TypeScript\ncan both read.",
           "name": "HelixElement",
           "members": [
             {
@@ -5129,7 +5189,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This has to be a class rather than a mixin or controller, and that is not a\nstyle preference: the browser reads `formAssociated` off the constructor\nduring element upgrade, which cannot be delegated to a composed object.\n\n`internals` comes from `HelixElement`, which attaches it for every component.\n`attachInternals()` throws on a second call, so there is exactly one owner.\n\nDeliberately small. It carries what every form participant needs and nothing\nmore; `value`, validity, and the reset and restore callbacks land when the\nfirst input does, rather than being designed against components that do not\nexist yet.",
+          "description": "`HelixFormElement` is a class because the browser reads `formAssociated` from\nthe constructor during element upgrade, and a mixin or controller cannot\nsupply it.\n\n`internals` comes from `HelixElement`, which attaches it for every component.\n`attachInternals()` throws on a second call, so only one class attaches it.\n\nThe class carries only what every form participant needs. `value`, validity,\nand the reset and restore callbacks are added with the first input component.",
           "name": "HelixFormElement",
           "members": [
             {
@@ -6436,6 +6496,22 @@
             "module": "./events/events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelixMapRotateEvent",
+          "declaration": {
+            "name": "HelixMapRotateEvent",
+            "module": "./events/events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HelixMapTiltEvent",
+          "declaration": {
+            "name": "HelixMapTiltEvent",
+            "module": "./events/events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixMapZoomEvent",
@@ -6612,6 +6688,22 @@
             "module": "./events/events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MapRotateDetail",
+          "declaration": {
+            "name": "MapRotateDetail",
+            "module": "./events/events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MapTiltDetail",
+          "declaration": {
+            "name": "MapTiltDetail",
+            "module": "./events/events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "MapZoomDetail",
@@ -11136,7 +11228,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Which controls to show, as a list of `pan`, `zoom`, and `fullscreen`, or `none`."
+              "description": "Which controls to show, as a list such as `pan zoom fullscreen`, or `none`. A family adds words of its own."
             },
             {
               "kind": "field",
@@ -11397,6 +11489,93 @@
               "privacy": "protected",
               "description": "Which controls the surface draws while `controls` is absent.",
               "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "drawsControls",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Whether `controls`, or the resting controls, names a group."
+            },
+            {
+              "kind": "method",
+              "name": "renderMoreControls",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "More buttons for the group of controls, after zoom, for a family that adds its own."
+            },
+            {
+              "kind": "method",
+              "name": "handleMoreKeys",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Answers a key the family adds, and says whether it did."
+            },
+            {
+              "kind": "method",
+              "name": "panLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "way",
+                  "type": {
+                    "text": "ViewportWay"
+                  }
+                }
+              ],
+              "description": "What one pan control is called, for a family that draws its own."
+            },
+            {
+              "kind": "method",
+              "name": "panGlyph",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "way",
+                  "type": {
+                    "text": "ViewportWay"
+                  }
+                }
+              ],
+              "description": "The arrow drawn on one pan control, for a family that draws its own."
             }
           ],
           "helix": {}
@@ -11412,7 +11591,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Which controls to show, as a list of `pan`, `zoom`, and `fullscreen`, or `none`.\n\n**A list rather than a switch, because the overlap is not symmetric.** A\nsurface a consumer brings often has zoom controls of its own and almost\nnever has pan buttons, so a single switch would make them choose between\na duplicate and nothing.\n\n`none` draws none of them, which is the right answer where what was\nslotted already has controls a reader can find: what this argues for is\nthat *a* findable control exists, never that it is ours. The methods stay\npublic either way, so a consumer drawing their own chrome can still drive\nthe surface.\n\nAbsent is whatever the family rests at, which is this library's rule that\na resting value is an attribute's absence: all three for a map, whose\nreader may have no other way to move it, and zoom and fullscreen for a\nboard, which a reader drags and whose pad took a third of the frame. The\nstylesheet lays the cluster out by which buttons are in it rather than by\nthis attribute, so the two defaults need no rule each.",
+              "description": "Which controls to show, as a list such as `pan zoom fullscreen`, or\n`none`. A family can add words of its own.\n\n**A list rather than a switch, because the overlap is not symmetric.** A\nsurface a consumer brings often has zoom controls of its own and almost\nnever has pan buttons, so a single switch would make them choose between\na duplicate and nothing.\n\n`none` draws none of them, which is the right answer where what was\nslotted already has controls a reader can find: what this argues for is\nthat *a* findable control exists, never that it is ours. The methods stay\npublic either way, so a consumer drawing their own chrome can still drive\nthe surface.\n\nAbsent is whatever the family rests at, which is this library's rule that\na resting value is an attribute's absence: zoom, the compass and\nfullscreen for a map, whose pan buttons a page asks for, and zoom and\nfullscreen for a board, which a reader drags and whose pad took a third\nof the frame. The\nstylesheet lays the cluster out by which buttons are in it rather than by\nthis attribute, so the two defaults need no rule each.",
               "attribute": "controls",
               "reflects": true
             },
@@ -11665,8 +11844,8 @@
             },
             {
               "kind": "method",
-              "name": "draws",
-              "privacy": "private",
+              "name": "drawsControls",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "boolean"
@@ -11676,11 +11855,41 @@
                 {
                   "name": "group",
                   "type": {
-                    "text": "'pan' | 'zoom' | 'fullscreen'"
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Whether `controls`, or the resting controls, names a group."
+            },
+            {
+              "kind": "method",
+              "name": "renderMoreControls",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "More buttons for the group of controls, after zoom. None here; a family adds its own."
+            },
+            {
+              "kind": "method",
+              "name": "handleMoreKeys",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_event",
+                  "type": {
+                    "text": "KeyboardEvent"
                   }
                 }
               ],
-              "description": "Whether a named group of controls is one this surface draws."
+              "description": "Answers a key the family adds, and says whether it did. None here."
             },
             {
               "kind": "method",
@@ -11713,8 +11922,8 @@
             },
             {
               "kind": "method",
-              "name": "named",
-              "privacy": "private",
+              "name": "panLabel",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "string"
@@ -11732,8 +11941,8 @@
             },
             {
               "kind": "method",
-              "name": "glyph",
-              "privacy": "private",
+              "name": "panGlyph",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "string"
@@ -11784,7 +11993,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Which controls to show, as a list of `pan`, `zoom`, and `fullscreen`, or `none`.\n\n**A list rather than a switch, because the overlap is not symmetric.** A\nsurface a consumer brings often has zoom controls of its own and almost\nnever has pan buttons, so a single switch would make them choose between\na duplicate and nothing.\n\n`none` draws none of them, which is the right answer where what was\nslotted already has controls a reader can find: what this argues for is\nthat *a* findable control exists, never that it is ours. The methods stay\npublic either way, so a consumer drawing their own chrome can still drive\nthe surface.\n\nAbsent is whatever the family rests at, which is this library's rule that\na resting value is an attribute's absence: all three for a map, whose\nreader may have no other way to move it, and zoom and fullscreen for a\nboard, which a reader drags and whose pad took a third of the frame. The\nstylesheet lays the cluster out by which buttons are in it rather than by\nthis attribute, so the two defaults need no rule each.",
+              "description": "Which controls to show, as a list such as `pan zoom fullscreen`, or\n`none`. A family can add words of its own.\n\n**A list rather than a switch, because the overlap is not symmetric.** A\nsurface a consumer brings often has zoom controls of its own and almost\nnever has pan buttons, so a single switch would make them choose between\na duplicate and nothing.\n\n`none` draws none of them, which is the right answer where what was\nslotted already has controls a reader can find: what this argues for is\nthat *a* findable control exists, never that it is ours. The methods stay\npublic either way, so a consumer drawing their own chrome can still drive\nthe surface.\n\nAbsent is whatever the family rests at, which is this library's rule that\na resting value is an attribute's absence: zoom, the compass and\nfullscreen for a map, whose pan buttons a page asks for, and zoom and\nfullscreen for a board, which a reader drags and whose pad took a third\nof the frame. The\nstylesheet lays the cluster out by which buttons are in it rather than by\nthis attribute, so the two defaults need no rule each.",
               "fieldName": "controls"
             },
             {

package/dist/events/events.d.ts

@@ -558,14 +558,45 @@ export declare class HelixMapZoomEvent extends CustomEvent<ViewportZoomDetail> {
     static readonly eventName = "helix-map-zoom";
     constructor(detail: MapZoomDetail);
 }
+/** A rotate request: turn by some degrees, or turn to a bearing. */
+export interface MapRotateDetail {
+    /** Degrees to turn the map clockwise. Negative turns it counterclockwise. */
+    by?: number;
+    /** The bearing to turn the map to, in degrees clockwise from north. `0` faces north. */
+    to?: number;
+}
+/** A tilt request, in degrees. */
+export interface MapTiltDetail {
+    /** Degrees to tilt the map toward the horizon. Negative tilts it back toward flat. */
+    by?: number;
+    /** The tilt to go to, in degrees from looking straight down. `0` is flat. */
+    to?: number;
+}
+/**
+ * The user asked the map to rotate, from a rotate button or key. Turn your map
+ * in response. Not cancelable, because the frame moves nothing itself.
+ */
+export declare class HelixMapRotateEvent extends CustomEvent<MapRotateDetail> {
+    static readonly eventName = "helix-map-rotate";
+    constructor(detail: MapRotateDetail);
+}
+/**
+ * The user asked the map to tilt, from a tilt button or key. Tilt your map in
+ * response. Not cancelable, because the frame moves nothing itself.
+ */
+export declare class HelixMapTiltEvent extends CustomEvent<MapTiltDetail> {
+    static readonly eventName = "helix-map-tilt";
+    constructor(detail: MapTiltDetail);
+}
 /** What changed on a part of a map: a line or a shape, or something standing on a place. */
 export interface MapPartChangeDetail {
     /**
      * `layer` for a route or an area, which is redrawn; `place` for a marker or
      * a position, which is moved; `cluster` for a marker gathered into another
-     * or let go, which moves the frame's tab stop.
+     * or let go, which moves the frame's tab stop; `menu` for the frame's layers
+     * menu opening, which asks for its map-type previews.
      */
-    kind: 'cluster' | 'layer' | 'place';
+    kind: 'cluster' | 'layer' | 'menu' | 'place';
 }
 /**
  * A marker, a position, a route or an area changed what it says: where it is,
@@ -1087,6 +1118,8 @@ declare const registry: {
     readonly HelixMapClusterEvent: typeof HelixMapClusterEvent;
     readonly HelixMapPanEvent: typeof HelixMapPanEvent;
     readonly HelixMapPartChangeEvent: typeof HelixMapPartChangeEvent;
+    readonly HelixMapRotateEvent: typeof HelixMapRotateEvent;
+    readonly HelixMapTiltEvent: typeof HelixMapTiltEvent;
     readonly HelixMapZoomEvent: typeof HelixMapZoomEvent;
     readonly HelixMoveEvent: typeof HelixMoveEvent;
     readonly HelixNavigateEvent: typeof HelixNavigateEvent;

package/dist/events/events.js

@@ -252,6 +252,28 @@ export class HelixMapZoomEvent extends CustomEvent {
         });
     }
 }
+export class HelixMapRotateEvent extends CustomEvent {
+    static { this.eventName = 'helix-map-rotate'; }
+    constructor(detail) {
+        super(HelixMapRotateEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixMapTiltEvent extends CustomEvent {
+    static { this.eventName = 'helix-map-tilt'; }
+    constructor(detail) {
+        super(HelixMapTiltEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixMapPartChangeEvent extends CustomEvent {
     static { this.eventName = 'helix-map-part-change'; }
     constructor(detail) {
@@ -581,6 +603,8 @@ const registry = {
     HelixMapClusterEvent,
     HelixMapPanEvent,
     HelixMapPartChangeEvent,
+    HelixMapRotateEvent,
+    HelixMapTiltEvent,
     HelixMapZoomEvent,
     HelixMoveEvent,
     HelixNavigateEvent,

package/dist/helix-element/helix-element.d.ts

@@ -4,14 +4,14 @@ import { type StaticValue } from 'lit/static-html.js';
  * @summary Base class every Helix element extends.
  *
  * @description
- * Owns only what is universal: normalizing `box-sizing` inside the shadow root,
- * so component CSS can rely on border-box on both sides of the boundary.
+ * Handles only what every component needs: it sets `box-sizing` inside the
+ * shadow root, so component CSS can rely on border-box on both sides of the
+ * boundary.
  *
- * There is deliberately no `emit(name, detail)` helper. A dispatch through a
- * generic helper cannot be named by the manifest analyzer, which recorded the
- * parameter identifier and produced a phantom event on every element that
- * inherited it. Components dispatch concrete event classes from `events.ts`,
- * which the analyzer and TypeScript can both see.
+ * There is no `emit(name, detail)` helper. The manifest analyzer cannot name an
+ * event dispatched through a generic helper, so components dispatch the
+ * concrete event classes from `events.ts`, which the analyzer and TypeScript
+ * can both read.
  *
  * @since 0.1.0
  * @status experimental

package/dist/helix-form-element/helix-form-element.d.ts

@@ -4,17 +4,15 @@ import { HelixElement } from '../helix-element/helix-element.js';
  * @summary Base for every element that participates in a form.
  *
  * @description
- * This has to be a class rather than a mixin or controller, and that is not a
- * style preference: the browser reads `formAssociated` off the constructor
- * during element upgrade, which cannot be delegated to a composed object.
+ * `HelixFormElement` is a class because the browser reads `formAssociated` from
+ * the constructor during element upgrade, and a mixin or controller cannot
+ * supply it.
  *
  * `internals` comes from `HelixElement`, which attaches it for every component.
- * `attachInternals()` throws on a second call, so there is exactly one owner.
+ * `attachInternals()` throws on a second call, so only one class attaches it.
  *
- * Deliberately small. It carries what every form participant needs and nothing
- * more; `value`, validity, and the reset and restore callbacks land when the
- * first input does, rather than being designed against components that do not
- * exist yet.
+ * The class carries only what every form participant needs. `value`, validity,
+ * and the reset and restore callbacks are added with the first input component.
  *
  * @since 0.1.0
  * @status experimental

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { SourceController, type SourceHost, } from './controllers/source-control
 export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';

package/dist/index.js

@@ -20,7 +20,7 @@ export { SourceController, } from './controllers/source-controller/source-contro
 export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, } from './events/events.js';
+export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';

package/dist/mixins/mixin-viewport/mixin-viewport.d.ts

@@ -11,7 +11,7 @@ export type ViewportControlsPlacement = 'top-start' | 'top-end' | 'bottom-start'
  * The API a pan-and-zoom surface has, as TypeScript sees it.
  */
 export declare class ViewportElement {
-    /** Which controls to show, as a list of `pan`, `zoom`, and `fullscreen`, or `none`. */
+    /** Which controls to show, as a list such as `pan zoom fullscreen`, or `none`. A family adds words of its own. */
     controls?: string;
     /** Which corner the controls sit in. */
     controlsPlacement?: ViewportControlsPlacement;
@@ -63,6 +63,16 @@ export declare class ViewportElement {
     protected get controlsElement(): Element | null;
     /** Which controls the surface draws while `controls` is absent. */
     protected get restingControls(): string;
+    /** Whether `controls`, or the resting controls, names a group. */
+    protected drawsControls(group: string): boolean;
+    /** More buttons for the group of controls, after zoom, for a family that adds its own. */
+    protected renderMoreControls(): TemplateResult | typeof nothing;
+    /** Answers a key the family adds, and says whether it did. */
+    protected handleMoreKeys(event: KeyboardEvent): boolean;
+    /** What one pan control is called, for a family that draws its own. */
+    protected panLabel(way: ViewportWay): string;
+    /** The arrow drawn on one pan control, for a family that draws its own. */
+    protected panGlyph(way: ViewportWay): string;
 }
 /**
  * Grafts a pan-and-zoom surface: its controls, its keys, and the way out.

package/dist/mixins/mixin-viewport/mixin-viewport.js

@@ -40,6 +40,10 @@ export const MixinViewport = (Base) => {
                 if (target !== own && !own.matches('[part~="controls"]')) {
                     return;
                 }
+                if (this.handleMoreKeys(event)) {
+                    event.preventDefault();
+                    return;
+                }
                 const along = inlineStep(this, event.key);
                 if (along === 1) {
                     event.preventDefault();
@@ -88,9 +92,15 @@ export const MixinViewport = (Base) => {
         get restingControls() {
             return 'pan zoom fullscreen';
         }
-        draws(group) {
+        drawsControls(group) {
             return (this.controls ?? this.restingControls).split(/\s+/).includes(group);
         }
+        renderMoreControls() {
+            return nothing;
+        }
+        handleMoreKeys(_event) {
+            return false;
+        }
         sideOf(way) {
             if (way !== 'start' && way !== 'end') {
                 return way;
@@ -101,7 +111,7 @@ export const MixinViewport = (Base) => {
             const element = this;
             return !element.hydrating && isRtl(this);
         }
-        named(way) {
+        panLabel(way) {
             const side = this.sideOf(way);
             return side === 'up'
                 ? this.panUpLabel
@@ -111,7 +121,7 @@ export const MixinViewport = (Base) => {
                         ? this.panLeftLabel
                         : this.panRightLabel;
         }
-        glyph(way) {
+        panGlyph(way) {
             return { down: '↓', left: '←', right: '→', up: '↑' }[this.sideOf(way)] ?? '';
         }
         firstUpdated(changed) {
@@ -126,25 +136,26 @@ export const MixinViewport = (Base) => {
             return this.renderRoot?.querySelector('[part="controls"]') ?? null;
         }
         renderControls() {
-            const pan = this.draws('pan');
-            const zoom = this.draws('zoom');
-            const fullscreen = this.draws('fullscreen');
-            if (!pan && !zoom && !fullscreen) {
+            const pan = this.drawsControls('pan');
+            const zoom = this.drawsControls('zoom');
+            const fullscreen = this.drawsControls('fullscreen');
+            const more = this.renderMoreControls();
+            if (!pan && !zoom && !fullscreen && more === nothing) {
                 return nothing;
             }
             return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
         ${pan
-                ? html `<button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
-                  ${this.glyph('up')}
+                ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+                  ${this.panGlyph('up')}
                 </button>
-                <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
-                  ${this.glyph('start')}
+                <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+                  ${this.panGlyph('start')}
                 </button>
-                <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
-                  ${this.glyph('end')}
+                <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+                  ${this.panGlyph('end')}
                 </button>
-                <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
-                  ${this.glyph('down')}
+                <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+                  ${this.panGlyph('down')}
                 </button>`
                 : nothing}
         ${zoom
@@ -155,6 +166,7 @@ export const MixinViewport = (Base) => {
                   −
                 </button>`
                 : nothing}
+        ${more}
         ${fullscreen
                 ? html `<button
                 part="fullscreen"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.105.0",
+  "version": "0.106.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -34,11 +34,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.105.0"
+    "@fusion.dev/helix-icons": "0.106.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.105.0",
-    "@fusion.dev/helix-testing": "0.105.0",
+    "@fusion.dev/helix-cem": "0.106.0",
+    "@fusion.dev/helix-testing": "0.106.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },