@mcp-b/geo-leaflet 0.2.0 → 0.2.1

package/dist/components/map/map.d.ts

@@ -26,6 +26,8 @@ declare class SigveloLeafletMap extends GeoMapElement {
   attributionControl: boolean;
   /** @internal */
   private _map;
+  /** @internal */
+  private attributionFooter?;
   /** Access the underlying Leaflet map instance (after mapReady resolves). */
   get map(): L.Map | null;
   protected createMap(container: HTMLElement): void;
@@ -34,6 +36,7 @@ declare class SigveloLeafletMap extends GeoMapElement {
   protected invalidateSize(): void;
   flyTo(options: FlyToOptions): void;
   fitBounds(options: FitBoundsOptions): void;
+  render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/components/map/map.js

@@ -1,2 +1,2 @@
-import { t as SigveloLeafletMap } from "../../map-DRJUOrtM.js";
+import { t as SigveloLeafletMap } from "../../map-DzUl12tT.js";
 export { SigveloLeafletMap };

package/dist/docs/custom-elements.json

@@ -2045,7 +2045,7 @@
   "package": {
     "name": "@mcp-b/geo-leaflet",
     "description": "Leaflet web components for Sigvelo, built with Lit.",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "license": "MIT"
   }
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { t as SigveloLeafletMap } from "./map-DRJUOrtM.js";
+import { t as SigveloLeafletMap } from "./map-DzUl12tT.js";
 import { t as SigveloLeafletTilelayer } from "./tilelayer-DI2cPv01.js";
 import { t as SigveloLeafletMarker } from "./marker-D4gW4fyF.js";
 import { t as SigveloLeafletPopup } from "./popup-BDNUUZWQ.js";

package/dist/{map-DRJUOrtM.js → map-DzUl12tT.js}

@@ -1,8 +1,8 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
 import * as L from "leaflet";
 import iconUrl from "leaflet/dist/images/marker-icon.png";
-import { css, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { css, html, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 import { GeoMapElement } from "@mcp-b/geo-support/base/geo-map-element";
 import { SigveloMapClickEvent, SigveloMapLoadEvent, SigveloMapMoveEndEvent, SigveloMapMoveEvent, SigveloMapZoomEndEvent, SigveloMapZoomEvent } from "@mcp-b/geo-support/events";
 import leafletCss from "leaflet/dist/leaflet.css?raw";
@@ -21,8 +21,22 @@ var map_styles_default = css`
     background: var(--sigvelo-color-surface-sunken, #171717);
   }
 
+  .map-layout {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  .map-layout > .map-host {
+    position: relative;
+    inset: auto;
+    min-height: 0;
+    height: auto;
+  }
+
   .leaflet-container {
-    border-radius: inherit;
+    border-radius: 0;
     background: var(--sigvelo-color-surface-sunken, #171717);
     font-family: inherit;
   }
@@ -34,13 +48,18 @@ var map_styles_default = css`
    * underlining it satisfies the rule without depending on hue, and the
    * control picks up the active theme instead of Leaflet's fixed palette.
    */
-  .leaflet-container .leaflet-bottom.leaflet-right {
-    right: 0;
+  .attribution-footer {
+    display: flex;
+    box-sizing: border-box;
     width: 100%;
-    pointer-events: none;
+    min-width: 0;
+    justify-content: flex-end;
+    border-top: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
+    color: var(--sigvelo-color-text-muted, #b4b4b4);
+    background: var(--sigvelo-color-surface, #181818);
   }
 
-  .leaflet-container .leaflet-control-attribution {
+  .attribution-footer .leaflet-control-attribution {
     float: none;
     box-sizing: border-box;
     width: 100%;
@@ -48,10 +67,9 @@ var map_styles_default = css`
     margin: 0;
     padding: 4px 8px;
     border: 0;
-    border-top: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
     border-radius: 0;
     color: var(--sigvelo-color-text-muted, #b4b4b4);
-    background: color-mix(in srgb, var(--sigvelo-color-surface, #181818) 94%, transparent);
+    background: transparent;
     box-shadow: none;
     font-size: 11px;
     line-height: 1.35;
@@ -60,7 +78,7 @@ var map_styles_default = css`
     pointer-events: auto;
   }
 
-  .leaflet-container .leaflet-control-attribution a {
+  .attribution-footer .leaflet-control-attribution a {
     color: var(--sigvelo-color-primary-text, #ececec);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -125,6 +143,10 @@ let SigveloLeafletMap = class SigveloLeafletMap extends GeoMapElement {
 			zoomControl: this.zoomControl,
 			attributionControl: this.attributionControl
 		});
+		if (this.attributionControl) {
+			const attribution = this._map.attributionControl.getContainer();
+			if (attribution && this.attributionFooter) this.attributionFooter.append(attribution);
+		}
 		this._map.on("click", (e) => {
 			this.dispatchEvent(new SigveloMapClickEvent({
 				lat: e.latlng.lat,
@@ -190,6 +212,19 @@ let SigveloLeafletMap = class SigveloLeafletMap extends GeoMapElement {
 			maxZoom: options.maxZoom
 		});
 	}
+	render() {
+		return html`
+      <div class="map-layout">
+        <div class="map-host" part="map"></div>
+        ${this.attributionControl ? html`<footer
+              class="attribution-footer"
+              part="attribution"
+              aria-label="Map attribution"
+            ></footer>` : null}
+      </div>
+      <slot></slot>
+    `;
+	}
 };
 __decorate([property({
 	attribute: "zoom-control",
@@ -199,6 +234,7 @@ __decorate([property({
 	attribute: "attribution-control",
 	type: Boolean
 })], SigveloLeafletMap.prototype, "attributionControl", void 0);
+__decorate([query(".attribution-footer")], SigveloLeafletMap.prototype, "attributionFooter", void 0);
 SigveloLeafletMap = __decorate([customElement("sigvelo-leaflet-map")], SigveloLeafletMap);
 //#endregion
 export { SigveloLeafletMap as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/geo-leaflet",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Leaflet web components for Sigvelo, built with Lit.",
   "keywords": [
     "custom-elements",