@skeletonlabs/skeleton-svelte 1.0.0-next.20 → 1.0.0-next.22

package/dist/components/Accordion/Accordion.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import * as accordion from '@zag-js/accordion';
 	import { useMachine, normalizeProps } from '@zag-js/svelte';
-	import { useId } from '../../internal/use-id.js';
 	import { setAccordionContext } from './context.js';
 	import type { AccordionProps } from './types.js';
 
 	// Props
-	let {
-		value = $bindable([]),
-		animDuration = 200,
+	const {
+		animationConfig = {
+			duration: 200
+		},
 		// Root
 		base = '',
 		padding = '',
@@ -24,32 +24,20 @@
 	}: AccordionProps = $props();
 
 	// Zag
-	const [snapshot, send] = useMachine(
-		accordion.machine({
-			id: useId(),
-			onValueChange(details) {
-				zagProps.onValueChange?.(details);
-				value = details.value;
-			}
-		}),
-		{
-			context: {
-				...zagProps,
-				get value() {
-					return $state.snapshot(value);
-				}
-			}
-		}
-	);
-	const api = $derived(accordion.connect(snapshot, send, normalizeProps));
+	const id = $props.id();
+	const service = useMachine(accordion.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(accordion.connect(service, normalizeProps));
 
 	// Context
 	setAccordionContext({
 		get api() {
 			return api;
 		},
-		get animDuration() {
-			return animDuration;
+		get animationConfig() {
+			return animationConfig;
 		},
 		get iconClosed() {
 			return iconClosed;

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

@@ -1,5 +1,5 @@
 import type { AccordionProps } from './types.js';
 /** Divide content into collapsible sections. */
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "value">;
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte

@@ -5,7 +5,7 @@
 
 	// Props
 	const {
-		headingElement = 'h3',
+		headingLevel = 3,
 		// Root
 		base,
 		spaceY,
@@ -45,7 +45,7 @@
 
 <div class="{base} {spaceY} {classes}" {...ctx.api.getItemProps(zagProps)} data-testid="accordion-item">
 	<!-- Control -->
-	<svelte:element this={headingElement}>
+	<svelte:element this={`h${headingLevel}`}>
 		<button
 			class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
 			{...ctx.api.getItemTriggerProps(zagProps)}
@@ -81,7 +81,7 @@
 		<div
 			class="{panelBase} {panelPadding} {panelRounded} {panelClasses}"
 			{...ctx.api.getItemContentProps(zagProps)}
-			transition:slide={{ duration: ctx.animDuration }}
+			transition:slide={ctx.animationConfig}
 			data-testid="accordion-panel"
 		>
 			{@render panel?.()}

package/dist/components/Accordion/context.js

@@ -1,3 +1,4 @@
+var _a;
 import { createContext } from '../../internal/create-context.js';
 // @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH
-export const [setAccordionContext, getAccordionContext, key] = createContext();
+export var setAccordionContext = (_a = createContext(), _a[0]), getAccordionContext = _a[1], key = _a[2];

package/dist/components/Accordion/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("svelte").Component<import("./types").AccordionProps, {}, "value"> & {
+declare const _default: import("svelte").Component<import("./types").AccordionProps, {}, ""> & {
     Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
 };
 export default _default;

package/dist/components/Accordion/index.js

@@ -1,3 +1,3 @@
 import Accordion from './Accordion.svelte';
 import Item from './AccordionItem.svelte';
-export default Object.assign(Accordion, { Item });
+export default /* @__PURE__ */ Object.assign(Accordion, { Item: Item });

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

@@ -1,14 +1,12 @@
 import type { Snippet } from 'svelte';
 import * as accordion from '@zag-js/accordion';
-export interface AccordionContext {
+import type { SlideParams } from 'svelte/transition';
+export interface AccordionContext extends Pick<AccordionProps, 'animationConfig' | 'iconOpen' | 'iconClosed'> {
     api: ReturnType<typeof accordion.connect>;
-    animDuration: number;
-    iconOpen?: Snippet;
-    iconClosed?: Snippet;
 }
-export interface AccordionProps extends Omit<accordion.Context, 'id' | 'orientation'> {
-    /** The slide animation duration in milliseconds. */
-    animDuration?: number;
+export interface AccordionProps extends Omit<accordion.Props, 'id' | 'orientation'> {
+    /** The animation configuration */
+    animationConfig?: SlideParams;
     /** Sets base styles. */
     base?: string;
     /** Set padding styles. */
@@ -29,8 +27,8 @@ export interface AccordionProps extends Omit<accordion.Context, 'id' | 'orientat
     iconClosed?: Snippet;
 }
 export interface AccordionItemProps extends accordion.ItemProps {
-    /** The element used as the header. */
-    headingElement?: string;
+    /** The heading level. */
+    headingLevel?: number;
     /** Sets base styles. */
     base?: string;
     /** Set vertical spacing styles. */

package/dist/components/AppBar/AppBar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { AppBarProps } from './types.js';
 
-	let {
+	const {
 		// Root
 		base = 'w-full flex flex-col',
 		background = 'bg-surface-100-900',

package/dist/components/Avatar/Avatar.svelte

@@ -2,13 +2,11 @@
 	import * as avatar from '@zag-js/avatar';
 	import { useMachine, normalizeProps } from '@zag-js/svelte';
 	import type { AvatarProps } from './types.js';
-	import { useId } from '../../internal/use-id.js';
 
-	let {
+	const {
 		src,
 		srcset,
 		name,
-		filter,
 		// Root
 		base = 'overflow-hidden isolate',
 		background = 'bg-surface-400-600',
@@ -26,12 +24,18 @@
 		fallbackBase = 'w-full h-full flex justify-center items-center',
 		fallbackClasses = '',
 		// Snippets
-		children
+		children,
+		// Zag
+		...zagProps
 	}: AvatarProps = $props();
 
 	// Zag
-	const [snapshot, send] = useMachine(avatar.machine({ id: useId() }));
-	const api = $derived(avatar.connect(snapshot, send, normalizeProps));
+	const id = $props.id();
+	const service = useMachine(avatar.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(avatar.connect(service, normalizeProps));
 
 	// Generate Initials
 	function getInitials(name: string) {
@@ -44,20 +48,12 @@
 
 <!-- @component An image with a fallback for representing a single user. -->
 
-<figure {...api.getRootProps()} class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}" data-testid="avatar">
-	<!-- Image -->
-	{#if src || srcset}
-		<img
-			{...api.getImageProps()}
-			{src}
-			{srcset}
-			alt={name}
-			class="{imageBase} {imageClasses}"
-			style:filter={filter && `url(${filter})`}
-			data-testid="avatar-image"
-			{style}
-		/>
-	{/if}
+<figure
+	{...api.getRootProps()}
+	class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}"
+	{style}
+	data-testid="avatar"
+>
 	<!-- Fallback -->
 	<span {...api.getFallbackProps()} class="{fallbackBase} {fallbackClasses}" data-testid="avatar-fallback">
 		{#if children}
@@ -66,4 +62,8 @@
 			{getInitials(name)}
 		{/if}
 	</span>
+	<!-- Image -->
+	{#if src || srcset}
+		<img {...api.getImageProps()} {src} {srcset} alt={name} class="{imageBase} {imageClasses}" data-testid="avatar-image" />
+	{/if}
 </figure>

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

@@ -1,13 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-export interface AvatarProps {
+import type * as avatar from '@zag-js/avatar';
+export interface AvatarProps extends Omit<avatar.Props, 'id'>, Pick<HTMLAttributes<HTMLElement>, 'style'> {
     /** Set avatar image source URL. */
     src?: string;
     /** The source set of the avatar image. */
     srcset?: string;
     /** Provide a name or username for the avatar. */
     name: string;
-    /** Set avatar image filter name, such as: "#Apollo". */
-    filter?: string;
     /** Set base styles. */
     base?: string;
     /** Set background styles. */
@@ -28,8 +28,6 @@ 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

@@ -1,16 +1,13 @@
-<script lang="ts">
+<script lang="ts" generics="T extends ComboboxItem">
 	import { fade } from 'svelte/transition';
-
 	import * as combobox from '@zag-js/combobox';
 	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
-	import type { ComboboxProps } from './types.js';
-	import { useId } from '../../internal/use-id.js';
+	import type { ComboboxProps, ComboboxItem } from './types.js';
 
-	let {
-		data = $bindable([]),
-		value = $bindable([]),
+	const {
+		data = [],
 		label = '',
-		disabled = false,
+		zIndex = 'auto',
 		// Base
 		base = '',
 		width = '',
@@ -27,7 +24,6 @@
 		inputGroupClasses = '',
 		// Positioner
 		positionerBase = '',
-		zIndex = 'auto',
 		positionerClasses = '',
 		// Content
 		contentBase = 'card p-2',
@@ -41,55 +37,41 @@
 		optionClasses = '',
 		// Snippets
 		arrow,
+		item,
 		// Events
 		onclick,
 		// Zag ---
 		...zagProps
-	}: ComboboxProps = $props();
+	}: ComboboxProps<T> = $props();
 
 	// Zag
 	let options = $state.raw(data);
-	const collection = combobox.collection({
-		items: data,
-		// Map data structure
-		itemToValue: (item) => item.value,
-		itemToString: (item) => item.label
-	});
-	const [snapshot, send] = useMachine(
-		combobox.machine({
-			id: useId(),
-			collection,
-			value: $state.snapshot(value),
-			loopFocus: true,
-			onOpenChange(details) {
-				zagProps.onOpenChange?.(details);
-				options = data;
-			},
-			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;
-			}
-		}),
-		{
-			context: {
-				...zagProps,
-				get data() {
-					return $state.snapshot(data);
-				},
-				get value() {
-					return $state.snapshot(value);
-				}
-			}
-		}
+	const collection = $derived(
+		combobox.collection({
+			items: data,
+			// Map data structure
+			itemToValue: (item) => item.value,
+			itemToString: (item) => item.label
+		})
 	);
-	const api = $derived(combobox.connect(snapshot, send, normalizeProps));
+
+	const id = $props.id();
+	const service = useMachine(combobox.machine, () => ({
+		id: id,
+		collection: collection,
+		...zagProps,
+		onOpenChange(event) {
+			options = data;
+			zagProps.onOpenChange?.(event);
+		},
+		onInputValueChange(event) {
+			const filtered = data.filter((item) => item.label.toLowerCase().includes(event.inputValue.toLowerCase()));
+			collection.setItems(filtered);
+			options = filtered;
+			zagProps.onInputValueChange?.(event);
+		}
+	}));
+	const api = $derived(combobox.connect(service, normalizeProps));
 	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
@@ -100,9 +82,9 @@
 		<!-- Input Group -->
 		<div {...api.getControlProps()} class="{inputGroupBase} {inputGroupClasses}">
 			<!-- Input -->
-			<input {...api.getInputProps()} class={inputGroupInput} {disabled} />
+			<input {...api.getInputProps()} class={inputGroupInput} />
 			<!-- Arrow -->
-			<button {...triggerProps} class={inputGroupButton} {disabled}>
+			<button {...triggerProps} class={inputGroupButton}>
 				{#if arrow}
 					{@render arrow()}
 				{:else}
@@ -135,13 +117,18 @@
 					class="{contentBase} {contentBackground} {contentSpaceY} {contentClasses}"
 					style="z-index: {zIndex}"
 				>
-					{#each options as item}
-						{@const isChecked = api.getItemProps({ item })['data-state'] === 'checked'}
+					{#each options as option (option.label)}
+						{@const isChecked = api.getItemProps({ item: option })['data-state'] === 'checked'}
 						{@const displayClass = isChecked ? optionActive : optionHover}
 						<!-- Option -->
-						<!-- ZagJs should have set button type to "button" here. See https://github.com/skeletonlabs/skeleton/pull/2998#discussion_r1855511385 -->
-						<button {...api.getItemProps({ item })} class="{optionBase} {displayClass} {optionClasses}" type="button">
-							{item.label}
+						<!-- ZagJs should have set button type to "button" here. -->
+						<!-- See https://github.com/skeletonlabs/skeleton/pull/2998#discussion_r1855511385 -->
+						<button {...api.getItemProps({ item: option })} class="{optionBase} {displayClass} {optionClasses}" type="button">
+							{#if item}
+								{@render item(option)}
+							{:else}
+								{option.label}
+							{/if}
 						</button>
 					{/each}
 				</nav>

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

@@ -1,4 +1,18 @@
-import type { ComboboxProps } from './types.js';
-declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "data">;
-type Combobox = ReturnType<typeof Combobox>;
+import type { ComboboxProps, ComboboxItem } from './types.js';
+declare class __sveltets_Render<T extends ComboboxItem> {
+    props(): ComboboxProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T extends ComboboxItem> = InstanceType<typeof Combobox<T>>;
 export default Combobox;

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

@@ -1,17 +1,12 @@
 import type { Snippet } from 'svelte';
 import * as combobox from '@zag-js/combobox';
-export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection' | 'value' | 'label' | 'multiple'> {
+export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Props, 'id' | 'collection'> {
     /** Provide the list of label and value data */
-    data?: {
-        label: string;
-        value: string;
-    }[];
-    /** Bind the selected value. */
-    value?: string[] | undefined;
+    data?: T[];
     /** Set the label to display. */
     label?: string;
-    /** Disable the trigger element of the combobox */
-    disabled?: boolean;
+    /** Set z-index for the positioner. */
+    zIndex?: string;
     /** Set base classes for the root element. */
     base?: string;
     /** Set width classes for the root element. */
@@ -36,8 +31,6 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
     inputGroupClasses?: string;
     /** Set base classes for the positioner. */
     positionerBase?: string;
-    /** Set z-index for the positioner. */
-    zIndex?: string;
     /** Provide arbitrary classes for the positioner. */
     positionerClasses?: string;
     /** Set base classes for the content. */
@@ -60,6 +53,12 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
     optionClasses?: string;
     /** Provide a custom arrow icon. */
     arrow?: Snippet;
+    /** Provide a custom template for the option. */
+    item?: Snippet<[T]>;
     /** Handle the combobox dropdown button click event. */
     onclick?: (event: Event) => void;
 }
+export interface ComboboxItem {
+    label: string;
+    value: string;
+}

package/dist/components/FileUpload/FileUpload.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import * as fileUpload from '@zag-js/file-upload';
 	import { useMachine, normalizeProps } from '@zag-js/svelte';
-	import { useId } from '../../internal/use-id.js';
+
 	import type { FileUploadProps } from './types.js';
 
 	// Props
-	let {
+	const {
 		label = `Select file or drag here`,
 		subtext = '',
 		// Root
@@ -22,7 +22,7 @@
 		// Interface (content)
 		interfaceIcon = '',
 		interfaceText = '',
-		interfaceSubtext = 'type-scale-1 opacity-60',
+		interfaceSubtext = 'text-xs opacity-60',
 		// Files List
 		filesListBase = 'mt-2 space-y-2',
 		filesListClasses = '',
@@ -35,8 +35,8 @@
 		fileClasses = '',
 		// File (content)
 		fileIcon = '',
-		fileName = 'type-scale-2 flex items-center gap-4',
-		fileSize = 'type-scale-1 opacity-60',
+		fileName = 'text-sm flex items-center gap-4',
+		fileSize = 'text-xs opacity-60',
 		fileButton = '',
 		// State
 		stateInvalid = 'border-error-500',
@@ -48,26 +48,23 @@
 		iconFile,
 		iconFileRemove,
 		// Zag
-		internalApi = $bindable(),
 		...zagProps
 	}: FileUploadProps = $props();
 
 	// Zag
-	const [snapshot, send] = useMachine(
-		fileUpload.machine({
-			id: useId()
-		}),
-		{ context: { ...zagProps } }
-	);
-	const api = $derived(fileUpload.connect(snapshot, send, normalizeProps));
+	const id = $props.id();
+	const service = useMachine(fileUpload.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(fileUpload.connect(service, normalizeProps));
 
-	$effect(() => {
-		// Provide the full Zag component API
-		internalApi = api;
+	$effect.pre(() => {
+		zagProps.onApiReady?.(api);
 	});
 
 	// Reactive
-	const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : '');
+	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
 	const rxInvalid = $derived(api.rejectedFiles.length > 0 ? stateInvalid : interfaceBorderColor);
 	const rxDragging = $derived(api.dragging && !children ? stateDragging : '');
 </script>
@@ -104,7 +101,7 @@
 	{#if !children}
 		<ul {...api.getItemGroupProps()} class="{filesListBase} {filesListClasses}" data-testid="uploader-files-list">
 			<!-- Loop Files -->
-			{#each api.acceptedFiles as file}
+			{#each api.acceptedFiles as file (file.name)}
 				<!-- File -->
 				<li
 					{...api.getItemProps({ file })}

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

@@ -1,5 +1,5 @@
 import type { FileUploadProps } from './types.js';
 /** A form component for handling file uploads. */
-declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "internalApi">;
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import * as fileUpload from '@zag-js/file-upload';
 import type { PropTypes } from '@zag-js/svelte';
 export type FileUploadApi = fileUpload.Api<PropTypes>;
-export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'> {
+export interface FileUploadProps extends Omit<fileUpload.Props, 'id'> {
     /** Set the interface text value. */
     label?: string;
     /** Set the interface subtext value. */
@@ -70,5 +70,5 @@ export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'
     /** Provide an icon for the remove file action. */
     iconFileRemove?: Snippet;
     /** Binds the Zag API for external use. */
-    internalApi?: FileUploadApi;
+    onApiReady?: (api: FileUploadApi) => void;
 }

package/dist/components/Modal/Modal.svelte

@@ -3,14 +3,12 @@
 	import * as dialog from '@zag-js/dialog';
 	import { portal, normalizeProps, useMachine, mergeProps } from '@zag-js/svelte';
 	import type { ModalProps } from './types.js';
-	import { useId } from '../../internal/use-id.js';
 
-	let {
-		open = $bindable(false),
-		disabled = false,
+	const {
 		// Base
 		base = '',
 		classes = '',
+		zIndex = 'auto',
 		// Trigger
 		triggerBase = '',
 		triggerBackground = '',
@@ -26,7 +24,6 @@
 		positionerJustify = 'justify-center',
 		positionerAlign = 'items-center',
 		positionerPadding = 'p-4',
-		zIndex = 'auto',
 		positionerClasses = '',
 		// Content
 		contentBase = '',
@@ -47,38 +44,19 @@
 	}: ModalProps = $props();
 
 	// Zag
-	const [snapshot, send] = useMachine(
-		dialog.machine({
-			id: useId(),
-			open
-		}),
-		{
-			context: {
-				...zagProps,
-				onOpenChange(details) {
-					zagProps.onOpenChange?.(details);
-					open = details.open;
-				},
-				get open() {
-					return $state.snapshot(open);
-				}
-			}
-		}
-	);
-	const api = $derived(dialog.connect(snapshot, send, normalizeProps));
+	const id = $props.id();
+	const service = useMachine(dialog.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(dialog.connect(service, normalizeProps));
 	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
 <span class="{base} {classes}" data-testid="modal">
 	<!-- Trigger -->
 	{#if trigger}
-		<button
-			{...triggerProps}
-			class="{triggerBase} {triggerBackground} {triggerClasses}"
-			{disabled}
-			type="button"
-			aria-label={triggerAriaLabel}
-		>
+		<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}" type="button" aria-label={triggerAriaLabel}>
 			{@render trigger()}
 		</button>
 	{/if}

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

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