qc-trousse-sdg 1.4.6 → 1.4.8

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;
+				let linkContent = link.innerHTML;
 
-				const match = text.match(/^([\s\S]*\s)?(\S+)\s*$/m);
-
-				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,48 +11581,341 @@
 		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);
 	}
 
 	customElements.define('qc-external-link', create_custom_element(ExternalLinkWC, { externalIconAlt: { attribute: 'img-alt' } }, [], [], false));
 
-	SearchInput[FILENAME] = 'src/sdg/components/SearchInput/SearchInput.svelte';
+	LabelText[FILENAME] = 'src/sdg/components/Label/LabelText.svelte';
 
-	var root$c = add_locations(from_html(`<div><!> <input/> <!></div>`), SearchInput[FILENAME], [[28, 0, [[39, 4]]]]);
+	var root_1$6 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[5, 61]]);
+	var root$c = add_locations(from_html(`<span class="qc-label-text"><!></span><!>`, 1), LabelText[FILENAME], [[5, 0]]);
 
-	function SearchInput($$anchor, $$props) {
+	function LabelText($$anchor, $$props) {
 		check_target(new.target);
 		push($$props, true);
 
-		const lang = Utils.getPageLanguage();
-
-		let value = prop($$props, 'value', 15, ''),
-			ariaLabel = prop($$props, 'ariaLabel', 23, () => strict_equals(lang, "fr") ? "Rechercher..." : "Search..."),
-			clearAriaLabel = prop($$props, 'clearAriaLabel', 23, () => strict_equals(lang, "fr") ? "Effacer le texte" : "Clear text"),
-			leftIcon = prop($$props, 'leftIcon', 7, false),
-			id = prop($$props, 'id', 23, () => `qc-search-input-${Math.random().toString(36).slice(2, 11)}`),
-			rest = rest_props(
-				$$props,
-				[
-					'$$slots',
-					'$$events',
-					'$$legacy',
-					'$$host',
-					'value',
-					'ariaLabel',
-					'clearAriaLabel',
-					'leftIcon',
-					'id'
-				]);
+		let text = prop($$props, 'text', 7),
+			required = prop($$props, 'required', 7);
 
-		leftIcon(strict_equals(leftIcon(), true) || strict_equals(leftIcon(), "true") || strict_equals(leftIcon(), ""));
+		var $$exports = {
+			get text() {
+				return text();
+			},
 
-		const isDisabled = strict_equals($$props.disabled, true) || strict_equals($$props.disabled, "true") || strict_equals($$props.disabled, "");
-		let searchInput;
+			set text($$value) {
+				text($$value);
+				flushSync();
+			},
+
+			get required() {
+				return required();
+			},
+
+			set required($$value) {
+				required($$value);
+				flushSync();
+			},
+
+			...legacy_api()
+		};
+
+		var fragment = root$c();
+		var span = first_child(fragment);
+		var node = child(span);
+
+		html(node, text);
+		reset(span);
+
+		var node_1 = sibling(span);
+
+		{
+			var consequent = ($$anchor) => {
+				var span_1 = root_1$6();
+
+				append($$anchor, span_1);
+			};
+
+			add_svelte_meta(
+				() => if_block(node_1, ($$render) => {
+					if (required()) $$render(consequent);
+				}),
+				'if',
+				LabelText,
+				5,
+				47
+			);
+		}
+
+		append($$anchor, fragment);
+
+		return pop($$exports);
+	}
+
+	create_custom_element(LabelText, { text: {}, required: {} }, [], [], true);
+
+	Label[FILENAME] = 'src/sdg/components/Label/Label.svelte';
+
+	var root$b = add_locations(from_html(`<label><!></label>`), Label[FILENAME], [[16, 0]]);
+
+	function Label($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
+		let forId = prop($$props, 'forId', 7),
+			text = prop($$props, 'text', 7),
+			required = prop($$props, 'required', 7, false),
+			compact = prop($$props, 'compact', 7, false),
+			bold = prop($$props, 'bold', 7, false),
+			disabled = prop($$props, 'disabled', 7, false),
+			rootElement = prop($$props, 'rootElement', 15),
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'forId',
+					'text',
+					'required',
+					'compact',
+					'bold',
+					'disabled',
+					'rootElement'
+				]);
+
+		var $$exports = {
+			get forId() {
+				return forId();
+			},
+
+			set forId($$value) {
+				forId($$value);
+				flushSync();
+			},
+
+			get text() {
+				return text();
+			},
+
+			set text($$value) {
+				text($$value);
+				flushSync();
+			},
+
+			get required() {
+				return required();
+			},
+
+			set required($$value = false) {
+				required($$value);
+				flushSync();
+			},
+
+			get compact() {
+				return compact();
+			},
+
+			set compact($$value = false) {
+				compact($$value);
+				flushSync();
+			},
+
+			get bold() {
+				return bold();
+			},
+
+			set bold($$value = false) {
+				bold($$value);
+				flushSync();
+			},
+
+			get disabled() {
+				return disabled();
+			},
+
+			set disabled($$value = false) {
+				disabled($$value);
+				flushSync();
+			},
+
+			get rootElement() {
+				return rootElement();
+			},
+
+			set rootElement($$value) {
+				rootElement($$value);
+				flushSync();
+			},
+
+			...legacy_api()
+		};
+
+		var label = root$b();
+
+		attribute_effect(label, () => ({
+			for: forId(),
+
+			class: [
+				"qc-label",
+				compact() && "qc-compact",
+				bold() && "qc-bold",
+				disabled() && "qc-disabled"
+			],
+
+			...rest
+		}));
+
+		var node = child(label);
+
+		add_svelte_meta(
+			() => LabelText(node, {
+				get text() {
+					return text();
+				},
+
+				get required() {
+					return required();
+				}
+			}),
+			'component',
+			Label,
+			27,
+			4,
+			{ componentTag: 'LabelText' }
+		);
+
+		reset(label);
+		bind_this(label, ($$value) => rootElement($$value), () => rootElement());
+		append($$anchor, label);
+
+		return pop($$exports);
+	}
+
+	create_custom_element(
+		Label,
+		{
+			forId: {},
+			text: {},
+			required: {},
+			compact: {},
+			bold: {},
+			disabled: {},
+			rootElement: {}
+		},
+		[],
+		[],
+		true
+	);
+
+	SearchInput[FILENAME] = 'src/sdg/components/SearchInput/SearchInput.svelte';
+
+	var root$a = add_locations(from_html(`<!> <div><!> <input/> <!></div>`, 1), SearchInput[FILENAME], [[38, 0, [[51, 4]]]]);
+
+	function SearchInput($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
+		const lang = Utils.getPageLanguage();
+
+		let value = prop($$props, 'value', 15, ''),
+			label = prop($$props, 'label', 7, ''),
+			size = prop($$props, 'size', 7, ''),
+			ariaLabel = prop($$props, 'ariaLabel', 23, () => strict_equals(lang, "fr") ? "Rechercher..." : "Search..."),
+			clearAriaLabel = prop($$props, 'clearAriaLabel', 23, () => strict_equals(lang, "fr") ? "Effacer le texte" : "Clear text"),
+			leftIcon = prop($$props, 'leftIcon', 7, false),
+			id = prop($$props, 'id', 23, () => `qc-search-input-${Math.random().toString(36).slice(2, 11)}`),
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'value',
+					'label',
+					'size',
+					'ariaLabel',
+					'clearAriaLabel',
+					'leftIcon',
+					'id'
+				]);
+
+		leftIcon(strict_equals(leftIcon(), true) || strict_equals(leftIcon(), "true") || strict_equals(leftIcon(), ""));
+
+		const isDisabled = strict_equals($$props.disabled, true) || strict_equals($$props.disabled, "true") || strict_equals($$props.disabled, "");
+		let searchInput;
 
 		function focus() {
 			searchInput?.focus();
@@ -11451,6 +11935,24 @@
 				flushSync();
 			},
 
+			get label() {
+				return label();
+			},
+
+			set label($$value = '') {
+				label($$value);
+				flushSync();
+			},
+
+			get size() {
+				return size();
+			},
+
+			set size($$value = '') {
+				size($$value);
+				flushSync();
+			},
+
 			get ariaLabel() {
 				return ariaLabel();
 			},
@@ -11489,14 +11991,52 @@
 				flushSync();
 			},
 
-			...legacy_api()
-		};
+			...legacy_api()
+		};
+
+		var fragment = root$a();
+		var node = first_child(fragment);
+
+		{
+			var consequent = ($$anchor) => {
+				add_svelte_meta(
+					() => Label($$anchor, {
+						get disabled() {
+							return isDisabled;
+						},
+
+						get text() {
+							return label();
+						},
+
+						get forId() {
+							return id();
+						}
+					}),
+					'component',
+					SearchInput,
+					32,
+					4,
+					{ componentTag: 'Label' }
+				);
+			};
+
+			add_svelte_meta(
+				() => if_block(node, ($$render) => {
+					if (label()) $$render(consequent);
+				}),
+				'if',
+				SearchInput,
+				31,
+				0
+			);
+		}
 
-		var div = root$c();
-		var node = child(div);
+		var div = sibling(node, 2);
+		var node_1 = child(div);
 
 		{
-			var consequent = ($$anchor) => {
+			var consequent_1 = ($$anchor) => {
 				{
 					let $0 = user_derived(() => `qc-icon${isDisabled ? ' is-disabled' : ''}`);
 
@@ -11511,7 +12051,7 @@
 						}),
 						'component',
 						SearchInput,
-						34,
+						46,
 						8,
 						{ componentTag: 'Icon' }
 					);
@@ -11519,24 +12059,24 @@
 			};
 
 			add_svelte_meta(
-				() => if_block(node, ($$render) => {
-					if (leftIcon()) $$render(consequent);
+				() => if_block(node_1, ($$render) => {
+					if (leftIcon()) $$render(consequent_1);
 				}),
 				'if',
 				SearchInput,
-				33,
+				45,
 				4
 			);
 		}
 
-		var input = sibling(node, 2);
+		var input = sibling(node_1, 2);
 
 		attribute_effect(
 			input,
 			() => ({
 				type: 'search',
 				autocomplete: 'off',
-				'aria-label': ariaLabel(),
+				'aria-label': label() ? undefined : ariaLabel(),
 				class: isDisabled ? "qc-disabled" : "",
 				id: id(),
 				...rest
@@ -11550,10 +12090,10 @@
 
 		bind_this(input, ($$value) => searchInput = $$value, () => searchInput);
 
-		var node_1 = sibling(input, 2);
+		var node_2 = sibling(input, 2);
 
 		{
-			var consequent_1 = ($$anchor) => {
+			var consequent_2 = ($$anchor) => {
 				add_svelte_meta(
 					() => IconButton($$anchor, {
 						type: 'button',
@@ -11573,33 +12113,37 @@
 					}),
 					'component',
 					SearchInput,
-					49,
+					61,
 					4,
 					{ componentTag: 'IconButton' }
 				);
 			};
 
 			add_svelte_meta(
-				() => if_block(node_1, ($$render) => {
-					if (value()) $$render(consequent_1);
+				() => if_block(node_2, ($$render) => {
+					if (value()) $$render(consequent_2);
 				}),
 				'if',
 				SearchInput,
-				48,
+				60,
 				4
 			);
 		}
 
 		reset(div);
 
-		template_effect(() => set_class(div, 1, clsx([
-			"qc-search-input",
-			leftIcon() && "qc-search-left-icon",
-			leftIcon() && isDisabled && "qc-search-left-icon-disabled"
-		])));
+		template_effect(() => {
+			set_class(div, 1, clsx([
+				"qc-search-input",
+				leftIcon() && "qc-search-left-icon",
+				leftIcon() && isDisabled && "qc-search-left-icon-disabled"
+			]));
+
+			set_attribute(div, 'size', size());
+		});
 
 		bind_value(input, value);
-		append($$anchor, div);
+		append($$anchor, fragment);
 
 		return pop($$exports);
 	}
@@ -11608,6 +12152,8 @@
 		SearchInput,
 		{
 			value: {},
+			label: {},
+			size: {},
 			ariaLabel: {},
 			clearAriaLabel: {},
 			leftIcon: {},
@@ -11620,7 +12166,7 @@
 
 	SearchBar[FILENAME] = 'src/sdg/components/SearchBar/SearchBar.svelte';
 
-	var root$b = add_locations(from_html(`<div><!> <!></div>`), SearchBar[FILENAME], [[37, 0]]);
+	var root$9 = add_locations(from_html(`<div><!> <!></div>`), SearchBar[FILENAME], [[37, 0]]);
 
 	function SearchBar($$anchor, $$props) {
 		check_target(new.target);
@@ -11702,7 +12248,7 @@
 			...legacy_api()
 		};
 
-		var div = root$b();
+		var div = root$9();
 		let classes;
 		var node = child(div);
 
@@ -11798,7 +12344,7 @@
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 		var $$exports = { ...legacy_api() };
 
-		add_svelte_meta(() => SearchInput($$anchor, spread_props(() => props)), 'component', SearchInputWC, 18, 0, { componentTag: 'SearchInput' });
+		add_svelte_meta(() => SearchInput($$anchor, spread_props(() => props)), 'component', SearchInputWC, 20, 0, { componentTag: 'SearchInput' });
 
 		return pop($$exports);
 	}
@@ -11809,6 +12355,8 @@
 			id: { attribute: 'id' },
 			ariaLabel: { attribute: 'aria-label' },
 			clearAriaLabel: { attribute: 'clear-aria-label' },
+			label: { attribute: 'label' },
+			size: { attribute: 'size' },
 			leftIcon: { attribute: 'left-icon' }
 		},
 		[],
@@ -11878,7 +12426,7 @@
 	FormError[FILENAME] = 'src/sdg/components/FormError/FormError.svelte';
 
 	var root_2$6 = add_locations(from_html(`<!> <span><!></span>`, 1), FormError[FILENAME], [[48, 8]]);
-	var root_1$6 = add_locations(from_html(`<div role="alert"><!></div>`), FormError[FILENAME], [[35, 0]]);
+	var root_1$5 = add_locations(from_html(`<div role="alert"><!></div>`), FormError[FILENAME], [[35, 0]]);
 
 	function FormError($$anchor, $$props) {
 		check_target(new.target);
@@ -11974,7 +12522,7 @@
 
 		{
 			var consequent = ($$anchor) => {
-				var div = root_1$6();
+				var div = root_1$5();
 				var node_1 = child(div);
 
 				add_svelte_meta(
@@ -12054,72 +12602,6 @@
 		true
 	);
 
-	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], []);
-
-	function LabelText($$anchor, $$props) {
-		check_target(new.target);
-		push($$props, true);
-
-		let text = prop($$props, 'text', 7),
-			required = prop($$props, 'required', 7);
-
-		var $$exports = {
-			get text() {
-				return text();
-			},
-
-			set text($$value) {
-				text($$value);
-				flushSync();
-			},
-
-			get required() {
-				return required();
-			},
-
-			set required($$value) {
-				required($$value);
-				flushSync();
-			},
-
-			...legacy_api()
-		};
-
-		var fragment = root$a();
-		var node = first_child(fragment);
-
-		html(node, text);
-
-		var node_1 = sibling(node);
-
-		{
-			var consequent = ($$anchor) => {
-				var span = root_1$5();
-
-				append($$anchor, span);
-			};
-
-			add_svelte_meta(
-				() => if_block(node_1, ($$render) => {
-					if (required()) $$render(consequent);
-				}),
-				'if',
-				LabelText,
-				4,
-				12
-			);
-		}
-
-		append($$anchor, fragment);
-
-		return pop($$exports);
-	}
-
-	create_custom_element(LabelText, { text: {}, required: {} }, [], [], true);
-
 	Fieldset[FILENAME] = 'src/sdg/components/Fieldset/Fieldset.svelte';
 
 	var root_2$5 = add_locations(from_html(`<legend><!></legend>`), Fieldset[FILENAME], [[43, 4]]);
@@ -12718,7 +13200,7 @@
 
 	ChoiceGroupWC[FILENAME] = 'src/sdg/components/ChoiceGroup/ChoiceGroupWC.svelte';
 
-	var root$9 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), ChoiceGroupWC[FILENAME], [[47, 0]]);
+	var root$8 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), ChoiceGroupWC[FILENAME], [[47, 0]]);
 
 	function ChoiceGroupWC($$anchor, $$props) {
 		check_target(new.target);
@@ -12821,7 +13303,7 @@
 			...legacy_api()
 		};
 
-		var fragment = root$9();
+		var fragment = root$8();
 		var node = first_child(fragment);
 
 		{
@@ -12917,8 +13399,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$7 = add_locations(from_html(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[65, 4]]);
 
 	function Checkbox($$anchor, $$props) {
 		check_target(new.target);
@@ -12944,7 +13426,7 @@
 					}),
 					'if',
 					Checkbox,
-					55,
+					56,
 					4
 				);
 			}
@@ -12990,10 +13472,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 = {
@@ -13126,14 +13609,14 @@
 			...legacy_api()
 		};
 
-		var div = root$8();
+		var div = root$7();
 		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 +13636,7 @@
 			}),
 			'component',
 			Checkbox,
-			73,
+			74,
 			8,
 			{ componentTag: 'FormError' }
 		);
@@ -13200,7 +13683,7 @@
 
 	CheckboxWC[FILENAME] = 'src/sdg/components/Checkbox/CheckboxWC.svelte';
 
-	var root$7 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), CheckboxWC[FILENAME], [[49, 0]]);
+	var root$6 = add_locations(from_html(`<!> <link rel="stylesheet"/>`, 1), CheckboxWC[FILENAME], [[49, 0]]);
 
 	function CheckboxWC($$anchor, $$props) {
 		check_target(new.target);
@@ -13265,7 +13748,7 @@
 			...legacy_api()
 		};
 
-		var fragment = root$7();
+		var fragment = root$6();
 		var node = first_child(fragment);
 
 		{
@@ -13279,231 +13762,76 @@
 
 					get required() {
 						return required();
-					},
-
-					get invalidText() {
-						return invalidText();
-					},
-
-					get labelElement() {
-						return get(labelElement);
-					},
-
-					get input() {
-						return get(input);
-					},
-
-					get invalid() {
-						return invalid();
-					},
-
-					set invalid($$value) {
-						invalid($$value);
-					},
-
-					get requiredSpan() {
-						return get(requiredSpan);
-					},
-
-					set requiredSpan($$value) {
-						set(requiredSpan, $$value, true);
-					},
-
-					children: wrap_snippet(CheckboxWC, ($$anchor, $$slotProps) => {
-						var fragment_1 = comment();
-						var node_1 = first_child(fragment_1);
-
-						slot(node_1, $$props, 'default', {}, null);
-						append($$anchor, fragment_1);
-					}),
-
-					$$slots: { default: true }
-				}),
-				'component',
-				CheckboxWC,
-				38,
-				0,
-				{ componentTag: 'Checkbox' }
-			);
-		}
-
-		var link = sibling(node, 2);
-
-		template_effect(() => set_attribute(link, 'href', Utils.cssPath));
-		append($$anchor, fragment);
-
-		return pop($$exports);
-	}
-
-	customElements.define('qc-checkbox', create_custom_element(
-		CheckboxWC,
-		{
-			required: { attribute: 'required', type: 'Boolean' },
-			compact: { attribute: 'compact', type: 'Boolean' },
-			invalid: { attribute: 'invalid', type: 'Boolean' },
-			invalidText: { attribute: 'invalid-text', type: 'String' }
-		},
-		['default'],
-		[],
-		true
-	));
-
-	Label[FILENAME] = 'src/sdg/components/Label/Label.svelte';
-
-	var root$6 = add_locations(from_html(`<label><!></label>`), Label[FILENAME], [[16, 0]]);
-
-	function Label($$anchor, $$props) {
-		check_target(new.target);
-		push($$props, true);
-
-		let forId = prop($$props, 'forId', 7),
-			text = prop($$props, 'text', 7),
-			required = prop($$props, 'required', 7, false),
-			compact = prop($$props, 'compact', 7, false),
-			bold = prop($$props, 'bold', 7, false),
-			disabled = prop($$props, 'disabled', 7, false),
-			rootElement = prop($$props, 'rootElement', 15),
-			rest = rest_props(
-				$$props,
-				[
-					'$$slots',
-					'$$events',
-					'$$legacy',
-					'$$host',
-					'forId',
-					'text',
-					'required',
-					'compact',
-					'bold',
-					'disabled',
-					'rootElement'
-				]);
-
-		var $$exports = {
-			get forId() {
-				return forId();
-			},
-
-			set forId($$value) {
-				forId($$value);
-				flushSync();
-			},
-
-			get text() {
-				return text();
-			},
-
-			set text($$value) {
-				text($$value);
-				flushSync();
-			},
-
-			get required() {
-				return required();
-			},
-
-			set required($$value = false) {
-				required($$value);
-				flushSync();
-			},
-
-			get compact() {
-				return compact();
-			},
-
-			set compact($$value = false) {
-				compact($$value);
-				flushSync();
-			},
-
-			get bold() {
-				return bold();
-			},
-
-			set bold($$value = false) {
-				bold($$value);
-				flushSync();
-			},
-
-			get disabled() {
-				return disabled();
-			},
-
-			set disabled($$value = false) {
-				disabled($$value);
-				flushSync();
-			},
+					},
 
-			get rootElement() {
-				return rootElement();
-			},
+					get invalidText() {
+						return invalidText();
+					},
 
-			set rootElement($$value) {
-				rootElement($$value);
-				flushSync();
-			},
+					get labelElement() {
+						return get(labelElement);
+					},
 
-			...legacy_api()
-		};
+					get input() {
+						return get(input);
+					},
 
-		var label = root$6();
+					get invalid() {
+						return invalid();
+					},
 
-		attribute_effect(label, () => ({
-			for: forId(),
+					set invalid($$value) {
+						invalid($$value);
+					},
 
-			class: [
-				"qc-label",
-				compact() && "qc-compact",
-				bold() && "qc-bold",
-				disabled() && "qc-disabled"
-			],
+					get requiredSpan() {
+						return get(requiredSpan);
+					},
 
-			...rest
-		}));
+					set requiredSpan($$value) {
+						set(requiredSpan, $$value, true);
+					},
 
-		var node = child(label);
+					children: wrap_snippet(CheckboxWC, ($$anchor, $$slotProps) => {
+						var fragment_1 = comment();
+						var node_1 = first_child(fragment_1);
 
-		add_svelte_meta(
-			() => LabelText(node, {
-				get text() {
-					return text();
-				},
+						slot(node_1, $$props, 'default', {}, null);
+						append($$anchor, fragment_1);
+					}),
 
-				get required() {
-					return required();
-				}
-			}),
-			'component',
-			Label,
-			27,
-			4,
-			{ componentTag: 'LabelText' }
-		);
+					$$slots: { default: true }
+				}),
+				'component',
+				CheckboxWC,
+				38,
+				0,
+				{ componentTag: 'Checkbox' }
+			);
+		}
 
-		reset(label);
-		bind_this(label, ($$value) => rootElement($$value), () => rootElement());
-		append($$anchor, label);
+		var link = sibling(node, 2);
+
+		template_effect(() => set_attribute(link, 'href', Utils.cssPath));
+		append($$anchor, fragment);
 
 		return pop($$exports);
 	}
 
-	create_custom_element(
-		Label,
+	customElements.define('qc-checkbox', create_custom_element(
+		CheckboxWC,
 		{
-			forId: {},
-			text: {},
-			required: {},
-			compact: {},
-			bold: {},
-			disabled: {},
-			rootElement: {}
+			required: { attribute: 'required', type: 'Boolean' },
+			compact: { attribute: 'compact', type: 'Boolean' },
+			invalid: { attribute: 'invalid', type: 'Boolean' },
+			invalidText: { attribute: 'invalid-text', type: 'String' }
 		},
-		[],
+		['default'],
 		[],
 		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 +13840,7 @@
 	        input.id =  Utils.generateId(input.type);
 	    }
 	    setValue(input.value);
+	    setRequired(input.required);
 	    input.addEventListener(
 	        'input',
 	        () => {
@@ -13523,10 +13852,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 +13905,7 @@
 							}),
 							'component',
 							TextField,
-							125,
+							131,
 							8,
 							{ componentTag: 'Label' }
 						);
@@ -13589,7 +13918,7 @@
 					}),
 					'if',
 					TextField,
-					124,
+					130,
 					4
 				);
 			}
@@ -13614,14 +13943,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 +13981,7 @@
 					}),
 					'if',
 					TextField,
-					145,
+					151,
 					4
 				);
 			}
@@ -13699,7 +14028,7 @@
 					}),
 					'component',
 					TextField,
-					159,
+					165,
 					4,
 					{ componentTag: 'FormError' }
 				);
@@ -13736,7 +14065,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 +14080,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 +14320,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 +14345,7 @@
 				}),
 				'if',
 				TextField,
-				167,
+				173,
 				0
 			);
 		}
@@ -14048,7 +14383,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], [[115, 0]]);
 
 	function TextFieldWC($$anchor, $$props) {
 		check_target(new.target);
@@ -14077,8 +14412,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,7 +14437,7 @@
 		user_effect(() => {
 			if (!get(input)) return;
 
-			if (label()) {
+			if (get(labelElement)) {
 				get(input).before(get(labelElement));
 			}
 
@@ -14109,7 +14456,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 +14669,7 @@
 				}),
 				'component',
 				TextFieldWC,
-				80,
+				95,
 				0,
 				{ componentTag: 'TextField' }
 			);
@@ -14854,9 +15205,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 +15251,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 +15286,7 @@
 				handleSelection(event, item);
 			}
 
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (canExit(event, index)) {
 					handleExit()(event.key);
 				}
@@ -15087,13 +15438,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 +15464,7 @@
 					}),
 					'each',
 					DropdownListItemsSingle,
-					112,
+					113,
 					8
 				);
 
@@ -15127,7 +15478,7 @@
 				}),
 				'if',
 				DropdownListItemsSingle,
-				110,
+				111,
 				0
 			);
 		}
@@ -15161,8 +15512,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 +15599,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 +15743,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 +15779,7 @@
 					}),
 					'each',
 					DropdownListItemsMultiple,
-					148,
+					149,
 					8
 				);
 
@@ -15442,7 +15793,7 @@
 				}),
 				'if',
 				DropdownListItemsMultiple,
-				146,
+				147,
 				0
 			);
 		}
@@ -15474,15 +15825,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 +15847,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 +15889,6 @@
 				flushSync();
 			},
 
-			get enableSearch() {
-				return enableSearch();
-			},
-
-			set enableSearch($$value) {
-				enableSearch($$value);
-				flushSync();
-			},
-
 			get multiple() {
 				return multiple();
 			},
@@ -15711,7 +16030,7 @@
 					),
 					'component',
 					DropdownListItems,
-					69,
+					51,
 					8,
 					{ componentTag: 'DropdownListItemsMultiple' }
 				);
@@ -15756,7 +16075,7 @@
 					),
 					'component',
 					DropdownListItems,
-					82,
+					64,
 					8,
 					{ componentTag: 'DropdownListItemsSingle' }
 				);
@@ -15768,7 +16087,7 @@
 				}),
 				'if',
 				DropdownListItems,
-				68,
+				50,
 				4
 			);
 		}
@@ -15792,7 +16111,7 @@
 					}),
 					'await',
 					DropdownListItems,
-					99,
+					81,
 					12
 				);
 
@@ -15805,19 +16124,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 +16141,6 @@
 		DropdownListItems,
 		{
 			id: {},
-			enableSearch: {},
 			multiple: {},
 			items: {},
 			displayedItems: {},
@@ -15847,9 +16160,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 +16173,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 +16185,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 +16235,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 +16258,7 @@
 			...rest
 		}));
 
-		var node = child(button_1);
+		var node = child(button);
 
 		{
 			var consequent = ($$anchor) => {
@@ -15971,7 +16285,7 @@
 				}),
 				'if',
 				DropdownListButton,
-				28,
+				24,
 				4
 			);
 		}
@@ -16002,16 +16316,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 +16337,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 +16375,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 +16384,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 +16417,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 +16433,6 @@
 			),
 			widthClass = tag(
 				user_derived(() => {
-					webComponentMode() ? "container" : "root";
-
 					if (availableWidths.includes(width())) {
 						return `qc-dropdown-list-${width()}`;
 					}
@@ -16139,7 +16454,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 +16493,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 +16528,7 @@
 		function handleArrowDown(event, targetComponent) {
 			if (strict_equals(event.key, "ArrowDown") && targetComponent) {
 				event.preventDefault();
-				set(expanded, true);
+				expanded(true);
 				targetComponent.focus();
 			}
 		}
@@ -16200,10 +16540,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 +16551,7 @@
 			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 
-				if (get(expanded)) {
+				if (expanded()) {
 					get(dropdownItems)?.focusOnLastElement();
 				}
 			}
@@ -16223,7 +16563,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 +16578,7 @@
 		}
 
 		function closeDropdown(key) {
-			set(expanded, false);
+			expanded(false);
 			set(hiddenSearchText, "");
 
 			if (strict_equals(key, "Escape") && get(button)) {
@@ -16264,12 +16604,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 +16650,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 +16841,15 @@
 				flushSync();
 			},
 
+			get expanded() {
+				return expanded();
+			},
+
+			set expanded($$value = false) {
+				expanded($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -16483,6 +16857,7 @@
 
 		event('click', $document.body, handleOuterEvent);
 		event('keydown', $document.body, handleTab);
+		event('scroll', $window, setRemainingBottomHeight);
 
 		var div_1 = child(div);
 
@@ -16523,7 +16898,7 @@
 					}),
 					'component',
 					DropdownList,
-					284,
+					327,
 					12,
 					{ componentTag: 'Label' }
 				);
@@ -16535,7 +16910,7 @@
 				}),
 				'if',
 				DropdownList,
-				283,
+				326,
 				8
 			);
 		}
@@ -16544,62 +16919,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 +17037,7 @@
 						),
 						'component',
 						DropdownList,
-						335,
+						387,
 						24,
 						{ componentTag: 'SearchInput' }
 					);
@@ -16670,7 +17053,7 @@
 				}),
 				'if',
 				DropdownList,
-				333,
+				385,
 				16
 			);
 		}
@@ -16687,10 +17070,6 @@
 							return itemsId;
 						},
 
-						get enableSearch() {
-							return enableSearch();
-						},
-
 						get placeholder() {
 							return placeholder();
 						},
@@ -16734,7 +17113,7 @@
 				),
 				'component',
 				DropdownList,
-				353,
+				405,
 				16,
 				{ componentTag: 'DropdownListItems' }
 			);
@@ -16754,12 +17133,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 +17181,7 @@
 				}),
 				'component',
 				DropdownList,
-				384,
+				435,
 				4,
 				{ componentTag: 'FormError' }
 			);
@@ -16820,7 +17200,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 +17237,8 @@
 			multiple: {},
 			rootElement: {},
 			errorElement: {},
-			webComponentMode: {}
+			webComponentMode: {},
+			expanded: {}
 		},
 		[],
 		[],
@@ -16857,7 +17247,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 +17263,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 +17278,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 +17298,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 +17312,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 +17330,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 +17461,15 @@
 				flushSync();
 			},
 
+			get expanded() {
+				return expanded();
+			},
+
+			set expanded($$value = false) {
+				expanded($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -17077,6 +17487,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 +17558,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 +17600,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'],
 		[],