@maptiler/geocoding-control 3.0.0-rc.9 → 3.1.0-rc.1

package/dist/maptilersdk.js

@@ -1,25 +1,25 @@
-import { css as I, LitElement as F, svg as z, html as m, unsafeCSS as ce, nothing as J } from "lit";
-import { customElement as O, property as p, state as b, query as De } from "lit/decorators.js";
-import { convert as Ve } from "geo-coordinates-parser";
-import { classMap as A } from "lit/directives/class-map.js";
-import { repeat as qe } from "lit/directives/repeat.js";
+import { css as O, LitElement as F, svg as D, html as m, unsafeCSS as ue, nothing as ie } from "lit";
+import { customElement as T, property as p, state as x, queryAssignedElements as L } from "lit/decorators.js";
+import { convert as Ye } from "geo-coordinates-parser";
+import { classMap as q } from "lit/directives/class-map.js";
+import { repeat as Je } from "lit/directives/repeat.js";
 import "@turf/clone";
-import { styleMap as Ne } from "lit/directives/style-map.js";
-import { config as Ze } from "@maptiler/sdk";
-import { featureCollection as D, polygon as Ke, feature as Qe } from "@turf/helpers";
-import _e from "@turf/union";
-import H from "maplibre-gl";
-import be from "@turf/bbox";
-import Ye from "@turf/difference";
-import He from "@turf/flatten";
-var Je = Object.getOwnPropertyDescriptor, Xe = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Je(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+import { styleMap as Xe } from "lit/directives/style-map.js";
+import { config as et } from "@maptiler/sdk";
+import { featureCollection as Z, polygon as tt, feature as it } from "@turf/helpers";
+import Fe from "@turf/union";
+import te from "maplibre-gl";
+import Ie from "@turf/bbox";
+import st from "@turf/difference";
+import rt from "@turf/flatten";
+var ot = Object.getOwnPropertyDescriptor, at = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ot(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let X = class extends F {
+let se = class extends F {
   render() {
-    return z`
+    return D`
       <svg viewBox="0 0 14 14" width="13" height="13">
         <path
           d="M13.12.706a.982.982 0 0 0-1.391 0L6.907 5.517 2.087.696a.982.982 0 1 0-1.391 1.39l4.821 4.821L.696 11.73a.982.982 0 1 0 1.39 1.39l4.821-4.821 4.822 4.821a.982.982 0 1 0 1.39-1.39L8.298 6.908l4.821-4.822a.988.988 0 0 0 0-1.38Z"
@@ -28,23 +28,23 @@ let X = class extends F {
     `;
   }
 };
-X.styles = I`
+se.styles = O`
     svg {
       display: block;
-      fill: var(--color-icon-button);
+      fill: var(--color-icon-button, #444952);
     }
   `;
-X = Xe([
-  O("maptiler-geocode-clear-icon")
-], X);
-var et = Object.getOwnPropertyDescriptor, tt = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? et(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+se = at([
+  T("maptiler-geocode-clear-icon")
+], se);
+var lt = Object.getOwnPropertyDescriptor, nt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? lt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let ee = class extends F {
+let re = class extends F {
   render() {
-    return z`
+    return D`
       <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M15 0C6.705 0 0 6.705 0 15C0 23.295 6.705 30 15 30C23.295 30 30 23.295 30 15C30 6.705 23.295 0 15 0ZM22.5 20.385L20.385 22.5L15 17.115L9.615 22.5L7.5 20.385L12.885 15L7.5 9.615L9.615 7.5L15 12.885L20.385 7.5L22.5 9.615L17.115 15L22.5 20.385Z"
@@ -53,21 +53,21 @@ let ee = class extends F {
     `;
   }
 };
-ee.styles = I`
+re.styles = O`
     svg {
       display: block;
-      fill: #e15042;
+      fill: var(--color-fail-icon, #e15042);
     }
   `;
-ee = tt([
-  O("maptiler-geocode-fail-icon")
-], ee);
-var it = Object.getOwnPropertyDescriptor, st = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? it(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+re = nt([
+  T("maptiler-geocode-fail-icon")
+], re);
+var ct = Object.getOwnPropertyDescriptor, ht = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ct(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let te = class extends F {
+let oe = class extends F {
   render() {
     return m`
       <div>
@@ -79,7 +79,7 @@ let te = class extends F {
     `;
   }
 };
-te.styles = I`
+oe.styles = O`
     div {
       position: absolute;
       left: 50%;
@@ -106,17 +106,17 @@ te.styles = I`
       }
     }
   `;
-te = st([
-  O("maptiler-geocode-loading-icon")
-], te);
-var rt = Object.getOwnPropertyDescriptor, ot = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? rt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+oe = ht([
+  T("maptiler-geocode-loading-icon")
+], oe);
+var pt = Object.getOwnPropertyDescriptor, dt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? pt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let ie = class extends F {
+let ae = class extends F {
   render() {
-    return z`
+    return D`
       <svg viewBox="0 0 60.006 21.412" width="14" height="20">
         <path
           d="M30.003-26.765C13.46-26.765 0-14.158 0 1.337c0 23.286 24.535 42.952 28.39 46.04.24.192.402.316.471.376.323.282.732.424 1.142.424.41 0 .82-.142 1.142-.424.068-.06.231-.183.471-.376 3.856-3.09 28.39-22.754 28.39-46.04 0-15.495-13.46-28.102-30.003-28.102Zm1.757 12.469c4.38 0 7.858 1.052 10.431 3.158 2.595 2.105 3.89 4.913 3.89 8.422 0 2.34-.53 4.362-1.593 6.063-1.063 1.702-3.086 3.616-6.063 5.742-2.042 1.51-3.337 2.659-3.89 3.446-.532.787-.8 1.82-.8 3.096v1.914h-8.449V15.18c0-2.041.434-3.815 1.306-5.325.872-1.51 2.467-3.118 4.785-4.82 2.233-1.594 3.7-2.89 4.402-3.889a5.582 5.582 0 0 0 1.087-3.35c0-1.382-.51-2.435-1.531-3.158-1.02-.723-2.45-1.087-4.28-1.087-3.19 0-6.826 1.047-10.91 3.131l-3.472-6.986c4.742-2.659 9.77-3.992 15.087-3.992Zm-1.88 37.324c1.765 0 3.124.472 4.08 1.408.98.936 1.47 2.276 1.47 4.02 0 1.68-.49 3.007-1.47 3.985-.977.957-2.336 1.435-4.08 1.435-1.787 0-3.171-.465-4.15-1.4-.978-.958-1.47-2.298-1.47-4.02 0-1.787.48-3.14 1.436-4.054.957-.915 2.355-1.374 4.184-1.374Z"
@@ -125,23 +125,23 @@ let ie = class extends F {
     `;
   }
 };
-ie.styles = I`
+ae.styles = O`
     svg {
       display: block;
-      fill: var(--color-icon-button);
+      fill: var(--color-icon-button, #444952);
     }
   `;
-ie = ot([
-  O("maptiler-geocode-reverse-geocoding-icon")
-], ie);
-var at = Object.getOwnPropertyDescriptor, lt = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? at(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+ae = dt([
+  T("maptiler-geocode-reverse-geocoding-icon")
+], ae);
+var ut = Object.getOwnPropertyDescriptor, ft = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ut(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let se = class extends F {
+let le = class extends F {
   render() {
-    return z`
+    return D`
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="13"
@@ -154,7 +154,7 @@ let se = class extends F {
     `;
   }
 };
-se.styles = I`
+le.styles = O`
     circle {
       stroke-width: 1.875;
       fill: none;
@@ -167,30 +167,30 @@ se.styles = I`
 
     svg {
       display: block;
-      stroke: var(--color-icon-button);
+      stroke: var(--color-icon-button, #444952);
     }
   `;
-se = lt([
-  O("maptiler-geocode-search-icon")
-], se);
-function nt(t, e, i) {
+le = ft([
+  T("maptiler-geocode-search-icon")
+], le);
+function mt(t, e, i) {
   const a = e[1], s = e[0], o = a - s;
   return t === a && i ? t : ((t - s) % o + o) % o + s;
 }
-function V(t) {
+function K(t) {
   const e = [...t];
   return e[2] < e[0] && (Math.abs((e[0] + e[2] + 360) / 2) > Math.abs((e[0] - 360 + e[2]) / 2) ? e[0] -= 360 : e[2] += 360), e;
 }
-let P;
-async function ct(t, e, i) {
+let B;
+async function gt(t, e, i) {
   for (const a of e ?? [])
     if (!(t && (a.minZoom != null && a.minZoom > t[0] || a.maxZoom != null && a.maxZoom < t[0]))) {
       if (a.type === "fixed")
         return a.coordinates.join(",");
       if (a.type === "client-geolocation")
-        if (P && a.cachedLocationExpiry && P.time + a.cachedLocationExpiry > Date.now()) {
-          if (P.coords)
-            return P.coords;
+        if (B && a.cachedLocationExpiry && B.time + a.cachedLocationExpiry > Date.now()) {
+          if (B.coords)
+            return B.coords;
         } else {
           let s;
           try {
@@ -209,7 +209,7 @@ async function ct(t, e, i) {
             }), s;
           } catch {
           } finally {
-            a.cachedLocationExpiry && (P = {
+            a.cachedLocationExpiry && (B = {
               time: Date.now(),
               coords: s
             });
@@ -223,21 +223,21 @@ async function ct(t, e, i) {
         return t[1].toFixed(6) + "," + t[2].toFixed(6);
     }
 }
-const ht = ".sprite-icon{align-self:center;justify-self:center;opacity:.75;background-repeat:no-repeat}li{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content;outline:0}li:first-child{padding-top:10px}li:last-child{padding-bottom:10px}li.picked{background-color:#e7edff}li.picked .secondary{color:#96a4c7;padding-left:4px}li.picked .line2{color:#96a4c7}li.selected{background-color:#f3f6ff;animation:backAndForth 5s linear infinite}li.selected .primary{color:#2b8bfb}li.selected .secondary{color:#a2adc7;padding-left:4px}li.selected .line2{color:#a2adc7}li>img{align-self:center;justify-self:center;opacity:.75}.texts{padding:0 17px 0 0}.texts>*{white-space:nowrap;display:block;min-width:fit-content}.primary{font-weight:600}.secondary{color:#aeb6c7;padding-left:4px}.line2{color:#aeb6c7}@keyframes backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}";
-var pt = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, $e = (t) => {
+const yt = ".sprite-icon{align-self:center;justify-self:center;opacity:var(--icon-items-opacity, .75);background-repeat:no-repeat}li{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-items, #444952);padding:8px 0;font-size:var(--font-size-items, 14px);line-height:1.3;min-width:fit-content;outline:0}li:first-child{padding-top:10px}li:last-child{padding-bottom:10px}li.picked{background-color:var(--color-items-picked-bg, #e7edff)}li.picked .secondary,li.picked .line2{color:var(--color-items-picked-secondary, #96a4c7)}li.selected{background-color:var(--color-items-selected-bg, #f3f6ff);animation:backAndForth 5s linear infinite}li.selected .primary{color:var(--color-items-selected, #2b8bfb)}li.selected .secondary,li.selected .line2{color:var(--color-items-selected-secondary, #a2adc7)}li>img{align-self:center;justify-self:center;opacity:var(--icon-opacity, .75)}.texts{padding:0 17px 0 0}.texts>*{white-space:nowrap;display:block;min-width:fit-content}.primary{font-weight:600}.secondary{color:var(--color-items-secondary, #aeb6c7);padding-left:4px}.line2{color:var(--color-items-secondary, #aeb6c7)}@keyframes backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}";
+var vt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, Te = (t) => {
   throw TypeError(t);
-}, _ = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? dt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+}, I = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? bt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = (a ? r(e, i, s) : r(s)) || s);
-  return a && s && pt(e, i, s), s;
-}, Ie = (t, e, i) => e.has(t) || $e("Cannot " + i), f = (t, e, i) => (Ie(t, e, "read from private field"), i ? i.call(t) : e.get(t)), ut = (t, e, i) => e.has(t) ? $e("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), C = (t, e, i) => (Ie(t, e, "access private method"), i), d, q, G, g, Fe, Oe, he, re;
-const Me = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, Te = Me ? "@2x" : "", S = Me ? 2 : 1;
-let T, Se, k = class extends F {
+  return a && s && vt(e, i, s), s;
+}, Me = (t, e, i) => e.has(t) || Te("Cannot " + i), f = (t, e, i) => (Me(t, e, "read from private field"), i ? i.call(t) : e.get(t)), xt = (t, e, i) => e.has(t) ? Te("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), P = (t, e, i) => (Me(t, e, "access private method"), i), d, j, R, g, Se, Ce, fe, ne;
+const Pe = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, Ue = Pe ? "@2x" : "", C = Pe ? 2 : 1;
+let S, Be, w = class extends F {
   constructor() {
-    super(...arguments), ut(this, d), this.itemStyle = "default", this.showPlaceType = "if-needed", this.missingIconsCache = /* @__PURE__ */ new Set(), this.iconsBaseUrl = "", this.index = 0;
+    super(...arguments), xt(this, d), this.itemStyle = "default", this.showPlaceType = "if-needed", this.missingIconsCache = /* @__PURE__ */ new Set(), this.iconsBaseUrl = "", this.index = 0;
   }
   willUpdate(t) {
-    t.has("feature") && f(this, d, q) && (this.index = f(this, d, q).length, C(this, d, he).call(this));
+    t.has("feature") && f(this, d, j) && (this.index = f(this, d, j).length, P(this, d, fe).call(this));
   }
   render() {
     return m`
@@ -249,112 +249,124 @@ let T, Se, k = class extends F {
         class=${this.itemStyle}
         @click=${() => this.dispatchEvent(new CustomEvent("select"))}
       >
-        ${T && this.spriteIcon ? m`
+        ${S && this.spriteIcon ? m`
               <div
                 class="sprite-icon"
-                style=${Ne({
-      width: `${this.spriteIcon.width / S}px`,
-      height: `${this.spriteIcon.height / S}px`,
-      backgroundImage: `url(${this.iconsBaseUrl}sprite${Te}.png)`,
-      backgroundPosition: `-${this.spriteIcon.x / S}px -${this.spriteIcon.y / S}px`,
-      backgroundSize: `${T.width / S}px ${T.height / S}px`
+                style=${Xe({
+      width: `${this.spriteIcon.width / C}px`,
+      height: `${this.spriteIcon.height / C}px`,
+      backgroundImage: `url(${this.iconsBaseUrl}sprite${Ue}.png)`,
+      backgroundPosition: `-${this.spriteIcon.x / C}px -${this.spriteIcon.y / C}px`,
+      backgroundSize: `${S.width / C}px ${S.height / C}px`
     })}
                 title=${f(this, d, g)}
               />
-            ` : this.imageUrl ? m` <img src=${this.imageUrl} alt=${this.category} title=${f(this, d, g)} @error=${C(this, d, Oe)} />` : this.feature?.address ? m` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("road.") ? m` <img src=${this.iconsBaseUrl + "road.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("address.") ? m` <img src=${this.iconsBaseUrl + "street.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("postal_code.") ? m` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("poi.") ? m` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : f(this, d, G) ? m` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : m` <img src=${this.iconsBaseUrl + "area.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> `}
+            ` : this.imageUrl ? m` <img src=${this.imageUrl} alt=${this.category} title=${f(this, d, g)} @error=${P(this, d, Ce)} />` : this.feature?.address ? m` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("road.") ? m` <img src=${this.iconsBaseUrl + "road.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("address.") ? m` <img src=${this.iconsBaseUrl + "street.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("postal_code.") ? m` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : this.feature?.id.startsWith("poi.") ? m` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : f(this, d, R) ? m` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> ` : m` <img src=${this.iconsBaseUrl + "area.svg"} alt=${f(this, d, g)} title=${f(this, d, g)} /> `}
 
         <span class="texts">
           <span>
-            <span class="primary"> ${f(this, d, G) ? this.feature?.place_name : this.feature?.place_name.replace(/,.*/, "")} </span>
+            <span class="primary"> ${f(this, d, R) ? this.feature?.place_name : this.feature?.place_name.replace(/,.*/, "")} </span>
 
-            ${this.showPlaceType === "always" || this.showPlaceType !== "never" && !this.feature?.address && !this.feature?.id.startsWith("road.") && !this.feature?.id.startsWith("address.") && !this.feature?.id.startsWith("postal_code.") && (!this.feature?.id.startsWith("poi.") || !this.imageUrl) && !f(this, d, G) ? m` <span class="secondary"> ${f(this, d, g)} </span> ` : J}
+            ${this.showPlaceType === "always" || this.showPlaceType !== "never" && !this.feature?.address && !this.feature?.id.startsWith("road.") && !this.feature?.id.startsWith("address.") && !this.feature?.id.startsWith("postal_code.") && (!this.feature?.id.startsWith("poi.") || !this.imageUrl) && !f(this, d, R) ? m` <span class="secondary"> ${f(this, d, g)} </span> ` : ie}
           </span>
 
-          <span class="line2"> ${f(this, d, G) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
+          <span class="line2"> ${f(this, d, R) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
         </span>
       </li>
     `;
   }
 };
 d = /* @__PURE__ */ new WeakSet();
-q = function() {
+j = function() {
   return this.feature?.properties?.categories;
 };
-G = function() {
+R = function() {
   return this.feature?.place_type[0] === "reverse";
 };
 g = function() {
-  return this.feature?.properties?.categories?.join(", ") ?? this.feature?.place_type_name?.[0] ?? this.feature?.place_type[0];
+  return f(this, d, j)?.join(", ") ?? this.feature?.place_type_name?.[0] ?? this.feature?.place_type[0];
 };
-Fe = function() {
-  Se ??= fetch(`${this.iconsBaseUrl}sprite${Te}.json`).then((t) => t.json()).then((t) => {
-    T = t;
+Se = function() {
+  Be ??= fetch(`${this.iconsBaseUrl}sprite${Ue}.json`).then((t) => t.json()).then((t) => {
+    S = t;
   }).catch(() => {
-    T = null;
+    S = null;
   });
 };
-Oe = function() {
-  this.imageUrl && this.missingIconsCache.add(this.imageUrl), C(this, d, he).call(this);
+Ce = function() {
+  this.imageUrl && this.missingIconsCache.add(this.imageUrl), P(this, d, fe).call(this);
 };
-he = function() {
-  T !== void 0 ? C(this, d, re).call(this) : (C(this, d, Fe).call(this), Se?.then(() => {
-    C(this, d, re).call(this);
+fe = function() {
+  S !== void 0 ? P(this, d, ne).call(this) : (P(this, d, Se).call(this), Be?.then(() => {
+    P(this, d, ne).call(this);
   }));
 };
-re = function() {
+ne = function() {
   do {
-    if (this.index--, this.category = f(this, d, q)?.[this.index], this.spriteIcon = this.category ? T?.icons[this.category] : void 0, this.spriteIcon)
+    if (this.index--, this.category = f(this, d, j)?.[this.index], this.spriteIcon = this.category ? S?.icons[this.category] : void 0, this.spriteIcon)
       break;
     this.imageUrl = this.category ? this.iconsBaseUrl + this.category.replace(/ /g, "_") + ".svg" : void 0;
   } while (this.index > -1 && (!this.imageUrl || this.missingIconsCache.has(this.imageUrl)));
 };
-k.styles = I`
-    ${ce(ht)}
+w.styles = O`
+    ${ue(yt)}
   `;
-_([
+I([
   p({ type: Object })
-], k.prototype, "feature", 2);
-_([
+], w.prototype, "feature", 2);
+I([
   p({ type: String })
-], k.prototype, "itemStyle", 2);
-_([
+], w.prototype, "itemStyle", 2);
+I([
   p({ type: String })
-], k.prototype, "showPlaceType", 2);
-_([
+], w.prototype, "showPlaceType", 2);
+I([
   p({ attribute: !1 })
-], k.prototype, "missingIconsCache", 2);
-_([
+], w.prototype, "missingIconsCache", 2);
+I([
   p({ type: String })
-], k.prototype, "iconsBaseUrl", 2);
-_([
-  b()
-], k.prototype, "category", 2);
-_([
-  b()
-], k.prototype, "imageUrl", 2);
-_([
-  b()
-], k.prototype, "spriteIcon", 2);
-_([
-  b()
-], k.prototype, "index", 2);
-k = _([
-  O("maptiler-geocoder-feature-item")
-], k);
-const ft = "form{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text: #444952;--color-icon-button: #444952;pointer-events:all}form,form *,form *:after,form *:before{box-sizing:border-box}form.can-collapse{max-width:29px}form.can-collapse input::placeholder{transition:opacity .25s;opacity:0}form{width:270px;max-width:270px}form:focus-within,form:hover{width:270px;max-width:270px}form input::placeholder,form:focus-within input::placeholder,form:hover input::placeholder{opacity:1}input{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul,div.error,div.no-results{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error,div.no-results{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error div{flex-grow:1}div.error maptiler-geocode-fail-icon{flex-shrink:0;width:20px;height:20px}div.error button{flex-shrink:0}div.error button maptiler-geocode-clear-icon{--color-icon-button: #e25041}div.error button:hover maptiler-geocode-clear-icon,div.error button:active maptiler-geocode-clear-icon{--color-icon-button: inherit}div.no-results{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results maptiler-geocode-fail-icon{margin-top:4px;flex-shrink:0;width:20px;height:20px}ul.options.open-on-top{top:auto;bottom:calc(100% + 6px)}button{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button:hover{background-color:transparent}button:hover,button:active{--color-icon-button: #2b8bfb}.input-group{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group:focus-within{outline:#2b8bfb solid 2px}.search-button{flex-shrink:0}.clear-button-container{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable{display:flex;flex-shrink:0}:host(.maptiler-geocoder):not(:empty){box-shadow:none}:host(.maptiler-geocoder) .input-group{border:white solid 2px}:host(.maptiler-geocoder) .input-group:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}:host(.maptiler-geocoder) form.can-collapse{max-width:33px}:host(.maptiler-geocoder) form,:host(.maptiler-geocoder) form:focus-within,:host(.maptiler-geocoder) form:hover{width:270px;max-width:270px}:host(.leaflet-geocoder) .input-group{border:white solid 1px}:host(.leaflet-geocoder) form.can-collapse{max-width:30px}";
-var mt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, Ce = (t) => {
+], w.prototype, "iconsBaseUrl", 2);
+I([
+  x()
+], w.prototype, "category", 2);
+I([
+  x()
+], w.prototype, "imageUrl", 2);
+I([
+  x()
+], w.prototype, "spriteIcon", 2);
+I([
+  x()
+], w.prototype, "index", 2);
+w = I([
+  T("maptiler-geocoder-feature-item")
+], w);
+const wt = 'form{font-family:var(--font-family, "Open Sans", "Ubuntu", "Helvetica Neue", Arial, Helvetica, sans-serif);position:relative;background-color:var(--color-bg, #fff);z-index:10;border-radius:var(--radius, 4px);margin:0;transition:max-width .25s;box-shadow:var(--shadow, 0px 2px 5px rgba(51, 51, 89, .15));pointer-events:all}form,form *,form *:after,form *:before{box-sizing:border-box}form.can-collapse{max-width:var(--size-collapse-width, 29px)}form.can-collapse input::placeholder{transition:opacity .25s;opacity:0}form,form.can-collapse:focus-within,form.can-collapse:hover{width:var(--size-width, 270px);max-width:var(--size-width, 270px)}form input::placeholder,form:focus-within input::placeholder,form:hover input::placeholder{opacity:1}input{font:inherit;font-size:var(--font-size-input, 14px);flex-grow:1;min-height:var(--size-input-min-height, 29px);background-color:transparent;color:var(--color-input, #444952);white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input:focus{color:var(--color-input-focus, #444952);outline:0;box-shadow:none}ul,div.error,div.no-results{background-color:var(--color-bg-dropdown, #fff);border-radius:var(--radius-dropdown, 4px);left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul{font-size:var(--font-size-items, 14px);line-height:16px;box-shadow:var(--shadow-dropdown, 0px 5px 10px rgba(51, 51, 89, .15))}div.error,div.no-results{font:inherit;line-height:18px;font-size:var(--font-size-error, 12px);display:flex;gap:16px}div.error{padding:16px;font-weight:600;color:var(--color-error-text, #e25041);background-color:var(--color-error-bg, #fbeae8)}div.error div{flex-grow:1}div.error maptiler-geocode-fail-icon{flex-shrink:0;width:20px;height:20px}div.error button{flex-shrink:0}div.error button maptiler-geocode-clear-icon{--color-icon-button: var(--color-error-icon, #e25041)}div.error button:hover maptiler-geocode-clear-icon,div.error button:active maptiler-geocode-clear-icon{--color-icon-button: inherit}div.no-results{padding:14px 24px 14px 16px;font-weight:400;color:var(--color-no-results-text, #6b7c93);box-shadow:var(--shadow-dropdown, 0px 5px 10px rgba(51, 51, 89, .15))}div.no-results maptiler-geocode-fail-icon{margin-top:4px;flex-shrink:0;width:20px;height:20px}ul.options.open-on-top{top:auto;bottom:calc(100% + 6px)}button{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button:hover{background-color:transparent}button:hover,button:active{--color-icon-button: var(--color-icon-button-hover, #2b8bfb)}.input-group{display:flex;align-items:stretch;gap:var(--input-group-gap, 7px);padding:var(--input-group-padding, 0 8px);border-radius:var(--radius-input-group, 4px);overflow:hidden}.input-group:focus-within{outline:var(--color-focus-outline, #2b8bfb) solid var(--size-focus-outline, 2px)}.search-button{flex-shrink:0}.clear-button-container{display:none;position:relative;align-items:stretch}.clear-button-container.displayable{display:flex;flex-shrink:0}:host(.maptiler-geocoder):not(:empty){box-shadow:none}:host(.maptiler-geocoder) .input-group{border:var(--color-input-group-border, white solid 2px)}:host(.maptiler-geocoder) .input-group:focus-within{border:var(--color-input-group-border-focused, #2b8bfb solid 2px);outline:0}:host(.maptiler-geocoder) form.can-collapse{max-width:var(--size-collapse-width, 33px)}:host(.maptiler-geocoder) form,:host(.leaflet-geocoder) form,:host(.maptiler-geocoder) form.can-collapse:focus-within,:host(.leaflet-geocoder) form.can-collapse:focus-within,:host(.maptiler-geocoder) form.can-collapse:hover,:host(.leaflet-geocoder) form.can-collapse:hover{width:var(--size-width, 270px);max-width:var(--size-width, 270px)}:host(.leaflet-geocoder) .input-group{border:var(--color-input-group-border, white solid 1px)}:host(.leaflet-geocoder) form.can-collapse{max-width:var(--size-collapse-width, 30px)}';
+var kt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, ze = (t) => {
   throw TypeError(t);
-}, c = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? gt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+}, h = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? _t(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = (a ? r(e, i, s) : r(s)) || s);
-  return a && s && mt(e, i, s), s;
-}, pe = (t, e, i) => e.has(t) || Ce("Cannot " + i), w = (t, e, i) => (pe(t, e, "read from private field"), i ? i.call(t) : e.get(t)), U = (t, e, i) => e.has(t) ? Ce("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), oe = (t, e, i, a) => (pe(t, e, "write to private field"), e.set(t, i), i), h = (t, e, i) => (pe(t, e, "access private method"), i), N, B, ae, R, l, Z, Ee, de, x, ue, K, fe, me, $, ge, Q, Pe, le, Ue, Ge, Be, Re, ze, je, Ae;
+  return a && s && kt(e, i, s), s;
+}, me = (t, e, i) => e.has(t) || ze("Cannot " + i), k = (t, e, i) => (me(t, e, "read from private field"), i ? i.call(t) : e.get(t)), z = (t, e, i) => e.has(t) ? ze("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), ce = (t, e, i, a) => (me(t, e, "write to private field"), e.set(t, i), i), c = (t, e, i) => (me(t, e, "access private method"), i), Q, A, he, W, l, H, ge, b, ye, Y, ve, be, $, xe, J, Re, Ge, pe, je, Ae, We, De, Ve, qe, Ne, Ze, Ke, Qe, E, G;
+const we = "input:not([type]), input[type=text], input[type=search], select, textarea", X = "button, input[type=button]";
 let n = class extends F {
   constructor() {
-    super(...arguments), U(this, l), this.clearListOnPick = !1, this.clearOnBlur = !1, this.collapsed = !1, this.excludeTypes = !1, this.exhaustiveReverseGeocoding = !1, this.fetchFullGeometryOnPick = !1, this.keepListOpen = !1, this.openListOnTop = !1, this.reverseActive = !1, this.searchValue = "", this.selectedItemIndex = -1, this.cachedFeatures = [], this.lastSearchUrl = "", this.focused = !1, this.isFeatureListVisible = !1, this.isFeatureListInteractedWith = !1, U(this, N, !1), U(this, B), U(this, ae, /* @__PURE__ */ new Set()), U(this, R);
+    super(...arguments), z(this, l), this.clearListOnPick = !1, this.clearOnBlur = !1, this.collapsed = !1, this.excludeTypes = !1, this.exhaustiveReverseGeocoding = !1, this.fetchFullGeometryOnPick = !1, this.keepListOpen = !1, this.openListOnTop = !1, this.reverseActive = !1, this.searchValue = "", this.selectedItemIndex = -1, this.cachedFeatures = [], this.lastSearchUrl = "", this.focused = !1, this.isFeatureListVisible = !1, this.isFeatureListInteractedWith = !1, z(this, Q, !1), z(this, A), z(this, he, /* @__PURE__ */ new Set()), z(this, W);
+  }
+  get isLoading() {
+    return this.abortController !== void 0;
+  }
+  get input() {
+    for (const t of this.contentSlotElements) {
+      if (c(this, l, E).call(this, t)) return t;
+      const e = t.querySelector(we);
+      if (c(this, l, E).call(this, e)) return e;
+    }
+    return this.inputSlotElements[0];
   }
   firstUpdated() {
-    oe(this, N, !0);
+    ce(this, Q, !0), this.input && (this.input.value = this.searchValue);
   }
   /**
    * Set the options of this instance.
@@ -364,7 +376,7 @@ let n = class extends F {
   setOptions(t) {
     const e = { ...t };
     for (const i of Object.keys(e))
-      yt.includes(i) || delete e[i];
+      Lt.includes(i) || delete e[i];
     Object.assign(this, e);
   }
   /**
@@ -373,7 +385,7 @@ let n = class extends F {
    * @param value text to set
    */
   setQuery(t) {
-    h(this, l, me).call(this, t, { external: !0 }), h(this, l, fe).call(this);
+    c(this, l, be).call(this, t, { external: !0 }), c(this, l, ve).call(this);
   }
   /**
    * Set the content of search input box and immediately submit it.
@@ -381,13 +393,13 @@ let n = class extends F {
    * @param value text to set and submit
    */
   submitQuery(t) {
-    h(this, l, ge).call(this, t, { external: !0 });
+    c(this, l, xe).call(this, t, { external: !0 });
   }
   /**
    * Clear search result list.
    */
   clearList() {
-    h(this, l, $).call(this), this.picked = void 0, this.selectedItemIndex = -1;
+    c(this, l, $).call(this), this.picked = void 0, this.selectedItemIndex = -1;
   }
   /**
    * Focus the search input box.
@@ -395,13 +407,13 @@ let n = class extends F {
    * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   focus(t) {
-    this.input.focus(t);
+    this.input?.focus(t);
   }
   /**
    * Blur the search input box.
    */
   blur() {
-    this.input.blur();
+    this.input?.blur();
   }
   addEventListener(t, e, i) {
     super.addEventListener(t, e, i);
@@ -411,83 +423,101 @@ let n = class extends F {
   }
   /** @internal */
   handleMapChange(t) {
-    oe(this, R, t);
+    ce(this, W, t);
   }
   /** @internal */
   handleMapClick(t) {
-    this.reverseActive && h(this, l, Pe).call(this, t);
+    this.reverseActive && c(this, l, Re).call(this, t);
   }
   willUpdate(t) {
-    t.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), t.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((e) => t.has(e)) && this.picked && (this.clearListOnPick && h(this, l, $).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((e) => t.has(e)) && w(this, l, de) && (h(this, l, $).call(this), this.error = void 0), ["focused", "listIsInteractedWith"].some((e) => t.has(e)) && this.clearOnBlur && !this.focused && !this.isFeatureListInteractedWith && (this.searchValue = ""), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((e) => t.has(e)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((e) => t.has(e)) && h(this, l, x).call(this, "select", { feature: w(this, l, Z) }), ["picked"].some((e) => t.has(e)) && this.picked && this.picked.id !== t.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? h(this, l, Q).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
+    t.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), t.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((e) => t.has(e)) && this.picked && (this.clearListOnPick && c(this, l, $).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((e) => t.has(e)) && k(this, l, ge) && (c(this, l, $).call(this), this.error = void 0), ["focused", "listIsInteractedWith"].some((e) => t.has(e)) && this.clearOnBlur && !this.focused && !this.isFeatureListInteractedWith && (this.searchValue = ""), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((e) => t.has(e)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((e) => t.has(e)) && c(this, l, b).call(this, "select", { feature: k(this, l, H) }), ["picked"].some((e) => t.has(e)) && this.picked && this.picked.id !== t.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? c(this, l, J).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
       () => {
-        h(this, l, x).call(this, "pick", { feature: this.picked });
+        c(this, l, b).call(this, "pick", { feature: this.picked });
       },
       (e) => {
-        e && typeof e == "object" && "name" in e && e.name === "AbortError" || (this.error = e, h(this, l, x).call(this, "pick", { feature: this.picked }));
+        e && typeof e == "object" && "name" in e && e.name === "AbortError" || (this.error = e, c(this, l, b).call(this, "pick", { feature: this.picked }));
       }
-    ), ["listFeatures", "focused", "isFeatureListInteractedWith", "keepListOpen"].some((e) => t.has(e)) && (this.isFeatureListVisible = !!this.listFeatures?.length && (this.focused || this.isFeatureListInteractedWith || this.keepListOpen)), ["isFeatureListVisible"].some((e) => t.has(e)) && (this.isFeatureListVisible ? h(this, l, x).call(this, "featuresshow") : h(this, l, x).call(this, "featureshide")), ["reverseActive"].some((e) => t.has(e)) && h(this, l, x).call(this, "reversetoggle", { reverse: this.reverseActive });
+    ), ["listFeatures", "focused", "isFeatureListInteractedWith", "keepListOpen"].some((e) => t.has(e)) && (this.isFeatureListVisible = !!this.listFeatures?.length && (this.focused || this.isFeatureListInteractedWith || this.keepListOpen)), ["isFeatureListVisible"].some((e) => t.has(e)) && (this.isFeatureListVisible ? c(this, l, b).call(this, "featuresshow") : c(this, l, b).call(this, "featureshide")), ["reverseActive"].some((e) => t.has(e)) && c(this, l, b).call(this, "reversetoggle", { reverse: this.reverseActive }), ["searchValue"].some((e) => t.has(e)) && this.input && (this.input.value = this.searchValue);
   }
   render() {
     return m`
-      <form @submit=${h(this, l, ue)} class=${A({ "can-collapse": this.collapsed && this.searchValue === "" })}>
-        <div class="input-group">
-          <button
-            class="search-button"
-            type="button"
-            @click=${() => {
-      this.input.focus();
-    }}
-          >
-            <maptiler-geocode-search-icon></maptiler-geocode-search-icon>
-          </button>
+      <form
+        class=${q({ "can-collapse": this.collapsed && this.searchValue === "" })}
+        @submit=${c(this, l, ye)}
+        @focusin=${c(this, l, We)}
+        @focusout=${c(this, l, De)}
+        @click=${c(this, l, Ge)}
+        @keydown=${c(this, l, pe)}
+        @input=${c(this, l, je)}
+        @change=${c(this, l, Ae)}
+      >
+        <slot name="content">
+          <div class="input-group">
+            <slot name="start"></slot>
 
-          <input
-            .value=${this.searchValue}
-            @focus=${() => this.focused = !0}
-            @blur=${() => this.focused = !1}
-            @click=${() => this.focused = !0}
-            @keydown=${h(this, l, le)}
-            @input=${h(this, l, Ue)}
-            @change=${() => this.picked = void 0}
-            placeholder=${this.placeholder ?? "Search"}
-            aria-label=${this.placeholder ?? "Search"}
-          />
+            <slot name="search-button">
+              <button class="search-button" type="button">
+                <slot name="search-icon">
+                  <maptiler-geocode-search-icon></maptiler-geocode-search-icon>
+                </slot>
+              </button>
+            </slot>
 
-          <div class="clear-button-container ${A({ displayable: this.searchValue !== "" })}">
-            ${w(this, l, Ee) ? m`<maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>` : m`
-                  <button type="button" @click=${h(this, l, Ae)} title=${this.clearButtonTitle ?? "clear"}>
-                    <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
-                  </button>
-                `}
-          </div>
+            <slot name="input">
+              <input placeholder=${this.placeholder ?? "Search"} aria-label=${this.placeholder ?? "Search"} />
+            </slot>
 
-          ${this.enableReverse === "button" ? m`
-                <button
-                  type="button"
-                  class=${A({ active: this.reverseActive })}
-                  title=${this.reverseButtonTitle ?? "toggle reverse geocoding"}
-                  @click=${() => this.reverseActive = !this.reverseActive}
-                >
-                  <maptiler-geocode-reverse-geocoding-icon></maptiler-geocode-reverse-geocoding-icon>
-                </button>
-              ` : J}
+            <div class="clear-button-container ${q({ displayable: this.searchValue !== "" })}">
+              ${this.isLoading ? m`
+                    <slot name="loading-icon">
+                      <maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>
+                    </slot>
+                  ` : m`
+                    <slot name="clear-button">
+                      <button type="button" title=${this.clearButtonTitle ?? "clear"}>
+                        <slot name="clear-icon">
+                          <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
+                        </slot>
+                      </button>
+                    </slot>
+                  `}
+            </div>
 
-          <!-- <slot /> -->
-        </div>
+            ${this.enableReverse === "button" ? m`
+                  <slot name="reverse-button">
+                    <button type="button" class=${q({ active: this.reverseActive })} title=${this.reverseButtonTitle ?? "toggle reverse geocoding"}>
+                      <slot name="reverse-icon">
+                        <maptiler-geocode-reverse-geocoding-icon></maptiler-geocode-reverse-geocoding-icon>
+                      </slot>
+                    </button>
+                  </slot>
+                ` : ie}
+
+            <slot name="end"></slot>
+          </div>
+        </slot>
 
         ${this.error ? m`
               <div class="error">
-                <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+                <slot name="error-icon">
+                  <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+                </slot>
 
                 <div>${this.errorMessage ?? "Something went wrong…"}</div>
 
-                <button @click=${() => this.error = void 0}>
-                  <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
-                </button>
+                <slot name="clear-error-button">
+                  <button>
+                    <slot name="clear-error-icon">
+                      <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
+                    </slot>
+                  </button>
+                </slot>
               </div>
-            ` : !this.focused && !this.isFeatureListInteractedWith && !this.keepListOpen || this.listFeatures === void 0 ? J : this.listFeatures.length === 0 ? m`
+            ` : !this.focused && !this.isFeatureListInteractedWith && !this.keepListOpen || this.listFeatures === void 0 ? ie : this.listFeatures.length === 0 ? m`
                   <div class="no-results">
-                    <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+                    <slot name="no-results-icon">
+                      <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+                    </slot>
 
                     <div>
                       ${this.noResultsMessage ?? "Oops! Looks like you're trying to predict something that's not quite right. We can't seem to find what you're looking for. Maybe try double-checking your spelling or try a different search term. Keep on typing - we'll do our best to get you where you need to go!"}
@@ -495,14 +525,14 @@ let n = class extends F {
                   </div>
                 ` : m`
                   <ul
-                    class="options ${A({ "open-on-top": this.openListOnTop })}"
-                    @pointerleave=${h(this, l, Re)}
-                    @pointerdown=${h(this, l, ze)}
-                    @pointerup=${h(this, l, je)}
-                    @keydown=${h(this, l, le)}
+                    class="options ${q({ "open-on-top": this.openListOnTop })}"
+                    @pointerleave=${c(this, l, Ne)}
+                    @pointerdown=${c(this, l, Ze)}
+                    @pointerup=${c(this, l, Ke)}
+                    @keydown=${c(this, l, pe)}
                     role="listbox"
                   >
-                    ${qe(
+                    ${Je(
       this.listFeatures,
       (t) => t.id + (t.address ? "," + t.address : ""),
       (t, e) => m`
@@ -511,13 +541,13 @@ let n = class extends F {
                           .showPlaceType=${this.showPlaceType ?? "if-needed"}
                           itemStyle=${this.selectedItemIndex === e ? "selected" : this.picked?.id === t.id ? "picked" : "default"}
                           @pointerenter=${() => {
-        h(this, l, Be).call(this, e);
+        c(this, l, qe).call(this, e);
       }}
                           @select=${() => {
-        h(this, l, Ge).call(this, t);
+        c(this, l, Ve).call(this, t);
       }}
-                          .missingIconsCache=${w(this, ae)}
-                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0-rc.9/icons/"}
+                          .missingIconsCache=${k(this, he)}
+                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.1.0-rc.1/icons/"}
                         />
                       `
     )}
@@ -527,22 +557,19 @@ let n = class extends F {
     `;
   }
 };
-N = /* @__PURE__ */ new WeakMap();
-B = /* @__PURE__ */ new WeakMap();
-ae = /* @__PURE__ */ new WeakMap();
-R = /* @__PURE__ */ new WeakMap();
+Q = /* @__PURE__ */ new WeakMap();
+A = /* @__PURE__ */ new WeakMap();
+he = /* @__PURE__ */ new WeakMap();
+W = /* @__PURE__ */ new WeakMap();
 l = /* @__PURE__ */ new WeakSet();
-Z = function() {
+H = function() {
   return this.listFeatures?.[this.selectedItemIndex];
 };
-Ee = function() {
-  return this.abortController !== void 0;
-};
-de = function() {
+ge = function() {
   return this.searchValue.length < (this.minLength ?? 2);
 };
-x = function(t, ...[e]) {
-  w(this, N) && this.dispatchEvent(
+b = function(t, ...[e]) {
+  k(this, Q) && this.dispatchEvent(
     new CustomEvent(t, {
       bubbles: !0,
       composed: !0,
@@ -550,78 +577,78 @@ x = function(t, ...[e]) {
     })
   );
 };
-ue = function(t, { external: e = !1 } = {}) {
-  t?.preventDefault(), this.focused = !1, clearTimeout(w(this, B)), this.selectedItemIndex > -1 && this.listFeatures ? (this.picked = this.listFeatures[this.selectedItemIndex], this.searchValue = this.picked.place_type[0] === "reverse" ? this.picked.place_name : this.picked.place_name.replace(/,.*/, ""), this.error = void 0, this.selectedItemIndex = -1) : this.searchValue && h(this, l, Q).call(this, this.searchValue, { exact: !0, external: e }).then(() => {
+ye = function(t, { external: e = !1 } = {}) {
+  t?.preventDefault(), this.focused = !1, clearTimeout(k(this, A)), this.selectedItemIndex > -1 && this.listFeatures ? (this.picked = this.listFeatures[this.selectedItemIndex], this.searchValue = this.picked.place_type[0] === "reverse" ? this.picked.place_name : this.picked.place_name.replace(/,.*/, ""), this.error = void 0, this.selectedItemIndex = -1) : this.searchValue && c(this, l, J).call(this, this.searchValue, { exact: !0, external: e }).then(() => {
     this.picked = void 0;
   }).catch((i) => this.error = i);
 };
-K = function(t) {
+Y = function(t) {
   try {
-    return Ve(t, 6);
+    return Ye(t, 6);
   } catch {
     return !1;
   }
 };
-fe = function() {
+ve = function() {
   setTimeout(() => {
-    this.input.focus(), this.focused = !0, this.input.select();
+    this.input?.focus(), this.focused = !0, this.input instanceof HTMLSelectElement ? this.input.showPicker() : this.input?.select();
   });
 };
-me = function(t, { external: e = !1 } = {}) {
-  if (this.searchValue = t, h(this, l, x).call(this, "querychange", { query: this.searchValue, reverseCoords: h(this, l, K).call(this, t) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
-    if (clearTimeout(w(this, B)), w(this, l, de))
+be = function(t, { external: e = !1 } = {}) {
+  if (this.searchValue = t, c(this, l, b).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, l, Y).call(this, t) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
+    if (clearTimeout(k(this, A)), k(this, l, ge))
       return;
     const i = this.searchValue;
-    oe(this, B, window.setTimeout(() => {
-      h(this, l, Q).call(this, i, { external: e }).catch((a) => this.error = a);
+    ce(this, A, window.setTimeout(() => {
+      c(this, l, J).call(this, i, { external: e }).catch((a) => this.error = a);
     }, this.debounceSearch ?? 200));
   } else
-    h(this, l, $).call(this);
+    c(this, l, $).call(this);
 };
 $ = function() {
-  this.listFeatures !== void 0 && (this.listFeatures = void 0, h(this, l, x).call(this, "featuresclear"));
+  this.listFeatures !== void 0 && (this.listFeatures = void 0, c(this, l, b).call(this, "featuresclear"));
 };
-ge = function(t, { external: e = !1 } = {}) {
-  this.searchValue = t, h(this, l, x).call(this, "querychange", { query: this.searchValue, reverseCoords: h(this, l, K).call(this, t) }), this.selectedItemIndex = -1, h(this, l, ue).call(this, void 0, { external: e });
+xe = function(t, { external: e = !1 } = {}) {
+  this.searchValue = t, c(this, l, b).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, l, Y).call(this, t) }), this.selectedItemIndex = -1, c(this, l, ye).call(this, void 0, { external: e });
 };
-Q = async function(t, { byId: e = !1, exact: i = !1, external: a = !1 } = {}) {
+J = async function(t, { byId: e = !1, exact: i = !1, external: a = !1 } = {}) {
   this.error = void 0, this.abortController?.abort();
   const s = new AbortController();
   this.abortController = s;
   try {
-    const o = this.apiUrl ?? "https://api.maptiler.com/geocoding", r = h(this, l, K).call(this, t), u = new URL(o + "/" + encodeURIComponent(r ? `${r.decimalLongitude},${r.decimalLatitude}` : t) + ".json"), y = u.searchParams;
+    const o = this.apiUrl ?? "https://api.maptiler.com/geocoding", r = c(this, l, Y).call(this, t), u = new URL(o + "/" + encodeURIComponent(r ? `${r.decimalLongitude},${r.decimalLatitude}` : t) + ".json"), y = u.searchParams;
     this.language !== void 0 && y.set("language", Array.isArray(this.language) ? this.language.join(",") : this.language ?? "");
-    const [M] = w(this, R) ?? [void 0];
-    let L = (!r || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
+    const [M] = k(this, W) ?? [void 0];
+    let _ = (!r || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
       (v) => typeof v == "string" ? v : M === void 0 || (v[0] ?? 0) <= M && M < (v[1] ?? 1 / 0) ? v[2] : void 0
     ).filter((v) => v !== void 0);
-    L && (L = [...new Set(L)], y.set("types", L.join(",")));
-    const ye = !r || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
-    if (ye && y.set("excludeTypes", String(ye)), this.bbox && y.set("bbox", this.bbox.map((v) => v.toFixed(6)).join(",")), this.country && y.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && y.set("worldview", this.worldview), !e && !r) {
-      const v = this.proximity ?? [{ type: "server-geolocation" }], xe = await ct(w(this, R), v, s);
-      xe && y.set("proximity", xe), (i || this.showResultsWhileTyping === !1) && y.set("autocomplete", "false"), y.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
+    _ && (_ = [...new Set(_)], y.set("types", _.join(",")));
+    const ke = !r || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
+    if (ke && y.set("excludeTypes", String(ke)), this.bbox && y.set("bbox", this.bbox.map((v) => v.toFixed(6)).join(",")), this.country && y.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && y.set("worldview", this.worldview), !e && !r) {
+      const v = this.proximity ?? [{ type: "server-geolocation" }], Le = await gt(k(this, W), v, s);
+      Le && y.set("proximity", Le), (i || this.showResultsWhileTyping === !1) && y.set("autocomplete", "false"), y.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
     }
-    const ve = this.limit ?? 5, Y = this.reverseGeocodingLimit ?? ve;
-    Y > 1 && L?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), r ? (Y === 1 || this.exhaustiveReverseGeocoding || L?.length === 1) && y.set("limit", String(Y)) : y.set("limit", String(ve)), this.apiKey && y.set("key", this.apiKey), this.adjustUrl?.(u);
-    const We = u.searchParams.get("types") === "" && u.searchParams.get("excludeTypes") !== "true", j = u.toString();
-    if (j === this.lastSearchUrl) {
-      e ? (this.clearListOnPick && h(this, l, $).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, h(this, l, x).call(this, "featureslisted", { features: this.listFeatures, external: a }), this.listFeatures[this.selectedItemIndex]?.id !== w(this, l, Z)?.id && (this.selectedItemIndex = -1));
+    const _e = this.limit ?? 5, ee = this.reverseGeocodingLimit ?? _e;
+    ee > 1 && _?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), r ? (ee === 1 || this.exhaustiveReverseGeocoding || _?.length === 1) && y.set("limit", String(ee)) : y.set("limit", String(_e)), this.apiKey && y.set("key", this.apiKey), this.adjustUrl?.(u);
+    const He = u.searchParams.get("types") === "" && u.searchParams.get("excludeTypes") !== "true", V = u.toString();
+    if (V === this.lastSearchUrl) {
+      e ? (this.clearListOnPick && c(this, l, $).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, c(this, l, b).call(this, "featureslisted", { features: this.listFeatures, external: a }), this.listFeatures[this.selectedItemIndex]?.id !== k(this, l, H)?.id && (this.selectedItemIndex = -1));
       return;
     }
-    h(this, l, x).call(this, "request", { urlObj: u }), this.lastSearchUrl = j;
-    let E;
-    if (We)
-      E = { type: "FeatureCollection", features: [] };
+    c(this, l, b).call(this, "request", { urlObj: u }), this.lastSearchUrl = V;
+    let U;
+    if (He)
+      U = { type: "FeatureCollection", features: [] };
     else {
-      const v = await fetch(j, {
+      const v = await fetch(V, {
         signal: s.signal,
         ...this.fetchParameters
       });
       if (!v.ok)
         throw new Error(await v.text());
-      E = await v.json();
+      U = await v.json();
     }
-    h(this, l, x).call(this, "response", { url: j, featureCollection: E }), e ? (this.clearListOnPick && h(this, l, $).call(this), this.picked = E.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = E.features.filter(this.filter ?? (() => !0)), r && this.listFeatures.unshift({
+    c(this, l, b).call(this, "response", { url: V, featureCollection: U }), e ? (this.clearListOnPick && c(this, l, $).call(this), this.picked = U.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = U.features.filter(this.filter ?? (() => !0)), r && this.listFeatures.unshift({
       type: "Feature",
       properties: {},
       /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -637,7 +664,7 @@ Q = async function(t, { byId: e = !1, exact: i = !1, external: a = !1 } = {}) {
         type: "Point",
         coordinates: [r.decimalLongitude, r.decimalLatitude]
       }
-    }), h(this, l, x).call(this, "featureslisted", { features: this.listFeatures, external: a }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== w(this, l, Z)?.id && (this.selectedItemIndex = -1), r && this.input.focus());
+    }), c(this, l, b).call(this, "featureslisted", { features: this.listFeatures, external: a }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== k(this, l, H)?.id && (this.selectedItemIndex = -1), r && this.input?.focus());
   } catch (o) {
     if (o && typeof o == "object" && "name" in o && o.name === "AbortError")
       return;
@@ -646,192 +673,237 @@ Q = async function(t, { byId: e = !1, exact: i = !1, external: a = !1 } = {}) {
     s === this.abortController && (this.abortController = void 0);
   }
 };
-Pe = function(t) {
-  this.reverseActive = this.enableReverse === "always", h(this, l, $).call(this), this.picked = void 0, h(this, l, ge).call(this, `${t[1].toFixed(6)}, ${nt(t[0], [-180, 180], !0).toFixed(6)}`), h(this, l, fe).call(this);
+Re = function(t) {
+  this.reverseActive = this.enableReverse === "always", c(this, l, $).call(this), this.picked = void 0, c(this, l, xe).call(this, `${t[1].toFixed(6)}, ${mt(t[0], [-180, 180], !0).toFixed(6)}`), c(this, l, ve).call(this);
+};
+Ge = function(t) {
+  c(this, l, E).call(this, t.target) ? this.focused = !0 : c(this, l, G).call(this, t.target, this.searchButtonElements, this.searchIconElements, "search-button") ? this.input?.focus() : c(this, l, G).call(this, t.target, this.clearButtonElements, this.clearIconElements, "clear-button") ? c(this, l, Qe).call(this) : c(this, l, G).call(this, t.target, this.reverseButtonElements, this.reverseIconElements, "reverse-button") ? this.reverseActive = !this.reverseActive : c(this, l, G).call(this, t.target, this.clearErrorButtonElements, this.clearErrorIconElements, "clear-error-button") && (this.error = void 0);
 };
-le = function(t) {
+pe = function(t) {
   if (!this.listFeatures)
     return;
   const e = t.key === "ArrowDown" ? 1 : t.key === "ArrowUp" ? -1 : 0;
-  e && (this.input.focus(), this.focused = !0, t.preventDefault(), this.picked && this.selectedItemIndex === -1 && (this.selectedItemIndex = this.listFeatures.findIndex((i) => i.id === this.picked?.id)), this.selectedItemIndex === (this.picked || this.selectFirst !== !1 ? 0 : -1) && e === -1 && (this.selectedItemIndex = this.listFeatures.length), this.selectedItemIndex += e, this.selectedItemIndex >= this.listFeatures.length && (this.selectedItemIndex = -1), this.selectedItemIndex < 0 && (this.picked || this.selectFirst !== !1) && (this.selectedItemIndex = 0));
+  e && (this.input?.focus(), this.focused = !0, t.preventDefault(), this.picked && this.selectedItemIndex === -1 && (this.selectedItemIndex = this.listFeatures.findIndex((i) => i.id === this.picked?.id)), this.selectedItemIndex === (this.picked || this.selectFirst !== !1 ? 0 : -1) && e === -1 && (this.selectedItemIndex = this.listFeatures.length), this.selectedItemIndex += e, this.selectedItemIndex >= this.listFeatures.length && (this.selectedItemIndex = -1), this.selectedItemIndex < 0 && (this.picked || this.selectFirst !== !1) && (this.selectedItemIndex = 0));
 };
-Ue = function(t) {
-  h(this, l, me).call(this, t.target.value);
+je = function(t) {
+  c(this, l, E).call(this, t.target) && c(this, l, be).call(this, t.target.value);
 };
-Ge = function(t) {
+Ae = function(t) {
+  c(this, l, E).call(this, t.target) && (this.picked = void 0);
+};
+We = function(t) {
+  c(this, l, E).call(this, t.target) && (this.focused = !0);
+};
+De = function(t) {
+  c(this, l, E).call(this, t.target) && (this.focused = !1);
+};
+Ve = function(t) {
   (!this.picked || this.picked.id !== t.id) && (this.picked = t, this.searchValue = t.place_name);
 };
-Be = function(t) {
+qe = function(t) {
   this.selectedItemIndex = t;
 };
-Re = function() {
+Ne = function() {
   (!this.selectFirst || this.picked) && (this.selectedItemIndex = -1), this.isFeatureListInteractedWith && (this.isFeatureListInteractedWith = !1);
 };
-ze = function() {
+Ze = function() {
   this.isFeatureListInteractedWith = !0;
 };
-je = function() {
+Ke = function() {
   setTimeout(() => {
     this.isFeatureListInteractedWith = !1;
   });
 };
-Ae = function() {
-  this.searchValue = "", h(this, l, x).call(this, "queryclear"), this.picked = void 0, this.input.focus();
+Qe = function() {
+  this.searchValue = "", c(this, l, b).call(this, "queryclear"), this.picked = void 0, this.input?.focus();
+};
+E = function(t) {
+  return t instanceof HTMLElement && t.matches(we);
+};
+G = function(t, e, i, a) {
+  return t instanceof HTMLElement && ([...e, ...i].some((s) => s.contains(t)) || t.closest(`[data-${a}]`) !== null);
 };
-n.styles = I`
-    ${ce(ft)}
+n.styles = O`
+    ${ue(wt)}
   `;
-c([
+h([
   p({ attribute: !1 })
 ], n.prototype, "adjustUrl", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "apiKey", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "apiUrl", 2);
-c([
+h([
   p({ type: Array })
 ], n.prototype, "bbox", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "clearButtonTitle", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "clearListOnPick", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "clearOnBlur", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "collapsed", 2);
-c([
+h([
   p({ attribute: !1 })
 ], n.prototype, "country", 2);
-c([
+h([
   p({ type: Number })
 ], n.prototype, "debounceSearch", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "enableReverse", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "errorMessage", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "excludeTypes", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "exhaustiveReverseGeocoding", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "fetchFullGeometryOnPick", 2);
-c([
+h([
   p({ type: Object })
 ], n.prototype, "fetchParameters", 2);
-c([
+h([
   p({ attribute: !1 })
 ], n.prototype, "filter", 2);
-c([
+h([
   p({ type: Object })
 ], n.prototype, "fuzzyMatch", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "iconsBaseUrl", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "keepListOpen", 2);
-c([
+h([
   p({ attribute: !1 })
 ], n.prototype, "language", 2);
-c([
+h([
   p({ type: Number })
 ], n.prototype, "limit", 2);
-c([
+h([
   p({ type: Number })
 ], n.prototype, "minLength", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "noResultsMessage", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "openListOnTop", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "placeholder", 2);
-c([
+h([
   p({ type: Array })
 ], n.prototype, "proximity", 2);
-c([
+h([
   p({ type: Boolean })
 ], n.prototype, "reverseActive", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "reverseButtonTitle", 2);
-c([
+h([
   p({ type: Object })
 ], n.prototype, "reverseGeocodingExcludeTypes", 2);
-c([
+h([
   p({ type: Number })
 ], n.prototype, "reverseGeocodingLimit", 2);
-c([
+h([
   p({ type: Array })
 ], n.prototype, "reverseGeocodingTypes", 2);
-c([
+h([
   p({ type: Object })
 ], n.prototype, "selectFirst", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "showPlaceType", 2);
-c([
+h([
   p({ type: Object })
 ], n.prototype, "showResultsWhileTyping", 2);
-c([
+h([
   p({ type: Array })
 ], n.prototype, "types", 2);
-c([
+h([
   p({ type: String })
 ], n.prototype, "worldview", 2);
-c([
-  De("input")
-], n.prototype, "input", 2);
-c([
-  b()
+h([
+  L({ slot: "content", flatten: !1 })
+], n.prototype, "contentSlotElements", 2);
+h([
+  L({ slot: "input", flatten: !0, selector: we })
+], n.prototype, "inputSlotElements", 2);
+h([
+  L({ slot: "search-button", flatten: !0, selector: X })
+], n.prototype, "searchButtonElements", 2);
+h([
+  L({ slot: "clear-button", flatten: !0, selector: X })
+], n.prototype, "clearButtonElements", 2);
+h([
+  L({ slot: "reverse-button", flatten: !0, selector: X })
+], n.prototype, "reverseButtonElements", 2);
+h([
+  L({ slot: "clear-error-button", flatten: !0, selector: X })
+], n.prototype, "clearErrorButtonElements", 2);
+h([
+  L({ slot: "search-icon", flatten: !0 })
+], n.prototype, "searchIconElements", 2);
+h([
+  L({ slot: "clear-icon", flatten: !0 })
+], n.prototype, "clearIconElements", 2);
+h([
+  L({ slot: "reverse-icon", flatten: !0 })
+], n.prototype, "reverseIconElements", 2);
+h([
+  L({ slot: "clear-error-icon", flatten: !0 })
+], n.prototype, "clearErrorIconElements", 2);
+h([
+  x()
 ], n.prototype, "searchValue", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "listFeatures", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "selectedItemIndex", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "picked", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "cachedFeatures", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "lastSearchUrl", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "error", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "abortController", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "focused", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "isFeatureListVisible", 2);
-c([
-  b()
+h([
+  x()
 ], n.prototype, "isFeatureListInteractedWith", 2);
-n = c([
-  O("maptiler-geocoder")
+n = h([
+  T("maptiler-geocoder")
 ], n);
-const yt = [
+const Lt = [
   "adjustUrl",
   "apiKey",
   "apiUrl",
@@ -869,15 +941,15 @@ const yt = [
   "types",
   "reverseGeocodingTypes",
   "worldview"
-], vt = "svg{display:block;fill:var(--maptiler-geocode-marker-fill, #3170fe);stroke:var(--maptiler-geocode-marker-stroke, #3170fe);height:30px}:host(.marker-selected){z-index:2}:host(.marker-selected) svg path{fill:var(--maptiler-geocode-marker-selected-fill, #98b7ff);stroke:var(--maptiler-geocode-marker-selected-stroke, #3170fe)}:host(.marker-reverse) svg path{fill:var(--maptiler-geocode-marker-reverse-fill, silver);stroke:var(--maptiler-geocode-marker-reverse-stroke, gray)}:host(.marker-interactive){cursor:pointer!important}:host(.marker-fuzzy) svg path{fill:var(--maptiler-geocode-marker-fuzzy-fill, silver);stroke:var(--maptiler-geocode-marker-fuzzy-stroke, gray)}:host(.marker-fuzzy.marker-selected) svg path{fill:var(--maptiler-geocode-marker-selected-fuzzy-fill, #ddd);stroke:var(--maptiler-geocode-marker-selected-fuzzy-stroke, silver)}";
-var xt = Object.getOwnPropertyDescriptor, bt = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? xt(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+], It = "svg{display:block;fill:var(--maptiler-geocode-marker-fill, #3170fe);stroke:var(--maptiler-geocode-marker-stroke, #3170fe);height:30px}:host(.marker-selected){z-index:2}:host(.marker-selected) svg path{fill:var(--maptiler-geocode-marker-selected-fill, #98b7ff);stroke:var(--maptiler-geocode-marker-selected-stroke, #3170fe)}:host(.marker-reverse) svg path{fill:var(--maptiler-geocode-marker-reverse-fill, silver);stroke:var(--maptiler-geocode-marker-reverse-stroke, gray)}:host(.marker-interactive){cursor:pointer!important}:host(.marker-fuzzy) svg path{fill:var(--maptiler-geocode-marker-fuzzy-fill, silver);stroke:var(--maptiler-geocode-marker-fuzzy-stroke, gray)}:host(.marker-fuzzy.marker-selected) svg path{fill:var(--maptiler-geocode-marker-selected-fuzzy-fill, #ddd);stroke:var(--maptiler-geocode-marker-selected-fuzzy-stroke, silver)}";
+var $t = Object.getOwnPropertyDescriptor, Et = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? $t(e, i) : e, o = t.length - 1, r; o >= 0; o--)
     (r = t[o]) && (s = r(s) || s);
   return s;
 };
-let ne = class extends F {
+let de = class extends F {
   render() {
-    return z`
+    return D`
       <svg
         viewBox="0 0 70 85"
         fill="none"
@@ -891,17 +963,17 @@ let ne = class extends F {
     `;
   }
 };
-ne.styles = I`
-    ${ce(vt)}
+de.styles = O`
+    ${ue(It)}
   `;
-ne = bt([
-  O("maptiler-geocode-marker")
-], ne);
-const wt = "@maptiler/geocoding-control", kt = "3.0.0-rc.9";
-function we(t) {
-  const e = Ye(
-    D([
-      Ke([
+de = Et([
+  T("maptiler-geocode-marker")
+], de);
+const Ot = "@maptiler/geocoding-control", Ft = "3.1.0-rc.1";
+function $e(t) {
+  const e = st(
+    Z([
+      tt([
         [
           [180, 90],
           [-180, 90],
@@ -916,22 +988,22 @@ function we(t) {
   if (!e)
     return;
   e.properties = { isMask: !0 };
-  const i = V(be(t)), a = (i[2] - i[0]) / 360 / 1e3, s = i[0] < -180, o = i[2] > 180, r = He(t);
+  const i = K(Ie(t)), a = (i[2] - i[0]) / 360 / 1e3, s = i[0] < -180, o = i[2] > 180, r = rt(t);
   if (r.features.length > 1 && (s || o))
     for (const u of r.features) {
-      const y = V(be(u));
+      const y = K(Ie(u));
       if (o && y[0] < -180 + a)
         for (const M of u.geometry.coordinates)
-          for (const L of M)
-            L[0] += 360 - a;
+          for (const _ of M)
+            _[0] += 360 - a;
       if (s && y[2] > 180 - a)
         for (const M of u.geometry.coordinates)
-          for (const L of M)
-            L[0] -= 360 - a;
+          for (const _ of M)
+            _[0] -= 360 - a;
     }
-  return D([r.features.length < 2 ? t : _e(r) ?? t, e]);
+  return Z([r.features.length < 2 ? t : Fe(r) ?? t, e]);
 }
-const Lt = {
+const Tt = {
   continental_marine: 4,
   country: 4,
   major_landform: 8,
@@ -955,7 +1027,7 @@ const Lt = {
   "poi.restaurant": 18,
   "poi.aerodrome": 13
   // TODO add many more
-}, _t = {
+}, Mt = {
   fill: {
     paint: {
       "fill-color": "#000",
@@ -974,8 +1046,8 @@ const Lt = {
     },
     filter: ["!", ["has", "isMask"]]
   }
-}, W = "mtlr-gc-full-geom", ke = "mtlr-gc-full-geom-fill", Le = "mtlr-gc-full-geom-line";
-class $t extends H.Evented {
+}, N = "mtlr-gc-full-geom", Ee = "mtlr-gc-full-geom-fill", Oe = "mtlr-gc-full-geom-line";
+class St extends te.Evented {
   #e = {};
   #t;
   #i;
@@ -990,7 +1062,7 @@ class $t extends H.Evented {
   }
   /** @internal Not to be called directly */
   onRemove() {
-    this.#L(), this.#t = void 0, this.#i = void 0;
+    this.#_(), this.#t = void 0, this.#i = void 0;
   }
   getOptions() {
     return { ...this.#e };
@@ -1051,11 +1123,11 @@ class $t extends H.Evented {
     },
     select: (e) => {
       const i = e.detail.feature;
-      i && this.#d && this.#e.flyToSelected && this.#x(i.center, this.#h(i)), this.#o && i && this.#O(i), this.#s("select", e.detail);
+      i && this.#d && this.#e.flyToSelected && this.#b(i.center, this.#h(i)), this.#o && i && this.#O(i), this.#s("select", e.detail);
     },
     pick: (e) => {
       const i = e.detail.feature;
-      i && i.id !== this.#m && this.#d && (this.#_(i), this.#p(this.#o, i)), this.#m = i?.id, this.#s("pick", e.detail);
+      i && i.id !== this.#m && this.#d && (this.#L(i), this.#p(this.#o, i)), this.#m = i?.id, this.#s("pick", e.detail);
     },
     featuresshow: () => {
       this.#s("featuresshow");
@@ -1065,7 +1137,7 @@ class $t extends H.Evented {
     },
     featureslisted: (e) => {
       const i = e.detail.features;
-      this.#o = i, this.#p(this.#o, void 0), this.#$(e), this.#s("featureslisted", e.detail);
+      this.#o = i, this.#p(this.#o, void 0), this.#I(e), this.#s("featureslisted", e.detail);
     },
     featuresclear: () => {
       this.#o = void 0, this.#p(void 0, void 0), this.#s("featuresclear");
@@ -1102,7 +1174,7 @@ class $t extends H.Evented {
         this.#t.on(e, i);
     }
   }
-  #L() {
+  #_() {
     if (!(!this.#i || !this.#t)) {
       for (const [e, i] of Object.entries(this.#g))
         this.#i.removeEventListener(e, i);
@@ -1113,22 +1185,22 @@ class $t extends H.Evented {
   #s(e, i) {
     return super.fire({ type: e, ...i ?? {} });
   }
-  #_(e) {
-    e.bbox[0] === e.bbox[2] && e.bbox[1] === e.bbox[3] ? this.#x(e.center, this.#h(e)) : this.#b(V(e.bbox), 50, this.#h(e));
+  #L(e) {
+    e.bbox[0] === e.bbox[2] && e.bbox[1] === e.bbox[3] ? this.#b(e.center, this.#h(e)) : this.#x(K(e.bbox), 50, this.#h(e));
   }
-  #$({ detail: { features: e, external: i } }) {
+  #I({ detail: { features: e, external: i } }) {
     if (!e || e.length === 0 || !this.#d || this.#e.flyToFeatures === !1 || this.#e.flyToFeatures === "never" || !i && (this.#e.flyToFeatures === void 0 || this.#e.flyToFeatures === "external"))
       return;
     const a = e.every((r) => r.matching_text), s = e.reduce(
       (r, u) => a || !u.matching_text ? [Math.min(r[0], u.bbox[0]), Math.min(r[1], u.bbox[1]), Math.max(r[2], u.bbox[2]), Math.max(r[3], u.bbox[3])] : r,
       [180, 90, -180, -90]
     ), o = e.map((r) => this.#h(r)).filter((r) => r !== void 0).reduce((r, u) => r === void 0 ? u : Math.max(r, u), void 0);
-    this.#b(V(s), 50, o);
+    this.#x(K(s), 50, o);
   }
   #h(e) {
     if (e.bbox[0] !== e.bbox[2] || e.bbox[1] !== e.bbox[3])
       return;
-    const i = e.id.replace(/\..*/, ""), a = this.#e.zoom ?? Lt;
+    const i = e.id.replace(/\..*/, ""), a = this.#e.zoom ?? Tt;
     return (Array.isArray(e.properties?.categories) ? e.properties.categories.reduce((s, o) => {
       const r = a[i + "." + o];
       return s === void 0 ? r : r === void 0 ? s : Math.max(s, r);
@@ -1137,22 +1209,22 @@ class $t extends H.Evented {
   get #d() {
     return !!this.#e.flyTo || this.#e.flyTo === void 0;
   }
-  get #I() {
+  get #$() {
     return typeof this.#e.flyTo == "boolean" ? {} : this.#e.flyTo;
   }
-  get #F() {
+  get #E() {
     return typeof this.#e.flyTo == "boolean" ? {} : this.#e.flyTo;
   }
-  #x(e, i) {
-    this.#t?.flyTo({ center: e, ...i ? { zoom: i } : {}, ...this.#I });
+  #b(e, i) {
+    this.#t?.flyTo({ center: e, ...i ? { zoom: i } : {}, ...this.#$ });
   }
-  #b(e, i, a) {
+  #x(e, i, a) {
     this.#t?.fitBounds(
       [
         [e[0], e[1]],
         [e[2], e[3]]
       ],
-      { padding: i, ...a ? { maxZoom: a } : {}, ...this.#F }
+      { padding: i, ...a ? { maxZoom: a } : {}, ...this.#E }
     );
   }
   #w(e) {
@@ -1180,9 +1252,9 @@ class $t extends H.Evented {
         (o) => o.type === "Polygon" || o.type === "MultiPolygon"
       );
       if (s.length > 0) {
-        const o = _e(D(s.map((r) => Qe(r))));
+        const o = Fe(Z(s.map((r) => it(r))));
         if (o) {
-          const r = we({ ...i, geometry: o.geometry });
+          const r = $e({ ...i, geometry: o.geometry });
           r && this.#n(r);
         }
       } else {
@@ -1195,7 +1267,7 @@ class $t extends H.Evented {
         });
       }
     } else if (i?.geometry.type.endsWith("Polygon")) {
-      const s = we(i);
+      const s = $e(i);
       s && this.#n(s), this.#e.pickedResultStyle === "full-geometry-including-polygon-center-marker" && a();
     } else i?.geometry.type.endsWith("LineString") ? this.#n(i) : i?.geometry.type.endsWith("Point") && a();
     if (this.#e.showResultMarkers !== !1 && this.#e.showResultMarkers !== null)
@@ -1208,7 +1280,7 @@ class $t extends H.Evented {
             continue;
         } else
           o = this.#f(this.#e.showResultMarkers).setLngLat(s.center).setPopup(
-            new H.Popup({
+            new te.Popup({
               offset: [1, -27],
               closeButton: !1,
               closeOnMove: !0,
@@ -1229,49 +1301,49 @@ class $t extends H.Evented {
     this.#c?.getElement().classList.toggle("marker-selected", !1), this.#c = void 0, this.#e.markerOnSelected !== !1 && (this.#c = this.#l.get(e), this.#c?.getElement().classList.toggle("marker-selected", !0));
   }
   #u() {
-    if (!this.#t?.loaded) {
+    if (!this.#t?._loaded) {
       this.#t?.once("load", () => {
         this.#u();
       });
       return;
     }
-    const e = this.#M(), i = this.#t.getSource(W);
-    !e?.fill && !e?.line || !i && !this.#a || (i ? i.setData(this.#a ?? D([])) : this.#a && this.#t.addSource(W, {
+    const e = this.#F(), i = this.#t.getSource(N);
+    !e?.fill && !e?.line || !i && !this.#a || (i ? i.setData(this.#a ?? Z([])) : this.#a && this.#t.addSource(N, {
       type: "geojson",
       data: this.#a
-    }), !this.#t.getLayer(ke) && e.fill && this.#t.addLayer({
+    }), !this.#t.getLayer(Ee) && e.fill && this.#t.addLayer({
       ...e.fill,
-      id: ke,
+      id: Ee,
       type: "fill",
-      source: W
-    }), !this.#t.getLayer(Le) && e.line && this.#t.addLayer({
+      source: N
+    }), !this.#t.getLayer(Oe) && e.line && this.#t.addLayer({
       ...e.line,
-      id: Le,
+      id: Oe,
       type: "line",
-      source: W
+      source: N
     }));
   }
   #n(e) {
     this.#a = e, this.#u();
   }
   #f(e) {
-    return typeof e != "object" && (e = { element: this.#t?._container.ownerDocument.createElement("maptiler-geocode-marker"), offset: [1, -13] }), new H.Marker(e);
+    return typeof e != "object" && (e = { element: this.#t?._container.ownerDocument.createElement("maptiler-geocode-marker"), offset: [1, -13] }), new te.Marker(e);
   }
-  #M() {
+  #F() {
     const { fullGeometryStyle: e } = this.#e;
-    if (e === !0 || e === void 0) return _t;
+    if (e === !0 || e === void 0) return Mt;
     if (!(e === !1 || e === null))
       return e;
   }
 }
-class jt extends $t {
+class Zt extends St {
   #e;
   constructor(e = {}) {
     super(e);
   }
   /** @internal Not to be called directly */
   onAdd(e) {
-    this.#e = e, e.telemetry.registerModule(wt, kt);
+    this.#e = e, e.telemetry.registerModule(Ot, Ft);
     const i = this.getOptions(), { primaryLanguage: a, apiKey: s } = e.getSdkConfig();
     if (i.apiKey === void 0 && this.setOptions({ apiKey: s }), i.language === void 0) {
       const r = a.code?.match(/^([a-z]{2,3})($|_|-)/);
@@ -1291,25 +1363,25 @@ class jt extends $t {
       adjustUrl: (a) => {
         i?.(a);
         const s = this.getOptions();
-        (Ze.session ? e.session !== !1 : e.session === !0) && this.#e && (!s.apiUrl || new URL(s.apiUrl).host === new URL("https://api.maptiler.com/geocoding").host) && a.searchParams.append("mtsid", this.#e.getMaptilerSessionId());
+        (et.session ? e.session !== !1 : e.session === !0) && this.#e && (!s.apiUrl || new URL(s.apiUrl).host === new URL("https://api.maptiler.com/geocoding").host) && a.searchParams.append("mtsid", this.#e.getMaptilerSessionId());
       }
     });
   }
 }
 export {
-  _t as DEFAULT_GEOMETRY_STYLE,
-  jt as GeocodingControl,
-  X as MaptilerGeocodeClearIconElement,
-  ee as MaptilerGeocodeFailIconElement,
-  te as MaptilerGeocodeLoadingIconElement,
-  ne as MaptilerGeocodeMarkerElement,
-  ie as MaptilerGeocodeReverseGeocodingIconElement,
-  se as MaptilerGeocodeSearchIconElement,
+  Mt as DEFAULT_GEOMETRY_STYLE,
+  Zt as GeocodingControl,
+  se as MaptilerGeocodeClearIconElement,
+  re as MaptilerGeocodeFailIconElement,
+  oe as MaptilerGeocodeLoadingIconElement,
+  de as MaptilerGeocodeMarkerElement,
+  ae as MaptilerGeocodeReverseGeocodingIconElement,
+  le as MaptilerGeocodeSearchIconElement,
   n as MaptilerGeocoderElement,
-  jt as MaptilerGeocodingControl,
-  ke as RESULT_LAYER_FILL,
-  Le as RESULT_LAYER_LINE,
-  W as RESULT_SOURCE,
-  Lt as ZOOM_DEFAULTS
+  Zt as MaptilerGeocodingControl,
+  Ee as RESULT_LAYER_FILL,
+  Oe as RESULT_LAYER_LINE,
+  N as RESULT_SOURCE,
+  Tt as ZOOM_DEFAULTS
 };
 //# sourceMappingURL=maptilersdk.js.map