@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/QuerySelect.svelte

@@ -1,413 +1,368 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	interface QuerySelectPropsAsObjectCommonProps<V extends object, VP extends ValueProp<V>> {
-		labelProp: NonNullableKey<V>;
-		valueProp: VP;
-
-		query: (value: string) => Promise<Array<V>>;
-		onchange: (newValue: V | null) => void;
-
-		options?: Array<V>;
-		name?: string;
-		disabled?: boolean;
-		width?: string;
-		height?: string;
-		label?: string;
-		required?: boolean;
-		invalid?: boolean;
-		onfocus?: (target: HTMLInputElement) => void;
-		inputId?: string;
-		focusOnLoad?: boolean;
-		clearable?: boolean;
-		isValid?: (item: V | null) => boolean;
-	}
-
-	export interface QuerySelectPropsAsObject<
-		V extends object,
-		VP extends ValueProp<V>,
-	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-		valueAsObject: true;
-		value: V | null;
-	}
-
-	export interface QuerySelectPropsAsPrimitive<
-		V extends object,
-		VP extends ValueProp<V>,
-	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-		valueAsObject: false;
-		value: V[VP] | null;
-	}
-
-	export type QuerySelectProps<V extends object, VP extends ValueProp<V>> =
-		| QuerySelectPropsAsObject<V, VP>
-		| QuerySelectPropsAsPrimitive<V, VP>;
-</script>
-
-<!-- #region Script -->
-<script
-	lang="ts"
-	generics="V extends object, VP extends ValueProp<V>"
->
-	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
-
-	import { dev } from '$app/environment';
-	import { devCatch, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Svelecte from 'svelecte';
-	import { getContext, onMount, type Snippet, tick, untrack } from 'svelte';
-	import Action from './Action.svelte';
-
-	let {
-		label,
-		labelProp,
-		valueProp,
-		clearable = false,
-		required = false,
-		invalid = false,
-		valueAsObject,
-		name = 'Item',
-		disabled,
-		query,
-		width,
-		height,
-		focusOnLoad = false,
-		inputId = generateShortUUID(),
-		value: selectedValue,
-		options = $bindable<Array<V>>([]),
-		isValid,
-		onchange,
-		onfocus,
-	}: QuerySelectProps<V, VP> = $props();
-
-	export function forceQuery() {
-		clearTimeout(timeoutHandler);
-
-		const input = document.getElementById(inputId);
-		const searchValue = (input as HTMLInputElement).value;
-
-		const currentHandler = (timeoutHandler = setTimeout(() => {
-			tryQuery(currentHandler, searchValue).catch(devCatch);
-		}, 500) as unknown as number);
-		tryQuery(currentHandler, searchValue).catch(devCatch);
-	}
-
-	let ref: Svelecte | undefined = $state();
-	let hasAutoFocused = $state(false);
-	let loadingDiv: HTMLDivElement | undefined = $state();
-	let isLoading = $state(false);
-	let hasRegisteredListeners = $state(false);
-
-	function isObjectValue(value: unknown): value is V {
-		return value !== null && typeof value == 'object' && labelProp in value && valueProp in value;
-	}
-
-	$effect.pre(() => {
-		void selectedValue;
-		untrack(() => {
-			if (selectedValue != null) {
-				if (valueAsObject) {
-					if (isObjectValue(selectedValue)) {
-						if (!options.some((opt: V) => opt[valueProp] === selectedValue[valueProp])) {
-							options.push(selectedValue);
-						}
-					} else if (dev) {
-						console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
-						return;
-					}
-				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
-					options.push({
-						//best-effort solution. Not a good one
-						// eslint-disable-next-line @typescript-eslint/no-base-to-string
-						[labelProp]: selectedValue.toString(),
-						[valueProp]: selectedValue,
-					} as V);
-				}
-			}
-		});
-	});
-
-	let isInvalid = $derived(
-		(required && !selectedValue) ||
-			invalid ||
-			isValid?.(
-				valueAsObject
-					? (selectedValue as V)
-					: (options.find((a) => a[valueProp] === selectedValue) ?? null)
-			) === false
-	);
-
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	function forceShowDropdown(e: HTMLInputElement) {
-		if (focusOnLoad && !hasAutoFocused) {
-			hasAutoFocused = true;
-
-			const input = e;
-
-			input.click();
-
-			// HACK. the default selectOnTab functionality selects the highlighted element,
-			// this selects the first element on the list
-			// please decide which one we'll be using and be consistent
-			// input.addEventListener('keydown', (e) => {
-			// if (e.key === 'Tab') {
-			// 	const inputElement = e.target as HTMLInputElement | undefined;
-			// 	if (inputElement && inputElement.value.trim()) {
-			// 		(
-			// 			inputElement?.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
-			// 				'[data-pos="0"]' //first element from dropdown
-			// 			) as HTMLElement | undefined
-			// 		)?.click();
-			// 	} else if (optional) {
-			// 		dispatch('change', null);
-			// 	}
-			// }
-			// });
-		}
-	}
-
-	// HACK svelecte type shenanigans
-	function isFocusable(ref: unknown): ref is HTMLInputElement {
-		return ref != null;
-	}
-
-	onMount(() => {
-		if (focusOnLoad) {
-			tick()
-				.then(() => {
-					if (isFocusable(ref)) {
-						ref.focus();
-					}
-				})
-				.catch(devCatch);
-		}
-
-		const input = document.getElementById(inputId);
-		// input?.addEventListener('focus', () => {
-		// 	hidden = true;
-		// });
-		// input?.addEventListener('blur', () => {
-		// 	hidden = false;
-		// });
-
-		// HACK callback for is-open on/off
-		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
-		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
-			for (let i = mutations.length - 1; i > -1; i--) {
-				const mutation = mutations[i];
-				if (mutation.attributeName === 'class') {
-					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
-				}
-			}
-		});
-
-		if (dropdownRef) {
-			observer.observe(dropdownRef, { attributes: true });
-		}
-
-		return () => {
-			observer.disconnect();
-		};
-	});
-
-	let timeoutHandler = -1;
-
-	$effect(() => {
-		if (loadingDiv && isLoading) {
-			loadingDiv.classList.add('is-loading');
-		} else {
-			loadingDiv?.classList.remove('is-loading');
-		}
-	});
-
-	function registerInputListeners(e: HTMLInputElement) {
-		if (!hasRegisteredListeners) {
-			hasRegisteredListeners = true;
-
-			const inputElement = e;
-
-			loadingDiv = inputElement.parentElement?.parentElement?.nextElementSibling as
-				| HTMLDivElement
-				| undefined;
-
-			const currentHandler = (timeoutHandler = setTimeout(() => {
-				tryQuery(currentHandler, '').catch(devCatch);
-			}, 500) as unknown as number);
-
-			inputElement.addEventListener('input', (e) => {
-				clearTimeout(timeoutHandler);
-
-				const searchValue = (e.target as HTMLInputElement).value;
-
-				const currentHandler = (timeoutHandler = setTimeout(() => {
-					tryQuery(currentHandler, searchValue).catch(devCatch);
-				}, 500) as unknown as number);
-			});
-
-			inputElement.addEventListener('keydown', (e) => {
-				if (e.key === 'Enter') {
-					tick()
-						.then(() => {
-							const searchValue = (e.target as HTMLInputElement).value;
-							if (searchValue) {
-								// dispatch('search', { value: inputElement.value });
-								clearTimeout(timeoutHandler);
-
-								const currentHandler = (timeoutHandler = setTimeout(() => {
-									tryQuery(currentHandler, searchValue, true).catch(devCatch);
-								}, 1) as unknown as number);
-							}
-						})
-						.catch(devCatch);
-				}
-			});
-		}
-	}
-
-	async function tryQuery(handler: number, value: string, andSelectIt = false) {
-		if (timeoutHandler === handler) {
-			isLoading = true;
-			try {
-				const newValues = await query(value);
-				isLoading = false;
-
-				if (timeoutHandler === handler) {
-					options = newValues;
-
-					if (andSelectIt) {
-						if (newValues.length === 1) {
-							onChange(newValues[0]);
-						}
-					}
-				}
-			} catch (e) {
-				toastContext.toast(e);
-			}
-		}
-	}
-
-	function onChange(newValue: V | null | undefined) {
-		if (clearable || newValue != null) {
-			onchange(newValue ?? null);
-		}
-	}
-
-	const an = $derived(vowels.has(name[0].toLocaleLowerCase()) ? 'an' : 'a');
-
-	let isExpanded = $state(false);
-</script>
-
-<!-- #endregion -->
-
-<!-- #region HTML -->
-
-<div
-	class="select-wrapper"
-	class:invalid={isInvalid}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
->
-	{#if label}
-		<label for={inputId}>
-			<span
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
-			>
-			<span class="border"
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
-			>
-		</label>
-	{/if}
-	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values... wtf -->
-	<Svelecte
-		strictMode={false}
-		keepCreated
-		onFocus={(e: HTMLInputElement) => {
-			registerInputListeners(e);
-			forceShowDropdown(e);
-			onfocus?.(e);
-		}}
-		placeholder="Please Select{name ? ` ${an} ${name}` : ''}"
-		bind:this={ref}
-		{inputId}
-		{disabled}
-		valueField={valueProp}
-		labelField={labelProp}
-		virtualList={false}
-		searchable
-		searchProps={{ keepSelectionInList: true }}
-		lazyDropdown
-		{valueAsObject}
-		{options}
-		value={selectedValue as Array<unknown>}
-		{onChange}
-		selectOnTab
-		deselectMode={required && !clearable ? 'none' : 'toggle'}
-		keepSelectionInList
-		{name}
-		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
-		{append}
-	>
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-			<!-- <div class="icon-bg">
-				<Icon name="chevron-down" size={Size.MediumSmall} />
-			</div> -->
-		{/snippet}
-	</Svelecte>
-
-	{#snippet append()}
-		<div class="icons">
-			{#if clearable && selectedValue}
-				<Action
-					{disabled}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					size={Size.Small}
-					onclick={(e: MouseEvent) => {
-						if (isExpanded) {
-							e.stopPropagation();
-						}
-
-						onChange(null);
-					}}
-					icon={{
-						name: 'close-menu-cross',
-						colour: Colour['$ui-blue-9'],
-					}}
-				/>
-			{/if}
-
-			<Action
-				{disabled}
-				noTabIndex
-				colourSet={ColourSet.Auxiliary}
-				size={Size.Small}
-				icon={{
-					name: isExpanded ? 'chevron-up' : 'chevron-down',
-					colour: Colour['$ui-blue-9'],
-				}}
-			/>
-		</div>
-	{/snippet}
-
-	{#snippet selection(selectedOptions: Array<V>)}
-		{#if selectedOptions.length == 0}
-			<span class="selection">Please Select {an} {name}</span>
-		{:else}
-			<span class="selection">{selectedOptions[0][labelProp]}</span>
-		{/if}
-	{/snippet}
-</div>
-
-<!-- #endregion -->
-
-<!-- #region CSS
- -->
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
+>
+	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
+
+	import { dev } from '$app/environment';
+	import { devCatch, generateWeakId, vowels } from '../Helpers/Helpers.svelte.js';
+	import { attachDropdownPortal } from '../Helpers/dropdownPortal.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Svelecte from 'svelecte';
+	import { getContext, onMount, type Snippet, tick, untrack } from 'svelte';
+	import Action from './Action.svelte';
+	import type { QuerySelectProps } from './QuerySelectProps.js';
+
+	let {
+		label,
+		labelProp,
+		valueProp,
+		clearable = false,
+		required = false,
+		invalid = false,
+		valueAsObject,
+		name = 'Item',
+		disabled,
+		query,
+		width,
+		height,
+		focusOnLoad = false,
+		inputId = generateWeakId(),
+		value: selectedValue,
+		options = $bindable<Array<V>>([]),
+		isValid,
+		onchange,
+		onfocus,
+	}: QuerySelectProps<V, VP> = $props();
+
+	export function forceQuery() {
+		clearTimeout(timeoutHandler);
+
+		const input = document.getElementById(inputId);
+		const searchValue = (input as HTMLInputElement).value;
+
+		const currentHandler = (timeoutHandler = setTimeout(() => {
+			tryQuery(currentHandler, searchValue).catch(devCatch);
+		}, 500) as unknown as number);
+		tryQuery(currentHandler, searchValue).catch(devCatch);
+	}
+
+	let ref: Svelecte | undefined = $state();
+	let hasAutoFocused = $state(false);
+	let loadingDiv: HTMLDivElement | undefined = $state();
+	let isLoading = $state(false);
+	let hasRegisteredListeners = $state(false);
+	// Abort controller used to remove input listeners on unmount.
+	let listenerAbort: AbortController | undefined;
+
+	function isObjectValue(value: unknown): value is V {
+		return value !== null && typeof value == 'object' && labelProp in value && valueProp in value;
+	}
+
+	$effect.pre(() => {
+		void selectedValue;
+		untrack(() => {
+			if (selectedValue != null) {
+				if (valueAsObject) {
+					if (isObjectValue(selectedValue)) {
+						if (!options.some((opt: V) => opt[valueProp] === selectedValue[valueProp])) {
+							// Immutable update so the bindable propagates even when the
+							// parent did not declare `$state` on its side.
+							options = [...options, selectedValue];
+						}
+					} else if (dev) {
+						console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
+						return;
+					}
+				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
+					options = [
+						...options,
+						{
+							//best-effort solution. Not a good one
+							// eslint-disable-next-line @typescript-eslint/no-base-to-string
+							[labelProp]: selectedValue.toString(),
+							[valueProp]: selectedValue,
+						} as V,
+					];
+				}
+			}
+		});
+	});
+
+	const isInvalid = $derived(
+		(required && !selectedValue) ||
+			invalid ||
+			isValid?.(
+				valueAsObject
+					? (selectedValue as V)
+					: (options.find((a) => a[valueProp] === selectedValue) ?? null)
+			) === false
+	);
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function forceShowDropdown(e: HTMLInputElement) {
+		if (focusOnLoad && !hasAutoFocused) {
+			hasAutoFocused = true;
+			e.click();
+		}
+	}
+
+	// HACK svelecte type shenanigans
+	function isFocusable(ref: unknown): ref is HTMLInputElement {
+		return ref != null;
+	}
+
+	onMount(() => {
+		if (focusOnLoad) {
+			tick()
+				.then(() => {
+					if (isFocusable(ref)) {
+						ref.focus();
+					}
+				})
+				.catch(devCatch);
+		}
+
+		const input = document.getElementById(inputId);
+		const svelecteRoot = input?.closest('div.svelecte') as HTMLElement | null;
+		const dropdownRef =
+			(svelecteRoot?.querySelector('.sv_dropdown') as HTMLElement | null) ?? undefined;
+
+		// HACK callback for is-open on/off; drives the chevron rotation
+		// in the action snippet further down.
+		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
+			for (let i = mutations.length - 1; i > -1; i--) {
+				const mutation = mutations[i];
+				if (mutation.attributeName === 'class') {
+					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
+				}
+			}
+		});
+
+		if (dropdownRef) {
+			observer.observe(dropdownRef, { attributes: true });
+		}
+
+		// Teleport the Svelecte dropdown to `document.body` while open
+		// so it escapes every ancestor `overflow` / `transform` /
+		// `z-index` stacking context. See `Helpers/dropdownPortal.ts`.
+		const detachPortal = attachDropdownPortal({
+			getTrigger: () => svelecteRoot,
+			getDropdown: () => dropdownRef,
+		});
+
+		return () => {
+			observer.disconnect();
+			detachPortal();
+			clearTimeout(timeoutHandler);
+			listenerAbort?.abort();
+		};
+	});
+
+	let timeoutHandler = -1;
+
+	$effect(() => {
+		if (loadingDiv && isLoading) {
+			loadingDiv.classList.add('is-loading');
+		} else {
+			loadingDiv?.classList.remove('is-loading');
+		}
+	});
+
+	function registerInputListeners(e: HTMLInputElement) {
+		if (!hasRegisteredListeners) {
+			hasRegisteredListeners = true;
+			listenerAbort = new AbortController();
+			const signal = listenerAbort.signal;
+
+			const inputElement = e;
+
+			loadingDiv = inputElement.parentElement?.parentElement?.nextElementSibling as
+				| HTMLDivElement
+				| undefined;
+
+			const currentHandler = (timeoutHandler = setTimeout(() => {
+				tryQuery(currentHandler, '').catch(devCatch);
+			}, 500) as unknown as number);
+
+			inputElement.addEventListener(
+				'input',
+				(e) => {
+					clearTimeout(timeoutHandler);
+
+					const searchValue = (e.target as HTMLInputElement).value;
+
+					const currentHandler = (timeoutHandler = setTimeout(() => {
+						tryQuery(currentHandler, searchValue).catch(devCatch);
+					}, 500) as unknown as number);
+				},
+				{ signal }
+			);
+
+			inputElement.addEventListener(
+				'keydown',
+				(e) => {
+					if (e.key === 'Enter') {
+						tick()
+							.then(() => {
+								const searchValue = (e.target as HTMLInputElement).value;
+								if (searchValue) {
+									clearTimeout(timeoutHandler);
+
+									const currentHandler = (timeoutHandler = setTimeout(() => {
+										tryQuery(currentHandler, searchValue, true).catch(devCatch);
+									}, 1) as unknown as number);
+								}
+							})
+							.catch(devCatch);
+					}
+				},
+				{ signal }
+			);
+		}
+	}
+
+	async function tryQuery(handler: number, value: string, andSelectIt = false) {
+		if (timeoutHandler === handler) {
+			isLoading = true;
+			try {
+				const newValues = await query(value);
+				isLoading = false;
+
+				if (timeoutHandler === handler) {
+					options = newValues;
+
+					if (andSelectIt) {
+						if (newValues.length === 1) {
+							onChange(newValues[0]);
+						}
+					}
+				}
+			} catch (e) {
+				toastContext.toast(e);
+			}
+		}
+	}
+
+	function onChange(newValue: V | null | undefined) {
+		if (clearable || newValue != null) {
+			// svelecte always passes the full option object; normalise to
+			// the shape the variant promised. AsPrimitive callbacks
+			// receive the primitive key (`V[VP]`), not the object.
+			if (valueAsObject) {
+				void (onchange as (v: V | null) => void | Promise<void>)(newValue ?? null);
+			} else {
+				const primitive = newValue == null ? null : newValue[valueProp];
+				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
+			}
+		}
+	}
+
+	const an = $derived(vowels.has(name[0].toLocaleLowerCase()) ? 'an' : 'a');
+
+	let isExpanded = $state(false);
+</script>
+
+<div
+	class="select-wrapper"
+	class:invalid={isInvalid}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+			<span class="border"
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+		</label>
+	{/if}
+	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
+	<Svelecte
+		strictMode={false}
+		keepCreated
+		onFocus={(e: HTMLInputElement) => {
+			registerInputListeners(e);
+			forceShowDropdown(e);
+			onfocus?.(e);
+		}}
+		placeholder="Please Select{name ? ` ${an} ${name}` : ''}"
+		bind:this={ref}
+		{inputId}
+		{disabled}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		searchable
+		searchProps={{ keepSelectionInList: true }}
+		lazyDropdown
+		{valueAsObject}
+		{options}
+		value={selectedValue as Array<unknown>}
+		{onChange}
+		selectOnTab
+		deselectMode={required && !clearable ? 'none' : 'toggle'}
+		keepSelectionInList
+		{name}
+		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
+		{append}
+	>
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+		{/snippet}
+	</Svelecte>
+
+	{#snippet append()}
+		<div class="icons">
+			{#if clearable && selectedValue}
+				<Action
+					{disabled}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					onclick={(e: MouseEvent) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						onChange(null);
+					}}
+					icon={{
+						name: 'close-menu-cross',
+						colour: Colour['$ui-blue-9'],
+					}}
+				/>
+			{/if}
+
+			<Action
+				{disabled}
+				noTabIndex
+				colourSet={ColourSet.Auxiliary}
+				size={Size.Small}
+				icon={{
+					name: isExpanded ? 'chevron-up' : 'chevron-down',
+					colour: Colour['$ui-blue-9'],
+				}}
+			/>
+		</div>
+	{/snippet}
+
+	{#snippet selection(selectedOptions: Array<V>)}
+		{#if selectedOptions.length == 0}
+			<span class="selection">Please Select {an} {name}</span>
+		{:else}
+			<span class="selection">{selectedOptions[0][labelProp]}</span>
+		{/if}
+	{/snippet}
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -476,24 +431,13 @@
   max-height: 100%;
   box-sizing: border-box;
 }
-.select-wrapper :global(.sv-item--content) {
-  font-size: 0.875rem;
-}
-.select-wrapper :global(.sv-item--wrap.in-dropdown) {
-  cursor: pointer;
-  min-height: 40px;
-  align-items: center;
-}
-.select-wrapper :global(.sv-item--content) {
-  min-height: 1.2rem;
-}
 .select-wrapper :global(.sv-btn-indicator) {
   cursor: pointer;
 }
 .select-wrapper.no-border {
   --sv-border: none;
 }
-.select-wrapper .select-wrapper.force-upwards :global .sv_dropdown.is-open {
+.select-wrapper.force-upwards :global .sv_dropdown.is-open {
   bottom: var(--dropdown-bottom);
 }
 .select-wrapper :global .sv-control {
@@ -514,32 +458,18 @@
 .select-wrapper :global .svelecte.svelecte-control {
   cursor: pointer;
 }
-.select-wrapper :global .sv-item--wrap.in-dropdown {
-  cursor: pointer;
-  min-height: 40px;
-  align-items: center;
-}
-.select-wrapper :global .sv-item--content {
-  min-height: 1.2rem;
-}
 .select-wrapper :global span {
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
 .select-wrapper :global .sv-control {
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
-.select-wrapper :global div.sv_dropdown.is-open {
-  z-index: 99;
-}
 .select-wrapper div.nothing {
   height: 0;
   width: 0;
 }
-.select-wrapper .dropdown-item,
 .select-wrapper .selection {
   font-size: 0.875rem;
-}
-.select-wrapper .selection {
   padding-left: 0.5rem;
   white-space: nowrap;
   display: flex;
@@ -563,22 +493,36 @@ div.icons {
   box-sizing: border-box;
 }
 
-.dropdown-item {
+:global .sv-item--wrap.in-dropdown {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+:global .sv-item--content {
+  font-size: 0.875rem;
+  min-height: 1.2rem;
+}
+:global div.sv_dropdown.is-open {
+  z-index: 99;
+}
+
+:global(.dropdown-item) {
   display: flex;
   flex-flow: row nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   gap: 1rem;
+  font-size: 0.875rem;
   fill: #259fc7;
 }
-.dropdown-item .toggle-icon {
+:global(.dropdown-item) .toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column nowrap;
   opacity: 0;
 }
-.dropdown-item .toggle-icon.yes {
+:global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>