@skeletonlabs/skeleton-svelte 1.0.0-next.16 → 1.0.0-next.18

package/README.md

@@ -8,7 +8,7 @@ This project has been created using a [SvelteKit](https://kit.svelte.dev/) proje
 
 ## Exports
 
-Library exports are contained within `/src/lib/index.ts`
+Library exports are contained within `/src/lib/migrate.ts`
 
 ## Dev
 

package/dist/components/Accordion/Accordion.svelte

@@ -28,6 +28,7 @@
 		accordion.machine({
 			id: useId(),
 			onValueChange(details) {
+				zagProps.onValueChange?.(details);
 				value = details.value;
 			}
 		}),

package/dist/components/Avatar/Avatar.svelte

@@ -21,6 +21,7 @@
 		// Image
 		imageBase = 'w-full object-cover',
 		imageClasses = '',
+		style = '',
 		// Fallback
 		fallbackBase = 'w-full h-full flex justify-center items-center',
 		fallbackClasses = '',
@@ -54,6 +55,7 @@
 			class="{imageBase} {imageClasses}"
 			style:filter={filter && `url(${filter})`}
 			data-testid="avatar-image"
+			{style}
 		/>
 	{/if}
 	<!-- Fallback -->

package/dist/components/Avatar/Avatar.test.js

@@ -40,6 +40,12 @@ describe('Avatar', () => {
                 expect(component).toHaveClass(value);
             });
         }
+        it('Correctly applies the `style` prop', () => {
+            const value = 'background-color: rgb(0, 128, 0); opacity: 0.5;';
+            render(Avatar, { src: test.src, name: test.name, style: value });
+            const component = screen.getByTestId(testIds.image);
+            expect(component).toHaveStyle(value);
+        });
     });
     describe('Fallback', () => {
         it('Renders fallback initials', () => {

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

@@ -28,6 +28,8 @@ export interface AvatarProps {
     imageBase?: string;
     /** Provide avatar image arbitrary CSS classes. */
     imageClasses?: string;
+    /** Set avatar image styles. */
+    style?: string;
     /** Set base classes for the fallback element. */
     fallbackBase?: string;
     /** Provide arbitrary CSS classes to fallback element. */

package/dist/components/Combobox/Combobox.svelte

@@ -60,16 +60,19 @@
 			collection,
 			value: $state.snapshot(value),
 			loopFocus: true,
-			onOpenChange() {
+			onOpenChange(details) {
+				zagProps.onOpenChange?.(details);
 				options = data;
 			},
-			onInputValueChange({ inputValue }) {
-				const filtered = data.filter((item) => item.label.toLowerCase().includes(inputValue.toLowerCase()));
+			onInputValueChange(details) {
+				zagProps.onInputValueChange?.(details);
+				const filtered = data.filter((item) => item.label.toLowerCase().includes(details.inputValue.toLowerCase()));
 				const newOptions = filtered.length > 0 ? filtered : data;
 				collection.setItems(newOptions);
 				options = newOptions;
 			},
 			onValueChange(event) {
+				zagProps.onValueChange?.(event);
 				value = event.value;
 			}
 		}),

package/dist/components/Navigation/NavBar.svelte

@@ -5,7 +5,7 @@
 	let {
 		value = $bindable(''),
 		// Root
-		base = 'h-full flex flex-col',
+		base = 'flex flex-col',
 		background = 'preset-filled-surface-100-900',
 		width = 'min-w-[320px] w-full',
 		height = 'h-20',

package/dist/components/Navigation/NavBar.test.svelte

@@ -1,4 +1,4 @@
-<!-- Navigation Bar Test Copmonent -->
+<!-- Navigation Bar Test Component -->
 
 <script lang="ts">
 	import { Navigation } from '../../index.js';

package/dist/components/Navigation/NavRail.test.svelte

@@ -1,4 +1,4 @@
-<!-- Navigation Rail Test Copmonent -->
+<!-- Navigation Rail Test Component -->
 
 <script lang="ts">
 	import { Navigation } from '../../index.js';

package/dist/components/Navigation/NavTile.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { useId } from '../../internal/use-id.js';
 	import { getNavigationContext } from './context.js';
 	import type { NavTileProps } from './types.js';
 
 	let {
-		id,
+		id = useId(),
 		href,
 		target,
 		label,
@@ -57,7 +58,7 @@
 	}
 </script>
 
-<!-- @component An individual Navgiation component tile. -->
+<!-- @component An individual Navigation component tile. -->
 
 <svelte:element
 	this={element}

package/dist/components/Navigation/NavTile.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { NavTileProps } from './types.js';
-/** An individual Navgiation component tile. */
+/** An individual Navigation component tile. */
 declare const NavTile: import("svelte").Component<NavTileProps, {}, "">;
 type NavTile = ReturnType<typeof NavTile>;
 export default NavTile;

package/dist/components/Pagination/Pagination.svelte

@@ -4,6 +4,7 @@
 
 	import type { PaginationProps } from './types.js';
 	import { useId } from '../../internal/use-id.js';
+	import { untrack } from 'svelte';
 
 	let {
 		page = $bindable(1),
@@ -46,32 +47,38 @@
 	const [snapshot, send] = useMachine(
 		pagination.machine({
 			id: useId(),
-			count: data.length,
-			onPageChange(details) {
-				page = details.page;
-			},
-			onPageSizeChange(details) {
-				pageSize = details.pageSize;
-			}
+			page: page,
+			pageSize: pageSize,
+			count: zagProps.count ?? data.length
 		}),
 		{
 			context: {
 				...zagProps,
-				get page() {
-					return page;
-				},
-				get pageSize() {
-					return pageSize;
+				onPageChange(details) {
+					zagProps.onPageChange?.(details);
+					page = details.page;
 				},
-				get count() {
-					// Use 'count' if specified; required for server-side pagination.
-					return zagProps.count ?? data.length;
+				onPageSizeChange(details) {
+					zagProps.onPageSizeChange?.(details);
+					pageSize = details.pageSize;
 				}
 			}
 		}
 	);
 	const api = $derived(pagination.connect(snapshot, send, normalizeProps));
 
+	$effect.pre(() => {
+		untrack(() => api).setPage(page);
+	});
+
+	$effect.pre(() => {
+		untrack(() => api).setPageSize(pageSize);
+	});
+
+	$effect.pre(() => {
+		untrack(() => api).setCount(zagProps.count ?? data.length);
+	});
+
 	// Reactive
 	const rxButtonActive = (page: { value: number }) => {
 		return snapshot.context.page === page.value ? buttonActive : `${buttonInactive} ${buttonHover}`;

package/dist/components/Popover/Popover.svelte

@@ -43,6 +43,7 @@
 			id: useId(),
 			open,
 			onOpenChange(details) {
+				zagProps.onOpenChange?.(details);
 				open = details.open;
 			}
 		}),

package/dist/components/Rating/Rating.svelte

@@ -4,7 +4,6 @@
 	import { useId } from '../../internal/use-id.js';
 	import { starEmpty, starHalf, starFull } from '../../internal/snippets.js';
 	import type { RatingProps } from './types.js';
-	import { noop } from '../../internal/noop.js';
 
 	// Props
 	let {
@@ -32,8 +31,6 @@
 		iconFull = starFull,
 		// Children
 		label,
-		// Events
-		onValueChange = noop,
 		// Zag
 		...zagProps
 	}: RatingProps = $props();
@@ -43,8 +40,8 @@
 		rating.machine({
 			id: useId(),
 			onValueChange: (details) => {
+				zagProps.onValueChange?.(details);
 				value = details.value;
-				onValueChange(details.value);
 			}
 		}),
 		{

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

@@ -1,6 +1,6 @@
 import * as rating from '@zag-js/rating-group';
 import type { Snippet } from 'svelte';
-export interface RatingProps extends Omit<rating.Context, 'id' | 'onValueChange'> {
+export interface RatingProps extends Omit<rating.Context, 'id'> {
     /** Set root base classes */
     base?: string;
     /** Set root gap classes */
@@ -35,6 +35,4 @@ export interface RatingProps extends Omit<rating.Context, 'id' | 'onValueChange'
     iconFull?: Snippet;
     /** Set the label snippet */
     label?: Snippet;
-    /** Set the onValueChange callback */
-    onValueChange?: (value: number) => void;
 }

package/dist/components/Segment/Segment.svelte

@@ -43,6 +43,7 @@
 		radio.machine({
 			id: useId(),
 			onValueChange(details) {
+				zagProps.onValueChange?.(details);
 				value = details.value;
 			},
 			orientation

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

@@ -4,7 +4,7 @@ export interface SegmentContext {
     api: ReturnType<typeof radio.connect>;
     indicatorText: string;
 }
-export interface SegmentProps extends Omit<radio.Context, 'id' | 'orientation' | 'onValueChange'> {
+export interface SegmentProps extends Omit<radio.Context, 'id' | 'orientation'> {
     /** Set the active value. */
     value?: string;
     /** Set the orientation. */

package/dist/components/Slider/Slider.svelte

@@ -57,6 +57,7 @@
 		slider.machine({
 			id: useId(),
 			onValueChange(details) {
+				zagProps.onValueChange?.(details);
 				value = details.value;
 			}
 		}),

package/dist/components/Tabs/Tabs.svelte

@@ -33,6 +33,7 @@
 		tabs.machine({
 			id: useId(),
 			onValueChange(details) {
+				zagProps.onValueChange?.(details);
 				value = details.value;
 			}
 		}),

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

@@ -4,7 +4,7 @@ export interface TabsContextState {
     fluid: boolean;
     api: ReturnType<typeof tabs.connect>;
 }
-export interface TabsProps extends Omit<tabs.Context, 'id' | 'orientation' | 'onValueChange'> {
+export interface TabsProps extends Omit<tabs.Context, 'id' | 'orientation'> {
     /** Set the active value. */
     value?: string;
     /** Set tabs to stretch to fill the available width. */

package/dist/components/TagsInput/TagsInput.svelte

@@ -43,6 +43,7 @@
 		tagsInput.machine({
 			id: useId(),
 			onValueChange: (details) => {
+				zagProps.onValueChange?.(details);
 				value = details.value;
 			}
 		}),

package/dist/components/TagsInput/TagsInput.test.js

@@ -9,7 +9,7 @@ describe('TagsInput', () => {
         delete: 'tag-delete'
     };
     const commonProps = {
-        value: ['Vanilla', 'Chocolate', 'Stawberry']
+        value: ['Vanilla', 'Chocolate', 'Strawberry']
     };
     it('Renders the component', () => {
         render(TagsInput, { ...commonProps });

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

@@ -21,7 +21,7 @@ export interface Toast {
     /** The duration of the toast. Default varies by type. */
     duration?: number;
 }
-/** Provides accesss to the Toast Context API. */
+/** Provides access to the Toast Context API. */
 export interface ToastContext {
     /** Used to create display a new Toast instance. */
     create: (toast: Toast) => void;

package/dist/components/Tooltip/Tooltip.svelte

@@ -39,6 +39,7 @@
 			id: useId(),
 			open,
 			onOpenChange(details) {
+				zagProps.onOpenChange?.(details);
 				open = details.open;
 			}
 		}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.0.0-next.16",
+  "version": "1.0.0-next.18",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.49",
     "postcss-load-config": "^6.0.1",
     "publint": "^0.2.12",
-    "svelte": "^5.6.2",
+    "svelte": "^5.19.0",
     "svelte-check": "^4.1.1",
     "tailwindcss": "^3.4.16",
     "tslib": "^2.8.1",