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

package/dist/index.js

@@ -1,18 +1,18 @@
-import { css as L, LitElement as F, svg as D, html as f, unsafeCSS as fe, nothing as Z } from "lit";
-import { customElement as O, property as h, state as v, query as Ue } from "lit/decorators.js";
-import { convert as Be } from "geo-coordinates-parser";
-import { classMap as j } from "lit/directives/class-map.js";
-import { repeat as Me } from "lit/directives/repeat.js";
+import { css as E, LitElement as O, svg as N, html as f, unsafeCSS as xe, nothing as X } from "lit";
+import { customElement as S, property as h, state as y, queryAssignedElements as I } from "lit/decorators.js";
+import { convert as je } from "geo-coordinates-parser";
+import { classMap as V } from "lit/directives/class-map.js";
+import { repeat as Re } from "lit/directives/repeat.js";
 import "@turf/clone";
-import { styleMap as Ee } from "lit/directives/style-map.js";
-var Ge = Object.getOwnPropertyDescriptor, We = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? Ge(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = l(s) || s);
-  return s;
+import { styleMap as Ve } from "lit/directives/style-map.js";
+var De = Object.getOwnPropertyDescriptor, qe = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? De(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = c(l) || l);
+  return l;
 };
-let Q = class extends F {
+let Y = class extends O {
   render() {
-    return D`
+    return N`
       <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"
@@ -21,23 +21,23 @@ let Q = class extends F {
     `;
   }
 };
-Q.styles = L`
+Y.styles = E`
     svg {
       display: block;
-      fill: var(--color-icon-button);
+      fill: var(--color-icon-button, #444952);
     }
   `;
-Q = We([
-  O("maptiler-geocode-clear-icon")
-], Q);
-var je = Object.getOwnPropertyDescriptor, Ae = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? je(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = l(s) || s);
-  return s;
-};
-let H = class extends F {
+Y = qe([
+  S("maptiler-geocode-clear-icon")
+], Y);
+var Ne = Object.getOwnPropertyDescriptor, Ke = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? Ne(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = c(l) || l);
+  return l;
+};
+let ee = class extends O {
   render() {
-    return D`
+    return N`
       <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"
@@ -46,21 +46,21 @@ let H = class extends F {
     `;
   }
 };
-H.styles = L`
+ee.styles = E`
     svg {
       display: block;
-      fill: #e15042;
+      fill: var(--color-fail-icon, #e15042);
     }
   `;
-H = Ae([
-  O("maptiler-geocode-fail-icon")
-], H);
-var Re = Object.getOwnPropertyDescriptor, Ve = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? Re(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = l(s) || s);
-  return s;
-};
-let J = class extends F {
+ee = Ke([
+  S("maptiler-geocode-fail-icon")
+], ee);
+var Ze = Object.getOwnPropertyDescriptor, He = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? Ze(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = c(l) || l);
+  return l;
+};
+let te = class extends O {
   render() {
     return f`
       <div>
@@ -72,7 +72,7 @@ let J = class extends F {
     `;
   }
 };
-J.styles = L`
+te.styles = E`
     div {
       position: absolute;
       left: 50%;
@@ -99,17 +99,17 @@ J.styles = L`
       }
     }
   `;
-J = Ve([
-  O("maptiler-geocode-loading-icon")
-], J);
-var De = Object.getOwnPropertyDescriptor, ze = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? De(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = l(s) || s);
-  return s;
-};
-let X = class extends F {
+te = He([
+  S("maptiler-geocode-loading-icon")
+], te);
+var Qe = Object.getOwnPropertyDescriptor, Je = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? Qe(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = c(l) || l);
+  return l;
+};
+let ie = class extends O {
   render() {
-    return D`
+    return N`
       <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"
@@ -118,23 +118,23 @@ let X = class extends F {
     `;
   }
 };
-X.styles = L`
+ie.styles = E`
     svg {
       display: block;
-      fill: var(--color-icon-button);
+      fill: var(--color-icon-button, #444952);
     }
   `;
-X = ze([
-  O("maptiler-geocode-reverse-geocoding-icon")
-], X);
-var qe = Object.getOwnPropertyDescriptor, Ne = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? qe(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = l(s) || s);
-  return s;
-};
-let Y = class extends F {
+ie = Je([
+  S("maptiler-geocode-reverse-geocoding-icon")
+], ie);
+var Xe = Object.getOwnPropertyDescriptor, Ye = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? Xe(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = c(l) || l);
+  return l;
+};
+let se = class extends O {
   render() {
-    return D`
+    return N`
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="13"
@@ -147,7 +147,7 @@ let Y = class extends F {
     `;
   }
 };
-Y.styles = L`
+se.styles = E`
     circle {
       stroke-width: 1.875;
       fill: none;
@@ -160,50 +160,50 @@ Y.styles = L`
 
     svg {
       display: block;
-      stroke: var(--color-icon-button);
+      stroke: var(--color-icon-button, #444952);
     }
   `;
-Y = Ne([
-  O("maptiler-geocode-search-icon")
-], Y);
-function Ke(e, t, i) {
-  const n = t[1], s = t[0], p = n - s;
-  return e === n && i ? e : ((e - s) % p + p) % p + s;
+se = Ye([
+  S("maptiler-geocode-search-icon")
+], se);
+function et(e, t, r) {
+  const n = t[1], l = t[0], p = n - l;
+  return e === n && r ? e : ((e - l) % p + p) % p + l;
 }
-let U;
-async function Ze(e, t, i) {
+let P;
+async function tt(e, t, r) {
   for (const n of t ?? [])
     if (!(e && (n.minZoom != null && n.minZoom > e[0] || n.maxZoom != null && n.maxZoom < e[0]))) {
       if (n.type === "fixed")
         return n.coordinates.join(",");
       if (n.type === "client-geolocation")
-        if (U && n.cachedLocationExpiry && U.time + n.cachedLocationExpiry > Date.now()) {
-          if (U.coords)
-            return U.coords;
+        if (P && n.cachedLocationExpiry && P.time + n.cachedLocationExpiry > Date.now()) {
+          if (P.coords)
+            return P.coords;
         } else {
-          let s;
+          let l;
           try {
-            return s = await new Promise((p, l) => {
-              i.signal.addEventListener("abort", () => {
-                l(Error("aborted"));
+            return l = await new Promise((p, c) => {
+              r.signal.addEventListener("abort", () => {
+                c(Error("aborted"));
               }), navigator.geolocation.getCurrentPosition(
-                ($) => {
-                  p([$.coords.longitude, $.coords.latitude].map((x) => x.toFixed(6)).join(","));
+                (w) => {
+                  p([w.coords.longitude, w.coords.latitude].map((x) => x.toFixed(6)).join(","));
                 },
-                ($) => {
-                  l($);
+                (w) => {
+                  c(w);
                 },
                 n
               );
-            }), s;
+            }), l;
           } catch {
           } finally {
-            n.cachedLocationExpiry && (U = {
+            n.cachedLocationExpiry && (P = {
               time: Date.now(),
-              coords: s
+              coords: l
             });
           }
-          if (i.signal.aborted)
+          if (r.signal.aborted)
             return;
         }
       if (n.type === "server-geolocation")
@@ -212,21 +212,21 @@ async function Ze(e, t, i) {
         return e[1].toFixed(6) + "," + e[2].toFixed(6);
     }
 }
-const Qe = ".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 He = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, ge = (e) => {
+const it = ".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 st = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, be = (e) => {
   throw TypeError(e);
-}, _ = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? Je(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = (n ? l(t, i, s) : l(s)) || s);
-  return n && s && He(t, i, s), s;
-}, me = (e, t, i) => t.has(e) || ge("Cannot " + i), u = (e, t, i) => (me(e, t, "read from private field"), i ? i.call(e) : t.get(e)), Xe = (e, t, i) => t.has(e) ? ge("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), C = (e, t, i) => (me(e, t, "access private method"), i), d, A, M, g, ye, ve, re, ee;
-const xe = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, be = xe ? "@2x" : "", T = xe ? 2 : 1;
-let I, we, w = class extends F {
+}, $ = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? rt(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = (n ? c(t, r, l) : c(l)) || l);
+  return n && l && st(t, r, l), l;
+}, we = (e, t, r) => t.has(e) || be("Cannot " + r), u = (e, t, r) => (we(e, t, "read from private field"), r ? r.call(e) : t.get(e)), ot = (e, t, r) => t.has(e) ? be("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), B = (e, t, r) => (we(e, t, "access private method"), r), d, W, G, m, _e, Ie, ne, re;
+const $e = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, ke = $e ? "@2x" : "", C = $e ? 2 : 1;
+let F, Le, b = class extends O {
   constructor() {
-    super(...arguments), Xe(this, d), this.itemStyle = "default", this.showPlaceType = "if-needed", this.missingIconsCache = /* @__PURE__ */ new Set(), this.iconsBaseUrl = "", this.index = 0;
+    super(...arguments), ot(this, d), this.itemStyle = "default", this.showPlaceType = "if-needed", this.missingIconsCache = /* @__PURE__ */ new Set(), this.iconsBaseUrl = "", this.index = 0;
   }
   willUpdate(e) {
-    e.has("feature") && u(this, d, A) && (this.index = u(this, d, A).length, C(this, d, re).call(this));
+    e.has("feature") && u(this, d, W) && (this.index = u(this, d, W).length, B(this, d, ne).call(this));
   }
   render() {
     return f`
@@ -238,112 +238,124 @@ let I, we, w = class extends F {
         class=${this.itemStyle}
         @click=${() => this.dispatchEvent(new CustomEvent("select"))}
       >
-        ${I && this.spriteIcon ? f`
+        ${F && this.spriteIcon ? f`
               <div
                 class="sprite-icon"
-                style=${Ee({
-      width: `${this.spriteIcon.width / T}px`,
-      height: `${this.spriteIcon.height / T}px`,
-      backgroundImage: `url(${this.iconsBaseUrl}sprite${be}.png)`,
-      backgroundPosition: `-${this.spriteIcon.x / T}px -${this.spriteIcon.y / T}px`,
-      backgroundSize: `${I.width / T}px ${I.height / T}px`
+                style=${Ve({
+      width: `${this.spriteIcon.width / C}px`,
+      height: `${this.spriteIcon.height / C}px`,
+      backgroundImage: `url(${this.iconsBaseUrl}sprite${ke}.png)`,
+      backgroundPosition: `-${this.spriteIcon.x / C}px -${this.spriteIcon.y / C}px`,
+      backgroundSize: `${F.width / C}px ${F.height / C}px`
     })}
-                title=${u(this, d, g)}
+                title=${u(this, d, m)}
               />
-            ` : this.imageUrl ? f` <img src=${this.imageUrl} alt=${this.category} title=${u(this, d, g)} @error=${C(this, d, ve)} />` : this.feature?.address ? f` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("road.") ? f` <img src=${this.iconsBaseUrl + "road.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("address.") ? f` <img src=${this.iconsBaseUrl + "street.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("postal_code.") ? f` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("poi.") ? f` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : u(this, d, M) ? f` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : f` <img src=${this.iconsBaseUrl + "area.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> `}
+            ` : this.imageUrl ? f` <img src=${this.imageUrl} alt=${this.category} title=${u(this, d, m)} @error=${B(this, d, Ie)} />` : this.feature?.address ? f` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : this.feature?.id.startsWith("road.") ? f` <img src=${this.iconsBaseUrl + "road.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : this.feature?.id.startsWith("address.") ? f` <img src=${this.iconsBaseUrl + "street.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : this.feature?.id.startsWith("postal_code.") ? f` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : this.feature?.id.startsWith("poi.") ? f` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : u(this, d, G) ? f` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> ` : f` <img src=${this.iconsBaseUrl + "area.svg"} alt=${u(this, d, m)} title=${u(this, d, m)} /> `}
 
         <span class="texts">
           <span>
-            <span class="primary"> ${u(this, d, M) ? this.feature?.place_name : this.feature?.place_name.replace(/,.*/, "")} </span>
+            <span class="primary"> ${u(this, d, G) ? 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) && !u(this, d, M) ? f` <span class="secondary"> ${u(this, d, g)} </span> ` : Z}
+            ${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) && !u(this, d, G) ? f` <span class="secondary"> ${u(this, d, m)} </span> ` : X}
           </span>
 
-          <span class="line2"> ${u(this, d, M) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
+          <span class="line2"> ${u(this, d, G) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
         </span>
       </li>
     `;
   }
 };
 d = /* @__PURE__ */ new WeakSet();
-A = function() {
+W = function() {
   return this.feature?.properties?.categories;
 };
-M = function() {
+G = 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];
+m = function() {
+  return u(this, d, W)?.join(", ") ?? this.feature?.place_type_name?.[0] ?? this.feature?.place_type[0];
 };
-ye = function() {
-  we ??= fetch(`${this.iconsBaseUrl}sprite${be}.json`).then((e) => e.json()).then((e) => {
-    I = e;
+_e = function() {
+  Le ??= fetch(`${this.iconsBaseUrl}sprite${ke}.json`).then((e) => e.json()).then((e) => {
+    F = e;
   }).catch(() => {
-    I = null;
+    F = null;
   });
 };
-ve = function() {
-  this.imageUrl && this.missingIconsCache.add(this.imageUrl), C(this, d, re).call(this);
+Ie = function() {
+  this.imageUrl && this.missingIconsCache.add(this.imageUrl), B(this, d, ne).call(this);
 };
-re = function() {
-  I !== void 0 ? C(this, d, ee).call(this) : (C(this, d, ye).call(this), we?.then(() => {
-    C(this, d, ee).call(this);
+ne = function() {
+  F !== void 0 ? B(this, d, re).call(this) : (B(this, d, _e).call(this), Le?.then(() => {
+    B(this, d, re).call(this);
   }));
 };
-ee = function() {
+re = function() {
   do {
-    if (this.index--, this.category = u(this, d, A)?.[this.index], this.spriteIcon = this.category ? I?.icons[this.category] : void 0, this.spriteIcon)
+    if (this.index--, this.category = u(this, d, W)?.[this.index], this.spriteIcon = this.category ? F?.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)));
 };
-w.styles = L`
-    ${fe(Qe)}
+b.styles = E`
+    ${xe(it)}
   `;
-_([
+$([
   h({ type: Object })
-], w.prototype, "feature", 2);
-_([
+], b.prototype, "feature", 2);
+$([
   h({ type: String })
-], w.prototype, "itemStyle", 2);
-_([
+], b.prototype, "itemStyle", 2);
+$([
   h({ type: String })
-], w.prototype, "showPlaceType", 2);
-_([
+], b.prototype, "showPlaceType", 2);
+$([
   h({ attribute: !1 })
-], w.prototype, "missingIconsCache", 2);
-_([
+], b.prototype, "missingIconsCache", 2);
+$([
   h({ type: String })
-], w.prototype, "iconsBaseUrl", 2);
-_([
-  v()
-], w.prototype, "category", 2);
-_([
-  v()
-], w.prototype, "imageUrl", 2);
-_([
-  v()
-], w.prototype, "spriteIcon", 2);
-_([
-  v()
-], w.prototype, "index", 2);
-w = _([
-  O("maptiler-geocoder-feature-item")
-], w);
-const Ye = "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 et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, $e = (e) => {
+], b.prototype, "iconsBaseUrl", 2);
+$([
+  y()
+], b.prototype, "category", 2);
+$([
+  y()
+], b.prototype, "imageUrl", 2);
+$([
+  y()
+], b.prototype, "spriteIcon", 2);
+$([
+  y()
+], b.prototype, "index", 2);
+b = $([
+  S("maptiler-geocoder-feature-item")
+], b);
+const at = '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 lt = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, Fe = (e) => {
   throw TypeError(e);
-}, a = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? tt(t, i) : t, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (s = (n ? l(t, i, s) : l(s)) || s);
-  return n && s && et(t, i, s), s;
-}, oe = (e, t, i) => t.has(e) || $e("Cannot " + i), b = (e, t, i) => (oe(e, t, "read from private field"), i ? i.call(e) : t.get(e)), B = (e, t, i) => t.has(e) ? $e("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), te = (e, t, i, n) => (oe(e, t, "write to private field"), t.set(e, i), i), c = (e, t, i) => (oe(e, t, "access private method"), i), R, E, ie, G, r, V, _e, ae, y, le, z, ne, ce, k, he, q, ke, se, Ie, Le, Fe, Oe, Se, Te, Ce;
-let o = class extends F {
+}, a = (e, t, r, n) => {
+  for (var l = n > 1 ? void 0 : n ? nt(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (l = (n ? c(t, r, l) : c(l)) || l);
+  return n && l && lt(t, r, l), l;
+}, ce = (e, t, r) => t.has(e) || Fe("Cannot " + r), _ = (e, t, r) => (ce(e, t, "read from private field"), r ? r.call(e) : t.get(e)), M = (e, t, r) => t.has(e) ? Fe("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), oe = (e, t, r, n) => (ce(e, t, "write to private field"), t.set(e, r), r), o = (e, t, r) => (ce(e, t, "access private method"), r), D, A, ae, j, i, q, he, v, pe, K, de, ue, k, fe, Z, Ee, Oe, le, Se, Te, Ce, Be, Ue, Pe, Me, Ge, ze, We, L, z;
+const me = "input:not([type]), input[type=text], input[type=search], select, textarea", H = "button, input[type=button]";
+let s = class extends O {
   constructor() {
-    super(...arguments), B(this, r), 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, B(this, R, !1), B(this, E), B(this, ie, /* @__PURE__ */ new Set()), B(this, G);
+    super(...arguments), M(this, i), 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, M(this, D, !1), M(this, A), M(this, ae, /* @__PURE__ */ new Set()), M(this, j);
+  }
+  get isLoading() {
+    return this.abortController !== void 0;
+  }
+  get input() {
+    for (const e of this.contentSlotElements) {
+      if (o(this, i, L).call(this, e)) return e;
+      const t = e.querySelector(me);
+      if (o(this, i, L).call(this, t)) return t;
+    }
+    return this.inputSlotElements[0];
   }
   firstUpdated() {
-    te(this, R, !0);
+    oe(this, D, !0), this.input && (this.input.value = this.searchValue);
   }
   /**
    * Set the options of this instance.
@@ -352,8 +364,8 @@ let o = class extends F {
    */
   setOptions(e) {
     const t = { ...e };
-    for (const i of Object.keys(t))
-      it.includes(i) || delete t[i];
+    for (const r of Object.keys(t))
+      ct.includes(r) || delete t[r];
     Object.assign(this, t);
   }
   /**
@@ -362,7 +374,7 @@ let o = class extends F {
    * @param value text to set
    */
   setQuery(e) {
-    c(this, r, ce).call(this, e, { external: !0 }), c(this, r, ne).call(this);
+    o(this, i, ue).call(this, e, { external: !0 }), o(this, i, de).call(this);
   }
   /**
    * Set the content of search input box and immediately submit it.
@@ -370,13 +382,13 @@ let o = class extends F {
    * @param value text to set and submit
    */
   submitQuery(e) {
-    c(this, r, he).call(this, e, { external: !0 });
+    o(this, i, fe).call(this, e, { external: !0 });
   }
   /**
    * Clear search result list.
    */
   clearList() {
-    c(this, r, k).call(this), this.picked = void 0, this.selectedItemIndex = -1;
+    o(this, i, k).call(this), this.picked = void 0, this.selectedItemIndex = -1;
   }
   /**
    * Focus the search input box.
@@ -384,99 +396,117 @@ let o = class extends F {
    * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   focus(e) {
-    this.input.focus(e);
+    this.input?.focus(e);
   }
   /**
    * Blur the search input box.
    */
   blur() {
-    this.input.blur();
+    this.input?.blur();
   }
-  addEventListener(e, t, i) {
-    super.addEventListener(e, t, i);
+  addEventListener(e, t, r) {
+    super.addEventListener(e, t, r);
   }
-  removeEventListener(e, t, i) {
-    super.removeEventListener(e, t, i);
+  removeEventListener(e, t, r) {
+    super.removeEventListener(e, t, r);
   }
   /** @internal */
   handleMapChange(e) {
-    te(this, G, e);
+    oe(this, j, e);
   }
   /** @internal */
   handleMapClick(e) {
-    this.reverseActive && c(this, r, ke).call(this, e);
+    this.reverseActive && o(this, i, Ee).call(this, e);
   }
   willUpdate(e) {
-    e.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), e.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((t) => e.has(t)) && this.picked && (this.clearListOnPick && c(this, r, k).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((t) => e.has(t)) && b(this, r, ae) && (c(this, r, k).call(this), this.error = void 0), ["focused", "listIsInteractedWith"].some((t) => e.has(t)) && this.clearOnBlur && !this.focused && !this.isFeatureListInteractedWith && (this.searchValue = ""), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((t) => e.has(t)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((t) => e.has(t)) && c(this, r, y).call(this, "select", { feature: b(this, r, V) }), ["picked"].some((t) => e.has(t)) && this.picked && this.picked.id !== e.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? c(this, r, q).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
+    e.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), e.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((t) => e.has(t)) && this.picked && (this.clearListOnPick && o(this, i, k).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((t) => e.has(t)) && _(this, i, he) && (o(this, i, k).call(this), this.error = void 0), ["focused", "listIsInteractedWith"].some((t) => e.has(t)) && this.clearOnBlur && !this.focused && !this.isFeatureListInteractedWith && (this.searchValue = ""), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((t) => e.has(t)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((t) => e.has(t)) && o(this, i, v).call(this, "select", { feature: _(this, i, q) }), ["picked"].some((t) => e.has(t)) && this.picked && this.picked.id !== e.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? o(this, i, Z).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
       () => {
-        c(this, r, y).call(this, "pick", { feature: this.picked });
+        o(this, i, v).call(this, "pick", { feature: this.picked });
       },
       (t) => {
-        t && typeof t == "object" && "name" in t && t.name === "AbortError" || (this.error = t, c(this, r, y).call(this, "pick", { feature: this.picked }));
+        t && typeof t == "object" && "name" in t && t.name === "AbortError" || (this.error = t, o(this, i, v).call(this, "pick", { feature: this.picked }));
       }
-    ), ["listFeatures", "focused", "isFeatureListInteractedWith", "keepListOpen"].some((t) => e.has(t)) && (this.isFeatureListVisible = !!this.listFeatures?.length && (this.focused || this.isFeatureListInteractedWith || this.keepListOpen)), ["isFeatureListVisible"].some((t) => e.has(t)) && (this.isFeatureListVisible ? c(this, r, y).call(this, "featuresshow") : c(this, r, y).call(this, "featureshide")), ["reverseActive"].some((t) => e.has(t)) && c(this, r, y).call(this, "reversetoggle", { reverse: this.reverseActive });
+    ), ["listFeatures", "focused", "isFeatureListInteractedWith", "keepListOpen"].some((t) => e.has(t)) && (this.isFeatureListVisible = !!this.listFeatures?.length && (this.focused || this.isFeatureListInteractedWith || this.keepListOpen)), ["isFeatureListVisible"].some((t) => e.has(t)) && (this.isFeatureListVisible ? o(this, i, v).call(this, "featuresshow") : o(this, i, v).call(this, "featureshide")), ["reverseActive"].some((t) => e.has(t)) && o(this, i, v).call(this, "reversetoggle", { reverse: this.reverseActive }), ["searchValue"].some((t) => e.has(t)) && this.input && (this.input.value = this.searchValue);
   }
   render() {
     return f`
-      <form @submit=${c(this, r, le)} class=${j({ "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=${V({ "can-collapse": this.collapsed && this.searchValue === "" })}
+        @submit=${o(this, i, pe)}
+        @focusin=${o(this, i, Ce)}
+        @focusout=${o(this, i, Be)}
+        @click=${o(this, i, Oe)}
+        @keydown=${o(this, i, le)}
+        @input=${o(this, i, Se)}
+        @change=${o(this, i, Te)}
+      >
+        <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=${c(this, r, se)}
-            @input=${c(this, r, Ie)}
-            @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 ${j({ displayable: this.searchValue !== "" })}">
-            ${b(this, r, _e) ? f`<maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>` : f`
-                  <button type="button" @click=${c(this, r, Ce)} 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" ? f`
-                <button
-                  type="button"
-                  class=${j({ 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>
-              ` : Z}
+            <div class="clear-button-container ${V({ displayable: this.searchValue !== "" })}">
+              ${this.isLoading ? f`
+                    <slot name="loading-icon">
+                      <maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>
+                    </slot>
+                  ` : f`
+                    <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" ? f`
+                  <slot name="reverse-button">
+                    <button type="button" class=${V({ 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>
+                ` : X}
+
+            <slot name="end"></slot>
+          </div>
+        </slot>
 
         ${this.error ? f`
               <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 ? Z : this.listFeatures.length === 0 ? f`
+            ` : !this.focused && !this.isFeatureListInteractedWith && !this.keepListOpen || this.listFeatures === void 0 ? X : this.listFeatures.length === 0 ? f`
                   <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!"}
@@ -484,14 +514,14 @@ let o = class extends F {
                   </div>
                 ` : f`
                   <ul
-                    class="options ${j({ "open-on-top": this.openListOnTop })}"
-                    @pointerleave=${c(this, r, Oe)}
-                    @pointerdown=${c(this, r, Se)}
-                    @pointerup=${c(this, r, Te)}
-                    @keydown=${c(this, r, se)}
+                    class="options ${V({ "open-on-top": this.openListOnTop })}"
+                    @pointerleave=${o(this, i, Me)}
+                    @pointerdown=${o(this, i, Ge)}
+                    @pointerup=${o(this, i, ze)}
+                    @keydown=${o(this, i, le)}
                     role="listbox"
                   >
-                    ${Me(
+                    ${Re(
       this.listFeatures,
       (e) => e.id + (e.address ? "," + e.address : ""),
       (e, t) => f`
@@ -500,13 +530,13 @@ let o = class extends F {
                           .showPlaceType=${this.showPlaceType ?? "if-needed"}
                           itemStyle=${this.selectedItemIndex === t ? "selected" : this.picked?.id === e.id ? "picked" : "default"}
                           @pointerenter=${() => {
-        c(this, r, Fe).call(this, t);
+        o(this, i, Pe).call(this, t);
       }}
                           @select=${() => {
-        c(this, r, Le).call(this, e);
+        o(this, i, Ue).call(this, e);
       }}
-                          .missingIconsCache=${b(this, ie)}
-                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/icons/"}
+                          .missingIconsCache=${_(this, ae)}
+                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.1.0-rc.1/icons/"}
                         />
                       `
     )}
@@ -516,22 +546,19 @@ let o = class extends F {
     `;
   }
 };
-R = /* @__PURE__ */ new WeakMap();
-E = /* @__PURE__ */ new WeakMap();
-ie = /* @__PURE__ */ new WeakMap();
-G = /* @__PURE__ */ new WeakMap();
-r = /* @__PURE__ */ new WeakSet();
-V = function() {
+D = /* @__PURE__ */ new WeakMap();
+A = /* @__PURE__ */ new WeakMap();
+ae = /* @__PURE__ */ new WeakMap();
+j = /* @__PURE__ */ new WeakMap();
+i = /* @__PURE__ */ new WeakSet();
+q = function() {
   return this.listFeatures?.[this.selectedItemIndex];
 };
-_e = function() {
-  return this.abortController !== void 0;
-};
-ae = function() {
+he = function() {
   return this.searchValue.length < (this.minLength ?? 2);
 };
-y = function(e, ...[t]) {
-  b(this, R) && this.dispatchEvent(
+v = function(e, ...[t]) {
+  _(this, D) && this.dispatchEvent(
     new CustomEvent(e, {
       bubbles: !0,
       composed: !0,
@@ -539,288 +566,333 @@ y = function(e, ...[t]) {
     })
   );
 };
-le = function(e, { external: t = !1 } = {}) {
-  e?.preventDefault(), this.focused = !1, clearTimeout(b(this, E)), 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, r, q).call(this, this.searchValue, { exact: !0, external: t }).then(() => {
+pe = function(e, { external: t = !1 } = {}) {
+  e?.preventDefault(), this.focused = !1, clearTimeout(_(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 && o(this, i, Z).call(this, this.searchValue, { exact: !0, external: t }).then(() => {
     this.picked = void 0;
-  }).catch((i) => this.error = i);
+  }).catch((r) => this.error = r);
 };
-z = function(e) {
+K = function(e) {
   try {
-    return Be(e, 6);
+    return je(e, 6);
   } catch {
     return !1;
   }
 };
-ne = function() {
+de = 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();
   });
 };
-ce = function(e, { external: t = !1 } = {}) {
-  if (this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, z).call(this, e) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
-    if (clearTimeout(b(this, E)), b(this, r, ae))
+ue = function(e, { external: t = !1 } = {}) {
+  if (this.searchValue = e, o(this, i, v).call(this, "querychange", { query: this.searchValue, reverseCoords: o(this, i, K).call(this, e) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
+    if (clearTimeout(_(this, A)), _(this, i, he))
       return;
-    const i = this.searchValue;
-    te(this, E, window.setTimeout(() => {
-      c(this, r, q).call(this, i, { external: t }).catch((n) => this.error = n);
+    const r = this.searchValue;
+    oe(this, A, window.setTimeout(() => {
+      o(this, i, Z).call(this, r, { external: t }).catch((n) => this.error = n);
     }, this.debounceSearch ?? 200));
   } else
-    c(this, r, k).call(this);
+    o(this, i, k).call(this);
 };
 k = function() {
-  this.listFeatures !== void 0 && (this.listFeatures = void 0, c(this, r, y).call(this, "featuresclear"));
+  this.listFeatures !== void 0 && (this.listFeatures = void 0, o(this, i, v).call(this, "featuresclear"));
 };
-he = function(e, { external: t = !1 } = {}) {
-  this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, z).call(this, e) }), this.selectedItemIndex = -1, c(this, r, le).call(this, void 0, { external: t });
+fe = function(e, { external: t = !1 } = {}) {
+  this.searchValue = e, o(this, i, v).call(this, "querychange", { query: this.searchValue, reverseCoords: o(this, i, K).call(this, e) }), this.selectedItemIndex = -1, o(this, i, pe).call(this, void 0, { external: t });
 };
-q = async function(e, { byId: t = !1, exact: i = !1, external: n = !1 } = {}) {
+Z = async function(e, { byId: t = !1, exact: r = !1, external: n = !1 } = {}) {
   this.error = void 0, this.abortController?.abort();
-  const s = new AbortController();
-  this.abortController = s;
+  const l = new AbortController();
+  this.abortController = l;
   try {
-    const p = this.apiUrl ?? "https://api.maptiler.com/geocoding", l = c(this, r, z).call(this, e), $ = new URL(p + "/" + encodeURIComponent(l ? `${l.decimalLongitude},${l.decimalLatitude}` : e) + ".json"), x = $.searchParams;
+    const p = this.apiUrl ?? "https://api.maptiler.com/geocoding", c = o(this, i, K).call(this, e), w = new URL(p + "/" + encodeURIComponent(c ? `${c.decimalLongitude},${c.decimalLatitude}` : e) + ".json"), x = w.searchParams;
     this.language !== void 0 && x.set("language", Array.isArray(this.language) ? this.language.join(",") : this.language ?? "");
-    const [N] = b(this, G) ?? [void 0];
-    let S = (!l || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
-      (m) => typeof m == "string" ? m : N === void 0 || (m[0] ?? 0) <= N && N < (m[1] ?? 1 / 0) ? m[2] : void 0
-    ).filter((m) => m !== void 0);
-    S && (S = [...new Set(S)], x.set("types", S.join(",")));
-    const pe = !l || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
-    if (pe && x.set("excludeTypes", String(pe)), this.bbox && x.set("bbox", this.bbox.map((m) => m.toFixed(6)).join(",")), this.country && x.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && x.set("worldview", this.worldview), !t && !l) {
-      const m = this.proximity ?? [{ type: "server-geolocation" }], ue = await Ze(b(this, G), m, s);
-      ue && x.set("proximity", ue), (i || this.showResultsWhileTyping === !1) && x.set("autocomplete", "false"), x.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
+    const [Q] = _(this, j) ?? [void 0];
+    let T = (!c || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
+      (g) => typeof g == "string" ? g : Q === void 0 || (g[0] ?? 0) <= Q && Q < (g[1] ?? 1 / 0) ? g[2] : void 0
+    ).filter((g) => g !== void 0);
+    T && (T = [...new Set(T)], x.set("types", T.join(",")));
+    const ge = !c || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
+    if (ge && x.set("excludeTypes", String(ge)), this.bbox && x.set("bbox", this.bbox.map((g) => g.toFixed(6)).join(",")), this.country && x.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && x.set("worldview", this.worldview), !t && !c) {
+      const g = this.proximity ?? [{ type: "server-geolocation" }], ye = await tt(_(this, j), g, l);
+      ye && x.set("proximity", ye), (r || this.showResultsWhileTyping === !1) && x.set("autocomplete", "false"), x.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
     }
-    const de = this.limit ?? 5, K = this.reverseGeocodingLimit ?? de;
-    K > 1 && S?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), l ? (K === 1 || this.exhaustiveReverseGeocoding || S?.length === 1) && x.set("limit", String(K)) : x.set("limit", String(de)), this.apiKey && x.set("key", this.apiKey), this.adjustUrl?.($);
-    const Pe = $.searchParams.get("types") === "" && $.searchParams.get("excludeTypes") !== "true", W = $.toString();
-    if (W === this.lastSearchUrl) {
-      t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.listFeatures[this.selectedItemIndex]?.id !== b(this, r, V)?.id && (this.selectedItemIndex = -1));
+    const ve = this.limit ?? 5, J = this.reverseGeocodingLimit ?? ve;
+    J > 1 && T?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), c ? (J === 1 || this.exhaustiveReverseGeocoding || T?.length === 1) && x.set("limit", String(J)) : x.set("limit", String(ve)), this.apiKey && x.set("key", this.apiKey), this.adjustUrl?.(w);
+    const Ae = w.searchParams.get("types") === "" && w.searchParams.get("excludeTypes") !== "true", R = w.toString();
+    if (R === this.lastSearchUrl) {
+      t ? (this.clearListOnPick && o(this, i, k).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, o(this, i, v).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.listFeatures[this.selectedItemIndex]?.id !== _(this, i, q)?.id && (this.selectedItemIndex = -1));
       return;
     }
-    c(this, r, y).call(this, "request", { urlObj: $ }), this.lastSearchUrl = W;
-    let P;
-    if (Pe)
-      P = { type: "FeatureCollection", features: [] };
+    o(this, i, v).call(this, "request", { urlObj: w }), this.lastSearchUrl = R;
+    let U;
+    if (Ae)
+      U = { type: "FeatureCollection", features: [] };
     else {
-      const m = await fetch(W, {
-        signal: s.signal,
+      const g = await fetch(R, {
+        signal: l.signal,
         ...this.fetchParameters
       });
-      if (!m.ok)
-        throw new Error(await m.text());
-      P = await m.json();
+      if (!g.ok)
+        throw new Error(await g.text());
+      U = await g.json();
     }
-    c(this, r, y).call(this, "response", { url: W, featureCollection: P }), t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = P.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = P.features.filter(this.filter ?? (() => !0)), l && this.listFeatures.unshift({
+    o(this, i, v).call(this, "response", { url: R, featureCollection: U }), t ? (this.clearListOnPick && o(this, i, k).call(this), this.picked = U.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = U.features.filter(this.filter ?? (() => !0)), c && this.listFeatures.unshift({
       type: "Feature",
       properties: {},
       /* eslint-disable @typescript-eslint/restrict-template-expressions */
-      id: `reverse_${l.decimalLongitude}_${l.decimalLatitude}`,
-      place_name: `${l.decimalLatitude}, ${l.decimalLongitude}`,
-      text: l.toCoordinateFormat("DMS"),
+      id: `reverse_${c.decimalLongitude}_${c.decimalLatitude}`,
+      place_name: `${c.decimalLatitude}, ${c.decimalLongitude}`,
+      text: c.toCoordinateFormat("DMS"),
       /* eslint-enable @typescript-eslint/restrict-template-expressions */
       place_type: ["reverse"],
       place_type_name: ["reverse"],
-      center: [l.decimalLongitude, l.decimalLatitude],
-      bbox: [l.decimalLongitude, l.decimalLatitude, l.decimalLongitude, l.decimalLatitude],
+      center: [c.decimalLongitude, c.decimalLatitude],
+      bbox: [c.decimalLongitude, c.decimalLatitude, c.decimalLongitude, c.decimalLatitude],
       geometry: {
         type: "Point",
-        coordinates: [l.decimalLongitude, l.decimalLatitude]
+        coordinates: [c.decimalLongitude, c.decimalLatitude]
       }
-    }), c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== b(this, r, V)?.id && (this.selectedItemIndex = -1), l && this.input.focus());
+    }), o(this, i, v).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== _(this, i, q)?.id && (this.selectedItemIndex = -1), c && this.input?.focus());
   } catch (p) {
     if (p && typeof p == "object" && "name" in p && p.name === "AbortError")
       return;
     throw p;
   } finally {
-    s === this.abortController && (this.abortController = void 0);
+    l === this.abortController && (this.abortController = void 0);
   }
 };
-ke = function(e) {
-  this.reverseActive = this.enableReverse === "always", c(this, r, k).call(this), this.picked = void 0, c(this, r, he).call(this, `${e[1].toFixed(6)}, ${Ke(e[0], [-180, 180], !0).toFixed(6)}`), c(this, r, ne).call(this);
+Ee = function(e) {
+  this.reverseActive = this.enableReverse === "always", o(this, i, k).call(this), this.picked = void 0, o(this, i, fe).call(this, `${e[1].toFixed(6)}, ${et(e[0], [-180, 180], !0).toFixed(6)}`), o(this, i, de).call(this);
+};
+Oe = function(e) {
+  o(this, i, L).call(this, e.target) ? this.focused = !0 : o(this, i, z).call(this, e.target, this.searchButtonElements, this.searchIconElements, "search-button") ? this.input?.focus() : o(this, i, z).call(this, e.target, this.clearButtonElements, this.clearIconElements, "clear-button") ? o(this, i, We).call(this) : o(this, i, z).call(this, e.target, this.reverseButtonElements, this.reverseIconElements, "reverse-button") ? this.reverseActive = !this.reverseActive : o(this, i, z).call(this, e.target, this.clearErrorButtonElements, this.clearErrorIconElements, "clear-error-button") && (this.error = void 0);
 };
-se = function(e) {
+le = function(e) {
   if (!this.listFeatures)
     return;
   const t = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-  t && (this.input.focus(), this.focused = !0, e.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) && t === -1 && (this.selectedItemIndex = this.listFeatures.length), this.selectedItemIndex += t, this.selectedItemIndex >= this.listFeatures.length && (this.selectedItemIndex = -1), this.selectedItemIndex < 0 && (this.picked || this.selectFirst !== !1) && (this.selectedItemIndex = 0));
+  t && (this.input?.focus(), this.focused = !0, e.preventDefault(), this.picked && this.selectedItemIndex === -1 && (this.selectedItemIndex = this.listFeatures.findIndex((r) => r.id === this.picked?.id)), this.selectedItemIndex === (this.picked || this.selectFirst !== !1 ? 0 : -1) && t === -1 && (this.selectedItemIndex = this.listFeatures.length), this.selectedItemIndex += t, this.selectedItemIndex >= this.listFeatures.length && (this.selectedItemIndex = -1), this.selectedItemIndex < 0 && (this.picked || this.selectFirst !== !1) && (this.selectedItemIndex = 0));
+};
+Se = function(e) {
+  o(this, i, L).call(this, e.target) && o(this, i, ue).call(this, e.target.value);
+};
+Te = function(e) {
+  o(this, i, L).call(this, e.target) && (this.picked = void 0);
 };
-Ie = function(e) {
-  c(this, r, ce).call(this, e.target.value);
+Ce = function(e) {
+  o(this, i, L).call(this, e.target) && (this.focused = !0);
 };
-Le = function(e) {
+Be = function(e) {
+  o(this, i, L).call(this, e.target) && (this.focused = !1);
+};
+Ue = function(e) {
   (!this.picked || this.picked.id !== e.id) && (this.picked = e, this.searchValue = e.place_name);
 };
-Fe = function(e) {
+Pe = function(e) {
   this.selectedItemIndex = e;
 };
-Oe = function() {
+Me = function() {
   (!this.selectFirst || this.picked) && (this.selectedItemIndex = -1), this.isFeatureListInteractedWith && (this.isFeatureListInteractedWith = !1);
 };
-Se = function() {
+Ge = function() {
   this.isFeatureListInteractedWith = !0;
 };
-Te = function() {
+ze = function() {
   setTimeout(() => {
     this.isFeatureListInteractedWith = !1;
   });
 };
-Ce = function() {
-  this.searchValue = "", c(this, r, y).call(this, "queryclear"), this.picked = void 0, this.input.focus();
+We = function() {
+  this.searchValue = "", o(this, i, v).call(this, "queryclear"), this.picked = void 0, this.input?.focus();
+};
+L = function(e) {
+  return e instanceof HTMLElement && e.matches(me);
 };
-o.styles = L`
-    ${fe(Ye)}
+z = function(e, t, r, n) {
+  return e instanceof HTMLElement && ([...t, ...r].some((l) => l.contains(e)) || e.closest(`[data-${n}]`) !== null);
+};
+s.styles = E`
+    ${xe(at)}
   `;
 a([
   h({ attribute: !1 })
-], o.prototype, "adjustUrl", 2);
+], s.prototype, "adjustUrl", 2);
 a([
   h({ type: String })
-], o.prototype, "apiKey", 2);
+], s.prototype, "apiKey", 2);
 a([
   h({ type: String })
-], o.prototype, "apiUrl", 2);
+], s.prototype, "apiUrl", 2);
 a([
   h({ type: Array })
-], o.prototype, "bbox", 2);
+], s.prototype, "bbox", 2);
 a([
   h({ type: String })
-], o.prototype, "clearButtonTitle", 2);
+], s.prototype, "clearButtonTitle", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "clearListOnPick", 2);
+], s.prototype, "clearListOnPick", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "clearOnBlur", 2);
+], s.prototype, "clearOnBlur", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "collapsed", 2);
+], s.prototype, "collapsed", 2);
 a([
   h({ attribute: !1 })
-], o.prototype, "country", 2);
+], s.prototype, "country", 2);
 a([
   h({ type: Number })
-], o.prototype, "debounceSearch", 2);
+], s.prototype, "debounceSearch", 2);
 a([
   h({ type: String })
-], o.prototype, "enableReverse", 2);
+], s.prototype, "enableReverse", 2);
 a([
   h({ type: String })
-], o.prototype, "errorMessage", 2);
+], s.prototype, "errorMessage", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "excludeTypes", 2);
+], s.prototype, "excludeTypes", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "exhaustiveReverseGeocoding", 2);
+], s.prototype, "exhaustiveReverseGeocoding", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "fetchFullGeometryOnPick", 2);
+], s.prototype, "fetchFullGeometryOnPick", 2);
 a([
   h({ type: Object })
-], o.prototype, "fetchParameters", 2);
+], s.prototype, "fetchParameters", 2);
 a([
   h({ attribute: !1 })
-], o.prototype, "filter", 2);
+], s.prototype, "filter", 2);
 a([
   h({ type: Object })
-], o.prototype, "fuzzyMatch", 2);
+], s.prototype, "fuzzyMatch", 2);
 a([
   h({ type: String })
-], o.prototype, "iconsBaseUrl", 2);
+], s.prototype, "iconsBaseUrl", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "keepListOpen", 2);
+], s.prototype, "keepListOpen", 2);
 a([
   h({ attribute: !1 })
-], o.prototype, "language", 2);
+], s.prototype, "language", 2);
 a([
   h({ type: Number })
-], o.prototype, "limit", 2);
+], s.prototype, "limit", 2);
 a([
   h({ type: Number })
-], o.prototype, "minLength", 2);
+], s.prototype, "minLength", 2);
 a([
   h({ type: String })
-], o.prototype, "noResultsMessage", 2);
+], s.prototype, "noResultsMessage", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "openListOnTop", 2);
+], s.prototype, "openListOnTop", 2);
 a([
   h({ type: String })
-], o.prototype, "placeholder", 2);
+], s.prototype, "placeholder", 2);
 a([
   h({ type: Array })
-], o.prototype, "proximity", 2);
+], s.prototype, "proximity", 2);
 a([
   h({ type: Boolean })
-], o.prototype, "reverseActive", 2);
+], s.prototype, "reverseActive", 2);
 a([
   h({ type: String })
-], o.prototype, "reverseButtonTitle", 2);
+], s.prototype, "reverseButtonTitle", 2);
 a([
   h({ type: Object })
-], o.prototype, "reverseGeocodingExcludeTypes", 2);
+], s.prototype, "reverseGeocodingExcludeTypes", 2);
 a([
   h({ type: Number })
-], o.prototype, "reverseGeocodingLimit", 2);
+], s.prototype, "reverseGeocodingLimit", 2);
 a([
   h({ type: Array })
-], o.prototype, "reverseGeocodingTypes", 2);
+], s.prototype, "reverseGeocodingTypes", 2);
 a([
   h({ type: Object })
-], o.prototype, "selectFirst", 2);
+], s.prototype, "selectFirst", 2);
 a([
   h({ type: String })
-], o.prototype, "showPlaceType", 2);
+], s.prototype, "showPlaceType", 2);
 a([
   h({ type: Object })
-], o.prototype, "showResultsWhileTyping", 2);
+], s.prototype, "showResultsWhileTyping", 2);
 a([
   h({ type: Array })
-], o.prototype, "types", 2);
+], s.prototype, "types", 2);
 a([
   h({ type: String })
-], o.prototype, "worldview", 2);
+], s.prototype, "worldview", 2);
+a([
+  I({ slot: "content", flatten: !1 })
+], s.prototype, "contentSlotElements", 2);
+a([
+  I({ slot: "input", flatten: !0, selector: me })
+], s.prototype, "inputSlotElements", 2);
+a([
+  I({ slot: "search-button", flatten: !0, selector: H })
+], s.prototype, "searchButtonElements", 2);
+a([
+  I({ slot: "clear-button", flatten: !0, selector: H })
+], s.prototype, "clearButtonElements", 2);
+a([
+  I({ slot: "reverse-button", flatten: !0, selector: H })
+], s.prototype, "reverseButtonElements", 2);
+a([
+  I({ slot: "clear-error-button", flatten: !0, selector: H })
+], s.prototype, "clearErrorButtonElements", 2);
+a([
+  I({ slot: "search-icon", flatten: !0 })
+], s.prototype, "searchIconElements", 2);
+a([
+  I({ slot: "clear-icon", flatten: !0 })
+], s.prototype, "clearIconElements", 2);
+a([
+  I({ slot: "reverse-icon", flatten: !0 })
+], s.prototype, "reverseIconElements", 2);
 a([
-  Ue("input")
-], o.prototype, "input", 2);
+  I({ slot: "clear-error-icon", flatten: !0 })
+], s.prototype, "clearErrorIconElements", 2);
 a([
-  v()
-], o.prototype, "searchValue", 2);
+  y()
+], s.prototype, "searchValue", 2);
 a([
-  v()
-], o.prototype, "listFeatures", 2);
+  y()
+], s.prototype, "listFeatures", 2);
 a([
-  v()
-], o.prototype, "selectedItemIndex", 2);
+  y()
+], s.prototype, "selectedItemIndex", 2);
 a([
-  v()
-], o.prototype, "picked", 2);
+  y()
+], s.prototype, "picked", 2);
 a([
-  v()
-], o.prototype, "cachedFeatures", 2);
+  y()
+], s.prototype, "cachedFeatures", 2);
 a([
-  v()
-], o.prototype, "lastSearchUrl", 2);
+  y()
+], s.prototype, "lastSearchUrl", 2);
 a([
-  v()
-], o.prototype, "error", 2);
+  y()
+], s.prototype, "error", 2);
 a([
-  v()
-], o.prototype, "abortController", 2);
+  y()
+], s.prototype, "abortController", 2);
 a([
-  v()
-], o.prototype, "focused", 2);
+  y()
+], s.prototype, "focused", 2);
 a([
-  v()
-], o.prototype, "isFeatureListVisible", 2);
+  y()
+], s.prototype, "isFeatureListVisible", 2);
 a([
-  v()
-], o.prototype, "isFeatureListInteractedWith", 2);
-o = a([
-  O("maptiler-geocoder")
-], o);
-const it = [
+  y()
+], s.prototype, "isFeatureListInteractedWith", 2);
+s = a([
+  S("maptiler-geocoder")
+], s);
+const ct = [
   "adjustUrl",
   "apiKey",
   "apiUrl",
@@ -860,11 +932,11 @@ const it = [
   "worldview"
 ];
 export {
-  Q as MaptilerGeocodeClearIconElement,
-  H as MaptilerGeocodeFailIconElement,
-  J as MaptilerGeocodeLoadingIconElement,
-  X as MaptilerGeocodeReverseGeocodingIconElement,
-  Y as MaptilerGeocodeSearchIconElement,
-  o as MaptilerGeocoderElement
+  Y as MaptilerGeocodeClearIconElement,
+  ee as MaptilerGeocodeFailIconElement,
+  te as MaptilerGeocodeLoadingIconElement,
+  ie as MaptilerGeocodeReverseGeocodingIconElement,
+  se as MaptilerGeocodeSearchIconElement,
+  s as MaptilerGeocoderElement
 };
 //# sourceMappingURL=index.js.map