fds-vue-core 7.2.6 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "7.2.6",
+  "version": "8.0.0",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "axios": "1.16.1",
-    "date-fns": "4.2.1",
+    "date-fns": "4.4.0",
     "imask": "7.6.1",
     "libphonenumber-js": "1.12.36",
     "tailwindcss": "4.3.0",
@@ -58,23 +58,23 @@
   "devDependencies": {
     "@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",
+    "@storybook/addon-a11y": "10.4.1",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-vitest": "10.4.1",
+    "@storybook/vue3": "10.4.1",
+    "@storybook/vue3-vite": "10.4.1",
     "@tailwindcss/vite": "4.3.0",
     "@types/node": "22.16.5",
     "@vitejs/plugin-vue": "6.0.7",
     "@vitest/browser": "3.2.4",
-    "fg-devkit": "1.8.5",
-    "storybook": "10.4.0",
-    "tsx": "4.22.3",
+    "fg-devkit": "1.8.6",
+    "storybook": "10.4.1",
+    "tsx": "4.22.4",
     "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "8.1.2",
-    "vitest": "3.2.4",
-    "vue": "3.5.34"
+    "vitest": "4.1.8",
+    "vue": "3.5.35"
   },
   "knip": {
     "ignoreBinaries": [

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.vue

@@ -32,6 +32,7 @@ const autoId = `fds-block-link-${Math.random().toString(36).slice(2, 9)}`
 const blockLinkId = computed(() => id.value ?? autoId)
 
 const isInteractive = computed(() => !props.disabled && props.interactive)
+const keyboardTabIndex = computed(() => (isInteractive.value ? 0 : -1))
 
 const innerClasses = computed(() => [
   props.disabled ? 'cursor-not-allowed shadow-none hover:border-transparent active:bg-transparent' : 'cursor-pointer',
@@ -65,7 +66,21 @@ function handleClick(event: Event) {
 }
 
 function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Enter' || event.key === ' ') {
+  if (!isInteractive.value) return
+
+  const isEnter = event.key === 'Enter' || event.code === 'Enter' || event.code === 'NumpadEnter'
+  const isSpace = event.key === ' ' || event.key === 'Spacebar'
+
+  // Links (incl. router-link): Enter activates natively; only Space needs a synthetic click.
+  if (componentType.value === 'a' || componentType.value === 'router-link') {
+    if (isSpace) {
+      event.preventDefault()
+      handleClick(event)
+    }
+    return
+  }
+
+  if (isEnter || isSpace) {
     event.preventDefault()
     handleClick(event)
   }
@@ -117,6 +132,7 @@ defineSlots<{
     :download="componentType === 'a' ? download : undefined"
     :disabled="componentType === 'button' ? props.disabled : undefined"
     :aria-disabled="props.disabled"
+    :tabindex="keyboardTabIndex"
     :data-testid="dataTestid"
     @click="handleClick"
     @keydown="handleKeydown"

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

@@ -15,7 +15,6 @@ const meta: Meta<typeof FdsPhonenumber> = {
     invalidMessage: { control: 'text' },
     defaultCountry: { control: 'text' },
     locale: { control: 'text' },
-    numberType: { control: 'select', options: ['mobile', 'any'] },
   },
   args: {
     label: 'Telefonnummer',
@@ -80,37 +79,6 @@ export const InvalidNumber: Story = {
   }),
 }
 
-export const AllowAnyNumberType: Story = {
-  args: {
-    numberType: 'any',
-    meta: 'Mobil och fast telefon accepteras (t.ex. Stockholm 08 + 6–7 siffror)',
-  },
-  render: (args) => ({
-    components: { FdsPhonenumber },
-    setup() {
-      // Stockholm: 08 + 7 siffror
-      const number = ref('081234567')
-      const country = ref('SE')
-      const phoneValid = ref<boolean | null>(null)
-      const e164 = ref('')
-      return { args, number, country, phoneValid, e164 }
-    },
-    template: `
-      <div>
-        <FdsPhonenumber
-          v-bind="args"
-          v-model="number"
-          v-model:country="country"
-          @valid="phoneValid = $event"
-          @update:e164="e164 = $event"
-        />
-        <p class="mt-4 text-sm">valid: {{ phoneValid }}</p>
-        <p class="text-sm">E.164: {{ e164 || '—' }}</p>
-      </div>
-    `,
-  }),
-}
-
 export const EnglishLocale: Story = {
   args: {
     locale: 'en',

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

@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<FdsPhonenumberProps>(), {
   defaultCountry: 'SE',
   countries: undefined,
   locale: undefined,
-  numberType: 'mobile',
   disabled: false,
   dataTestid: undefined,
   selectClass: undefined,
@@ -78,8 +77,6 @@ const countryItems = computed(() => {
   )
 })
 
-const phoneValidationOptions = computed(() => ({ numberType: props.numberType }))
-
 /** Set after the phone number field has blurred; validation does not run on input. */
 const committedValid = ref<boolean | null>(null)
 
@@ -104,19 +101,15 @@ const showInvalidMessage = computed(
 const noCountryResults = ref(false)
 
 function runValidation() {
-  const validationState = getPhoneValidationState(
-    nationalNumber.value ?? '',
-    country.value ?? 'SE',
-    phoneValidationOptions.value,
-  )
+  const validationState = getPhoneValidationState(nationalNumber.value ?? '', country.value ?? 'SE')
   committedValid.value = validationState
   emit('valid', validationState)
 
-  const result = validatePhoneNumber(nationalNumber.value ?? '', country.value ?? 'SE', phoneValidationOptions.value)
+  const result = validatePhoneNumber(nationalNumber.value ?? '', country.value ?? 'SE')
   emit('update:e164', result.isValid && result.phoneNumber ? result.phoneNumber : '')
 }
 
-watch([country, () => props.numberType], () => {
+watch(country, () => {
   if (committedValid.value === null) {
     return
   }

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

@@ -1,4 +1,4 @@
-import { getCountries, getCountryCallingCode } from 'libphonenumber-js'
+import { getCountries, getCountryCallingCode } from 'libphonenumber-js/mobile'
 
 export interface CountryPhoneOption {
   value: string

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

@@ -1,12 +1,6 @@
 import type { FdsInputProps } from '../FdsInput/types'
 import type { CountryPhoneOption } from './countries'
 
-/**
- * `mobile` – mobile numbers only (Google libphonenumber metadata).
- * `any` – mobile and fixed-line numbers.
- */
-export type FdsPhonenumberNumberType = 'mobile' | 'any'
-
 type FdsPhonenumberInputPassthroughProps = Pick<
   FdsInputProps,
   | 'id'
@@ -37,8 +31,6 @@ export interface FdsPhonenumberProps extends FdsPhonenumberInputPassthroughProps
   countries?: CountryPhoneOption[]
   /** BCP 47 locale for country names in the list, e.g. `sv-SE` or `en`. Falls back to FDS i18n locale. */
   locale?: string
-  /** Which number types are accepted when validating with libphonenumber-js. */
-  numberType?: FdsPhonenumberNumberType
   disabled?: boolean
   dataTestid?: string
   selectClass?: string

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

@@ -1,10 +1,4 @@
-import type { CountryCode, NumberType } from 'libphonenumber-js'
-import parsePhoneNumberFromString from 'libphonenumber-js/max'
-import type { FdsPhonenumberNumberType } from './types'
-
-interface ValidatePhoneOptions {
-  numberType?: FdsPhonenumberNumberType
-}
+import parsePhoneNumberFromString, { type CountryCode, type NumberType } from 'libphonenumber-js/mobile'
 
 /** Result shape kept stable for consumers (same fields as previous `phone` package integration). */
 export interface PhoneValidationResult {
@@ -24,16 +18,9 @@ const INVALID_RESULT: PhoneValidationResult = {
 }
 
 const MOBILE_NUMBER_TYPES = new Set<NumberType>(['MOBILE', 'FIXED_LINE_OR_MOBILE'])
-const ANY_NUMBER_TYPES = new Set<NumberType>(['MOBILE', 'FIXED_LINE', 'FIXED_LINE_OR_MOBILE'])
 
-function matchesNumberType(type: NumberType | undefined, numberType: FdsPhonenumberNumberType): boolean {
-  if (!type) {
-    return numberType === 'any'
-  }
-  if (numberType === 'mobile') {
-    return MOBILE_NUMBER_TYPES.has(type)
-  }
-  return ANY_NUMBER_TYPES.has(type)
+function isMobileNumberType(type: NumberType | undefined): boolean {
+  return type !== undefined && MOBILE_NUMBER_TYPES.has(type)
 }
 
 function buildCandidates(value: string): string[] {
@@ -61,11 +48,7 @@ function toValidationResult(parsed: NonNullable<ReturnType<typeof parsePhoneNumb
   }
 }
 
-function runPhoneValidation(
-  value: string,
-  countryIso2: string,
-  numberType: FdsPhonenumberNumberType,
-): PhoneValidationResult {
+function runPhoneValidation(value: string, countryIso2: string): PhoneValidationResult {
   const country = countryIso2 as CountryCode
 
   for (const candidate of buildCandidates(value)) {
@@ -73,7 +56,7 @@ function runPhoneValidation(
     if (!parsed?.isValid()) {
       continue
     }
-    if (matchesNumberType(parsed.getType(), numberType)) {
+    if (isMobileNumberType(parsed.getType())) {
       return toValidationResult(parsed)
     }
   }
@@ -81,27 +64,19 @@ function runPhoneValidation(
   return INVALID_RESULT
 }
 
-export function validatePhoneNumber(
-  nationalNumber: string,
-  countryIso2: string,
-  options: ValidatePhoneOptions = {},
-): PhoneValidationResult {
+export function validatePhoneNumber(nationalNumber: string, countryIso2: string): PhoneValidationResult {
   const trimmed = nationalNumber.trim()
   if (!trimmed) {
     return INVALID_RESULT
   }
 
-  return runPhoneValidation(trimmed, countryIso2, options.numberType ?? 'mobile')
+  return runPhoneValidation(trimmed, countryIso2)
 }
 
 /** `null` when empty, otherwise whether the number is valid for the selected country. */
-export function getPhoneValidationState(
-  nationalNumber: string,
-  countryIso2: string,
-  options: ValidatePhoneOptions = {},
-): boolean | null {
+export function getPhoneValidationState(nationalNumber: string, countryIso2: string): boolean | null {
   if (!nationalNumber.trim()) {
     return null
   }
-  return validatePhoneNumber(nationalNumber, countryIso2, options).isValid
+  return validatePhoneNumber(nationalNumber, countryIso2).isValid
 }

package/src/index.ts

@@ -263,11 +263,7 @@ export {
   type PhoneValidationResult,
 } from './components/Form/FdsPhonenumber/validatePhone'
 
-export type {
-  FdsPhonenumberEmits,
-  FdsPhonenumberNumberType,
-  FdsPhonenumberProps,
-} from './components/Form/FdsPhonenumber/types'
+export type { FdsPhonenumberEmits, FdsPhonenumberProps } from './components/Form/FdsPhonenumber/types'
 
 // Table component types
 export type { FdsTableProps } from './components/Table/FdsTable/types'

package/src/lang/en.json

@@ -29,7 +29,7 @@
   "FdsDevModeStorage.tabs.localStorage": "localStorage",
   "FdsDevModeStorage.tabs.sessionStorage": "sessionStorage",
   "FdsDevModeStorage.valueLabel": "Value",
-  "FdsInput.clearInput": "Clear input",
+  "FdsInput.clearInput": "Delete text",
   "FdsInput.hidePassword": "Hide",
   "FdsInput.openDatePicker": "Open date picker",
   "FdsInput.showPassword": "Show",

package/src/lang/sv.json

@@ -29,7 +29,7 @@
   "FdsDevModeStorage.tabs.localStorage": "localStorage",
   "FdsDevModeStorage.tabs.sessionStorage": "sessionStorage",
   "FdsDevModeStorage.valueLabel": "Värde",
-  "FdsInput.clearInput": "Rensa input",
+  "FdsInput.clearInput": "Rensa text",
   "FdsInput.hidePassword": "Dölj",
   "FdsInput.openDatePicker": "Öppna datumväljare",
   "FdsInput.showPassword": "Visa",