@mcp-b/geo-leaflet 0.2.22 → 0.3.1

package/dist/components/scale-control/scale-control.js

@@ -1,2 +1,55 @@
-import { t as SigveloLeafletScaleControl } from "../../scale-control-D5QJFlOJ.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/scale-control/scale-control.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletScaleControl = class SigveloLeafletScaleControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.position = "bottomleft";
+		this.metric = true;
+		this.imperial = true;
+		this.maxWidth = 100;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addControl());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._control && this._mapEl?.map) this._control.remove();
+		this._control = null;
+	}
+	/** @internal */
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		this._control = import_leaflet_src.control.scale({
+			position: this.position,
+			metric: this.metric,
+			imperial: this.imperial,
+			maxWidth: this.maxWidth
+		}).addTo(this._mapEl.map);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloLeafletScaleControl.prototype, "position", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletScaleControl.prototype, "metric", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletScaleControl.prototype, "imperial", void 0);
+__decorate([property({
+	attribute: "max-width",
+	type: Number
+})], SigveloLeafletScaleControl.prototype, "maxWidth", void 0);
+SigveloLeafletScaleControl = __decorate([customElement("sigvelo-leaflet-scale-control")], SigveloLeafletScaleControl);
+//#endregion
 export { SigveloLeafletScaleControl };

package/dist/components/tilelayer/tilelayer.js

@@ -1,2 +1,74 @@
-import { t as SigveloLeafletTilelayer } from "../../tilelayer-CwHdbtD_.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/tilelayer/tilelayer.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletTilelayer = class SigveloLeafletTilelayer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.url = "";
+		this.attribution = "";
+		this.minZoom = 0;
+		this.maxZoom = 19;
+		this.subdomains = "abc";
+		this.opacity = 1;
+		this._layer = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addLayer());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeLayer();
+	}
+	/** @internal */
+	_addLayer() {
+		if (!this._mapEl?.map || !this.url) return;
+		this._layer = import_leaflet_src.tileLayer(this.url, {
+			attribution: this.attribution,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom,
+			subdomains: this.subdomains,
+			opacity: this.opacity
+		}).addTo(this._mapEl.map);
+	}
+	/** @internal */
+	_removeLayer() {
+		this._layer?.remove();
+		this._layer = null;
+	}
+	updated(changed) {
+		if (changed.has("url") && this._layer) {
+			this._removeLayer();
+			this._addLayer();
+		}
+		if (changed.has("opacity") && this._layer) this._layer.setOpacity(this.opacity);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloLeafletTilelayer.prototype, "url", void 0);
+__decorate([property()], SigveloLeafletTilelayer.prototype, "attribution", void 0);
+__decorate([property({
+	attribute: "min-zoom",
+	type: Number
+})], SigveloLeafletTilelayer.prototype, "minZoom", void 0);
+__decorate([property({
+	attribute: "max-zoom",
+	type: Number
+})], SigveloLeafletTilelayer.prototype, "maxZoom", void 0);
+__decorate([property()], SigveloLeafletTilelayer.prototype, "subdomains", void 0);
+__decorate([property({ type: Number })], SigveloLeafletTilelayer.prototype, "opacity", void 0);
+SigveloLeafletTilelayer = __decorate([customElement("sigvelo-leaflet-tilelayer")], SigveloLeafletTilelayer);
+//#endregion
 export { SigveloLeafletTilelayer };

package/dist/docs/custom-elements.json

@@ -592,27 +592,56 @@
           "kind": "class",
           "description": "A generic control container for a Leaflet map. Wraps arbitrary content\nand places it in one of Leaflet's four control corners, stacking properly\nwith zoom, attribution, and other controls.",
           "name": "SigveloLeafletControl",
+          "slots": [
+            {
+              "description": "Control content, retained in the control’s light DOM.",
+              "name": ""
+            }
+          ],
           "members": [
+            {
+              "kind": "method",
+              "name": "_removeControl",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_stopPlacement",
+              "type": {
+                "text": "(() => void) | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "parsedType": {
+                "text": "null | {  }"
+              }
+            },
             {
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
+                "text": "ControlPosition"
               },
               "default": "\"bottom-left\"",
               "description": "Position of the control on the map.",
-              "attribute": "position"
+              "attribute": "position",
+              "parsedType": {
+                "text": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'"
+              }
             }
           ],
           "attributes": [
             {
               "name": "position",
               "type": {
-                "text": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
+                "text": "ControlPosition"
               },
               "default": "\"bottom-left\"",
               "description": "Position of the control on the map.",
-              "fieldName": "position"
+              "fieldName": "position",
+              "parsedType": {
+                "text": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'"
+              }
             }
           ],
           "superclass": {
@@ -642,40 +671,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/find-leaflet-map.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "findLeafletMap",
-          "return": {
-            "type": {
-              "text": "SigveloLeafletMap | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "element",
-              "type": {
-                "text": "HTMLElement"
-              }
-            }
-          ],
-          "description": "Finds the containing map even when a map child is rendered by a nested web\ncomponent. `Element.closest()` does not cross a shadow-root boundary, while\nhost applications may compose the reusable Leaflet elements that way."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "findLeafletMap",
-          "declaration": {
-            "name": "findLeafletMap",
-            "module": "src/components/find-leaflet-map.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/geojson/geojson.ts",
@@ -2059,7 +2054,7 @@
   "package": {
     "name": "@mcp-b/geo-leaflet",
     "description": "Leaflet web components for Sigvelo, built with Lit.",
-    "version": "0.2.22",
+    "version": "0.3.1",
     "license": "MIT"
   }
 }

package/dist/index.js

@@ -1,12 +1,12 @@
-import { t as SigveloLeafletMap } from "./map-DGu4FVda.js";
-import { t as SigveloLeafletTilelayer } from "./tilelayer-CwHdbtD_.js";
-import { t as SigveloLeafletMarker } from "./marker-RT0-gpae.js";
-import { t as SigveloLeafletPopup } from "./popup-BDNUUZWQ.js";
-import { t as SigveloLeafletGeojson } from "./geojson-Dlvc_wAg.js";
-import { t as SigveloLeafletControl } from "./control-DvPCCR2e.js";
+import { t as SigveloLeafletMap } from "./map-ChMH_5_A.js";
+import { SigveloLeafletTilelayer } from "./components/tilelayer/tilelayer.js";
+import { SigveloLeafletMarker } from "./components/marker/marker.js";
+import { SigveloLeafletPopup } from "./components/popup/popup.js";
+import { SigveloLeafletGeojson } from "./components/geojson/geojson.js";
+import { SigveloLeafletControl } from "./components/control/control.js";
 import { SigveloLeafletChoropleth } from "./components/choropleth/choropleth.js";
-import { t as SigveloLeafletCircle } from "./circle-BNPIzKH-.js";
-import { t as SigveloLeafletPolyline } from "./polyline-C3VgapkC.js";
-import { t as SigveloLeafletPolygon } from "./polygon-DtiZDmnC.js";
-import { t as SigveloLeafletScaleControl } from "./scale-control-D5QJFlOJ.js";
+import { SigveloLeafletCircle } from "./components/circle/circle.js";
+import { SigveloLeafletPolyline } from "./components/polyline/polyline.js";
+import { SigveloLeafletPolygon } from "./components/polygon/polygon.js";
+import { SigveloLeafletScaleControl } from "./components/scale-control/scale-control.js";
 export { SigveloLeafletChoropleth, SigveloLeafletCircle, SigveloLeafletControl, SigveloLeafletGeojson, SigveloLeafletMap, SigveloLeafletMarker, SigveloLeafletPolygon, SigveloLeafletPolyline, SigveloLeafletPopup, SigveloLeafletScaleControl, SigveloLeafletTilelayer };

package/dist/{map-DGu4FVda.js → map-ChMH_5_A.js}

@@ -17,17 +17,6 @@ var layers_2x_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0C
 //#endregion
 //#region src/components/map/map.styles.ts
 var map_styles_default = css`
-  :host {
-    display: block;
-    position: relative;
-    box-sizing: border-box;
-    min-height: 300px;
-    overflow: hidden;
-    border: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
-    border-radius: var(--sigvelo-radius-md, 8px);
-    background: var(--sigvelo-color-surface-sunken, #171717);
-  }
-
   .map-layout {
     position: absolute;
     inset: 0;
@@ -72,13 +61,13 @@ var map_styles_default = css`
     width: 100%;
     max-width: none;
     margin: 0;
-    padding: 4px 8px;
+    padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
     border: 0;
     border-radius: 0;
     color: var(--sigvelo-color-text-muted, #b4b4b4);
     background: transparent;
     box-shadow: none;
-    font-size: 11px;
+    font-size: var(--sigvelo-control-text-xs);
     line-height: 1.35;
     text-align: right;
     white-space: normal;
@@ -95,7 +84,7 @@ var map_styles_default = css`
     overflow: hidden;
     border: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
     border-radius: var(--sigvelo-radius-sm, 4px);
-    box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
+    box-shadow: var(--sigvelo-elevation-floating);
   }
 
   .leaflet-container .leaflet-bar a,
@@ -109,15 +98,20 @@ var map_styles_default = css`
     background: var(--sigvelo-color-surface-raised, #282828);
   }
 
+  .leaflet-container a:focus-visible {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
+  }
+
   .leaflet-container .leaflet-popup-content-wrapper,
   .leaflet-container .leaflet-popup-tip {
-    color: #171717;
-    background: #fcfcfc;
+    color: var(--sigvelo-color-text);
+    background: var(--sigvelo-color-surface);
   }
 
   .leaflet-container .leaflet-popup-close-button,
   .leaflet-container .leaflet-popup-close-button:hover {
-    color: #595959;
+    color: var(--sigvelo-color-text-muted);
   }
 `;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/geo-leaflet",
-  "version": "0.2.22",
+  "version": "0.3.1",
   "description": "Leaflet web components for Sigvelo, built with Lit.",
   "keywords": [
     "custom-elements",
@@ -33,8 +33,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@mcp-b/wc-support": "0.2.19",
-    "@mcp-b/geo-support": "0.2.19"
+    "@mcp-b/geo-support": "0.3.1",
+    "@mcp-b/wc-support": "0.3.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",

package/dist/circle-BNPIzKH-.js

@@ -1,85 +0,0 @@
-import { n as __toESM, t as require_leaflet_src } from "./leaflet-src-DkjKLRUt.js";
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { findLeafletMap } from "./components/find-leaflet-map.js";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-//#region src/components/circle/circle.styles.ts
-var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
-var circle_styles_default = css`
-  :host {
-    display: none;
-  }
-`;
-//#endregion
-//#region src/components/circle/circle.ts
-let SigveloLeafletCircle = class SigveloLeafletCircle extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.latitude = 0;
-		this.longitude = 0;
-		this.radius = 100;
-		this.fillColor = "#3388ff";
-		this.fillOpacity = .2;
-		this.strokeColor = "#3388ff";
-		this.strokeWidth = 3;
-		this._circle = null;
-		this._mapEl = null;
-	}
-	static {
-		this.styles = [circle_styles_default];
-	}
-	async connectedCallback() {
-		super.connectedCallback();
-		this._mapEl = findLeafletMap(this);
-		if (this._mapEl) {
-			await this._mapEl.mapReady;
-			this._addCircle();
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._circle?.remove();
-		this._circle = null;
-	}
-	/** @internal */
-	_addCircle() {
-		if (!this._mapEl?.map) return;
-		this._circle = import_leaflet_src.circle([this.latitude, this.longitude], {
-			radius: this.radius,
-			fillColor: this.fillColor,
-			fillOpacity: this.fillOpacity,
-			color: this.strokeColor,
-			weight: this.strokeWidth
-		}).addTo(this._mapEl.map);
-	}
-	updated(changed) {
-		if (!this._circle) return;
-		if (changed.has("latitude") || changed.has("longitude")) this._circle.setLatLng([this.latitude, this.longitude]);
-		if (changed.has("radius")) this._circle.setRadius(this.radius);
-		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._circle.setStyle({
-			fillColor: this.fillColor,
-			fillOpacity: this.fillOpacity,
-			color: this.strokeColor,
-			weight: this.strokeWidth
-		});
-	}
-	render() {
-		return html``;
-	}
-};
-__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "latitude", void 0);
-__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "longitude", void 0);
-__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "radius", void 0);
-__decorate([property({ attribute: "fill-color" })], SigveloLeafletCircle.prototype, "fillColor", void 0);
-__decorate([property({
-	attribute: "fill-opacity",
-	type: Number
-})], SigveloLeafletCircle.prototype, "fillOpacity", void 0);
-__decorate([property({ attribute: "stroke-color" })], SigveloLeafletCircle.prototype, "strokeColor", void 0);
-__decorate([property({
-	attribute: "stroke-width",
-	type: Number
-})], SigveloLeafletCircle.prototype, "strokeWidth", void 0);
-SigveloLeafletCircle = __decorate([customElement("sigvelo-leaflet-circle")], SigveloLeafletCircle);
-//#endregion
-export { SigveloLeafletCircle as t };

package/dist/components/find-leaflet-map.d.ts

@@ -1,11 +0,0 @@
-import { SigveloLeafletMap } from "./map/map.js";
-
-//#region src/components/find-leaflet-map.d.ts
-/**
- * Finds the containing map even when a map child is rendered by a nested web
- * component. `Element.closest()` does not cross a shadow-root boundary, while
- * host applications may compose the reusable Leaflet elements that way.
- */
-declare function findLeafletMap(element: HTMLElement): SigveloLeafletMap | null;
-//#endregion
-export { findLeafletMap };

package/dist/components/find-leaflet-map.js

@@ -1,17 +0,0 @@
-//#region src/components/find-leaflet-map.ts
-/**
-* Finds the containing map even when a map child is rendered by a nested web
-* component. `Element.closest()` does not cross a shadow-root boundary, while
-* host applications may compose the reusable Leaflet elements that way.
-*/
-function findLeafletMap(element) {
-	let current = element;
-	while (current) {
-		if (current instanceof HTMLElement && current.localName === "sigvelo-leaflet-map") return current;
-		const root = current.getRootNode();
-		current = current.parentNode ?? (root instanceof ShadowRoot ? root.host : null);
-	}
-	return null;
-}
-//#endregion
-export { findLeafletMap };

package/dist/control-DvPCCR2e.js

@@ -1,68 +0,0 @@
-import { n as __toESM, t as require_leaflet_src } from "./leaflet-src-DkjKLRUt.js";
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { findLeafletMap } from "./components/find-leaflet-map.js";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-//#region src/components/control/control.styles.ts
-var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
-var control_styles_default = css`
-  :host {
-    display: none;
-  }
-`;
-//#endregion
-//#region src/components/control/control.ts
-let SigveloLeafletControl = class SigveloLeafletControl extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.position = "bottom-left";
-		this._control = null;
-		this._mapEl = null;
-	}
-	static {
-		this.styles = [control_styles_default];
-	}
-	/** @internal Map position names to Leaflet format. */
-	_toLeafletPosition() {
-		return {
-			"top-left": "topleft",
-			"top-right": "topright",
-			"bottom-left": "bottomleft",
-			"bottom-right": "bottomright"
-		}[this.position] ?? "bottomleft";
-	}
-	async connectedCallback() {
-		super.connectedCallback();
-		this._mapEl = findLeafletMap(this);
-		if (this._mapEl) {
-			await this._mapEl.mapReady;
-			this._addControl();
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._control?.remove();
-		this._control = null;
-	}
-	/** @internal */
-	_addControl() {
-		if (!this._mapEl?.map) return;
-		const children = Array.from(this.children);
-		const CustomControl = import_leaflet_src.Control.extend({ onAdd: () => {
-			const container = import_leaflet_src.DomUtil.create("div", "sigvelo-leaflet-custom-control");
-			for (const child of children) container.appendChild(child);
-			import_leaflet_src.DomEvent.disableClickPropagation(container);
-			import_leaflet_src.DomEvent.disableScrollPropagation(container);
-			return container;
-		} });
-		this._control = new CustomControl({ position: this._toLeafletPosition() });
-		this._control.addTo(this._mapEl.map);
-	}
-	render() {
-		return html` <slot></slot> `;
-	}
-};
-__decorate([property()], SigveloLeafletControl.prototype, "position", void 0);
-SigveloLeafletControl = __decorate([customElement("sigvelo-leaflet-control")], SigveloLeafletControl);
-//#endregion
-export { SigveloLeafletControl as t };