fds-vue-core 7.2.1 → 7.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -48,31 +48,31 @@
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "axios": "1.16.0",
-    "date-fns": "4.1.0",
+    "axios": "1.16.1",
+    "date-fns": "4.2.1",
     "imask": "7.6.1",
     "libphonenumber-js": "1.12.36",
-    "tailwindcss": "4.2.4",
-    "vue-i18n": "11.3.2"
+    "tailwindcss": "4.3.0",
+    "vue-i18n": "11.4.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "5.0.1",
-    "@intlify/unplugin-vue-i18n": "11.0.7",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-vitest": "10.2.12",
-    "@storybook/vue3": "10.2.12",
-    "@storybook/vue3-vite": "10.2.12",
-    "@tailwindcss/vite": "4.2.4",
+    "@chromatic-com/storybook": "5.2.1",
+    "@intlify/unplugin-vue-i18n": "11.2.3",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/vue3": "10.4.0",
+    "@storybook/vue3-vite": "10.4.0",
+    "@tailwindcss/vite": "4.3.0",
     "@types/node": "22.16.5",
-    "@vitejs/plugin-vue": "6.0.6",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vitest/browser": "3.2.4",
-    "fg-devkit": "1.8.4",
-    "storybook": "10.2.12",
-    "tsx": "4.21.0",
+    "fg-devkit": "1.8.5",
+    "storybook": "10.4.0",
+    "tsx": "4.22.3",
     "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-vue-devtools": "8.1.1",
+    "vite-plugin-vue-devtools": "8.1.2",
     "vitest": "3.2.4",
     "vue": "3.5.34"
   },

package/src/components/FdsWizard/FdsWizard.vue

@@ -503,7 +503,7 @@ defineSlots<{
                 </span>
                 <span
                   :ref="(el) => setStepLabelRef(el, visibleIndex)"
-                  class="absolute bottom-0 text-blue-600 font-bold text-sm"
+                  class="absolute bottom-0 text-blue-600 font-bold text-sm whitespace-nowrap"
                   :class="{ invisible: !showStepLabels }"
                 >
                   {{ entry.route.meta.wizard.name }}

package/src/components/Form/FdsPhonenumber/FdsPhonenumber.stories.ts

@@ -19,7 +19,7 @@ const meta: Meta<typeof FdsPhonenumber> = {
   },
   args: {
     label: 'Telefonnummer',
-    meta: 'Mobilnummer med landskod',
+    meta: '',
     disabled: false,
     optional: false,
     valid: undefined,

package/src/components/Form/FdsPhonenumber/FdsPhonenumber.vue

@@ -37,10 +37,13 @@ const { t, locale: fdsLocale } = useFdsI18n()
 const resolvedLocale = computed(() => props.locale ?? fdsLocale.value)
 
 const countryItems = 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,
+    props.defaultCountry,
   )
 })
 
@@ -61,6 +64,8 @@ const showInvalidMessage = computed(
   () => displayValid.value === false && !props.optional && props.invalidMessage && !props.disabled,
 )
 
+const noCountryResults = ref(false)
+
 function runValidation() {
   const validationState = getPhoneValidationState(
     nationalNumber.value ?? '',
@@ -85,6 +90,11 @@ function handleBlur(ev: FocusEvent) {
   runValidation()
   emit('blur', ev)
 }
+
+function onNoCountryResults(value: boolean) {
+  noCountryResults.value = value
+  emit('noCountryResults', value)
+}
 </script>
 
 <template>
@@ -95,16 +105,16 @@ function handleBlur(ev: FocusEvent) {
     <div v-if="meta" class="font-thin mb-1">
       {{ meta }}
     </div>
-    <div class="flex flex-wrap items-start">
+    <div class="flex flex-wrap items-start gap-x-1">
       <FdsPhonenumberCountryPicker
         v-model="country"
         :items="countryItems"
         :valid="displayValid"
         :disabled="disabled"
         :ariaLabel="t('FdsPhonenumber.countryCode')"
-        :no-results-label="t('FdsPhonenumber.noCountryResults')"
         :data-testid="dataTestid ? `${dataTestid}-country` : undefined"
         :class="['mb-0! shrink-0', selectClass ?? '']"
+        @no-country-results="onNoCountryResults"
       />
       <FdsInput
         v-model="nationalNumber"
@@ -116,9 +126,11 @@ function handleBlur(ev: FocusEvent) {
         :data-testid="dataTestid ? `${dataTestid}-number` : undefined"
         :class="['mb-0! min-w-0 flex-1', inputClass ?? '']"
         @blur="handleBlur"
-        :inputClass="[' rounded-l-none']"
       />
     </div>
+    <div v-if="noCountryResults" class="text-red-700 font-bold mt-1">
+      {{ t('FdsPhonenumber.noCountryResults') }}
+    </div>
     <div v-if="showInvalidMessage" class="text-red-700 font-bold mt-1">
       {{ invalidMessage }}
     </div>

package/src/components/Form/FdsPhonenumber/FdsPhonenumberCountryPicker.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type HTMLAttributes } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, type HTMLAttributes } from 'vue'
 import { useFdsI18n } from '../../../plugin/useFdsI18n'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
-import { countryCodeToFlag, filterCountryOptions, type CountryPhoneOption } from './countries'
+import { countryCodeToFlag, filterCountryOptions, isPrioritizedCountry, type CountryPhoneOption } from './countries'
 
 const { t } = useFdsI18n()
 
 const country = defineModel<string>({ required: true })
 
+const emit = defineEmits<{
+  noCountryResults: [value: boolean]
+}>()
+
 const props = withDefaults(
   defineProps<{
     items: CountryPhoneOption[]
     valid?: boolean | null
     disabled?: boolean
     ariaLabel?: string
-    noResultsLabel?: string
     dataTestid?: string
     class?: HTMLAttributes['class']
   }>(),
@@ -22,53 +25,108 @@ const props = withDefaults(
     valid: undefined,
     disabled: false,
     ariaLabel: undefined,
-    noResultsLabel: '',
     dataTestid: undefined,
     class: undefined,
   },
 )
 
 const rootRef = ref<HTMLElement | null>(null)
-const listRef = ref<HTMLUListElement | null>(null)
 const inputRef = ref<HTMLInputElement | null>(null)
 const searchQuery = ref('')
 const dropdownOpen = ref(false)
 const isFocused = ref(false)
+const hoveredCountry = ref<CountryPhoneOption | null>(null)
+const activeIndex = ref(-1)
+
+const listboxId = `fds-phone-country-listbox-${Math.random().toString(36).slice(2, 9)}`
 
 const selectedCountry = computed(() => props.items.find((item) => item.value === country.value))
 
 const filteredCountries = computed(() => filterCountryOptions(props.items, searchQuery.value))
 
+const lastPrioritizedFilteredIndex = computed(() =>
+  filteredCountries.value.reduce(
+    (lastIndex, option, index) => (isPrioritizedCountry(option.value) ? index : lastIndex),
+    -1,
+  ),
+)
+
+const hasNoCountryResults = computed(
+  () =>
+    dropdownOpen.value &&
+    !props.disabled &&
+    searchQuery.value.trim().length > 0 &&
+    filteredCountries.value.length === 0,
+)
+
 const isInvalid = computed(() => props.valid === false && !props.disabled)
 
-const showSelectedPreview = computed(() => !dropdownOpen.value && !isFocused.value && !!selectedCountry.value)
+const isSearching = computed(() => searchQuery.value.length > 0)
+
+const isHoverPreview = computed(() => !!hoveredCountry.value && dropdownOpen.value)
 
-const inputDisplayValue = computed(() => {
-  if (dropdownOpen.value || isFocused.value) {
-    return searchQuery.value
+const activeCountry = computed(() => {
+  if (activeIndex.value < 0) {
+    return null
   }
-  if (!selectedCountry.value) {
-    return ''
+  return filteredCountries.value[activeIndex.value] ?? null
+})
+
+const showSelectedDialPreview = computed(() => !!selectedCountry.value && !isSearching.value && !isHoverPreview.value)
+
+const showHoverDialPreview = computed(() => isHoverPreview.value && !!hoveredCountry.value)
+
+const showActiveDialPreview = computed(
+  () => !showHoverDialPreview.value && !!activeCountry.value && dropdownOpen.value && !isSearching.value,
+)
+
+const showDialPreviewPadding = computed(
+  () => showSelectedDialPreview.value || showHoverDialPreview.value || showActiveDialPreview.value,
+)
+
+const dialPreviewCountry = 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 = computed(() =>
+  activeIndex.value >= 0 ? `fds-phone-country-option-${activeIndex.value}` : undefined,
+)
+
 const inputDataAttrs = computed(() => (props.dataTestid ? { 'data-testid': props.dataTestid } : {}))
 
 const listDataAttrs = computed(() => (props.dataTestid ? { 'data-testid': `${props.dataTestid}-list` } : {}))
 
+const dialPreviewClasses = 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 = 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',
+  showDialPreviewPadding.value ? 'pl-10 pr-10' : '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',
+    : 'cursor-text bg-white text-gray-900',
   isInvalid.value && 'outline-2 -outline-offset-2 outline-red-600',
 ])
 
+const arrowButtonClasses = 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 = 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,
@@ -77,48 +135,76 @@ const arrowClasses = computed(() => [
   },
 ])
 
-async function scrollToSelectedCountry() {
-  if (!country.value) {
-    return
-  }
-  await nextTick()
-  const list = listRef.value
-  if (!list) {
-    return
-  }
-  const selected = list.querySelector<HTMLElement>(`#fds-country-${country.value}`)
-  if (!selected) {
+const openDropdown = () => {
+  if (props.disabled) {
     return
   }
+  dropdownOpen.value = true
+  isFocused.value = true
+  searchQuery.value = ''
+  activeIndex.value = -1
+}
 
-  // Scroll only inside the list — scrollIntoView would move the whole page.
-  const listRect = list.getBoundingClientRect()
-  const itemRect = selected.getBoundingClientRect()
-  const relativeTop = itemRect.top - listRect.top + list.scrollTop
-  list.scrollTop = relativeTop - (list.clientHeight - selected.offsetHeight) / 2
+const clearHoverPreview = () => {
+  hoveredCountry.value = null
 }
 
-async function openDropdown() {
-  if (props.disabled) {
+const clearActiveOption = () => {
+  activeIndex.value = -1
+}
+
+const setActiveIndex = (index: number) => {
+  if (!filteredCountries.value.length) {
+    clearActiveOption()
     return
   }
-  dropdownOpen.value = true
-  isFocused.value = true
-  searchQuery.value = ''
-  await scrollToSelectedCountry()
+  activeIndex.value = Math.max(0, Math.min(index, filteredCountries.value.length - 1))
 }
 
-function closeDropdown() {
+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: CountryPhoneOption) => {
+  hoveredCountry.value = option
+}
+
+const onOptionMouseLeave = () => {
+  clearHoverPreview()
+}
+
+const closeDropdown = () => {
   dropdownOpen.value = false
   isFocused.value = false
   searchQuery.value = ''
+  clearHoverPreview()
+  clearActiveOption()
 }
 
-function onInputFocus() {
+const onInputFocus = () => {
+  openDropdown()
+}
+
+const onArrowPointerDown = () => {
+  if (props.disabled) {
+    return
+  }
+  if (dropdownOpen.value) {
+    closeDropdown()
+    inputRef.value?.blur()
+    return
+  }
   openDropdown()
+  inputRef.value?.focus()
 }
 
-function onInputBlur() {
+const onInputBlur = () => {
   isFocused.value = false
   window.setTimeout(() => {
     if (!dropdownOpen.value) {
@@ -128,21 +214,86 @@ function onInputBlur() {
   }, 120)
 }
 
-function onSearchInput(event: Event) {
+const onSearchInput = (event: Event) => {
   const target = event.target as HTMLInputElement
   searchQuery.value = target.value
+  clearActiveOption()
   if (!dropdownOpen.value) {
     dropdownOpen.value = true
   }
 }
 
-function selectCountry(option: CountryPhoneOption) {
+const onInputKeyDown = (event: KeyboardEvent) => {
+  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: CountryPhoneOption) => {
   country.value = option.value
   closeDropdown()
   inputRef.value?.blur()
 }
 
-function onClickOutside(event: MouseEvent) {
+const onClickOutside = (event: MouseEvent) => {
   if (!dropdownOpen.value || !rootRef.value) {
     return
   }
@@ -160,6 +311,24 @@ watch(
   },
 )
 
+watch(filteredCountries, (options) => {
+  if (!options.length) {
+    clearActiveOption()
+    return
+  }
+  if (activeIndex.value >= options.length) {
+    setActiveIndex(options.length - 1)
+  }
+})
+
+watch(
+  hasNoCountryResults,
+  (value) => {
+    emit('noCountryResults', value)
+  },
+  { immediate: true },
+)
+
 onMounted(() => {
   window.addEventListener('mousedown', onClickOutside)
 })
@@ -172,13 +341,12 @@ onBeforeUnmount(() => {
 <template>
   <div ref="rootRef" class="relative w-32" :class="props.class">
     <div class="relative w-full">
-      <span
-        v-if="showSelectedPreview && selectedCountry"
-        class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none"
-        aria-hidden="true"
-      >
-        {{ countryCodeToFlag(selectedCountry.value) }}
-      </span>
+      <div v-if="dialPreviewCountry" :class="dialPreviewClasses" aria-hidden="true">
+        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none">
+          {{ countryCodeToFlag(dialPreviewCountry.value) }}
+        </span>
+        {{ t('common.plus') }}{{ dialPreviewCountry.countryCode }}
+      </div>
       <input
         ref="inputRef"
         type="search"
@@ -186,51 +354,70 @@ onBeforeUnmount(() => {
         role="combobox"
         :aria-expanded="dropdownOpen"
         aria-autocomplete="list"
+        aria-haspopup="listbox"
         :aria-label="ariaLabel"
-        :value="inputDisplayValue"
+        :aria-controls="dropdownOpen ? listboxId : undefined"
+        :aria-activedescendant="activeDescendantId"
+        :value="searchQuery"
         :disabled="disabled"
         :class="inputClasses"
         v-bind="inputDataAttrs"
         @focus="onInputFocus"
         @blur="onInputBlur"
+        @keydown="onInputKeyDown"
         @input="onSearchInput"
-        class="border-r-0 rounded-r-none"
       />
-      <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
+      <button
+        type="button"
+        tabindex="-1"
+        :disabled="disabled"
+        :class="arrowButtonClasses"
+        aria-hidden="true"
+        @mousedown.prevent="onArrowPointerDown"
+      >
         <FdsIcon name="arrowDown" :size="24" :class="arrowClasses" />
-      </div>
+      </button>
     </div>
-
     <ul
-      v-if="dropdownOpen && !disabled"
-      ref="listRef"
+      v-if="dropdownOpen && !disabled && filteredCountries.length > 0"
       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"
+      :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"
       v-bind="listDataAttrs"
+      @mouseleave="clearHoverPreview"
     >
-      <li v-if="filteredCountries.length === 0" class="px-3 text-sm text-gray-700">
-        {{ noResultsLabel }}
-      </li>
       <li
-        v-for="option in filteredCountries"
+        v-for="(option, index) in filteredCountries"
         :key="option.value"
+        :id="`fds-phone-country-option-${index}`"
         role="option"
-        :id="`fds-country-${option.value}`"
         :aria-selected="option.value === country"
-        class="mb-0 border-b border-gray-100"
+        class="mb-0 border-b border-gray-100 hover:bg-blue_t-100 active:bg-blue_t-200 last:border-b-0!"
+        :class="{
+          'border-gray-300': index === lastPrioritizedFilteredIndex,
+          'bg-blue_t-100': activeIndex === index,
+        }"
       >
         <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"
-          @mousedown.prevent="selectCountry(option)"
+          tabindex="-1"
+          class="flex w-full items-center justify-between gap-2 py-4 px-3 text-left cursor-pointer"
+          @mouseenter="onOptionMouseEnter(option)"
+          @mouseleave="onOptionMouseLeave"
+          @mousedown.prevent
+          @click="selectCountry(option)"
         >
-          <span class="shrink-0 text-xl leading-none" aria-hidden="true">{{ countryCodeToFlag(option.value) }}</span>
-          <span class="min-w-0 flex-1 font-bold tabular-nums text-gray-900 max-w-12">
-            {{ t('common.plus') }}{{ option.countryCode }}
+          <span class="flex items-center gap-2">
+            <span class="flex items-center gap-3">
+              <span class="shrink-0 text-xl leading-none" aria-hidden="true">
+                {{ countryCodeToFlag(option.value) }}
+              </span>
+              {{ option.countryName }}
+            </span>
+            <span class="text-gray-600">({{ t('common.plus') }}{{ option.countryCode }})</span>
           </span>
-          <span class="min-w-0 flex-2 text-gray-900 truncate text-ellipsis">{{ option.countryName }}</span>
-          <span class="flex w-5 shrink-0 items-center justify-center" aria-hidden="true">
-            <FdsIcon v-if="option.value === country" name="check" :size="20" class="fill-green-600" />
+          <span aria-hidden="true">
+            <FdsIcon v-if="option.value === country" name="check" :size="24" class="fill-green-600" />
           </span>
         </button>
       </li>

package/src/components/Form/FdsPhonenumber/countries.ts

@@ -36,20 +36,36 @@ function getLocalizedCountryName(iso2: string, locale: string): string {
   return displayNames?.of(iso2) ?? iso2
 }
 
+export const PRIORITIZED_COUNTRIES = ['SE', 'NO', 'DK', 'FI'] as const
+
+export function isPrioritizedCountry(iso2: string): boolean {
+  return PRIORITIZED_COUNTRIES.includes(iso2 as (typeof PRIORITIZED_COUNTRIES)[number])
+}
+
 export function sortCountryOptionsByName(
   options: CountryPhoneOption[],
   locale = 'sv-SE',
+  _preferredCountry = 'SE',
 ): CountryPhoneOption[] {
   const sortLocale = resolveDisplayLocale(locale).split(/[-_]/)[0] || 'sv'
   return [...options].sort((a, b) => {
+    const priorityA = PRIORITIZED_COUNTRIES.indexOf(a.value as (typeof PRIORITIZED_COUNTRIES)[number])
+    const priorityB = PRIORITIZED_COUNTRIES.indexOf(b.value as (typeof PRIORITIZED_COUNTRIES)[number])
+
+    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)
   })
 }
 
-/** Country options for phone fields, sorted alphabetically by localized country name. */
-export function buildCountryOptions(locale = 'sv-SE'): CountryPhoneOption[] {
+/** Country options for phone fields; SE/NO/DK/FI first, then alphabetical by name. */
+export function buildCountryOptions(locale = 'sv-SE', preferredCountry = 'SE'): CountryPhoneOption[] {
   const options: CountryPhoneOption[] = getCountries().map((iso2) => {
     const countryName = getLocalizedCountryName(iso2, locale)
     const countryCode = getCountryCallingCode(iso2)
@@ -61,7 +77,7 @@ export function buildCountryOptions(locale = 'sv-SE'): CountryPhoneOption[] {
     }
   })
 
-  return sortCountryOptionsByName(options, locale)
+  return sortCountryOptionsByName(options, locale, preferredCountry)
 }
 
 /** ISO 3166-1 alpha-2 to regional indicator flag emoji, e.g. `SE` → 🇸🇪 */

package/src/components/Form/FdsPhonenumber/types.ts

@@ -34,5 +34,6 @@ export interface FdsPhonenumberEmits {
   'update:country': [country: string]
   'update:e164': [phoneNumber: string]
   valid: [value: boolean | null]
+  noCountryResults: [value: boolean]
   blur: [ev: FocusEvent]
 }