@finsweet/webflow-apps-utils 1.0.30 → 1.0.32

package/dist/ui/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './progress-bar';
 export * from './regions';
 export * from './section';
 export * from './select';

package/dist/ui/components/index.js

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './progress-bar';
 export * from './regions';
 export * from './section';
 export * from './select';

package/dist/ui/components/progress-bar/ProgressBar.stories.svelte

@@ -0,0 +1,185 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ProgressBar from './ProgressBar.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'UI/ProgressBar',
+		component: ProgressBar,
+		tags: ['autodocs'],
+		argTypes: {
+			value: {
+				control: { type: 'range', min: 0, max: 100, step: 1 }
+			},
+			max: {
+				control: { type: 'number' }
+			},
+			variant: {
+				control: { type: 'select' },
+				options: ['default', 'success', 'warning', 'error']
+			},
+			easing: {
+				control: { type: 'select' },
+				options: ['linear', 'cubicIn', 'cubicOut', 'cubicInOut', 'quartOut']
+			},
+			animated: {
+				control: { type: 'boolean' }
+			},
+			duration: {
+				control: { type: 'range', min: 100, max: 2000, step: 100 }
+			},
+			showPercentage: {
+				control: { type: 'boolean' }
+			},
+			showStatus: {
+				control: { type: 'boolean' }
+			},
+			showSpinner: {
+				control: { type: 'boolean' }
+			},
+			completed: {
+				control: { type: 'boolean' }
+			},
+			height: {
+				control: { type: 'range', min: 2, max: 20, step: 1 }
+			},
+			statusText: {
+				control: { type: 'text' }
+			},
+			onComplete: { action: 'completed' }
+		},
+		args: {
+			onComplete: fn()
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		value: 45,
+		showPercentage: true
+	}}
+/>
+
+<Story
+	name="With Status"
+	args={{
+		value: 60,
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Processing files...'
+	}}
+/>
+
+<Story
+	name="With Spinner"
+	args={{
+		value: 35,
+		showStatus: true,
+		showPercentage: true,
+		showSpinner: true,
+		statusText: 'Uploading data...'
+	}}
+/>
+
+<Story
+	name="Completed State"
+	args={{
+		value: 100,
+		completed: true,
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Processing completed'
+	}}
+/>
+
+<Story
+	name="Success Variant"
+	args={{
+		value: 80,
+		variant: 'success',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Successfully processing...'
+	}}
+/>
+
+<Story
+	name="Warning Variant"
+	args={{
+		value: 65,
+		variant: 'warning',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Warning: Slow connection detected'
+	}}
+/>
+
+<Story
+	name="Error Variant"
+	args={{
+		value: 25,
+		variant: 'error',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Error: Connection failed'
+	}}
+/>
+
+<Story
+	name="No Animation"
+	args={{
+		value: 70,
+		animated: false,
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Instant progress'
+	}}
+/>
+
+<Story
+	name="Slow Animation"
+	args={{
+		value: 85,
+		duration: 2000,
+		easing: 'quartOut',
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Slow, smooth progress...'
+	}}
+/>
+
+<Story
+	name="Custom Height"
+	args={{
+		value: 55,
+		height: 8,
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Thick progress bar'
+	}}
+/>
+
+<Story
+	name="Minimal"
+	args={{
+		value: 40,
+		showPercentage: false,
+		showStatus: false
+	}}
+/>
+
+<Story
+	name="Scan Progress Simulation"
+	args={{
+		value: 73,
+		showStatus: true,
+		showPercentage: true,
+		showSpinner: true,
+		statusText: 'Scanning: 73/100 pages',
+		height: 4
+	}}
+/>

package/dist/ui/components/progress-bar/ProgressBar.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ProgressBar;
+type ProgressBar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ProgressBar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ProgressBar from './ProgressBar.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/progress-bar/ProgressBar.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { cubicIn, cubicInOut, cubicOut, linear, quartOut } from 'svelte/easing';
+	import { tweened } from 'svelte/motion';
+
+	import { CheckCircleOutlinedIcon, WarningTriangleOutlineIcon } from '../../icons';
+	import Loader from '../Loader.svelte';
+	import { Text } from '../text';
+	import type { ProgressBarEasing, ProgressBarProps, ProgressBarVariant } from './types.js';
+
+	let {
+		value = 0,
+		max = 100,
+		animated = true,
+		duration = 400,
+		easing = 'cubicOut',
+		showPercentage = true,
+		showStatus = false,
+		statusText = '',
+		showSpinner = false,
+		variant = 'default',
+		height = 4,
+		completed = false,
+		class: className = '',
+		onComplete,
+		...restProps
+	}: ProgressBarProps = $props();
+
+	const easingFunctions = {
+		linear,
+		cubicIn,
+		cubicOut,
+		cubicInOut,
+		quartOut
+	};
+
+	let currentProgress = $state(0);
+	let isCompleted = $state(false);
+	let completedValue = $state<number | null>(null);
+
+	let percentage = $derived(
+		Math.min(100, Math.round((Math.max(0, value) / Math.max(1, max)) * 100))
+	);
+
+	let tweenedProgress = $state(0);
+	const progress = tweened(0, {
+		duration,
+		easing: easingFunctions[easing]
+	});
+
+	$effect(() => {
+		const unsubscribe = progress.subscribe((val) => {
+			tweenedProgress = val;
+		});
+
+		return unsubscribe;
+	});
+
+	let displayWidth = $derived(
+		isCompleted && completedValue !== null ? completedValue : tweenedProgress
+	);
+
+	let displayPercentage = $derived(
+		isCompleted && completedValue !== null
+			? Math.round(completedValue)
+			: Math.round(tweenedProgress)
+	);
+
+	$effect(() => {
+		const currentPercentage = percentage;
+		if (!completed) {
+			currentProgress = currentPercentage;
+			if (animated) {
+				progress.set(currentPercentage, {
+					duration,
+					easing: easingFunctions[easing]
+				});
+			} else {
+				progress.set(currentPercentage, { duration: 0 });
+			}
+		}
+	});
+
+	$effect(() => {
+		if (completed && !isCompleted) {
+			completedValue = tweenedProgress;
+			isCompleted = true;
+
+			onComplete?.();
+		}
+
+		if (!completed && isCompleted) {
+			isCompleted = false;
+			completedValue = null;
+		}
+	});
+
+	let containerClasses = $derived(() => {
+		const classes = ['progress-container'];
+		if (className) classes.push(className);
+		return classes.join(' ');
+	});
+
+	let progressClasses = $derived(() => {
+		const classes = ['progress-fill'];
+		if (isCompleted) classes.push('completed');
+		if (variant !== 'default') classes.push(`progress-fill--${variant}`);
+		return classes.join(' ');
+	});
+
+	let displayStatusText = $derived(() => {
+		if (isCompleted) {
+			return 'Completed successfully';
+		}
+		return statusText || `${displayPercentage}%`;
+	});
+
+	let StatusIcon = $derived(() => {
+		if (isCompleted) {
+			return CheckCircleOutlinedIcon;
+		}
+		return WarningTriangleOutlineIcon;
+	});
+
+	let statusColor = $derived(() => {
+		if (isCompleted) return 'var(--greenText)';
+
+		switch (variant) {
+			case 'success':
+				return 'var(--greenText)';
+			case 'warning':
+				return 'var(--yellowText)';
+			case 'error':
+				return 'var(--redText)';
+			default:
+				return 'var(--text1)';
+		}
+	});
+
+	let progressFillColor = $derived(() => {
+		if (isCompleted) return 'var(--greenText)';
+
+		switch (variant) {
+			case 'success':
+				return 'var(--greenText)';
+			case 'warning':
+				return 'var(--yellowText)';
+			case 'error':
+				return 'var(--redText)';
+			default:
+				return 'var(--actionPrimaryBackground)';
+		}
+	});
+</script>
+
+<div
+	class={containerClasses()}
+	role="progressbar"
+	aria-valuenow={displayPercentage}
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-label={displayStatusText()}
+	aria-live="polite"
+	{...restProps}
+>
+	{#if showStatus || showPercentage || showSpinner}
+		<div class="progress-header">
+			<div class="status-info">
+				{#if showSpinner && !isCompleted}
+					<div class="progress-spinner">
+						<Loader size={12} margin="0" />
+					</div>
+				{/if}
+
+				<div class="status-icon" class:success={isCompleted}>
+					<StatusIcon />
+				</div>
+
+				{#if showStatus}
+					<Text
+						label={displayStatusText()}
+						fontColor={statusColor()}
+						fontSize="normal"
+						class="progress-status"
+					/>
+				{/if}
+			</div>
+
+			<div class="progress-details">
+				{#if showPercentage}
+					<Text
+						label="{displayPercentage}%"
+						fontColor={statusColor()}
+						fontSize="normal"
+						class="progress-percentage"
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="progress-track" style="height: {height}px;">
+		<div
+			class={progressClasses()}
+			style="width: {displayWidth}%; height: {height}px; background-color: {progressFillColor()};"
+		></div>
+	</div>
+</div>
+
+<style>
+	.progress-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.progress-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.status-info {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.status-icon :global(svg) {
+		width: 20px;
+		height: 20px;
+		color: var(--text1);
+	}
+
+	.status-icon.success :global(svg) {
+		color: var(--greenText);
+	}
+
+	.progress-details {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-shrink: 0;
+	}
+
+	.progress-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.progress-track {
+		width: 100%;
+		background-color: var(--black);
+		border-radius: 2px;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.progress-fill {
+		height: 100%;
+		border-radius: 2px;
+		transition: width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+		min-width: 1px;
+	}
+
+	.progress-fill.completed {
+		background-color: var(--greenText) !important;
+	}
+
+	.progress-fill--success {
+		background-color: var(--greenText);
+	}
+
+	.progress-fill--warning {
+		background-color: var(--yellowText);
+	}
+
+	.progress-fill--error {
+		background-color: var(--redText);
+	}
+
+	/* Ensure smooth transitions */
+	.progress-fill {
+		will-change: width;
+	}
+</style>

package/dist/ui/components/progress-bar/ProgressBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressBarProps } from './types.js';
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/ui/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './types.js';

package/dist/ui/components/progress-bar/index.js

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './types.js';

package/dist/ui/components/progress-bar/types.d.ts

@@ -0,0 +1,63 @@
+export type ProgressBarVariant = 'default' | 'success' | 'warning' | 'error';
+export type ProgressBarEasing = 'linear' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartOut';
+export interface ProgressBarProps {
+    /**
+     * Current progress value (0-100)
+     */
+    value: number;
+    /**
+     * Maximum value (default: 100)
+     */
+    max?: number;
+    /**
+     * Enable smooth animations (default: true)
+     */
+    animated?: boolean;
+    /**
+     * Animation duration in milliseconds (default: 400)
+     */
+    duration?: number;
+    /**
+     * Easing function (default: 'cubicOut')
+     */
+    easing?: ProgressBarEasing;
+    /**
+     * Show percentage text (default: true)
+     */
+    showPercentage?: boolean;
+    /**
+     * Show status text (default: false)
+     */
+    showStatus?: boolean;
+    /**
+     * Custom status text
+     */
+    statusText?: string;
+    /**
+     * Show loading spinner during progress (default: false)
+     */
+    showSpinner?: boolean;
+    /**
+     * Color scheme
+     */
+    variant?: ProgressBarVariant;
+    /**
+     * Height in pixels (default: 4)
+     */
+    height?: number;
+    /**
+     * Completed state - locks progress at final value
+     */
+    completed?: boolean;
+    /**
+     * Custom CSS class
+     */
+    class?: string;
+    /**
+     * Callback when progress completes
+     */
+    onComplete?: () => void;
+}
+export interface ProgressBarEvents {
+    complete: CustomEvent<void>;
+}

package/dist/ui/components/progress-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/select/Select.stories.d.ts

@@ -68,6 +68,14 @@ declare const meta: {
             control: string;
             description: string;
         };
+        alert: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -92,3 +100,11 @@ export declare const SingleOption: Story;
 export declare const LongOptions: Story;
 export declare const AccessibilityTest: Story;
 export declare const ManyOptions: Story;
+export declare const WithErrorAlert: Story;
+export declare const WithWarningAlert: Story;
+export declare const WithSuccessAlert: Story;
+export declare const WithInfoAlert: Story;
+export declare const InvalidState: Story;
+export declare const InvalidWithAlert: Story;
+export declare const ValidationStates: Story;
+export declare const FormValidationExample: Story;

package/dist/ui/components/select/Select.stories.js

@@ -114,6 +114,14 @@ const meta = {
         className: {
             control: 'text',
             description: 'Additional CSS classes'
+        },
+        alert: {
+            control: 'object',
+            description: 'Alert configuration for validation messages'
+        },
+        invalid: {
+            control: 'boolean',
+            description: 'Whether the select is in an invalid state'
         }
     }
 };
@@ -394,3 +402,168 @@ export const ManyOptions = {
         }
     }
 };
+// Validation and error states
+export const WithErrorAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select a required option',
+        alert: {
+            type: 'error',
+            message: 'This field is required. Please select an option.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows an error alert with a validation message. Hover over the select to see the tooltip.'
+            }
+        }
+    }
+};
+export const WithWarningAlert = {
+    args: {
+        options: basicOptions,
+        selected: 'option3',
+        defaultText: 'Select an option',
+        alert: {
+            type: 'warning',
+            message: 'This option may affect performance. Consider choosing a different option.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Warning alert to inform users about potential issues with their selection.'
+            }
+        }
+    }
+};
+export const WithSuccessAlert = {
+    args: {
+        options: basicOptions,
+        selected: 'option1',
+        defaultText: 'Select an option',
+        alert: {
+            type: 'success',
+            message: 'Great choice! This option is optimized for your use case.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Success alert to confirm a good selection or provide positive feedback.'
+            }
+        }
+    }
+};
+export const WithInfoAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select configuration',
+        alert: {
+            type: 'info',
+            message: 'Tip: You can change this setting later in your preferences.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Info alert to provide additional context or helpful information.'
+            }
+        }
+    }
+};
+export const InvalidState = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Invalid selection',
+        invalid: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows the select in an invalid state with red outline styling.'
+            }
+        }
+    }
+};
+export const InvalidWithAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select a value',
+        invalid: true,
+        alert: {
+            type: 'error',
+            message: 'Please select a valid option to continue.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Combines invalid state styling with an error alert message for comprehensive validation feedback.'
+            }
+        }
+    }
+};
+export const ValidationStates = {
+    args: {
+        options: [
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' },
+            { label: 'Option C', value: 'c' }
+        ],
+        defaultText: 'Validation example'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic validation state. See other validation stories (WithErrorAlert, WithWarningAlert, etc.) for different alert types and invalid states.'
+            }
+        }
+    }
+};
+// Form validation example
+export const FormValidationExample = {
+    render: (args) => ({
+        Component: Select,
+        props: {
+            ...args,
+            onchange: (event) => {
+                // Simulate form validation
+                const value = event.value;
+                if (!value) {
+                    // Update to show required field error
+                    console.log('Validation: Field is required');
+                }
+                else if (value === 'option3') {
+                    // Show warning for specific option
+                    console.log('Validation: Warning for option 3');
+                }
+                else {
+                    // Valid selection
+                    console.log('Validation: Valid selection');
+                }
+            }
+        }
+    }),
+    args: {
+        options: [
+            { label: 'Valid Option 1', value: 'option1' },
+            { label: 'Valid Option 2', value: 'option2' },
+            { label: 'Problematic Option', value: 'option3' },
+            { label: 'Another Valid Option', value: 'option4' }
+        ],
+        defaultText: 'Choose wisely...',
+        alert: {
+            type: 'info',
+            message: 'Select an option to see validation feedback'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing how validation states might change based on user selection in a real form.'
+            }
+        }
+    }
+};

package/dist/ui/components/select/Select.svelte

@@ -12,6 +12,7 @@
 
 	import { CheckIcon, ChevronIcon, UndoIcon } from '../../icons';
 
+	import { Tooltip } from '..';
 	import { Text } from '../text';
 	import type { DropdownInstance, SelectInstanceManager, SelectProps } from './types.js';
 
@@ -33,6 +34,8 @@
 		preventNoSelection = false,
 		disabled = false,
 		placement = 'bottom',
+		alert = null,
+		invalid = false,
 		className = '',
 		onchange,
 		children
@@ -85,6 +88,9 @@
 		}
 	});
 
+	// Computed states
+	let hasAlert = $derived(alert?.message);
+
 	// Computed styles based on state
 	const dropdownStyles = $derived(() => {
 		const base = {
@@ -101,17 +107,17 @@
 			};
 		}
 
-		if (hasError) {
+		if (hasError || hasAlert || invalid) {
 			return {
 				...base,
-				border: '1px solid var(--redBorder)'
+				outline: '1px solid var(--redBorder)'
 			};
 		}
 
 		if (isFocused) {
 			return {
 				...base,
-				border: '1px solid var(--blueBorder)'
+				outline: '1px solid var(--blueBorder)'
 			};
 		}
 
@@ -393,6 +399,23 @@
 		debouncedFilterOptions(searchValue, options);
 	};
 
+	/**
+	 * Gets the tooltip background color based on alert type
+	 */
+	const getTooltipColor = (alertType: string) => {
+		switch (alertType) {
+			case 'error':
+				return 'var(--redBackground, #ff4d4d)';
+			case 'warning':
+				return 'var(--orangeBackground, #ff9933)';
+			case 'success':
+				return 'var(--greenBackground, #00cc66)';
+			case 'info':
+			default:
+				return 'var(--blueBackground, #4d9fff)';
+		}
+	};
+
 	// Lifecycle cleanup
 	$effect(() => {
 		return () => {
@@ -401,134 +424,159 @@
 	});
 </script>
 
-<div
-	class="dropdown-wrapper {className}"
-	bind:this={dropdownWrapper}
-	style="{hide ? 'display:none;' : ''} width: {width};"
->
+{#snippet selectWrapper()}
 	<div
-		class="dropdown"
-		class:disabled
-		{id}
-		style="width:{width}; {Object.entries(dropdownStyles())
-			.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
-			.join('; ')}"
-		aria-disabled={disabled}
-		tabindex={disabled || isOpen ? -1 : 0}
-		role="button"
-		aria-haspopup="listbox"
-		aria-labelledby={id}
-		bind:this={target}
-		onmouseenter={() => (isHovered = true)}
-		onmouseleave={() => (isHovered = false)}
-		onfocus={() => (isFocused = true)}
-		onblur={() => (isFocused = false)}
+		class="dropdown-wrapper {className}"
+		bind:this={dropdownWrapper}
+		style="{hide ? 'display:none;' : ''} width: {width};"
 	>
-		<div class="dropdown-header" aria-disabled={disabled}>
-			<div class="label">
-				{selected ? selectedLabel || defaultText : defaultText}
-			</div>
-			<div class="arrow" style="transform:rotate({isOpen ? '270deg' : '90deg'})">
-				<ChevronIcon />
-			</div>
-		</div>
-
 		<div
+			class="dropdown"
+			class:disabled
+			{id}
+			style="width:{width}; {Object.entries(dropdownStyles())
+				.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+				.join('; ')}"
+			aria-disabled={disabled}
 			tabindex={disabled || isOpen ? -1 : 0}
-			class="dropdown-list"
-			role="listbox"
-			style="width:{dropdownWidth}; max-height:{dropdownHeight};"
-			onkeydown={(e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				handleKeyDown(e);
-			}}
-			bind:this={dropdownItems}
+			role="button"
+			aria-haspopup="listbox"
+			aria-labelledby={id}
+			bind:this={target}
+			onmouseenter={() => (isHovered = true)}
+			onmouseleave={() => (isHovered = false)}
+			onfocus={() => (isFocused = true)}
+			onblur={() => (isFocused = false)}
 		>
-			{#if selectedLabel}
-				<div class="selected">
-					<div class="label">
-						<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
-					</div>
+			<div class="dropdown-header" aria-disabled={disabled}>
+				<div class="label">
+					{selected ? selectedLabel || defaultText : defaultText}
 				</div>
-			{/if}
-
-			{#if enableSearch}
-				<div class="search-container">
-					<input
-						type="text"
-						placeholder="Search"
-						oninput={(e) => {
+				<div class="arrow" style="transform:rotate({isOpen ? '270deg' : '90deg'})">
+					<ChevronIcon />
+				</div>
+			</div>
+
+			<div
+				tabindex={disabled || isOpen ? -1 : 0}
+				class="dropdown-list"
+				role="listbox"
+				style="width:{dropdownWidth}; max-height:{dropdownHeight};"
+				onkeydown={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleKeyDown(e);
+				}}
+				bind:this={dropdownItems}
+			>
+				{#if selectedLabel}
+					<div class="selected">
+						<div class="label">
+							<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+						</div>
+					</div>
+				{/if}
+
+				{#if enableSearch}
+					<div class="search-container">
+						<input
+							type="text"
+							placeholder="Search"
+							oninput={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleSearch(e);
+							}}
+							onkeydown={(e) => e.stopPropagation()}
+						/>
+					</div>
+				{/if}
+
+				{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
+					{@const indexId = index + 1}
+					{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
+					<button
+						aria-posinset={indexId}
+						aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
+						id={`${itemId}-list-${indexId}-${id}`}
+						data-value={value}
+						class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+						role="option"
+						onclick={(e) => {
+							e.stopPropagation();
+							if (isDisabled) return;
+							handleSelect(value, label, e.currentTarget);
+						}}
+						onkeydown={(e) => {
 							e.stopPropagation();
 							e.preventDefault();
-							handleSearch(e);
 						}}
-						onkeydown={(e) => e.stopPropagation()}
-					/>
-				</div>
-			{/if}
-
-			{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
-				{@const indexId = index + 1}
-				{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
-				<button
-					aria-posinset={indexId}
-					aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
-					id={`${itemId}-list-${indexId}-${id}`}
-					data-value={value}
-					class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
-					role="option"
-					onclick={(e) => {
-						e.stopPropagation();
-						if (isDisabled) return;
-						handleSelect(value, label, e.currentTarget);
-					}}
-					onkeydown={(e) => {
-						e.stopPropagation();
-						e.preventDefault();
-					}}
-					onmouseenter={handleMouseEnter}
-					aria-hidden={!isOpen}
-					tabindex={value === selected ? 0 : -1}
-					style={description ? 'align-items:start;' : ''}
-				>
-					<div class="icon" aria-label={label}>
-						{#if value === selected && selected?.trim() !== ''}
-							<CheckIcon />
-						{/if}
-					</div>
-					<div class="label">
-						{#if description || descriptionTitle || labelIcon}
-							<div class="label-content">
-								<div class="label-name">
-									<Text {label} />
-									{#if labelIcon}
-										{@const IconComponent = labelIcon}
-										<IconComponent />
-									{/if}
-								</div>
-								<div class="label-description-title">
-									<Text
-										label={descriptionTitle || ''}
-										fontColor="var(--greenText)"
-										fontSize="10px"
-									/>
+						onmouseenter={handleMouseEnter}
+						aria-hidden={!isOpen}
+						tabindex={value === selected ? 0 : -1}
+						style={description ? 'align-items:start;' : ''}
+					>
+						<div class="icon" aria-label={label}>
+							{#if value === selected && selected?.trim() !== ''}
+								<CheckIcon />
+							{/if}
+						</div>
+						<div class="label">
+							{#if description || descriptionTitle || labelIcon}
+								<div class="label-content">
+									<div class="label-name">
+										<Text {label} />
+										{#if labelIcon}
+											{@const IconComponent = labelIcon}
+											<IconComponent />
+										{/if}
+									</div>
+									<div class="label-description-title">
+										<Text
+											label={descriptionTitle || ''}
+											fontColor="var(--greenText)"
+											fontSize="10px"
+										/>
+									</div>
+									<div class="label-description">
+										<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
+									</div>
 								</div>
-								<div class="label-description">
-									<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
-								</div>
-							</div>
-						{:else}
-							<Text {label} fontSize="normal" />
-						{/if}
-					</div>
-				</button>
-			{/each}
+							{:else}
+								<Text {label} fontSize="normal" />
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
 		</div>
 	</div>
-</div>
+{/snippet}
+
+<Tooltip
+	message={hasAlert ? alert?.message || '' : ''}
+	placement="top"
+	listener="hover"
+	listenerout="hover"
+	showArrow={true}
+	hidden={!hasAlert}
+	disabled={!hasAlert || !alert?.message}
+	fontColor="var(--actionPrimaryText)"
+	width="max-content"
+	padding="6px"
+	bgColor={getTooltipColor(alert?.type || 'info')}
+	class="select-tooltip"
+>
+	{#snippet target()}
+		{@render selectWrapper()}
+	{/snippet}
+</Tooltip>
 
 <style>
+	:global(.select-tooltip) {
+		padding: 0;
+	}
+
 	.dropdown-item.disabled {
 		opacity: 0.75;
 		cursor: not-allowed;
@@ -619,7 +667,7 @@
 	}
 
 	.dropdown-list :global(.dropdown-item.hover-state) {
-		border: 1px solid var(--blueBorder);
+		outline: 1px solid var(--blueBorder);
 	}
 
 	.dropdown-list {

package/dist/ui/components/select/types.d.ts

@@ -1,5 +1,10 @@
 import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
+export type AlertType = 'error' | 'success' | 'info' | 'warning';
+export interface AlertConfig {
+    type: AlertType;
+    message: string;
+}
 export type SelectValue = string & {
     readonly brand: unique symbol;
 };
@@ -37,6 +42,14 @@ export interface SelectProps {
     preventNoSelection?: boolean;
     disabled?: boolean;
     placement?: Placement;
+    /**
+     * Alert configuration for showing validation messages
+     */
+    alert?: AlertConfig | null;
+    /**
+     * If true, the select will be invalid
+     */
+    invalid?: boolean;
     className?: string;
     onchange?: SelectChangeHandler;
     children?: Snippet;

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -345,11 +345,11 @@
 		{#if tooltip}
 			{@render tooltip()}
 		{:else if message && raw}
-			<div class="message" style="color:{fontColor};">
+			<div class="message" style="color:{fontColor}; background-color: {bgColor};">
 				{@html message}
 			</div>
 		{:else if message}
-			<div class="message">
+			<div class="message" style="color:{fontColor}; background-color: {bgColor};">
 				<Text label={formattedMessage} fontSize="11px" fontWeight="500" {fontColor} />
 			</div>
 		{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {