ui-svelte 0.2.9 → 0.2.11

package/dist/css/animations.css

@@ -1,5 +1,6 @@
+
 @utility fade-in {
-	animation: fade-in 0.6s ease-out;
+	animation: fade-in 0.6s ease-out forwards;
 }
 
 @keyframes fade-in {
@@ -11,8 +12,69 @@
 	}
 }
 
+@utility fade-in-up {
+	animation: fade-in-up 0.6s ease-out forwards;
+}
+
+@keyframes fade-in-up {
+	from {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@utility fade-in-down {
+	animation: fade-in-down 0.6s ease-out forwards;
+}
+
+@keyframes fade-in-down {
+	from {
+		opacity: 0;
+		transform: translateY(-30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@utility fade-in-left {
+	animation: fade-in-left 0.6s ease-out forwards;
+}
+
+@keyframes fade-in-left {
+	from {
+		opacity: 0;
+		transform: translateX(-30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@utility fade-in-right {
+	animation: fade-in-right 0.6s ease-out forwards;
+}
+
+@keyframes fade-in-right {
+	from {
+		opacity: 0;
+		transform: translateX(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+/* Zoom Animations */
 @utility zoom-in {
-	animation: zoom-in 0.4s ease-out;
+	animation: zoom-in 0.5s ease-out forwards;
 }
 
 @keyframes zoom-in {
@@ -25,3 +87,370 @@
 		transform: scale(1);
 	}
 }
+
+@utility zoom-in-up {
+	animation: zoom-in-up 0.6s ease-out forwards;
+}
+
+@keyframes zoom-in-up {
+	from {
+		opacity: 0;
+		transform: scale(0.9) translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+}
+
+/* Slide Animations (sin fade) */
+@utility slide-up {
+	animation: slide-up 0.5s ease-out forwards;
+}
+
+@keyframes slide-up {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+@utility slide-down {
+	animation: slide-down 0.5s ease-out forwards;
+}
+
+@keyframes slide-down {
+	from {
+		transform: translateY(-100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+@utility slide-left {
+	animation: slide-left 0.5s ease-out forwards;
+}
+
+@keyframes slide-left {
+	from {
+		transform: translateX(100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+
+@utility slide-right {
+	animation: slide-right 0.5s ease-out forwards;
+}
+
+@keyframes slide-right {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+
+/* Bounce Animations */
+@utility bounce-in {
+	animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+@keyframes bounce-in {
+	0% {
+		opacity: 0;
+		transform: scale(0.3);
+	}
+	50% {
+		transform: scale(1.05);
+	}
+	70% {
+		transform: scale(0.95);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@utility bounce-in-up {
+	animation: bounce-in-up 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+@keyframes bounce-in-up {
+	0% {
+		opacity: 0;
+		transform: translateY(50px);
+	}
+	60% {
+		opacity: 1;
+		transform: translateY(-10px);
+	}
+	80% {
+		transform: translateY(5px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+
+/* Reveal Animations (para textos y títulos) */
+@utility reveal-up {
+	animation: reveal-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes reveal-up {
+	from {
+		opacity: 0;
+		transform: translateY(60px);
+		filter: blur(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+		filter: blur(0);
+	}
+}
+
+@utility reveal-scale {
+	animation: reveal-scale 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes reveal-scale {
+	from {
+		opacity: 0;
+		transform: scale(0.95) translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+}
+
+@utility flip-in-x {
+	animation: flip-in-x 0.6s ease-out forwards;
+}
+
+@keyframes flip-in-x {
+	from {
+		opacity: 0;
+		transform: perspective(400px) rotateX(90deg);
+	}
+	to {
+		opacity: 1;
+		transform: perspective(400px) rotateX(0);
+	}
+}
+
+@utility flip-in-y {
+	animation: flip-in-y 0.6s ease-out forwards;
+}
+
+@keyframes flip-in-y {
+	from {
+		opacity: 0;
+		transform: perspective(400px) rotateY(90deg);
+	}
+	to {
+		opacity: 1;
+		transform: perspective(400px) rotateY(0);
+	}
+}
+
+@utility float {
+	animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+}
+
+@utility pulse-soft {
+	animation: pulse-soft 2s ease-in-out infinite;
+}
+
+@keyframes pulse-soft {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.8;
+		transform: scale(1.02);
+	}
+}
+
+@utility delay-0 {
+	animation-delay: 0ms;
+}
+
+@utility delay-75 {
+	animation-delay: 75ms;
+}
+
+@utility delay-100 {
+	animation-delay: 100ms;
+}
+
+@utility delay-150 {
+	animation-delay: 150ms;
+}
+
+@utility delay-200 {
+	animation-delay: 200ms;
+}
+
+@utility delay-300 {
+	animation-delay: 300ms;
+}
+
+@utility delay-400 {
+	animation-delay: 400ms;
+}
+
+@utility delay-500 {
+	animation-delay: 500ms;
+}
+
+@utility delay-600 {
+	animation-delay: 600ms;
+}
+
+@utility delay-700 {
+	animation-delay: 700ms;
+}
+
+@utility delay-800 {
+	animation-delay: 800ms;
+}
+
+@utility delay-1000 {
+	animation-delay: 1000ms;
+}
+
+@utility duration-300 {
+	animation-duration: 300ms;
+}
+
+@utility duration-500 {
+	animation-duration: 500ms;
+}
+
+@utility duration-700 {
+	animation-duration: 700ms;
+}
+
+@utility duration-1000 {
+	animation-duration: 1000ms;
+}
+
+@utility reveal {
+	opacity: 0;
+	transform: translateY(40px);
+	transition:
+		opacity 0.6s ease-out,
+		transform 0.6s ease-out;
+}
+
+@utility reveal.is-visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+@utility reveal-left {
+	opacity: 0;
+	transform: translateX(-40px);
+	transition:
+		opacity 0.6s ease-out,
+		transform 0.6s ease-out;
+}
+
+@utility reveal-left.is-visible {
+	opacity: 1;
+	transform: translateX(0);
+}
+
+@utility reveal-right {
+	opacity: 0;
+	transform: translateX(40px);
+	transition:
+		opacity 0.6s ease-out,
+		transform 0.6s ease-out;
+}
+
+@utility reveal-right.is-visible {
+	opacity: 1;
+	transform: translateX(0);
+}
+
+@utility reveal-zoom {
+	opacity: 0;
+	transform: scale(0.9);
+	transition:
+		opacity 0.6s ease-out,
+		transform 0.6s ease-out;
+}
+
+@utility reveal-zoom.is-visible {
+	opacity: 1;
+	transform: scale(1);
+}
+
+@utility shake {
+	animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	20%,
+	60% {
+		transform: translateX(-5px);
+	}
+	40%,
+	80% {
+		transform: translateX(5px);
+	}
+}
+
+@utility wiggle {
+	animation: wiggle 1s ease-in-out infinite;
+}
+
+@keyframes wiggle {
+	0%,
+	100% {
+		transform: rotate(-3deg);
+	}
+	50% {
+		transform: rotate(3deg);
+	}
+}
+
+@utility glow {
+	animation: glow 2s ease-in-out infinite;
+}
+
+@keyframes glow {
+	0%,
+	100% {
+		box-shadow: 0 0 5px var(--primary);
+	}
+	50% {
+		box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary);
+	}
+}

package/dist/display/Avatar.svelte

@@ -5,6 +5,9 @@
 		src?: string;
 		name?: string;
 		alt?: string;
+		href?: string;
+		onclick?: () => void;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 		variant?:
 			| 'primary'
 			| 'secondary'
@@ -24,6 +27,9 @@
 		src,
 		name,
 		alt = 'Avatar',
+		href,
+		onclick,
+		target,
 		size = 'lg',
 		variant = 'primary',
 		status,
@@ -56,17 +62,20 @@
 		busy: 'is-busy',
 		away: 'is-away'
 	};
+
+	const baseClasses = $derived(
+		cn(
+			'avatar',
+			sizeClasses[size],
+			variantClasses[variant],
+			isBordered && 'is-bordered',
+			(href || onclick) && 'is-clickable',
+			className
+		)
+	);
 </script>
 
-<div
-	class={cn(
-		'avatar',
-		sizeClasses[size],
-		variantClasses[variant],
-		isBordered && 'is-bordered',
-		className
-	)}
->
+{#snippet avatarContent()}
 	{#if status}
 		<div class="avatar-status">
 			<div class={cn('avatar-indicator', statusClasses[status])}></div>
@@ -77,4 +86,18 @@
 	{:else}
 		<span class="avatar-name">{name?.charAt(0).toUpperCase() || alt.charAt(0).toUpperCase()}</span>
 	{/if}
-</div>
+{/snippet}
+
+{#if href}
+	<a class={baseClasses} {href} {target}>
+		{@render avatarContent()}
+	</a>
+{:else if onclick}
+	<button type="button" class={baseClasses} {onclick}>
+		{@render avatarContent()}
+	</button>
+{:else}
+	<div class={baseClasses}>
+		{@render avatarContent()}
+	</div>
+{/if}

package/dist/display/Avatar.svelte.d.ts

@@ -2,6 +2,9 @@ type Props = {
     src?: string;
     name?: string;
     alt?: string;
+    href?: string;
+    onclick?: () => void;
+    target?: '_self' | '_blank' | '_parent' | '_top';
     variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger' | 'info' | 'transparent';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     status?: 'online' | 'offline' | 'busy' | 'away';

package/dist/display/AvatarGroup.svelte

@@ -6,6 +6,9 @@
 		src?: string;
 		name?: string;
 		alt?: string;
+		href?: string;
+		onclick?: () => void;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 	};
 
 	type Props = {
@@ -46,13 +49,16 @@
 			src={item.src}
 			name={item.name}
 			alt={item.alt || `Avatar ${i + 1}`}
+			href={item.href}
+			onclick={item.onclick}
+			target={item.target}
 			{variant}
 			{size}
 			{isBordered}
 		/>
 	{/each}
 	{#if remainingCount > 0}
-		<div class={cn('avatar-group-counter', `is-${size}`)}>
+		<div class={cn('avatar-group-counter', `is-${size}`, `is-${variant}`)}>
 			+{remainingCount}
 		</div>
 	{/if}

package/dist/display/AvatarGroup.svelte.d.ts

@@ -2,6 +2,9 @@ type AvatarItem = {
     src?: string;
     name?: string;
     alt?: string;
+    href?: string;
+    onclick?: () => void;
+    target?: '_self' | '_blank' | '_parent' | '_top';
 };
 type Props = {
     items: AvatarItem[];

package/dist/display/Item.svelte

@@ -63,12 +63,6 @@
 		lg: 'is-lg'
 	};
 
-	const avatarSizes: Record<string, 'sm' | 'md' | 'lg' | 'xl'> = {
-		sm: 'md',
-		md: 'lg',
-		lg: 'xl'
-	};
-
 	const isInteractive = $derived(!!href || !!onclick);
 
 	let itemClasses = $derived(
@@ -92,10 +86,10 @@
 
 {#snippet itemContent()}
 	{#if icon}
-		<Icon {icon} />
+		<Icon {icon} class="h-6 w-auto" />
 	{/if}
 	{#if src}
-		<Avatar {src} {status} size={avatarSizes[size]} variant="transparent" />
+		<Avatar {src} {status} {size} variant="transparent" />
 	{/if}
 	<div class="item-body">
 		<div class="item-label">{label}</div>

package/dist/display/Section.svelte

@@ -50,22 +50,14 @@
 	};
 </script>
 
-<div
-	class={cn(
-		'section',
-		variantClasses[variant],
-		isSolid && 'is-solid',
-		isBoxed && 'boxed',
-		rootClass
-	)}
->
+<div class={cn('section', variantClasses[variant], isSolid && 'is-solid', rootClass)}>
 	{#if cover}
 		<img src={cover} alt="cover" class={cn('section-cover', coverClass)} />
 	{/if}
 	{#if hasOverlay}
 		<div class={cn('section-overlay', overlayClass)}></div>
 	{/if}
-	<div class={cn('section-body', bodyClass)}>
+	<div class={cn('section-body', isBoxed && 'boxed', bodyClass)}>
 		{@render children()}
 	</div>
 </div>

package/dist/display/css/avatar-group.css

@@ -7,21 +7,52 @@
         @apply gap-0;
 
         &>.avatar {
-            @apply -ml-2 first:ml-0;
-            @apply outline-2 outline-background rounded-ui;
+            @apply -ml-3 first:ml-0;
+            @apply ring-3 ring-background rounded-ui;
             @apply transition-transform hover:z-10 hover:scale-110;
         }
 
         &>.avatar-group-counter {
-            @apply -ml-2;
+            @apply -ml-3 z-10;
         }
     }
 
     .avatar-group-counter {
         @apply flex items-center justify-center;
-        @apply bg-muted text-on-muted;
         @apply rounded-ui font-medium;
-        @apply outline-2 outline-background;
+        @apply ring-3 ring-background;
+    }
+
+    .avatar-group-counter.is-primary {
+        @apply bg-primary text-on-primary;
+    }
+
+    .avatar-group-counter.is-secondary {
+        @apply bg-secondary text-on-secondary;
+    }
+
+    .avatar-group-counter.is-muted {
+        @apply bg-muted text-on-muted;
+    }
+
+    .avatar-group-counter.is-success {
+        @apply bg-success text-on-success;
+    }
+
+    .avatar-group-counter.is-warning {
+        @apply bg-warning text-on-warning;
+    }
+
+    .avatar-group-counter.is-danger {
+        @apply bg-danger text-on-danger;
+    }
+
+    .avatar-group-counter.is-info {
+        @apply bg-info text-on-info;
+    }
+
+    .avatar-group-counter.is-transparent {
+        @apply bg-transparent text-on-background;
     }
 
     .avatar-group-counter.is-xs {

package/dist/display/css/avatar.css

@@ -5,6 +5,19 @@
 		@apply transition-all duration-200;
 	}
 
+	.avatar.is-clickable {
+		@apply cursor-pointer;
+		@apply hover:opacity-80 hover:scale-105;
+		@apply active:scale-95;
+	}
+
+	/* Reset button/anchor styles when used as clickable */
+	button.avatar,
+	a.avatar {
+		@apply border-0 bg-transparent p-0;
+		@apply no-underline;
+	}
+
 	.avatar.is-primary {
 		@apply bg-primary text-on-primary;
 	}
@@ -34,9 +47,7 @@
 	}
 
 	.avatar.is-bordered {
-		.avatar-image {
-			@apply ring-2 ring-muted;
-		}
+		@apply ring-3 ring-background;
 	}
 
 	.avatar.is-transparent {

package/dist/form/{PasswordField.svelte → PasswordStrength.svelte}

@@ -1,25 +1,21 @@
 <script lang="ts">
-	import Button from '../control/Button.svelte';
-	import { Icon } from '../index.js';
+	import IconButton from '../control/IconButton.svelte';
+	import { EyeOffRegularIcon, EyeShowRegularIcon } from '../icons/index.js';
 	import { cn } from '../utils/class-names.js';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	type Props = {
 		value?: string;
 		defaultValue?: string;
 		placeholder?: string;
-		type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-		class?: string;
-		inputClass?: string;
+		rootClass?: string;
+		controlClass?: string;
 		onchange?: (value: string | number | undefined) => void;
 		oninput?: (value: string | number | undefined) => void;
-		variant?: 'solid' | 'outlined' | 'soft' | 'line';
-		color?: 'primary' | 'secondary' | 'muted';
-		inputSize?: 'small' | 'medium' | 'large';
+		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
 		name?: string;
 		label?: string;
-		labelOutside?: boolean;
-		labelActive?: boolean;
+		islabelActive?: boolean;
 		helpText?: string;
 		errorText?: string;
 		labels?: {
@@ -27,24 +23,24 @@
 			medium?: string;
 			strong?: string;
 		};
-	} & HTMLInputAttributes;
+		isFloatLabel?: boolean;
+		isSolid?: boolean;
+	};
 
 	let {
 		value = $bindable(),
 		defaultValue,
 		placeholder,
-		type = 'text',
-		class: className,
-		inputClass,
+		rootClass,
+		controlClass,
 		onchange,
 		oninput,
-		variant = 'soft',
-		color = 'primary',
-		inputSize = 'medium',
+		variant = 'outlined',
+		size = 'md',
 		name,
 		label,
-		labelOutside,
-		labelActive,
+		isFloatLabel,
+		islabelActive,
 		helpText,
 		errorText,
 		labels = {
@@ -52,32 +48,30 @@
 			medium: 'Medium',
 			strong: 'Strong'
 		},
-		...rest
+		isSolid
 	}: Props = $props();
 
-	const variants = {
-		solid: 'field-solid',
-		outlined: 'field-outlined',
-		soft: 'field-soft',
-		line: 'field-line'
-	};
-	const colors = {
-		primary: 'field-primary',
-		secondary: 'field-secondary',
-		muted: 'field-muted'
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outlined: 'is-outlined',
+		line: 'is-line'
 	};
 
-	const sizes = {
-		small: 'field-small',
-		medium: 'field-medium',
-		large: 'field-large'
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
 	};
 
 	const uid = $props.id();
 
+	let isActive = $state(false);
+
 	let show = $state(false);
 	let isFocused = $state(false);
-	let strength = $derived(calculateStrength(value));
+	let strength = $derived(calculateStrength(value as string));
 
 	function isBarActive(barIndex: number, score: number): boolean {
 		const threshold = (barIndex + 1) * 1.5;
@@ -114,40 +108,59 @@
 	}
 </script>
 
-<div class={cn('field', className)}>
-	{#if labelOutside && label}
-		<label for={`${uid}-{name}`} class="label">{label}</label>
+<div class={cn('field', rootClass)}>
+	{#if !isFloatLabel && label}
+		<span class="field-label">{label}</span>
 	{/if}
-	<div
-		class={cn('field-control', variants[variant], colors[color], sizes[inputSize])}
+	<label
+		class={cn(
+			'control',
+			variantClasses[variant],
+			sizeClasses[size],
+			isSolid && 'is-solid',
+			isFloatLabel && 'is-float',
+			(isActive || isFocused) && 'is-active',
+			controlClass
+		)}
+		for={`${uid}-{name}`}
 		class:is-error={errorText}
+		onmouseenter={() => (isActive = true)}
+		onmouseleave={() => (isActive = false)}
 	>
-		{#if !labelOutside && label}
-			<label class:is-active={isFocused || value} for={`${uid}-{name}`} class="label-inside"
-				>{label}</label
+		{#if isFloatLabel && label}
+			<span
+				class={cn(
+					'control-label',
+					(isActive || isFocused || islabelActive || value !== '') && 'is-active'
+				)}
 			>
+				{label}
+			</span>
 		{/if}
 		<input
 			type={show ? 'text' : 'password'}
 			bind:value
 			id={`${uid}-{name}`}
-			class={cn('field-input', inputClass)}
-			placeholder={isFocused ? placeholder : ''}
+			class={cn(
+				'control-input',
+				isFloatLabel && !isActive && !isFocused && value == '' && 'invisible',
+				controlClass
+			)}
+			{placeholder}
 			{name}
-			{defaultValue}
 			onchange={(e) => onchange?.((e.target as HTMLInputElement).value)}
 			oninput={(e) => oninput?.((e.target as HTMLInputElement).value)}
-			onfocusin={() => {
-				if (!labelActive) isFocused = true;
-			}}
-			onfocusout={() => {
-				if (!labelActive) isFocused = false;
-			}}
-			{...rest}
+			onfocusin={() => (isFocused = true)}
+			onfocusout={() => (isFocused = false)}
 		/>
-		<Button class={cn('field-eye')} onclick={() => (show = !show)}>eye icon</Button>
-	</div>
-	<div class={cn('field-strength', className)}>
+		<IconButton
+			variant="ghost"
+			size="sm"
+			icon={show ? EyeShowRegularIcon : EyeOffRegularIcon}
+			onclick={() => (show = !show)}
+		/>
+	</label>
+	<div class={cn('field-strength')}>
 		<div class="field-strength-bars">
 			{#each Array(4) as _, i}
 				<div
@@ -160,11 +173,9 @@
 			{/each}
 		</div>
 	</div>
-	{#if errorText || helpText || strength.label}
-		<div
-			class={cn('field-help', strength.label && 'field-strength-label', errorText && 'is-error')}
-		>
-			{strength.label ? strength.label : errorText ? errorText : helpText}
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
 		</div>
 	{/if}
 </div>

package/dist/form/PasswordStrength.svelte.d.ts

@@ -0,0 +1,26 @@
+type Props = {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    rootClass?: string;
+    controlClass?: string;
+    onchange?: (value: string | number | undefined) => void;
+    oninput?: (value: string | number | undefined) => void;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    label?: string;
+    islabelActive?: boolean;
+    helpText?: string;
+    errorText?: string;
+    labels?: {
+        weak?: string;
+        medium?: string;
+        strong?: string;
+    };
+    isFloatLabel?: boolean;
+    isSolid?: boolean;
+};
+declare const PasswordStrength: import("svelte").Component<Props, {}, "value">;
+type PasswordStrength = ReturnType<typeof PasswordStrength>;
+export default PasswordStrength;

package/dist/form/PhoneField.svelte

@@ -84,6 +84,7 @@
 	let contentEl = $state<HTMLElement>();
 	let optionsEl = $state<HTMLElement>();
 	let phoneInputEl = $state<HTMLInputElement>();
+	let searchInputEl = $state<HTMLInputElement>();
 	let focusedIndex = $state(-1);
 	let searchTerm = $state('');
 	let searchTimeout: ReturnType<typeof setTimeout> | null = $state(null);
@@ -284,6 +285,10 @@
 			await tick();
 			await updatePosition();
 			isOpen = true;
+			await tick();
+			setTimeout(() => {
+				searchInputEl?.focus();
+			}, 100);
 		} else {
 			stopEventListeners();
 			focusedIndex = -1;
@@ -401,7 +406,7 @@
 				/>
 				<span class="phone-dial-code">+{dialCode}</span>
 			{:else}
-				<Avatar name="Select country" {size} variant="transparent" />
+				<Icon icon={countryFlagsIcons[`country-flags:xx`] as IconData} class="h-5 w-5" />
 				<span class="phone-dial-code">+--</span>
 			{/if}
 			<Icon icon={ChevronDown24RegularIcon} class={cn('control-arrow', isOpen && 'is-active')} />
@@ -409,7 +414,7 @@
 
 		<input
 			bind:this={phoneInputEl}
-			type="tel"
+			type="number"
 			{name}
 			bind:value
 			class={cn(
@@ -431,6 +436,7 @@
 		<div class={cn('combo-box-search', variantClasses[variant])}>
 			<Icon icon={Search24RegularIcon} class="combo-box-search-icon" />
 			<input
+				bind:this={searchInputEl}
 				type="text"
 				class="combo-box-search-input"
 				placeholder={searchPlaceholder}

package/dist/form/Toggle.svelte

@@ -8,6 +8,8 @@
 		disabled?: boolean;
 		class?: string;
 		label?: string;
+		labelLeft?: string;
+		labelRight?: string;
 		name?: string;
 		color?: 'primary' | 'secondary' | 'muted';
 	};
@@ -18,6 +20,8 @@
 		disabled = false,
 		class: className,
 		label,
+		labelLeft,
+		labelRight,
 		name,
 		color = 'primary'
 	}: Props = $props();
@@ -30,6 +34,9 @@
 </script>
 
 <label class={cn('toggle', className)}>
+	{#if labelLeft}
+		<span class={cn('toggle-label-left', !checked && 'is-active')}>{labelLeft}</span>
+	{/if}
 	<input
 		type="checkbox"
 		class={cn('toggle-input', colors[color])}
@@ -39,6 +46,9 @@
 		{disabled}
 		onchange={() => onchange && onchange(checked!)}
 	/>
+	{#if labelRight}
+		<span class={cn('toggle-label-right', checked && 'is-active')}>{labelRight}</span>
+	{/if}
 	{#if label}
 		<span class="label">{label}</span>
 	{/if}

package/dist/form/Toggle.svelte.d.ts

@@ -5,6 +5,8 @@ type Props = {
     disabled?: boolean;
     class?: string;
     label?: string;
+    labelLeft?: string;
+    labelRight?: string;
     name?: string;
     color?: 'primary' | 'secondary' | 'muted';
 };

package/dist/form/css/password.css

@@ -24,7 +24,7 @@
 		transition: background-color 0.2s ease;
 	}
 	.field-strength-bar-item.active.weak {
-		background-color: var(--color-error);
+		background-color: var(--color-danger);
 	}
 	.field-strength-bar-item.active.medium {
 		background-color: var(--color-warning);

package/dist/form/css/toggle.css

@@ -23,5 +23,14 @@
 				@apply bg-on-muted;
 			}
 		}
+
+		.toggle-label-left,
+		.toggle-label-right {
+			@apply text-muted transition-colors duration-200;
+
+			&.is-active {
+				@apply text-on-muted;
+			}
+		}
 	}
 }

package/dist/icons/index.d.ts

@@ -130,3 +130,11 @@ export declare const Warning24RegularIcon: {
     body: string;
     viewbox: string;
 };
+export declare const EyeShowRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const EyeOffRegularIcon: {
+    body: string;
+    viewbox: string;
+};

package/dist/icons/index.js

@@ -130,3 +130,11 @@ export const Warning24RegularIcon = {
     body: '<path fill="currentColor" d="M13 17a.999.999 0 1 0-1.998 0a.999.999 0 0 0 1.997 0m-.26-7.853a.75.75 0 0 0-1.493.103l.004 4.501l.007.102a.75.75 0 0 0 1.493-.103l-.004-4.502zm1.23-5.488c-.857-1.548-3.082-1.548-3.938 0L2.286 17.66c-.83 1.5.255 3.34 1.97 3.34h15.49c1.714 0 2.799-1.84 1.969-3.34zm-2.626.726a.75.75 0 0 1 1.313 0l7.746 14.002a.75.75 0 0 1-.657 1.113H4.256a.75.75 0 0 1-.657-1.113z"/>',
     viewbox: '0 0 24 24'
 };
+export const EyeShowRegularIcon = {
+    body: '<g fill="none"><path d="M12 9.005a4 4 0 1 1 0 8a4 4 0 0 1 0-8zm0 1.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM12 5.5c4.613 0 8.596 3.15 9.701 7.564a.75.75 0 1 1-1.455.365a8.503 8.503 0 0 0-16.493.004a.75.75 0 0 1-1.455-.363A10.003 10.003 0 0 1 12 5.5z" fill="currentColor"/></g>',
+    viewbox: '0 0 24 24'
+};
+export const EyeOffRegularIcon = {
+    body: '<path fill="currentColor" d="M2.22 2.22a.75.75 0 0 0-.073.976l.073.084l4.034 4.035a10 10 0 0 0-3.955 5.75a.75.75 0 0 0 1.455.364a8.5 8.5 0 0 1 3.58-5.034l1.81 1.81A4 4 0 0 0 14.8 15.86l5.919 5.92a.75.75 0 0 0 1.133-.977l-.073-.084l-6.113-6.114l.001-.002l-1.2-1.198l-2.87-2.87h.002l-2.88-2.877l.001-.002l-1.133-1.13L3.28 2.22a.75.75 0 0 0-1.06 0m7.984 9.045l3.535 3.536a2.5 2.5 0 0 1-3.535-3.535M12 5.5c-1 0-1.97.148-2.889.425l1.237 1.236a8.503 8.503 0 0 1 9.899 6.272a.75.75 0 0 0 1.455-.363A10 10 0 0 0 12 5.5m.195 3.51l3.801 3.8a4.003 4.003 0 0 0-3.801-3.8"/>',
+    viewbox: '0 0 24 24'
+};

package/dist/index.d.ts

@@ -36,7 +36,7 @@ import DateField from './form/DateField.svelte';
 import Dropzone from './form/Dropzone.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
-import PasswordField from './form/PasswordField.svelte';
+import PasswordStrength from './form/PasswordStrength.svelte';
 import PinField from './form/PinField.svelte';
 import RadioGroup from './form/RadioGroup.svelte';
 import PhoneField from './form/PhoneField.svelte';
@@ -76,5 +76,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordStrength, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
 export type { IconData, SideNavItem, SideNavSubItem };

package/dist/index.js

@@ -36,7 +36,7 @@ import DateField from './form/DateField.svelte';
 import Dropzone from './form/Dropzone.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
-import PasswordField from './form/PasswordField.svelte';
+import PasswordStrength from './form/PasswordStrength.svelte';
 import PinField from './form/PinField.svelte';
 import RadioGroup from './form/RadioGroup.svelte';
 import PhoneField from './form/PhoneField.svelte';
@@ -76,4 +76,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordStrength, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };

package/dist/layout/css/app-bar.css

@@ -27,13 +27,12 @@
 		}
 
 		&.is-floating {
-			@apply mt-4 w-[calc(100%-2rem)] rounded-full shadow-md border border-black/5;
-			@apply bg-background/90 backdrop-blur-md;
+			@apply mt-4 w-[calc(100%-2rem)] rounded-ui shadow-md shadow-muted border border-muted;
 		}
 
 		&.is-floating-enabled:not(.is-floating) {
 			@apply mt-0 w-full rounded-none;
-			@apply bg-background/80 backdrop-blur-md border-b border-muted;
+			@apply border-b border-muted;
 		}
 
 		.appbar-content {

package/dist/overlay/Dropdown.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Item } from '../index.js';
-	import type { IconData } from '../types.js';
+	import { Item, type IconData } from '../index.js';
 	import { onMount, type Snippet } from 'svelte';
 
 	type Option = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.9",
+	"version": "0.2.11",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"

package/dist/form/PasswordField.svelte.d.ts

@@ -1,28 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = {
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-    class?: string;
-    inputClass?: string;
-    onchange?: (value: string | number | undefined) => void;
-    oninput?: (value: string | number | undefined) => void;
-    variant?: 'solid' | 'outlined' | 'soft' | 'line';
-    color?: 'primary' | 'secondary' | 'muted';
-    inputSize?: 'small' | 'medium' | 'large';
-    name?: string;
-    label?: string;
-    labelOutside?: boolean;
-    labelActive?: boolean;
-    helpText?: string;
-    errorText?: string;
-    labels?: {
-        weak?: string;
-        medium?: string;
-        strong?: string;
-    };
-} & HTMLInputAttributes;
-declare const PasswordField: import("svelte").Component<Props, {}, "value">;
-type PasswordField = ReturnType<typeof PasswordField>;
-export default PasswordField;