qc-trousse-sdg 1.4.6 → 1.4.7

package/public/js/qc-sdg.js

@@ -9087,6 +9087,29 @@
 	        // Convertit le mot en minuscules.
 	        return word.toLowerCase();
 	    }
+
+	    static now() {
+	        return (new Date()).getTime();
+	    }
+
+	    /**
+	     * Creates a MutationObserver instance with selector nesting check
+	     * @param rootElement
+	     * @param callback
+	     * @param selector
+	     * @returns {MutationObserver | null}
+	     */
+	    static createMutationObserver(rootElement, callback, selector) {
+	        if (!selector) {
+	            selector = rootElement.tagName.toLowerCase();
+	        }
+	        if (rootElement.querySelector(selector)) {
+	            console.warn(`Imbrication d'éléments "${selector}" détectée. Le MutationObserver n'est pas créé`);
+	            return null;
+	        }
+
+	        return new MutationObserver(callback);
+	    }
 	}
 
 	function getCacheBustingParam(cssPath, currentScriptSrc) {
@@ -9133,7 +9156,7 @@
 
 	Icon[FILENAME] = 'src/sdg/bases/Icon/Icon.svelte';
 
-	var root$n = add_locations(from_html(`<div></div>`), Icon[FILENAME], [[16, 0]]);
+	var root$n = add_locations(from_html(`<div></div>`), Icon[FILENAME], [[17, 0]]);
 
 	function Icon($$anchor, $$props) {
 		check_target(new.target);
@@ -9147,6 +9170,7 @@
 			height = prop($$props, 'height', 7, 'auto'),
 			src = prop($$props, 'src', 7, ''),
 			rotate = prop($$props, 'rotate', 7, 0),
+			rootElement = prop($$props, 'rootElement', 15),
 			rest = rest_props(
 				$$props,
 				[
@@ -9161,7 +9185,8 @@
 					'width',
 					'height',
 					'src',
-					'rotate'
+					'rotate',
+					'rootElement'
 				]);
 
 		let attributes = tag(user_derived(() => strict_equals(width(), 'auto') ? { 'data-img-size': size() } : {}), 'attributes');
@@ -9239,6 +9264,15 @@
 				flushSync();
 			},
 
+			get rootElement() {
+				return rootElement();
+			},
+
+			set rootElement($$value) {
+				rootElement($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -9262,6 +9296,7 @@
 			[STYLE]: { '--img-rotate': rotate() && rotate() + "deg" }
 		}));
 
+		bind_this(div, ($$value) => rootElement($$value), () => rootElement());
 		append($$anchor, div);
 
 		return pop($$exports);
@@ -9277,7 +9312,8 @@
 			width: {},
 			height: {},
 			src: {},
-			rotate: {}
+			rotate: {},
+			rootElement: {}
 		},
 		[],
 		[],
@@ -10874,7 +10910,7 @@
 
 	Alert[FILENAME] = 'src/sdg/components/Alert/Alert.svelte';
 
-	var root_1$7 = add_locations(from_html(`<div role="alert"><div><div class="qc-general-alert-elements"><!> <div class="qc-alert-content"><!> <!></div> <!></div></div></div>`), Alert[FILENAME], [[40, 4, [[43, 8, [[44, 12, [[50, 16]]]]]]]]);
+	var root_1$7 = add_locations(from_html(`<div role="alert"><div><div class="qc-general-alert-elements"><!> <div class="qc-alert-content"><!> <!></div> <!></div></div></div>`), Alert[FILENAME], [[59, 4, [[62, 8, [[63, 12, [[69, 16]]]]]]]]);
 
 	function Alert($$anchor, $$props) {
 		check_target(new.target);
@@ -10883,9 +10919,14 @@
 		let type = prop($$props, 'type', 7, "general"),
 			maskable = prop($$props, 'maskable', 7, ""),
 			content = prop($$props, 'content', 7, ""),
-			hide = prop($$props, 'hide', 7, "false"),
+			hide = prop($$props, 'hide', 15, "false"),
 			fullWidth = prop($$props, 'fullWidth', 7, "false"),
-			slotContent = prop($$props, 'slotContent', 7);
+			slotContent = prop($$props, 'slotContent', 7),
+			id = prop($$props, 'id', 7),
+			persistenceKey = prop($$props, 'persistenceKey', 7),
+			persistHidden = prop($$props, 'persistHidden', 7, false),
+			rootElement = prop($$props, 'rootElement', 15),
+			hideAlertCallback = prop($$props, 'hideAlertCallback', 7, () => {});
 
 		const language = Utils.getPageLanguage();
 		const typeClass = strict_equals(type(), "", false) ? type() : 'general';
@@ -10897,12 +10938,38 @@
 
 		const generalLabel = strict_equals(language, 'fr') ? "Information importante" : "Important information";
 		const label = strict_equals(type(), 'general') ? generalLabel : warningLabel;
-		let rootElement = tag(state(null), 'rootElement');
 		let containerClass = "qc-container" + (strict_equals(fullWidth(), 'true') ? '-fluid' : '');
 
+		onMount(() => {
+			const key = getPersistenceKey();
+
+			if (!key) return;
+
+			hide(sessionStorage.getItem(key) ? "true" : "false");
+		});
+
 		function hideAlert() {
 			hide("true");
-			get(rootElement).dispatchEvent(new CustomEvent('qc.alert.hide', { bubbles: true, composed: true }));
+			persistHiddenState();
+			hideAlertCallback()();
+		}
+
+		function getPersistenceKey() {
+			if (!persistHidden()) return false;
+
+			const key = persistenceKey() || id();
+
+			if (!key) return false;
+
+			return 'qc-alert:' + key;
+		}
+
+		function persistHiddenState() {
+			const key = getPersistenceKey();
+
+			if (!key) return;
+
+			sessionStorage.setItem(key, Utils.now());
 		}
 
 		var $$exports = {
@@ -10960,6 +11027,51 @@
 				flushSync();
 			},
 
+			get id() {
+				return id();
+			},
+
+			set id($$value) {
+				id($$value);
+				flushSync();
+			},
+
+			get persistenceKey() {
+				return persistenceKey();
+			},
+
+			set persistenceKey($$value) {
+				persistenceKey($$value);
+				flushSync();
+			},
+
+			get persistHidden() {
+				return persistHidden();
+			},
+
+			set persistHidden($$value = false) {
+				persistHidden($$value);
+				flushSync();
+			},
+
+			get rootElement() {
+				return rootElement();
+			},
+
+			set rootElement($$value) {
+				rootElement($$value);
+				flushSync();
+			},
+
+			get hideAlertCallback() {
+				return hideAlertCallback();
+			},
+
+			set hideAlertCallback($$value = () => {}) {
+				hideAlertCallback($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -10995,7 +11107,7 @@
 						}),
 						'component',
 						Alert,
-						45,
+						64,
 						16,
 						{ componentTag: 'Icon' }
 					);
@@ -11029,7 +11141,7 @@
 							}),
 							'component',
 							Alert,
-							55,
+							74,
 							20,
 							{ componentTag: 'IconButton' }
 						);
@@ -11041,7 +11153,7 @@
 						}),
 						'if',
 						Alert,
-						54,
+						73,
 						16
 					);
 				}
@@ -11049,7 +11161,7 @@
 				reset(div_2);
 				reset(div_1);
 				reset(div);
-				bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
+				bind_this(div, ($$value) => rootElement($$value), () => rootElement());
 
 				template_effect(() => {
 					set_class(div, 1, `qc-general-alert ${typeClass ?? ''}`);
@@ -11065,7 +11177,7 @@
 				}),
 				'if',
 				Alert,
-				39,
+				58,
 				0
 			);
 		}
@@ -11083,7 +11195,12 @@
 			content: {},
 			hide: {},
 			fullWidth: {},
-			slotContent: {}
+			slotContent: {},
+			id: {},
+			persistenceKey: {},
+			persistHidden: {},
+			rootElement: {},
+			hideAlertCallback: {}
 		},
 		[],
 		[],
@@ -11092,18 +11209,69 @@
 
 	AlertWC[FILENAME] = 'src/sdg/components/Alert/AlertWC.svelte';
 
-	var root$f = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), AlertWC[FILENAME], [[25, 0]]);
+	var root$f = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), AlertWC[FILENAME], [[40, 0]]);
 
 	function AlertWC($$anchor, $$props) {
 		check_target(new.target);
 		push($$props, true);
 
-		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
-		var $$exports = { ...legacy_api() };
+		var $$ownership_validator = create_ownership_validator($$props);
+
+		let hide = prop($$props, 'hide', 7, "false"),
+			props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host', 'hide']);
+
+		let rootElement = tag(state(void 0), 'rootElement');
+
+		function hideAlertCallback() {
+			get(rootElement)?.dispatchEvent(new CustomEvent('qc.alert.hide', { bubbles: true, composed: true }));
+		}
+
+		var $$exports = {
+			get hide() {
+				return hide();
+			},
+
+			set hide($$value = "false") {
+				hide($$value);
+				flushSync();
+			},
+
+			...legacy_api()
+		};
+
 		var fragment = root$f();
 		var node = first_child(fragment);
 
-		add_svelte_meta(() => Alert(node, spread_props(() => props, { slotContent: `<slot />` })), 'component', AlertWC, 21, 1, { componentTag: 'Alert' });
+		{
+			$$ownership_validator.binding('hide', Alert, hide);
+
+			add_svelte_meta(
+				() => Alert(node, spread_props({ hideAlertCallback }, () => props, {
+					slotContent: `<slot />`,
+
+					get hide() {
+						return hide();
+					},
+
+					set hide($$value) {
+						hide($$value);
+					},
+
+					get rootElement() {
+						return get(rootElement);
+					},
+
+					set rootElement($$value) {
+						set(rootElement, $$value, true);
+					}
+				})),
+				'component',
+				AlertWC,
+				33,
+				1,
+				{ componentTag: 'Alert' }
+			);
+		}
 
 		var link = sibling(node, 2);
 
@@ -11120,7 +11288,9 @@
 			maskable: { attribute: 'maskable' },
 			fullWidth: { attribute: 'full-width' },
 			content: { attribute: 'content' },
-			hide: { attribute: 'hide' }
+			hide: { attribute: 'hide', reflect: true },
+			persistHidden: { attribute: 'persist-hidden', type: 'Boolean' },
+			persistenceKey: { attribute: 'persistence-key', type: 'String' }
 		},
 		[],
 		[],
@@ -11267,91 +11437,49 @@
 
 	ExternalLink[FILENAME] = 'src/sdg/components/ExternalLink/ExternalLink.svelte';
 
-	var root$d = add_locations(from_html(`<span role="img" class="qc-ext-link-img"></span>`), ExternalLink[FILENAME], [[89, 0]]);
+	var root$d = add_locations(from_html(`<div hidden=""><!></div>`), ExternalLink[FILENAME], [[48, 0]]);
 
 	function ExternalLink($$anchor, $$props) {
 		check_target(new.target);
 		push($$props, true);
 
-		const externalIconAlt = prop($$props, 'externalIconAlt', 23, () => strict_equals(Utils.getPageLanguage(), 'fr')
-			? "Ce lien dirige vers un autre site."
-			: "This link directs to another site.");
+		let externalIconAlt = prop($$props, 'externalIconAlt', 23, () => strict_equals(Utils.getPageLanguage(), 'fr')
+				? "Ce lien dirige vers un autre site."
+				: "This link directs to another site."),
+			links = prop($$props, 'links', 23, () => []),
+			isUpdating = prop($$props, 'isUpdating', 15, false),
+			nestedExternalLinks = prop($$props, 'nestedExternalLinks', 7, false);
 
 		let imgElement = tag(state(void 0), 'imgElement');
+		let processedLinks = new Set();
 
-		function createVisibleNodesTreeWalker() {
-			return document.createTreeWalker(get(imgElement).parentElement, NodeFilter.SHOW_ALL, {
-				acceptNode: (node) => {
-					if (node instanceof Element) {
-						if (node.hasAttribute('hidden')) {
-							return NodeFilter.FILTER_REJECT;
-						}
-
-						const style = window.getComputedStyle(node);
-
-						// Si l'élément est masqué par CSS (display ou visibility), on l'ignore
-						if (strict_equals(style.display, 'none') || strict_equals(style.visibility, 'hidden') || strict_equals(style.position, 'absolute')) {
-							return NodeFilter.FILTER_REJECT;
-						}
-					}
-
-					if (!node instanceof Text) {
-						return NodeFilter.FILTER_SKIP;
-					}
-
-					// Ignore les nœuds vides
-					if (!(/\S/).test(node.textContent)) {
-						return NodeFilter.FILTER_SKIP;
-					}
-
-					return NodeFilter.FILTER_ACCEPT;
-				}
-			});
-		}
-
-		onMount(() => {
-			get(imgElement).parentElement.querySelectorAll('a').forEach((link) => {
-				// Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
-				const walker = createVisibleNodesTreeWalker();
-
-				let lastTextNode = null;
-
-				while (walker.nextNode()) {
-					lastTextNode = walker.currentNode;
-				}
-
-				// S'il n'y a pas de nœud texte visible, on ne fait rien
-				if (!lastTextNode) {
+		function addExternalLinkIcon(links) {
+			links.forEach((link) => {
+				if (processedLinks.has(link.innerHTML)) {
 					return;
 				}
 
-				// Séparer le contenu du dernier nœud texte en deux parties :
-				// le préfixe (éventuel) et le dernier mot
-				const text = lastTextNode.textContent;
-
-				const match = text.match(/^([\s\S]*\s)?(\S+)\s*$/m);
+				let linkContent = link.innerHTML;
 
-				if (!match) {
-					return;
-				}
+				linkContent = `<span class="qc-ext-link-text">${linkContent}</span>&nbsp;${get(imgElement).outerHTML}`;
+				link.innerHTML = linkContent;
+				processedLinks.add(linkContent);
+			});
+		}
 
-				const prefix = match[1] || "";
-				const lastWord = match[2].replace(/([\/\-\u2013\u2014])/g, "$1<wbr>");
+		user_effect(() => {
+			if (nestedExternalLinks() || links().length <= 0 || !get(imgElement)) {
+				return;
+			}
 
-				// Crée un span avec white-space: nowrap pour empêcher le saut de ligne de l'image de lien externe
-				const span = document.createElement('span');
+			isUpdating(true);
 
-				span.classList.add('img-wrap');
-				span.innerHTML = `${lastWord}`;
-				span.appendChild(get(imgElement));
+			tick().then(() => {
+				addExternalLinkIcon(links());
 
-				// Met à jour le nœud texte : on garde le préfixe et on insère le span après
-				if (prefix) {
-					lastTextNode.textContent = prefix;
-					lastTextNode.parentNode.insertBefore(span, lastTextNode.nextSibling);
-				} else {
-					lastTextNode.parentNode.replaceChild(span, lastTextNode);
-				}
+				return tick();
+			}).then(() => {
+				isUpdating(false);
 			});
 		});
 
@@ -11369,19 +11497,82 @@
 				flushSync();
 			},
 
+			get links() {
+				return links();
+			},
+
+			set links($$value = []) {
+				links($$value);
+				flushSync();
+			},
+
+			get isUpdating() {
+				return isUpdating();
+			},
+
+			set isUpdating($$value = false) {
+				isUpdating($$value);
+				flushSync();
+			},
+
+			get nestedExternalLinks() {
+				return nestedExternalLinks();
+			},
+
+			set nestedExternalLinks($$value = false) {
+				nestedExternalLinks($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
-		var span_1 = root$d();
+		var div = root$d();
+		var node = child(div);
+
+		add_svelte_meta(
+			() => Icon(node, {
+				type: 'external-link',
+
+				get alt() {
+					return externalIconAlt();
+				},
+
+				class: 'qc-ext-link-img',
+
+				get rootElement() {
+					return get(imgElement);
+				},
+
+				set rootElement($$value) {
+					set(imgElement, $$value, true);
+				}
+			}),
+			'component',
+			ExternalLink,
+			49,
+			4,
+			{ componentTag: 'Icon' }
+		);
 
-		bind_this(span_1, ($$value) => set(imgElement, $$value), () => get(imgElement));
-		template_effect(() => set_attribute(span_1, 'aria-label', externalIconAlt()));
-		append($$anchor, span_1);
+		reset(div);
+		append($$anchor, div);
 
 		return pop($$exports);
 	}
 
-	create_custom_element(ExternalLink, { externalIconAlt: {} }, [], [], true);
+	create_custom_element(
+		ExternalLink,
+		{
+			externalIconAlt: {},
+			links: {},
+			isUpdating: {},
+			nestedExternalLinks: {}
+		},
+		[],
+		[],
+		true
+	);
 
 	ExternalLinkWC[FILENAME] = 'src/sdg/components/ExternalLink/ExternalLinkWC.svelte';
 
@@ -11390,9 +11581,75 @@
 		push($$props, true);
 
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
+		const nestedExternalLinks = $$props.$$host.querySelector('qc-external-link');
+		let links = tag(state(proxy([])), 'links');
+		const observer = Utils.createMutationObserver($$props.$$host, refreshLinks);
+		let isUpdating = tag(state(false), 'isUpdating');
+		let pendingUpdate = false;
+
+		function queryLinks() {
+			return Array.from($$props.$$host.querySelectorAll('a'));
+		}
+
+		function refreshLinks() {
+			if (get(isUpdating) || pendingUpdate) {
+				return;
+			}
+
+			pendingUpdate = true;
+
+			tick().then(() => {
+				if (get(isUpdating)) {
+					pendingUpdate = false;
+
+					return;
+				}
+
+				set(links, queryLinks(), true);
+				pendingUpdate = false;
+			});
+		}
+
+		onMount(() => {
+			$$props.$$host.classList.add('qc-external-link');
+			set(links, queryLinks(), true);
+			observer?.observe($$props.$$host, { childList: true, characterData: true, subtree: true });
+		});
+
+		onDestroy(() => {
+			observer?.disconnect();
+		});
+
 		var $$exports = { ...legacy_api() };
 
-		add_svelte_meta(() => ExternalLink($$anchor, spread_props(() => props)), 'component', ExternalLinkWC, 15, 0, { componentTag: 'ExternalLink' });
+		add_svelte_meta(
+			() => ExternalLink($$anchor, spread_props(
+				{
+					get links() {
+						return get(links);
+					},
+
+					get nestedExternalLinks() {
+						return nestedExternalLinks;
+					}
+				},
+				() => props,
+				{
+					get isUpdating() {
+						return get(isUpdating);
+					},
+
+					set isUpdating($$value) {
+						set(isUpdating, $$value, true);
+					}
+				}
+			)),
+			'component',
+			ExternalLinkWC,
+			58,
+			0,
+			{ componentTag: 'ExternalLink' }
+		);
 
 		return pop($$exports);
 	}
@@ -12056,8 +12313,8 @@
 
 	LabelText[FILENAME] = 'src/sdg/components/Label/LabelText.svelte';
 
-	var root_1$5 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[4, 26]]);
-	var root$a = add_locations(from_html(`<!><!>`, 1), LabelText[FILENAME], []);
+	var root_1$5 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[5, 61]]);
+	var root$a = add_locations(from_html(`<span class="qc-label-text"><!></span><!>`, 1), LabelText[FILENAME], [[5, 0]]);
 
 	function LabelText($$anchor, $$props) {
 		check_target(new.target);
@@ -12089,17 +12346,19 @@
 		};
 
 		var fragment = root$a();
-		var node = first_child(fragment);
+		var span = first_child(fragment);
+		var node = child(span);
 
 		html(node, text);
+		reset(span);
 
-		var node_1 = sibling(node);
+		var node_1 = sibling(span);
 
 		{
 			var consequent = ($$anchor) => {
-				var span = root_1$5();
+				var span_1 = root_1$5();
 
-				append($$anchor, span);
+				append($$anchor, span_1);
 			};
 
 			add_svelte_meta(
@@ -12108,8 +12367,8 @@
 				}),
 				'if',
 				LabelText,
-				4,
-				12
+				5,
+				47
 			);
 		}
 
@@ -12917,8 +13176,8 @@
 
 	Checkbox[FILENAME] = 'src/sdg/components/Checkbox/Checkbox.svelte';
 
-	var root_2$4 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), Checkbox[FILENAME], [[56, 4]]);
-	var root$8 = add_locations(from_html(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[64, 4]]);
+	var root_2$4 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), Checkbox[FILENAME], [[57, 4]]);
+	var root$8 = add_locations(from_html(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[65, 4]]);
 
 	function Checkbox($$anchor, $$props) {
 		check_target(new.target);
@@ -12944,7 +13203,7 @@
 					}),
 					'if',
 					Checkbox,
-					55,
+					56,
 					4
 				);
 			}
@@ -12990,10 +13249,11 @@
 		user_effect((_) => updateChoiceInput(input(), required(), invalid(), compact(), false, false));
 
 		user_effect(() => {
-			if (!required()) return;
-			if (!labelElement()) return;
+			if (required() && get(label) && requiredSpan()) {
+				const textSpan = labelElement().querySelector('span');
 
-			labelElement().appendChild(requiredSpan());
+				textSpan.appendChild(requiredSpan());
+			}
 		});
 
 		var $$exports = {
@@ -13129,11 +13389,11 @@
 		var div = root$8();
 		var node_1 = child(div);
 
-		add_svelte_meta(() => requiredSpanSnippet(node_1), 'render', Checkbox, 71, 8);
+		add_svelte_meta(() => requiredSpanSnippet(node_1), 'render', Checkbox, 72, 8);
 
 		var node_2 = sibling(node_1, 2);
 
-		add_svelte_meta(() => snippet(node_2, () => children() ?? noop), 'render', Checkbox, 72, 8);
+		add_svelte_meta(() => snippet(node_2, () => children() ?? noop), 'render', Checkbox, 73, 8);
 
 		var node_3 = sibling(node_2, 2);
 
@@ -13153,7 +13413,7 @@
 			}),
 			'component',
 			Checkbox,
-			73,
+			74,
 			8,
 			{ componentTag: 'FormError' }
 		);
@@ -13503,7 +13763,7 @@
 		true
 	);
 
-	function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
+	function onMountInput(input, setTextFieldRow, setValue, setInvalid, setRequired) {
 	    if (!input) return;
 	    if (!input.autocomplete) {
 	        input.autocomplete = "off";
@@ -13512,6 +13772,7 @@
 	        input.id =  Utils.generateId(input.type);
 	    }
 	    setValue(input.value);
+	    setRequired(input.required);
 	    input.addEventListener(
 	        'input',
 	        () => {
@@ -13523,10 +13784,10 @@
 
 	TextField[FILENAME] = 'src/sdg/components/TextField/TextField.svelte';
 
-	var root_3$2 = add_locations(from_html(`<div class="qc-description"><!></div>`), TextField[FILENAME], [[135, 8]]);
-	var root_4$1 = add_locations(from_html(`<div aria-live="polite"><!></div>`), TextField[FILENAME], [[146, 8]]);
+	var root_3$2 = add_locations(from_html(`<div class="qc-description"><!></div>`), TextField[FILENAME], [[141, 8]]);
+	var root_4$1 = add_locations(from_html(`<div aria-live="polite"><!></div>`), TextField[FILENAME], [[152, 8]]);
 	var root_1$3 = add_locations(from_html(`<!> <!> <!> <!> <!>`, 1), TextField[FILENAME], []);
-	var root_6 = add_locations(from_html(`<div class="qc-textfield"><!></div>`), TextField[FILENAME], [[170, 4]]);
+	var root_6 = add_locations(from_html(`<div class="qc-textfield"><!></div>`), TextField[FILENAME], [[176, 4]]);
 
 	function TextField($$anchor, $$props) {
 		check_target(new.target);
@@ -13576,7 +13837,7 @@
 							}),
 							'component',
 							TextField,
-							125,
+							131,
 							8,
 							{ componentTag: 'Label' }
 						);
@@ -13589,7 +13850,7 @@
 					}),
 					'if',
 					TextField,
-					124,
+					130,
 					4
 				);
 			}
@@ -13614,14 +13875,14 @@
 					}),
 					'if',
 					TextField,
-					134,
+					140,
 					4
 				);
 			}
 
 			var node_3 = sibling(node_1, 2);
 
-			add_svelte_meta(() => snippet(node_3, children), 'render', TextField, 143, 4);
+			add_svelte_meta(() => snippet(node_3, () => children() ?? noop), 'render', TextField, 149, 4);
 
 			var node_4 = sibling(node_3, 2);
 
@@ -13652,7 +13913,7 @@
 					}),
 					'if',
 					TextField,
-					145,
+					151,
 					4
 				);
 			}
@@ -13699,7 +13960,7 @@
 					}),
 					'component',
 					TextField,
-					159,
+					165,
 					4,
 					{ componentTag: 'FormError' }
 				);
@@ -13736,7 +13997,9 @@
 			textFieldRow = tag(state(void 0), 'textFieldRow'),
 			defaultInvalidText = tag(
 				user_derived(() => {
-					if (!maxlengthReached()) return '';
+					if (!maxlengthReached()) {
+						return undefined;
+					}
 
 					return strict_equals(lang, 'fr')
 						? `La limite de caractères du champ ${label()} est dépassée.`
@@ -13749,10 +14012,14 @@
 			if (webComponentMode) return;
 
 			if (!input()) {
-				input(get(rootElement).querySelector('input,textarea'));
+				input(get(rootElement)?.querySelector('input,textarea'));
 			}
 
-			onMountInput(input(), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => value(valueParam), (invalidParam) => invalid(invalidParam));
+			onMountInput(input(), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => value(valueParam), (invalidParam) => invalid(invalidParam), (requiredParam) => {
+				if (requiredParam) {
+					required(requiredParam);
+				}
+			});
 		});
 
 		user_effect(() => {
@@ -13985,14 +14252,14 @@
 
 		{
 			var consequent_3 = ($$anchor) => {
-				add_svelte_meta(() => textfield($$anchor), 'render', TextField, 168, 4);
+				add_svelte_meta(() => textfield($$anchor), 'render', TextField, 174, 4);
 			};
 
 			var alternate = ($$anchor) => {
 				var div_2 = root_6();
 				var node_8 = child(div_2);
 
-				add_svelte_meta(() => textfield(node_8), 'render', TextField, 175, 8);
+				add_svelte_meta(() => textfield(node_8), 'render', TextField, 181, 8);
 				reset(div_2);
 				bind_this(div_2, ($$value) => set(rootElement, $$value), () => get(rootElement));
 
@@ -14010,7 +14277,7 @@
 				}),
 				'if',
 				TextField,
-				167,
+				173,
 				0
 			);
 		}
@@ -14048,7 +14315,7 @@
 
 	TextFieldWC[FILENAME] = 'src/sdg/components/TextField/TextFieldWC.svelte';
 
-	var root$5 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), TextFieldWC[FILENAME], [[100, 0]]);
+	var root$5 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), TextFieldWC[FILENAME], [[112, 0]]);
 
 	function TextFieldWC($$anchor, $$props) {
 		check_target(new.target);
@@ -14077,8 +14344,20 @@
 			textFieldRow = tag(state(void 0), 'textFieldRow');
 
 		onMount(() => {
-			set(input, $$props.$$host.querySelector('input,textarea'), true);
-			onMountInput(get(input), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => set(value, valueParam, true), (invalidParam) => invalid(invalidParam));
+			const initialLabelElement = $$props.$$host?.querySelector('label');
+
+			if (initialLabelElement) {
+				label(initialLabelElement.innerHTML);
+				initialLabelElement.remove();
+			}
+
+			set(input, $$props.$$host?.querySelector('input,textarea'), true);
+
+			onMountInput(get(input), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => set(value, valueParam, true), (invalidParam) => invalid(invalidParam), (requiredParam) => {
+				if (requiredParam) {
+					required(requiredParam);
+				}
+			});
 		});
 
 		user_effect(() => {
@@ -14090,10 +14369,6 @@
 		user_effect(() => {
 			if (!get(input)) return;
 
-			if (label()) {
-				get(input).before(get(labelElement));
-			}
-
 			if (description()) {
 				get(input).before(get(descriptionElement));
 			}
@@ -14109,7 +14384,11 @@
 			if (get(textFieldRow)) {
 				get(textFieldRow).appendChild(get(formErrorElement));
 			} else {
-				get(input).after(get(formErrorElement));
+				if (get(maxlengthElement)) {
+					get(maxlengthElement).after(get(formErrorElement));
+				} else {
+					get(input).after(get(formErrorElement));
+				}
 			}
 		});
 
@@ -14318,7 +14597,7 @@
 				}),
 				'component',
 				TextFieldWC,
-				80,
+				92,
 				0,
 				{ componentTag: 'TextField' }
 			);
@@ -14854,9 +15133,9 @@
 
 	DropdownListItemsSingle[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte';
 
-	var root_3$1 = add_locations(from_html(`<span class="qc-sr-only"><!></span>`), DropdownListItemsSingle[FILENAME], [[129, 20]]);
-	var root_2$3 = add_locations(from_html(`<li tabindex="0" role="option"><!></li>`), DropdownListItemsSingle[FILENAME], [[113, 12]]);
-	var root_1$2 = add_locations(from_html(`<ul></ul>`), DropdownListItemsSingle[FILENAME], [[111, 4]]);
+	var root_3$1 = add_locations(from_html(`<span class="qc-sr-only"><!></span>`), DropdownListItemsSingle[FILENAME], [[130, 20]]);
+	var root_2$3 = add_locations(from_html(`<li tabindex="0" role="option"><!></li>`), DropdownListItemsSingle[FILENAME], [[114, 12]]);
+	var root_1$2 = add_locations(from_html(`<ul></ul>`), DropdownListItemsSingle[FILENAME], [[112, 4]]);
 
 	function DropdownListItemsSingle($$anchor, $$props) {
 		check_target(new.target);
@@ -14900,7 +15179,7 @@
 			event.preventDefault();
 
 			if (!item.disabled) {
-				items().forEach((item) => assign(item, 'checked', false, 'src/​sdg/​components/​DropdownList/​DropdownListItems/​DropdownListItemsSingle/​DropdownListItemsSingle.svelte:45:34'));
+				items().forEach((item) => assign(item, 'checked', false, 'src/​sdg/​components/​DropdownList/​DropdownListItems/​DropdownListItemsSingle/​DropdownListItemsSingle.svelte:46:34'));
 				items().find((option) => strict_equals(option.value, item.value)).checked = true;
 				selectionCallback()();
 			}
@@ -14935,7 +15214,7 @@
 				handleSelection(event, item);
 			}
 
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (canExit(event, index)) {
 					handleExit()(event.key);
 				}
@@ -15087,13 +15366,13 @@
 								}),
 								'if',
 								DropdownListItemsSingle,
-								128,
+								129,
 								16
 							);
 						}
 
 						reset(li);
-						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 114, 16);
+						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 115, 16);
 						bind_this(li, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 						template_effect(() => {
@@ -15113,7 +15392,7 @@
 					}),
 					'each',
 					DropdownListItemsSingle,
-					112,
+					113,
 					8
 				);
 
@@ -15127,7 +15406,7 @@
 				}),
 				'if',
 				DropdownListItemsSingle,
-				110,
+				111,
 				0
 			);
 		}
@@ -15161,8 +15440,8 @@
 
 	DropdownListItemsMultiple[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte';
 
-	var root_2$2 = add_locations(from_html(`<li><label class="qc-choicefield-label" compact=""><input type="checkbox" class="qc-choicefield qc-compact"/> <span> </span></label></li>`), DropdownListItemsMultiple[FILENAME], [[153, 12, [[163, 16, [[168, 20], [180, 20]]]]]]);
-	var root_1$1 = add_locations(from_html(`<ul></ul>`), DropdownListItemsMultiple[FILENAME], [[147, 4]]);
+	var root_2$2 = add_locations(from_html(`<li><label class="qc-choicefield-label" compact=""><input type="checkbox" class="qc-choicefield qc-compact"/> <span> </span></label></li>`), DropdownListItemsMultiple[FILENAME], [[154, 12, [[164, 16, [[169, 20], [181, 20]]]]]]);
+	var root_1$1 = add_locations(from_html(`<ul></ul>`), DropdownListItemsMultiple[FILENAME], [[148, 4]]);
 
 	function DropdownListItemsMultiple($$anchor, $$props) {
 		check_target(new.target);
@@ -15248,11 +15527,11 @@
 
 				if (displayedItems().length > 0 && !displayedItems()[index].disabled) {
 					event.target.checked = !event.target.checked;
-					$$ownership_validator.mutation('displayedItems', ['displayedItems', index, 'checked'], displayedItems()[index].checked = event.target.checked, 86, 16);
+					$$ownership_validator.mutation('displayedItems', ['displayedItems', index, 'checked'], displayedItems()[index].checked = event.target.checked, 87, 16);
 				}
 			}
 
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (canExit(event, index)) {
 					handleExit()(event.key);
 				}
@@ -15392,8 +15671,8 @@
 						remove_input_defaults(input);
 						input.__change = handleChange;
 						input.__keydown = (e) => handleKeyDown(e, get(index));
-						validate_binding('bind:checked={item.checked}', [], () => get(item), () => 'checked', 175, 28);
-						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 176, 28);
+						validate_binding('bind:checked={item.checked}', [], () => get(item), () => 'checked', 176, 28);
+						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 177, 28);
 						bind_this(input, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 						var input_value;
@@ -15428,7 +15707,7 @@
 					}),
 					'each',
 					DropdownListItemsMultiple,
-					148,
+					149,
 					8
 				);
 
@@ -15442,7 +15721,7 @@
 				}),
 				'if',
 				DropdownListItemsMultiple,
-				146,
+				147,
 				0
 			);
 		}
@@ -15474,15 +15753,14 @@
 
 	DropdownListItems[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte';
 
-	var root_4 = add_locations(from_html(`<span class="qc-dropdown-list-no-options"><!></span>`), DropdownListItems[FILENAME], [[100, 16]]);
-	var root$3 = add_locations(from_html(`<div class="qc-dropdown-list-items" tabindex="-1"><!> <div class="qc-dropdown-list-no-options-container" role="status"><!></div></div>`), DropdownListItems[FILENAME], [[62, 0, [[97, 4]]]]);
+	var root_4 = add_locations(from_html(`<span class="qc-dropdown-list-no-options"><!></span>`), DropdownListItems[FILENAME], [[82, 16]]);
+	var root$3 = add_locations(from_html(`<div class="qc-dropdown-list-items" tabindex="-1"><!> <div class="qc-dropdown-list-no-options-container" role="status"><!></div></div>`), DropdownListItems[FILENAME], [[45, 0, [[79, 4]]]]);
 
 	function DropdownListItems($$anchor, $$props) {
 		check_target(new.target);
 		push($$props, true);
 
 		let id = prop($$props, 'id', 7),
-			enableSearch = prop($$props, 'enableSearch', 7),
 			multiple = prop($$props, 'multiple', 7),
 			items = prop($$props, 'items', 7),
 			displayedItems = prop($$props, 'displayedItems', 7),
@@ -15497,43 +15775,21 @@
 
 		let itemsComponent = tag(state(void 0), 'itemsComponent');
 
-		let usedHeight = tag(
-			user_derived(() => {
-				const maxItemsHeight = 336;
-				const searchInputTotalHeight = 56;
-
-				if (enableSearch()) {
-					if (displayedItems().length > 7) {
-						return maxItemsHeight - searchInputTotalHeight - 17;
-					}
-
-					return maxItemsHeight - searchInputTotalHeight;
-				} else {
-					if (displayedItems().length > 8) {
-						return maxItemsHeight - 33;
-					}
-
-					return maxItemsHeight;
-				}
-			}),
-			'usedHeight'
-		);
-
 		function focus() {
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				get(itemsComponent)?.focusOnFirstElement();
 			}).catch(console.error);
 		}
 
 		function focusOnLastElement() {
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				get(itemsComponent)?.focusOnLastElement();
 			}).catch(console.error);
 		}
 
 		function focusOnFirstMatchingElement(value) {
 			if (get(itemsComponent) && value && value.length > 0) {
-				Utils.sleep(5).then(() => {
+				tick().then(() => {
 					get(itemsComponent)?.focusOnFirstMatchingElement(value);
 				}).catch(console.error);
 			}
@@ -15561,15 +15817,6 @@
 				flushSync();
 			},
 
-			get enableSearch() {
-				return enableSearch();
-			},
-
-			set enableSearch($$value) {
-				enableSearch($$value);
-				flushSync();
-			},
-
 			get multiple() {
 				return multiple();
 			},
@@ -15711,7 +15958,7 @@
 					),
 					'component',
 					DropdownListItems,
-					69,
+					51,
 					8,
 					{ componentTag: 'DropdownListItemsMultiple' }
 				);
@@ -15756,7 +16003,7 @@
 					),
 					'component',
 					DropdownListItems,
-					82,
+					64,
 					8,
 					{ componentTag: 'DropdownListItemsSingle' }
 				);
@@ -15768,7 +16015,7 @@
 				}),
 				'if',
 				DropdownListItems,
-				68,
+				50,
 				4
 			);
 		}
@@ -15792,7 +16039,7 @@
 					}),
 					'await',
 					DropdownListItems,
-					99,
+					81,
 					12
 				);
 
@@ -15805,19 +16052,14 @@
 				}),
 				'if',
 				DropdownListItems,
-				98,
+				80,
 				8
 			);
 		}
 
 		reset(div_1);
 		reset(div);
-
-		template_effect(() => {
-			set_attribute(div, 'id', id());
-			set_style(div, `--dropdown-items-height: ${get(usedHeight) ?? ''};`);
-		});
-
+		template_effect(() => set_attribute(div, 'id', id()));
 		append($$anchor, div);
 
 		return pop($$exports);
@@ -15827,7 +16069,6 @@
 		DropdownListItems,
 		{
 			id: {},
-			enableSearch: {},
 			multiple: {},
 			items: {},
 			displayedItems: {},
@@ -15847,9 +16088,9 @@
 
 	DropdownListButton[FILENAME] = 'src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte';
 
-	var root_1 = add_locations(from_html(`<span class="qc-dropdown-choice"><!></span>`), DropdownListButton[FILENAME], [[29, 8]]);
-	var root_2$1 = add_locations(from_html(`<span class="qc-dropdown-placeholder"><!></span>`), DropdownListButton[FILENAME], [[31, 8]]);
-	var root$2 = add_locations(from_html(`<button><!> <span><!></span></button>`), DropdownListButton[FILENAME], [[19, 0, [[34, 4]]]]);
+	var root_1 = add_locations(from_html(`<span class="qc-dropdown-choice"><!></span>`), DropdownListButton[FILENAME], [[25, 8]]);
+	var root_2$1 = add_locations(from_html(`<span class="qc-dropdown-placeholder"><!></span>`), DropdownListButton[FILENAME], [[27, 8]]);
+	var root$2 = add_locations(from_html(`<button><!> <span><!></span></button>`), DropdownListButton[FILENAME], [[15, 0, [[30, 4]]]]);
 
 	function DropdownListButton($$anchor, $$props) {
 		check_target(new.target);
@@ -15860,6 +16101,7 @@
 			disabled = prop($$props, 'disabled', 7),
 			selectedOptionsText = prop($$props, 'selectedOptionsText', 7, ""),
 			placeholder = prop($$props, 'placeholder', 7),
+			buttonElement = prop($$props, 'buttonElement', 15),
 			rest = rest_props(
 				$$props,
 				[
@@ -15871,20 +16113,11 @@
 					'expanded',
 					'disabled',
 					'selectedOptionsText',
-					'placeholder'
+					'placeholder',
+					'buttonElement'
 				]);
 
-		let button;
-
-		function focus() {
-			button?.focus();
-		}
-
 		var $$exports = {
-			get focus() {
-				return focus;
-			},
-
 			get inputId() {
 				return inputId();
 			},
@@ -15930,12 +16163,21 @@
 				flushSync();
 			},
 
+			get buttonElement() {
+				return buttonElement();
+			},
+
+			set buttonElement($$value) {
+				buttonElement($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
-		var button_1 = root$2();
+		var button = root$2();
 
-		attribute_effect(button_1, () => ({
+		attribute_effect(button, () => ({
 			type: 'button',
 			id: inputId(),
 			disabled: disabled(),
@@ -15944,7 +16186,7 @@
 			...rest
 		}));
 
-		var node = child(button_1);
+		var node = child(button);
 
 		{
 			var consequent = ($$anchor) => {
@@ -15971,7 +16213,7 @@
 				}),
 				'if',
 				DropdownListButton,
-				28,
+				24,
 				4
 			);
 		}
@@ -16002,16 +16244,16 @@
 				}),
 				'component',
 				DropdownListButton,
-				35,
+				31,
 				8,
 				{ componentTag: 'Icon' }
 			);
 		}
 
 		reset(span_2);
-		reset(button_1);
-		bind_this(button_1, ($$value) => button = $$value, () => button);
-		append($$anchor, button_1);
+		reset(button);
+		bind_this(button, ($$value) => buttonElement($$value), () => buttonElement());
+		append($$anchor, button);
 
 		return pop($$exports);
 	}
@@ -16023,18 +16265,19 @@
 			expanded: {},
 			disabled: {},
 			selectedOptionsText: {},
-			placeholder: {}
+			placeholder: {},
+			buttonElement: {}
 		},
 		[],
-		['focus'],
+		[],
 		true
 	);
 
 	DropdownList[FILENAME] = 'src/sdg/components/DropdownList/DropdownList.svelte';
 
-	var root_2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[334, 20]]);
-	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[376, 24]]);
-	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[273, 0, [[278, 4, [[297, 8, [[325, 12, [[374, 16]]]]]]]]]]);
+	var root_2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[386, 20]]);
+	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[427, 24]]);
+	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[316, 0, [[321, 4, [[340, 8, [[369, 12, [[425, 16]]]]]]]]]]);
 
 	function DropdownList($$anchor, $$props) {
 		check_target(new.target);
@@ -16060,7 +16303,8 @@
 			multiple = prop($$props, 'multiple', 7, false),
 			rootElement = prop($$props, 'rootElement', 15),
 			errorElement = prop($$props, 'errorElement', 15),
-			webComponentMode = prop($$props, 'webComponentMode', 7, false);
+			webComponentMode = prop($$props, 'webComponentMode', 7, false),
+			expanded = prop($$props, 'expanded', 15, false);
 
 		const defaultPlaceholder = strict_equals(lang, "fr") ? "Faire une sélection" : "Select an option",
 			inputId = `${id()}-input`,
@@ -16068,12 +16312,14 @@
 			itemsId = `${id()}-items`,
 			labelId = `${id()}-label`,
 			errorId = `${id()}-error`,
-			availableWidths = ["xs", "sm", "md", "lg", "xl"];
+			availableWidths = ["xs", "sm", "md", "lg", "xl"],
+			buttonHeight = 40;
 
 		let instance = tag(state(void 0), 'instance'),
 			parentRow = tag(user_derived(() => get(instance)?.closest(".qc-formfield-row")), 'parentRow'),
 			button = tag(state(void 0), 'button'),
 			searchInput = tag(state(void 0), 'searchInput'),
+			popup = tag(state(void 0), 'popup'),
 			dropdownItems = tag(state(void 0), 'dropdownItems'),
 			selectedItems = tag(user_derived(() => items().filter((item) => item.checked) ?? []), 'selectedItems'),
 			selectedOptionsText = tag(
@@ -16099,7 +16345,6 @@
 				'selectedOptionsText'
 			),
 			previousValue = tag(state(proxy(value())), 'previousValue'),
-			expanded = tag(state(false), 'expanded'),
 			searchText = tag(state(""), 'searchText'),
 			hiddenSearchText = tag(state(""), 'hiddenSearchText'),
 			displayedItems = tag(state(proxy(items())), 'displayedItems'),
@@ -16116,8 +16361,6 @@
 			),
 			widthClass = tag(
 				user_derived(() => {
-					webComponentMode() ? "container" : "root";
-
 					if (availableWidths.includes(width())) {
 						return `qc-dropdown-list-${width()}`;
 					}
@@ -16139,7 +16382,32 @@
 					return "";
 				}),
 				'srItemsCountText'
-			);
+			),
+			buttonElementYPosition = tag(state(0), 'buttonElementYPosition'),
+			usedHeight = tag(
+				user_derived(() => {
+					const maxItemsHeight = 336;
+					const searchInputTotalHeight = 56;
+
+					if (enableSearch()) {
+						if (get(displayedItems).length > 7) {
+							return maxItemsHeight - searchInputTotalHeight - 17;
+						}
+
+						return maxItemsHeight - searchInputTotalHeight;
+					} else {
+						if (get(displayedItems).length > 8) {
+							return maxItemsHeight - 33;
+						}
+
+						return maxItemsHeight;
+					}
+				}),
+				'usedHeight'
+			),
+			topOffset = tag(state(0), 'topOffset'),
+			popupTopBorderThickness = tag(user_derived(() => get(topOffset) && get(topOffset) < 0 ? 1 : 0), 'popupTopBorderThickness'),
+			popupBottomBorderThickness = tag(user_derived(() => get(topOffset) && get(topOffset) >= 0 ? 1 : 0), 'popupBottomBorderThickness');
 
 		function focusOnSelectedOption(value) {
 			if (get(displayedItems).length > 0) {
@@ -16153,28 +16421,28 @@
 
 		function handleDropdownButtonClick(event) {
 			event.preventDefault();
-			set(expanded, !get(expanded));
+			expanded(!expanded());
 		}
 
 		function handleOuterEvent() {
 			if (!Utils.componentIsActive(get(instance))) {
-				set(expanded, false);
+				expanded(false);
 			}
 		}
 
 		function handleTab(event) {
 			// Le changement de focus a lieu après le lancement de l'événement clavier.
 			// Il faut donc faire un court sleep pour avoir le nouvel élément en focus.
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (strict_equals(event.key, "Tab") && !Utils.componentIsActive(get(instance))) {
-					set(expanded, false);
+					expanded(false);
 				}
 			}).catch(console.error);
 		}
 
 		function handleEscape(event) {
 			if (strict_equals(event.key, "Escape")) {
-				set(expanded, false);
+				expanded(false);
 			}
 		}
 
@@ -16188,7 +16456,7 @@
 		function handleArrowDown(event, targetComponent) {
 			if (strict_equals(event.key, "ArrowDown") && targetComponent) {
 				event.preventDefault();
-				set(expanded, true);
+				expanded(true);
 				targetComponent.focus();
 			}
 		}
@@ -16200,10 +16468,10 @@
 			if (strict_equals(event.key, "ArrowDown")) {
 				event.preventDefault();
 
-				if (get(expanded)) {
+				if (expanded()) {
 					targetComponent.focus();
 				} else {
-					set(expanded, true);
+					expanded(true);
 					focusOnSelectedOption(value());
 				}
 			}
@@ -16211,7 +16479,7 @@
 			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 
-				if (get(expanded)) {
+				if (expanded()) {
 					get(dropdownItems)?.focusOnLastElement();
 				}
 			}
@@ -16223,7 +16491,7 @@
 			} else {
 				set(hiddenSearchText, get(hiddenSearchText) + event.key);
 
-				if (get(hiddenSearchText).length > 0 && get(expanded)) {
+				if (get(hiddenSearchText).length > 0 && expanded()) {
 					get(dropdownItems)?.focusOnFirstMatchingElement(get(hiddenSearchText));
 				}
 			}
@@ -16238,7 +16506,7 @@
 		}
 
 		function closeDropdown(key) {
-			set(expanded, false);
+			expanded(false);
 			set(hiddenSearchText, "");
 
 			if (strict_equals(key, "Escape") && get(button)) {
@@ -16264,12 +16532,13 @@
 
 		user_effect(() => {
 			if (strict_equals(get(previousValue)?.toString(), value()?.toString(), false)) {
+				set(previousValue, value(), true);
 				invalid(false);
 			}
 		});
 
 		user_effect(() => {
-			if (!get(expanded)) {
+			if (!expanded()) {
 				set(hiddenSearchText, "");
 				set(searchText, "");
 			}
@@ -16309,10 +16578,34 @@
 			placeholder(strict_equals(optionWithEmptyValue.label, "", false) ? optionWithEmptyValue.label : defaultPlaceholder);
 		});
 
+		user_effect(() => {
+			if (expanded()) {
+				const borderThickness = 2 * (invalid() ? 2 : 1);
+
+				const popupHeight = get(popup)
+					? get(popup).getBoundingClientRect().height
+					: get(usedHeight);
+
+				set(topOffset, get(buttonElementYPosition) + buttonHeight > innerHeight - popupHeight ? -popupHeight : buttonHeight - borderThickness, true);
+			}
+		});
+
 		function findOptionWithEmptyValue() {
 			return items()?.find((item) => strict_equals(item.value, "") || strict_equals(item.value, null) || strict_equals(item.value, undefined));
 		}
 
+		function setRemainingBottomHeight() {
+			if (!get(button)) {
+				return;
+			}
+
+			set(buttonElementYPosition, get(button).getBoundingClientRect().y, true);
+		}
+
+		onMount(() => {
+			setRemainingBottomHeight();
+		});
+
 		var $$exports = {
 			get id() {
 				return id();
@@ -16476,6 +16769,15 @@
 				flushSync();
 			},
 
+			get expanded() {
+				return expanded();
+			},
+
+			set expanded($$value = false) {
+				expanded($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -16483,6 +16785,7 @@
 
 		event('click', $document.body, handleOuterEvent);
 		event('keydown', $document.body, handleTab);
+		event('scroll', $window, setRemainingBottomHeight);
 
 		var div_1 = child(div);
 
@@ -16523,7 +16826,7 @@
 					}),
 					'component',
 					DropdownList,
-					284,
+					327,
 					12,
 					{ componentTag: 'Label' }
 				);
@@ -16535,7 +16838,7 @@
 				}),
 				'if',
 				DropdownList,
-				283,
+				326,
 				8
 			);
 		}
@@ -16544,62 +16847,70 @@
 		var node_1 = child(div_2);
 
 		add_svelte_meta(
-			() => bind_this(
-				DropdownListButton(node_1, {
-					get inputId() {
-						return inputId;
-					},
+			() => DropdownListButton(node_1, {
+				get inputId() {
+					return inputId;
+				},
 
-					get disabled() {
-						return disabled();
-					},
+				get disabled() {
+					return disabled();
+				},
 
-					get expanded() {
-						return get(expanded);
-					},
+				get expanded() {
+					return expanded();
+				},
 
-					get 'aria-labelledby'() {
-						return labelId;
-					},
+				get 'aria-labelledby'() {
+					return labelId;
+				},
 
-					get 'aria-required'() {
-						return required();
-					},
+				get 'aria-required'() {
+					return required();
+				},
 
-					get 'aria-expanded'() {
-						return get(expanded);
-					},
+				get 'aria-expanded'() {
+					return expanded();
+				},
 
-					'aria-haspopup': 'listbox',
+				'aria-haspopup': 'listbox',
 
-					get 'aria-controls'() {
-						return itemsId;
-					},
+				get 'aria-controls'() {
+					return itemsId;
+				},
 
-					get 'aria-invalid'() {
-						return invalid();
-					},
+				get 'aria-invalid'() {
+					return invalid();
+				},
 
-					get selectedOptionsText() {
-						return get(selectedOptionsText);
-					},
+				get selectedOptionsText() {
+					return get(selectedOptionsText);
+				},
 
-					get placeholder() {
-						return placeholder();
-					},
+				get placeholder() {
+					return placeholder();
+				},
 
-					onclick: handleDropdownButtonClick,
+				get usedHeight() {
+					return get(usedHeight);
+				},
 
-					onkeydown: (e) => {
-						handleButtonKeyDown(e, enableSearch() ? get(searchInput) : get(dropdownItems));
-					}
-				}),
-				($$value) => set(button, $$value, true),
-				() => get(button)
-			),
+				onclick: handleDropdownButtonClick,
+
+				onkeydown: (e) => {
+					handleButtonKeyDown(e, enableSearch() ? get(searchInput) : get(dropdownItems));
+				},
+
+				get buttonElement() {
+					return get(button);
+				},
+
+				set buttonElement($$value) {
+					set(button, $$value, true);
+				}
+			}),
 			'component',
 			DropdownList,
-			306,
+			349,
 			12,
 			{ componentTag: 'DropdownListButton' }
 		);
@@ -16654,7 +16965,7 @@
 						),
 						'component',
 						DropdownList,
-						335,
+						387,
 						24,
 						{ componentTag: 'SearchInput' }
 					);
@@ -16670,7 +16981,7 @@
 				}),
 				'if',
 				DropdownList,
-				333,
+				385,
 				16
 			);
 		}
@@ -16687,10 +16998,6 @@
 							return itemsId;
 						},
 
-						get enableSearch() {
-							return enableSearch();
-						},
-
 						get placeholder() {
 							return placeholder();
 						},
@@ -16734,7 +17041,7 @@
 				),
 				'component',
 				DropdownList,
-				353,
+				405,
 				16,
 				{ componentTag: 'DropdownListItems' }
 			);
@@ -16754,12 +17061,13 @@
 			}),
 			'key',
 			DropdownList,
-			375,
+			426,
 			20
 		);
 
 		reset(div_5);
 		reset(div_3);
+		bind_this(div_3, ($$value) => set(popup, $$value), () => get(popup));
 		reset(div_2);
 		bind_this(div_2, ($$value) => set(instance, $$value), () => get(instance));
 		reset(div_1);
@@ -16801,7 +17109,7 @@
 				}),
 				'component',
 				DropdownList,
-				384,
+				435,
 				4,
 				{ componentTag: 'FormError' }
 			);
@@ -16820,7 +17128,16 @@
 			]));
 
 			set_attribute(div_3, 'id', popupId);
-			set_attribute(div_3, 'hidden', !get(expanded));
+
+			set_style(div_3, `
+                    --dropdown-items-top-offset: ${get(topOffset)};
+                    --dropdown-items-height: ${get(usedHeight)};
+                    --dropdown-items-bottom-border: ${get(popupBottomBorderThickness)};
+                    --dropdown-items-top-border: ${get(popupTopBorderThickness)};
+                    --dropdown-button-border: ${invalid() ? 2 : 1};
+                    `);
+
+			set_attribute(div_3, 'hidden', !expanded());
 		});
 
 		append($$anchor, div);
@@ -16848,7 +17165,8 @@
 			multiple: {},
 			rootElement: {},
 			errorElement: {},
-			webComponentMode: {}
+			webComponentMode: {},
+			expanded: {}
 		},
 		[],
 		[],
@@ -16857,7 +17175,7 @@
 
 	SelectWC[FILENAME] = 'src/sdg/components/DropdownList/SelectWC.svelte';
 
-	var root = add_locations(from_html(`<div hidden=""><!></div> <!> <link rel="stylesheet"/>`, 1), SelectWC[FILENAME], [[119, 0], [139, 0]]);
+	var root = add_locations(from_html(`<div hidden=""><!></div> <!> <link rel="stylesheet"/>`, 1), SelectWC[FILENAME], [[144, 0], [165, 0]]);
 
 	function SelectWC($$anchor, $$props) {
 		check_target(new.target);
@@ -16873,6 +17191,7 @@
 			label = prop($$props, 'label', 7),
 			placeholder = prop($$props, 'placeholder', 7),
 			width = prop($$props, 'width', 7),
+			expanded = prop($$props, 'expanded', 15, false),
 			rest = rest_props(
 				$$props,
 				[
@@ -16887,15 +17206,16 @@
 					'required',
 					'label',
 					'placeholder',
-					'width'
+					'width',
+					'expanded'
 				]);
 
 		let selectElement = tag(state(void 0), 'selectElement');
 		let items = tag(state(void 0), 'items');
 		let labelElement = tag(state(void 0), 'labelElement');
-		let observer = new MutationObserver(setupItemsList);
+		const observer = Utils.createMutationObserver($$props.$$host, setupItemsList);
 
-		let observerOptions = {
+		const observerOptions = {
 			childList: true,
 			attributes: true,
 			subtree: true,
@@ -16906,6 +17226,7 @@
 		let errorElement = tag(state(void 0), 'errorElement');
 		let parentRow = tag(user_derived(() => $$props.$$host.closest(".qc-formfield-row")), 'parentRow');
 		let internalChange = false;
+		let previousValue = tag(state(proxy(value())), 'previousValue');
 
 		onMount(() => {
 			set(selectElement, $$props.$$host.querySelector("select"), true);
@@ -16919,7 +17240,7 @@
 				multiple(get(selectElement).multiple);
 				disabled(get(selectElement).disabled);
 				get(selectElement).addEventListener("change", handleSelectChange);
-				observer.observe(get(selectElement), observerOptions);
+				observer?.observe(get(selectElement), observerOptions);
 			}
 
 			setupItemsList();
@@ -16937,23 +17258,31 @@
 
 			internalChange = true;
 
-			let newOptionSelected = false;
-
 			for (const option of get(selectElement).options) {
 				const selected = value().includes(option.value);
 
 				if (strict_equals(selected, option.selected, false)) {
 					option.toggleAttribute("selected", selected);
 					option.selected = selected;
-					newOptionSelected = true;
 				}
 			}
 
-			if (newOptionSelected) {
-				get(selectElement).dispatchEvent(new Event('change'));
+			tick().then(() => internalChange = false);
+		});
+
+		user_effect(() => {
+			if (strict_equals(get(previousValue).toString(), value().toString(), false)) {
+				set(previousValue, value(), true);
+				get(selectElement)?.dispatchEvent(new CustomEvent('change', { detail: value() }));
 			}
+		});
 
-			tick().then(() => internalChange = false);
+		user_effect(() => {
+			if (expanded()) {
+				get(selectElement)?.dispatchEvent(new CustomEvent('qc.select.show', { bubbles: true, composed: true }));
+			} else {
+				get(selectElement)?.dispatchEvent(new CustomEvent('qc.select.hide', { bubbles: true, composed: true }));
+			}
 		});
 
 		user_effect(() => {
@@ -17060,6 +17389,15 @@
 				flushSync();
 			},
 
+			get expanded() {
+				return expanded();
+			},
+
+			set expanded($$value = false) {
+				expanded($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -17077,6 +17415,7 @@
 
 			$$ownership_validator.binding('value', DropdownList, value);
 			$$ownership_validator.binding('invalid', DropdownList, invalid);
+			$$ownership_validator.binding('expanded', DropdownList, expanded);
 
 			add_svelte_meta(
 				() => DropdownList(node_1, spread_props(
@@ -17147,12 +17486,20 @@
 
 						set rootElement($$value) {
 							set(instance, $$value, true);
+						},
+
+						get expanded() {
+							return expanded();
+						},
+
+						set expanded($$value) {
+							expanded($$value);
 						}
 					}
 				)),
 				'component',
 				SelectWC,
-				123,
+				148,
 				0,
 				{ componentTag: 'DropdownList' }
 			);
@@ -17181,7 +17528,8 @@
 			placeholder: { attribute: 'placeholder', type: 'String' },
 			searchPlaceholder: { attribute: 'search-placeholder', type: 'String' },
 			noOptionsMessage: { attribute: 'no-options-message', type: 'String' },
-			multiple: { attribute: 'multiple', type: 'Boolean' }
+			multiple: { attribute: 'multiple', type: 'Boolean' },
+			expanded: { attribute: 'expanded', reflect: true, type: 'Boolean' }
 		},
 		['default'],
 		[],