fds-vue-core 7.2.1 → 7.2.3

package/dist/fds-vue-core.cjs.js

@@ -830,7 +830,7 @@ const _hoisted_1$y = { class: "flex items-start gap-2" };
 const _hoisted_2$q = { class: "h-7 flex items-center" };
 const _hoisted_3$j = { class: "leading-7" };
 const _hoisted_4$h = { class: "relative h-7" };
-const _hoisted_5$f = {
+const _hoisted_5$g = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
@@ -921,7 +921,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                 }), null, 16, ["class"])) : vue.createCommentVNode("", true)
               ])
             ], 2)) : vue.createCommentVNode("", true),
-            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [
+            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$g, [
               vue.renderSlot(_ctx.$slots, "default")
             ])) : vue.createCommentVNode("", true)
           ])
@@ -937,7 +937,7 @@ const _hoisted_2$p = {
 };
 const _hoisted_3$i = { class: "flex items-center gap-3" };
 const _hoisted_4$g = { class: "flex items-start gap-3 leading-8" };
-const _hoisted_5$e = { class: "mb-0-last-child" };
+const _hoisted_5$f = { class: "mb-0-last-child" };
 const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockContent",
   props: {
@@ -992,7 +992,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "headerInfo")
           ])
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_5$e, [
+        vue.createElementVNode("div", _hoisted_5$f, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ], 16, _hoisted_1$x);
@@ -1054,7 +1054,7 @@ const _hoisted_2$o = {
 };
 const _hoisted_3$h = { class: "inline-flex items-center" };
 const _hoisted_4$f = { class: "flex items-center gap-2" };
-const _hoisted_5$d = {
+const _hoisted_5$e = {
   key: 0,
   class: "w-full flex mt-2"
 };
@@ -1166,7 +1166,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
               ])
             ])
           ], 2),
-          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$d, [
+          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$e, [
             vue.renderSlot(_ctx.$slots, "extra-row")
           ])) : vue.createCommentVNode("", true)
         ], 16),
@@ -1192,7 +1192,7 @@ const _hoisted_4$e = {
   key: 0,
   class: "mb-1"
 };
-const _hoisted_5$c = { class: "flex items-start justify-between gap-4" };
+const _hoisted_5$d = { class: "flex items-start justify-between gap-4" };
 const _hoisted_6$9 = { class: "m-0 text-base font-main font-bold tracking-wide" };
 const _hoisted_7$9 = { class: "flex items-start gap-3" };
 const _hoisted_8$6 = {
@@ -1247,7 +1247,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["name"]),
           vue.createElementVNode("div", _hoisted_3$g, [
             __props.heading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, [
-              vue.createElementVNode("header", _hoisted_5$c, [
+              vue.createElementVNode("header", _hoisted_5$d, [
                 vue.createElementVNode("h3", _hoisted_6$9, vue.toDisplayString(__props.heading), 1),
                 vue.createElementVNode("div", _hoisted_7$9, [
                   vue.renderSlot(_ctx.$slots, "headerInfo")
@@ -9444,7 +9444,7 @@ const _hoisted_3$d = {
   class: "max-h-72 overflow-auto border border-gray-200 rounded-md"
 };
 const _hoisted_4$c = { class: "w-full text-left text-xs border-collapse" };
-const _hoisted_5$b = { class: "bg-gray-50" };
+const _hoisted_5$c = { class: "bg-gray-50" };
 const _hoisted_6$8 = { class: "py-2 px-3 font-semibold" };
 const _hoisted_7$8 = { class: "py-2 px-3 font-semibold" };
 const _hoisted_8$5 = ["onClick"];
@@ -9759,7 +9759,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
               default: vue.withCtx(() => [
                 !localStorageEntries.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, vue.toDisplayString(vue.unref(t)("FdsDevModeStorage.empty.localStorage")), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$d, [
                   vue.createElementVNode("table", _hoisted_4$c, [
-                    vue.createElementVNode("thead", _hoisted_5$b, [
+                    vue.createElementVNode("thead", _hoisted_5$c, [
                       vue.createElementVNode("tr", null, [
                         vue.createElementVNode("th", _hoisted_6$8, vue.toDisplayString(vue.unref(t)("FdsDevModeStorage.keyLabel")), 1),
                         vue.createElementVNode("th", _hoisted_7$8, vue.toDisplayString(vue.unref(t)("FdsDevModeStorage.valueLabel")), 1)
@@ -10169,7 +10169,7 @@ const _hoisted_1$h = ["id"];
 const _hoisted_2$e = { class: "flex items-center justify-start gap-1 w-[100px]" };
 const _hoisted_3$c = { class: "flex items-center justify-center w-auto gap-2 order-0 sm:order-0" };
 const _hoisted_4$b = { class: "whitespace-nowrap" };
-const _hoisted_5$a = { class: "flex items-center justify-end gap-1 order-2 sm:order-0 w-[100px]" };
+const _hoisted_5$b = { class: "flex items-center justify-end gap-1 order-2 sm:order-0 w-[100px]" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsPagination",
   props: {
@@ -10317,7 +10317,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("div", _hoisted_4$b, "/ " + vue.toDisplayString(__props.max), 1)
           ], 64))
         ]),
-        vue.createElementVNode("div", _hoisted_5$a, [
+        vue.createElementVNode("div", _hoisted_5$b, [
           __props.loading && loadingIndicator.value === "next" ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
             key: 0,
             size: "24px",
@@ -10357,7 +10357,7 @@ const _hoisted_1$g = { class: "inline-flex" };
 const _hoisted_2$d = ["onKeydown"];
 const _hoisted_3$b = ["aria-label"];
 const _hoisted_4$a = { class: "mb-1 flex items-start justify-between gap-2" };
-const _hoisted_5$9 = { class: "mb-0! min-w-0 whitespace-normal balance-text pr-2" };
+const _hoisted_5$a = { class: "mb-0! min-w-0 whitespace-normal balance-text pr-2" };
 const _hoisted_6$7 = {
   key: 1,
   class: "flex items-center gap-2"
@@ -10512,7 +10512,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
                 onClick: closePopover
               }, null, 8, ["aria-label"])
             ]),
-            vue.createElementVNode("p", _hoisted_5$9, [
+            vue.createElementVNode("p", _hoisted_5$a, [
               vue.renderSlot(_ctx.$slots, "default", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(__props.body), 1)
               ])
@@ -10615,7 +10615,7 @@ const _hoisted_2$c = {
 };
 const _hoisted_3$a = { class: "relative" };
 const _hoisted_4$9 = { key: 1 };
-const _hoisted_5$8 = { class: "font-bold mb-2 tracking-wide" };
+const _hoisted_5$9 = { class: "font-bold mb-2 tracking-wide" };
 const _hoisted_6$6 = {
   key: 0,
   class: "flex justify-center p-4"
@@ -11051,7 +11051,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
               }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "value", "clearButton", "mask", "maskOptions", "searchIcon"])
             ])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$9, [
-            vue.createElementVNode("div", _hoisted_5$8, vue.toDisplayString(__props.singleItemLabel), 1),
+            vue.createElementVNode("div", _hoisted_5$9, vue.toDisplayString(__props.singleItemLabel), 1),
             vue.createElementVNode("div", null, vue.toDisplayString(singleItemName.value), 1)
           ])),
           dropdownVisible.value && !singleItemName.value.length && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -11774,7 +11774,7 @@ const _hoisted_1$c = { class: "relative block" };
 const _hoisted_2$9 = { class: "relative" };
 const _hoisted_3$9 = { class: "relative" };
 const _hoisted_4$8 = { class: "flex items-center gap-2" };
-const _hoisted_5$7 = ["id", "role", "onMouseup"];
+const _hoisted_5$8 = ["id", "role", "onMouseup"];
 const _hoisted_6$5 = ["innerHTML"];
 const _hoisted_7$5 = ["onClick"];
 const _hoisted_8$3 = ["innerHTML"];
@@ -12576,7 +12576,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                         _: 2
                       }, 1032, ["id", "value", "checked", "onChange", "onKeydown"]))
                     ], 14, _hoisted_7$5))
-                  ], 42, _hoisted_5$7);
+                  ], 42, _hoisted_5$8);
                 }), 128)),
                 vue.unref(shouldShowLoadMore) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$1, [
                   vue.createElementVNode("div", {
@@ -13121,7 +13121,7 @@ const _hoisted_1$b = { class: "flex items-start" };
 const _hoisted_2$8 = { class: "flex-1 flex" };
 const _hoisted_3$8 = ["innerHTML"];
 const _hoisted_4$7 = { key: 1 };
-const _hoisted_5$6 = { key: 0 };
+const _hoisted_5$7 = { key: 0 };
 const _hoisted_6$4 = {
   key: 2,
   class: "items-center max-h-[28px]"
@@ -13376,7 +13376,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                       innerHTML: vue.unref(treeState)?.highlightText(__props.title, vue.unref(treeState)?.searchTerm?.value)
                     }, null, 8, _hoisted_3$8)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, vue.toDisplayString(__props.title), 1))
                   ]),
-                  childCount.value !== null ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, vue.toDisplayString(vue.unref(t)("FdsTreeView.childrenCountPrefix")) + vue.toDisplayString(childCount.value) + ")", 1)) : vue.createCommentVNode("", true)
+                  childCount.value !== null ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$7, vue.toDisplayString(vue.unref(t)("FdsTreeView.childrenCountPrefix")) + vue.toDisplayString(childCount.value) + ")", 1)) : vue.createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["id", "checked", "indeterminate"])
@@ -15384,7 +15384,7 @@ const _hoisted_1$7 = { class: "mb-6" };
 const _hoisted_2$6 = { class: "max-w-[487px]" };
 const _hoisted_3$6 = { class: "mb-3 flex w-full flex-row items-center" };
 const _hoisted_4$6 = { class: "m-0 font-bold text-gray-800" };
-const _hoisted_5$5 = { class: "ml-auto flex flex-row justify-end gap-4" };
+const _hoisted_5$6 = { class: "ml-auto flex flex-row justify-end gap-4" };
 const _hoisted_6$3 = { class: "relative h-[64px] overflow-hidden" };
 const _hoisted_7$3 = {
   key: 0,
@@ -15528,7 +15528,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2$6, [
           vue.createElementVNode("div", _hoisted_3$6, [
             vue.createElementVNode("p", _hoisted_4$6, vue.toDisplayString(weekText.value), 1),
-            vue.createElementVNode("div", _hoisted_5$5, [
+            vue.createElementVNode("div", _hoisted_5$6, [
               vue.createVNode(_sfc_main$K, {
                 icon: "arrowLeft",
                 disabled: disableLastWeekInteraction.value,
@@ -15635,7 +15635,7 @@ const _hoisted_3$5 = {
   class: "mt-2 mb-0"
 };
 const _hoisted_4$5 = { class: "h-[2px] absolute top-[22px] left-[50%] bg-white-solid transform -translate-x-1/2 w-[calc(100%-50px)]" };
-const _hoisted_5$4 = { class: "flex justify-between list-none mb-8 p-0" };
+const _hoisted_5$5 = { class: "flex justify-between list-none mb-8 p-0" };
 const _hoisted_6$2 = ["onClick", "disabled"];
 const _hoisted_7$2 = { key: 0 };
 const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
@@ -16032,7 +16032,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                 style: vue.normalizeStyle({ width: progressWidth.value })
               }, null, 4)
             ]),
-            vue.createElementVNode("div", _hoisted_5$4, [
+            vue.createElementVNode("div", _hoisted_5$5, [
               vue.createElementVNode("ol", {
                 ref_key: "stepperListRef",
                 ref: stepperListRef,
@@ -16061,7 +16061,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                       vue.createElementVNode("span", {
                         ref_for: true,
                         ref: (el) => setStepLabelRef(el, visibleIndex),
-                        class: vue.normalizeClass(["absolute bottom-0 text-blue-600 font-bold text-sm", { invisible: !showStepLabels.value }])
+                        class: vue.normalizeClass(["absolute bottom-0 text-blue-600 font-bold text-sm whitespace-nowrap", { invisible: !showStepLabels.value }])
                       }, vue.toDisplayString(entry.route.meta.wizard.name), 3)
                     ], 10, _hoisted_6$2)
                   ]);
@@ -18198,15 +18198,26 @@ function getLocalizedCountryName(iso2, locale) {
   const displayNames = createCountryDisplayNames(resolveDisplayLocale(locale));
   return displayNames?.of(iso2) ?? iso2;
 }
-function sortCountryOptionsByName(options, locale = "sv-SE") {
+const PRIORITIZED_COUNTRIES = ["SE", "NO", "DK", "FI"];
+function isPrioritizedCountry(iso2) {
+  return PRIORITIZED_COUNTRIES.includes(iso2);
+}
+function sortCountryOptionsByName(options, locale = "sv-SE", _preferredCountry = "SE") {
   const sortLocale = resolveDisplayLocale(locale).split(/[-_]/)[0] || "sv";
   return [...options].sort((a, b) => {
+    const priorityA = PRIORITIZED_COUNTRIES.indexOf(a.value);
+    const priorityB = PRIORITIZED_COUNTRIES.indexOf(b.value);
+    if (priorityA !== -1 || priorityB !== -1) {
+      if (priorityA === -1) return 1;
+      if (priorityB === -1) return -1;
+      if (priorityA !== priorityB) return priorityA - priorityB;
+    }
     const nameA = a.countryName || a.label;
     const nameB = b.countryName || b.label;
     return nameA.localeCompare(nameB, sortLocale);
   });
 }
-function buildCountryOptions(locale = "sv-SE") {
+function buildCountryOptions(locale = "sv-SE", preferredCountry = "SE") {
   const options = getCountries().map((iso2) => {
     const countryName = getLocalizedCountryName(iso2, locale);
     const countryCode = getCountryCallingCode(iso2);
@@ -18217,7 +18228,7 @@ function buildCountryOptions(locale = "sv-SE") {
       countryName
     };
   });
-  return sortCountryOptionsByName(options, locale);
+  return sortCountryOptionsByName(options, locale, preferredCountry);
 }
 function countryCodeToFlag(iso2) {
   const normalized = iso2.trim().toUpperCase();
@@ -18239,29 +18250,19 @@ function filterCountryOptions(options, query) {
   });
 }
 const _hoisted_1$5 = { class: "relative w-full" };
-const _hoisted_2$4 = {
-  key: 0,
-  class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none",
-  "aria-hidden": "true"
-};
-const _hoisted_3$4 = ["aria-expanded", "aria-label", "value", "disabled"];
-const _hoisted_4$4 = { class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2" };
-const _hoisted_5$3 = {
-  key: 0,
-  class: "px-3 text-sm text-gray-700"
-};
-const _hoisted_6$1 = ["id", "aria-selected"];
-const _hoisted_7$1 = ["onMousedown"];
-const _hoisted_8 = {
+const _hoisted_2$4 = { class: "absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none" };
+const _hoisted_3$4 = ["aria-expanded", "aria-label", "aria-controls", "aria-activedescendant", "value", "disabled"];
+const _hoisted_4$4 = ["disabled"];
+const _hoisted_5$4 = ["id", "aria-selected"];
+const _hoisted_6$1 = ["onMouseenter", "onClick"];
+const _hoisted_7$1 = { class: "flex items-center gap-2" };
+const _hoisted_8 = { class: "flex items-center gap-3" };
+const _hoisted_9 = {
   class: "shrink-0 text-xl leading-none",
   "aria-hidden": "true"
 };
-const _hoisted_9 = { class: "min-w-0 flex-1 font-bold tabular-nums text-gray-900 max-w-12" };
-const _hoisted_10 = { class: "min-w-0 flex-2 text-gray-900 truncate text-ellipsis" };
-const _hoisted_11 = {
-  class: "flex w-5 shrink-0 items-center justify-center",
-  "aria-hidden": "true"
-};
+const _hoisted_10 = { class: "text-gray-600" };
+const _hoisted_11 = { "aria-hidden": "true" };
 const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsPhonenumberCountryPicker",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -18269,48 +18270,85 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     valid: { type: [Boolean, null], default: void 0 },
     disabled: { type: Boolean, default: false },
     ariaLabel: { default: void 0 },
-    noResultsLabel: { default: "" },
     dataTestid: { default: void 0 },
     class: { type: [Boolean, null, String, Object, Array], default: void 0 }
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
   }),
-  emits: ["update:modelValue"],
-  setup(__props) {
+  emits: /* @__PURE__ */ vue.mergeModels(["noCountryResults"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
     const { t } = useFdsI18n();
     const country = vue.useModel(__props, "modelValue");
+    const emit = __emit;
     const props = __props;
     const rootRef = vue.ref(null);
-    const listRef = vue.ref(null);
     const inputRef = vue.ref(null);
     const searchQuery = vue.ref("");
     const dropdownOpen = vue.ref(false);
     const isFocused = vue.ref(false);
+    const hoveredCountry = vue.ref(null);
+    const activeIndex = vue.ref(-1);
+    const listboxId = `fds-phone-country-listbox-${Math.random().toString(36).slice(2, 9)}`;
     const selectedCountry = vue.computed(() => props.items.find((item) => item.value === country.value));
     const filteredCountries = vue.computed(() => filterCountryOptions(props.items, searchQuery.value));
+    const lastPrioritizedFilteredIndex = vue.computed(
+      () => filteredCountries.value.reduce(
+        (lastIndex, option, index) => isPrioritizedCountry(option.value) ? index : lastIndex,
+        -1
+      )
+    );
+    const hasNoCountryResults = vue.computed(
+      () => dropdownOpen.value && !props.disabled && searchQuery.value.trim().length > 0 && filteredCountries.value.length === 0
+    );
     const isInvalid = vue.computed(() => props.valid === false && !props.disabled);
-    const showSelectedPreview = vue.computed(() => !dropdownOpen.value && !isFocused.value && !!selectedCountry.value);
-    const inputDisplayValue = vue.computed(() => {
-      if (dropdownOpen.value || isFocused.value) {
-        return searchQuery.value;
+    const isSearching = vue.computed(() => searchQuery.value.length > 0);
+    const isHoverPreview = vue.computed(() => !!hoveredCountry.value && dropdownOpen.value);
+    const activeCountry = vue.computed(() => {
+      if (activeIndex.value < 0) {
+        return null;
       }
-      if (!selectedCountry.value) {
-        return "";
+      return filteredCountries.value[activeIndex.value] ?? null;
+    });
+    const showSelectedDialPreview = vue.computed(() => !!selectedCountry.value && !isSearching.value && !isHoverPreview.value);
+    const showHoverDialPreview = vue.computed(() => isHoverPreview.value && !!hoveredCountry.value);
+    const showActiveDialPreview = vue.computed(
+      () => !showHoverDialPreview.value && !!activeCountry.value && dropdownOpen.value && !isSearching.value
+    );
+    const dialPreviewCountry = vue.computed(() => {
+      if (showHoverDialPreview.value && hoveredCountry.value) {
+        return hoveredCountry.value;
+      }
+      if (showActiveDialPreview.value && activeCountry.value) {
+        return activeCountry.value;
       }
-      return `+${selectedCountry.value.countryCode}`;
+      if (showSelectedDialPreview.value && selectedCountry.value) {
+        return selectedCountry.value;
+      }
+      return null;
     });
+    const activeDescendantId = vue.computed(
+      () => activeIndex.value >= 0 ? `fds-phone-country-option-${activeIndex.value}` : void 0
+    );
     const inputDataAttrs = vue.computed(() => props.dataTestid ? { "data-testid": props.dataTestid } : {});
     const listDataAttrs = vue.computed(() => props.dataTestid ? { "data-testid": `${props.dataTestid}-list` } : {});
+    const dialPreviewClasses = vue.computed(() => [
+      "pointer-events-none absolute inset-0 flex items-center pl-10 pr-10 text-base leading-6 tabular-nums",
+      showHoverDialPreview.value ? "text-gray-900/50" : "text-gray-900"
+    ]);
     const inputClasses = vue.computed(() => [
-      "block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums",
-      showSelectedPreview.value ? "pl-10 pr-10" : "px-3 pr-10",
+      "block w-full h-12 rounded-md border border-gray-500 py-2 text-base leading-6 tabular-nums px-3 pr-10",
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50" : "bg-white text-gray-900",
-      isInvalid.value && "outline-2 -outline-offset-2 outline-red-600"
+      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50" : "cursor-text bg-white text-gray-900",
+      isInvalid.value && "outline-2 -outline-offset-2 outline-red-600",
+      hasNoCountryResults.value && "outline-red-600!"
+    ]);
+    const arrowButtonClasses = vue.computed(() => [
+      "absolute right-0 top-0 z-10 flex h-12 w-10 items-center justify-center border-0 bg-transparent p-0",
+      props.disabled ? "cursor-not-allowed" : "cursor-pointer"
     ]);
     const arrowClasses = vue.computed(() => [
-      "transition-transform duration-200 ease-in-out",
+      "pointer-events-none transition-transform duration-200 ease-in-out",
       {
         "fill-gray-500": props.disabled,
         "fill-red-600": isInvalid.value && !props.disabled,
@@ -18318,42 +18356,65 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         "rotate-180": dropdownOpen.value && !props.disabled
       }
     ]);
-    async function scrollToSelectedCountry() {
-      if (!country.value) {
-        return;
-      }
-      await vue.nextTick();
-      const list = listRef.value;
-      if (!list) {
-        return;
-      }
-      const selected = list.querySelector(`#fds-country-${country.value}`);
-      if (!selected) {
-        return;
-      }
-      const listRect = list.getBoundingClientRect();
-      const itemRect = selected.getBoundingClientRect();
-      const relativeTop = itemRect.top - listRect.top + list.scrollTop;
-      list.scrollTop = relativeTop - (list.clientHeight - selected.offsetHeight) / 2;
-    }
-    async function openDropdown() {
+    const openDropdown = () => {
       if (props.disabled) {
         return;
       }
       dropdownOpen.value = true;
       isFocused.value = true;
       searchQuery.value = "";
-      await scrollToSelectedCountry();
-    }
-    function closeDropdown() {
+      activeIndex.value = -1;
+    };
+    const clearHoverPreview = () => {
+      hoveredCountry.value = null;
+    };
+    const clearActiveOption = () => {
+      activeIndex.value = -1;
+    };
+    const setActiveIndex = (index) => {
+      if (!filteredCountries.value.length) {
+        clearActiveOption();
+        return;
+      }
+      activeIndex.value = Math.max(0, Math.min(index, filteredCountries.value.length - 1));
+    };
+    const setActiveIndexToSelectedOrFirst = () => {
+      const selectedIndex = filteredCountries.value.findIndex((option) => option.value === country.value);
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    };
+    const setActiveIndexToSelectedOrLast = () => {
+      const selectedIndex = filteredCountries.value.findIndex((option) => option.value === country.value);
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : filteredCountries.value.length - 1);
+    };
+    const onOptionMouseEnter = (option) => {
+      hoveredCountry.value = option;
+    };
+    const onOptionMouseLeave = () => {
+      clearHoverPreview();
+    };
+    const closeDropdown = () => {
       dropdownOpen.value = false;
       isFocused.value = false;
       searchQuery.value = "";
-    }
-    function onInputFocus() {
+      clearHoverPreview();
+      clearActiveOption();
+    };
+    const onInputFocus = () => {
       openDropdown();
-    }
-    function onInputBlur() {
+    };
+    const onArrowPointerDown = () => {
+      if (props.disabled) {
+        return;
+      }
+      if (dropdownOpen.value) {
+        closeDropdown();
+        inputRef.value?.blur();
+        return;
+      }
+      openDropdown();
+      inputRef.value?.focus();
+    };
+    const onInputBlur = () => {
       isFocused.value = false;
       window.setTimeout(() => {
         if (!dropdownOpen.value) {
@@ -18361,27 +18422,85 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         }
         closeDropdown();
       }, 120);
-    }
-    function onSearchInput(event) {
+    };
+    const onSearchInput = (event) => {
       const target = event.target;
       searchQuery.value = target.value;
+      clearActiveOption();
       if (!dropdownOpen.value) {
         dropdownOpen.value = true;
       }
-    }
-    function selectCountry(option) {
+    };
+    const onInputKeyDown = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      if (event.key === "ArrowDown" && filteredCountries.value.length > 0) {
+        event.preventDefault();
+        clearHoverPreview();
+        if (!dropdownOpen.value) {
+          openDropdown();
+          setActiveIndexToSelectedOrFirst();
+          return;
+        }
+        if (activeIndex.value < 0) {
+          setActiveIndexToSelectedOrFirst();
+          return;
+        }
+        setActiveIndex(activeIndex.value + 1);
+        return;
+      }
+      if (event.key === "ArrowUp" && filteredCountries.value.length > 0) {
+        event.preventDefault();
+        clearHoverPreview();
+        if (!dropdownOpen.value) {
+          openDropdown();
+          setActiveIndexToSelectedOrLast();
+          return;
+        }
+        if (activeIndex.value < 0) {
+          setActiveIndexToSelectedOrLast();
+          return;
+        }
+        setActiveIndex(activeIndex.value - 1);
+        return;
+      }
+      if (event.key === "Enter") {
+        if (!dropdownOpen.value && filteredCountries.value.length > 0) {
+          event.preventDefault();
+          openDropdown();
+          setActiveIndexToSelectedOrFirst();
+          return;
+        }
+        if (dropdownOpen.value && activeCountry.value) {
+          event.preventDefault();
+          selectCountry(activeCountry.value);
+        }
+        return;
+      }
+      if (event.key === "Escape" && dropdownOpen.value) {
+        event.preventDefault();
+        closeDropdown();
+        inputRef.value?.focus();
+        return;
+      }
+      if (event.key === "Tab" && dropdownOpen.value) {
+        closeDropdown();
+      }
+    };
+    const selectCountry = (option) => {
       country.value = option.value;
       closeDropdown();
       inputRef.value?.blur();
-    }
-    function onClickOutside(event) {
+    };
+    const onClickOutside = (event) => {
       if (!dropdownOpen.value || !rootRef.value) {
         return;
       }
       if (!rootRef.value.contains(event.target)) {
         closeDropdown();
       }
-    }
+    };
     vue.watch(
       () => country.value,
       () => {
@@ -18390,6 +18509,22 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         }
       }
     );
+    vue.watch(filteredCountries, (options) => {
+      if (!options.length) {
+        clearActiveOption();
+        return;
+      }
+      if (activeIndex.value >= options.length) {
+        setActiveIndex(options.length - 1);
+      }
+    });
+    vue.watch(
+      hasNoCountryResults,
+      (value) => {
+        emit("noCountryResults", value);
+      },
+      { immediate: true }
+    );
     vue.onMounted(() => {
       window.addEventListener("mousedown", onClickOutside);
     });
@@ -18403,7 +18538,14 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["relative w-32", props.class])
       }, [
         vue.createElementVNode("div", _hoisted_1$5, [
-          showSelectedPreview.value && selectedCountry.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$4, vue.toDisplayString(vue.unref(countryCodeToFlag)(selectedCountry.value.value)), 1)) : vue.createCommentVNode("", true),
+          !dropdownOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(dialPreviewClasses.value),
+            "aria-hidden": "true"
+          }, [
+            vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString(vue.unref(countryCodeToFlag)(dialPreviewCountry.value?.value ?? "")), 1),
+            vue.createTextVNode(" " + vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(dialPreviewCountry.value?.countryCode ?? ""), 1)
+          ], 2)) : vue.createCommentVNode("", true),
           vue.createElementVNode("input", vue.mergeProps({
             ref_key: "inputRef",
             ref: inputRef,
@@ -18412,58 +18554,78 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             role: "combobox",
             "aria-expanded": dropdownOpen.value,
             "aria-autocomplete": "list",
+            "aria-haspopup": "listbox",
             "aria-label": __props.ariaLabel,
-            value: inputDisplayValue.value,
+            "aria-controls": dropdownOpen.value ? listboxId : void 0,
+            "aria-activedescendant": activeDescendantId.value,
+            value: searchQuery.value,
             disabled: __props.disabled,
             class: inputClasses.value
           }, inputDataAttrs.value, {
             onFocus: onInputFocus,
             onBlur: onInputBlur,
-            onInput: onSearchInput,
-            class: "border-r-0 rounded-r-none"
+            onKeydown: onInputKeyDown,
+            onInput: onSearchInput
           }), null, 16, _hoisted_3$4),
-          vue.createElementVNode("div", _hoisted_4$4, [
+          vue.createElementVNode("button", {
+            type: "button",
+            tabindex: "-1",
+            disabled: __props.disabled,
+            class: vue.normalizeClass(arrowButtonClasses.value),
+            "aria-hidden": "true",
+            onMousedown: vue.withModifiers(onArrowPointerDown, ["prevent"])
+          }, [
             vue.createVNode(_sfc_main$L, {
               name: "arrowDown",
               size: 24,
               class: vue.normalizeClass(arrowClasses.value)
             }, null, 8, ["class"])
-          ])
+          ], 42, _hoisted_4$4)
         ]),
-        dropdownOpen.value && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
+        dropdownOpen.value && !__props.disabled && filteredCountries.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
           key: 0,
-          ref_key: "listRef",
-          ref: listRef,
           role: "listbox",
-          class: "absolute left-0 z-20 mt-1 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg"
-        }, listDataAttrs.value), [
-          filteredCountries.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_5$3, vue.toDisplayString(__props.noResultsLabel), 1)) : vue.createCommentVNode("", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredCountries.value, (option) => {
+          id: listboxId,
+          class: "absolute left-0 z-20 mt-1 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
+        }, listDataAttrs.value, { onMouseleave: clearHoverPreview }), [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredCountries.value, (option, index) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: option.value,
+              id: `fds-phone-country-option-${index}`,
               role: "option",
-              id: `fds-country-${option.value}`,
               "aria-selected": option.value === country.value,
-              class: "mb-0 border-b border-gray-100"
+              class: vue.normalizeClass(["mb-0 border-b border-gray-100 hover:bg-blue_t-100 active:bg-blue_t-200 last:border-b-0!", {
+                "border-gray-300": index === lastPrioritizedFilteredIndex.value,
+                "bg-blue_t-100": activeIndex.value === index
+              }])
             }, [
               vue.createElementVNode("button", {
                 type: "button",
-                class: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-blue_t-100 focus:bg-gray-100 focus:outline-none",
-                onMousedown: vue.withModifiers(($event) => selectCountry(option), ["prevent"])
+                tabindex: "-1",
+                class: "flex w-full items-center justify-between gap-2 py-4 px-3 text-left cursor-pointer",
+                onMouseenter: ($event) => onOptionMouseEnter(option),
+                onMouseleave: onOptionMouseLeave,
+                onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["prevent"])),
+                onClick: ($event) => selectCountry(option)
               }, [
-                vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(vue.unref(countryCodeToFlag)(option.value)), 1),
-                vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(option.countryCode), 1),
-                vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(option.countryName), 1),
+                vue.createElementVNode("span", _hoisted_7$1, [
+                  vue.createElementVNode("span", _hoisted_8, [
+                    vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(vue.unref(countryCodeToFlag)(option.value)), 1),
+                    vue.createTextVNode(" " + vue.toDisplayString(option.countryName), 1)
+                  ]),
+                  vue.createElementVNode("span", _hoisted_10, "(" + vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(option.countryCode) + ")", 1)
+                ]),
                 vue.createElementVNode("span", _hoisted_11, [
                   option.value === country.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
                     key: 0,
                     name: "check",
-                    size: 20,
+                    size: 24,
                     class: "fill-green-600"
                   })) : vue.createCommentVNode("", true)
                 ])
-              ], 40, _hoisted_7$1)
-            ], 8, _hoisted_6$1);
+              ], 40, _hoisted_6$1)
+            ], 10, _hoisted_5$4);
           }), 128))
         ], 16)) : vue.createCommentVNode("", true)
       ], 2);
@@ -18549,11 +18711,15 @@ const _hoisted_2$3 = {
   key: 1,
   class: "font-thin mb-1"
 };
-const _hoisted_3$3 = { class: "flex flex-wrap items-start" };
+const _hoisted_3$3 = { class: "flex flex-wrap items-start gap-x-1" };
 const _hoisted_4$3 = {
   key: 2,
   class: "text-red-700 font-bold mt-1"
 };
+const _hoisted_5$3 = {
+  key: 3,
+  class: "text-red-700 font-bold mt-1"
+};
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -18581,7 +18747,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     "country": { default: "SE" },
     "countryModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["update:country", "update:e164", "valid", "blur"], ["update:modelValue", "update:country"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
   setup(__props, { emit: __emit }) {
     const nationalNumber = vue.useModel(__props, "modelValue");
     const country = vue.useModel(__props, "country");
@@ -18590,10 +18756,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const { t, locale: fdsLocale } = useFdsI18n();
     const resolvedLocale = vue.computed(() => props.locale ?? fdsLocale.value);
     const countryItems = vue.computed(() => {
-      const options = props.countries?.length ? props.countries : buildCountryOptions(resolvedLocale.value);
+      const options = props.countries?.length ? props.countries : buildCountryOptions(resolvedLocale.value, props.defaultCountry);
       return sortCountryOptionsByName(
         options.map((option) => ({ ...option })),
-        resolvedLocale.value
+        resolvedLocale.value,
+        props.defaultCountry
       );
     });
     const phoneValidationOptions = vue.computed(() => ({ numberType: props.numberType }));
@@ -18608,6 +18775,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const showInvalidMessage = vue.computed(
       () => displayValid.value === false && !props.optional && props.invalidMessage && !props.disabled
     );
+    const noCountryResults = vue.ref(false);
     function runValidation() {
       const validationState = getPhoneValidationState(
         nationalNumber.value ?? "",
@@ -18629,6 +18797,10 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       runValidation();
       emit("blur", ev);
     }
+    function onNoCountryResults(value) {
+      noCountryResults.value = value;
+      emit("noCountryResults", value);
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
@@ -18644,10 +18816,10 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             valid: displayValid.value,
             disabled: __props.disabled,
             ariaLabel: vue.unref(t)("FdsPhonenumber.countryCode"),
-            "no-results-label": vue.unref(t)("FdsPhonenumber.noCountryResults"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-country` : void 0,
-            class: vue.normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""])
-          }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "no-results-label", "data-testid", "class"]),
+            class: vue.normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
+            onNoCountryResults
+          }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
           vue.createVNode(_sfc_main$u, {
             modelValue: nationalNumber.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalNumber.value = $event),
@@ -18658,11 +18830,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             ariaLabel: vue.unref(t)("FdsPhonenumber.phoneNumber"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-number` : void 0,
             class: vue.normalizeClass(["mb-0! min-w-0 flex-1", __props.inputClass ?? ""]),
-            onBlur: handleBlur,
-            inputClass: [" rounded-l-none"]
+            onBlur: handleBlur
           }, null, 8, ["modelValue", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
         ]),
-        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
+        noCountryResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(vue.unref(t)("FdsPhonenumber.noCountryResults")), 1)) : vue.createCommentVNode("", true),
+        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
       ]);
     };
   }