ui-svelte 0.2.11 → 0.2.13

package/dist/overlay/Toast.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 
-	import { Icon, toast } from '../index.js';
+	import { Icon, IconButton, toast } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { popover } from '../utils/popover.js';
 	import {
@@ -16,10 +16,15 @@
 		class?: string;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		showIcon?: boolean;
-		isSolid?: boolean;
+		variant?: 'solid' | 'soft';
 	};
 
-	const { class: className, position = 'bottom-left', isSolid, showIcon }: Props = $props();
+	const {
+		class: className,
+		position = 'bottom-left',
+		variant = 'soft',
+		showIcon
+	}: Props = $props();
 
 	const positionClasses = {
 		'top-left': 'is-top-left',
@@ -28,18 +33,29 @@
 		'bottom-right': 'is-bottom-right'
 	};
 
-	const status = {
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
 		info: 'is-info',
 		success: 'is-success',
 		warning: 'is-warning',
 		danger: 'is-danger'
 	};
 
-	const icons = {
-		info: 'fluent:error-circle-24-regular',
-		success: 'fluent:checkmark-circle-24-regular',
-		warning: 'fluent:warning-24-regular',
-		danger: 'fluent:block-24-regular'
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger'
 	};
 </script>
 
@@ -52,17 +68,21 @@
 		{#each toast.messages as message, index (message.id)}
 			<div
 				transition:slide
-				class={cn('toast', status[message.status], (message.isSolid || isSolid) && 'is-solid')}
+				class={cn(
+					'toast',
+					colors[message.color],
+					message.variant ? variants[message.variant] : variants[variant]
+				)}
 				style="--toast-index: {index}; --toast-total: {toast.messages.length}"
 			>
 				{#if showIcon}
-					{#if message.status === 'info'}
+					{#if message.color === 'info'}
 						<Icon icon={Info24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'success'}
+					{:else if message.color === 'success'}
 						<Icon icon={CheckmarkCircle24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'warning'}
+					{:else if message.color === 'warning'}
 						<Icon icon={Warning24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'danger'}
+					{:else if message.color === 'danger'}
 						<Icon icon={DismissCircle24RegularIcon} class="toast-icon" />
 					{/if}
 				{/if}
@@ -73,9 +93,13 @@
 					<div class="toast-description">{message.description}</div>
 				</div>
 				<div class="btn-close">
-					<button onclick={() => toast.close(message.id)}>
-						<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-					</button>
+					<IconButton
+						icon={Dismiss24RegularIcon}
+						variant={variant === 'solid' ? 'soft' : 'solid'}
+						color={closeColors[message.color] as any}
+						size="xs"
+						onclick={() => toast.close(message.id)}
+					/>
 				</div>
 			</div>
 		{/each}

package/dist/overlay/Toast.svelte.d.ts

@@ -2,7 +2,7 @@ type Props = {
     class?: string;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     showIcon?: boolean;
-    isSolid?: boolean;
+    variant?: 'solid' | 'soft';
 };
 declare const Toast: import("svelte").Component<Props, {}, "">;
 type Toast = ReturnType<typeof Toast>;

package/dist/overlay/Tooltip.svelte

@@ -6,18 +6,18 @@
 	type Props = {
 		label: string;
 		children: Snippet;
-		variant?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
 		position?: 'top' | 'bottom' | 'start' | 'end';
-		isSolid?: boolean;
 		class?: string;
 	};
 
 	let {
 		label,
 		children,
-		variant = 'primary',
+		color = 'primary',
+		variant = 'soft',
 		position = 'top',
-		isSolid = false,
 		class: className
 	}: Props = $props();
 
@@ -31,10 +31,19 @@
 
 	const style = $derived(`top: ${tooltipPosition.top}px; left: ${tooltipPosition.left}px;`);
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	const positionClasses = {
@@ -73,28 +82,29 @@
 				break;
 		}
 
-		top += window.scrollY;
-		left += window.scrollX;
-
 		const padding = 8;
 		if (left < padding) left = padding;
 		if (left + tooltipRect.width > window.innerWidth - padding) {
 			left = window.innerWidth - tooltipRect.width - padding;
 		}
 		if (top < padding) top = padding;
-		if (top + tooltipRect.height > window.innerHeight + window.scrollY - padding) {
-			top = window.innerHeight + window.scrollY - tooltipRect.height - padding;
+		if (top + tooltipRect.height > window.innerHeight - padding) {
+			top = window.innerHeight - tooltipRect.height - padding;
 		}
 
 		tooltipPosition = { top, left };
 	};
 
 	const handleMouseEnter = () => {
+		startEventListeners();
 		isOpen = true;
-		setTimeout(updatePosition, 0);
+		requestAnimationFrame(() => {
+			updatePosition();
+		});
 	};
 
 	const handleMouseLeave = () => {
+		stopEventListeners();
 		isOpen = false;
 	};
 
@@ -109,7 +119,6 @@
 	};
 
 	onMount(() => {
-		startEventListeners();
 		return () => stopEventListeners();
 	});
 </script>
@@ -122,19 +131,19 @@
 	onmouseleave={handleMouseLeave}
 >
 	{@render children()}
+</div>
 
-	<div
-		bind:this={tooltipElement}
-		class={cn(
-			'tooltip-popover',
-			variantClasses[variant],
-			positionClasses[position],
-			isSolid && 'is-solid',
-			isOpen && 'is-active'
-		)}
-		{style}
-	>
-		<div class={cn('tooltip-arrow', variantClasses[variant], isSolid && 'is-solid')}></div>
-		{label}
-	</div>
+<div
+	bind:this={tooltipElement}
+	class={cn(
+		'tooltip-popover',
+		colors[color],
+		variants[variant],
+		positionClasses[position],
+		isOpen && 'is-active'
+	)}
+	{style}
+>
+	<div class="tooltip-arrow"></div>
+	{label}
 </div>

package/dist/overlay/Tooltip.svelte.d.ts

@@ -2,9 +2,9 @@ import type { Snippet } from 'svelte';
 type Props = {
     label: string;
     children: Snippet;
-    variant?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
     position?: 'top' | 'bottom' | 'start' | 'end';
-    isSolid?: boolean;
     class?: string;
 };
 declare const Tooltip: import("svelte").Component<Props, {}, "">;

package/dist/overlay/css/command.css

@@ -0,0 +1,68 @@
+@layer components {
+	.command-kbd {
+		@apply hidden md:flex items-center gap-1.5 text-xs text-on-muted/70 shrink-0;
+	}
+
+	.command-kbd kbd {
+		@apply px-1.5 py-0.5 bg-muted/50 rounded text-[10px] font-mono uppercase;
+		@apply border border-muted/30;
+	}
+
+	.command-results {
+		@apply w-full flex flex-col min-w-md;
+		@apply max-h-80;
+	}
+	.command-group {
+		@apply flex flex-col;
+
+		&:not(:first-child) {
+			@apply mt-3 pt-3 border-t border-muted/15;
+		}
+	}
+
+	.command-group-label {
+		@apply flex items-center gap-2;
+		@apply px-2.5 py-1.5 mb-1;
+		@apply text-sm font-medium uppercase tracking-wide;
+	}
+
+	.command-group-icon {
+		@apply size-3.5 opacity-70;
+	}
+
+	.command-group-items {
+		@apply flex flex-col gap-0.5;
+	}
+
+	.command-empty {
+		@apply flex items-center justify-center;
+		@apply py-10 text-sm text-on-muted/50;
+	}
+
+	.command-loading {
+		@apply flex items-center justify-center gap-2;
+		@apply py-10 text-sm text-on-muted/50;
+	}
+
+	.command-loading-spinner {
+		@apply size-4 animate-spin;
+	}
+
+	.command-shortcuts {
+		@apply flex items-center justify-between w-full px-3 py-2;
+		@apply border-t border-muted/20 text-xs text-on-muted/60;
+	}
+
+	.command-shortcut {
+		@apply flex items-center gap-3;
+	}
+
+	.command-shortcut-item {
+		@apply flex items-center gap-1;
+	}
+
+	.command-shortcut-item kbd {
+		@apply px-1 py-0.5 bg-muted/30 rounded text-[10px] font-mono;
+		@apply border border-muted/20;
+	}
+}

package/dist/overlay/css/drawer.css

@@ -7,7 +7,7 @@
 			@apply absolute inset-0 bg-overlay;
 		}
 		.drawer {
-			@apply absolute bg-surface flex flex-col;
+			@apply absolute flex flex-col max-w-screen;
 			@apply transition-all duration-300 ease-in-out;
 
 			&.is-start {
@@ -34,33 +34,68 @@
 				@apply transform translate-x-0! translate-y-0!;
 			}
 
-			&.is-ghost {
-				@apply bg-background text-on-background;
+			&.is-soft {
+				&.is-primary {
+					@apply bg-soft-primary text-primary;
+				}
+				&.is-secondary {
+					@apply bg-soft-secondary text-secondary;
+				}
+				&.is-muted {
+					@apply bg-soft-muted text-on-muted;
+				}
+				&.is-success {
+					@apply bg-soft-success text-success;
+				}
+				&.is-info {
+					@apply bg-soft-info text-info;
+				}
+				&.is-warning {
+					@apply bg-soft-warning text-warning;
+				}
+				&.is-danger {
+					@apply bg-soft-danger text-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
-			&.is-surface {
-				@apply bg-surface text-on-surface;
-			}
-			&.is-primary {
-				@apply bg-on-primary text-primary;
-			}
-			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
-			}
-			&.is-muted {
-				@apply bg-muted text-on-muted;
-			}
-			&.is-primary.is-solid {
-				@apply bg-primary text-on-primary;
-			}
-			&.is-secondary.is-solid {
-				@apply bg-secondary text-on-secondary;
-			}
-			&.is-muted.is-solid {
-				@apply bg-on-muted text-muted;
+
+			&.is-solid {
+				&.is-primary {
+					@apply bg-primary text-on-primary;
+				}
+				&.is-secondary {
+					@apply bg-secondary text-on-secondary;
+				}
+				&.is-muted {
+					@apply bg-on-muted text-muted;
+				}
+				&.is-success {
+					@apply bg-success text-on-success;
+				}
+				&.is-info {
+					@apply bg-info text-on-info;
+				}
+				&.is-warning {
+					@apply bg-warning text-on-warning;
+				}
+				&.is-danger {
+					@apply bg-danger text-on-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
 
 			.drawer-header {
-				@apply row gap-3 p-3;
+				@apply row gap-3 p-3 pr-12;
 			}
 
 			.drawer-footer {
@@ -70,6 +105,10 @@
 			.drawer-body {
 				@apply flex min-h-0 flex-1 flex-col gap-3 p-3 overflow-auto;
 			}
+
+			.drawer-btn-close {
+				@apply absolute right-2 top-2;
+			}
 		}
 	}
 }

package/dist/overlay/css/dropdown.css

@@ -4,7 +4,7 @@
 	}
 	.dropdown-popover {
 		@apply overflow-y-auto flex flex-col gap-2 p-2 my-1;
-		@apply bg-background text-on-background rounded-ui;
+		@apply bg-background text-on-background rounded-box;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		@apply shadow shadow-muted;
 		position: fixed;

package/dist/overlay/css/hovercard.css

@@ -4,7 +4,7 @@
 	}
 	.hovercard-content {
 		@apply overflow-y-auto drop-shadow-sm flex flex-col gap-2 my-1;
-		@apply bg-background text-on-background border border-muted rounded-ui;
+		@apply bg-background text-on-background border border-muted rounded-box;
 		position: fixed;
 		z-index: 9999;
 	}

package/dist/overlay/css/modal.css

@@ -6,46 +6,98 @@
 			@apply absolute inset-0 bg-overlay;
 		}
 		.modal {
-			@apply relative flex flex-col gap-4 md:gap-6 rounded-ui py-4 md:py-6 max-w-[95vw] max-h-[95vh];
+			@apply relative flex flex-col rounded-box max-w-[95vw] max-h-[95vh];
 
-			&.is-ghost {
-				@apply bg-background text-on-background;
+			&.is-soft {
+				&.is-primary {
+					@apply bg-soft-primary text-primary;
+				}
+				&.is-secondary {
+					@apply bg-soft-secondary text-secondary;
+				}
+				&.is-muted {
+					@apply bg-soft-muted text-on-muted;
+				}
+				&.is-success {
+					@apply bg-soft-success text-success;
+				}
+				&.is-info {
+					@apply bg-soft-info text-info;
+				}
+				&.is-warning {
+					@apply bg-soft-warning text-warning;
+				}
+				&.is-danger {
+					@apply bg-soft-danger text-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
-			&.is-surface {
-				@apply bg-surface text-on-surface;
-			}
-			&.is-primary {
-				@apply bg-on-primary text-primary;
-			}
-			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
-			}
-			&.is-muted {
-				@apply bg-muted text-on-muted;
-			}
-			&.is-primary.is-solid {
-				@apply bg-primary text-on-primary;
-			}
-			&.is-secondary.is-solid {
-				@apply bg-secondary text-on-secondary;
-			}
-			&.is-muted.is-solid {
-				@apply bg-on-muted text-muted;
+
+			&.is-solid {
+				&.is-primary {
+					@apply bg-primary text-on-primary;
+				}
+				&.is-secondary {
+					@apply bg-secondary text-on-secondary;
+				}
+				&.is-muted {
+					@apply bg-on-muted text-muted;
+				}
+				&.is-success {
+					@apply bg-success text-on-success;
+				}
+				&.is-info {
+					@apply bg-info text-on-info;
+				}
+				&.is-warning {
+					@apply bg-warning text-on-warning;
+				}
+				&.is-danger {
+					@apply bg-danger text-on-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
-			.modal-content {
-				@apply px-4 md:px-6 overflow-hidden overflow-y-auto;
+
+			.modal-body {
+				@apply column gap-4 md:gap-6 p-4 md:p-6 overflow-hidden overflow-y-auto;
 			}
 
 			.modal-header {
-				@apply grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 md:px-6;
+				@apply w-full flex justify-between items-center px-4 pt-4 gap-4 md:px-6 md:pt-6 md:gap-6;
 			}
 
 			.modal-footer {
-				@apply [.border-t]:pt-4 md:[.border-t]:pt-6 flex items-center px-4 md:px-6;
+				@apply w-full flex justify-between items-center px-4 pb-4 gap-4 md:px-6 md:pb-6 md:gap-6;
 			}
 		}
 		.modal-btn-close {
 			@apply absolute top-1 right-1 float-right z-50 size-6 p-1 hover:bg-muted rounded-full flex items-center justify-center text-on-muted hover:text-danger cursor-pointer;
 		}
 	}
+	.alert-dialog-title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.alert-dialog-description {
+		color: var(--on-muted);
+		margin: 0;
+	}
+
+	.alert-dialog-actions {
+		display: flex;
+		gap: 0.75rem;
+		justify-content: flex-end;
+	}
 }

package/dist/overlay/css/toast.css

@@ -23,7 +23,7 @@
 	}
 
 	.toast {
-		@apply absolute inset-x-0 flex items-center gap-3 p-4 pointer-events-auto rounded-ui;
+		@apply absolute inset-x-0 flex items-center gap-3 p-4 pointer-events-auto rounded-box;
 		@apply transition-all duration-300 ease-out shadow-sm;
 
 		transform: translateY(calc((var(--toast-total) - var(--toast-index) - 1) * -8px))
@@ -31,36 +31,52 @@
 		opacity: calc(1 - (var(--toast-total) - var(--toast-index) - 1) * 0.2);
 		z-index: calc(50 + var(--toast-index));
 
-		&.is-success {
-			@apply bg-on-success text-success;
-
-			&.is-solid {
-				@apply bg-success text-on-success;
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
 			}
-		}
-
-		&.is-danger {
-			@apply bg-on-danger text-danger;
-
-			&.is-solid {
-				@apply bg-danger text-on-danger;
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
 			}
-		}
-
-		&.is-warning {
-			@apply bg-on-warning text-warning;
-
-			&.is-solid {
-				@apply bg-warning text-on-warning;
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
 			}
 		}
 
-		&.is-info {
-			@apply bg-on-info text-info;
-
-			&.is-solid {
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
 				@apply bg-info text-on-info;
 			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
 		}
 
 		.toast-icon {