@fusion.dev/helix 0.102.0 → 0.103.0

package/custom-elements.json

@@ -69361,6 +69361,34 @@
             }
           ],
           "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,
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
+            {
+              "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,
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "fullscreenLabel",
@@ -69509,6 +69537,29 @@
                 "module": "src/map/root/map-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "toggleFullscreen",
@@ -69610,6 +69661,21 @@
                 "module": "src/map/root/map-root.ts"
               }
             },
+            {
+              "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`.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -69955,7 +70021,7 @@
             "part": "Root",
             "examples": [
               {
-                "description": "A map the consumer brings, in a frame that names it and can be driven from the keyboard.",
+                "description": "A map the consumer brings, keeping the pan pad their own library does not draw and dropping the zoom it does.",
                 "slug": "framed"
               }
             ],
@@ -70080,6 +70146,30 @@
             }
           ],
           "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMap",
+                "module": "src/map/root/map-root.ts"
+              }
+            },
             {
               "name": "fullscreen-label",
               "type": {

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

@@ -39,12 +39,47 @@ grid-template-areas:
 ".      up    .      zoomin"
 "start  .     end    zoomout"
 ".      down  .      full";
+position: absolute;
+
 inset-block-start: var(--helix-space-sm);
 inset-inline-end: var(--helix-space-sm);
-position: absolute;
 transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
+:host([controls]:not([controls~="zoom"])) [part="controls"] {
+grid-template-areas:
+".      up    ."
+"start  .     end"
+".      down  full";
+}
+
+:host([controls]:not([controls~="pan"])) [part="controls"] {
+grid-template-areas:
+"zoomin"
+"zoomout"
+"full";
+}
+
+:host([controls-placement="top-end"]) [part="controls"] {
+inset-block: var(--helix-space-sm) auto;
+inset-inline: auto var(--helix-space-sm);
+}
+
+:host([controls-placement="top-start"]) [part="controls"] {
+inset-block: var(--helix-space-sm) auto;
+inset-inline: var(--helix-space-sm) auto;
+}
+
+:host([controls-placement="bottom-end"]) [part="controls"] {
+inset-block: auto var(--helix-space-sm);
+inset-inline: auto var(--helix-space-sm);
+}
+
+:host([controls-placement="bottom-start"]) [part="controls"] {
+inset-block: auto var(--helix-space-sm);
+inset-inline: var(--helix-space-sm) auto;
+}
+
 [part="pan-up"] {
 grid-area: up;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.102.0",
+  "version": "0.103.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.102.0",
-    "@fusion.dev/helix-headless": "0.102.0",
-    "@fusion.dev/helix-styles": "0.102.0"
+    "@fusion.dev/helix-core": "0.103.0",
+    "@fusion.dev/helix-headless": "0.103.0",
+    "@fusion.dev/helix-styles": "0.103.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.102.0",
-    "@fusion.dev/helix-testing": "0.102.0",
+    "@fusion.dev/helix-cem": "0.103.0",
+    "@fusion.dev/helix-testing": "0.103.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -11510,6 +11510,57 @@ export type HelixMapHelixMapZoomElementEvent =
   HelixMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixMapProps = {
+  /** 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?: (HelixMap["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"?: (HelixMap["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?: (HelixMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "fullscreen-label"?: (HelixMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */
@@ -11566,6 +11617,57 @@ multiply by their own. */
 };
 
 export type HelixMapSolidJsProps = {
+  /** 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"?: (HelixMap["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"?: (HelixMap["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"?: (HelixMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "attr:fullscreen-label"?: (HelixMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */
@@ -31771,6 +31873,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.
    *
@@ -51970,6 +52106,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.
    *

package/types/vue.d.ts

@@ -5880,6 +5880,57 @@ export type HelixMapHelixMapZoomElementEvent =
   HelixMapElementEvent<HelixMapZoomEvent>;
 
 export type HelixMapVueProps = {
+  /** 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?: (HelixMap["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"?: (HelixMap["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?: (HelixMap["controlsPlacement"]) | undefined;
   /** What the control that fills the screen is called. */
   "fullscreen-label"?: (HelixMap["fullscreenLabel"]) | undefined;
   /** What the control that fills the screen is called. */