@deepfuture/dui-map 1.1.0

package/marker/map-marker-content.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, type TemplateResult } from "lit";
+import { type MarkerContext } from "./marker-context.js";
+/**
+ * `<dui-map-marker-content>` — Custom marker DOM content.
+ *
+ * Renders slotted content into the marker's DOM element. If no content
+ * is provided, renders a default blue dot marker.
+ *
+ * @slot - Custom marker content.
+ * @csspart root - Wrapper div inside the marker element.
+ */
+export declare class DuiMapMarkerContent extends LitElement {
+    #private;
+    static tagName: "dui-map-marker-content";
+    static styles: import("lit").CSSResult[];
+    accessor _markerCtx: MarkerContext;
+    connectedCallback(): void;
+    updated(): void;
+    render(): TemplateResult;
+}

package/marker/map-marker-content.js

@@ -0,0 +1,135 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, LitElement, html } from "lit";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import { markerContext } from "./marker-context.js";
+const styles = css `
+  :host {
+    display: contents;
+  }
+
+  [part="root"] {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .default-marker {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+`;
+/**
+ * `<dui-map-marker-content>` — Custom marker DOM content.
+ *
+ * Renders slotted content into the marker's DOM element. If no content
+ * is provided, renders a default blue dot marker.
+ *
+ * @slot - Custom marker content.
+ * @csspart root - Wrapper div inside the marker element.
+ */
+let DuiMapMarkerContent = (() => {
+    let _classSuper = LitElement;
+    let __markerCtx_decorators;
+    let __markerCtx_initializers = [];
+    let __markerCtx_extraInitializers = [];
+    return class DuiMapMarkerContent extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __markerCtx_decorators = [consume({ context: markerContext, subscribe: true })];
+            __esDecorate(this, null, __markerCtx_decorators, { kind: "accessor", name: "_markerCtx", static: false, private: false, access: { has: obj => "_markerCtx" in obj, get: obj => obj._markerCtx, set: (obj, value) => { obj._markerCtx = value; } }, metadata: _metadata }, __markerCtx_initializers, __markerCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-marker-content";
+        static styles = [base, styles];
+        #_markerCtx_accessor_storage = __runInitializers(this, __markerCtx_initializers, void 0);
+        get _markerCtx() { return this.#_markerCtx_accessor_storage; }
+        set _markerCtx(value) { this.#_markerCtx_accessor_storage = value; }
+        #portalContainer = (__runInitializers(this, __markerCtx_extraInitializers), null);
+        #hasSlottedContent = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#portalContainer = document.createElement("div");
+            this.#portalContainer.setAttribute("part", "root");
+            this.#portalContainer.style.position = "relative";
+            this.#portalContainer.style.cursor = "pointer";
+        }
+        updated() {
+            if (!this._markerCtx?.marker || !this.#portalContainer)
+                return;
+            const el = this._markerCtx.marker.getElement();
+            if (el && !el.contains(this.#portalContainer)) {
+                // Clear default MapLibre marker styling
+                el.style.backgroundImage = "none";
+                el.style.width = "";
+                el.style.height = "";
+                el.appendChild(this.#portalContainer);
+            }
+            this.#renderIntoPortal();
+        }
+        #renderIntoPortal() {
+            if (!this.#portalContainer)
+                return;
+            // Move slotted light DOM children into the marker element
+            const slot = this.shadowRoot.querySelector("slot");
+            if (!slot)
+                return;
+            const assigned = slot.assignedNodes({ flatten: true });
+            this.#hasSlottedContent = assigned.length > 0;
+            // Clear and re-append
+            this.#portalContainer.innerHTML = "";
+            if (this.#hasSlottedContent) {
+                for (const node of assigned) {
+                    this.#portalContainer.appendChild(node.cloneNode(true));
+                }
+            }
+            else {
+                // Default marker — styled by the dui-map theme via .dui-default-marker
+                const dot = document.createElement("div");
+                dot.className = "dui-default-marker";
+                this.#portalContainer.appendChild(dot);
+            }
+        }
+        render() {
+            // Hidden slot — content is portaled into the marker element
+            return html `<slot style="display:none" @slotchange=${this.#renderIntoPortal}></slot>`;
+        }
+    };
+})();
+export { DuiMapMarkerContent };
+customElements.define(DuiMapMarkerContent.tagName, DuiMapMarkerContent);

package/marker/map-marker-label.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from "lit";
+import { type MarkerContext } from "./marker-context.js";
+/**
+ * `<dui-map-marker-label>` — Static label above or below a marker.
+ *
+ * Renders slotted text content as a label positioned relative to the marker.
+ *
+ * @slot - Label text content.
+ * @csspart label - The label element.
+ */
+export declare class DuiMapMarkerLabel extends LitElement {
+    #private;
+    static tagName: "dui-map-marker-label";
+    static styles: import("lit").CSSResult[];
+    /** Position of the label relative to the marker. */
+    accessor position: "top" | "bottom";
+    accessor _markerCtx: MarkerContext;
+    updated(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}

package/marker/map-marker-label.js

@@ -0,0 +1,126 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import { markerContext } from "./marker-context.js";
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-marker-label>` — Static label above or below a marker.
+ *
+ * Renders slotted text content as a label positioned relative to the marker.
+ *
+ * @slot - Label text content.
+ * @csspart label - The label element.
+ */
+let DuiMapMarkerLabel = (() => {
+    let _classSuper = LitElement;
+    let _position_decorators;
+    let _position_initializers = [];
+    let _position_extraInitializers = [];
+    let __markerCtx_decorators;
+    let __markerCtx_initializers = [];
+    let __markerCtx_extraInitializers = [];
+    return class DuiMapMarkerLabel extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _position_decorators = [property()];
+            __markerCtx_decorators = [consume({ context: markerContext, subscribe: true })];
+            __esDecorate(this, null, _position_decorators, { kind: "accessor", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
+            __esDecorate(this, null, __markerCtx_decorators, { kind: "accessor", name: "_markerCtx", static: false, private: false, access: { has: obj => "_markerCtx" in obj, get: obj => obj._markerCtx, set: (obj, value) => { obj._markerCtx = value; } }, metadata: _metadata }, __markerCtx_initializers, __markerCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-marker-label";
+        static styles = [base, styles];
+        #position_accessor_storage = __runInitializers(this, _position_initializers, "top");
+        /** Position of the label relative to the marker. */
+        get position() { return this.#position_accessor_storage; }
+        set position(value) { this.#position_accessor_storage = value; }
+        #_markerCtx_accessor_storage = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, __markerCtx_initializers, void 0));
+        get _markerCtx() { return this.#_markerCtx_accessor_storage; }
+        set _markerCtx(value) { this.#_markerCtx_accessor_storage = value; }
+        #labelEl = (__runInitializers(this, __markerCtx_extraInitializers), null);
+        updated() {
+            if (!this._markerCtx?.marker)
+                return;
+            const markerEl = this._markerCtx.marker.getElement();
+            if (!markerEl)
+                return;
+            if (!this.#labelEl) {
+                this.#labelEl = document.createElement("div");
+                this.#labelEl.setAttribute("part", "label");
+                this.#labelEl.className = "dui-marker-label";
+                markerEl.appendChild(this.#labelEl);
+            }
+            // Position — structural only (aesthetic styles in theme)
+            this.#labelEl.style.cssText = `
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      pointer-events: none;
+      ${this.position === "top" ? "bottom: 100%; margin-bottom: 4px;" : "top: 100%; margin-top: 4px;"}
+    `;
+            this.#renderIntoPortal();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#labelEl?.remove();
+            this.#labelEl = null;
+        }
+        #renderIntoPortal() {
+            if (!this.#labelEl)
+                return;
+            const slot = this.shadowRoot.querySelector("slot");
+            if (!slot)
+                return;
+            const assigned = slot.assignedNodes({ flatten: true });
+            this.#labelEl.innerHTML = "";
+            for (const node of assigned) {
+                this.#labelEl.appendChild(node.cloneNode(true));
+            }
+        }
+        render() {
+            return html `<slot style="display:none" @slotchange=${this.#renderIntoPortal}></slot>`;
+        }
+    };
+})();
+export { DuiMapMarkerLabel };
+customElements.define(DuiMapMarkerLabel.tagName, DuiMapMarkerLabel);

package/marker/map-marker-popup.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from "lit";
+import { type MarkerContext } from "./marker-context.js";
+/**
+ * `<dui-map-marker-popup>` — Click-to-open popup on a marker.
+ *
+ * Slotted content is rendered inside a MapLibre popup attached to the parent marker.
+ * The popup opens when the marker is clicked.
+ *
+ * @slot - Popup content.
+ * @csspart popup - The popup content wrapper.
+ */
+export declare class DuiMapMarkerPopup extends LitElement {
+    #private;
+    static tagName: "dui-map-marker-popup";
+    static styles: import("lit").CSSResult[];
+    /** Popup offset from the marker in pixels. */
+    accessor popupOffset: number;
+    /** Show a close button. */
+    accessor closeButton: boolean;
+    accessor _markerCtx: MarkerContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    render(): TemplateResult;
+}

package/marker/map-marker-popup.js

@@ -0,0 +1,158 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import MapLibreGL from "maplibre-gl";
+import { markerContext } from "./marker-context.js";
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-marker-popup>` — Click-to-open popup on a marker.
+ *
+ * Slotted content is rendered inside a MapLibre popup attached to the parent marker.
+ * The popup opens when the marker is clicked.
+ *
+ * @slot - Popup content.
+ * @csspart popup - The popup content wrapper.
+ */
+let DuiMapMarkerPopup = (() => {
+    let _classSuper = LitElement;
+    let _popupOffset_decorators;
+    let _popupOffset_initializers = [];
+    let _popupOffset_extraInitializers = [];
+    let _closeButton_decorators;
+    let _closeButton_initializers = [];
+    let _closeButton_extraInitializers = [];
+    let __markerCtx_decorators;
+    let __markerCtx_initializers = [];
+    let __markerCtx_extraInitializers = [];
+    return class DuiMapMarkerPopup extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _popupOffset_decorators = [property({ type: Number, attribute: "popup-offset" })];
+            _closeButton_decorators = [property({ type: Boolean, attribute: "close-button" })];
+            __markerCtx_decorators = [consume({ context: markerContext, subscribe: true })];
+            __esDecorate(this, null, _popupOffset_decorators, { kind: "accessor", name: "popupOffset", static: false, private: false, access: { has: obj => "popupOffset" in obj, get: obj => obj.popupOffset, set: (obj, value) => { obj.popupOffset = value; } }, metadata: _metadata }, _popupOffset_initializers, _popupOffset_extraInitializers);
+            __esDecorate(this, null, _closeButton_decorators, { kind: "accessor", name: "closeButton", static: false, private: false, access: { has: obj => "closeButton" in obj, get: obj => obj.closeButton, set: (obj, value) => { obj.closeButton = value; } }, metadata: _metadata }, _closeButton_initializers, _closeButton_extraInitializers);
+            __esDecorate(this, null, __markerCtx_decorators, { kind: "accessor", name: "_markerCtx", static: false, private: false, access: { has: obj => "_markerCtx" in obj, get: obj => obj._markerCtx, set: (obj, value) => { obj._markerCtx = value; } }, metadata: _metadata }, __markerCtx_initializers, __markerCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-marker-popup";
+        static styles = [base, styles];
+        #popupOffset_accessor_storage = __runInitializers(this, _popupOffset_initializers, 16);
+        /** Popup offset from the marker in pixels. */
+        get popupOffset() { return this.#popupOffset_accessor_storage; }
+        set popupOffset(value) { this.#popupOffset_accessor_storage = value; }
+        #closeButton_accessor_storage = (__runInitializers(this, _popupOffset_extraInitializers), __runInitializers(this, _closeButton_initializers, false));
+        /** Show a close button. */
+        get closeButton() { return this.#closeButton_accessor_storage; }
+        set closeButton(value) { this.#closeButton_accessor_storage = value; }
+        #_markerCtx_accessor_storage = (__runInitializers(this, _closeButton_extraInitializers), __runInitializers(this, __markerCtx_initializers, void 0));
+        get _markerCtx() { return this.#_markerCtx_accessor_storage; }
+        set _markerCtx(value) { this.#_markerCtx_accessor_storage = value; }
+        #popup = (__runInitializers(this, __markerCtx_extraInitializers), null);
+        #container = document.createElement("div");
+        #attachedToMarker = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#popup = new MapLibreGL.Popup({
+                offset: this.popupOffset,
+                closeButton: false,
+                closeOnClick: true,
+                className: "dui-popup",
+            })
+                .setMaxWidth("none")
+                .setDOMContent(this.#container);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (this._markerCtx?.marker) {
+                this._markerCtx.marker.setPopup(null);
+            }
+            this.#popup?.remove();
+            this.#popup = null;
+            this.#attachedToMarker = false;
+        }
+        updated() {
+            if (!this._markerCtx?.marker || !this._markerCtx?.map || !this.#popup)
+                return;
+            if (!this.#attachedToMarker) {
+                this.#popup.setDOMContent(this.#container);
+                this._markerCtx.marker.setPopup(this.#popup);
+                this.#attachedToMarker = true;
+            }
+            // Update offset if changed
+            if (this.#popup.options?.offset !== this.popupOffset) {
+                this.#popup.setOffset(this.popupOffset);
+            }
+            this.#renderIntoPortal();
+        }
+        #handleClose = () => {
+            this.#popup?.remove();
+        };
+        #renderIntoPortal() {
+            const slot = this.shadowRoot.querySelector("slot");
+            if (!slot)
+                return;
+            const assigned = slot.assignedNodes({ flatten: true });
+            this.#container.innerHTML = "";
+            const wrapper = document.createElement("div");
+            wrapper.setAttribute("part", "popup");
+            if (this.closeButton) {
+                const btn = document.createElement("button");
+                btn.setAttribute("aria-label", "Close popup");
+                btn.type = "button";
+                btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+                btn.style.cssText = "position:absolute;top:4px;right:4px;z-index:10;background:none;border:none;cursor:pointer;padding:2px;opacity:0.7;color:inherit;";
+                btn.addEventListener("click", this.#handleClose);
+                wrapper.appendChild(btn);
+            }
+            for (const node of assigned) {
+                wrapper.appendChild(node.cloneNode(true));
+            }
+            this.#container.appendChild(wrapper);
+        }
+        render() {
+            return html `<slot style="display:none" @slotchange=${this.#renderIntoPortal}></slot>`;
+        }
+    };
+})();
+export { DuiMapMarkerPopup };
+customElements.define(DuiMapMarkerPopup.tagName, DuiMapMarkerPopup);

package/marker/map-marker-tooltip.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, type TemplateResult } from "lit";
+import { type MarkerContext } from "./marker-context.js";
+/**
+ * `<dui-map-marker-tooltip>` — Hover tooltip on a marker.
+ *
+ * Shows a popup when the user hovers over the parent marker.
+ *
+ * @slot - Tooltip content.
+ * @csspart tooltip - The tooltip content wrapper.
+ */
+export declare class DuiMapMarkerTooltip extends LitElement {
+    #private;
+    static tagName: "dui-map-marker-tooltip";
+    static styles: import("lit").CSSResult[];
+    /** Tooltip offset from the marker in pixels. */
+    accessor tooltipOffset: number;
+    accessor _markerCtx: MarkerContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    render(): TemplateResult;
+}