@skeletonlabs/skeleton-svelte 1.0.0 → 1.1.0

package/dist/components/FileUpload/FileUpload.svelte

@@ -101,7 +101,7 @@
 	{#if !children}
 		<ul {...api.getItemGroupProps()} class="{filesListBase} {filesListClasses}" data-testid="uploader-files-list">
 			<!-- Loop Files -->
-			{#each api.acceptedFiles as file (file.name)}
+			{#each api.acceptedFiles as file (file)}
 				<!-- File -->
 				<li
 					{...api.getItemProps({ file })}

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import * as toast from '@zag-js/toast';
+	import type { ToastProps } from './types.js';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+
+	const props: ToastProps = $props();
+	const service = useMachine(toast.machine, () => ({
+		...props.toast,
+		parent: props.parent,
+		index: props.index
+	}));
+	const api = $derived(toast.connect(service, normalizeProps));
+	const rxState = $derived.by(() => {
+		switch (api.type) {
+			case 'success':
+				return props.stateSuccess;
+			case 'warning':
+				return props.stateWarning;
+			case 'error':
+				return props.stateError;
+			default:
+				return props.stateInfo;
+		}
+	});
+</script>
+
+<div
+	class="{props.base} {props.width} {props.padding} {props.rounded} {rxState} {props.classes}"
+	{...api.getRootProps()}
+	data-testid="toast-root"
+>
+	<!-- Text -->
+	<div class="{props.messageBase} {props.messageClasses}" data-testid="toast-message">
+		<!-- Title -->
+		<span class="{props.titleBase} {props.titleClasses}" {...api.getTitleProps()} data-testid="toast-title">{api.title}</span>
+		<!-- Description -->
+		<span class="{props.descriptionBase} {props.descriptionClasses}" {...api.getDescriptionProps()} data-testid="toast-description"
+			>{api.description}</span
+		>
+	</div>
+	<!-- Dismiss Button -->
+	<button class="{props.btnDismissBase} {props.btnDismissClasses}" onclick={api.dismiss} data-testid="toast-dismiss">&times;</button>
+</div>
+
+<style>
+	[data-part='root'] {
+		translate: var(--x) var(--y);
+		scale: var(--scale);
+		z-index: var(--z-index);
+		height: var(--height);
+		opacity: var(--opacity);
+		will-change: translate, opacity, scale;
+	}
+	[data-part='root'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 400ms;
+		transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
+	}
+	[data-part='root'][data-state='closed'] {
+		transition:
+			translate 400ms,
+			scale 400ms,
+			opacity 200ms;
+		transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+	}
+</style>

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

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

package/dist/components/Toast/Toaster.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import * as toast from '@zag-js/toast';
+	import Toast from './Toast.svelte';
+	import type { ToasterProps } from './types.js';
+
+	const {
+		// Toaster
+		toaster,
+		// Toast
+		base = 'flex justify-between items-center gap-3',
+		width = 'min-w-xs',
+		padding = 'p-3',
+		rounded = 'rounded-container',
+		classes = '',
+		// Message
+		messageBase = 'grid',
+		messageClasses = '',
+		// Title
+		titleBase = 'font-semibold',
+		titleClasses = '',
+		// Description
+		descriptionBase = 'text-sm',
+		descriptionClasses = '',
+		// Dismiss Button
+		btnDismissBase = 'btn-icon hover:preset-tonal',
+		btnDismissClasses = '',
+		// State
+		stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
+		stateSuccess = 'preset-filled-success-500',
+		stateWarning = 'preset-filled-warning-500',
+		stateError = 'preset-filled-error-500'
+	}: ToasterProps = $props();
+
+	const id = $props.id();
+	const service = useMachine(toast.group.machine, () => ({
+		id: id,
+		store: toaster
+	}));
+	const api = $derived(toast.group.connect(service, normalizeProps));
+</script>
+
+<div {...api.getGroupProps()} data-testid="toaster-root">
+	{#each api.getToasts() as toast, index (toast.id)}
+		<Toast
+			{base}
+			{width}
+			{padding}
+			{rounded}
+			{classes}
+			{messageBase}
+			{messageClasses}
+			{titleBase}
+			{titleClasses}
+			{descriptionBase}
+			{descriptionClasses}
+			{btnDismissBase}
+			{btnDismissClasses}
+			{stateInfo}
+			{stateError}
+			{stateWarning}
+			{stateSuccess}
+			{toast}
+			{index}
+			parent={service}
+		></Toast>
+	{/each}
+</div>

package/dist/components/Toast/Toaster.svelte.d.ts

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

package/dist/components/Toast/create-toaster.d.ts

@@ -0,0 +1,2 @@
+import * as toast from '@zag-js/toast';
+export declare function createToaster(options?: toast.StoreProps): toast.Store<any>;

package/dist/components/Toast/create-toaster.js

@@ -0,0 +1,5 @@
+import * as toast from '@zag-js/toast';
+export function createToaster(options) {
+    if (options === void 0) { options = {}; }
+    return toast.createStore(options);
+}

package/dist/components/Toast/types.d.ts

@@ -1,87 +1,43 @@
-import type { Snippet } from 'svelte';
-export interface PlacementStyles {
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    'align-items'?: string;
-}
-export interface Toast {
-    /** The unique toast ID. */
-    id?: string;
-    /** The unique toast title text. */
-    title?: string;
-    /** The unique toast description text. */
-    description?: string;
-    /**
-     * Define the toast type.
-     * @default info
-     */
-    type?: 'info' | 'error' | 'success';
-    /** The duration of the toast. Default varies by type. */
-    duration?: number;
-}
-/** Provides access to the Toast Context API. */
-export interface ToastContext {
-    /** Used to create display a new Toast instance. */
-    create: (toast: Toast) => void;
-}
-export interface ToastProviderProps {
-    /**
-     * Offset from the viewport edge.
-     * @default bottom-end
-     */
-    placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-    /**
-     * Offset from the viewport edge.
-     * @default 16px
-     */
-    offset?: string;
-    /**
-     * The dismiss button label text.
-     * @default ×
-     */
-    dismissLabel?: string;
+import * as toast from '@zag-js/toast';
+export interface ToasterProps extends toast.StoreProps {
+    toaster: toast.Store;
     /** Provide base classes for the root element. */
     base?: string;
-    /** Provide gap classes for the root element. */
-    gap?: string;
-    /** Provide z-index classes for the root element. */
-    zIndex?: string;
-    /** Provide arbitrary classes for the root element. */
-    classes?: string;
-    /** Provide base classes for the toast cards. */
-    toastBase?: string;
-    /** Provide padding classes for the toast cards. */
-    toastPadding?: string;
-    /** Provide gap classes for the toast cards. */
-    toastGap?: string;
-    /** Provide shadow classes for the toast cards. */
-    toastShadow?: string;
+    /** Provide width classes for the root element. */
+    width?: string;
+    /** Provide padding classes for the root element. */
+    padding?: string;
+    /** Provide border radius classes for the root element. */
+    rounded?: string;
     /** Provide arbitrary classes for the toast cards. */
-    toastClasses?: string;
-    /** Provide base classes for the message region. */
+    classes?: string;
+    /** Provide base classes for the message. */
     messageBase?: string;
-    /** Provide classes for the message title text. */
-    messageTitle?: string;
-    /** Provide classes for the message description text. */
-    messageDescription?: string;
-    /** Provide arbitrary classes for the message region. */
+    /** Provide classes for the message. */
     messageClasses?: string;
+    /** Provide base classes for the title. */
+    titleBase?: string;
+    /** Provide classes for the title. */
+    titleClasses?: string;
+    /** Provide base classes for the description. */
+    descriptionBase?: string;
+    /** Provide classes for the description. */
+    descriptionClasses?: string;
     /** Provide base classes for the dismiss button. */
-    buttonDismissBase?: string;
-    /** Provide preset classes for the dismiss button. */
-    buttonDimissPreset?: string;
-    /** Provide hover classes for the dismiss button. */
-    buttonDismissHover?: string;
+    btnDismissBase?: string;
     /** Provide arbitrary classes for the dismiss button. */
-    buttonDismissClasses?: string;
+    btnDismissClasses?: string;
     /** Provide base classes for info toasts. */
     stateInfo?: string;
-    /** Provide base classes for error toasts. */
-    stateError?: string;
     /** Provide base classes for success toasts. */
     stateSuccess?: string;
-    /** The default child slot for the toast provider. */
-    children?: Snippet;
+    /** Provide base classes for warning toasts. */
+    stateWarning?: string;
+    /** Provide base classes for error toasts. */
+    stateError?: string;
+}
+export interface ToastProps extends Omit<ToasterProps, 'toaster'> {
+    toast: toast.Options;
+    index: number;
+    parent: toast.GroupService;
 }

package/dist/components/Toast/types.js

@@ -1 +1 @@
-export {};
+import * as toast from '@zag-js/toast';

package/dist/index.d.ts

@@ -11,10 +11,10 @@ export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Tabs } from './components/Tabs/index.js';
 export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
+export { default as Toaster } from './components/Toast/Toaster.svelte';
+export { createToaster } from './components/Toast/create-toaster.js';
 export { default as Rating } from './components/Rating/index.js';
 export type { FileUploadApi } from './components/FileUpload/types.js';
-export { default as ToastProvider } from './components/Toast/ToastProvider.svelte';
-export type { ToastContext } from './components/Toast/types.js';
 export { default as Combobox } from './components/Combobox/Combobox.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';
 export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';

package/dist/index.js

@@ -1,7 +1,7 @@
 // Exports for skeleton-svelte package
 // REMINDER
 // Do not export parent/child components. Use the dot-notation composition pattern:
-// https://next.skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
+// https://skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
 // (See Accordion, Nav, and Tabs for examples)
 // Components
 export { default as Accordion } from './components/Accordion/index.js';
@@ -17,11 +17,11 @@ export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Tabs } from './components/Tabs/index.js';
 export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
+export { default as Toaster } from './components/Toast/Toaster.svelte';
+export { createToaster } from './components/Toast/create-toaster.js';
 export { default as Rating } from './components/Rating/index.js';
 // Temporary Features ---
 // The following will be removed or replaced in the future.
-// Toasts
-export { default as ToastProvider } from './components/Toast/ToastProvider.svelte';
 // Popvers
 export { default as Combobox } from './components/Combobox/Combobox.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -16,46 +16,46 @@
     "!dist/**/*.test.*"
   ],
   "dependencies": {
-    "@zag-js/accordion": "^1.3.1",
-    "@zag-js/avatar": "^1.3.1",
-    "@zag-js/combobox": "^1.3.1",
-    "@zag-js/dialog": "^1.3.1",
-    "@zag-js/file-upload": "^1.3.1",
-    "@zag-js/pagination": "^1.3.1",
-    "@zag-js/popover": "^1.3.1",
-    "@zag-js/progress": "^1.3.1",
-    "@zag-js/radio-group": "^1.3.1",
-    "@zag-js/rating-group": "^1.3.1",
-    "@zag-js/slider": "^1.3.1",
-    "@zag-js/svelte": "^1.3.1",
-    "@zag-js/switch": "^1.3.1",
-    "@zag-js/tabs": "^1.3.1",
-    "@zag-js/tags-input": "^1.3.1",
-    "@zag-js/tooltip": "^1.3.1"
+    "@zag-js/accordion": "^1.7.0",
+    "@zag-js/avatar": "^1.7.0",
+    "@zag-js/combobox": "^1.7.0",
+    "@zag-js/dialog": "^1.7.0",
+    "@zag-js/file-upload": "^1.7.0",
+    "@zag-js/pagination": "^1.7.0",
+    "@zag-js/popover": "^1.7.0",
+    "@zag-js/progress": "^1.7.0",
+    "@zag-js/radio-group": "^1.7.0",
+    "@zag-js/rating-group": "^1.7.0",
+    "@zag-js/slider": "^1.7.0",
+    "@zag-js/svelte": "^1.7.0",
+    "@zag-js/switch": "^1.7.0",
+    "@zag-js/tabs": "^1.7.0",
+    "@zag-js/tags-input": "^1.7.0",
+    "@zag-js/toast": "^1.7.0",
+    "@zag-js/tooltip": "^1.7.0"
   },
   "peerDependencies": {
-    "svelte": "^5.20.0",
-    "@skeletonlabs/skeleton": "^3.0.0"
+    "svelte": "^5.20.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.19.0",
+    "@sveltejs/adapter-auto": "^5.0.0",
+    "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.0.12",
+    "@tailwindcss/vite": "^4.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
     "jsdom": "^26.0.0",
     "publint": "^0.3.9",
-    "svelte": "^5.22.1",
+    "svelte": "^5.25.3",
     "svelte-check": "^4.1.5",
-    "tailwindcss": "^4.0.9",
+    "tailwindcss": "^4.0.17",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2",
-    "vite": "^6.2.1",
-    "vitest": "3.0.8",
-    "@skeletonlabs/skeleton": "3.0.0"
+    "vite": "^6.2.4",
+    "vitest": "3.1.1",
+    "@skeletonlabs/skeleton": "3.1.2"
   },
   "type": "module",
   "scripts": {

package/dist/components/Toast/ToastProvider.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import { flip } from 'svelte/animate';
-	import { fade } from 'svelte/transition';
-
-	import type { PlacementStyles, Toast, ToastProviderProps } from './types.js';
-
-	const {
-		placement = 'bottom-end',
-		offset = '16px',
-		dismissLabel = '',
-		// Group
-		base = 'fixed flex flex-col items-end',
-		gap = 'gap-4',
-		zIndex = 'z-[888]',
-		classes = '',
-		// Toast
-		toastBase = 'card py-2 px-3 grid grid-cols-[1fr_auto] items-center',
-		toastPadding = 'py-2 px-3',
-		toastGap = 'gap-4',
-		toastShadow = 'shadow-xl',
-		toastClasses = '',
-		// Message
-		messageBase = 'grid grid-cols-1 max-w-xs text-xs',
-		messageTitle = 'font-bold',
-		messageDescription = '',
-		messageClasses = '',
-		// Dismiss Button
-		buttonDismissBase = 'btn-icon btn-icon-sm text-base',
-		buttonDimissPreset = '',
-		buttonDismissHover = 'hover:preset-tonal',
-		buttonDismissClasses = '',
-		// State
-		stateInfo = 'preset-filled',
-		stateError = 'preset-filled-error-500',
-		stateSuccess = 'preset-filled-success-500',
-		// Snippets
-		children
-	}: ToastProviderProps = $props();
-
-	// Local
-	const defaults: Record<string, Toast> = {
-		info: { duration: 5000 },
-		error: { duration: 5000 },
-		success: { duration: 2000 }
-	};
-	const placementOptions: Record<string, PlacementStyles> = {
-		'top-start': { top: offset, left: offset, 'align-items': 'flex-start' },
-		'top-end': { top: offset, right: offset, 'align-items': 'flex-end' },
-		'bottom-start': { bottom: offset, left: offset, 'align-items': 'flex-start' },
-		'bottom-end': { bottom: offset, right: offset, 'align-items': 'flex-end' }
-	};
-
-	// State
-	let toastQueue: Toast[] = $state([]);
-
-	// Context
-	const id = $props.id();
-	setContext('toast', {
-		create: (toast: Toast) => {
-			// Set default settings
-			toast = {
-				...defaults[String(toast.type || 'info')],
-				...toast,
-				id: id
-			};
-			// Push to Queue
-			toastQueue.push(toast);
-			// Set duration timeout
-			setTimeout(() => {
-				dismiss(toast.id);
-			}, toast.duration);
-		}
-	});
-
-	function formatStyleAttr(style: PlacementStyles) {
-		return Object.entries(style)
-			.map(([k, v]) => `${k}:${v}`)
-			.join(';');
-	}
-
-	function dismiss(id: string | undefined) {
-		if (!id) return;
-		toastQueue = toastQueue.filter((t) => t.id !== id);
-	}
-
-	function getStateClasses(type?: string) {
-		// prettier-ignore
-		switch (type) {
-			case 'error': return stateError;
-			case 'success': return stateSuccess;
-			default: return stateInfo;
-		}
-	}
-</script>
-
-<!-- Toast Group -->
-{#if toastQueue.length}
-	<div
-		class="{base} {gap} {zIndex} {classes}"
-		style={formatStyleAttr(placementOptions[placement])}
-		data-part="root"
-		data-testid="toast-provider"
-	>
-		{#each toastQueue as toast, i (toast)}
-			{@const stateClasses = getStateClasses(toast.type)}
-			<!-- Toast -->
-			<div
-				data-index={i}
-				data-type={toast.type}
-				class="{toastBase} {toastPadding} {toastGap} {toastShadow} {toastClasses} {stateClasses}"
-				animate:flip={{ duration: 200 }}
-				transition:fade={{ duration: 200 }}
-			>
-				<!-- Message -->
-				<div class="{messageBase} {messageClasses}">
-					{#if toast.title}<div class={messageTitle}>{toast.title}</div>{/if}
-					<div class={messageDescription}>{toast.description}</div>
-				</div>
-				<!-- Dismiss -->
-				<button
-					type="button"
-					class="{buttonDismissBase} {buttonDimissPreset} {buttonDismissHover} {buttonDismissClasses}"
-					onclick={() => dismiss(toast.id)}
-				>
-					{#if dismissLabel}{dismissLabel}{:else}&times;{/if}
-				</button>
-			</div>
-		{/each}
-	</div>
-{/if}
-
-{@render children?.()}

package/dist/components/Toast/ToastProvider.svelte.d.ts

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