@cnamts/synapse 1.0.17 → 1.0.19

package/src/components/Amelipro/AmeliproFilters/__tests__/AmeliproFilters.spec.ts

@@ -0,0 +1,180 @@
+import { shallowMount, type VueWrapper, DOMWrapper } from '@vue/test-utils'
+import { describe, it, expect, beforeEach } from 'vitest'
+import AmeliproFilters from '../AmeliproFilters.vue'
+import type { AmeliproFilterItem } from '../types'
+
+const createItems = (): AmeliproFilterItem[] => [
+	{ id: 'the-item-id-1', label: 'The item label 1', value: 'the-item-value-1' },
+	{ id: 'the-item-id-2', label: 'The item label 2', value: 'the-item-value-2', isChecked: true },
+	{ id: 'the-item-id-3', label: 'The item label 3', value: 'the-item-value-3' },
+	{ id: 'the-item-id-4', label: 'The item label 4', value: 'the-item-value-4', isChecked: true },
+]
+
+describe('AmeliproFilters', () => {
+	let wrapper: VueWrapper<InstanceType<typeof AmeliproFilters>>
+	let inputs: DOMWrapper<HTMLInputElement>[]
+
+	beforeEach(() => {
+		wrapper = shallowMount(AmeliproFilters, {
+			props: {
+				groupId: 'group-1',
+				groupLabel: 'Group Label',
+				value: createItems(),
+				unique: false,
+			},
+		})
+		inputs = wrapper.findAll<HTMLInputElement>('.amelipro-filters__filter-input')
+	})
+
+	it('renders correct number of filter items', () => {
+		expect(inputs.length).toBe(4)
+	})
+
+	it('renders correct labels', () => {
+		const labels = wrapper.findAll('.amelipro-filters__filter__label')
+		expect(labels.map(l => l.text())).toEqual([
+			'The item label 1',
+			'The item label 2',
+			'The item label 3',
+			'The item label 4',
+		])
+	})
+
+	it('does not set ARIA attributes on root container', async () => {
+		expect(wrapper.attributes('role')).toBeUndefined()
+		expect(wrapper.attributes('aria-labelledby')).toBeUndefined()
+
+		await wrapper.setProps({ unique: true })
+
+		expect(wrapper.attributes('role')).toBeUndefined()
+		expect(wrapper.attributes('aria-labelledby')).toBeUndefined()
+	})
+
+	it('group label has correct text and id', () => {
+		const labelEl = wrapper.find('.amelipro-filters__label')
+		expect(labelEl.text()).toBe('Group Label')
+		expect(labelEl.attributes('id')).toBe('group-1-label')
+	})
+
+	it('applies d-sr-only class when hiddenLabel is true', async () => {
+		await wrapper.setProps({ hiddenLabel: true })
+		const label = wrapper.find('.amelipro-filters__label')
+		expect(label.classes()).toContain('d-sr-only')
+	})
+
+	it('emits "input" and "change:selected" for multiple (checkbox) mode', async () => {
+		await inputs[0]!.trigger('click')
+		await inputs[2]!.trigger('click')
+
+		const emittedInput = wrapper.emitted('input')! as unknown[][][]
+		const emittedChange = wrapper.emitted('change:selected')! as unknown[][]
+
+		expect(emittedInput.length).toBe(2)
+		expect(emittedChange.length).toBe(2)
+
+		const selectedValuesFirst = (emittedChange[0]![0] as AmeliproFilterItem[]).map(i => i.value)
+		const selectedValuesSecond = (emittedChange[1]![0] as AmeliproFilterItem[]).map(i => i.value)
+
+		expect(selectedValuesFirst).toContain('the-item-value-1')
+		expect(selectedValuesFirst).toContain('the-item-value-2')
+		expect(selectedValuesFirst).toContain('the-item-value-4')
+
+		expect(selectedValuesSecond).toContain('the-item-value-1')
+		expect(selectedValuesSecond).toContain('the-item-value-2')
+		expect(selectedValuesSecond).toContain('the-item-value-3')
+		expect(selectedValuesSecond).toContain('the-item-value-4')
+	})
+
+	it('emits "input" and "change:selected" for unique (radio) mode', async () => {
+		await wrapper.setProps({ unique: true })
+		inputs = wrapper.findAll<HTMLInputElement>('input')
+
+		// Simule un changement
+		inputs[0]!.element.checked = true
+		await inputs[0]!.trigger('change')
+		inputs[1]!.element.checked = true
+		await inputs[1]!.trigger('change')
+
+		const emittedInput = wrapper.emitted('input') as AmeliproFilterItem[][][]
+		const emittedChange = wrapper.emitted('change:selected') as string[][]
+
+		expect(emittedInput.length).toBe(2)
+		expect(emittedChange.length).toBe(2)
+
+		// Vérifie les valeurs sélectionnées
+		const firstInputValues = emittedInput[0]![0]!.map(i => i.value)
+		const secondInputValues = emittedInput[1]![0]!.map(i => i.value)
+
+		expect(firstInputValues).toContain('the-item-value-1')
+		expect(secondInputValues).toContain('the-item-value-2')
+
+		expect(emittedChange[0]![0]).toBe('the-item-value-1')
+		expect(emittedChange[1]![0]).toBe('the-item-value-2')
+	})
+
+	it('updates items when props.value changes', async () => {
+		await wrapper.setProps({ value: [] })
+		expect(wrapper.findAll('.amelipro-filters__item').length).toBe(0)
+
+		await wrapper.setProps({ value: createItems() })
+		expect(wrapper.findAll('.amelipro-filters__item').length).toBe(4)
+	})
+
+	it('updates items correctly when props.value changes in unique mode', async () => {
+		await wrapper.setProps({ unique: true, value: [] })
+		expect(wrapper.findAll('.amelipro-filters__item').length).toBe(0)
+
+		await wrapper.setProps({ value: createItems() })
+		expect(wrapper.findAll('.amelipro-filters__item').length).toBe(4)
+	})
+
+	it('updates input attributes when unique prop changes', async () => {
+		await wrapper.setProps({ unique: true })
+		inputs = wrapper.findAll<HTMLInputElement>('input')
+
+		expect(inputs[0]!.attributes('type')).toBe('radio')
+		expect(inputs[0]!.attributes('name')).toBe('group-1')
+		expect(inputs[0]!.attributes('value')).toBe('the-item-value-1')
+	})
+
+	it('updates label text when groupLabel prop changes', async () => {
+		const label = wrapper.find('.amelipro-filters__label')
+		expect(label.text()).toBe('Group Label')
+
+		await wrapper.setProps({ groupLabel: 'New Label' })
+		expect(wrapper.find('.amelipro-filters__label').text()).toBe('New Label')
+	})
+
+	it('computes selectedValue correctly in unique mode', async () => {
+		await wrapper.setProps({ unique: true })
+		const firstInput = wrapper.findAll<HTMLInputElement>('input')[0]!
+		firstInput.element.checked = true
+		await firstInput.trigger('change')
+
+		const emittedChange = wrapper.emitted('change:selected') as string[][]
+		expect(emittedChange[0]![0]).toBe('the-item-value-1')
+	})
+
+	it('applies item-spacing class conditionally based on smAndUp', async () => {
+		// TS-safe access
+		const vmTyped = wrapper.vm as unknown as { smAndUp: boolean }
+		vmTyped.smAndUp = true
+		await wrapper.vm.$nextTick()
+		const firstItem = wrapper.find('.amelipro-filters__item')
+		expect(firstItem.classes()).toContain('item-spacing')
+	})
+
+	it('sets correct ARIA attributes for checkbox items', () => {
+		const divs = wrapper.findAll('.amelipro-filters__filter-input')
+		divs.forEach((div, i) => {
+			const item = createItems()[i]!
+			expect(div.attributes('role')).toBe('checkbox')
+			if (item.isChecked) {
+				expect(div.attributes('aria-checked')).toBe('true')
+			}
+			else {
+				expect(div.attributes('aria-checked')).toBeUndefined()
+			}
+		})
+	})
+})

package/src/components/Amelipro/AmeliproFilters/types.d.ts

@@ -0,0 +1,6 @@
+export interface AmeliproFilterItem {
+	id: string
+	label: string
+	value: string
+	isChecked?: boolean
+}

package/src/components/Amelipro/AmeliproFirstLogin/AmeliproFirstLogin.vue

@@ -284,7 +284,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .rounded {
 	border-radius: 2.5rem !important;

package/src/components/Amelipro/AmeliproFooter/AmeliproFooter.vue

@@ -401,7 +401,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 :deep(.v-btn):focus {
 	outline-color: apTokens.$ap-white;

package/src/components/Amelipro/AmeliproHeader/AmeliproHeader.vue

@@ -461,7 +461,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .header-separator {
 	width: 1px;

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBar.vue

@@ -113,7 +113,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .header-bar {
 	z-index: 1;

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBrandSection/AmeliproHeaderBrandSection.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import { type PropType, computed, useSlots } from 'vue'
 	import AmeliproLogoAm from '../AmeliproLogoAm/AmeliproLogoAm.vue'
-	import type { IndexedObject } from '../../../types'
 	import type { LogoInfo } from './types'
 	import { LogoSizeEnum } from '../AmeliproLogoAm/LogoSizeEnum'
 	import { type RouteLocationRaw } from 'vue-router'
@@ -81,7 +80,7 @@
 	const showDivider = computed<boolean>(() => Boolean(ameliproLogo.value || props.serviceTitle))
 	const showServiceSubTitle = computed<boolean>(() => Boolean(props.serviceTitle && props.serviceSubTitle))
 	const dividerColor = computed<string>(() => (props.themeAmelipro ? '#006386' : convertToHex('ap-blue')))
-	const dividerDimensions = computed<IndexedObject>(() => {
+	const dividerDimensions = computed(() => {
 		const { xSmall, small, normal } = dividerDimensionsMapping
 
 		if (xs.value) {
@@ -180,7 +179,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .header-brand-section {
 	overflow: hidden;

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBrandSection/dividerDimensionsMapping.ts

@@ -1,6 +1,4 @@
-import type { IndexedObject } from '../../../types'
-
-export const dividerDimensionsMapping: IndexedObject<IndexedObject> = {
+export const dividerDimensionsMapping = {
 	normal: {
 		width: '22',
 		height: '64',
@@ -13,4 +11,4 @@ export const dividerDimensionsMapping: IndexedObject<IndexedObject> = {
 		width: '11',
 		height: '32',
 	},
-}
+} as const

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproLogoAm/AmeliproLogoAm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import type { IndexedObject } from '../../../types'
 	import { LogoSizeEnum } from './LogoSizeEnum'
 	import { computed } from 'vue'
 	import { convertToHex } from '@/utils/functions/convertToHex'
@@ -25,7 +24,7 @@
 	})
 
 	const fillColor = computed<string>(() => convertToHex('ap-blue'))
-	const dimensions = computed<IndexedObject>(() => logoDimensionsMapping[props.size])
+	const dimensions = computed(() => logoDimensionsMapping[props.size]!)
 	const label = computed<string>(() => {
 		const COLON_SEPARATOR = ' : '
 

package/src/components/Amelipro/AmeliproIconBtn/AmeliproIconBtn.vue

@@ -275,7 +275,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .v-btn {
 	background-color: transparent;

package/src/components/Amelipro/AmeliproIllustratedDataTile/AmeliproIllustratedDataTile.vue

@@ -142,7 +142,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .illustrated-data-tile__wrapper {
 	border-radius: 0.5rem;

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.vue

@@ -47,7 +47,7 @@
 
 	const selectedValue = computed<string | null>(() => {
 		const checkedItem = currentValue.value.filter(e => e.isChecked)
-		return checkedItem.length === 1 ? checkedItem[0].value : null
+		return checkedItem[0] ? checkedItem[0].value : null
 	})
 
 	const emitChangeEvent = (item: AmeliproIllustratedRadioGroupItem) => {
@@ -179,7 +179,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .icon-radio__wrapper {
 	border-radius: 10px;

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/__tests__/AmeliproIllustratedRadioGroup.spec.ts

@@ -252,7 +252,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('aria-checked')).toBe('false')
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].isChecked = true
+				modelValue[0]!.isChecked = true
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('aria-checked')).toBe('true')
 			})
@@ -275,7 +275,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('checked')).toBeUndefined()
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].isChecked = true
+				modelValue[0]!.isChecked = true
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('checked')).toBe('')
 			})
@@ -290,7 +290,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				await vueWrapper.setProps({ disabled: false })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('disabled')).toBeUndefined()
 
-				modelValue[0].disabled = true
+				modelValue[0]!.disabled = true
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('disabled')).toBe('')
 			})
@@ -315,7 +315,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('value')).toBe('the-item-value-1')
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].value = 'New value'
+				modelValue[0]!.value = 'New value'
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('value')).toBe('New value')
 			})
@@ -337,7 +337,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(finder().classes('bg-ap-blue-lighten-3')).toBe(true)
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].isChecked = true
+				modelValue[0]!.isChecked = true
 				await vueWrapper.setProps({ modelValue })
 				expect(finder().classes('bg-ap-blue-darken-1')).toBe(true)
 				expect(finder().classes('bg-ap-blue-lighten-3')).toBe(false)
@@ -368,7 +368,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(finder().classes('text-ap-blue-darken-1')).toBe(true)
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].isChecked = true
+				modelValue[0]!.isChecked = true
 				await vueWrapper.setProps({ modelValue })
 				expect(finder().classes('text-ap-white')).toBe(true)
 				expect(finder().classes('text-ap-blue-darken-1')).toBe(false)
@@ -378,7 +378,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(finder().text()).toBe('the item label 1')
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].label = 'New item label'
+				modelValue[0]!.label = 'New item label'
 				await vueWrapper.setProps({ modelValue })
 				expect(finder().text()).toBe('New item label')
 			})
@@ -410,7 +410,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBe('vaccination')
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].icon = 'new-icon'
+				modelValue[0]!.icon = 'new-icon'
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBe('new-icon')
 			})
@@ -419,7 +419,7 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe('ap-yellow')
 
 				const { modelValue } = modifiedPropValues()
-				modelValue[0].isChecked = true
+				modelValue[0]!.isChecked = true
 				await vueWrapper.setProps({ modelValue })
 				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe('ap-white')
 			})

package/src/components/Amelipro/AmeliproMailTile/AmeliproMailTile.vue

@@ -264,7 +264,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .mail-status-btn {
 	position: relative;

package/src/components/Amelipro/AmeliproMenu/AmeliproMenu.vue

@@ -310,7 +310,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 ul {
 	list-style: none;

package/src/components/Amelipro/AmeliproMessage/AmeliproMessage.vue

@@ -82,28 +82,27 @@
 	const variant = computed<NonNullable<'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'> | undefined>(() => (props.text ? 'text' : 'flat'))
 	const visible = ref(props.value)
 	const role = computed(() => (props.type === 'error' ? 'alert' : undefined))
-	const iconName = computed(() => props.icon || AmeliproMessageTypes[props.type].icon)
+	const iconName = computed(() => props.icon || AmeliproMessageTypes[props.type]!.icon)
 
 	const colorValue = computed(() => {
 		if (props.text) {
 			return convertToHex(props.textColor
-				|| AmeliproMessageTypes[props.type].textColor
+				|| AmeliproMessageTypes[props.type]!.textColor
 				|| props.color
-				|| AmeliproMessageTypes[props.type].color)
+				|| AmeliproMessageTypes[props.type]!.color)
 		}
-		return convertToHex(props.color || AmeliproMessageTypes[props.type].color)
+		return convertToHex(props.color || AmeliproMessageTypes[props.type]!.color)
 	})
 
 	const colorBorderLeftMessageTitle = computed(() => convertToHex(props.textColor
-		|| AmeliproMessageTypes[props.type].textColor
+		|| AmeliproMessageTypes[props.type]!.textColor
 		|| props.color
-		|| AmeliproMessageTypes[props.type].color))
-
-	const iconBgColorValue = computed(() => props.iconBgColor || AmeliproMessageTypes[props.type].iconBgColor || AmeliproMessageTypes[props.type].color)
+		|| AmeliproMessageTypes[props.type]!.color))
 
+	const iconBgColorValue = computed(() => props.iconBgColor || AmeliproMessageTypes[props.type]!.iconBgColor || AmeliproMessageTypes[props.type]!.color)
 	const iconColorValue = computed(() => props.iconColor || 'ap-white')
 
-	const isDark = computed(() => props.dark || AmeliproMessageTypes[props.type].type === 'dark')
+	const isDark = computed(() => props.dark || AmeliproMessageTypes[props.type]!.type === 'dark')
 
 	const iconCloseColor = computed(() => {
 		if (isDark.value || props.text || props.borderLeftMessage) {

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenu.vue

@@ -194,7 +194,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .dropdown-menu {
 	position: relative;

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproMessagingLayout.vue

@@ -143,7 +143,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .messaging-menu {
 	@media #{apTokens.$media-only-xs} {

package/src/components/Amelipro/AmeliproMultipleFoldingCard/AmeliproMultipleFoldingCard.vue

@@ -60,9 +60,9 @@
 	const internalTabs = ref<AmeliproMultipleFoldingCardItem[]>([])
 	const openDefaultItem = (): void => {
 		if (props.defaultItemOpened !== null) {
-			openedItemId.value = internalTabs.value[props.defaultItemOpened].id
+			openedItemId.value = internalTabs.value[props.defaultItemOpened]!.id
 			if (props.manualValidation === false) {
-				internalTabs.value[props.defaultItemOpened].valid = true
+				internalTabs.value[props.defaultItemOpened]!.valid = true
 			}
 		}
 	}
@@ -73,7 +73,7 @@
 
 	const openClose = (id: string, index: number): void => {
 		if (props.manualValidation === false) {
-			internalTabs.value[index].valid = true
+			internalTabs.value[index]!.valid = true
 		}
 		openedItemId.value = openedItemId.value === id ? null : id
 		emit('tab-clicked', id)
@@ -83,10 +83,10 @@
 		if (openedItemId.value === id) {
 			return 'classic-btn active-btn'
 		}
-		else if (internalTabs.value[index].error === true) {
+		else if (internalTabs.value[index]!.error === true) {
 			return 'classic-btn error-btn'
 		}
-		else if (internalTabs.value[index].valid === true) {
+		else if (internalTabs.value[index]!.valid === true) {
 			return 'classic-btn checked-btn'
 		}
 
@@ -283,7 +283,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .amelipro-card--multi-folding {
 	display: block;

package/src/components/Amelipro/AmeliproNumberedCard/AmeliproNumberedCard.vue

@@ -101,7 +101,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .amelipro-card--numbered-wrapper {
 	padding-top: 1rem;

package/src/components/Amelipro/AmeliproOnboarding/AmeliproOnboarding.vue

@@ -78,7 +78,7 @@
 	}
 	const { mdAndUp } = useDisplay()
 
-	const currentStep = computed<IOnboarding>(() => props.steps[currentStepIndex.value])
+	const currentStep = computed<IOnboarding>(() => props.steps[currentStepIndex.value]!)
 
 	const imgWrapperStyle = computed<string>(() => `width: ${props.imgWidth};`)
 	const textWrapperStyle = computed<string>(() => (mdAndUp.value ? `width: calc(100% - ${props.imgWidth});` : 'width: 100%;'))
@@ -214,7 +214,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .amelipro-ondoarding-content {
 	min-height: 350px;

package/src/components/Amelipro/AmeliproPageLayout/AmeliproPageLayout.vue

@@ -235,7 +235,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .body-content {
 	position: relative;

package/src/components/Amelipro/AmeliproPagination/AmeliproPagination.vue

@@ -42,7 +42,7 @@
 			return props.items.slice(-3, -1)
 		}
 
-		return [props.items[activePage.value - 1]]
+		return [props.items[activePage.value - 1]!]
 	})
 
 	const emitClickEvent = () => emit('click', activePage.value)
@@ -67,9 +67,9 @@
 		>
 			<li class="amelipro-pagination__item">
 				<AmeliproPaginationBtn
-					:href="items[0] ? items[0].href : undefined"
+					:href="items[0] !== undefined && items[0]?.href ? items[0].href : undefined"
 					:is-active="activePage === 1"
-					:to="items[0] ? items[0].to : undefined"
+					:to="items[0] !== undefined && items[0]?.to ? items[0].to : undefined"
 					:unique-id="uniqueId ? `${uniqueId}-first` : undefined"
 					@click="onClick(1)"
 				>
@@ -83,9 +83,9 @@
 			>
 				<AmeliproPaginationBtn
 					key="previous"
-					:href="items[activePage - 2] ? items[activePage - 2].href : undefined"
+					:href="items[activePage - 2]?.href ? items[activePage - 2]!.href : undefined"
 					title="page précédente"
-					:to="items[activePage - 2] ? items[activePage - 2].to : undefined"
+					:to="items[activePage - 2]?.to ? items[activePage - 2]!.to : undefined"
 					:unique-id="uniqueId ? `${uniqueId}-previous` : undefined"
 					@click="onClick(activePage - 1)"
 				>
@@ -117,9 +117,9 @@
 			>
 				<AmeliproPaginationBtn
 					key="next"
-					:href="activePage < pageTotal && items[activePage] ? items[activePage].href : undefined"
+					:href="activePage < pageTotal && items[activePage]?.href ? items[activePage]!.href : undefined"
 					title="page suivante"
-					:to="activePage < pageTotal && items[activePage] ? items[activePage].to : undefined"
+					:to="activePage < pageTotal && items[activePage]?.to ? items[activePage]!.to : undefined"
 					:unique-id="uniqueId ? `${uniqueId}-next` : undefined"
 					@click="onClick(activePage + 1)"
 				>
@@ -131,13 +131,13 @@
 
 			<li class="amelipro-pagination__item">
 				<AmeliproPaginationBtn
-					:href="items[items.length - 1] ? items[items.length - 1].href : undefined"
+					:href="items[items.length - 1]?.href ? items[items.length - 1]!.href : undefined"
 					:is-active="activePage === pageTotal"
-					:to="items[items.length - 1] ? items[items.length - 1].to : undefined"
+					:to="items[items.length - 1]?.to ? items[items.length - 1]!.to : undefined"
 					:unique-id="uniqueId ? `${uniqueId}-last` : undefined"
 					@click="onClick(pageTotal)"
 				>
-					{{ items[items.length - 1] ? items[items.length - 1].key : undefined }}
+					{{ items[items.length - 1]?.key ?? undefined }}
 				</AmeliproPaginationBtn>
 			</li>
 		</ol>
@@ -145,17 +145,17 @@
 </template>
 
 <style lang="scss" scoped>
-	@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
-	ol {
-		border: 1px solid apTokens.$ap-grey-lighten3;
-	}
+ol {
+	border: 1px solid apTokens.$ap-grey-lighten3;
+}
 
-	li:not(:last-child) {
-		border-right: 1px solid apTokens.$ap-grey-lighten3;
-	}
+li:not(:last-child) {
+	border-right: 1px solid apTokens.$ap-grey-lighten3;
+}
 
-	:deep(.amelipro-icon) {
-		position: relative !important;
-	}
+:deep(.amelipro-icon) {
+	position: relative !important;
+}
 </style>