ui-svelte 0.2.24 → 0.2.26

package/dist/control/Fab.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { IconData } from '../display/Icon.svelte';
-	import { IconButton } from '../index.js';
+	import { Avatar, IconButton } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { Add24RegularIcon } from '../icons/index.js';
 	import { slide } from 'svelte/transition';
@@ -21,7 +21,7 @@
 		icon?: IconData;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 		variant?: 'solid' | 'soft';
-		size?: 'sm' | 'md' | 'lg' | 'xl';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		actions?: FabAction[];
 		isBlock?: boolean;
 		offsetX?: string;
@@ -29,6 +29,11 @@
 		onclick?: () => void;
 		children?: Snippet;
 		ariaLabel?: string;
+		src?: string;
+		name?: string;
+		alt?: string;
+		status?: 'online' | 'offline' | 'busy' | 'away';
+		isBordered?: boolean;
 	};
 
 	const {
@@ -44,7 +49,12 @@
 		offsetY,
 		onclick,
 		children,
-		ariaLabel
+		ariaLabel,
+		src,
+		name,
+		alt,
+		status,
+		isBordered
 	}: Props = $props();
 
 	let isOpen = $state(false);
@@ -115,13 +125,17 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			<IconButton
-				{icon}
+			<Avatar
+				{src}
+				{name}
+				{alt}
 				{color}
 				{variant}
 				{size}
+				{status}
+				{isBordered}
+				{icon}
 				onclick={handleTriggerClick}
-				ariaLabel={ariaLabel || (actions.length > 0 ? 'Open actions menu' : undefined)}
 			/>
 		{/if}
 	</div>

package/dist/control/Fab.svelte.d.ts

@@ -14,7 +14,7 @@ type Props = {
     icon?: IconData;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
     variant?: 'solid' | 'soft';
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     actions?: FabAction[];
     isBlock?: boolean;
     offsetX?: string;
@@ -22,6 +22,11 @@ type Props = {
     onclick?: () => void;
     children?: Snippet;
     ariaLabel?: string;
+    src?: string;
+    name?: string;
+    alt?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    isBordered?: boolean;
 };
 declare const Fab: import("svelte").Component<Props, {}, "">;
 type Fab = ReturnType<typeof Fab>;

package/dist/css/animations.css

@@ -358,11 +358,11 @@
 	transition:
 		opacity 0.6s ease-out,
 		transform 0.6s ease-out;
-}
 
-@utility reveal.is-visible {
-	opacity: 1;
-	transform: translateY(0);
+	&.is-visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
 
 @utility reveal-left {
@@ -371,11 +371,11 @@
 	transition:
 		opacity 0.6s ease-out,
 		transform 0.6s ease-out;
-}
 
-@utility reveal-left.is-visible {
-	opacity: 1;
-	transform: translateX(0);
+	&.is-visible {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 
 @utility reveal-right {
@@ -384,11 +384,11 @@
 	transition:
 		opacity 0.6s ease-out,
 		transform 0.6s ease-out;
-}
 
-@utility reveal-right.is-visible {
-	opacity: 1;
-	transform: translateX(0);
+	&.is-visible {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 
 @utility reveal-zoom {
@@ -397,11 +397,11 @@
 	transition:
 		opacity 0.6s ease-out,
 		transform 0.6s ease-out;
-}
 
-@utility reveal-zoom.is-visible {
-	opacity: 1;
-	transform: scale(1);
+	&.is-visible {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
 @utility shake {

package/dist/css/typography.css

@@ -266,6 +266,7 @@
 
 	.truncate-lines-2 {
 		display: -webkit-box;
+		line-clamp: 2;
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
@@ -273,6 +274,7 @@
 
 	.truncate-lines-3 {
 		display: -webkit-box;
+		line-clamp: 3;
 		-webkit-line-clamp: 3;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
@@ -280,6 +282,7 @@
 
 	.truncate-lines-4 {
 		display: -webkit-box;
+		line-clamp: 4;
 		-webkit-line-clamp: 4;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
@@ -288,4 +291,4 @@
 	.prose-narrow { max-width: 45ch; }
 	.prose-normal { max-width: 65ch; }
 	.prose-wide { max-width: 80ch; }
-}
+}

package/dist/display/Alert.svelte

@@ -5,7 +5,7 @@
 		Info24RegularIcon,
 		Warning24RegularIcon
 	} from '../icons/index.js';
-	import { Icon } from '../index.js';
+	import { Avatar } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 	import type { IconData } from './Icon.svelte';
@@ -18,6 +18,12 @@
 		icon?: IconData;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 		variant?: 'solid' | 'soft';
+		src?: string;
+		name?: string;
+		alt?: string;
+		avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		status?: 'online' | 'offline' | 'busy' | 'away';
+		isBordered?: boolean;
 	};
 
 	let {
@@ -27,7 +33,13 @@
 		showIcon,
 		icon,
 		color = 'info',
-		variant = 'soft'
+		variant = 'soft',
+		src,
+		name,
+		alt,
+		avatarSize = 'md',
+		status,
+		isBordered
 	}: Props = $props();
 
 	const colors = {
@@ -63,9 +75,20 @@
 </script>
 
 <div class={cn('alert', colors[color], variants[variant])}>
-	{#if showIcon}
+	{#if showIcon || src || name}
 		<div class="alert-start">
-			<Icon icon={currentIcon} class="alert-icon" />
+			<Avatar
+				{src}
+				{name}
+				{alt}
+				icon={currentIcon}
+				size={avatarSize}
+				{status}
+				{isBordered}
+				{color}
+				{variant}
+				class="alert-icon"
+			/>
 		</div>
 	{/if}
 

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

@@ -8,6 +8,12 @@ type Props = {
     icon?: IconData;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
     variant?: 'solid' | 'soft';
+    src?: string;
+    name?: string;
+    alt?: string;
+    avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    isBordered?: boolean;
 };
 declare const Alert: import("svelte").Component<Props, {}, "">;
 type Alert = ReturnType<typeof Alert>;

package/dist/overlay/Toast.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 
-	import { Icon, IconButton, toast } from '../index.js';
+	import { Avatar, IconButton, toast, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { popover } from '../utils/popover.js';
 	import {
@@ -12,6 +12,19 @@
 		Warning24RegularIcon
 	} from '../icons/index.js';
 
+	const DEFAULT_ICONS: Record<
+		'primary' | 'secondary' | 'muted' | 'info' | 'success' | 'warning' | 'danger',
+		IconData
+	> = {
+		primary: Info24RegularIcon,
+		secondary: Info24RegularIcon,
+		muted: Info24RegularIcon,
+		info: Info24RegularIcon,
+		success: CheckmarkCircle24RegularIcon,
+		warning: Warning24RegularIcon,
+		danger: DismissCircle24RegularIcon
+	};
+
 	type Props = {
 		class?: string;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -75,16 +88,19 @@
 				)}
 				style="--toast-index: {index}; --toast-total: {toast.messages.length}"
 			>
-				{#if showIcon}
-					{#if message.color === 'info'}
-						<Icon icon={Info24RegularIcon} class="toast-icon" />
-					{:else if message.color === 'success'}
-						<Icon icon={CheckmarkCircle24RegularIcon} class="toast-icon" />
-					{:else if message.color === 'warning'}
-						<Icon icon={Warning24RegularIcon} class="toast-icon" />
-					{:else if message.color === 'danger'}
-						<Icon icon={DismissCircle24RegularIcon} class="toast-icon" />
-					{/if}
+				{#if showIcon || message.src || message.name}
+					<Avatar
+						src={message.src}
+						name={message.name}
+						alt={message.alt}
+						icon={message.icon ?? DEFAULT_ICONS[message.color as keyof typeof DEFAULT_ICONS]}
+						size={message.avatarSize || 'md'}
+						status={message.status}
+						isBordered={message.isBordered}
+						color={message.color}
+						variant={message.variant || variant}
+						class="toast-icon"
+					/>
 				{/if}
 				<div class="toast-content">
 					{#if message.title}

package/dist/stores/toast.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IconData } from "../index.js";
+import type { IconData } from '../index.js';
 export interface ToastMessage {
     id: string;
     icon?: IconData;
@@ -8,6 +8,12 @@ export interface ToastMessage {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     variant?: 'solid' | 'soft';
     color: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    src?: string;
+    name?: string;
+    alt?: string;
+    avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    isBordered?: boolean;
 }
 export declare const toast: {
     readonly messages: ToastMessage[];

package/dist/stores/toast.svelte.js

@@ -12,7 +12,13 @@ const toastShow = (message) => {
         duration: message.duration || 0,
         icon: message.icon,
         position: message.position,
-        variant: message.variant || 'soft'
+        variant: message.variant || 'soft',
+        src: message.src,
+        name: message.name,
+        alt: message.alt,
+        avatarSize: message.avatarSize || 'md',
+        status: message.status,
+        isBordered: message.isBordered
     };
     toastMessages = [...toastMessages, newMessage];
     if (newMessage.duration && newMessage.duration > 0) {

package/package.json

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