@maptiler/geocoding-control 2.0.0 → 2.1.0-rc1

package/style.css

@@ -1 +1 @@
-svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-ltkwvy.svelte-ltkwvy{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}li.svelte-ltkwvy.svelte-ltkwvy:first-child{padding-top:10px}li.svelte-ltkwvy.svelte-ltkwvy:last-child{padding-bottom:10px}li.selected.svelte-ltkwvy.svelte-ltkwvy{background-color:#f3f6ff}li.selected.svelte-ltkwvy.svelte-ltkwvy{animation:svelte-ltkwvy-backAndForth 5s linear infinite}li.selected.svelte-ltkwvy .primary.svelte-ltkwvy{color:#2b8bfb}li.svelte-ltkwvy>img.svelte-ltkwvy{align-self:center;justify-self:center;opacity:.75}.texts.svelte-ltkwvy.svelte-ltkwvy{padding:0 17px 0 0}.texts.svelte-ltkwvy>.svelte-ltkwvy{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-ltkwvy.svelte-ltkwvy{font-weight:600}.secondary.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7;padding-left:4px}.line2.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7}@keyframes svelte-ltkwvy-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)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-1uvos7g.svelte-1uvos7g{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}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g:after,form.svelte-1uvos7g .svelte-1uvos7g:before{box-sizing:border-box}form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:29px}form.can-collapse.svelte-1uvos7g input.svelte-1uvos7g::placeholder{transition:opacity .25s;opacity:0}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g.svelte-1uvos7g:focus-within,form.svelte-1uvos7g.svelte-1uvos7g:hover{width:270px;max-width:270px}form.svelte-1uvos7g input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:focus-within input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:hover input.svelte-1uvos7g::placeholder{opacity:1}input.svelte-1uvos7g.svelte-1uvos7g{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.svelte-1uvos7g.svelte-1uvos7g:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-1uvos7g.svelte-1uvos7g,div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{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.svelte-1uvos7g.svelte-1uvos7g{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-1uvos7g.svelte-1uvos7g{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-1uvos7g div.svelte-1uvos7g{flex-grow:1}div.error.svelte-1uvos7g svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-1uvos7g button.svelte-1uvos7g{flex-shrink:0}div.error.svelte-1uvos7g button.svelte-1uvos7g>svg{width:13px;fill:#e25041}div.error.svelte-1uvos7g button.svelte-1uvos7g:hover svg,div.error.svelte-1uvos7g button.svelte-1uvos7g:active svg{fill:#444952}div.no-results.svelte-1uvos7g.svelte-1uvos7g{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-1uvos7g svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.maplibregl-ctrl-bottom-left ul.svelte-1uvos7g.svelte-1uvos7g,.maplibregl-ctrl-bottom-right ul.svelte-1uvos7g.svelte-1uvos7g{top:auto;bottom:100%}button.svelte-1uvos7g.svelte-1uvos7g{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-1uvos7g.svelte-1uvos7g:hover{background-color:transparent}button.svelte-1uvos7g:hover svg,button.svelte-1uvos7g:active svg{fill:#2b8bfb}.input-group.svelte-1uvos7g.svelte-1uvos7g{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-1uvos7g.svelte-1uvos7g{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-1uvos7g.svelte-1uvos7g{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-1uvos7g.svelte-1uvos7g{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-1uvos7g.svelte-1uvos7g{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:33px}.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g:focus-within,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g:hover{width:270px;max-width:270px}
+svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-z7p9pp.svelte-z7p9pp{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.svelte-z7p9pp.svelte-z7p9pp:first-child{padding-top:10px}li.svelte-z7p9pp.svelte-z7p9pp:last-child{padding-bottom:10px}li.picked.svelte-z7p9pp.svelte-z7p9pp{background-color:#e7edff}li.picked.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#96a4c7;padding-left:4px}li.picked.svelte-z7p9pp .line2.svelte-z7p9pp{color:#96a4c7}li.selected.svelte-z7p9pp.svelte-z7p9pp{background-color:#f3f6ff}li.selected.svelte-z7p9pp.svelte-z7p9pp{animation:svelte-z7p9pp-backAndForth 5s linear infinite}li.selected.svelte-z7p9pp .primary.svelte-z7p9pp{color:#2b8bfb}li.selected.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#a2adc7;padding-left:4px}li.selected.svelte-z7p9pp .line2.svelte-z7p9pp{color:#a2adc7}li.svelte-z7p9pp>img.svelte-z7p9pp{align-self:center;justify-self:center;opacity:.75}.texts.svelte-z7p9pp.svelte-z7p9pp{padding:0 17px 0 0}.texts.svelte-z7p9pp>.svelte-z7p9pp{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-z7p9pp.svelte-z7p9pp{font-weight:600}.secondary.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7;padding-left:4px}.line2.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7}@keyframes svelte-z7p9pp-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)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-bz0zu3.svelte-bz0zu3{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}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3:after,form.svelte-bz0zu3 .svelte-bz0zu3:before{box-sizing:border-box}form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:29px}form.can-collapse.svelte-bz0zu3 input.svelte-bz0zu3::placeholder{transition:opacity .25s;opacity:0}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3.svelte-bz0zu3:focus-within,form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}form.svelte-bz0zu3 input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:focus-within input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:hover input.svelte-bz0zu3::placeholder{opacity:1}input.svelte-bz0zu3.svelte-bz0zu3{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.svelte-bz0zu3.svelte-bz0zu3:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-bz0zu3.svelte-bz0zu3,div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{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.svelte-bz0zu3.svelte-bz0zu3{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-bz0zu3.svelte-bz0zu3{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-bz0zu3 div.svelte-bz0zu3{flex-grow:1}div.error.svelte-bz0zu3 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-bz0zu3 button.svelte-bz0zu3{flex-shrink:0}div.error.svelte-bz0zu3 button.svelte-bz0zu3>svg{width:13px;fill:#e25041}div.error.svelte-bz0zu3 button.svelte-bz0zu3:hover svg,div.error.svelte-bz0zu3 button.svelte-bz0zu3:active svg{fill:#444952}div.no-results.svelte-bz0zu3.svelte-bz0zu3{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-bz0zu3 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.leaflet-bottom ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-left ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-right ul.options.svelte-bz0zu3.svelte-bz0zu3{top:auto;bottom:calc(100% + 6px)}button.svelte-bz0zu3.svelte-bz0zu3{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-bz0zu3.svelte-bz0zu3:hover{background-color:transparent}button.svelte-bz0zu3:hover svg,button.svelte-bz0zu3:active svg{fill:#2b8bfb}.input-group.svelte-bz0zu3.svelte-bz0zu3{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-bz0zu3.svelte-bz0zu3{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-bz0zu3.svelte-bz0zu3{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-bz0zu3.svelte-bz0zu3{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:33px}.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:focus-within,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}

package/svelte/FeatureItem.svelte

@@ -1,8 +1,10 @@
-<script>export let feature;
-export let selected = false;
+<script>import { createEventDispatcher } from "svelte";
+export let feature;
+export let style = "default";
 export let showPlaceType;
 export let missingIconsCache;
 export let iconsBaseUrl;
+const dispatch = createEventDispatcher();
 const categories = feature.properties?.categories;
 let category;
 let imageUrl;
@@ -32,24 +34,51 @@ function handleImgError() {
 }
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<li tabindex="0" data-selected={selected} class:selected on:mouseenter on:focus>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<li
+  tabindex="-1"
+  role="option"
+  aria-selected={style === "selected"}
+  aria-checked={style === "picked"}
+  class={style}
+  on:mouseenter
+  on:focus={() => dispatch("select", undefined)}
+  on:click={(ev) => {
+    // this is to trigger the event if we click on focused item
+    if (document.activeElement !== ev.target) {
+      dispatch("select", undefined);
+    }
+  }}
+>
   {#if imageUrl}
-    <img src={imageUrl} alt={category} on:error={() => handleImgError()} />
+    <img
+      src={imageUrl}
+      alt={category}
+      title={placeType}
+      on:error={() => handleImgError()}
+    />
   {:else if feature.address}
-    <img src={iconsBaseUrl + "housenumber.svg"} alt={placeType} />
+    <img
+      src={iconsBaseUrl + "housenumber.svg"}
+      alt={placeType}
+      title={placeType}
+    />
   {:else if feature.id.startsWith("road.")}
-    <img src={iconsBaseUrl + "road.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "road.svg"} alt={placeType} title={placeType} />
   {:else if feature.id.startsWith("address.")}
-    <img src={iconsBaseUrl + "street.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "street.svg"} alt={placeType} title={placeType} />
   {:else if feature.id.startsWith("postal_code.")}
-    <img src={iconsBaseUrl + "postal_code.svg"} alt={placeType} />
+    <img
+      src={iconsBaseUrl + "postal_code.svg"}
+      alt={placeType}
+      title={placeType}
+    />
   {:else if feature.id.startsWith("poi.")}
-    <img src={iconsBaseUrl + "poi.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "poi.svg"} alt={placeType} title={placeType} />
   {:else if isReverse}
-    <img src={iconsBaseUrl + "reverse.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "reverse.svg"} alt={placeType} title={placeType} />
   {:else}
-    <img src={iconsBaseUrl + "area.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "area.svg"} alt={placeType} title={placeType} />
   {/if}
 
   <span class="texts">
@@ -58,7 +87,7 @@ function handleImgError() {
         {isReverse ? feature.place_name : feature.place_name.replace(/,.*/, "")}
       </span>
 
-      {#if showPlaceType === "always" || (showPlaceType && !feature.address && !feature.id.startsWith("road.") && !feature.id.startsWith("address.") && !feature.id.startsWith("postal_code.") && (!feature.id.startsWith("poi.") || !imageUrl) && !isReverse)}
+      {#if showPlaceType === "always" || (showPlaceType !== "never" && !feature.address && !feature.id.startsWith("road.") && !feature.id.startsWith("address.") && !feature.id.startsWith("postal_code.") && (!feature.id.startsWith("poi.") || !imageUrl) && !isReverse)}
         <span class="secondary">
           {placeType}
         </span>
@@ -81,6 +110,7 @@ function handleImgError() {
   font-size: 14px;
   line-height: 18px;
   min-width: fit-content;
+  outline: 0;
 }
 li:first-child {
   padding-top: 10px;
@@ -88,6 +118,16 @@ li:first-child {
 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;
 }
@@ -97,6 +137,13 @@ li.selected {
 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;

package/svelte/FeatureItem.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponent } from "svelte";
-import type { Feature } from "./types";
+import type { Feature, ShowPlaceType } from "./types";
 declare const __propDef: {
     props: {
         feature: Feature;
-        selected?: boolean;
-        showPlaceType: false | "always" | "ifNeeded";
+        style?: "selected" | "picked" | "default";
+        showPlaceType: ShowPlaceType;
         missingIconsCache: Set<string>;
         iconsBaseUrl: string;
     };
     events: {
         mouseenter: MouseEvent;
-        focus: FocusEvent;
+        select: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/svelte/GeocodingControl.svelte

@@ -40,10 +40,12 @@ export let apiKey;
 export let bbox = undefined;
 export let clearButtonTitle = "clear";
 export let clearOnBlur = false;
+export let clearListOnPick = false;
+export let keepListOpen = false;
 export let collapsed = false;
 export let country = undefined;
 export let debounceSearch = 200;
-export let enableReverse = false;
+export let enableReverse = "never";
 export let errorMessage = "Something went wrong…";
 export let filter = () => true;
 export let flyTo = true;
@@ -60,8 +62,8 @@ export let proximity = [
 export let reverseActive = enableReverse === "always";
 export let reverseButtonTitle = "toggle reverse geocoding";
 export let searchValue = "";
-export let showFullGeometry = true;
-export let showPlaceType = "ifNeeded";
+export let pickedResultStyle = "full-geometry";
+export let showPlaceType = "if-needed";
 export let showResultsWhileTyping = true;
 export let selectFirst = true;
 export let flyToSelected = false;
@@ -70,43 +72,68 @@ export let types = undefined;
 export let exhaustiveReverseGeocoding = false;
 export let excludeTypes = false;
 export let zoom = ZOOM_DEFAULTS;
-export let maxZoom = undefined;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "2.0.0" +
+    "2.1.0-rc1" +
     "/icons/";
+/**
+ * @deprecated use `adjustUrl`
+ */
 export let adjustUrlQuery = () => { };
-export function focus() {
-    input.focus();
-}
+/**
+ * Adjust geocoding URL before the fetch.
+ */
+export let adjustUrl = () => { };
+/**
+ * Focus the search input box.
+ *
+ * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+ */
+export function focus(options) {
+    input.focus(options);
+}
+/**
+ * Blur the search input box.
+ */
 export function blur() {
     input.blur();
 }
+/**
+ * Set the content of search input box.
+ *
+ * @param value text to set
+ * @param submit perform the search
+ */
 export function setQuery(value, submit = true, reverse = false) {
     searchValue = value;
     if (submit) {
         selectedItemIndex = -1;
-        handleOnSubmit();
+        handleSubmit();
     }
     else {
-        handleInput(!reverse, reverse);
+        handleInput(undefined, !reverse, reverse);
         setTimeout(() => {
             input.focus();
             input.select();
         });
     }
 }
+/**
+ * Clear search result list.
+ */
 export function clearList() {
     listFeatures = undefined;
     picked = undefined;
     selectedItemIndex = -1;
 }
+/**
+ * Clear geocoding search results from the map.
+ */
 export function clearMap() {
     markedFeatures = [];
     picked = undefined;
 }
-let focused = false;
 let listFeatures;
 let markedFeatures;
 let picked;
@@ -119,12 +146,11 @@ let abortController;
 let searchTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
+let focused = false;
 const missingIconsCache = new Set();
 const dispatch = createEventDispatcher();
-$: {
-    reverseActive = enableReverse === "always";
-}
-$: if (showFullGeometry &&
+$: reverseActive = enableReverse === "always";
+$: if (pickedResultStyle !== "marker-only" &&
     picked &&
     !picked.address &&
     picked.geometry.type === "Point" &&
@@ -133,14 +159,10 @@ $: if (showFullGeometry &&
 }
 $: {
     if (mapController && picked && picked.id !== prevIdToFly && flyTo) {
-        if (!picked.bbox ||
-            (picked.bbox[0] === picked.bbox[2] && picked.bbox[1] === picked.bbox[3])) {
-            mapController.flyTo(picked.center, computeZoom(picked));
-        }
-        else {
-            mapController.fitBounds(unwrapBbox(picked.bbox), 50, computeZoom(picked));
+        goToPicked();
+        if (clearListOnPick) {
+            listFeatures = undefined;
         }
-        listFeatures = undefined;
         markedFeatures = undefined;
         selectedItemIndex = -1;
     }
@@ -149,22 +171,23 @@ $: {
 $: if (mapController && selected && flyTo && flyToSelected) {
     mapController.flyTo(selected.center, computeZoom(selected));
 }
+$: showPolygonMarker =
+    pickedResultStyle === "full-geometry-including-polygon-center-marker";
 // if markerOnSelected was dynamically changed to false
 $: if (!markerOnSelected) {
-    mapController?.setMarkers(undefined, undefined);
+    mapController?.setFeatures(undefined, undefined, showPolygonMarker);
 }
 $: if (mapController && markerOnSelected && !markedFeatures) {
-    mapController.setMarkers(selected ? [selected] : undefined, undefined);
+    mapController.setFeatures(selected ? [selected] : undefined, picked, showPolygonMarker);
     mapController.setSelectedMarker(selected ? 0 : -1);
 }
 $: if (markedFeatures !== listFeatures) {
     markedFeatures = undefined;
 }
 $: if (mapController) {
-    mapController.setMarkers(markedFeatures, picked);
+    mapController.setFeatures(markedFeatures, picked, showPolygonMarker);
 }
 $: if (searchValue.length < minLength) {
-    picked = undefined;
     listFeatures = undefined;
     error = undefined;
     markedFeatures = listFeatures;
@@ -176,31 +199,30 @@ $: if (markedFeatures && mapController) {
 // close dropdown in the next cycle so that the selected item event has the chance to fire
 $: setTimeout(() => {
     focusedDelayed = focused;
-    if (clearOnBlur && !focused) {
+    if (clearOnBlur && !focusedDelayed) {
         searchValue = "";
     }
 });
-$: if (selectFirst && listFeatures?.length) {
+$: if (selectFirst &&
+    listFeatures?.length &&
+    selectedItemIndex == -1 &&
+    !picked) {
     selectedItemIndex = 0;
 }
-// clear selection on edit
-$: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    searchValue;
-    selectedItemIndex = -1;
-}
 $: selected = listFeatures?.[selectedItemIndex];
 $: if (mapController) {
     const coords = isQueryReverse(searchValue);
     mapController.setReverseMarker(coords ? [coords.decimalLongitude, coords.decimalLatitude] : undefined);
 }
-$: dispatch("select", selected);
-$: dispatch("pick", picked);
-$: dispatch("optionsVisibilityChange", focusedDelayed && !!listFeatures);
-$: dispatch("featuresListed", listFeatures);
-$: dispatch("featuresMarked", markedFeatures);
-$: dispatch("reverseToggle", reverseActive);
-$: dispatch("queryChange", searchValue);
+$: dispatch("select", { feature: selected });
+$: dispatch("pick", { feature: picked });
+$: optionsVisible =
+    !!listFeatures?.length && (focusedDelayed || keepListOpen);
+$: dispatch("optionsvisibilitychange", { optionsVisible });
+$: dispatch("featureslisted", { features: listFeatures });
+$: dispatch("featuresmarked", { features: markedFeatures });
+$: dispatch("reversetoggle", { reverse: reverseActive });
+$: dispatch("querychange", { query: searchValue });
 $: if (mapController) {
     mapController.indicateReverse(reverseActive);
 }
@@ -241,10 +263,11 @@ onDestroy(() => {
         mapController.setEventHandler(undefined);
         mapController.indicateReverse(false);
         mapController.setSelectedMarker(-1);
-        mapController.setMarkers(undefined, undefined);
+        mapController.setFeatures(undefined, undefined, false);
     }
 });
-function handleOnSubmit(event) {
+function handleSubmit(event) {
+    focused = false;
     if (searchTimeoutRef) {
         clearTimeout(searchTimeoutRef);
         searchTimeoutRef = undefined;
@@ -287,7 +310,13 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
     abortController = ac;
     try {
         const isReverse = isQueryReverse(searchValue);
-        const sp = new URLSearchParams();
+        const urlObj = new URL(apiUrl +
+            "/" +
+            encodeURIComponent(isReverse
+                ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
+                : searchValue) +
+            ".json");
+        const sp = urlObj.searchParams;
         if (language !== undefined) {
             sp.set("language", Array.isArray(language) ? language.join(",") : (language ?? ""));
         }
@@ -319,20 +348,20 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
         }
         sp.set("key", apiKey);
         adjustUrlQuery(sp);
-        const url = apiUrl +
-            "/" +
-            encodeURIComponent(isReverse
-                ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
-                : searchValue) +
-            ".json?" +
-            sp.toString();
+        adjustUrl(urlObj);
+        const url = urlObj.toString();
         if (url === lastSearchUrl) {
             if (byId) {
-                listFeatures = undefined;
+                if (clearListOnPick) {
+                    listFeatures = undefined;
+                }
                 picked = cachedFeatures[0];
             }
             else {
                 listFeatures = cachedFeatures;
+                if (listFeatures[selectedItemIndex]?.id !== selected?.id) {
+                    selectedItemIndex = -1;
+                }
             }
             return;
         }
@@ -347,7 +376,9 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
         const featureCollection = await res.json();
         dispatch("response", { url, featureCollection });
         if (byId) {
-            listFeatures = undefined;
+            if (clearListOnPick) {
+                listFeatures = undefined;
+            }
             picked = featureCollection.features[0];
             cachedFeatures = [picked];
         }
@@ -381,6 +412,9 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
                 });
             }
             cachedFeatures = listFeatures;
+            if (listFeatures[selectedItemIndex]?.id !== selected?.id) {
+                selectedItemIndex = -1;
+            }
             if (isReverse) {
                 input.focus();
             }
@@ -411,12 +445,11 @@ function zoomToResults() {
     for (const feature of markedFeatures) {
         const featZoom = computeZoom(feature);
         allZoom =
-            maxZoom ??
-                (allZoom === undefined
-                    ? featZoom
-                    : featZoom === undefined
-                        ? allZoom
-                        : Math.max(allZoom, featZoom));
+            allZoom === undefined
+                ? featZoom
+                : featZoom === undefined
+                    ? allZoom
+                    : Math.max(allZoom, featZoom);
         if (fuzzyOnly || !feature.matching_text) {
             for (const i of [0, 1, 2, 3]) {
                 bbox[i] = Math[i < 2 ? "min" : "max"](bbox[i], feature.bbox?.[i] ?? feature.center[i % 2]);
@@ -432,17 +465,24 @@ function zoomToResults() {
         }
     }
 }
+function goToPicked() {
+    if (!picked || !mapController) {
+        return;
+    }
+    if (!picked.bbox ||
+        (picked.bbox[0] === picked.bbox[2] && picked.bbox[1] === picked.bbox[3])) {
+        mapController.flyTo(picked.center, computeZoom(picked));
+    }
+    else {
+        mapController.fitBounds(unwrapBbox(picked.bbox), 50, computeZoom(picked));
+    }
+}
 function computeZoom(feature) {
     if (!feature.bbox ||
         (feature.bbox[0] !== feature.bbox[2] &&
             feature.bbox[1] !== feature.bbox[3])) {
         return undefined;
     }
-    if (typeof zoom === "number") {
-        return feature.id.startsWith("poi.") || feature.id.startsWith("address.")
-            ? maxZoom
-            : zoom;
-    }
     const index = feature.id.replace(/\..*/, "");
     return ((Array.isArray(feature.properties?.categories)
         ? feature.properties.categories.reduce((a, category) => {
@@ -465,22 +505,30 @@ function handleKeyDown(e) {
         return;
     }
     let dir = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-    if (dir) {
-        if (selectedItemIndex === (selectFirst ? 0 : -1) && dir === -1) {
-            selectedItemIndex = listFeatures.length;
-        }
-        selectedItemIndex += dir;
-        if (selectedItemIndex >= listFeatures.length) {
-            selectedItemIndex = -1;
-        }
-        if (selectedItemIndex < 0 && selectFirst) {
-            selectedItemIndex = 0;
-        }
-        e.preventDefault();
+    if (!dir) {
+        return;
+    }
+    input.focus();
+    focused = true;
+    e.preventDefault();
+    if (picked && selectedItemIndex === -1) {
+        selectedItemIndex = listFeatures.findIndex((listFeature) => listFeature.id === picked?.id);
+    }
+    if (selectedItemIndex === (picked || selectFirst ? 0 : -1) && dir === -1) {
+        selectedItemIndex = listFeatures.length;
+    }
+    selectedItemIndex += dir;
+    if (selectedItemIndex >= listFeatures.length) {
+        selectedItemIndex = -1;
+    }
+    if (selectedItemIndex < 0 && (picked || selectFirst)) {
+        selectedItemIndex = 0;
     }
 }
-function handleInput(debounce = true, reverse = false) {
+function handleInput(_, debounce = true, reverse = false) {
     error = undefined;
+    picked = undefined;
+    focused = true;
     if (showResultsWhileTyping || reverse) {
         if (searchTimeoutRef) {
             clearTimeout(searchTimeoutRef);
@@ -499,9 +547,25 @@ function handleInput(debounce = true, reverse = false) {
     }
 }
 function pick(feature) {
-    picked = feature;
-    searchValue = feature.place_name;
-    selectedItemIndex = -1;
+    if (picked && picked?.id === feature?.id) {
+        goToPicked();
+    }
+    else {
+        picked = feature;
+        searchValue = feature.place_name;
+    }
+}
+function handleMouseEnter(index) {
+    selectedItemIndex = index;
+}
+function handleMouseLeave() {
+    if (!selectFirst || picked) {
+        selectedItemIndex = -1;
+    }
+    // re-focus on picked
+    if (flyToSelected) {
+        goToPicked();
+    }
 }
 </script>
 
@@ -510,10 +574,8 @@ function pick(feature) {
   <MarkerIcon displayIn="list" />
 {/if}
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <form
-  tabindex="0"
-  on:submit|preventDefault={handleOnSubmit}
+  on:submit|preventDefault={handleSubmit}
   class:can-collapse={collapsed && searchValue === ""}
   class={className}
 >
@@ -527,8 +589,10 @@ function pick(feature) {
       bind:value={searchValue}
       on:focus={() => (focused = true)}
       on:blur={() => (focused = false)}
+      on:click={() => (focused = true)}
       on:keydown={handleKeyDown}
-      on:input={() => handleInput()}
+      on:input={handleInput}
+      on:change={() => (picked = undefined)}
       {placeholder}
       aria-label={placeholder}
     />
@@ -550,7 +614,7 @@ function pick(feature) {
       {/if}
     </div>
 
-    {#if enableReverse === true}
+    {#if enableReverse === "button"}
       <button
         type="button"
         class:active={reverseActive}
@@ -574,7 +638,7 @@ function pick(feature) {
         <ClearIcon />
       </button>
     </div>
-  {:else if !focusedDelayed}
+  {:else if !focusedDelayed && !keepListOpen}
     {""}
   {:else if listFeatures?.length === 0}
     <div class="no-results">
@@ -582,22 +646,25 @@ function pick(feature) {
 
       <div>{noResultsMessage}</div>
     </div>
-  {:else if focusedDelayed && listFeatures?.length}
+  {:else if listFeatures?.length && (focusedDelayed || keepListOpen)}
     <ul
-      on:mouseleave={() => {
-        if (!selectFirst) {
-          selectedItemIndex = -1;
-        }
-      }}
+      class="options"
+      on:mouseleave={handleMouseLeave}
       on:blur={() => undefined}
+      on:keydown={handleKeyDown}
+      role="listbox"
     >
       {#each listFeatures as feature, i (feature.id + (feature.address ? "," + feature.address : ""))}
         <FeatureItem
           {feature}
           {showPlaceType}
-          selected={selectedItemIndex === i}
-          on:mouseenter={() => (selectedItemIndex = i)}
-          on:focus={() => pick(feature)}
+          style={selectedItemIndex === i
+            ? "selected"
+            : picked?.id === feature.id
+              ? "picked"
+              : "default"}
+          on:mouseenter={() => handleMouseEnter(i)}
+          on:select={() => pick(feature)}
           {missingIconsCache}
           {iconsBaseUrl}
         />
@@ -726,10 +793,11 @@ div.no-results :global(svg) {
   height: 30px;
 }
 
-:global(.maplibregl-ctrl-bottom-left) ul,
-:global(.maplibregl-ctrl-bottom-right) ul {
+:global(.leaflet-bottom) ul.options,
+:global(.maplibregl-ctrl-bottom-left) ul.options,
+:global(.maplibregl-ctrl-bottom-right) ul.options {
   top: auto;
-  bottom: 100%;
+  bottom: calc(100% + 6px);
 }
 
 button {