@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/AutocompleteMulti.svelte

@@ -1,240 +1,331 @@
-<script lang="ts">
-	import { clickOutside } from "../actions/ClickOutside.js";
-	import type { NotifyModel } from "../models/NotifyModel.js";
+<script module lang="ts">
 	import type {
+		ComboBoxGroup,
 		ComboBoxItem,
 		FetchFunctionType,
-		SearchFunctionType,
-	} from "../models/ComboBoxItem.js";
-	import ComboBoxMulti from "./ComboBoxMulti.svelte";
-	import FormGroup from "./FormGroup.svelte";
-	import Badge from "../ui/Badge.svelte";
-	import { onMount, tick, type Snippet } from "svelte";
-
-	interface Props {
+		RetrieveLabelFunctionType,
+		SearchFunctionType
+	} from '../models/ComboBoxItem.js';
+	import type { Snippet } from 'svelte';
+
+	export interface AutocompleteMultiProps {
+		/** HTML name attribute for the input */
+		name?: string;
+		/** Label text displayed above the input */
 		label?: string;
+		/** Array of selected values (bindable) */
 		values?: string[];
+		/**
+		 * Array of full selected item objects (bindable). Can be passed initially to preset
+		 * the selection with known labels — no `values` or retrieveLabelFunction needed.
+		 */
 		rawValues?: ComboBoxItem[];
+		/** Placeholder text when nothing is selected */
 		placeholder?: string;
+		/** Mark field as required (shows asterisk) */
+		required?: boolean;
+		/** CSS classes for the control element */
 		class?: string;
+		/** CSS classes for the container element */
+		containerClass?: string;
+		/** CSS classes for the FormGroup wrapper */
+		groupClass?: string;
+		/** Disable the input */
 		disabled?: boolean;
-		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Auto-focus the input on mount */
 		autofocus?: boolean;
-		showNoResultsMessage?: boolean;
+		/** Auto-focus on every dialog open */
+		autofocusDialog?: boolean;
+		/** Hide "no results" message when search finds nothing */
+		hideNoResults?: boolean;
+		/** Close the dropdown after selecting an option */
+		closeOnSelection?: boolean;
+		/**
+		 * Offer to add the typed text as a new chip when it doesn't match an existing option.
+		 * On by default — set to `false` to restrict selection to the provided options.
+		 */
+		allowAdd?: boolean;
+		/** Builds the label shown for the "add new value" suggestion (default: `Add "<value>"`) */
+		addItemLabel?: (value: string) => string;
+		/** Text shown while loading options */
 		loadingText?: string;
+		/** SVG icon displayed on the left side */
+		leftIconSvg?: string;
+		/** Static list of autocomplete options */
 		options?: ComboBoxItem[];
-		fetchFunction?: FetchFunctionType;
-		searchFunction?: SearchFunctionType;
-		tooltipLocation?: "top" | "bottom" | "left" | "right";
+		/** Options organized into groups */
+		groupedOptions?: ComboBoxGroup[];
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Async function to fetch all options */
+		fetchFunction?: FetchFunctionType | null;
+		/** Async function to search/filter options based on input */
+		searchFunction?: SearchFunctionType | null;
+		/** Async function to retrieve labels for values */
+		retrieveLabelFunction?: RetrieveLabelFunctionType | null;
+		/** Rich tooltip content using a Svelte snippet */
 		tooltipContent?: Snippet;
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Callback when Enter is pressed with the current filter text */
+		enterPressed?: (e: string) => void;
+		/** Callback when selection changes (returns value strings) */
 		onchange?: (e: string[]) => void;
+		/** Callback when selection changes (returns full item objects) */
 		onchangeRaw?: (e: ComboBoxItem[]) => void;
-		onCreate?: (value: string) => void;
+		/** Callback when the user chooses to add the typed value as a new item */
+		onItemAdded?: (value: string) => void;
 	}
+</script>
+
+<script lang="ts">
+	import ComboBoxMulti from './ComboBoxMulti.svelte';
+	import FormGroup from './FormGroup.svelte';
+	import { clickOutside } from '../util/ClickOutside.js';
+	import { ComboBoxMultiCore } from './comboBoxCore.svelte.js';
+	import Icon from '../icon/Icon.svelte';
+	import Loader from '../ui/Loader.svelte';
+	import Badge from '../ui/Badge.svelte';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import { iconX } from '../icon/index.js';
+	import { tick } from 'svelte';
+	import { useDialogEvents } from '../ui/DialogEvents.svelte.js';
+
+	const autoName = `autocompletemulti-${crypto.randomUUID()}`;
 
 	let {
-		label = "",
+		name,
+		label = '',
 		values = $bindable([]),
 		rawValues = $bindable([]),
-		placeholder = "Start typing to search...",
-		class: classes = "",
-		disabled = false,
+		placeholder = 'Start typing to search...',
 		required = false,
+		class: classes = '',
+		containerClass = '',
+		groupClass = '',
+		disabled = false,
 		showError = false,
-		errorText = "",
+		errorText = '',
 		autofocus = false,
-		showNoResultsMessage = false,
-		loadingText = "",
+		autofocusDialog = false,
+		hideNoResults = false,
+		closeOnSelection = false,
+		allowAdd = true,
+		addItemLabel = (v: string) => `Add "${v}"`,
+		loadingText = '',
+		leftIconSvg,
 		options = [],
-		fetchFunction,
-		searchFunction,
-		tooltipLocation = "top",
+		groupedOptions = [],
+		tooltipLocation = 'top',
+		fetchFunction = null,
+		searchFunction = null,
+		retrieveLabelFunction = null,
 		tooltipContent,
 		tooltipText,
-		onchange,
-		onchangeRaw,
-		onCreate,
-	}: Props = $props();
-
-	const CREATE_PREFIX = "__create__";
+		enterPressed = undefined,
+		onchange = undefined,
+		onchangeRaw = undefined,
+		onItemAdded = undefined
+	}: AutocompleteMultiProps = $props();
 
-	let filterString = $state("");
-	let preloading = $state(false);
-	let searching = $state(false);
-	let timeout: number;
+	if (values === null || values === undefined) values = [];
+	if (rawValues === null || rawValues === undefined) rawValues = [];
+	// Callers may preset the selection by passing only rawValues — adopt their values
+	if (values.length === 0 && rawValues.length > 0) values = rawValues.map((r) => r.value);
 
-	let allOptions: ComboBoxItem[] = [];
-	let filteredOptions: ComboBoxItem[] = $state([]);
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
+	let internalValues: string[] = $state([]);
+	let filterValue = $state('');
 	let open = $state(false);
 
-	if (values === null || values === undefined) values = [];
-
-	onMount(() => {
-		if (fetchFunction) {
-			preloading = true;
-			fetchFunction().then((response: NotifyModel<ComboBoxItem[]>) => {
-				convertOptions(response.object!);
-				preloadValues();
-				preloading = false;
-			});
-		} else {
-			if (options.length) convertOptions(options);
-			preloadValues();
-		}
-
-		if (autofocus) {
-			tick().then(() => textboxElement?.focus());
+	const core = new ComboBoxMultiCore({
+		getOptions: () => options,
+		getGroupedOptions: () => groupedOptions,
+		getFetchFunction: () => fetchFunction,
+		getSearchFunction: () => searchFunction,
+		getRetrieveLabelFunction: () => retrieveLabelFunction,
+		getValues: () => values,
+		setValues: (v) => (values = v),
+		setRawValues: (r) => (rawValues = r),
+		initialRawValues: [...rawValues],
+		clearUnknownStatic: false,
+		onRawValuesResolved: (raw) => onchangeRaw?.(raw),
+		onOptionsChanged: () => {
+			if (filterValue) core.filterLocal(filterValue);
 		}
 	});
 
-	function preloadValues() {
-		if (!values || values.length === 0) {
-			rawValues = [];
-			return;
-		}
+	let isEmpty: boolean = $derived(rawValues?.length === 0);
 
-		if (rawValues.length > 0) return;
-
-		let newRawValues: ComboBoxItem[] = [];
-
-		for (let value of values) {
-			const foundOption = allOptions.find((x) => x.value === value);
-			if (foundOption) {
-				foundOption.selected = true;
-				newRawValues.push({ ...foundOption });
-			} else if (value != null) {
-				newRawValues.push({
-					label: String(value),
-					value: value,
-					selected: true,
-				});
-			}
+	/** Synthetic "add new value" suggestion shown when the typed text matches no option */
+	let addOption: ComboBoxItem | undefined = $derived.by(() => {
+		const trimmed = filterValue?.trim();
+		if (!allowAdd || !trimmed) return undefined;
+
+		const exists = core.allGroups
+			.flatMap((x) => x.items)
+			.some(
+				(x) =>
+					x.label.toLowerCase() === trimmed.toLowerCase() ||
+					x.value.toLowerCase() === trimmed.toLowerCase()
+			);
+		const alreadySelected = values.some((v) => v.toLowerCase() === trimmed.toLowerCase());
+		if (exists || alreadySelected) return undefined;
+
+		return { label: addItemLabel(trimmed), value: trimmed, isAddNew: true };
+	});
+
+	/** Groups passed to the dropdown, including the add suggestion when applicable */
+	let displayGroups: ComboBoxGroup[] = $derived(
+		addOption
+			? [...core.filteredGroups, { label: '', items: [addOption], showGroupName: false }]
+			: core.filteredGroups
+	);
+
+	useDialogEvents({
+		onFirstOpen: () => {
+			if (autofocus) setTimeout(() => doFocus(), 150);
+		},
+		onOpen: () => {
+			if (autofocusDialog) setTimeout(() => doFocus(), 150);
 		}
+	});
 
-		rawValues = newRawValues;
+	function doFocus() {
+		open = true;
+		tick().then(() => textboxElement?.focus());
 	}
 
-	function convertOptions(opts: ComboBoxItem[]) {
-		allOptions = opts.map((option) => ({
-			...option,
-			selected: values && values.some((x) => x === option.value),
-		}));
-		filteredOptions = [...allOptions];
-	}
+	$effect(() => {
+		const currentValues = values || [];
+		const currentInternalValues = internalValues || [];
 
-	function appendCreateOption(opts: ComboBoxItem[], query: string): ComboBoxItem[] {
-		if (!query.trim()) return opts;
-		const normalizedQuery = query.trim().toLowerCase();
-		const exactMatch = opts.some((o) => o.label.toLowerCase() === normalizedQuery);
-		if (exactMatch) return opts;
-		// Don't offer create for values already selected
-		if (values.some((v) => v.toLowerCase() === normalizedQuery)) return opts;
-		return [...opts, { label: `Create "${query.trim()}"`, value: CREATE_PREFIX + query.trim() }];
-	}
+		const arraysAreDifferent =
+			currentValues.length !== currentInternalValues.length ||
+			currentValues.some((value, index) => value !== currentInternalValues[index]);
 
-	function onSelection(selectedValue: ComboBoxItem) {
-		if (selectedValue.value.startsWith(CREATE_PREFIX)) {
-			const newValue = selectedValue.value.slice(CREATE_PREFIX.length);
-			const newItem: ComboBoxItem = { label: newValue, value: newValue, selected: true };
-
-			// Add to allOptions so it's available going forward
-			allOptions = [...allOptions, newItem];
-			if (options) {
-				options.push({ label: newValue, value: newValue });
+		if (arraysAreDifferent) {
+			internalValues = [...currentValues];
+			const selfChanged = core.preloadValues();
+			// preloadValues fires its own callbacks when it drops invalid values; don't double-notify
+			if (!selfChanged) {
+				onchangeRaw?.(rawValues);
 			}
+		}
+	});
 
-			values = [...values, newValue];
-			rawValues = [...rawValues, newItem];
+	let selectionJustMade = false;
 
-			onchange?.(values);
-			onchangeRaw?.(rawValues);
-			onCreate?.(newValue);
+	function onSelection(selectedValue: ComboBoxItem) {
+		selectionJustMade = true;
 
-			filterString = "";
-			filteredOptions = appendCreateOption(
-				allOptions.filter((o) => !values.includes(o.value) || o.value === newValue),
-				"",
-			);
-			filteredOptions = [...allOptions];
+		if (selectedValue.isAddNew) {
+			addItem(selectedValue.value);
 			return;
 		}
 
-		// Toggle selection
-		const alreadySelected = values.includes(selectedValue.value);
+		const items = core.allGroups.flatMap((x) => x.items);
+		const index = items.findIndex((opt) => opt.value === selectedValue.value);
+		const actualOption = index !== -1 ? items[index] : selectedValue;
 
-		if (alreadySelected) {
-			values = values.filter((v) => v !== selectedValue.value);
-			rawValues = rawValues.filter((rv) => rv.value !== selectedValue.value);
-			const opt = allOptions.find((o) => o.value === selectedValue.value);
-			if (opt) opt.selected = false;
-		} else {
-			const opt = allOptions.find((o) => o.value === selectedValue.value);
-			if (opt) opt.selected = true;
-			values = [...values, selectedValue.value];
-			rawValues = [...rawValues, opt ?? selectedValue];
+		actualOption.selected = !actualOption.selected;
+
+		if (actualOption.selected && !values.includes(actualOption.value)) {
+			values = [...values, actualOption.value];
+			rawValues = [...rawValues, actualOption];
+		} else if (!actualOption.selected) {
+			values = values.filter((value) => value !== actualOption.value);
+			rawValues = rawValues.filter((rawValue) => rawValue.value !== actualOption.value);
 		}
 
+		internalValues = [...values];
 		onchange?.(values);
 		onchangeRaw?.(rawValues);
 
-		filterString = "";
-		filteredOptions = [...allOptions];
+		if (closeOnSelection) open = false;
+		tick().then(() => textboxElement?.focus());
 	}
 
-	function removeValue(item: ComboBoxItem) {
-		values = values.filter((v) => v !== item.value);
-		rawValues = rawValues.filter((rv) => rv.value !== item.value);
-		const opt = allOptions.find((o) => o.value === item.value);
-		if (opt) opt.selected = false;
+	function addItem(newValue: string) {
+		selectionJustMade = true;
+		const trimmed = newValue.trim();
+		filterValue = '';
+		core.filterLocal('');
+
+		if (!trimmed || values.some((v) => v.toLowerCase() === trimmed.toLowerCase())) return;
+
+		const newItem: ComboBoxItem = { label: trimmed, value: trimmed, selected: true };
+		values = [...values, trimmed];
+		rawValues = [...rawValues, newItem];
+		internalValues = [...values];
+
+		onItemAdded?.(trimmed);
 		onchange?.(values);
 		onchangeRaw?.(rawValues);
+
+		if (closeOnSelection) open = false;
+		tick().then(() => textboxElement?.focus());
 	}
 
-	function onFilterChange(value: string) {
-		if (searchFunction && value) {
-			clearTimeout(timeout);
-			searching = true;
-			timeout = window.setTimeout(() => {
-				searchFunction(value).then(
-					(response: NotifyModel<ComboBoxItem[]>) => {
-						convertOptions(response.object!);
-						filteredOptions = appendCreateOption(filteredOptions, value);
-						searching = false;
-						open = true;
-					},
-				);
-			}, 300);
-		} else if (allOptions) {
-			filteredOptions = allOptions.filter((option) =>
-				option.label.toLowerCase().includes(value.toLowerCase()),
-			);
-			filteredOptions = appendCreateOption(filteredOptions, value);
+	function removeItem(item: ComboBoxItem) {
+		values = values.filter((value) => value !== item.value);
+		rawValues = rawValues.filter((rawValue) => rawValue.value !== item.value);
+		internalValues = [...values];
+
+		const match = core.allGroups.flatMap((x) => x.items).find((x) => x.value === item.value);
+		if (match) match.selected = false;
+
+		onchange?.(values);
+		onchangeRaw?.(rawValues);
+	}
+
+	function clearAll() {
+		values = [];
+		rawValues = [];
+		internalValues = [];
+		core.allGroups.flatMap((x) => x.items).forEach((x) => (x.selected = false));
+
+		onchange?.(values);
+		onchangeRaw?.(rawValues);
+	}
+
+	function onFilterChange(text: string) {
+		if (searchFunction && text) {
+			core.search(text, () => (open = true));
+		} else {
+			core.filterLocal(text);
 			open = true;
 		}
 	}
 
+	let textboxElement: HTMLInputElement | undefined = $state(undefined);
 	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
-	let textboxElement: HTMLElement | undefined = $state(undefined);
 
 	function onKeyDown(e: KeyboardEvent) {
-		if (e.key === "Backspace" && filterString === "" && rawValues.length > 0) {
-			// Remove last selected value on backspace when input is empty
-			removeValue(rawValues[rawValues.length - 1]);
+		if (e.key === 'Backspace' && filterValue.length === 0 && rawValues.length > 0) {
+			removeItem(rawValues[rawValues.length - 1]);
 			return;
 		}
 
-		if (!open) return;
+		if (!open) {
+			if (e.key === 'Enter') enterPressed?.(filterValue);
+			return;
+		}
 
-		if (e.key === "Escape") {
+		if (e.key === 'Escape') {
 			e.preventDefault();
 			open = false;
-		}
+		} else {
+			selectionJustMade = false;
+			comboBoxEl?.handleKeyDown?.(e);
 
-		comboBoxEl?.handleKeyDown?.(e);
+			if (!selectionJustMade && e.key === 'Enter') enterPressed?.(filterValue);
+		}
 	}
 
 	function onFocus() {
@@ -242,54 +333,102 @@
 	}
 
 	function closePopover(e: MouseEvent) {
-		if (textboxElement?.contains(e.target as HTMLElement)) return;
-
+		if (controlElement?.contains(e.target as HTMLElement)) return;
 		open = false;
 	}
 
-	// Build grouped options for ComboBoxMulti
-	let groupedOptions = $derived([{ label: "", items: filteredOptions }]);
+	let controlElement: HTMLElement | undefined = $state(undefined);
+
+	const extraClasses: string[] = $derived.by(() => {
+		const list: string[] = [];
+		if (open) list.push('open');
+		if (disabled) list.push('disabled');
+		if (showError) list.push('show-error');
+		return list;
+	});
 </script>
 
-<div class="autocomplete-multi-container" class:show-error={showError}>
-	<FormGroup {label} {required} {tooltipContent} {tooltipLocation} {tooltipText}>
-		<div class="autocomplete-multi-input {classes}" class:focused={open} class:disabled use:clickOutside={closePopover}>
-			{#each rawValues as item}
-				{#if disabled}
-					<Badge>{item.label}</Badge>
-				{:else}
-					<Badge onDelete={() => removeValue(item)}>{item.label}</Badge>
-				{/if}
-			{/each}
-			<input
-				class="inline-input"
-				bind:this={textboxElement}
-				bind:value={filterString}
-				{placeholder}
-				{disabled}
-				autocomplete="off"
-				onfocus={onFocus}
-				oninput={() => onFilterChange(filterString)}
-				onkeydown={onKeyDown}
-			/>
+<div class="autocomplete-multi-container {containerClass}">
+	<FormGroup
+		{label}
+		{required}
+		{showError}
+		{errorText}
+		{tooltipContent}
+		{tooltipText}
+		{tooltipLocation}
+		class={groupClass}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			bind:this={controlElement}
+			class="ac-control {extraClasses.join(' ')} {classes}"
+			onclick={() => {
+				if (!disabled) tick().then(() => textboxElement?.focus());
+			}}
+			onkeydown={() => {}}
+		>
+			{#if leftIconSvg}
+				<span class="left-icon"><Icon svg={leftIconSvg} size="1rem" /></span>
+			{/if}
+
+			<div class="ac-chips">
+				{#each rawValues as item (item.value)}
+					{#if disabled}
+						<Badge>{item.label}</Badge>
+					{:else}
+						<Badge ondelete={() => removeItem(item)}>{item.label}</Badge>
+					{/if}
+				{/each}
+
+				<input
+					bind:this={textboxElement}
+					bind:value={filterValue}
+					name={resolvedName}
+					type="search"
+					class="ac-input"
+					{disabled}
+					placeholder={core.preloading ? 'Loading...' : isEmpty ? placeholder : ''}
+					autocomplete="off"
+					oninput={() => onFilterChange(filterValue)}
+					onfocus={onFocus}
+					onkeydown={onKeyDown}
+				/>
+			</div>
+
+			{#if core.preloading || core.searching}
+				<span class="control-action"><Loader sizeOverride="1.125rem" /></span>
+			{:else if !isEmpty && !disabled}
+				<span class="control-action">
+					<ActionIcon
+						variant="secondary-subtle"
+						svg={iconX}
+						size="0.75rem"
+						onclick={(e: MouseEvent) => {
+							clearAll();
+							e.stopPropagation();
+						}}
+					/>
+				</span>
+			{/if}
 		</div>
-		<div class="relative w-full">
+	</FormGroup>
+
+	<div class="autocomplete-panel {open ? '' : 'hidden'}">
+		<div class="autocomplete-panel-inner" use:clickOutside={closePopover}>
 			<ComboBoxMulti
 				bind:this={comboBoxEl}
-				{filterString}
+				filterString={filterValue}
 				values={rawValues}
-				onSelection={onSelection}
-				{groupedOptions}
+				{onSelection}
+				groupedOptions={displayGroups}
 				{open}
-				loading={searching || preloading}
-				{showNoResultsMessage}
+				loading={core.searching}
+				{hideNoResults}
 				{loadingText}
 			/>
 		</div>
-	</FormGroup>
-	{#if showError && errorText}
-		<div class="text-error">{errorText}</div>
-	{/if}
+	</div>
 </div>
 
 <style>
@@ -297,60 +436,79 @@
 		position: relative;
 	}
 
-	.autocomplete-multi-input {
+	.ac-control {
 		display: flex;
-		flex-wrap: wrap;
 		align-items: center;
-		gap: var(--pui-spacing-1);
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border: 1px solid var(--pui-input-border);
-		background-color: var(--pui-input-bg);
-		color: var(--pui-input-text);
-		border-radius: var(--pui-radius-base);
-		cursor: text;
+		gap: 0.25rem;
+		width: 100%;
 		min-height: 2.25rem;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		border: 1px solid var(--border-color);
+		cursor: text;
 	}
 
-	.autocomplete-multi-input.focused {
-		border-color: var(--pui-input-border-focus);
+	.ac-control.open {
+		border-color: var(--accent-color);
 	}
 
-	.autocomplete-multi-input.disabled {
+	.ac-control.show-error {
+		border-color: var(--danger-text);
+	}
+
+	.ac-control.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background-color: var(--pui-bg-disabled);
+		background-color: var(--border-color);
 	}
 
-	.inline-input {
-		flex: 1;
-		min-width: 4rem;
+	.left-icon {
+		display: flex;
+		align-items: center;
+		pointer-events: none;
+	}
+
+	.ac-chips {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.ac-input {
+		flex: 1 1 6rem;
+		min-width: 6rem;
 		border: none;
 		outline: none;
 		background: transparent;
-		color: var(--pui-input-text);
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
-		padding: 0;
-	}
-
-	.inline-input::placeholder {
-		color: var(--pui-text-placeholder);
+		color: var(--text-color);
+		font-size: 1rem;
+		padding: 0.25rem 0;
 	}
 
-	.relative {
-		position: relative;
+	.control-action {
+		display: flex;
+		align-items: center;
+		line-height: 0;
 	}
 
-	.w-full {
+	.autocomplete-panel {
+		position: absolute;
 		width: 100%;
+		left: 0;
+		z-index: 70;
 	}
 
-	.show-error .autocomplete-multi-input {
-		border-color: var(--pui-text-danger);
+	.autocomplete-panel-inner {
+		position: relative;
+		width: 100%;
 	}
 
-	.text-error {
-		color: var(--pui-text-danger);
-		font-size: var(--pui-font-size-sm);
+	.hidden {
+		display: none;
 	}
 </style>