qc-trousse-sdg 1.4.3 → 1.4.5

package/public/js/qc-sdg.js

@@ -33,6 +33,9 @@
 
 	const UNINITIALIZED = Symbol();
 
+	// Dev-time component properties
+	const FILENAME = Symbol('filename');
+
 	const NAMESPACE_HTML = 'http://www.w3.org/1999/xhtml';
 	const NAMESPACE_SVG = 'http://www.w3.org/2000/svg';
 
@@ -41,6 +44,16 @@
 	/* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
 
+	/**
+	 * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+	 * @returns {never}
+	 */
+	function invalid_snippet_arguments() {
+		{
+			throw new Error(`https://svelte.dev/e/invalid_snippet_arguments`);
+		}
+	}
+
 	/**
 	 * `%name%(...)` can only be used during component initialisation
 	 * @param {string} name
@@ -52,6 +65,26 @@
 		}
 	}
 
+	/**
+	 * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+	 * @returns {never}
+	 */
+	function snippet_without_render_tag() {
+		{
+			throw new Error(`https://svelte.dev/e/snippet_without_render_tag`);
+		}
+	}
+
+	/**
+	 * The `this` prop on `<svelte:element>` must be a string, if defined
+	 * @returns {never}
+	 */
+	function svelte_element_invalid_this_value() {
+		{
+			throw new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);
+		}
+	}
+
 	// Store the references to globals in case someone tries to monkey patch these, causing the below
 	// to de-opt (this occurs often when using popular extensions).
 	var is_array = Array.isArray;
@@ -123,6 +156,43 @@
 	/* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
 
+	/**
+	 * Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
+	 * @param {string} method
+	 * @param {string} component
+	 * @returns {never}
+	 */
+	function component_api_changed(method, component) {
+		{
+			throw new Error(`https://svelte.dev/e/component_api_changed`);
+		}
+	}
+
+	/**
+	 * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
+	 * @param {string} component
+	 * @param {string} name
+	 * @returns {never}
+	 */
+	function component_api_invalid_new(component, name) {
+		{
+			throw new Error(`https://svelte.dev/e/component_api_invalid_new`);
+		}
+	}
+
+	/**
+	 * Keyed each block has duplicate key `%value%` at indexes %a% and %b%
+	 * @param {string} a
+	 * @param {string} b
+	 * @param {string | undefined | null} [value]
+	 * @returns {never}
+	 */
+	function each_key_duplicate(a, b, value) {
+		{
+			throw new Error(`https://svelte.dev/e/each_key_duplicate`);
+		}
+	}
+
 	/**
 	 * `%rune%` cannot be used inside an effect cleanup function
 	 * @param {string} rune
@@ -219,6 +289,49 @@
 	/* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
 
+	/**
+	 * Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+	 * @param {string} property
+	 * @param {string} location
+	 */
+	function assignment_value_stale(property, location) {
+		{
+			console.warn(`https://svelte.dev/e/assignment_value_stale`);
+		}
+	}
+
+	/**
+	 * `%binding%` (%location%) is binding to a non-reactive property
+	 * @param {string} binding
+	 * @param {string | undefined | null} [location]
+	 */
+	function binding_property_non_reactive(binding, location) {
+		{
+			console.warn(`https://svelte.dev/e/binding_property_non_reactive`);
+		}
+	}
+
+	/**
+	 * Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+	 * @param {string} method
+	 */
+	function console_log_state(method) {
+		{
+			console.warn(`https://svelte.dev/e/console_log_state`);
+		}
+	}
+
+	/**
+	 * %handler% should be a function. Did you mean to %suggestion%?
+	 * @param {string} handler
+	 * @param {string} suggestion
+	 */
+	function event_handler_invalid(handler, suggestion) {
+		{
+			console.warn(`https://svelte.dev/e/event_handler_invalid`);
+		}
+	}
+
 	/**
 	 * Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 	 * @param {string | undefined | null} [location]
@@ -229,6 +342,42 @@
 		}
 	}
 
+	/**
+	 * %parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
+	 * @param {string} parent
+	 * @param {string} prop
+	 * @param {string} child
+	 * @param {string} owner
+	 */
+	function ownership_invalid_binding(parent, prop, child, owner) {
+		{
+			console.warn(`https://svelte.dev/e/ownership_invalid_binding`);
+		}
+	}
+
+	/**
+	 * Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
+	 * @param {string} name
+	 * @param {string} location
+	 * @param {string} prop
+	 * @param {string} parent
+	 */
+	function ownership_invalid_mutation(name, location, prop, parent) {
+		{
+			console.warn(`https://svelte.dev/e/ownership_invalid_mutation`);
+		}
+	}
+
+	/**
+	 * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
+	 * @param {string} operator
+	 */
+	function state_proxy_equality_mismatch(operator) {
+		{
+			console.warn(`https://svelte.dev/e/state_proxy_equality_mismatch`);
+		}
+	}
+
 	/** @import { TemplateNode } from '#client' */
 
 
@@ -317,6 +466,19 @@
 		}
 	}
 
+	/* This file is generated by scripts/process-messages/index.js. Do not edit! */
+
+
+	/**
+	 * `<svelte:element this="%tag%">` is a void element — it cannot have content
+	 * @param {string} tag
+	 */
+	function dynamic_void_element_content(tag) {
+		{
+			console.warn(`https://svelte.dev/e/dynamic_void_element_content`);
+		}
+	}
+
 	/** @import { Snapshot } from './types' */
 
 	/**
@@ -696,6 +858,45 @@
 		set(signal, signal.v + d);
 	}
 
+	/**
+	 * @param {any} value
+	 */
+	function get_proxied_value(value) {
+		try {
+			if (value !== null && typeof value === 'object' && STATE_SYMBOL in value) {
+				return value[STATE_SYMBOL];
+			}
+		} catch {
+			// the above if check can throw an error if the value in question
+			// is the contentWindow of an iframe on another domain, in which
+			// case we want to just return the value (because it's definitely
+			// not a proxied value) so we don't break any JavaScript interacting
+			// with that iframe (such as various payment companies client side
+			// JavaScript libraries interacting with their iframes on the same
+			// domain)
+		}
+
+		return value;
+	}
+
+	/**
+	 * @param {any} a
+	 * @param {any} b
+	 * @param {boolean} equal
+	 * @returns {boolean}
+	 */
+	function strict_equals(a, b, equal = true) {
+		// try-catch needed because this tries to read properties of `a` and `b`,
+		// which could be disallowed for example in a secure context
+		try {
+			if ((a === b) !== (get_proxied_value(a) === get_proxied_value(b))) {
+				state_proxy_equality_mismatch(equal ? '===' : '!==');
+			}
+		} catch {}
+
+		return (a === b) === equal;
+	}
+
 	/** @import { TemplateNode } from '#client' */
 
 	// export these for reference in the compiled code, making global name deduplication unnecessary
@@ -2536,6 +2737,23 @@
 		component_context = context;
 	}
 
+	/**
+	 * The current component function. Different from current component context:
+	 * ```html
+	 * <!-- App.svelte -->
+	 * <Foo>
+	 *   <Bar /> <!-- context == Foo.svelte, function == App.svelte -->
+	 * </Foo>
+	 * ```
+	 * @type {ComponentContext['function']}
+	 */
+	let dev_current_component_function = null;
+
+	/** @param {ComponentContext['function']} fn */
+	function set_dev_current_component_function(fn) {
+		dev_current_component_function = fn;
+	}
+
 	/**
 	 * Retrieves the context that belongs to the closest parent component with the specified `key`.
 	 * Must be called during component initialisation.
@@ -2660,6 +2878,33 @@
 		return null;
 	}
 
+	const VOID_ELEMENT_NAMES = [
+		'area',
+		'base',
+		'br',
+		'col',
+		'command',
+		'embed',
+		'hr',
+		'img',
+		'input',
+		'keygen',
+		'link',
+		'meta',
+		'param',
+		'source',
+		'track',
+		'wbr'
+	];
+
+	/**
+	 * Returns `true` if `name` is of a void element
+	 * @param {string} name
+	 */
+	function is_void(name) {
+		return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+	}
+
 	/**
 	 * @param {string} name
 	 */
@@ -2759,6 +3004,105 @@
 		return RAW_TEXT_ELEMENTS.includes(/** @type {RAW_TEXT_ELEMENTS[number]} */ (name));
 	}
 
+	/**
+	 * Prevent devtools trying to make `location` a clickable link by inserting a zero-width space
+	 * @template {string | undefined} T
+	 * @param {T} location
+	 * @returns {T};
+	 */
+	function sanitize_location(location) {
+		return /** @type {T} */ (location?.replace(/\//g, '/\u200b'));
+	}
+
+	/**
+	 *
+	 * @param {any} a
+	 * @param {any} b
+	 * @param {string} property
+	 * @param {string} location
+	 */
+	function compare(a, b, property, location) {
+		if (a !== b) {
+			assignment_value_stale(property, /** @type {string} */ (sanitize_location(location)));
+		}
+
+		return a;
+	}
+
+	/**
+	 * @param {any} object
+	 * @param {string} property
+	 * @param {any} value
+	 * @param {string} location
+	 */
+	function assign(object, property, value, location) {
+		return compare(
+			(object[property] = value),
+			untrack(() => object[property]),
+			property,
+			location
+		);
+	}
+
+	/** @import { SourceLocation } from '#shared' */
+
+	/**
+	 * @param {any} fn
+	 * @param {string} filename
+	 * @param {SourceLocation[]} locations
+	 * @returns {any}
+	 */
+	function add_locations(fn, filename, locations) {
+		return (/** @type {any[]} */ ...args) => {
+			const dom = fn(...args);
+
+			var node = hydrating ? dom : dom.nodeType === 11 ? dom.firstChild : dom;
+			assign_locations(node, filename, locations);
+
+			return dom;
+		};
+	}
+
+	/**
+	 * @param {Element} element
+	 * @param {string} filename
+	 * @param {SourceLocation} location
+	 */
+	function assign_location(element, filename, location) {
+		// @ts-expect-error
+		element.__svelte_meta = {
+			loc: { file: filename, line: location[0], column: location[1] }
+		};
+
+		if (location[2]) {
+			assign_locations(element.firstChild, filename, location[2]);
+		}
+	}
+
+	/**
+	 * @param {Node | null} node
+	 * @param {string} filename
+	 * @param {SourceLocation[]} locations
+	 */
+	function assign_locations(node, filename, locations) {
+		var i = 0;
+		var depth = 0;
+
+		while (node && i < locations.length) {
+			if (hydrating && node.nodeType === 8) {
+				var comment = /** @type {Comment} */ (node);
+				if (comment.data === HYDRATION_START || comment.data === HYDRATION_START_ELSE) depth += 1;
+				else if (comment.data[0] === HYDRATION_END) depth -= 1;
+			}
+
+			if (depth === 0 && node.nodeType === 1) {
+				assign_location(/** @type {Element} */ (node), filename, locations[i++]);
+			}
+
+			node = node.nextSibling;
+		}
+	}
+
 	/**
 	 * @param {HTMLElement} dom
 	 * @param {boolean} value
@@ -3071,6 +3415,48 @@
 		}
 	}
 
+	/**
+	 * In dev, warn if an event handler is not a function, as it means the
+	 * user probably called the handler or forgot to add a `() =>`
+	 * @param {() => (event: Event, ...args: any) => void} thunk
+	 * @param {EventTarget} element
+	 * @param {[Event, ...any]} args
+	 * @param {any} component
+	 * @param {[number, number]} [loc]
+	 * @param {boolean} [remove_parens]
+	 */
+	function apply(
+		thunk,
+		element,
+		args,
+		component,
+		loc,
+		has_side_effects = false,
+		remove_parens = false
+	) {
+		let handler;
+		let error;
+
+		try {
+			handler = thunk();
+		} catch (e) {
+			error = e;
+		}
+
+		if (typeof handler !== 'function' && (has_side_effects || handler != null || error)) {
+			component?.[FILENAME];
+			const phase = args[0]?.eventPhase < Event.BUBBLING_PHASE ? 'capture' : '';
+			args[0]?.type + phase;
+
+			event_handler_invalid();
+
+			if (error) {
+				throw error;
+			}
+		}
+		handler?.apply(element, args);
+	}
+
 	/** @param {string} html */
 	function create_fragment_from_html(html) {
 		var elem = document.createElement('template');
@@ -3434,6 +3820,119 @@
 		return Promise.resolve();
 	}
 
+	/** @typedef {{ file: string, line: number, column: number }} Location */
+
+
+	/**
+	 * Sets up a validator that
+	 * - traverses the path of a prop to find out if it is allowed to be mutated
+	 * - checks that the binding chain is not interrupted
+	 * @param {Record<string, any>} props
+	 */
+	function create_ownership_validator(props) {
+		const component = component_context?.function;
+		const parent = component_context?.p?.function;
+
+		return {
+			/**
+			 * @param {string} prop
+			 * @param {any[]} path
+			 * @param {any} result
+			 * @param {number} line
+			 * @param {number} column
+			 */
+			mutation: (prop, path, result, line, column) => {
+				const name = path[0];
+				if (is_bound_or_unset(props, name) || !parent) {
+					return result;
+				}
+
+				/** @type {any} */
+				let value = props;
+
+				for (let i = 0; i < path.length - 1; i++) {
+					value = value[path[i]];
+					if (!value?.[STATE_SYMBOL]) {
+						return result;
+					}
+				}
+
+				const location = sanitize_location(`${component[FILENAME]}:${line}:${column}`);
+
+				ownership_invalid_mutation(name, location, prop, parent[FILENAME]);
+
+				return result;
+			},
+			/**
+			 * @param {any} key
+			 * @param {any} child_component
+			 * @param {() => any} value
+			 */
+			binding: (key, child_component, value) => {
+				if (!is_bound_or_unset(props, key) && parent && value()?.[STATE_SYMBOL]) {
+					ownership_invalid_binding(
+						component[FILENAME],
+						key,
+						child_component[FILENAME],
+						parent[FILENAME]
+					);
+				}
+			}
+		};
+	}
+
+	/**
+	 * @param {Record<string, any>} props
+	 * @param {string} prop_name
+	 */
+	function is_bound_or_unset(props, prop_name) {
+		// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+		// or `createClassComponent(Component, props)`
+		const is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+		return (
+			!!get_descriptor(props, prop_name)?.set ||
+			(is_entry_props && prop_name in props) ||
+			!(prop_name in props)
+		);
+	}
+
+	/** @param {Function & { [FILENAME]: string }} target */
+	function check_target(target) {
+		if (target) {
+			component_api_invalid_new(target[FILENAME] ?? 'a component', target.name);
+		}
+	}
+
+	function legacy_api() {
+		const component = component_context?.function;
+
+		/** @param {string} method */
+		function error(method) {
+			component_api_changed(method, component[FILENAME]);
+		}
+
+		return {
+			$destroy: () => error('$destroy()'),
+			$on: () => error('$on(...)'),
+			$set: () => error('$set(...)')
+		};
+	}
+
+	/**
+	 * @param {Node} anchor
+	 * @param {...(()=>any)[]} args
+	 */
+	function validate_snippet_args(anchor, ...args) {
+		if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
+			invalid_snippet_arguments();
+		}
+		for (let arg of args) {
+			if (typeof arg !== 'function') {
+				invalid_snippet_arguments();
+			}
+		}
+	}
+
 	/** @import { Effect, Source, TemplateNode } from '#client' */
 
 	const PENDING = 0;
@@ -4418,22 +4917,57 @@
 		return sanitized;
 	}
 
-	/** @import { Snippet } from 'svelte' */
-	/** @import { Effect, TemplateNode } from '#client' */
+	/** @import { TemplateNode } from '#client' */
 	/** @import { Getters } from '#shared' */
 
 	/**
-	 * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
-	 * @param {TemplateNode} node
-	 * @param {() => SnippetFn | null | undefined} get_snippet
-	 * @param {(() => any)[]} args
+	 * @param {() => string} tag_fn
 	 * @returns {void}
 	 */
-	function snippet(node, get_snippet, ...args) {
-		var anchor = node;
+	function validate_void_dynamic_element(tag_fn) {
+		const tag = tag_fn();
+		if (tag && is_void(tag)) {
+			dynamic_void_element_content();
+		}
+	}
 
-		/** @type {SnippetFn | null | undefined} */
-		// @ts-ignore
+	/** @param {() => unknown} tag_fn */
+	function validate_dynamic_element_tag(tag_fn) {
+		const tag = tag_fn();
+		const is_string = typeof tag === 'string';
+		if (tag && !is_string) {
+			svelte_element_invalid_this_value();
+		}
+	}
+
+	/**
+	 * @template {() => unknown} T
+	 * @param {T} fn
+	 */
+	function prevent_snippet_stringification(fn) {
+		fn.toString = () => {
+			snippet_without_render_tag();
+			return '';
+		};
+		return fn;
+	}
+
+	/** @import { Snippet } from 'svelte' */
+	/** @import { Effect, TemplateNode } from '#client' */
+	/** @import { Getters } from '#shared' */
+
+	/**
+	 * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
+	 * @param {TemplateNode} node
+	 * @param {() => SnippetFn | null | undefined} get_snippet
+	 * @param {(() => any)[]} args
+	 * @returns {void}
+	 */
+	function snippet(node, get_snippet, ...args) {
+		var anchor = node;
+
+		/** @type {SnippetFn | null | undefined} */
+		// @ts-ignore
 		var snippet = noop;
 
 		/** @type {Effect | null} */
@@ -4455,6 +4989,29 @@
 		}
 	}
 
+	/**
+	 * In development, wrap the snippet function so that it passes validation, and so that the
+	 * correct component context is set for ownership checks
+	 * @param {any} component
+	 * @param {(node: TemplateNode, ...args: any[]) => void} fn
+	 */
+	function wrap_snippet(component, fn) {
+		const snippet = (/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
+			var previous_component_function = dev_current_component_function;
+			set_dev_current_component_function(component);
+
+			try {
+				return fn(node, ...args);
+			} finally {
+				set_dev_current_component_function(previous_component_function);
+			}
+		};
+
+		prevent_snippet_stringification(snippet);
+
+		return snippet;
+	}
+
 	/** @import { Effect, TemplateNode } from '#client' */
 
 	/**
@@ -5746,6 +6303,80 @@
 		};
 	}
 
+	/**
+	 * @param {() => any} collection
+	 * @param {(item: any, index: number) => string} key_fn
+	 * @returns {void}
+	 */
+	function validate_each_keys(collection, key_fn) {
+		render_effect(() => {
+			const keys = new Map();
+			const maybe_array = collection();
+			const array = is_array(maybe_array)
+				? maybe_array
+				: maybe_array == null
+					? []
+					: Array.from(maybe_array);
+			const length = array.length;
+			for (let i = 0; i < length; i++) {
+				const key = key_fn(array[i], i);
+				if (keys.has(key)) {
+					String(keys.get(key));
+
+					/** @type {string | null} */
+					let k = String(key);
+					if (k.startsWith('[object ')) k = null;
+
+					each_key_duplicate();
+				}
+				keys.set(key, i);
+			}
+		});
+	}
+
+	/**
+	 * @param {string} binding
+	 * @param {() => Record<string, any>} get_object
+	 * @param {() => string} get_property
+	 * @param {number} line
+	 * @param {number} column
+	 */
+	function validate_binding(binding, get_object, get_property, line, column) {
+		var warned = false;
+
+		dev_current_component_function?.[FILENAME];
+
+		render_effect(() => {
+			if (warned) return;
+
+			var [object, is_store_sub] = capture_store_binding(get_object);
+
+			if (is_store_sub) return;
+
+			var property = get_property();
+
+			var ran = false;
+
+			// by making the (possibly false, but it would be an extreme edge case) assumption
+			// that a getter has a corresponding setter, we can determine if a property is
+			// reactive by seeing if this effect has dependencies
+			var effect = render_effect(() => {
+				if (ran) return;
+
+				// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+				object[property];
+			});
+
+			ran = true;
+
+			if (effect.deps === null) {
+				binding_property_non_reactive();
+
+				warned = true;
+			}
+		});
+	}
+
 	/** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
 
 	/**
@@ -6220,6 +6851,37 @@
 		return Class;
 	}
 
+	/**
+	 * @param {string} method
+	 * @param  {...any} objects
+	 */
+	function log_if_contains_state(method, ...objects) {
+		untrack(() => {
+			try {
+				let has_state = false;
+				const transformed = [];
+
+				for (const obj of objects) {
+					if (obj && typeof obj === 'object' && STATE_SYMBOL in obj) {
+						transformed.push(snapshot(obj, true));
+						has_state = true;
+					} else {
+						transformed.push(obj);
+					}
+				}
+
+				if (has_state) {
+					console_log_state(method);
+
+					// eslint-disable-next-line no-console
+					console.log('%c[snapshot]', 'color: grey', ...transformed);
+				}
+			} catch {}
+		});
+
+		return objects;
+	}
+
 	class Utils {
 
 	    static assetsBasePath =
@@ -6359,9 +7021,12 @@
 	    }
 	}
 
-	var root$o = template(`<div></div>`);
+	Icon[FILENAME] = 'src/sdg/bases/Icon/Icon.svelte';
+
+	var root$n = add_locations(template(`<div></div>`), Icon[FILENAME], [[16, 0]]);
 
 	function Icon($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let type = prop($$props, 'type', 7),
@@ -6372,23 +7037,25 @@
 			height = prop($$props, 'height', 7, 'auto'),
 			src = prop($$props, 'src', 7, ''),
 			rotate = prop($$props, 'rotate', 7, 0),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'type',
-				'label',
-				'size',
-				'color',
-				'width',
-				'height',
-				'src',
-				'rotate'
-			]);
-
-		let attributes = user_derived(() => width() === 'auto' ? { 'data-img-size': size() } : {});
-		var div = root$o();
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'type',
+					'label',
+					'size',
+					'color',
+					'width',
+					'height',
+					'src',
+					'rotate'
+				]);
+
+		let attributes = user_derived(() => strict_equals(width(), 'auto') ? { 'data-img-size': size() } : {});
+		var div = root$n();
 		let attributes_1;
 
 		template_effect(() => attributes_1 = set_attributes(div, attributes_1, {
@@ -6467,7 +7134,8 @@
 			set rotate($$value = 0) {
 				rotate($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -6488,12 +7156,24 @@
 		true
 	);
 
-	var root$n = template(`<div tabindex="0"><div class="icon-container"><div class="qc-icon"><!></div></div> <div class="content-container"><div class="content"><!> <!> <!></div></div></div>`);
+	Notice[FILENAME] = 'src/sdg/components/Notice/Notice.svelte';
+
+	var root$m = add_locations(template(`<div tabindex="0"><div class="icon-container"><div class="qc-icon"><!></div></div> <div class="content-container"><div class="content"><!> <!> <!></div></div></div>`), Notice[FILENAME], [
+		[
+			57,
+			0,
+			[
+				[60, 2, [[61, 4]]],
+				[69, 2, [[70, 4]]]
+			]
+		]
+	]);
 
 	function Notice($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
-		const isFr = Utils.getPageLanguage() === 'fr';
+		const isFr = strict_equals(Utils.getPageLanguage(), 'fr');
 		const defaultHeader = 'h2';
 		const defaultType = 'information';
 
@@ -6516,7 +7196,7 @@
 		const types = Object.keys(typesDescriptions);
 		const usedType = types.includes(type()) ? type() : defaultType;
 		const usedHeader = header().match(/h[1-6]/) ? header() : defaultHeader;
-		const role = usedType === "success" ? "status" : usedType === "error" ? "alert" : null;
+		const role = strict_equals(usedType, "success") ? "status" : strict_equals(usedType, "error") ? "alert" : null;
 		let noticeElement = state(null);
 
 		user_effect(() => {
@@ -6529,12 +7209,12 @@
 			}
 		});
 
-		const shouldUseIcon = usedType === "advice" || usedType === "note";
+		const shouldUseIcon = strict_equals(usedType, "advice") || strict_equals(usedType, "note");
 		// Si le type est "advice" ou "note", on force "neutral" (le gris), sinon on garde le type normal
 		const computedType = shouldUseIcon ? "neutral" : usedType;
 		const iconType = shouldUseIcon ? icon() ?? "note" : usedType;
 		const iconLabel = typesDescriptions[type()] ?? typesDescriptions['information'];
-		var div = root$n();
+		var div = root$m();
 
 		set_class(div, 1, `qc-component qc-notice qc-${computedType ?? ''}`);
 
@@ -6558,19 +7238,26 @@
 				var fragment = comment();
 				var node_3 = first_child(fragment);
 
-				element(node_3, () => usedHeader, false, ($$element, $$anchor) => {
-					var fragment_1 = comment();
-					var node_4 = first_child(fragment_1);
+				validate_void_dynamic_element(() => usedHeader);
+				validate_dynamic_element_tag(() => usedHeader);
 
-					html(node_4, title);
-					append($$anchor, fragment_1);
-				});
+				element(
+					node_3,
+					() => usedHeader,
+					false,
+					($$element, $$anchor) => {
+						var fragment_1 = comment();
+						var node_4 = first_child(fragment_1);
+
+						html(node_4, title);
+						append($$anchor, fragment_1);
+					});
 
 				append($$anchor, fragment);
 			};
 
 			if_block(node_2, ($$render) => {
-				if (title() && title() !== "") $$render(consequent);
+				if (title() && strict_equals(title(), "", false)) $$render(consequent);
 			});
 		}
 
@@ -6629,7 +7316,8 @@
 			set slotContent($$value) {
 				slotContent($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -6648,23 +7336,28 @@
 		true
 	);
 
-	var root$m = template(`<!> <link rel="stylesheet">`, 1);
+	NoticeWC[FILENAME] = 'src/sdg/components/Notice/NoticeWC.svelte';
+
+	var root$l = add_locations(template(`<!> <link rel="stylesheet">`, 1), NoticeWC[FILENAME], [[27, 0]]);
 
 	function NoticeWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
-		var fragment = root$m();
+		var fragment = root$l();
 		var node = first_child(fragment);
 
 		{
-			const slotContent = ($$anchor) => {
+			const slotContent = wrap_snippet(NoticeWC, function ($$anchor) {
+				validate_snippet_args(...arguments);
+
 				var fragment_1 = comment();
 				var node_1 = first_child(fragment_1);
 
-				slot(node_1, $$props, 'default', {});
+				slot(node_1, $$props, 'default', {}, null);
 				append($$anchor, fragment_1);
-			};
+			});
 
 			Notice(node, spread_props(() => props, { slotContent, $$slots: { slotContent: true } }));
 		}
@@ -6673,7 +7366,7 @@
 
 		template_effect(() => set_attribute(link, 'href', Utils.cssPath));
 		append($$anchor, fragment);
-		pop();
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-notice', create_custom_element(
@@ -6690,8 +7383,12 @@
 		true
 	));
 
-	var root_2$8 = template(`<div class="title"><a> </a></div>`);
-	var root_3$3 = template(`<div class="go-to-content"><a> </a></div>`);
+	PivHeader[FILENAME] = 'src/sdg/components/PivHeader/PivHeader.svelte';
+
+	var root_3$3 = add_locations(template(`<a class="page-title"> </a>`), PivHeader[FILENAME], [[72, 24]]);
+	var root_4$4 = add_locations(template(`<span class="page-title" role="heading" aria-level="1"> </span>`), PivHeader[FILENAME], [[74, 24]]);
+	var root_2$8 = add_locations(template(`<div class="title"><!></div>`), PivHeader[FILENAME], [[70, 16]]);
+	var root_5 = add_locations(template(`<div class="go-to-content"><a> </a></div>`), PivHeader[FILENAME], [[62, 12, [[63, 16]]]]);
 
 	var on_click$3 = (evt, displaySearchForm, focusOnSearchInput) => {
 		evt.preventDefault();
@@ -6702,14 +7399,48 @@
 		});
 	};
 
-	var root_4$4 = template(`<a class="qc-search" href="/" role="button"><span> </span></a>`);
-	var root_8 = template(`<li><a> </a></li>`);
-	var root_9 = template(`<li><a> </a></li>`);
-	var root_7 = template(`<nav><ul><!> <!></ul></nav>`);
-	var root_10 = template(`<div class="search-zone"><!></div>`);
-	var root$l = template(`<div role="banner" class="qc-piv-header qc-component"><div><!> <div class="piv-top"><a class="logo" rel="noreferrer"><div role="img"></div></a> <!> <div class="right-section"><!> <div class="links"><!></div></div></div> <!> <div class="piv-bottom"><!></div></div></div>`);
+	var root_6$1 = add_locations(template(`<a class="qc-search" href="/" role="button"><span class="no-link-title" role="heading" aria-level="1"> </span></a>`), PivHeader[FILENAME], [[95, 20, [[106, 24]]]]);
+	var root_10 = add_locations(template(`<li><a> </a></li>`), PivHeader[FILENAME], [[119, 40, [[119, 44]]]]);
+	var root_11 = add_locations(template(`<li><a> </a></li>`), PivHeader[FILENAME], [[122, 40, [[122, 44]]]]);
+	var root_9 = add_locations(template(`<nav><ul><!> <!></ul></nav>`), PivHeader[FILENAME], [[116, 28, [[117, 32]]]]);
+	var root_12 = add_locations(template(`<div class="search-zone"><!></div>`), PivHeader[FILENAME], [[135, 16]]);
+
+	var root$k = add_locations(template(`<div role="banner" class="qc-piv-header qc-component"><div><!> <div class="piv-top"><div class="signature-group"><div class="logo"><a rel="noreferrer"><img></a></div> <!></div> <div class="right-section"><!> <div class="links"><!></div></div></div> <!> <div class="piv-bottom"><!></div></div></div>`), PivHeader[FILENAME], [
+		[
+			57,
+			0,
+			[
+				[
+					60,
+					4,
+					[
+						[
+							79,
+							8,
+							[
+								[
+									80,
+									12,
+									[
+										[
+											81,
+											16,
+											[[82, 20, [[86, 24]]]]
+										]
+									]
+								],
+								[93, 12, [[110, 16]]]
+							]
+						],
+						[133, 8]
+					]
+				]
+			]
+		]
+	]);
 
 	function PivHeader($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const lang = Utils.getPageLanguage();
@@ -6718,19 +7449,19 @@
 			logoUrl = prop($$props, 'logoUrl', 7, '/'),
 			fullWidth = prop($$props, 'fullWidth', 7, 'false'),
 			logoSrc = prop($$props, 'logoSrc', 23, () => Utils.imagesRelativePath + 'QUEBEC_blanc.svg'),
-			logoAlt = prop($$props, 'logoAlt', 7, lang === 'fr' ? 'Logo du gouvernement du Québec' : 'Logo of government of Québec'),
+			logoAlt = prop($$props, 'logoAlt', 23, () => strict_equals(lang, 'fr') ? 'Logo du gouvernement du Québec' : 'Logo of government of Québec'),
 			titleUrl = prop($$props, 'titleUrl', 7, '/'),
 			titleText = prop($$props, 'titleText', 7, ''),
-			joinUsText = prop($$props, 'joinUsText', 7, lang === 'fr' ? 'Nous joindre' : 'Contact us'),
+			joinUsText = prop($$props, 'joinUsText', 23, () => strict_equals(lang, 'fr') ? 'Nous joindre' : 'Contact us'),
 			joinUsUrl = prop($$props, 'joinUsUrl', 7, ''),
-			altLanguageText = prop($$props, 'altLanguageText', 7, lang === 'fr' ? 'English' : 'Français'),
+			altLanguageText = prop($$props, 'altLanguageText', 23, () => strict_equals(lang, 'fr') ? 'English' : 'Français'),
 			altLanguageUrl = prop($$props, 'altLanguageUrl', 7, ''),
-			linksLabel = prop($$props, 'linksLabel', 7, lang === 'fr' ? 'Navigation PIV' : 'PIV navigation'),
+			linksLabel = prop($$props, 'linksLabel', 23, () => strict_equals(lang, 'fr') ? 'Navigation PIV' : 'PIV navigation'),
 			goToContent = prop($$props, 'goToContent', 7, 'true'),
 			goToContentAnchor = prop($$props, 'goToContentAnchor', 7, '#main'),
-			goToContentText = prop($$props, 'goToContentText', 7, lang === 'fr' ? 'Passer au contenu' : 'Skip to content'),
-			displaySearchText = prop($$props, 'displaySearchText', 7, lang === 'fr' ? 'Cliquer pour faire une recherche' : 'Click to search'),
-			hideSearchText = prop($$props, 'hideSearchText', 7, lang === 'fr' ? 'Masquer la barre de recherche' : 'Hide search bar'),
+			goToContentText = prop($$props, 'goToContentText', 23, () => strict_equals(lang, 'fr') ? 'Passer au contenu' : 'Skip to content'),
+			displaySearchText = prop($$props, 'displaySearchText', 23, () => strict_equals(lang, 'fr') ? 'Cliquer pour faire une recherche' : 'Click to search'),
+			hideSearchText = prop($$props, 'hideSearchText', 23, () => strict_equals(lang, 'fr') ? 'Masquer la barre de recherche' : 'Hide search bar'),
 			enableSearch = prop($$props, 'enableSearch', 7, 'false'),
 			showSearch = prop($$props, 'showSearch', 7, 'false'),
 			linksSlot = prop($$props, 'linksSlot', 7),
@@ -6750,83 +7481,114 @@
 		}
 
 		onMount(() => {
-			set(containerClass, get(containerClass) + (fullWidth() === 'true' ? '-fluid' : ''));
+			set(containerClass, get(containerClass) + (strict_equals(fullWidth(), 'true') ? '-fluid' : ''));
 
-			if (showSearch() === 'true') {
+			if (strict_equals(showSearch(), 'true')) {
 				enableSearch('true');
 				set(displaySearchForm, true);
 			}
 		});
 
-		var div = root$l();
+		var div = root$k();
 		var div_1 = child(div);
 
 		{
-			const title = ($$anchor) => {
+			const title = wrap_snippet(PivHeader, function ($$anchor) {
+				validate_snippet_args(...arguments);
+
 				var fragment = comment();
 				var node = first_child(fragment);
 
 				{
-					var consequent = ($$anchor) => {
+					var consequent_1 = ($$anchor) => {
 						var div_2 = root_2$8();
-						var a = child(div_2);
-						var text = child(a, true);
+						var node_1 = child(div_2);
 
-						reset(a);
-						reset(div_2);
+						{
+							var consequent = ($$anchor) => {
+								var a = root_3$3();
+								var text = child(a, true);
 
-						template_effect(() => {
-							set_attribute(a, 'href', titleUrl());
-							set_text(text, titleText());
-						});
+								reset(a);
+
+								template_effect(() => {
+									set_attribute(a, 'href', titleUrl());
+									set_text(text, titleText());
+								});
+
+								append($$anchor, a);
+							};
+
+							var alternate = ($$anchor) => {
+								var span = root_4$4();
+								var text_1 = child(span, true);
+
+								reset(span);
+								template_effect(() => set_text(text_1, titleText()));
+								append($$anchor, span);
+							};
+
+							if_block(node_1, ($$render) => {
+								if (titleUrl() && titleUrl().length > 0) $$render(consequent); else $$render(alternate, false);
+							});
+						}
 
+						reset(div_2);
 						append($$anchor, div_2);
 					};
 
 					if_block(node, ($$render) => {
-						if (titleUrl() && titleText()) $$render(consequent);
+						if (titleText()) $$render(consequent_1);
 					});
 				}
 
 				append($$anchor, fragment);
-			};
+			});
 
-			var node_1 = child(div_1);
+			var node_2 = child(div_1);
 
 			{
-				var consequent_1 = ($$anchor) => {
-					var div_3 = root_3$3();
+				var consequent_2 = ($$anchor) => {
+					var div_3 = root_5();
 					var a_1 = child(div_3);
-					var text_1 = child(a_1, true);
+					var text_2 = child(a_1, true);
 
 					reset(a_1);
 					reset(div_3);
 
 					template_effect(() => {
 						set_attribute(a_1, 'href', goToContentAnchor());
-						set_text(text_1, goToContentText());
+						set_text(text_2, goToContentText());
 					});
 
 					append($$anchor, div_3);
 				};
 
-				if_block(node_1, ($$render) => {
-					if (goToContent() === 'true') $$render(consequent_1);
+				if_block(node_2, ($$render) => {
+					if (strict_equals(goToContent(), 'true')) $$render(consequent_2);
 				});
 			}
 
-			var div_4 = sibling(node_1, 2);
-			var a_2 = child(div_4);
-			var node_2 = sibling(a_2, 2);
+			var div_4 = sibling(node_2, 2);
+			var div_5 = child(div_4);
+			var div_6 = child(div_5);
+			var a_2 = child(div_6);
+			var img = child(a_2);
+
+			reset(a_2);
+			reset(div_6);
+
+			var node_3 = sibling(div_6, 2);
 
-			title(node_2);
+			title(node_3);
+			reset(div_5);
 
-			var div_5 = sibling(node_2, 2);
-			var node_3 = child(div_5);
+			var div_7 = sibling(div_5, 2);
+			var node_4 = child(div_7);
 
 			{
-				var consequent_2 = ($$anchor) => {
-					var a_3 = root_4$4();
+				var consequent_3 = ($$anchor) => {
+					var a_3 = root_6$1();
 
 					a_3.__click = [
 						on_click$3,
@@ -6834,85 +7596,85 @@
 						focusOnSearchInput
 					];
 
-					var span = child(a_3);
-					var text_2 = child(span, true);
+					var span_1 = child(a_3);
+					var text_3 = child(span_1, true);
 
-					reset(span);
+					reset(span_1);
 					reset(a_3);
-					template_effect(() => set_text(text_2, get(displaySearchForm) ? hideSearchText() : displaySearchText()));
+					template_effect(() => set_text(text_3, get(displaySearchForm) ? hideSearchText() : displaySearchText()));
 					append($$anchor, a_3);
 				};
 
-				if_block(node_3, ($$render) => {
-					if (Utils.isTruthy(enableSearch())) $$render(consequent_2);
+				if_block(node_4, ($$render) => {
+					if (Utils.isTruthy(enableSearch())) $$render(consequent_3);
 				});
 			}
 
-			var div_6 = sibling(node_3, 2);
-			var node_4 = child(div_6);
+			var div_8 = sibling(node_4, 2);
+			var node_5 = child(div_8);
 
 			{
-				var consequent_3 = ($$anchor) => {
+				var consequent_4 = ($$anchor) => {
 					var fragment_1 = comment();
-					var node_5 = first_child(fragment_1);
+					var node_6 = first_child(fragment_1);
 
-					snippet(node_5, linksSlot);
+					snippet(node_6, linksSlot);
 					append($$anchor, fragment_1);
 				};
 
-				var alternate = ($$anchor) => {
+				var alternate_1 = ($$anchor) => {
 					var fragment_2 = comment();
-					var node_6 = first_child(fragment_2);
+					var node_7 = first_child(fragment_2);
 
 					{
-						var consequent_6 = ($$anchor) => {
-							var nav = root_7();
+						var consequent_7 = ($$anchor) => {
+							var nav = root_9();
 							var ul = child(nav);
-							var node_7 = child(ul);
+							var node_8 = child(ul);
 
 							{
-								var consequent_4 = ($$anchor) => {
-									var li = root_8();
+								var consequent_5 = ($$anchor) => {
+									var li = root_10();
 									var a_4 = child(li);
-									var text_3 = child(a_4, true);
+									var text_4 = child(a_4, true);
 
 									reset(a_4);
 									reset(li);
 
 									template_effect(() => {
 										set_attribute(a_4, 'href', altLanguageUrl());
-										set_text(text_3, altLanguageText());
+										set_text(text_4, altLanguageText());
 									});
 
 									append($$anchor, li);
 								};
 
-								if_block(node_7, ($$render) => {
-									if (altLanguageUrl()) $$render(consequent_4);
+								if_block(node_8, ($$render) => {
+									if (altLanguageUrl()) $$render(consequent_5);
 								});
 							}
 
-							var node_8 = sibling(node_7, 2);
+							var node_9 = sibling(node_8, 2);
 
 							{
-								var consequent_5 = ($$anchor) => {
-									var li_1 = root_9();
+								var consequent_6 = ($$anchor) => {
+									var li_1 = root_11();
 									var a_5 = child(li_1);
-									var text_4 = child(a_5, true);
+									var text_5 = child(a_5, true);
 
 									reset(a_5);
 									reset(li_1);
 
 									template_effect(() => {
 										set_attribute(a_5, 'href', joinUsUrl());
-										set_text(text_4, joinUsText());
+										set_text(text_5, joinUsText());
 									});
 
 									append($$anchor, li_1);
 								};
 
-								if_block(node_8, ($$render) => {
-									if (joinUsUrl()) $$render(consequent_5);
+								if_block(node_9, ($$render) => {
+									if (joinUsUrl()) $$render(consequent_6);
 								});
 							}
 
@@ -6922,75 +7684,71 @@
 							append($$anchor, nav);
 						};
 
-						if_block(node_6, ($$render) => {
-							if (joinUsUrl() || altLanguageUrl()) $$render(consequent_6);
+						if_block(node_7, ($$render) => {
+							if (joinUsUrl() || altLanguageUrl()) $$render(consequent_7);
 						});
 					}
 
 					append($$anchor, fragment_2);
 				};
 
-				if_block(node_4, ($$render) => {
-					if ((!slots() || slots()['links']) && linksSlot()) $$render(consequent_3); else $$render(alternate, false);
+				if_block(node_5, ($$render) => {
+					if ((!slots() || slots()['links']) && linksSlot()) $$render(consequent_4); else $$render(alternate_1, false);
 				});
 			}
 
-			reset(div_6);
-			reset(div_5);
+			reset(div_8);
+			reset(div_7);
 			reset(div_4);
 
-			var node_9 = sibling(div_4, 2);
+			var node_10 = sibling(div_4, 2);
 
-			title(node_9);
+			title(node_10);
 
-			var div_7 = sibling(node_9, 2);
-			var node_10 = child(div_7);
+			var div_9 = sibling(node_10, 2);
+			var node_11 = child(div_9);
 
 			{
-				var consequent_8 = ($$anchor) => {
-					var div_8 = root_10();
-					var node_11 = child(div_8);
+				var consequent_9 = ($$anchor) => {
+					var div_10 = root_12();
+					var node_12 = child(div_10);
 
 					{
-						var consequent_7 = ($$anchor) => {
+						var consequent_8 = ($$anchor) => {
 							var fragment_3 = comment();
-							var node_12 = first_child(fragment_3);
+							var node_13 = first_child(fragment_3);
 
-							snippet(node_12, searchZoneSlot);
+							snippet(node_13, searchZoneSlot);
 							append($$anchor, fragment_3);
 						};
 
-						if_block(node_11, ($$render) => {
-							if (searchZoneSlot()) $$render(consequent_7);
+						if_block(node_12, ($$render) => {
+							if (searchZoneSlot()) $$render(consequent_8);
 						});
 					}
 
-					reset(div_8);
-					bind_this(div_8, ($$value) => set(searchZone, $$value), () => get(searchZone));
-					append($$anchor, div_8);
+					reset(div_10);
+					bind_this(div_10, ($$value) => set(searchZone, $$value), () => get(searchZone));
+					append($$anchor, div_10);
 				};
 
-				if_block(node_10, ($$render) => {
-					if (get(displaySearchForm)) $$render(consequent_8);
+				if_block(node_11, ($$render) => {
+					if (get(displaySearchForm)) $$render(consequent_9);
 				});
 			}
 
-			reset(div_7);
+			reset(div_9);
 			reset(div_1);
 
 			template_effect(() => {
 				set_attribute(a_2, 'href', logoUrl());
-				set_attribute(a_2, 'aria-label', logoAlt());
+				set_attribute(img, 'src', logoSrc());
+				set_attribute(img, 'alt', logoAlt());
 			});
 		}
 
 		reset(div);
-
-		template_effect(() => {
-			set_style(div, `--logo-src:url(${logoSrc() ?? ''})`);
-			set_class(div_1, 1, get(containerClass));
-		});
-
+		template_effect(() => set_class(div_1, 1, get(containerClass)));
 		append($$anchor, div);
 
 		return pop({
@@ -7163,7 +7921,8 @@
 			set slots($$value = false) {
 				slots($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7200,41 +7959,51 @@
 		true
 	);
 
-	var root$k = template(`<!> <link rel="stylesheet">`, 1);
+	PivHeaderWC[FILENAME] = 'src/sdg/components/PivHeader/PivHeaderWC.svelte';
+
+	var root$j = add_locations(template(`<!> <link rel="stylesheet">`, 1), PivHeaderWC[FILENAME], [[56, 0]]);
 
 	function PivHeaderWC($$anchor, $$props) {
+		check_target(new.target);
+
 		const $$slots = sanitize_slots($$props);
 
 		push($$props, true);
 
 		let self = prop($$props, 'self', 7),
-			props = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'self'
-			]);
-
-		var fragment = root$k();
+			props = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'self'
+				]);
+
+		var fragment = root$j();
 		var node = first_child(fragment);
 
 		{
-			const linksSlot = ($$anchor) => {
+			const linksSlot = wrap_snippet(PivHeaderWC, function ($$anchor) {
+				validate_snippet_args(...arguments);
+
 				var fragment_1 = comment();
 				var node_1 = first_child(fragment_1);
 
-				slot(node_1, $$props, 'links', {});
+				slot(node_1, $$props, 'links', {}, null);
 				append($$anchor, fragment_1);
-			};
+			});
+
+			const searchZoneSlot = wrap_snippet(PivHeaderWC, function ($$anchor) {
+				validate_snippet_args(...arguments);
 
-			const searchZoneSlot = ($$anchor) => {
 				var fragment_2 = comment();
 				var node_2 = first_child(fragment_2);
 
-				slot(node_2, $$props, 'search-zone', {});
+				slot(node_2, $$props, 'search-zone', {}, null);
 				append($$anchor, fragment_2);
-			};
+			});
 
 			PivHeader(node, spread_props(
 				{
@@ -7264,7 +8033,8 @@
 			set self($$value) {
 				self($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7306,28 +8076,31 @@
 		}
 	));
 
-	var root_2$7 = template(`<img>`);
-	var root_4$3 = template(`<a> </a>`);
-	var root$j = template(`<div class="qc-piv-footer qc-container-fluid"><!> <a class="logo"></a> <span class="copyright"><!></span></div>`);
+	PivFooter[FILENAME] = 'src/sdg/components/PivFooter/PivFooter.svelte';
+
+	var root_2$7 = add_locations(template(`<img>`), PivFooter[FILENAME], [[34, 12]]);
+	var root_4$3 = add_locations(template(`<a> </a>`), PivFooter[FILENAME], [[45, 12]]);
+	var root$i = add_locations(template(`<div class="qc-piv-footer qc-container-fluid"><!> <a class="logo"></a> <span class="copyright"><!></span></div>`), PivFooter[FILENAME], [[20, 0, [[25, 4], [41, 4]]]]);
 
 	function PivFooter($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const lang = Utils.getPageLanguage();
 
 		let logoUrl = prop($$props, 'logoUrl', 7, '/'),
-			logoSrc = prop($$props, 'logoSrc', 23, () => Utils.imagesRelativePath + '/QUEBEC_couleur.svg'),
-			logoSrcDarkTheme = prop($$props, 'logoSrcDarkTheme', 23, () => Utils.imagesRelativePath + '/QUEBEC_blanc.svg'),
-			logoAlt = prop($$props, 'logoAlt', 7, lang === 'fr' ? 'Logo du gouvernement du Québec' : 'Logo of the Quebec government'),
+			logoSrc = prop($$props, 'logoSrc', 23, () => Utils.imagesRelativePath + 'QUEBEC_couleur.svg'),
+			logoSrcDarkTheme = prop($$props, 'logoSrcDarkTheme', 23, () => Utils.imagesRelativePath + 'QUEBEC_blanc.svg'),
+			logoAlt = prop($$props, 'logoAlt', 23, () => strict_equals(lang, 'fr') ? 'Logo du gouvernement du Québec' : 'Logo of the Quebec government'),
 			logoWidth = prop($$props, 'logoWidth', 7, 139),
 			logoHeight = prop($$props, 'logoHeight', 7, 50),
-			copyrightUrl = prop($$props, 'copyrightUrl', 7, lang === 'fr' ? 'https://www.quebec.ca/droit-auteur' : 'https://www.quebec.ca/en/copyright'),
+			copyrightUrl = prop($$props, 'copyrightUrl', 23, () => strict_equals(lang, 'fr') ? 'https://www.quebec.ca/droit-auteur' : 'https://www.quebec.ca/en/copyright'),
 			copyrightText = prop($$props, 'copyrightText', 23, () => '© Gouvernement du Québec, ' + new Date().getFullYear()),
 			mainSlot = prop($$props, 'mainSlot', 7),
 			copyrightSlot = prop($$props, 'copyrightSlot', 7),
 			slots = prop($$props, 'slots', 23, () => ({}));
 
-		var div = root$j();
+		var div = root$i();
 		var node = child(div);
 
 		{
@@ -7357,7 +8130,13 @@
 			index,
 			($$anchor, $$item) => {
 				let theme = () => get($$item)[0];
+
+				theme();
+
 				let src = () => get($$item)[1];
+
+				src();
+
 				var img = root_2$7();
 
 				template_effect(() => {
@@ -7429,7 +8208,7 @@
 				return logoSrc();
 			},
 			set logoSrc(
-				$$value = Utils.imagesRelativePath + '/QUEBEC_couleur.svg'
+				$$value = Utils.imagesRelativePath + 'QUEBEC_couleur.svg'
 			) {
 				logoSrc($$value);
 				flushSync();
@@ -7438,7 +8217,7 @@
 				return logoSrcDarkTheme();
 			},
 			set logoSrcDarkTheme(
-				$$value = Utils.imagesRelativePath + '/QUEBEC_blanc.svg'
+				$$value = Utils.imagesRelativePath + 'QUEBEC_blanc.svg'
 			) {
 				logoSrcDarkTheme($$value);
 				flushSync();
@@ -7504,7 +8283,8 @@
 			set slots($$value = {}) {
 				slots($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7528,41 +8308,51 @@
 		true
 	);
 
-	var root$i = template(`<!> <link rel="stylesheet">`, 1);
+	PivFooterWC[FILENAME] = 'src/sdg/components/PivFooter/PivFooterWC.svelte';
+
+	var root$h = add_locations(template(`<!> <link rel="stylesheet">`, 1), PivFooterWC[FILENAME], [[44, 0]]);
 
 	function PivFooterWC($$anchor, $$props) {
+		check_target(new.target);
+
 		const $$slots = sanitize_slots($$props);
 
 		push($$props, true);
 
 		let self = prop($$props, 'self', 7),
-			props = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'self'
-			]);
-
-		var fragment = root$i();
+			props = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'self'
+				]);
+
+		var fragment = root$h();
 		var node = first_child(fragment);
 
 		{
-			const mainSlot = ($$anchor) => {
+			const mainSlot = wrap_snippet(PivFooterWC, function ($$anchor) {
+				validate_snippet_args(...arguments);
+
 				var fragment_1 = comment();
 				var node_1 = first_child(fragment_1);
 
-				slot(node_1, $$props, 'default', {});
+				slot(node_1, $$props, 'default', {}, null);
 				append($$anchor, fragment_1);
-			};
+			});
+
+			const copyrightSlot = wrap_snippet(PivFooterWC, function ($$anchor) {
+				validate_snippet_args(...arguments);
 
-			const copyrightSlot = ($$anchor) => {
 				var fragment_2 = comment();
 				var node_2 = first_child(fragment_2);
 
-				slot(node_2, $$props, 'copyright', {});
+				slot(node_2, $$props, 'copyright', {}, null);
 				append($$anchor, fragment_2);
-			};
+			});
 
 			PivFooter(node, spread_props(() => props, {
 				slots: $$slots,
@@ -7584,7 +8374,8 @@
 			set self($$value) {
 				self($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7616,9 +8407,12 @@
 		}
 	));
 
-	var root$h = template(`<button><!></button>`);
+	IconButton[FILENAME] = 'src/sdg/components/IconButton/IconButton.svelte';
+
+	var root$g = add_locations(template(`<button><!></button>`), IconButton[FILENAME], [[16, 0]]);
 
 	function IconButton($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const size = prop($$props, 'size', 7, 'xl'),
@@ -7627,20 +8421,22 @@
 			iconSize = prop($$props, 'iconSize', 7),
 			iconColor = prop($$props, 'iconColor', 7),
 			className = prop($$props, 'class', 7, ''),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'size',
-				'label',
-				'icon',
-				'iconSize',
-				'iconColor',
-				'class'
-			]);
-
-		var button = root$h();
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'size',
+					'label',
+					'icon',
+					'iconSize',
+					'iconColor',
+					'class'
+				]);
+
+		var button = root$g();
 		let attributes;
 		var node = child(button);
 
@@ -7720,7 +8516,8 @@
 			set class($$value = '') {
 				className($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7739,9 +8536,24 @@
 		true
 	);
 
-	var root_1$7 = template(`<div role="alert"><div><div class="qc-general-alert-elements"><!> <div class="qc-alert-content"><!> <!></div> <!></div></div></div>`);
+	Alert[FILENAME] = 'src/sdg/components/Alert/Alert.svelte';
+
+	var root_1$7 = add_locations(template(`<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]]]]
+				]
+			]
+		]
+	]);
 
 	function Alert($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let type = prop($$props, 'type', 7, "general"),
@@ -7752,13 +8564,13 @@
 			slotContent = prop($$props, 'slotContent', 7);
 
 		const language = Utils.getPageLanguage();
-		const typeClass = type() !== "" ? type() : 'general';
-		const closeLabel = language === 'fr' ? "Fermer l’alerte" : "Close l’alerte";
-		const warningLabel = language === 'fr' ? "Information d'importance élevée" : "Information of high importance";
-		const generalLabel = language === 'fr' ? "Information importante" : "Important information";
-		const label = type() === 'general' ? generalLabel : warningLabel;
+		const typeClass = strict_equals(type(), "", false) ? type() : 'general';
+		const closeLabel = strict_equals(language, 'fr') ? "Fermer l’alerte" : "Close l’alerte";
+		const warningLabel = strict_equals(language, 'fr') ? "Information d'importance élevée" : "Information of high importance";
+		const generalLabel = strict_equals(language, 'fr') ? "Information importante" : "Important information";
+		const label = strict_equals(type(), 'general') ? generalLabel : warningLabel;
 		let rootElement = state(null);
-		let containerClass = "qc-container" + (fullWidth() === 'true' ? '-fluid' : '');
+		let containerClass = "qc-container" + (strict_equals(fullWidth(), 'true') ? '-fluid' : '');
 
 		function hideAlert() {
 			hide("true");
@@ -7780,8 +8592,8 @@
 
 				var div_2 = child(div_1);
 				var node_1 = child(div_2);
-				const expression = user_derived(() => type() === 'warning' ? 'warning' : 'information');
-				const expression_1 = user_derived(() => type() === 'general' ? 'blue-piv' : 'yellow-dark');
+				const expression = user_derived(() => strict_equals(type(), 'warning') ? 'warning' : 'information');
+				const expression_1 = user_derived(() => strict_equals(type(), 'general') ? 'blue-piv' : 'yellow-dark');
 
 				Icon(node_1, {
 					get type() {
@@ -7814,7 +8626,7 @@
 							size: 'nm',
 							icon: 'xclose',
 							iconSize: 'sm',
-							iconColor: 'text-primary'
+							iconColor: 'blue-piv'
 						});
 					};
 
@@ -7879,7 +8691,8 @@
 			set slotContent($$value) {
 				slotContent($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -7898,13 +8711,16 @@
 		true
 	);
 
-	var root$g = template(`<!> <link rel="stylesheet">`, 1);
+	AlertWC[FILENAME] = 'src/sdg/components/Alert/AlertWC.svelte';
+
+	var root$f = add_locations(template(`<!> <link rel="stylesheet">`, 1), AlertWC[FILENAME], [[25, 0]]);
 
 	function AlertWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
-		var fragment = root$g();
+		var fragment = root$f();
 		var node = first_child(fragment);
 
 		Alert(node, spread_props(() => props, { slotContent: `<slot />` }));
@@ -7913,7 +8729,7 @@
 
 		template_effect(() => set_attribute(link, 'href', Utils.cssPath));
 		append($$anchor, fragment);
-		pop();
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-alert', create_custom_element(
@@ -7930,6 +8746,8 @@
 		true
 	));
 
+	ToTop[FILENAME] = 'src/sdg/components/ToTop/ToTop.svelte';
+
 	function handleEnterAndSpace(e, scrollToTop) {
 		switch (e.code) {
 			case 'Enter':
@@ -7941,17 +8759,18 @@
 	}
 
 	var on_click$2 = (e, scrollToTop) => scrollToTop(e);
-	var root$f = template(`<a href="#top"><!> <span> </span></a>`);
+	var root$e = add_locations(template(`<a href="#top"><!> <span> </span></a>`), ToTop[FILENAME], [[67, 0, [[77, 3]]]]);
 
 	function ToTop($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const lang = Utils.getPageLanguage();
 
-		const text = prop($$props, 'text', 7, lang === 'fr' ? "Retour en haut" : "Back to top"),
+		const text = prop($$props, 'text', 23, () => strict_equals(lang, 'fr') ? "Retour en haut" : "Back to top"),
 			demo = prop($$props, 'demo', 7, 'false');
 
-		let visible = state(demo() === 'true');
+		let visible = state(proxy(strict_equals(demo(), 'true')));
 		let lastVisible = setContext('visible', () => get(visible));
 		let lastScrollY = 0;
 		let minimumScrollHeight = 0;
@@ -7984,7 +8803,7 @@
 			lastScrollY = window.scrollY;
 		});
 
-		var a = root$f();
+		var a = root$e();
 
 		event('scroll', $window, handleScrollUpButton);
 
@@ -8032,17 +8851,24 @@
 			set demo($$value = 'false') {
 				demo($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
 	delegate(['click', 'keydown']);
 	create_custom_element(ToTop, { text: {}, demo: {} }, [], [], true);
 
+	ToTopWC[FILENAME] = 'src/sdg/components/ToTop/toTopWC.svelte';
+
 	function ToTopWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		ToTop($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-to-top', create_custom_element(
@@ -8056,12 +8882,15 @@
 		false
 	));
 
-	var root$e = template(`<span role="img" class="qc-ext-link-img"></span>`);
+	ExternalLink[FILENAME] = 'src/sdg/components/ExternalLink/ExternalLink.svelte';
+
+	var root$d = add_locations(template(`<span role="img" class="qc-ext-link-img"></span>`), ExternalLink[FILENAME], [[89, 0]]);
 
 	function ExternalLink($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
-		const externalIconAlt = prop($$props, 'externalIconAlt', 23, () => Utils.getPageLanguage() === 'fr' ? "Ce lien dirige vers un autre site." : "This link directs to another site.");
+		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 imgElement = state(void 0);
 
 		function createVisibleNodesTreeWalker() {
@@ -8075,7 +8904,7 @@
 						const style = window.getComputedStyle(node);
 
 						// Si l'élément est masqué par CSS (display ou visibility), on l'ignore
-						if (style.display === 'none' || style.visibility === 'hidden' || style.position === 'absolute') {
+						if (strict_equals(style.display, 'none') || strict_equals(style.visibility, 'hidden') || strict_equals(style.position, 'absolute')) {
 							return NodeFilter.FILTER_REJECT;
 						}
 					}
@@ -8137,7 +8966,7 @@
 			});
 		});
 
-		var span_1 = root$e();
+		var span_1 = root$d();
 
 		bind_this(span_1, ($$value) => set(imgElement, $$value), () => get(imgElement));
 		template_effect(() => set_attribute(span_1, 'aria-label', externalIconAlt()));
@@ -8152,54 +8981,66 @@
 			) {
 				externalIconAlt($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
 	create_custom_element(ExternalLink, { externalIconAlt: {} }, [], [], true);
 
+	ExternalLinkWC[FILENAME] = 'src/sdg/components/ExternalLink/ExternalLinkWC.svelte';
+
 	function ExternalLinkWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		ExternalLink($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-external-link', create_custom_element(ExternalLinkWC, { externalIconAlt: { attribute: 'img-alt' } }, [], [], false));
 
-	var root$d = template(`<div><!> <input> <!></div>`);
+	SearchInput[FILENAME] = 'src/sdg/components/SearchInput/SearchInput.svelte';
+
+	var root$c = add_locations(template(`<div><!> <input> <!></div>`), SearchInput[FILENAME], [[28, 0, [[39, 4]]]]);
 
 	function SearchInput($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const lang = Utils.getPageLanguage();
 
 		let value = prop($$props, 'value', 15, ''),
-			ariaLabel = prop($$props, 'ariaLabel', 7, lang === "fr" ? "Rechercher..." : "Search..."),
-			clearAriaLabel = prop($$props, 'clearAriaLabel', 7, lang === "fr" ? "Effacer le texte" : "Clear text"),
+			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'
-			]);
-
-		leftIcon(leftIcon() === true || leftIcon() === "true" || leftIcon() === "");
-
-		const isDisabled = $$props.disabled === true || $$props.disabled === "true" || $$props.disabled === "";
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'value',
+					'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();
 		}
 
-		var div = root$d();
+		var div = root$c();
 		var node = child(div);
 
 		{
@@ -8272,7 +9113,9 @@
 		append($$anchor, div);
 
 		return pop({
-			focus,
+			get focus() {
+				return focus;
+			},
 			get value() {
 				return value();
 			},
@@ -8313,7 +9156,8 @@
 			) {
 				id($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -8331,31 +9175,41 @@
 		true
 	);
 
-	var root$c = template(`<div><!> <!></div>`);
+	SearchBar[FILENAME] = 'src/sdg/components/SearchBar/SearchBar.svelte';
+
+	var root$b = add_locations(template(`<div><!> <!></div>`), SearchBar[FILENAME], [[37, 0]]);
 
 	function SearchBar($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
 		const lang = Utils.getPageLanguage();
 
 		let value = prop($$props, 'value', 15, ''),
 			name = prop($$props, 'name', 7, 'q'),
 			pivBackground = prop($$props, 'pivBackground', 7, false),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'value',
-				'name',
-				'pivBackground'
-			]);
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'value',
+					'name',
+					'pivBackground'
+				]);
 
 		let defaultsAttributes = {
 			input: {
-				"placeholder": lang === "fr" ? "Rechercher…" : "Search",
-				"aria-label": lang === "fr" ? "Rechercher…" : "Search"
-			}};
+				"placeholder": strict_equals(lang, "fr") ? "Rechercher…" : "Search",
+				"aria-label": strict_equals(lang, "fr") ? "Rechercher…" : "Search"
+			},
+			submit: {
+				"aria-label": strict_equals(lang, "fr") ? "Lancer la recherche" : "Submit search"
+			}
+		};
 
 		let inputProps = user_derived(() => ({
 				...defaultsAttributes.input,
@@ -8367,18 +9221,22 @@
 				...Utils.computeFieldsAttributes("submit", rest)
 			}));
 
-		var div = root$c();
+		var div = root$b();
 		let classes;
 		var node = child(div);
 
-		SearchInput(node, spread_props(() => get(inputProps), {
-			get value() {
-				return value();
-			},
-			set value($$value) {
-				value($$value);
-			}
-		}));
+		{
+			$$ownership_validator.binding('value', SearchInput, value);
+
+			SearchInput(node, spread_props(() => get(inputProps), {
+				get value() {
+					return value();
+				},
+				set value($$value) {
+					value($$value);
+				}
+			}));
+		}
 
 		var node_1 = sibling(node, 2);
 		const expression = user_derived(() => pivBackground() ? 'blue-piv' : 'background');
@@ -8424,16 +9282,23 @@
 			set pivBackground($$value = false) {
 				pivBackground($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
 	create_custom_element(SearchBar, { value: {}, name: {}, pivBackground: {} }, [], [], true);
 
+	SearchBarWC[FILENAME] = 'src/sdg/components/SearchBar/SearchBarWC.svelte';
+
 	function SearchBarWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		SearchBar($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-search-bar', create_custom_element(
@@ -8448,10 +9313,16 @@
 		false
 	));
 
+	SearchInputWC[FILENAME] = 'src/sdg/components/SearchInput/SearchInputWC.svelte';
+
 	function SearchInputWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		SearchInput($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-search-input', create_custom_element(
@@ -8467,10 +9338,16 @@
 		false
 	));
 
+	IconWC[FILENAME] = 'src/sdg/bases/Icon/IconWC.svelte';
+
 	function IconWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		Icon($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-icon', create_custom_element(
@@ -8490,10 +9367,16 @@
 		false
 	));
 
+	IconButtonWC[FILENAME] = 'src/sdg/components/IconButton/IconButtonWC.svelte';
+
 	function IconButtonWC($$anchor, $$props) {
+		check_target(new.target);
+		push($$props, true);
+
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
 
 		IconButton($$anchor, spread_props(() => props));
+		return pop({ ...legacy_api() });
 	}
 
 	customElements.define('qc-icon-button', create_custom_element(
@@ -8510,10 +9393,13 @@
 		false
 	));
 
-	var root_2$6 = template(`<!> <span><!></span>`, 1);
-	var root_1$6 = template(`<div role="alert"><!></div>`);
+	FormError[FILENAME] = 'src/sdg/components/FormError/FormError.svelte';
+
+	var root_2$6 = add_locations(template(`<!> <span><!></span>`, 1), FormError[FILENAME], [[48, 8]]);
+	var root_1$6 = add_locations(template(`<div role="alert"><!></div>`), FormError[FILENAME], [[35, 0]]);
 
 	function FormError($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const lang = Utils.getPageLanguage();
@@ -8526,7 +9412,7 @@
 			rootElement = prop($$props, 'rootElement', 15);
 
 		let cleanLabel = user_derived(() => label().replace(/:\s*$/, '')),
-			defaultInvalidText = user_derived(() => label() ? lang === 'fr' ? `Le champ ${get(cleanLabel)} est obligatoire.` : `${get(cleanLabel)} field is required.` : lang === 'fr' ? `Ce champ est obligatoire.` : `This field is required.`);
+			defaultInvalidText = user_derived(() => label() ? strict_equals(lang, 'fr') ? `Le champ ${get(cleanLabel)} est obligatoire.` : `${get(cleanLabel)} field is required.` : strict_equals(lang, 'fr') ? `Ce champ est obligatoire.` : `This field is required.`);
 
 		onMount(() => {
 			if (id()) return;
@@ -8625,7 +9511,8 @@
 			set rootElement($$value) {
 				rootElement($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -8644,16 +9531,19 @@
 		true
 	);
 
-	var root_1$5 = template(`<span class="qc-required" aria-hidden="true">*</span>`);
-	var root$b = template(`<!><!>`, 1);
+	LabelText[FILENAME] = 'src/sdg/components/Label/LabelText.svelte';
+
+	var root_1$5 = add_locations(template(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[4, 26]]);
+	var root$a = add_locations(template(`<!><!>`, 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 fragment = root$b();
+		var fragment = root$a();
 		var node = first_child(fragment);
 
 		html(node, text);
@@ -8688,26 +9578,32 @@
 			set required($$value) {
 				required($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
 	create_custom_element(LabelText, { text: {}, required: {} }, [], [], true);
 
-	var root_2$5 = template(`<legend><!></legend>`);
-	var root_1$4 = template(`<fieldset><!> <div><!></div> <!></fieldset>`);
-	var root_4$2 = template(`<div class="qc-fieldset-invalid"><!></div>`);
+	Fieldset[FILENAME] = 'src/sdg/components/Fieldset/Fieldset.svelte';
+
+	var root_2$5 = add_locations(template(`<legend><!></legend>`), Fieldset[FILENAME], [[43, 4]]);
+	var root_1$4 = add_locations(template(`<fieldset><!> <div><!></div> <!></fieldset>`), Fieldset[FILENAME], [[31, 0, [[47, 4]]]]);
+	var root_4$2 = add_locations(template(`<div class="qc-fieldset-invalid"><!></div>`), Fieldset[FILENAME], [[70, 4]]);
 
 	function Fieldset($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
-		const fieldset = ($$anchor) => {
+		const fieldset = wrap_snippet(Fieldset, function ($$anchor) {
+			validate_snippet_args(...arguments);
+
 			var fieldset_1 = root_1$4();
 
 			set_attribute(fieldset_1, 'aria-describedby', legendId);
 
 			fieldset_1.__change = function (...$$args) {
-				onchange()?.apply(this, $$args);
+				apply(onchange, this, $$args, Fieldset, [38, 11]);
 			};
 
 			var node = child(fieldset_1);
@@ -8787,7 +9683,7 @@
 			});
 
 			append($$anchor, fieldset_1);
-		};
+		});
 
 		let legend = prop($$props, 'legend', 7),
 			name = prop($$props, 'name', 7),
@@ -8937,7 +9833,8 @@
 			set rootElement($$value) {
 				rootElement($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -8967,9 +9864,9 @@
 		true
 	);
 
-	/* updateInput.svelte.js generated by Svelte v5.28.6 */
+	/* updateChoiceInput.svelte.js generated by Svelte v5.28.6 */
 
-	function updateInput(
+	function updateChoiceInput(
 		input,
 		required,
 		invalid,
@@ -8979,11 +9876,17 @@
 		name
 	) {
 		if (!input) return;
-		if (input.role === "switch") return;
+		if (strict_equals(input.role, "switch")) return;
+		if (strict_equals(input.type, "hidden")) return;
 
 		let label = input.closest('label');
 
-		input.classList.add('qc-choicefield');
+		if (!label) {
+			console.warn(...log_if_contains_state('warn', "Pas d'élément label parent pour l'input", input));
+			return;
+		}
+
+		input.classList.add('qc-choicefield');
 		label.classList.add('qc-choicefield-label');
 		input.classList.toggle('qc-selection-button', selectionButton);
 		label.classList.toggle('qc-selection-button', selectionButton);
@@ -9001,9 +9904,14 @@
 		input.addEventListener('change', () => setInvalid(false));
 	}
 
+	ChoiceGroup[FILENAME] = 'src/sdg/components/ChoiceGroup/ChoiceGroup.svelte';
+
 	function ChoiceGroup($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		let invalid = prop($$props, 'invalid', 15, false),
 			invalidText = prop($$props, 'invalidText', 7),
 			children = prop($$props, 'children', 7),
@@ -9013,21 +9921,23 @@
 			host = prop($$props, 'host', 7),
 			name = prop($$props, 'name', 7),
 			required = prop($$props, 'required', 7),
-			restProps = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'invalid',
-				'invalidText',
-				'children',
-				'compact',
-				'selectionButton',
-				'inline',
-				'host',
-				'name',
-				'required'
-			]);
+			restProps = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'invalid',
+					'invalidText',
+					'children',
+					'compact',
+					'selectionButton',
+					'inline',
+					'host',
+					'name',
+					'required'
+				]);
 
 		let fieldsetElement = state(void 0);
 
@@ -9038,52 +9948,56 @@
 		};
 
 		user_effect(() => {
-			(host() ? host() : get(fieldsetElement)).querySelectorAll('input, .qc-choicefield').forEach((input) => updateInput(input, required(), invalid(), compact(), selectionButton(), inline(), name()));
+			(host() ? host() : get(fieldsetElement)).querySelectorAll('input, .qc-choicefield').forEach((input) => updateChoiceInput(input, required(), invalid(), compact(), selectionButton(), inline(), name()));
 		});
 
-		Fieldset($$anchor, spread_props(
-			{
-				get required() {
-					return required();
-				},
-				get compact() {
-					return compact();
-				},
-				get selectionButton() {
-					return selectionButton();
-				},
-				get inline() {
-					return inline();
-				},
-				get invalidText() {
-					return invalidText();
-				},
-				onchange
-			},
-			() => restProps,
-			{
-				get invalid() {
-					return invalid();
-				},
-				set invalid($$value) {
-					invalid($$value);
-				},
-				get rootElement() {
-					return get(fieldsetElement);
-				},
-				set rootElement($$value) {
-					set(fieldsetElement, $$value, true);
-				},
-				children: ($$anchor, $$slotProps) => {
-					var fragment_1 = comment();
-					var node = first_child(fragment_1);
+		{
+			$$ownership_validator.binding('invalid', Fieldset, invalid);
 
-					snippet(node, children);
-					append($$anchor, fragment_1);
+			Fieldset($$anchor, spread_props(
+				{
+					get required() {
+						return required();
+					},
+					get compact() {
+						return compact();
+					},
+					get selectionButton() {
+						return selectionButton();
+					},
+					get inline() {
+						return inline();
+					},
+					get invalidText() {
+						return invalidText();
+					},
+					onchange
 				},
-				$$slots: { default: true }
-			}
-		));
+				() => restProps,
+				{
+					get invalid() {
+						return invalid();
+					},
+					set invalid($$value) {
+						invalid($$value);
+					},
+					get rootElement() {
+						return get(fieldsetElement);
+					},
+					set rootElement($$value) {
+						set(fieldsetElement, $$value, true);
+					},
+					children: wrap_snippet(ChoiceGroup, ($$anchor, $$slotProps) => {
+						var fragment_1 = comment();
+						var node = first_child(fragment_1);
+
+						snippet(node, children);
+						append($$anchor, fragment_1);
+					}),
+					$$slots: { default: true }
+				}
+			));
+		}
 
 		return pop({
 			get invalid() {
@@ -9148,7 +10062,8 @@
 			set required($$value) {
 				required($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -9170,11 +10085,16 @@
 		true
 	);
 
-	var root$a = template(`<!> <link rel="stylesheet">`, 1);
+	ChoiceGroupWC[FILENAME] = 'src/sdg/components/ChoiceGroup/ChoiceGroupWC.svelte';
+
+	var root$9 = add_locations(template(`<!> <link rel="stylesheet">`, 1), ChoiceGroupWC[FILENAME], [[47, 0]]);
 
 	function ChoiceGroupWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		let name = prop($$props, 'name', 7),
 			legend = prop($$props, 'legend', 7),
 			compact = prop($$props, 'compact', 7),
@@ -9185,50 +10105,54 @@
 			columnCount = prop($$props, 'columnCount', 7),
 			inline = prop($$props, 'inline', 7);
 
-		var fragment = root$a();
+		var fragment = root$9();
 		var node = first_child(fragment);
 
-		ChoiceGroup(node, {
-			get name() {
-				return name();
-			},
-			get legend() {
-				return legend();
-			},
-			get compact() {
-				return compact();
-			},
-			get required() {
-				return required();
-			},
-			get invalidText() {
-				return invalidText();
-			},
-			get selectionButton() {
-				return selectionButton();
-			},
-			get columnCount() {
-				return columnCount();
-			},
-			get inline() {
-				return inline();
-			},
-			host: $$props.$$host,
-			get invalid() {
-				return invalid();
-			},
-			set invalid($$value) {
-				invalid($$value);
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = comment();
-				var node_1 = first_child(fragment_1);
+		{
+			$$ownership_validator.binding('invalid', ChoiceGroup, invalid);
 
-				slot(node_1, $$props, 'default', {});
-				append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		});
+			ChoiceGroup(node, {
+				get name() {
+					return name();
+				},
+				get legend() {
+					return legend();
+				},
+				get compact() {
+					return compact();
+				},
+				get required() {
+					return required();
+				},
+				get invalidText() {
+					return invalidText();
+				},
+				get selectionButton() {
+					return selectionButton();
+				},
+				get columnCount() {
+					return columnCount();
+				},
+				get inline() {
+					return inline();
+				},
+				host: $$props.$$host,
+				get invalid() {
+					return invalid();
+				},
+				set invalid($$value) {
+					invalid($$value);
+				},
+				children: wrap_snippet(ChoiceGroupWC, ($$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 }
+			});
+		}
 
 		var link = sibling(node, 2);
 
@@ -9298,7 +10222,8 @@
 			set inline($$value) {
 				inline($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -9323,13 +10248,18 @@
 		true
 	));
 
-	var root_2$4 = template(`<span class="qc-required" aria-hidden="true">*</span>`);
-	var root$9 = template(`<div><!> <!> <!></div>`);
+	Checkbox[FILENAME] = 'src/sdg/components/Checkbox/Checkbox.svelte';
+
+	var root_2$4 = add_locations(template(`<span class="qc-required" aria-hidden="true">*</span>`), Checkbox[FILENAME], [[56, 4]]);
+	var root$8 = add_locations(template(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[64, 4]]);
 
 	function Checkbox($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
-		const requiredSpanSnippet = ($$anchor) => {
+		const requiredSpanSnippet = wrap_snippet(Checkbox, function ($$anchor) {
+			validate_snippet_args(...arguments);
+
 			var fragment = comment();
 			var node = first_child(fragment);
 
@@ -9347,7 +10277,7 @@
 			}
 
 			append($$anchor, fragment);
-		};
+		});
 
 		Utils.getPageLanguage();
 			const qcCheckoxContext = getContext("qc-checkbox");
@@ -9373,7 +10303,7 @@
 		onMount(() => {
 			if (qcCheckoxContext) return;
 			labelElement(get(rootElement)?.querySelector('label'));
-			input(get(rootElement)?.querySelector('input'));
+			input(get(rootElement)?.querySelector('input[type="checkbox"]'));
 			onChange(input(), (_invalid) => invalid(_invalid));
 		});
 
@@ -9383,7 +10313,7 @@
 			}
 		});
 
-		user_effect((_) => updateInput(input(), required(), invalid(), compact(), false, false));
+		user_effect((_) => updateChoiceInput(input(), required(), invalid(), compact(), false, false));
 
 		user_effect(() => {
 			if (!required()) return;
@@ -9391,7 +10321,7 @@
 			labelElement().appendChild(requiredSpan());
 		});
 
-		var div = root$9();
+		var div = root$8();
 		var node_1 = child(div);
 
 		requiredSpanSnippet(node_1);
@@ -9526,7 +10456,8 @@
 			set input($$value) {
 				input($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -9553,10 +10484,16 @@
 		true
 	);
 
-	var root$8 = template(`<!> <link rel="stylesheet">`, 1);
+	CheckboxWC[FILENAME] = 'src/sdg/components/Checkbox/CheckboxWC.svelte';
+
+	var root$7 = add_locations(template(`<!> <link rel="stylesheet">`, 1), CheckboxWC[FILENAME], [[49, 0]]);
 
 	function CheckboxWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
+
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		setContext('qc-checkbox', true);
 
 		let required = prop($$props, 'required', 15, false),
@@ -9569,51 +10506,55 @@
 			input = state(void 0);
 
 		onMount(() => {
-			set(labelElement, $$props.$$host.querySelector('label'), true);
-			set(input, $$props.$$host.querySelector('input'), true);
+			set(labelElement, $$props.$$host.querySelector("label"), true);
+			set(input, $$props.$$host.querySelector('input[type="checkbox"]'), true);
 			onChange(get(input), (_invalid) => invalid(_invalid));
 		});
 
-		var fragment = root$8();
+		var fragment = root$7();
 		var node = first_child(fragment);
 
-		Checkbox(node, {
-			get compact() {
-				return compact();
-			},
-			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: ($$anchor, $$slotProps) => {
-				var fragment_1 = comment();
-				var node_1 = first_child(fragment_1);
+		{
+			$$ownership_validator.binding('invalid', Checkbox, invalid);
 
-				slot(node_1, $$props, 'default', {});
-				append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		});
+			Checkbox(node, {
+				get compact() {
+					return compact();
+				},
+				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 }
+			});
+		}
 
 		var link = sibling(node, 2);
 
@@ -9648,7 +10589,8 @@
 			set invalidText($$value) {
 				invalidText($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -9665,9 +10607,12 @@
 		true
 	));
 
-	var root$7 = template(`<label><!></label>`);
+	Label[FILENAME] = 'src/sdg/components/Label/Label.svelte';
+
+	var root$6 = add_locations(template(`<label><!></label>`), Label[FILENAME], [[16, 0]]);
 
 	function Label($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let forId = prop($$props, 'forId', 7),
@@ -9677,21 +10622,23 @@
 			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 label = root$7();
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'forId',
+					'text',
+					'required',
+					'compact',
+					'bold',
+					'disabled',
+					'rootElement'
+				]);
+
+		var label = root$6();
 		let attributes;
 		var node = child(label);
 
@@ -9769,7 +10716,8 @@
 			set rootElement($$value) {
 				rootElement($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -9807,15 +10755,22 @@
 	    setTextFieldRow(input.closest('.qc-formfield-row'));
 	}
 
-	var root_3$2 = template(`<div class="qc-description"><!></div>`);
-	var root_4$1 = template(`<div aria-live="polite"><!></div>`);
-	var root_1$3 = template(`<!> <!> <!> <!> <!>`, 1);
-	var root_6 = template(`<div class="qc-textfield"><!></div>`);
+	TextField[FILENAME] = 'src/sdg/components/TextField/TextField.svelte';
+
+	var root_3$2 = add_locations(template(`<div class="qc-description"><!></div>`), TextField[FILENAME], [[135, 8]]);
+	var root_4$1 = add_locations(template(`<div aria-live="polite"><!></div>`), TextField[FILENAME], [[146, 8]]);
+	var root_1$3 = add_locations(template(`<!> <!> <!> <!> <!>`, 1), TextField[FILENAME], []);
+	var root_6 = add_locations(template(`<div class="qc-textfield"><!></div>`), TextField[FILENAME], [[170, 4]]);
 
 	function TextField($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
-		const textfield = ($$anchor) => {
+		var $$ownership_validator = create_ownership_validator($$props);
+
+		const textfield = wrap_snippet(TextField, function ($$anchor) {
+			validate_snippet_args(...arguments);
+
 			var fragment = root_1$3();
 			var node = first_child(fragment);
 
@@ -9824,26 +10779,30 @@
 					const expression = user_derived(() => input()?.disabled);
 					const expression_1 = user_derived(() => input()?.id);
 
-					Label($$anchor, {
-						get required() {
-							return required();
-						},
-						get disabled() {
-							return get(expression);
-						},
-						get text() {
-							return label();
-						},
-						get forId() {
-							return get(expression_1);
-						},
-						get rootElement() {
-							return labelElement();
-						},
-						set rootElement($$value) {
-							labelElement($$value);
-						}
-					});
+					{
+						$$ownership_validator.binding('labelElement', Label, labelElement);
+
+						Label($$anchor, {
+							get required() {
+								return required();
+							},
+							get disabled() {
+								return get(expression);
+							},
+							get text() {
+								return label();
+							},
+							get forId() {
+								return get(expression_1);
+							},
+							get rootElement() {
+								return labelElement();
+							},
+							set rootElement($$value) {
+								labelElement($$value);
+							}
+						});
+					}
 				};
 
 				if_block(node, ($$render) => {
@@ -9899,7 +10858,7 @@
 				};
 
 				if_block(node_4, ($$render) => {
-					if (maxlength() !== null) $$render(consequent_2);
+					if (maxlength() && strict_equals(maxlength(), null, false)) $$render(consequent_2);
 				});
 			}
 
@@ -9907,40 +10866,44 @@
 			const expression_2 = user_derived(() => invalidText() ? invalidText() : get(defaultInvalidText));
 			const expression_3 = user_derived(() => label() ? label() : input()?.getAttribute("aria-label"));
 
-			FormError(node_6, {
-				get invalid() {
-					return invalid();
-				},
-				get invalidText() {
-					return get(expression_2);
-				},
-				get label() {
-					return get(expression_3);
-				},
-				extraClasses: ['qc-xs-mt'],
-				get id() {
-					return get(errorId);
-				},
-				set id($$value) {
-					set(errorId, $$value, true);
-				},
-				get rootElement() {
-					return formErrorElement();
-				},
-				set rootElement($$value) {
-					formErrorElement($$value);
-				}
-			});
-
-			append($$anchor, fragment);
-		};
-
-		const lang = Utils.getPageLanguage();
+			{
+				$$ownership_validator.binding('formErrorElement', FormError, formErrorElement);
 
-		let label = prop($$props, 'label', 7, ''),
-			required = prop($$props, 'required', 15, false),
-			description = prop($$props, 'description', 7),
-			size = prop($$props, 'size', 7),
+				FormError(node_6, {
+					get invalid() {
+						return invalid();
+					},
+					get invalidText() {
+						return get(expression_2);
+					},
+					get label() {
+						return get(expression_3);
+					},
+					extraClasses: ['qc-xs-mt'],
+					get id() {
+						return get(errorId);
+					},
+					set id($$value) {
+						set(errorId, $$value, true);
+					},
+					get rootElement() {
+						return formErrorElement();
+					},
+					set rootElement($$value) {
+						formErrorElement($$value);
+					}
+				});
+			}
+
+			append($$anchor, fragment);
+		});
+
+		const lang = Utils.getPageLanguage();
+
+		let label = prop($$props, 'label', 7, ''),
+			required = prop($$props, 'required', 15, false),
+			description = prop($$props, 'description', 7),
+			size = prop($$props, 'size', 15),
 			maxlength = prop($$props, 'maxlength', 7),
 			maxlengthReached = prop($$props, 'maxlengthReached', 15, false),
 			invalidAtSubmit = prop($$props, 'invalidAtSubmit', 15, false),
@@ -9963,7 +10926,7 @@
 			textFieldRow = state(void 0),
 			defaultInvalidText = user_derived(() => {
 				if (!maxlengthReached()) return '';
-				return lang === 'fr' ? `La limite de caractères du champ ${label()} est dépassée.` : `The character limit for the ${label()} field has been exceeded.`;
+				return strict_equals(lang, 'fr') ? `La limite de caractères du champ ${label()} est dépassée.` : `The character limit for the ${label()} field has been exceeded.`;
 			});
 
 		onMount(() => {
@@ -9976,6 +10939,12 @@
 			onMountInput(input(), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => value(valueParam), (invalidParam) => invalid(invalidParam));
 		});
 
+		user_effect(() => {
+			if (size()) return;
+			if (!input()) return;
+			size(strict_equals(input().tagName, 'INPUT') ? 'md' : 'lg');
+		});
+
 		user_effect(() => {
 			invalidAtSubmit(required() && !value() || maxlengthReached());
 		});
@@ -10006,7 +10975,7 @@
 
 			const s = over > 1 ? 's' : '';
 
-			set(charCountText, remaining >= 0 ? lang === 'fr' ? `${remaining} caractère${s} restant${s}` : `${remaining} character${s} remaining` : lang === 'fr' ? `${over} caractère${s} en trop` : `${over} character${s} over the limit`, true);
+			set(charCountText, remaining >= 0 ? strict_equals(lang, 'fr') ? `${remaining} caractère${s} restant${s}` : `${remaining} character${s} remaining` : strict_equals(lang, 'fr') ? `${over} caractère${s} en trop` : `${over} character${s} over the limit`, true);
 		});
 
 		// Génération des ID pour le aria-describedby
@@ -10176,7 +11145,8 @@
 			set children($$value) {
 				children($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -10206,10 +11176,16 @@
 		true
 	);
 
-	var root$6 = template(`<!> <link rel="stylesheet">`, 1);
+	TextFieldWC[FILENAME] = 'src/sdg/components/TextField/TextFieldWC.svelte';
+
+	var root$5 = add_locations(template(`<!> <link rel="stylesheet">`, 1), TextFieldWC[FILENAME], [[98, 0]]);
 
 	function TextFieldWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
+
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		setContext('webComponentMode', true);
 
 		let invalid = prop($$props, 'invalid', 15, false),
@@ -10218,6 +11194,7 @@
 			description = prop($$props, 'description', 7),
 			required = prop($$props, 'required', 7),
 			maxlength = prop($$props, 'maxlength', 7),
+			size = prop($$props, 'size', 7),
 			maxlengthReached = prop($$props, 'maxlengthReached', 15, false),
 			invalidAtSubmit = prop($$props, 'invalidAtSubmit', 15, false);
 
@@ -10234,6 +11211,11 @@
 			onMountInput(get(input), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => set(value, valueParam, true), (invalidParam) => invalid(invalidParam));
 		});
 
+		user_effect(() => {
+			if (!size()) return;
+			$$props.$$host.setAttribute('size', size());
+		});
+
 		user_effect(() => {
 			if (!get(input)) return;
 
@@ -10258,85 +11240,99 @@
 			}
 		});
 
-		var fragment = root$6();
+		var fragment = root$5();
 		var node = first_child(fragment);
 
-		TextField(node, {
-			get label() {
-				return label();
-			},
-			get description() {
-				return description();
-			},
-			get input() {
-				return get(input);
-			},
-			get required() {
-				return required();
-			},
-			get maxlength() {
-				return maxlength();
-			},
-			get value() {
-				return get(value);
-			},
-			get invalid() {
-				return invalid();
-			},
-			set invalid($$value) {
-				invalid($$value);
-			},
-			get invalidText() {
-				return invalidText();
-			},
-			set invalidText($$value) {
-				invalidText($$value);
-			},
-			get maxlengthReached() {
-				return maxlengthReached();
-			},
-			set maxlengthReached($$value) {
-				maxlengthReached($$value);
-			},
-			get invalidAtSubmit() {
-				return invalidAtSubmit();
-			},
-			set invalidAtSubmit($$value) {
-				invalidAtSubmit($$value);
-			},
-			get labelElement() {
-				return get(labelElement);
-			},
-			set labelElement($$value) {
-				set(labelElement, $$value, true);
-			},
-			get formErrorElement() {
-				return get(formErrorElement);
-			},
-			set formErrorElement($$value) {
-				set(formErrorElement, $$value, true);
-			},
-			get descriptionElement() {
-				return get(descriptionElement);
-			},
-			set descriptionElement($$value) {
-				set(descriptionElement, $$value, true);
-			},
-			get maxlengthElement() {
-				return get(maxlengthElement);
-			},
-			set maxlengthElement($$value) {
-				set(maxlengthElement, $$value, true);
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = comment();
-				var node_1 = first_child(fragment_1);
+		{
+			$$ownership_validator.binding('size', TextField, size);
+			$$ownership_validator.binding('invalid', TextField, invalid);
+			$$ownership_validator.binding('invalidText', TextField, invalidText);
+			$$ownership_validator.binding('maxlengthReached', TextField, maxlengthReached);
+			$$ownership_validator.binding('invalidAtSubmit', TextField, invalidAtSubmit);
 
-				slot(node_1, $$props, 'default', {});
-				append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		});
+			TextField(node, {
+				get label() {
+					return label();
+				},
+				get description() {
+					return description();
+				},
+				get input() {
+					return get(input);
+				},
+				get required() {
+					return required();
+				},
+				get maxlength() {
+					return maxlength();
+				},
+				get value() {
+					return get(value);
+				},
+				get size() {
+					return size();
+				},
+				set size($$value) {
+					size($$value);
+				},
+				get invalid() {
+					return invalid();
+				},
+				set invalid($$value) {
+					invalid($$value);
+				},
+				get invalidText() {
+					return invalidText();
+				},
+				set invalidText($$value) {
+					invalidText($$value);
+				},
+				get maxlengthReached() {
+					return maxlengthReached();
+				},
+				set maxlengthReached($$value) {
+					maxlengthReached($$value);
+				},
+				get invalidAtSubmit() {
+					return invalidAtSubmit();
+				},
+				set invalidAtSubmit($$value) {
+					invalidAtSubmit($$value);
+				},
+				get labelElement() {
+					return get(labelElement);
+				},
+				set labelElement($$value) {
+					set(labelElement, $$value, true);
+				},
+				get formErrorElement() {
+					return get(formErrorElement);
+				},
+				set formErrorElement($$value) {
+					set(formErrorElement, $$value, true);
+				},
+				get descriptionElement() {
+					return get(descriptionElement);
+				},
+				set descriptionElement($$value) {
+					set(descriptionElement, $$value, true);
+				},
+				get maxlengthElement() {
+					return get(maxlengthElement);
+				},
+				set maxlengthElement($$value) {
+					set(maxlengthElement, $$value, true);
+				},
+				children: wrap_snippet(TextFieldWC, ($$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 }
+			});
+		}
 
 		var link = sibling(node, 2);
 
@@ -10386,6 +11382,13 @@
 				maxlength($$value);
 				flushSync();
 			},
+			get size() {
+				return size();
+			},
+			set size($$value) {
+				size($$value);
+				flushSync();
+			},
 			get maxlengthReached() {
 				return maxlengthReached();
 			},
@@ -10399,7 +11402,8 @@
 			set invalidAtSubmit($$value = false) {
 				invalidAtSubmit($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -10416,350 +11420,27 @@
 				reflect: true,
 				type: 'Boolean'
 			},
-			invalidText: { attribute: 'invalid-text', type: 'String' },
-			maxlengthReached: {},
-			invalidAtSubmit: {}
-		},
-		['default'],
-		[],
-		true
-	));
-
-	var root$5 = template(`<button><!> <!></button>`);
-
-	function Button($$anchor, $$props) {
-		push($$props, true);
-
-		let variant = prop($$props, 'variant', 7, "primary"),
-			disabled = prop($$props, 'disabled', 7, false),
-			compact = prop($$props, 'compact', 7, false),
-			rounded = prop($$props, 'rounded', 7, false),
-			label = prop($$props, 'label', 7, ""),
-			icon = prop($$props, 'icon', 7, ""),
-			iconPosition = prop($$props, 'iconPosition', 7, "left"),
-			iconSrc = prop($$props, 'iconSrc', 7, ""),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'variant',
-				'disabled',
-				'compact',
-				'rounded',
-				'label',
-				'icon',
-				'iconPosition',
-				'iconSrc'
-			]);
-
-		let className = state(void 0);
-
-		user_effect(() => {
-			set(
-				className,
-				[
-					"qc-button",
-					`qc-${variant()}`,
-					compact() && "qc-compact",
-					rounded() && "qc-button-rounded"
-				].filter(Boolean).join(" "),
-				true
-			);
-		});
-
-		var button = root$5();
-		let attributes;
-		var node = child(button);
-
-		{
-			var consequent_2 = ($$anchor) => {
-				var fragment = comment();
-				var node_1 = first_child(fragment);
-
-				{
-					var consequent = ($$anchor) => {
-						Icon($$anchor, {
-							get src() {
-								return iconSrc();
-							}
-						});
-					};
-
-					var alternate = ($$anchor, $$elseif) => {
-						{
-							var consequent_1 = ($$anchor) => {
-								Icon($$anchor, {
-									get type() {
-										return icon();
-									}
-								});
-							};
-
-							if_block(
-								$$anchor,
-								($$render) => {
-									if (icon()) $$render(consequent_1);
-								},
-								$$elseif
-							);
-						}
-					};
-
-					if_block(node_1, ($$render) => {
-						if (iconSrc()) $$render(consequent); else $$render(alternate, false);
-					});
-				}
-
-				append($$anchor, fragment);
-			};
-
-			if_block(node, ($$render) => {
-				if (iconPosition() === "left") $$render(consequent_2);
-			});
-		}
-
-		var text = sibling(node);
-		var node_2 = sibling(text);
-
-		{
-			var consequent_5 = ($$anchor) => {
-				var fragment_3 = comment();
-				var node_3 = first_child(fragment_3);
-
-				{
-					var consequent_3 = ($$anchor) => {
-						Icon($$anchor, {
-							get src() {
-								return iconSrc();
-							}
-						});
-					};
-
-					var alternate_1 = ($$anchor, $$elseif) => {
-						{
-							var consequent_4 = ($$anchor) => {
-								Icon($$anchor, {
-									get type() {
-										return icon();
-									}
-								});
-							};
-
-							if_block(
-								$$anchor,
-								($$render) => {
-									if (icon()) $$render(consequent_4);
-								},
-								$$elseif
-							);
-						}
-					};
-
-					if_block(node_3, ($$render) => {
-						if (iconSrc()) $$render(consequent_3); else $$render(alternate_1, false);
-					});
-				}
-
-				append($$anchor, fragment_3);
-			};
-
-			if_block(node_2, ($$render) => {
-				if (icon() && iconPosition() === "right") $$render(consequent_5);
-			});
-		}
-
-		reset(button);
-
-		template_effect(() => {
-			attributes = set_attributes(button, attributes, {
-				class: get(className),
-				disabled: disabled(),
-				...rest
-			});
-
-			set_text(text, ` ${label() ?? ''} `);
-		});
-
-		append($$anchor, button);
-
-		return pop({
-			get variant() {
-				return variant();
-			},
-			set variant($$value = "primary") {
-				variant($$value);
-				flushSync();
-			},
-			get disabled() {
-				return disabled();
-			},
-			set disabled($$value = false) {
-				disabled($$value);
-				flushSync();
-			},
-			get compact() {
-				return compact();
-			},
-			set compact($$value = false) {
-				compact($$value);
-				flushSync();
-			},
-			get rounded() {
-				return rounded();
-			},
-			set rounded($$value = false) {
-				rounded($$value);
-				flushSync();
-			},
-			get label() {
-				return label();
-			},
-			set label($$value = "") {
-				label($$value);
-				flushSync();
-			},
-			get icon() {
-				return icon();
-			},
-			set icon($$value = "") {
-				icon($$value);
-				flushSync();
-			},
-			get iconPosition() {
-				return iconPosition();
-			},
-			set iconPosition($$value = "left") {
-				iconPosition($$value);
-				flushSync();
-			},
-			get iconSrc() {
-				return iconSrc();
-			},
-			set iconSrc($$value = "") {
-				iconSrc($$value);
-				flushSync();
-			}
-		});
-	}
-
-	create_custom_element(
-		Button,
-		{
-			variant: {},
-			disabled: {},
-			compact: {},
-			rounded: {},
-			label: {},
-			icon: {},
-			iconPosition: {},
-			iconSrc: {}
-		},
-		[],
-		[],
-		true
-	);
-
-	function ButtonWC($$anchor, $$props) {
-		push($$props, true);
-
-		let variant = prop($$props, 'variant', 7, "primary"),
-			disabled = prop($$props, 'disabled', 7, false),
-			compact = prop($$props, 'compact', 7, false),
-			rounded = prop($$props, 'rounded', 7, false),
-			label = prop($$props, 'label', 7, ""),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'variant',
-				'disabled',
-				'compact',
-				'rounded',
-				'label'
-			]);
-
-		Button($$anchor, spread_props(
-			{
-				get variant() {
-					return variant();
-				},
-				get disabled() {
-					return disabled();
-				},
-				get compact() {
-					return compact();
-				},
-				get rounded() {
-					return rounded();
-				},
-				get label() {
-					return label();
-				}
-			},
-			() => rest
-		));
-
-		return pop({
-			get variant() {
-				return variant();
-			},
-			set variant($$value = "primary") {
-				variant($$value);
-				flushSync();
-			},
-			get disabled() {
-				return disabled();
-			},
-			set disabled($$value = false) {
-				disabled($$value);
-				flushSync();
-			},
-			get compact() {
-				return compact();
-			},
-			set compact($$value = false) {
-				compact($$value);
-				flushSync();
-			},
-			get rounded() {
-				return rounded();
-			},
-			set rounded($$value = false) {
-				rounded($$value);
-				flushSync();
-			},
-			get label() {
-				return label();
-			},
-			set label($$value = "") {
-				label($$value);
-				flushSync();
-			}
-		});
-	}
-
-	customElements.define('qc-button', create_custom_element(
-		ButtonWC,
-		{
-			variant: { attribute: 'variant', type: 'String' },
-			disabled: { attribute: 'disabled', type: 'Boolean' },
-			compact: { attribute: 'compact', type: 'Boolean' },
-			rounded: { attribute: 'rounded', type: 'Boolean' },
-			label: { attribute: 'label', type: 'String' },
-			icon: { attribute: 'icon', type: 'String' },
-			iconPosition: { attribute: 'icon-position', type: 'String' },
-			iconSrc: { attribute: 'icon-src', type: 'String' }
+			invalidText: { attribute: 'invalid-text', type: 'String' },
+			maxlengthReached: {},
+			invalidAtSubmit: {}
 		},
+		['default'],
 		[],
-		[],
-		false
+		true
 	));
 
-	var root$4 = template(`<label><input type="checkbox" role="switch"> <span><!></span> <span class="qc-switch-slider"></span></label>`);
+	ToggleSwitch[FILENAME] = 'src/sdg/components/ToggleSwitch/ToggleSwitch.svelte';
+
+	var root$4 = add_locations(template(`<label><input type="checkbox" role="switch"> <span><!></span> <span class="qc-switch-slider"></span></label>`), ToggleSwitch[FILENAME], [
+		[
+			17,
+			0,
+			[[20, 4], [28, 4], [33, 4]]
+		]
+	]);
 
 	function ToggleSwitch($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let label = prop($$props, 'label', 7),
@@ -10770,7 +11451,7 @@
 			textAlign = prop($$props, 'textAlign', 7);
 
 		const usedId = "toggle-switch-" + (id() ? id() : Math.random().toString(36));
-		let usedLabelTextAlignment = textAlign()?.toLowerCase() === "end" ? "end" : "start";
+		let usedLabelTextAlignment = strict_equals(textAlign()?.toLowerCase(), "end") ? "end" : "start";
 		var label_1 = root$4();
 
 		set_attribute(label_1, 'for', usedId);
@@ -10784,7 +11465,7 @@
 
 		set_class(span, 1, clsx([
 			"qc-switch-label",
-			usedLabelTextAlignment === "end" && "qc-switch-label-end"
+			strict_equals(usedLabelTextAlignment, "end") && "qc-switch-label-end"
 		]));
 
 		var node = child(span);
@@ -10848,7 +11529,8 @@
 			set textAlign($$value) {
 				textAlign($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -10867,27 +11549,34 @@
 		true
 	);
 
+	ToggleSwitchWC[FILENAME] = 'src/sdg/components/ToggleSwitch/ToggleSwitchWC.svelte';
+
 	function ToggleSwitchWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		let id = prop($$props, 'id', 7),
 			label = prop($$props, 'label', 7),
 			checked = prop($$props, 'checked', 15, false),
 			disabled = prop($$props, 'disabled', 7, false),
 			justified = prop($$props, 'justified', 7, false),
 			textAlign = prop($$props, 'textAlign', 7),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'id',
-				'label',
-				'checked',
-				'disabled',
-				'justified',
-				'textAlign'
-			]);
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'id',
+					'label',
+					'checked',
+					'disabled',
+					'justified',
+					'textAlign'
+				]);
 
 		let parent = state(void 0);
 		let index;
@@ -10925,31 +11614,35 @@
 
 		{
 			var consequent = ($$anchor) => {
-				ToggleSwitch($$anchor, spread_props(
-					{
-						get label() {
-							return label();
-						},
-						get disabled() {
-							return disabled();
-						},
-						get justified() {
-							return justified();
-						},
-						get textAlign() {
-							return textAlign();
-						}
-					},
-					() => rest,
-					{
-						get checked() {
-							return checked();
+				{
+					$$ownership_validator.binding('checked', ToggleSwitch, checked);
+
+					ToggleSwitch($$anchor, spread_props(
+						{
+							get label() {
+								return label();
+							},
+							get disabled() {
+								return disabled();
+							},
+							get justified() {
+								return justified();
+							},
+							get textAlign() {
+								return textAlign();
+							}
 						},
-						set checked($$value) {
-							checked($$value);
+						() => rest,
+						{
+							get checked() {
+								return checked();
+							},
+							set checked($$value) {
+								checked($$value);
+							}
 						}
-					}
-				));
+					));
+				}
 			};
 
 			if_block(node, ($$render) => {
@@ -11001,7 +11694,8 @@
 			set textAlign($$value) {
 				textAlign($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -11032,7 +11726,10 @@
 		false
 	));
 
+	ToggleSwitchGroupWC[FILENAME] = 'src/sdg/components/ChoiceGroup/ToggleSwitchGroupWC.svelte';
+
 	function ToggleSwitchGroupWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let disabled = prop($$props, 'disabled', 15, false),
@@ -11040,17 +11737,19 @@
 			justified = prop($$props, 'justified', 7, false),
 			textAlign = prop($$props, 'textAlign', 7),
 			maxWidth = prop($$props, 'maxWidth', 7, "fit-content"),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'disabled',
-				'items',
-				'justified',
-				'textAlign',
-				'maxWidth'
-			]);
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'disabled',
+					'items',
+					'justified',
+					'textAlign',
+					'maxWidth'
+				]);
 
 		let usedWidth = user_derived(() => {
 			if (maxWidth().match(/^\d+px$/) || maxWidth().match(/^\d*\.?\d*rem$/) || maxWidth().match(/^\d*\.?\d*em$/) || maxWidth().match(/^\d*\.?\d*%$/)) {
@@ -11069,11 +11768,13 @@
 			},
 			() => rest,
 			{
-				children: ($$anchor, $$slotProps) => {
+				children: wrap_snippet(ToggleSwitchGroupWC, ($$anchor, $$slotProps) => {
 					var fragment_1 = comment();
 					var node = first_child(fragment_1);
 
 					each(node, 17, items, index, ($$anchor, item, $$index) => {
+						validate_binding('bind:checked={item.checked}', () => get(item), () => 'checked', 49, 12);
+
 						const expression = user_derived(() => get(item).disabled ?? disabled());
 						const expression_1 = user_derived(() => justified() ?? get(item).justified);
 						const expression_2 = user_derived(() => textAlign() ?? get(item).textAlign);
@@ -11104,7 +11805,7 @@
 					});
 
 					append($$anchor, fragment_1);
-				},
+				}),
 				$$slots: { default: true }
 			}
 		));
@@ -11144,7 +11845,8 @@
 			set maxWidth($$value = "fit-content") {
 				maxWidth($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -11163,12 +11865,15 @@
 		false
 	));
 
+	DropdownListItemsSingle[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte';
+
 	var on_click$1 = (event, handleMouseUp, item) => handleMouseUp(event, get(item));
-	var root_3$1 = template(`<span class="qc-sr-only"><!></span>`);
-	var root_2$3 = template(`<li tabindex="0" role="option"><!></li>`);
-	var root_1$2 = template(`<ul></ul>`);
+	var root_3$1 = add_locations(template(`<span class="qc-sr-only"><!></span>`), DropdownListItemsSingle[FILENAME], [[129, 20]]);
+	var root_2$3 = add_locations(template(`<li tabindex="0" role="option"><!></li>`), DropdownListItemsSingle[FILENAME], [[113, 12]]);
+	var root_1$2 = add_locations(template(`<ul></ul>`), DropdownListItemsSingle[FILENAME], [[111, 4]]);
 
 	function DropdownListItemsSingle($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		const selectedElementCLass = "qc-dropdown-list-single-selected";
@@ -11197,7 +11902,7 @@
 
 		function focusOnFirstMatchingElement(passedValue) {
 			if (get(displayedItemsElements) && get(displayedItemsElements).length > 0) {
-				const foundElement = get(displayedItemsElements).find((el) => el.dataset.itemValue.toString() === passedValue.toString());
+				const foundElement = get(displayedItemsElements).find((el) => strict_equals(el.dataset.itemValue.toString(), passedValue.toString()));
 
 				if (foundElement) {
 					foundElement.focus();
@@ -11209,8 +11914,8 @@
 			event.preventDefault();
 
 			if (!item.disabled) {
-				items().forEach((item) => item.checked = false);
-				items().find((option) => option.value === item.value).checked = true;
+				items().forEach((item) => assign(item, 'checked', false, 'src/​sdg/​components/​DropdownList/​DropdownListItems/​DropdownListItemsSingle/​DropdownListItemsSingle.svelte:45:34'));
+				items().find((option) => strict_equals(option.value, item.value)).checked = true;
 				selectionCallback()();
 			}
 		}
@@ -11220,7 +11925,7 @@
 		}
 
 		function handleComboKey(event, index, item) {
-			if (event.key === "ArrowDown") {
+			if (strict_equals(event.key, "ArrowDown")) {
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -11229,7 +11934,7 @@
 				}
 			}
 
-			if (event.key === "ArrowUp") {
+			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -11240,7 +11945,7 @@
 				}
 			}
 
-			if (event.key === "Enter" || event.key === " ") {
+			if (strict_equals(event.key, "Enter") || strict_equals(event.key, " ")) {
 				handleSelection(event, item);
 			}
 
@@ -11260,7 +11965,7 @@
 		}
 
 		function canExit(event, index) {
-			return event.key === "Escape" || !event.shiftKey && event.key === "Tab" && index === displayedItems().length - 1;
+			return strict_equals(event.key, "Escape") || !event.shiftKey && strict_equals(event.key, "Tab") && strict_equals(index, displayedItems().length - 1);
 		}
 
 		function itemsHaveIds() {
@@ -11282,6 +11987,8 @@
 			var consequent_1 = ($$anchor) => {
 				var ul = root_1$2();
 
+				validate_each_keys(displayedItems, (item) => item.id);
+
 				each(ul, 23, displayedItems, (item) => item.id, ($$anchor, item, index) => {
 					var li = root_2$3();
 
@@ -11314,6 +12021,7 @@
 					}
 
 					reset(li);
+					validate_binding('bind:this={displayedItemsElements[index]}', () => get(displayedItemsElements), () => get(index));
 					bind_this(li, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 					template_effect(() => {
@@ -11344,9 +12052,15 @@
 		append($$anchor, fragment);
 
 		return pop({
-			focusOnFirstElement,
-			focusOnLastElement,
-			focusOnFirstMatchingElement,
+			get focusOnFirstElement() {
+				return focusOnFirstElement;
+			},
+			get focusOnLastElement() {
+				return focusOnLastElement;
+			},
+			get focusOnFirstMatchingElement() {
+				return focusOnFirstMatchingElement;
+			},
 			get items() {
 				return items();
 			},
@@ -11395,7 +12109,8 @@
 			set handlePrintableCharacter($$value = () => {}) {
 				handlePrintableCharacter($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -11421,17 +12136,32 @@
 		true
 	);
 
+	DropdownListItemsMultiple[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte';
+
 	function handleChange(_, selectionCallback) {
 		selectionCallback()();
 	}
 
 	var on_click = (e, handleLiClick, item) => handleLiClick(e, get(item));
-	var root_2$2 = template(`<li><label class="qc-choicefield-label" compact=""><input type="checkbox" class="qc-choicefield qc-compact"> <span> </span></label></li>`);
-	var root_1$1 = template(`<ul></ul>`);
+
+	var root_2$2 = add_locations(template(`<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(template(`<ul></ul>`), DropdownListItemsMultiple[FILENAME], [[147, 4]]);
 
 	function DropdownListItemsMultiple($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		let displayedItems = prop($$props, 'displayedItems', 7),
 			handleExit = prop($$props, 'handleExit', 7, () => {}),
 			selectionCallback = prop($$props, 'selectionCallback', 7, () => {}),
@@ -11476,7 +12206,7 @@
 		}
 
 		function handleComboKey(event, index) {
-			if (event.key === "ArrowDown") {
+			if (strict_equals(event.key, "ArrowDown")) {
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -11489,7 +12219,7 @@
 				}
 			}
 
-			if (event.key === "ArrowUp") {
+			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -11504,13 +12234,13 @@
 				}
 			}
 
-			if (event.key === "Enter") {
+			if (strict_equals(event.key, "Enter")) {
 				event.preventDefault();
 				event.stopPropagation();
 
 				if (displayedItems().length > 0 && !displayedItems()[index].disabled) {
 					event.target.checked = !event.target.checked;
-					displayedItems()[index].checked = event.target.checked;
+					$$ownership_validator.mutation('displayedItems', ['displayedItems', index, 'checked'], displayedItems()[index].checked = event.target.checked, 86, 16);
 				}
 			}
 
@@ -11530,10 +12260,10 @@
 		}
 
 		function handleLiKeyDown(event, index) {
-			if (event.target.tagName !== "INPUT") {
+			if (strict_equals(event.target.tagName, "INPUT", false)) {
 				handleKeyDown(event, index);
 
-				if (event.key !== "Tab") {
+				if (strict_equals(event.key, "Tab", false)) {
 					event.preventDefault();
 					event.stopPropagation();
 				}
@@ -11541,7 +12271,7 @@
 		}
 
 		function handleLiClick(event, item) {
-			if (event.target.tagName !== "INPUT") {
+			if (strict_equals(event.target.tagName, "INPUT", false)) {
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -11552,7 +12282,7 @@
 		}
 
 		function canExit(event, index) {
-			return event.key === "Escape" || !event.shiftKey && event.key === "Tab" && index === displayedItems().length - 1;
+			return strict_equals(event.key, "Escape") || !event.shiftKey && strict_equals(event.key, "Tab") && strict_equals(index, displayedItems().length - 1);
 		}
 
 		function itemsHaveIds() {
@@ -11574,6 +12304,8 @@
 			var consequent = ($$anchor) => {
 				var ul = root_1$1();
 
+				validate_each_keys(displayedItems, (item) => item.id);
+
 				each(ul, 23, displayedItems, (item) => item.id, ($$anchor, item, index) => {
 					var li = root_2$2();
 
@@ -11590,6 +12322,8 @@
 					set_attribute(input, 'name', name);
 					input.__change = [handleChange, selectionCallback];
 					input.__keydown = (e) => handleKeyDown(e, get(index));
+					validate_binding('bind:checked={item.checked}', () => get(item), () => 'checked');
+					validate_binding('bind:this={displayedItemsElements[index]}', () => get(displayedItemsElements), () => get(index));
 					bind_this(input, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 					var span = sibling(input, 2);
@@ -11633,9 +12367,15 @@
 		append($$anchor, fragment);
 
 		return pop({
-			focusOnFirstElement,
-			focusOnLastElement,
-			focusOnFirstMatchingElement,
+			get focusOnFirstElement() {
+				return focusOnFirstElement;
+			},
+			get focusOnLastElement() {
+				return focusOnLastElement;
+			},
+			get focusOnFirstMatchingElement() {
+				return focusOnFirstMatchingElement;
+			},
 			get displayedItems() {
 				return displayedItems();
 			},
@@ -11670,7 +12410,8 @@
 			set handlePrintableCharacter($$value = () => {}) {
 				handlePrintableCharacter($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -11694,10 +12435,13 @@
 		true
 	);
 
-	var root_4 = template(`<span class="qc-dropdown-list-no-options"><!></span>`);
-	var root$3 = template(`<div class="qc-dropdown-list-items" tabindex="-1"><!> <div class="qc-dropdown-list-no-options-container" role="status"><!></div></div>`);
+	DropdownListItems[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte';
+
+	var root_4 = add_locations(template(`<span class="qc-dropdown-list-no-options"><!></span>`), DropdownListItems[FILENAME], [[100, 16]]);
+	var root$3 = add_locations(template(`<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]]]]);
 
 	function DropdownListItems($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let id = prop($$props, 'id', 7),
@@ -11714,9 +12458,6 @@
 			handlePrintableCharacter = prop($$props, 'handlePrintableCharacter', 7, () => {}),
 			placeholder = prop($$props, 'placeholder', 7);
 
-		const precentRootFontSize = 62.5,
-			remRatio = 0.16;
-
 		let itemsComponent = state(void 0);
 
 		let usedHeight = user_derived(() => {
@@ -11856,15 +12597,21 @@
 
 		template_effect(() => {
 			set_attribute(div, 'id', id());
-			set_style(div, `--dropdown-items-height: ${get(usedHeight) / (remRatio * precentRootFontSize)}rem;`);
+			set_style(div, `--dropdown-items-height: ${get(usedHeight) ?? ''};`);
 		});
 
 		append($$anchor, div);
 
 		return pop({
-			focus,
-			focusOnLastElement,
-			focusOnFirstMatchingElement,
+			get focus() {
+				return focus;
+			},
+			get focusOnLastElement() {
+				return focusOnLastElement;
+			},
+			get focusOnFirstMatchingElement() {
+				return focusOnFirstMatchingElement;
+			},
 			get id() {
 				return id();
 			},
@@ -11955,7 +12702,8 @@
 			set placeholder($$value) {
 				placeholder($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -11985,11 +12733,14 @@
 		true
 	);
 
-	var root_1 = template(`<span class="qc-dropdown-choice"><!></span>`);
-	var root_2$1 = template(`<span class="qc-dropdown-placeholder"><!></span>`);
-	var root$2 = template(`<button><!> <span><!></span></button>`);
+	DropdownListButton[FILENAME] = 'src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte';
+
+	var root_1 = add_locations(template(`<span class="qc-dropdown-choice"><!></span>`), DropdownListButton[FILENAME], [[29, 8]]);
+	var root_2$1 = add_locations(template(`<span class="qc-dropdown-placeholder"><!></span>`), DropdownListButton[FILENAME], [[31, 8]]);
+	var root$2 = add_locations(template(`<button><!> <span><!></span></button>`), DropdownListButton[FILENAME], [[19, 0, [[34, 4]]]]);
 
 	function DropdownListButton($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
 		let inputId = prop($$props, 'inputId', 7),
@@ -11997,17 +12748,19 @@
 			disabled = prop($$props, 'disabled', 7),
 			selectedOptionsText = prop($$props, 'selectedOptionsText', 7, ""),
 			placeholder = prop($$props, 'placeholder', 7),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'inputId',
-				'expanded',
-				'disabled',
-				'selectedOptionsText',
-				'placeholder'
-			]);
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'inputId',
+					'expanded',
+					'disabled',
+					'selectedOptionsText',
+					'placeholder'
+				]);
 
 		let button;
 
@@ -12078,7 +12831,9 @@
 		append($$anchor, button_1);
 
 		return pop({
-			focus,
+			get focus() {
+				return focus;
+			},
 			get inputId() {
 				return inputId();
 			},
@@ -12113,7 +12868,8 @@
 			set placeholder($$value) {
 				placeholder($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}
 
@@ -12131,13 +12887,36 @@
 		true
 	);
 
-	var root_2 = template(`<div class="qc-dropdown-list-search"><!></div>`);
-	var root_3 = template(`<span> </span>`);
-	var root$1 = template(`<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] = 'src/sdg/components/DropdownList/DropdownList.svelte';
+
+	var root_2 = add_locations(template(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[334, 20]]);
+	var root_3 = add_locations(template(`<span> </span>`), DropdownList[FILENAME], [[376, 24]]);
+
+	var root$1 = add_locations(template(`<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]]]]
+						]
+					]
+				]
+			]
+		]
+	]);
 
 	function DropdownList($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
 		const lang = Utils.getPageLanguage();
 
 		let id = prop($$props, 'id', 23, () => Math.random().toString(36).substring(2, 15)),
@@ -12147,7 +12926,7 @@
 			items = prop($$props, 'items', 23, () => []),
 			value = prop($$props, 'value', 31, () => proxy([])),
 			placeholder = prop($$props, 'placeholder', 7),
-			noOptionsMessage = prop($$props, 'noOptionsMessage', 7, lang === "fr" ? "Aucun élément" : "No item"),
+			noOptionsMessage = prop($$props, 'noOptionsMessage', 23, () => strict_equals(lang, "fr") ? "Aucun élément" : "No item"),
 			enableSearch = prop($$props, 'enableSearch', 7, false),
 			required = prop($$props, 'required', 7, false),
 			disabled = prop($$props, 'disabled', 7, false),
@@ -12157,10 +12936,9 @@
 			multiple = prop($$props, 'multiple', 7, false),
 			rootElement = prop($$props, 'rootElement', 15),
 			errorElement = prop($$props, 'errorElement', 15),
-			webComponentMode = prop($$props, 'webComponentMode', 7, false),
-			webComponentParentRow = prop($$props, 'webComponentParentRow', 7);
+			webComponentMode = prop($$props, 'webComponentMode', 7, false);
 
-		const defaultPlaceholder = lang === "fr" ? "Faire une sélection" : "Select an option",
+		const defaultPlaceholder = strict_equals(lang, "fr") ? "Faire une sélection" : "Select an option",
 			inputId = `${id()}-input`,
 			popupId = `${id()}-popup`,
 			itemsId = `${id()}-items`,
@@ -12176,7 +12954,7 @@
 			selectedItems = user_derived(() => items().filter((item) => item.checked) ?? []),
 			selectedOptionsText = user_derived(() => {
 				if (get(selectedItems).length >= 3) {
-					if (lang === "fr") {
+					if (strict_equals(lang, "fr")) {
 						return `${get(selectedItems).length} options sélectionnées`;
 					}
 
@@ -12207,19 +12985,19 @@
 				};
 			})),
 			widthClass = user_derived(() => {
-				const keyword = webComponentMode() ? "container" : "root";
+				webComponentMode() ? "container" : "root";
 
 				if (availableWidths.includes(width())) {
-					return `qc-dropdown-list-${keyword}-${width()}`;
+					return `qc-dropdown-list-${width()}`;
 				}
 
-				return `qc-dropdown-list-${keyword}-md`;
+				return `qc-dropdown-list-md`;
 			}),
 			srItemsCountText = user_derived(() => {
 				const s = get(displayedItems).length > 1 ? "s" : "";
 
 				if (get(displayedItems).length > 0) {
-					return lang === "fr" ? `${get(displayedItems).length} résultat${s} disponible${s}. Utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.` : `${get(displayedItems).length} result${s} available. Use up and down arrow keys to navigate through the list.`;
+					return strict_equals(lang, "fr") ? `${get(displayedItems).length} résultat${s} disponible${s}. Utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.` : `${get(displayedItems).length} result${s} available. Use up and down arrow keys to navigate through the list.`;
 				}
 
 				return "";
@@ -12250,27 +13028,27 @@
 			// 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(() => {
-				if (event.key === "Tab" && !Utils.componentIsActive(get(instance))) {
+				if (strict_equals(event.key, "Tab") && !Utils.componentIsActive(get(instance))) {
 					set(expanded, false);
 				}
 			}).catch(console.error);
 		}
 
 		function handleEscape(event) {
-			if (event.key === "Escape") {
+			if (strict_equals(event.key, "Escape")) {
 				set(expanded, false);
 			}
 		}
 
 		function handleArrowUp(event, targetComponent) {
-			if (event.key === "ArrowUp" && targetComponent) {
+			if (strict_equals(event.key, "ArrowUp") && targetComponent) {
 				event.preventDefault();
 				targetComponent.focus();
 			}
 		}
 
 		function handleArrowDown(event, targetComponent) {
-			if (event.key === "ArrowDown" && targetComponent) {
+			if (strict_equals(event.key, "ArrowDown") && targetComponent) {
 				event.preventDefault();
 				set(expanded, true);
 				targetComponent.focus();
@@ -12281,7 +13059,7 @@
 			handleEscape(event);
 			handleTab(event);
 
-			if (event.key === "ArrowDown") {
+			if (strict_equals(event.key, "ArrowDown")) {
 				event.preventDefault();
 
 				if (get(expanded)) {
@@ -12292,7 +13070,7 @@
 				}
 			}
 
-			if (event.key === "ArrowUp") {
+			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 
 				if (get(expanded)) {
@@ -12325,7 +13103,7 @@
 			set(expanded, false);
 			set(hiddenSearchText, "");
 
-			if (key === "Escape" && get(button)) {
+			if (strict_equals(key, "Escape") && get(button)) {
 				get(button).focus();
 			}
 		}
@@ -12347,7 +13125,7 @@
 		});
 
 		user_effect(() => {
-			if (get(previousValue)?.toString() !== value()?.toString()) {
+			if (strict_equals(get(previousValue)?.toString(), value()?.toString(), false)) {
 				invalid(false);
 			}
 		});
@@ -12362,7 +13140,7 @@
 		user_effect(() => {
 			const tempValue = get(selectedItems)?.map((item) => item.value);
 
-			if (tempValue?.toString() !== "") {
+			if (strict_equals(tempValue?.toString(), "", false)) {
 				value(tempValue);
 			} else {
 				value([]);
@@ -12389,11 +13167,11 @@
 			const optionWithEmptyValue = findOptionWithEmptyValue();
 
 			if (!optionWithEmptyValue) return;
-			placeholder(optionWithEmptyValue.label !== "" ? optionWithEmptyValue.label : defaultPlaceholder);
+			placeholder(strict_equals(optionWithEmptyValue.label, "", false) ? optionWithEmptyValue.label : defaultPlaceholder);
 		});
 
 		function findOptionWithEmptyValue() {
-			return items()?.find((item) => item.value === "" || item.value === null || item.value === undefined);
+			return items()?.find((item) => strict_equals(item.value, "") || strict_equals(item.value, null) || strict_equals(item.value, undefined));
 		}
 
 		var div = root$1();
@@ -12402,6 +13180,9 @@
 		event('keydown', $document.body, handleTab);
 
 		var div_1 = child(div);
+
+		set_class(div_1, 1, clsx(["qc-dropdown-list-container"]));
+
 		var node = child(div_1);
 
 		{
@@ -12498,7 +13279,7 @@
 							handleArrowDown(e, get(dropdownItems));
 							handleArrowUp(e, get(button));
 
-							if (e.key === "Enter") {
+							if (strict_equals(e.key, "Enter")) {
 								e.preventDefault();
 							}
 						},
@@ -12524,45 +13305,49 @@
 
 		var node_4 = sibling(node_2, 2);
 
-		bind_this(
-			DropdownListItems(node_4, {
-				id: itemsId,
-				get enableSearch() {
-					return enableSearch();
-				},
-				get placeholder() {
-					return placeholder();
-				},
-				get multiple() {
-					return multiple();
-				},
-				get items() {
-					return items();
-				},
-				get displayedItems() {
-					return get(displayedItems);
-				},
-				get noOptionsMessage() {
-					return noOptionsMessage();
-				},
-				selectionCallbackSingle: () => {
-					closeDropdown("");
-					get(button)?.focus();
-				},
-				handleExitSingle: (key) => closeDropdown(key),
-				handleExitMultiple: (key) => closeDropdown(key),
-				focusOnOuterElement: () => enableSearch() ? get(searchInput)?.focus() : get(button)?.focus(),
-				handlePrintableCharacter,
-				get value() {
-					return value();
-				},
-				set value($$value) {
-					value($$value);
-				}
-			}),
-			($$value) => set(dropdownItems, $$value, true),
-			() => get(dropdownItems)
-		);
+		{
+			$$ownership_validator.binding('value', DropdownListItems, value);
+
+			bind_this(
+				DropdownListItems(node_4, {
+					id: itemsId,
+					get enableSearch() {
+						return enableSearch();
+					},
+					get placeholder() {
+						return placeholder();
+					},
+					get multiple() {
+						return multiple();
+					},
+					get items() {
+						return items();
+					},
+					get displayedItems() {
+						return get(displayedItems);
+					},
+					get noOptionsMessage() {
+						return noOptionsMessage();
+					},
+					selectionCallbackSingle: () => {
+						closeDropdown("");
+						get(button)?.focus();
+					},
+					handleExitSingle: (key) => closeDropdown(key),
+					handleExitMultiple: (key) => closeDropdown(key),
+					focusOnOuterElement: () => enableSearch() ? get(searchInput)?.focus() : get(button)?.focus(),
+					handlePrintableCharacter,
+					get value() {
+						return value();
+					},
+					set value($$value) {
+						value($$value);
+					}
+				}),
+				($$value) => set(dropdownItems, $$value, true),
+				() => get(dropdownItems)
+			);
+		}
 
 		var div_5 = sibling(node_4, 2);
 		var node_5 = child(div_5);
@@ -12585,43 +13370,41 @@
 		var node_6 = sibling(div_1, 2);
 		const expression_1 = user_derived(() => label() ?? ariaLabel());
 
-		FormError(node_6, {
-			id: errorId,
-			get invalid() {
-				return invalid();
-			},
-			get invalidText() {
-				return invalidText();
-			},
-			extraClasses: ["qc-xs-mt"],
-			get label() {
-				return get(expression_1);
-			},
-			get rootElement() {
-				return errorElement();
-			},
-			set rootElement($$value) {
-				errorElement($$value);
-			}
-		});
+		{
+			$$ownership_validator.binding('errorElement', FormError, errorElement);
+
+			FormError(node_6, {
+				id: errorId,
+				get invalid() {
+					return invalid();
+				},
+				get invalidText() {
+					return invalidText();
+				},
+				extraClasses: ["qc-xs-mt"],
+				get label() {
+					return get(expression_1);
+				},
+				get rootElement() {
+					return errorElement();
+				},
+				set rootElement($$value) {
+					errorElement($$value);
+				}
+			});
+		}
 
 		reset(div);
 		bind_this(div, ($$value) => rootElement($$value), () => rootElement());
 
 		template_effect(() => {
 			set_class(div, 1, clsx([
-				"qc-dropdown-list-root",
-				!webComponentMode() && get(widthClass),
-				!(get(parentRow) || webComponentParentRow()) && "qc-dropdown-list-margin"
-			]));
-
-			set_class(div_1, 1, clsx([
-				"qc-dropdown-list-container",
-				webComponentMode() && get(widthClass)
+				!get(parentRow) && !webComponentMode() && "qc-select"
 			]));
 
 			set_class(div_2, 1, clsx([
 				`qc-dropdown-list`,
+				get(widthClass),
 				invalid() && "qc-dropdown-list-invalid"
 			]));
 
@@ -12761,13 +13544,7 @@
 				webComponentMode($$value);
 				flushSync();
 			},
-			get webComponentParentRow() {
-				return webComponentParentRow();
-			},
-			set webComponentParentRow($$value) {
-				webComponentParentRow($$value);
-				flushSync();
-			}
+			...legacy_api()
 		});
 	}
 
@@ -12791,19 +13568,23 @@
 			multiple: {},
 			rootElement: {},
 			errorElement: {},
-			webComponentMode: {},
-			webComponentParentRow: {}
+			webComponentMode: {}
 		},
 		[],
 		[],
 		true
 	);
 
-	var root = template(`<div hidden><!></div> <!> <link rel="stylesheet">`, 1);
+	SelectWC[FILENAME] = 'src/sdg/components/DropdownList/SelectWC.svelte';
+
+	var root = add_locations(template(`<div hidden><!></div> <!> <link rel="stylesheet">`, 1), SelectWC[FILENAME], [[119, 0], [139, 0]]);
 
 	function SelectWC($$anchor, $$props) {
+		check_target(new.target);
 		push($$props, true);
 
+		var $$ownership_validator = create_ownership_validator($$props);
+
 		let invalid = prop($$props, 'invalid', 15, false),
 			value = prop($$props, 'value', 31, () => proxy([])),
 			multiple = prop($$props, 'multiple', 7),
@@ -12812,37 +13593,39 @@
 			label = prop($$props, 'label', 7),
 			placeholder = prop($$props, 'placeholder', 7),
 			width = prop($$props, 'width', 7),
-			rest = rest_props($$props, [
-				'$$slots',
-				'$$events',
-				'$$legacy',
-				'$$host',
-				'invalid',
-				'value',
-				'multiple',
-				'disabled',
-				'required',
-				'label',
-				'placeholder',
-				'width'
-			]);
-
-		const availableWidths = ["xs", "sm", "md", "lg", "xl"];
+			rest = rest_props(
+				$$props,
+				[
+					'$$slots',
+					'$$events',
+					'$$legacy',
+					'$$host',
+					'invalid',
+					'value',
+					'multiple',
+					'disabled',
+					'required',
+					'label',
+					'placeholder',
+					'width'
+				]);
+
 		let selectElement = state(void 0);
 		let items = state(void 0);
 		let labelElement = state(void 0);
-		let observer;
+		let observer = new MutationObserver(setupItemsList);
+
+		let observerOptions = {
+			childList: true,
+			attributes: true,
+			subtree: true,
+			attributeFilter: ["label", "value", "disabled", "selected"]
+		};
+
 		let instance = state(void 0);
 		let errorElement = state(void 0);
 		let parentRow = user_derived(() => $$props.$$host.closest(".qc-formfield-row"));
-
-		let widthClass = user_derived(() => {
-			if (availableWidths.includes(width())) {
-				return `qc-dropdown-list-root-${width()}`;
-			}
-
-			return `qc-dropdown-list-root-md`;
-		});
+		let internalChange = false;
 
 		onMount(() => {
 			set(selectElement, $$props.$$host.querySelector("select"), true);
@@ -12855,40 +13638,46 @@
 			if (get(selectElement)) {
 				multiple(get(selectElement).multiple);
 				disabled(get(selectElement).disabled);
+				get(selectElement).addEventListener("change", handleSelectChange);
+				observer.observe(get(selectElement), observerOptions);
 			}
 
 			setupItemsList();
-			setupObserver();
+			$$props.$$host.classList.add("qc-select");
 		});
 
 		onDestroy(() => {
 			observer?.disconnect();
+			get(selectElement).removeEventListener("change", handleSelectChange);
 		});
 
 		user_effect(() => {
-			if (get(selectElement) && get(selectElement).options && get(selectElement).options.length > 0 && value() && value().length > 0) {
-				for (const option of get(selectElement).options) {
-					if (value().includes(option.value)) {
-						option.setAttribute('selected', '');
-						option.selected = true;
-					} else {
-						option.removeAttribute('selected');
-						option.selected = false;
-					}
+			if (!get(selectElement)) return;
+			if (!get(selectElement).options) return;
+			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;
 				}
 			}
-		});
 
-		user_effect(() => {
-			if (get(parentRow) && get(errorElement)) {
-				get(parentRow).appendChild(get(errorElement));
+			if (newOptionSelected) {
+				get(selectElement).dispatchEvent(new Event('change'));
 			}
+
+			tick().then(() => internalChange = false);
 		});
 
 		user_effect(() => {
-			if (get(widthClass)) {
-				$$props.$$host.classList.add("qc-dropdown-list-root");
-				$$props.$$host.classList.add(get(widthClass));
+			if (get(parentRow) && get(errorElement)) {
+				get(parentRow).appendChild(get(errorElement));
 			}
 		});
 
@@ -12911,20 +13700,9 @@
 			}
 		}
 
-		function setupObserver() {
-			if (get(selectElement)) {
-				if (observer) {
-					return;
-				}
-
-				observer = new MutationObserver(setupItemsList);
-
-				observer.observe(get(selectElement), {
-					childList: true,
-					attributes: true,
-					attributeFilter: ["label", "value", "disabled", "selected"]
-				});
-			}
+		function handleSelectChange() {
+			if (internalChange) return;
+			setupItemsList();
 		}
 
 		var fragment = root();
@@ -12937,65 +13715,67 @@
 		var node_1 = sibling(div, 2);
 		const expression = user_derived(() => get(selectElement)?.getAttribute("aria-label"));
 
-		DropdownList(node_1, spread_props(
-			{
-				get label() {
-					return label();
-				},
-				get ariaLabel() {
-					return get(expression);
-				},
-				get items() {
-					return get(items);
-				},
-				get placeholder() {
-					return placeholder();
-				},
-				get width() {
-					return width();
-				},
-				webComponentMode: true,
-				get webComponentParentRow() {
-					return get(parentRow);
-				},
-				get multiple() {
-					return multiple();
-				},
-				get disabled() {
-					return disabled();
-				},
-				get required() {
-					return required();
-				}
-			},
-			() => rest,
-			{
-				get value() {
-					return value();
-				},
-				set value($$value) {
-					value($$value);
-				},
-				get errorElement() {
-					return get(errorElement);
-				},
-				set errorElement($$value) {
-					set(errorElement, $$value, true);
-				},
-				get invalid() {
-					return invalid();
-				},
-				set invalid($$value) {
-					invalid($$value);
-				},
-				get rootElement() {
-					return get(instance);
+		{
+			$$ownership_validator.binding('value', DropdownList, value);
+			$$ownership_validator.binding('invalid', DropdownList, invalid);
+
+			DropdownList(node_1, spread_props(
+				{
+					get label() {
+						return label();
+					},
+					get ariaLabel() {
+						return get(expression);
+					},
+					get items() {
+						return get(items);
+					},
+					get placeholder() {
+						return placeholder();
+					},
+					get width() {
+						return width();
+					},
+					webComponentMode: true,
+					get multiple() {
+						return multiple();
+					},
+					get disabled() {
+						return disabled();
+					},
+					get required() {
+						return required();
+					}
 				},
-				set rootElement($$value) {
-					set(instance, $$value, true);
+				() => rest,
+				{
+					get value() {
+						return value();
+					},
+					set value($$value) {
+						value($$value);
+					},
+					get errorElement() {
+						return get(errorElement);
+					},
+					set errorElement($$value) {
+						set(errorElement, $$value, true);
+					},
+					get invalid() {
+						return invalid();
+					},
+					set invalid($$value) {
+						invalid($$value);
+					},
+					get rootElement() {
+						return get(instance);
+					},
+					set rootElement($$value) {
+						set(instance, $$value, true);
+					}
 				}
-			}
-		));
+			));
+		}
 
 		var link = sibling(node_1, 2);
 
@@ -13058,7 +13838,8 @@
 			set width($$value) {
 				width($$value);
 				flushSync();
-			}
+			},
+			...legacy_api()
 		});
 	}