@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/FileList/FileList.stories.ts

@@ -161,6 +161,44 @@ const meta = {
 				},
 			},
 		},
+		'seeLabel': {
+			description: 'Label du bouton de prévisualisation',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Voir le fichier',
+				},
+			},
+		},
+		'deleteLabel': {
+			description: 'Label du bouton de suppression',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: { summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Supprimer le fichier',
+				},
+			},
+		},
+		'importLabel': {
+			description: 'Label du bouton d\'upload',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Importer le fichier',
+				},
+			},
+		},
 	},
 	parameters: {
 		controls: {
@@ -197,6 +235,9 @@ export const Default: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -267,7 +308,7 @@ export const States: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -339,6 +380,9 @@ export const OptionalDocument: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -415,6 +459,9 @@ export const Actions: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -512,6 +559,9 @@ export const Customization: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -32,6 +32,9 @@
 		showPreviewBtn?: boolean
 		tag?: string
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		deleteLabel?: string
+		importLabel?: string
 	}>(), {
 		fileName: undefined,
 		message: undefined,
@@ -43,6 +46,9 @@
 		showPreviewBtn: false,
 		tag: 'div',
 		locales: () => defaultLocales,
+		seeLabel: defaultLocales.see,
+		deleteLabel: defaultLocales.delete,
+		importLabel: defaultLocales.import,
 	})
 
 	defineSlots<{
@@ -132,10 +138,10 @@
 					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
 					class="file-item__action file-item__action-upload text-primary"
 					variant="text"
-					:aria-label="locales.importLabel(title)"
+					:aria-label="`${locales.import} ${title}`"
 					@click="$emit('upload', itemId)"
 				>
-					<span>{{ locales.import }}</span>
+					<span>{{ importLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -148,10 +154,10 @@
 					v-if="state === 'success' && showPreviewBtn"
 					class="file-item__action file-item__action-preview text-primary"
 					variant="text"
-					:aria-label="locales.seeLabel(title)"
+					:aria-label="`${locales.see} ${fileName}`"
 					@click="$emit('preview', itemId)"
 				>
-					<span>{{ locales.see }}</span>
+					<span>{{ seeLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -164,10 +170,10 @@
 					v-if="state === 'success' && showDeleteBtn"
 					class="file-item__action file-item__action-delete text-error"
 					variant="text"
-					:aria-label="locales.deleteLabel(title)"
+					:aria-label="`${locales.delete} ${fileName}`"
 					@click="$emit('delete', itemId)"
 				>
-					<span>{{ locales.delete }}</span>
+					<span>{{ deleteLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="error"
@@ -193,6 +199,7 @@
 				height="7"
 				color="primary"
 				rounded="true"
+				:aria-label="title ? `Chargement de ${title}` : 'Chargement en cours'"
 			/>
 		</div>
 	</component>

package/src/components/FileList/UploadItem/locales.ts

@@ -1,17 +1,8 @@
 export const locales = {
 	optionalDocument: 'Document facultatif',
-	import: 'Importer',
-	see: 'Voir',
-	delete: 'Supprimer',
-	importLabel(title: string) {
-		return `Importer le fichier ${title}`
-	},
-	seeLabel(title: string) {
-		return `Voir le fichier ${title}`
-	},
-	deleteLabel(title: string) {
-		return `Supprimer le fichier ${title}`
-	},
+	see: 'Voir le fichier',
+	delete: 'Supprimer le fichier',
+	import: 'Importer le fichier',
 	uploading: 'En cours',
 	success: 'Téléchargé',
 	error: 'Erreur',

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

@@ -21,6 +21,9 @@ import {
       <ul>
         <li><strong>Formattage sous forme de liste  </strong> : Utilisation de balises HTML sémantiques pour structurer les éléments de la liste de fichiers.</li>
         <li><strong>Boutons</strong> : Utilisation de <code>&lt;button&gt;</code> pour les actions associées à chaque fichier, avec des étiquettes claires qui reprennent l'action et le nom du fichier.</li>
+        <li><strong>Aria-label</strong>: On utilise les méthodes <code>importAriaLabel()</code> pour générer les etiquettes ARIA des champs avec le titre et  <code>seeAriaLabel()</code> et <code>deleteAriaLabel()</code> pour les étiquettes ARIA avec le nom du fichier.</li>
+        <li><strong>SeeLabel, ImportLabel, DeleteLabel </strong> : Utilisation de ces propriétés pour fournir des étiquettes claires et descriptives pour les actions associées à chaque fichier.</li>
+
       </ul>
     </CriteriaCard>
 

package/src/components/FileUpload/FileUpload.vue

@@ -74,7 +74,7 @@
 			files = files.slice(0, 1)
 		}
 		const { errors, validFiles } = validateFiles(
-			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits,
+			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits, props.locales,
 		)
 
 		if (errors.length) {
@@ -149,6 +149,7 @@
 					:multiple="multiple"
 					:file-size-max="fileSizeMax"
 					:file-size-units="fileSizeUnits"
+					:locales="locales"
 				>
 					<template
 						v-for="(_, slotName) in $slots"

package/src/components/FileUpload/FileUploadContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
-	import { locales } from './locales'
+	import { locales as defaultLocales } from './locales'
 	import { mdiCloudUpload } from '@mdi/js'
 	import { computed } from 'vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -10,6 +10,7 @@
 		fileSizeUnits: Array<string>
 		fileSizeMax: number
 		multiple: boolean
+		locales: typeof defaultLocales
 	}>()
 
 	export interface FileUploadContentSlots {

package/src/components/FileUpload/tests/FileUpload.spec.ts

@@ -268,6 +268,53 @@ describe('FileUpload', () => {
 		expect(wrapper.emitted('error')).toBeFalsy()
 	})
 
+	it('accepts a file whose extension is uppercase (case-insensitive check)', async () => {
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['png'],
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file]])
+	})
+
+	it('uses custom locales error message when provided', async () => {
+		const customLocales = {
+			or: 'Ou',
+			chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
+			infoText: (max: string, ext: string[]) => `Taille max. : ${max}. Formats : ${ext.join(', ')}`,
+			fileSizeUnits: ['o', 'Ko', 'Mo', 'Go', 'To'],
+			dropFilesHere: (multiple: boolean) => multiple ? 'Déposer vos fichiers ici' : 'Déposer votre fichier ici',
+			errorSize: (fileName: string, max: string) => `Fichier ${fileName} trop lourd. Max : ${max}`,
+			errorExtension: () => `Message erreur custom !`,
+			fileUploadTitle: '',
+		}
+
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+				locales: customLocales,
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Message erreur custom !']])
+	})
+
 	it('add the new files to the existing ones when the input changes in multiple mode', async () => {
 		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
 		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })

package/src/components/FileUpload/validateFiles.ts

@@ -1,14 +1,16 @@
 import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
-import { locales } from './locales'
+import { locales as defaultLocales } from './locales'
 
 export default function validateFiles(
 	files: File[],
 	maxFileSize: number,
 	allowedExtensions: string[],
 	fileSizeUnits: string[],
+	locales: typeof defaultLocales = defaultLocales,
 ) {
 	const errors: string[] = []
 	const validFiles: File[] = []
+	const normalizedExtensions = allowedExtensions.map(ext => ext.toLowerCase())
 	for (const file of files) {
 		let isValid = true
 		if (file.size > maxFileSize) {
@@ -18,8 +20,9 @@ export default function validateFiles(
 			isValid = false
 		}
 
+		const fileExt = (file.name.split('.').pop() || '').toLowerCase()
 		if (
-			!allowedExtensions.includes(file.name.split('.').pop() || '')
+			!normalizedExtensions.includes(fileExt)
 			&& allowedExtensions.length > 0
 		) {
 			errors.push(

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

@@ -1,15 +1,68 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../FranceConnectBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="FranceConnectBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4005" target="_blank" style={{color:'#0C41BD'}}>issue #4005</a>)</p>
 	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Liens natifs</strong> : Utilisation de balises <code>&lt;a&gt;</code> pour le bouton principal et le lien d'information, garantissant une sémantique correcte.</li>
+				<li><strong>Labels explicites</strong> : Utilisation de l'attribut <code>aria-label</code> sur les liens pour fournir une description claire aux lecteurs d'écran (ex: "S'identifier avec FranceConnect" ou "S'identifier avec FranceConnect+").</li>
+				<li><strong>SVG masqué</strong> : Le logo SVG complexe est masqué aux technologies d'assistance avec <code>aria-hidden="true"</code> et <code>role="presentation"</code> car l'information est déjà portée par l'attribut <code>aria-label</code> du lien parent.</li>
+				<li><strong>Ouverture de fenêtre</strong> : Le lien externe informe l'utilisateur de l'ouverture d'un nouvel onglet, avec une icône explicitement masquée (<code>decorative=true</code>).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Les liens sont naturellement accessibles via la touche <kbd>Tab</kbd>.</li>
+				<li><strong>Indicateur de focus</strong> : Un style de focus clair, visible et avec un décalage (<code>outline-offset</code>) est implémenté pour garantir une bonne visibilité lors de la navigation au clavier.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Couleurs institutionnelles</strong> : Respect strict des couleurs et contrastes de la charte FranceConnect (Bleu France), garantissant un ratio de contraste suffisant.</li>
+				<li><strong>Adaptation au thème sombre</strong> : Ajustement des couleurs de fond (ex: <code>#8585f6</code>) et de texte en mode sombre pour maintenir la lisibilité et l'accessibilité visuelle.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="FranceConnectBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Positionnement</strong> : Placez toujours ce bouton dans un contexte de connexion ou d'authentification.</li>
+			<li><strong>Respect de la charte</strong> : Ne modifiez pas les proportions, les couleurs (en dehors du mode sombre) ou les libellés de ce bouton, car ils sont soumis aux règles strictes de la direction interministérielle du numérique (DINUM).</li>
+			<li>Assurez-vous que le lien <code>href</code> fourni pointe vers la véritable interface de redirection d'authentification.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://franceconnect.gouv.fr/partenaires" target="_blank" rel="noopener noreferrer">Documentation et charte FranceConnect</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1" target="_blank" rel="noopener noreferrer">RGAA : Liens et navigation</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/HeaderBar/HeaderBar.stories.ts

@@ -8,6 +8,8 @@ import SubHeader from '../SubHeader/SubHeader.vue'
 import UserMenuBtn from '../UserMenuBtn/UserMenuBtn.vue'
 import HeaderBar from './HeaderBar.vue'
 import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+import { useTheme } from 'vuetify'
+import { addons } from '@storybook/manager-api'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar',
@@ -805,12 +807,22 @@ export const AppendSlot: Story = {
 		return {
 			components: { HeaderBar },
 			setup() {
-				return { args }
+				const theme = useTheme()
+				const channel = addons.getChannel()
+				channel.on('storybook-theme-change', (theme) => {
+					theme.name.value = theme
+				})
+				return { args, HeaderBar, theme }
 			},
 			template: `
 				<HeaderBar v-bind="args">
 					<template #append>
-						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+						<div v-if="['ap', 'ap2026'].includes(theme.name.value)" style="max-width: 1712px; margin: 0 auto; min-height: 48px; background-color: #0084B2; display: flex; align-items: center; justify-content: center;" class="text-white">
+							<div>
+								TITRE DU SERVICE
+							</div>
+						</div>
+						<div v-else style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
 							<div>
 								contenu
 							</div>

package/src/components/HeaderBar/HeaderBar.vue

@@ -23,7 +23,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
-		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}
 
 	defineSlots<{
@@ -58,6 +58,7 @@
 			serviceSubtitle: undefined,
 			homeLink: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	function registerHeaderMenu(childMenuStatus: DeepReadonly<Ref<boolean>>) {

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -17,7 +17,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
-		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		ariaLabel: locales.ariaLabel,
 		serviceTitle: undefined,
@@ -25,6 +25,7 @@
 		homeLink: () => ({
 			href: '/',
 		}),
+		headingLevelTitle: 1,
 	})
 
 	defineSlots<{

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -41,7 +41,7 @@
 			confirmationMessage?: boolean
 			/** Largeur interne */
 			width?: string
-			headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 		}>(),
 		{
 			// Confirmation related defaults
@@ -57,6 +57,7 @@
 			maxHorizontalMenuItems: 6,
 			items: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	// Définition des événements émis

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

@@ -1,17 +1,79 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../Logo.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as LogoStories from '../Logo.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={LogoStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="Logo"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d'audit manuel : <a href="/audits/Logo.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Aucune correction nécessaire.
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure sémantique et rôles">
+			<ul>
+				<li><strong>Rôle image</strong> : Utilise <code>role="img"</code> sur l'élément SVG.</li>
+				<li><strong>Focus</strong> : <code>focusable="false"</code> pour éviter le focus sur le SVG.</li>
+				<li><strong>Labellisation</strong> : <code>aria-label</code> avec label calculé automatiquement ou personnalisé.</li>
+				<li><strong>Avatar</strong> : <code>aria-hidden="true"</code> quand <code>avatar=true</code>.</li>
+				<li><strong>Éléments décoratifs</strong> : <code>aria-hidden="true"</code> et <code>role="presentation"</code> sur les groupes de texte.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="📝" title="Gestion du label">
+			<ul>
+				<li><strong>Label personnalisé</strong> : Prop <code>ariaLabel</code> prioritaire sur le calcul automatique.</li>
+				<li><strong>Label avatar</strong> : Chaîne vide pour les avatars (illustration décorative).</li>
+				<li><strong>Label calculé</strong> : Construction dynamique avec organism, assurance maladie, signature selon les props.</li>
+				<li><strong>Risque pro</strong> : Label spécifique quand <code>risquePro=true</code>.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/Logo.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Aucune correction nécéssaire.</p>
-	</div>
+		<CriteriaCard icon="🎨" title="Styles et adaptation">
+			<ul>
+				<li><strong>Couleur</strong> : Adaptation automatique avec <code>dark</code> (blanc/sombre).</li>
+				<li><strong>Dimensions</strong> : Mapping selon taille et mode avatar.</li>
+				<li><strong>ViewBox</strong> : Ajustement dynamique selon les éléments affichés.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
 
+	<DemoSection componentName="Logo">
+		<Story of={LogoStories.Default} />
+	</DemoSection>
 
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez <code>avatar=true</code> pour les logos décoratifs sans signification sémantique.</li>
+			<li>Fournissez un <code>ariaLabel</code> personnalisé pour les contextes spécifiques.</li>
+			<li>Adaptez la taille avec <code>size</code> selon le contexte d'utilisation.</li>
+			<li>Utilisez <code>dark=true</code> sur les fonds sombres pour maintenir le contraste.</li>
+			<li>Cachez la signature (<code>hideSignature</code>) dans les espaces contraints.</li>
+			<li>Cachez l'organisme (<code>hideOrganism</code>) si le contexte est déjà clair.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" rel="noopener noreferrer">WCAG : Contenu non textuel</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/img/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Images</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2" target="_blank" rel="noopener noreferrer">RGAA : Images décoratives</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3" target="_blank" rel="noopener noreferrer">RGAA : Images porteuses d'informations</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>