@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/UserMenuBtn/accessibilite/Accessibility.mdx

@@ -1,12 +1,76 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../UserMenuBtn.stories.ts';
+import { Meta, Primary } from '@storybook/blocks';
+import * as UserMenuBtnStories from '../UserMenuBtn.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={UserMenuBtnStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="UserMenuBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Rôles ARIA</strong> : <code>role="menu"</code> pour la liste et <code>role="menuitem"</code> pour chaque option (y compris le bouton de déconnexion).</li>
+				<li><strong>Attributs d'association</strong> : <code>aria-labelledby</code> relie le menu au bouton généré, <code>aria-haspopup</code>/<code>aria-expanded</code>/<code>aria-controls</code> sont gérés par <code>VMenu</code>.</li>
+				<li><strong>Étiquette accessible</strong> : un texte masqué (<code>label</code>, par défaut « Menu utilisateur ») assure le nom du bouton, même en mode icône seule.</li>
+				<li><strong>Suivi de l'item actif</strong> : <code>aria-activedescendant</code> pointe vers l'option active via un identifiant slugifié.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Tabulation</strong> : accès au bouton puis parcours des options.</li>
+				<li><strong>Entrée/Espace</strong> : ouverture du menu et activation d'une option.</li>
+				<li><strong>Flèches</strong> : navigation verticale entre les éléments du menu.</li>
+				<li><strong>Échap</strong> : fermeture du menu et restitution du focus sur le bouton.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎯" title="Gestion du focus & retours">
+			<ul>
+				<li>Focus placé sur la première option à l'ouverture, puis renvoyé vers le bouton à la fermeture.</li>
+				<li><code>aria-expanded</code> reflète l'état d'ouverture ; <code>aria-current="page"</code> sur l'élément sélectionné.</li>
+				<li>Styles <code>:focus-visible</code> renforcés sur le bouton et les éléments du menu pour une indication claire.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="Compatibilité mobile & personnalisation">
+			<ul>
+				<li>Modes <code>isMobileView</code> et <code>iconOnly</code> compactent l'affichage tout en conservant un libellé pour les lecteurs d'écran.</li>
+				<li>Options <code>menu</code> / <code>btn</code> / <code>list</code> personnalisables sans dégrader les attributs ARIA.</li>
+				<li>Le bouton de déconnexion optionnel (<code>hideLogoutBtn</code>) reste exposé comme élément de menu clavier/navigateur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="UserMenuBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournir un libellé clair pour <code>label</code> (ex. « Menu utilisateur », « Compte de Marie »), surtout en mode icône seule.</li>
+			<li>Limiter le nombre d'options et placer les actions destructives ou sensibles (ex. déconnexion) en fin de liste.</li>
+			<li>Utiliser des intitulés explicites pour les éléments du menu ; éviter les abréviations ou les seules icônes.</li>
+			<li>Vérifier le focus visible et le contraste des états actifs/sélectionnés, notamment sur fond personnalisé.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices : Menu button</a></li>
+			<li><a href="https://inclusive-components.design/menus-menu-buttons/" target="_blank" rel="noopener noreferrer">Inclusive Components : Menus &amp; Menu Buttons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as SyHeading } from './SyHeading/SyHeading.vue'
 
 // ===========================
 // Layout
@@ -60,6 +61,7 @@ export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as LunarCalendar } from './LunarCalendar/LunarCalendar.vue'
+export { default as MonthPicker } from './MonthPicker/MonthPicker.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'

package/src/components/types.ts

@@ -8,3 +8,7 @@ export type NavigationProps =
 	| { href: string, to?: never }
 	| { to: RouteLocationRaw, href?: never }
 	| { href?: never, to?: never }
+
+// Type pour les rôles ARIA utilisés dans les composants
+export type AriaRole = 'main' | 'region' | 'navigation' | 'contentinfo' | 'banner'
+export type PageAriaRole = 'main' | 'region'

package/src/composables/date/tests/useDateInitialization.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
 
 describe('useDateInitialization', () => {
@@ -76,6 +76,27 @@ describe('useDateInitialization', () => {
 			expect((result2 as Date).getDate()).toBe(15)
 		})
 
+		describe('timezone regression', () => {
+			let tzOffsetSpy: ReturnType<typeof vi.spyOn> | null = null
+
+			beforeEach(() => {
+				tzOffsetSpy = vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(240)
+			})
+
+			afterEach(() => {
+				tzOffsetSpy?.mockRestore()
+				tzOffsetSpy = null
+			})
+
+			it('does not shift day when parsing YYYY-MM-DD in a negative timezone (regression)', () => {
+				const result = initializeSelectedDates('2022-10-18', 'DD/MM/YYYY', 'YYYY-MM-DD')
+				expect(result).toBeInstanceOf(Date)
+				expect((result as Date).getFullYear()).toBe(2022)
+				expect((result as Date).getMonth()).toBe(9)
+				expect((result as Date).getDate()).toBe(18)
+			})
+		})
+
 		it('returns null for object input', () => {
 			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
 			expect(result).toBeNull()

package/src/composables/date/useDateInitializationDayjs.ts

@@ -29,16 +29,13 @@ const parseToUTCDate = (dateStr: string, format: string): Date | null => {
 	if (!parsedDate.isValid()) return null
 
 	// Extraire les composants de la date à partir de la chaîne
-	// Créer une date UTC avec les composants exacts pour éviter les décalages de fuseau horaire
-	// Utiliser set pour définir explicitement l'année, le mois et le jour
-	return dayjs.utc()
+	// Créer une date à minuit en timezone locale pour éviter les décalages jour-1/jour+1
+	// dans les fuseaux négatifs/positifs lors des conversions en chaîne (ex: YYYY-MM-DD).
+	return dayjs()
 		.year(parsedDate.year())
 		.month(parsedDate.month())
 		.date(parsedDate.date())
-		.hour(0)
-		.minute(0)
-		.second(0)
-		.millisecond(0)
+		.startOf('day')
 		.toDate()
 }
 

package/src/composables/date/useDatePickerAccessibility.ts

@@ -172,13 +172,12 @@ export function useDatePickerAccessibility() {
 
 				container.removeAttribute('aria-expanded')
 				container.removeAttribute('aria-haspopup')
-				container.removeAttribute('aria-controls')
 				// Find all elements with invalid ARIA attributes
 				const elementsWithAriaHaspopup = container.querySelectorAll('[aria-haspopup="menu"]')
 				elementsWithAriaHaspopup.forEach((element) => {
 					if (!element) return
 					element.removeAttribute('aria-haspopup')
-					element.removeAttribute('aria-controls')
+					// Intentionally keep aria-controls intact so valid popup relationships remain
 				})
 
 				// Find input elements with invalid ARIA attributes
@@ -187,7 +186,7 @@ export function useDatePickerAccessibility() {
 					if (!input) return
 					input.removeAttribute('aria-haspopup')
 					input.removeAttribute('aria-expanded')
-					input.removeAttribute('aria-controls')
+					// Leave aria-controls untouched to avoid stripping required relationships
 				})
 			})
 		}

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -5,15 +5,65 @@ import { nextTick, ref } from 'vue'
 
 describe('Filterable', () => {
 	describe('formatFilterName', () => {
-		it('returns the correct slugified name', () => {
+		it('preserves existing behavior for names with spaces', () => {
 			const { formatFilterName } = useFilterable(
 				ref([]),
 				() => {},
 			)
 
 			const name = formatFilterName('Test Name')
-
 			expect(name).toBe('test-name')
+
+			const anotherName = formatFilterName('My Filter Name')
+			expect(anotherName).toBe('my-filter-name')
+		})
+
+		it('preserves existing behavior for names with special characters', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const nameWithSpecialChars = formatFilterName('Filter@Name#Test')
+			expect(nameWithSpecialChars).toBe('filternametest')
+
+			const nameWithSpacesAndSpecial = formatFilterName('My Filter-Name')
+			expect(nameWithSpacesAndSpecial).toBe('my-filter-name')
+		})
+
+		it('fixes camelCase issue by preserving case for single words', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const camelCaseName = formatFilterName('totoCase')
+			expect(camelCaseName).toBe('totoCase')
+
+			const anotherCamelCase = formatFilterName('myFilterName')
+			expect(anotherCamelCase).toBe('myFilterName')
+
+			const pascalCase = formatFilterName('MyFilter')
+			expect(pascalCase).toBe('MyFilter')
+		})
+
+		it('handles edge cases correctly', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			// Single lowercase word
+			expect(formatFilterName('name')).toBe('name')
+
+			// Single uppercase word
+			expect(formatFilterName('NAME')).toBe('NAME')
+
+			// Mixed case with numbers
+			expect(formatFilterName('filter123Test')).toBe('filter123Test')
+
+			// Empty string
+			expect(formatFilterName('')).toBe('')
 		})
 	})
 

package/src/composables/useFilterable/useFilterable.ts

@@ -25,7 +25,13 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 	}
 
 	function formatFilterName(name: string): string {
-		return slugify(name, { lower: true })
+		// Si le nom contient des espaces ou caractères spéciaux, comportement actuel
+		if (/\s|[^\w]/.test(name)) {
+			return slugify(name, { lower: true, strict: true })
+		}
+
+		// Si c'est un seul mot (camelCase ou autre), préserver la casse
+		return slugify(name, { strict: true })
 	}
 
 	/**

package/src/composables/useFormFieldErrorHandling.ts

@@ -73,11 +73,14 @@ export const useFormFieldErrorHandling = (
 
 	const validateField = (value: unknown) => {
 		if (props.disableErrorHandling) {
+			validation.clearValidation()
 			return true
 		}
 
-		// Ne pas valider si la valeur est null/undefined et non requise
-		if (value == null && !props.required) {
+		const isEmptyArray = Array.isArray(value) && value.length === 0
+
+		// Ne pas valider si la valeur est vide et non requise
+		if ((value == null || isEmptyArray) && !props.required) {
 			validation.clearValidation()
 			return true
 		}
@@ -108,6 +111,12 @@ export const useFormFieldErrorHandling = (
 		}
 	})
 
+	watch(() => props.disableErrorHandling, (isDisabled) => {
+		if (isDisabled) {
+			validation.clearValidation()
+		}
+	})
+
 	watch([() => props.required, () => props.label], () => {
 		// Re-valider quand les règles changent
 		if (modelValue.value != null) {

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -2,9 +2,15 @@ import { apSemanticTokens } from './apSemantic'
 import { apColorsTokens } from './apColors'
 
 export const apLightTheme = {
-	primary: apColorsTokens.cyan.darken40,
+	primary: apColorsTokens.cyan.darken20,
 	secondary: apColorsTokens.cyan.darken60,
-	accent: apColorsTokens.cyan.base,
+	accentPrimaryLight: apColorsTokens.blue.lighten20,
+	accentPrimary: apColorsTokens.cyan.darken20,
+	accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+	accentSecondaryLight: apColorsTokens.cyan.base,
+	accentSecondary: apColorsTokens.cyan.darken60,
+	accentSecondaryContrasted: apColorsTokens.cyan.darken80,
+	accentAlt: apColorsTokens.grey.base,
 	error: apColorsTokens.red.darken20,
 	info: apColorsTokens.parma.darken40,
 	avatar: apColorsTokens.cyan.darken20,
@@ -20,12 +26,14 @@ export const apLightTheme = {
 	overlayFullpage: apSemanticTokens.colors.overlay.fullpage,
 	overlayOnDark: apSemanticTokens.colors.overlay.onDark,
 	overlayOnLight: apSemanticTokens.colors.overlay.onLight,
-	interactiveDefault: apSemanticTokens.colors.interactive.default,
-	interactiveHover: apSemanticTokens.colors.interactive.hover,
-	interactivePressed: apSemanticTokens.colors.interactive.pressed,
-	interactiveFocus: apSemanticTokens.colors.interactive.focus,
-	interactiveDisabled: apSemanticTokens.colors.interactive.disabled,
-	interactiveHoverOnSelected: apSemanticTokens.colors.interactive.hoverOnSelected,
+	interactiveSelectionEnabled: apSemanticTokens.colors.interactive.selectionEnabled,
+	interactiveSelectionHover: apSemanticTokens.colors.interactive.selectionHover,
+	interactiveSelectionPressed: apSemanticTokens.colors.interactive.selectionPressed,
+	interactiveSelectionSelected: apSemanticTokens.colors.interactive.selectionSelected,
+	interactiveSelectionHoverOnSelected: apSemanticTokens.colors.interactive.selectionHoverOnSelected,
+	interactiveSelectionSelectedAccent: apSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionHoverOnSelectedAccent: apSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
+	interactiveSelectionDisabled: apSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: apSemanticTokens.colors.background.main,
 	backgroundSurface: apSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: apSemanticTokens.colors.background.surfaceAlt,
@@ -54,9 +62,11 @@ export const apLightTheme = {
 	borderDarker: apSemanticTokens.colors.border.darker,
 	borderBase: apSemanticTokens.colors.border.base,
 	borderSubdued: apSemanticTokens.colors.border.subdued,
-	borderAccent: apSemanticTokens.colors.border.accent,
-	borderAccentContrasted: apSemanticTokens.colors.border.accentContrasted,
-	borderAccentOnDark: apSemanticTokens.colors.border.accentOnDark,
+	borderAccentPrimary: apSemanticTokens.colors.border.accentPrimary,
+	borderAccentPrimaryContrasted: apSemanticTokens.colors.border.accentPrimaryContrasted,
+	borderAccentPrimaryOnDark: apSemanticTokens.colors.border.accentPrimaryOnDark,
+	borderAccentSecondary: apSemanticTokens.colors.border.accentSecondary,
+	borderAccentSecondaryContrasted: apSemanticTokens.colors.border.accentSecondaryContrasted,
 	borderInfo: apSemanticTokens.colors.border.info,
 	borderSuccess: apSemanticTokens.colors.border.success,
 	borderWarning: apSemanticTokens.colors.border.warning,
@@ -65,8 +75,9 @@ export const apLightTheme = {
 	borderDisabled: apSemanticTokens.colors.border.disabled,
 	borderDisabledOnDark: apSemanticTokens.colors.border.disabledOnDark,
 	textBase: apSemanticTokens.colors.text.base,
-	textAccent: apSemanticTokens.colors.text.accent,
-	textAccentContrasted: apSemanticTokens.colors.text.accentContrasted,
+	textAccentPrimary: apSemanticTokens.colors.text.accentPrimary,
+	textAccentPrimaryContrasted: apSemanticTokens.colors.text.accentPrimaryContrasted,
+	textAccentSecondary: apSemanticTokens.colors.text.accentSecondary,
 	textSubdued: apSemanticTokens.colors.text.subdued,
 	textInfo: apSemanticTokens.colors.text.info,
 	textSuccess: apSemanticTokens.colors.text.success,
@@ -79,8 +90,9 @@ export const apLightTheme = {
 	iconBase: apSemanticTokens.colors.icon.base,
 	iconSubdued: apSemanticTokens.colors.icon.subdued,
 	iconSubduedOnDark: apSemanticTokens.colors.icon.subduedOnDark,
-	iconAccent: apSemanticTokens.colors.icon.accent,
-	iconAccentContrasted: apSemanticTokens.colors.icon.accentContrasted,
+	iconAccentPrimary: apSemanticTokens.colors.icon.accentPrimary,
+	iconAccentPrimaryContrasted: apSemanticTokens.colors.icon.accentPrimaryContrasted,
+	iconAccentSecondary: apSemanticTokens.colors.icon.accentSecondary,
 	iconInfo: apSemanticTokens.colors.icon.info,
 	iconSuccess: apSemanticTokens.colors.icon.success,
 	iconWarning: apSemanticTokens.colors.icon.warning,

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -6,8 +6,8 @@ export const apSemanticTokens = {
 			main: apColorsTokens.cyan.lighten97,
 			surface: apColorsTokens.white.base,
 			mainAlt: apColorsTokens.white.base,
-			surfaceAlt: apColorsTokens.blue.lighten90,
-			raised: apColorsTokens.blue.lighten97,
+			surfaceAlt: apColorsTokens.cyan.lighten80,
+			raised: apColorsTokens.cyan.lighten97,
 			accent: apColorsTokens.cyan.darken20,
 			accentContrasted: apColorsTokens.cyan.darken60,
 			accentAlt: apColorsTokens.grey.base,
@@ -33,9 +33,11 @@ export const apSemanticTokens = {
 			darker: apColorsTokens.grey.darken60,
 			base: apColorsTokens.grey.lighten40,
 			subdued: apColorsTokens.grey.lighten80,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
-			accentOnDark: apColorsTokens.white.base,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentPrimaryOnDark: apColorsTokens.white.base,
+			accentSecondary: apColorsTokens.cyan.darken60,
+			accentSecondaryContrasted: apColorsTokens.cyan.darken40,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.base,
 			warning: apColorsTokens.yellow.darken60,
@@ -46,8 +48,9 @@ export const apSemanticTokens = {
 		},
 		text: {
 			base: apColorsTokens.grey.darken60,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentSecondary: apColorsTokens.cyan.darken60,
 			subdued: apColorsTokens.grey.base,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.base,
@@ -62,8 +65,9 @@ export const apSemanticTokens = {
 			base: apColorsTokens.grey.darken60,
 			subdued: apColorsTokens.grey.base,
 			subduedOnDark: apColorsTokens.white.lighten70,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentSecondary: apColorsTokens.cyan.darken80,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.darken60,
 			warning: apColorsTokens.yellow.darken60,
@@ -78,12 +82,14 @@ export const apSemanticTokens = {
 			onLight: apColorsTokens.white.base,
 		},
 		interactive: {
-			default: apColorsTokens.white.base,
-			hover: apColorsTokens.cyan.lighten90,
-			pressed: apColorsTokens.cyan.lighten80,
-			focus: apColorsTokens.blue.lighten90,
-			disabled: apColorsTokens.white.base,
-			hoverOnSelected: apColorsTokens.blue.lighten80,
+			selectionEnabled: apColorsTokens.white.base,
+			selectionHover: apColorsTokens.blue.lighten80,
+			selectionPressed: apColorsTokens.blue.lighten60,
+			selectionSelected: apColorsTokens.blue.lighten80,
+			selectionHoverOnSelected: apColorsTokens.blue.lighten60,
+			selectionselectedAccent: apColorsTokens.cyan.darken20,
+			selectionHoverOnSelectedAccent: apColorsTokens.cyan.lighten20,
+			selectionDisabled: apColorsTokens.white.base,
 		},
 	},
 }

package/src/designTokens/tokens/cnam/cnamContextual.ts

@@ -5,7 +5,12 @@ export const cnamContextualTokens = {
 		text: '#333333',
 		icon: '#666666',
 		overlay: 'rgba(0, 0, 0, 0.5)',
-		interactive: '#007bff',
+		interactive: '#fff',
+		interactiveHover: '#E7ECF5',
+		interactivePressed: '#CED9EB',
+		interactiveFocus: '#E7ECF5',
+		interactiveDisabled: '#fff',
+		interactiveHoverOnSelected: '#CED9EB',
 	},
 	gap: {
 		0: '0',

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -4,7 +4,13 @@ import { cnamSemanticTokens } from './cnamSemantic'
 export const cnamLightTheme = {
 	primary: cnamColorsTokens.blue.base,
 	secondary: cnamColorsTokens.cyan.darken40,
-	accent: cnamColorsTokens.cyan.base,
+	accentPrimaryLight: cnamColorsTokens.blue.lighten20,
+	accentPrimary: cnamColorsTokens.blue.base,
+	accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+	accentSecondaryLight: cnamColorsTokens.cyan.lighten60,
+	accentSecondary: cnamColorsTokens.cyan.base,
+	accentSecondaryContrasted: cnamColorsTokens.cyan.darken40,
+	accentAlt: cnamColorsTokens.grey.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
 	avatar: cnamColorsTokens.cyan.darken20,
@@ -20,16 +26,19 @@ export const cnamLightTheme = {
 	overlayFullpage: cnamSemanticTokens.colors.overlay.fullpage,
 	overlayOnDark: cnamSemanticTokens.colors.overlay.onDark,
 	overlayOnLight: cnamSemanticTokens.colors.overlay.onLight,
-	interactiveDefault: cnamSemanticTokens.colors.interactive.default,
-	interactiveHover: cnamSemanticTokens.colors.interactive.hover,
-	interactivePressed: cnamSemanticTokens.colors.interactive.pressed,
-	interactiveFocus: cnamSemanticTokens.colors.interactive.focus,
-	interactiveDisabled: cnamSemanticTokens.colors.interactive.disabled,
-	interactiveHoverOnSelected: cnamSemanticTokens.colors.interactive.hoverOnSelected,
+	interactiveSelectionEnabled: cnamSemanticTokens.colors.interactive.selectionEnabled,
+	interactiveSelectionHover: cnamSemanticTokens.colors.interactive.selectionHover,
+	interactiveSelectionPressed: cnamSemanticTokens.colors.interactive.selectionPressed,
+	interactiveSelectionSelected: cnamSemanticTokens.colors.interactive.selectionSelected,
+	interactiveSelectionHoverOnSelected: cnamSemanticTokens.colors.interactive.selectionHoverOnSelected,
+	interactiveSelectionSelectedAccent: cnamSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionHoverOnSelectedAccent: cnamSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
+	interactiveSelectionDisabled: cnamSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: cnamSemanticTokens.colors.background.main,
+	backgroundMainAlt: cnamSemanticTokens.colors.background.mainAlt,
+	backgroundMainTer: cnamSemanticTokens.colors.background.mainTer,
 	backgroundSurface: cnamSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,
-	backgroundMainAlt: cnamSemanticTokens.colors.background.mainAlt,
 	backgroundRaised: cnamSemanticTokens.colors.background.raised,
 	backgroundAccent: cnamSemanticTokens.colors.background.accent,
 	backgroundAccentContrasted: cnamSemanticTokens.colors.background.accentContrasted,
@@ -54,9 +63,11 @@ export const cnamLightTheme = {
 	borderDarker: cnamSemanticTokens.colors.border.darker,
 	borderBase: cnamSemanticTokens.colors.border.base,
 	borderSubdued: cnamSemanticTokens.colors.border.subdued,
-	borderAccent: cnamSemanticTokens.colors.border.accent,
-	borderAccentContrasted: cnamSemanticTokens.colors.border.accentContrasted,
-	borderAccentOnDark: cnamSemanticTokens.colors.border.accentOnDark,
+	borderAccentPrimary: cnamSemanticTokens.colors.border.accentPrimary,
+	borderAccentPrimaryContrasted: cnamSemanticTokens.colors.border.accentPrimaryContrasted,
+	borderAccentPrimaryOnDark: cnamSemanticTokens.colors.border.accentPrimaryOnDark,
+	borderAccentSecondary: cnamSemanticTokens.colors.border.accentSecondary,
+	borderAccentSecondaryContrasted: cnamSemanticTokens.colors.border.accentSecondaryContrasted,
 	borderInfo: cnamSemanticTokens.colors.border.info,
 	borderSuccess: cnamSemanticTokens.colors.border.success,
 	borderWarning: cnamSemanticTokens.colors.border.warning,
@@ -65,8 +76,9 @@ export const cnamLightTheme = {
 	borderDisabled: cnamSemanticTokens.colors.border.disabled,
 	borderDisabledOnDark: cnamSemanticTokens.colors.border.disabledOnDark,
 	textBase: cnamSemanticTokens.colors.text.base,
-	textAccent: cnamSemanticTokens.colors.text.accent,
-	textAccentContrasted: cnamSemanticTokens.colors.text.accentContrasted,
+	textAccentPrimary: cnamSemanticTokens.colors.text.accentPrimary,
+	textAccentPrimaryContrasted: cnamSemanticTokens.colors.text.accentPrimaryContrasted,
+	textAccentSecondary: cnamSemanticTokens.colors.text.accentSecondary,
 	textSubdued: cnamSemanticTokens.colors.text.subdued,
 	textInfo: cnamSemanticTokens.colors.text.info,
 	textSuccess: cnamSemanticTokens.colors.text.success,
@@ -79,8 +91,9 @@ export const cnamLightTheme = {
 	iconBase: cnamSemanticTokens.colors.icon.base,
 	iconSubdued: cnamSemanticTokens.colors.icon.subdued,
 	iconSubduedOnDark: cnamSemanticTokens.colors.icon.subduedOnDark,
-	iconAccent: cnamSemanticTokens.colors.icon.accent,
-	iconAccentContrasted: cnamSemanticTokens.colors.icon.accentContrasted,
+	iconAccentPrimary: cnamSemanticTokens.colors.icon.accentPrimary,
+	iconAccentPrimaryContrasted: cnamSemanticTokens.colors.icon.accentPrimaryContrasted,
+	iconAccentSecondary: cnamSemanticTokens.colors.icon.accentSecondary,
 	iconInfo: cnamSemanticTokens.colors.icon.info,
 	iconSuccess: cnamSemanticTokens.colors.icon.success,
 	iconWarning: cnamSemanticTokens.colors.icon.warning,

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -6,6 +6,7 @@ export const cnamSemanticTokens = {
 			main: cnamColorsTokens.blue.lighten90,
 			surface: cnamColorsTokens.white.base,
 			mainAlt: cnamColorsTokens.white.base,
+			mainTer: cnamColorsTokens.grey.lighten97,
 			surfaceAlt: cnamColorsTokens.blue.lighten90,
 			raised: cnamColorsTokens.blue.lighten97,
 			accent: cnamColorsTokens.blue.base,
@@ -14,7 +15,7 @@ export const cnamSemanticTokens = {
 			info: cnamColorsTokens.blue.lighten80,
 			infoSubdued: cnamColorsTokens.blue.lighten90,
 			infoContrasted: cnamColorsTokens.blue.base,
-			success: cnamColorsTokens.orange.darken40,
+			success: cnamColorsTokens.turquoise.lighten80,
 			successSubdued: cnamColorsTokens.turquoise.lighten90,
 			successContrasted: cnamColorsTokens.green.base,
 			warning: cnamColorsTokens.yellow.lighten80,
@@ -33,9 +34,11 @@ export const cnamSemanticTokens = {
 			darker: cnamColorsTokens.grey.darken60,
 			base: cnamColorsTokens.grey.lighten40,
 			subdued: cnamColorsTokens.grey.lighten80,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
-			accentOnDark: cnamColorsTokens.white.base,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimaryOnDark: cnamColorsTokens.white.base,
+			accentSecondary: cnamColorsTokens.cyan.base,
+			accentSecondaryContrasted: cnamColorsTokens.cyan.darken40,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
 			warning: cnamColorsTokens.yellow.darken40,
@@ -46,8 +49,9 @@ export const cnamSemanticTokens = {
 		},
 		text: {
 			base: cnamColorsTokens.grey.darken60,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentSecondary: cnamColorsTokens.cyan.darken60,
 			subdued: cnamColorsTokens.grey.base,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
@@ -62,8 +66,9 @@ export const cnamSemanticTokens = {
 			base: cnamColorsTokens.grey.darken60,
 			subdued: cnamColorsTokens.grey.base,
 			subduedOnDark: cnamColorsTokens.white.lighten70,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentSecondary: cnamColorsTokens.cyan.darken40,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
 			warning: cnamColorsTokens.yellow.darken40,
@@ -78,12 +83,14 @@ export const cnamSemanticTokens = {
 			onLight: cnamColorsTokens.blue.base,
 		},
 		interactive: {
-			default: cnamColorsTokens.white.base,
-			hover: cnamColorsTokens.blue.lighten90,
-			pressed: cnamColorsTokens.blue.lighten80,
-			focus: cnamColorsTokens.blue.lighten90,
-			disabled: cnamColorsTokens.white.base,
-			hoverOnSelected: cnamColorsTokens.blue.lighten80,
+			selectionEnabled: cnamColorsTokens.white.base,
+			selectionHover: cnamColorsTokens.blue.lighten90,
+			selectionPressed: cnamColorsTokens.blue.lighten80,
+			selectionSelected: cnamColorsTokens.blue.lighten90,
+			selectionHoverOnSelected: cnamColorsTokens.blue.lighten80,
+			selectionselectedAccent: cnamColorsTokens.blue.base,
+			selectionHoverOnSelectedAccent: cnamColorsTokens.blue.lighten20,
+			selectionDisabled: cnamColorsTokens.white.base,
 		},
 	},
 }