@skeletonlabs/skeleton-svelte 1.0.0-next.15 → 1.0.0-next.17

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.d.ts

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

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

@@ -2,4 +2,5 @@ import { Accordion } from '../../index.js';
 declare const Accordion: import("svelte").Component<{
     childProps?: Record<string, unknown>;
 }, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

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

@@ -1,4 +1,5 @@
 import type { AccordionItemProps } from './types.js';
 /** A accordion item component. */
 declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;

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

@@ -1,4 +1,5 @@
 import type { AppBarProps } from './types.js';
 /** A header element for the top of a page layout. */
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

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

@@ -1,4 +1,5 @@
 import type { AvatarProps } from './types.js';
 /** An image with a fallback for representing a single user. */
 declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/Combobox/Combobox.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 
 	import * as combobox from '@zag-js/combobox';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { ComboboxProps } from './types.js';
 	import { useId } from '../../internal/use-id.js';
 
@@ -24,13 +24,15 @@
 		inputGroupButton = 'input-group-cell',
 		inputGroupArrow = '',
 		inputGroupClasses = '',
+		// Positioner
+		positionerBase = '',
+		positionerZIndex = '',
+		positionerClasses = '',
 		// Content
 		contentBase = 'card p-2',
 		contentBackground = 'preset-outlined-surface-200-800 bg-surface-50-950',
+		contentSpaceY = 'space-y-1',
 		contentClasses = '',
-		// List
-		listBase = 'space-y-1',
-		listClasses = '',
 		// Option
 		optionBase = 'btn justify-start w-full',
 		optionHover = 'hover:preset-tonal',
@@ -38,6 +40,8 @@
 		optionClasses = '',
 		// Snippets
 		arrow,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: ComboboxProps = $props();
@@ -82,6 +86,7 @@
 		}
 	);
 	const api = $derived(combobox.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
 <span {...api.getRootProps()} class="{base} {width} {classes}" data-testid="combobox">
@@ -93,7 +98,7 @@
 			<!-- Input -->
 			<input {...api.getInputProps()} class={inputGroupInput} />
 			<!-- Arrow -->
-			<button {...api.getTriggerProps()} class={inputGroupButton}>
+			<button {...triggerProps} class={inputGroupButton}>
 				{#if arrow}
 					{@render arrow()}
 				{:else}
@@ -116,12 +121,12 @@
 			</button>
 		</div>
 	</label>
-	<!-- Content -->
+	<!-- Menu -->
 	{#if api.open}
-		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{contentBase} {contentBackground} {contentClasses}">
+		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerZIndex} {positionerClasses}">
 			{#if options.length > 0}
-				<!-- List -->
-				<nav {...api.getContentProps()} class="{listBase} {listClasses}">
+				<!-- Content (list) -->
+				<nav {...api.getContentProps()} class="{contentBase} {contentBackground} {contentSpaceY} {contentClasses}">
 					{#each options as item}
 						{@const isChecked = api.getItemProps({ item })['data-state'] === 'checked'}
 						{@const displayClass = isChecked ? optionActive : optionHover}

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

@@ -1,3 +1,4 @@
 import type { ComboboxProps } from './types.js';
 declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "data">;
+type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import * as combobox from '@zag-js/combobox';
-export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection' | 'value' | 'label'> {
+export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection' | 'value' | 'label' | 'multiple'> {
     /** Provide the list of label and value data */
     data?: {
         label: string;
@@ -32,20 +32,24 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
     inputGroupArrow?: string;
     /** Provide arbitrary classes for the input group. */
     inputGroupClasses?: string;
+    /** Set base classes for the positioner. */
+    positionerBase?: string;
+    /** Set z-index classes for the positioner. */
+    positionerZIndex?: string;
+    /** Provide arbitrary classes for the positioner. */
+    positionerClasses?: string;
     /** Set base classes for the content. */
     contentBase?: string;
     /** Set background classes for the content. */
     contentBackground?: string;
+    /** Set space-y classes for the content. */
+    contentSpaceY?: string;
     /** Provide arbitrary classes for the content. */
     contentClasses?: string;
-    /** Set base classes for the list. */
-    listBase?: string;
-    /** Provide arbitrary classes for the list. */
-    listClasses?: string;
     /** Set base classes for the option. */
     optionBase?: string;
     /** Set focus classes for the option. */
-    optonFocus?: string;
+    optionFocus?: string;
     /** Set hover classes for the option. */
     optionHover?: string;
     /** Set active classes for the option. */
@@ -54,4 +58,6 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
     optionClasses?: string;
     /** Provide a custom arrow icon. */
     arrow?: Snippet;
+    /** Handle the combobox dropdown button click event. */
+    onclick?: (event: Event) => void;
 }

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

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

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

@@ -1,8 +1,7 @@
 import type { Snippet } from 'svelte';
 import * as fileUpload from '@zag-js/file-upload';
 import type { PropTypes } from '@zag-js/svelte';
-export interface FileUploadApi extends fileUpload.Api<PropTypes> {
-}
+export type FileUploadApi = fileUpload.Api<PropTypes>;
 export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'> {
     /** Set the interface text value. */
     label?: string;

package/dist/components/Modal/Modal.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { fly, fade } from 'svelte/transition';
 	import * as dialog from '@zag-js/dialog';
-	import { portal, normalizeProps, useMachine } from '@zag-js/svelte';
+	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),
+		// Base
+		base = '',
+		classes = '',
 		// Trigger
 		triggerBase = '',
 		triggerBackground = '',
@@ -21,6 +24,7 @@
 		positionerJustify = 'justify-center',
 		positionerAlign = 'items-center',
 		positionerPadding = 'p-4',
+		positionerZIndex = '',
 		positionerClasses = '',
 		// Content
 		contentBase = '',
@@ -34,6 +38,8 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: ModalProps = $props();
@@ -58,15 +64,15 @@
 		}
 	);
 	const api = $derived(dialog.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
-<span data-testid="modal">
+<span class="{base} {classes}" data-testid="modal">
 	<!-- Trigger -->
-	{#if trigger}
-		<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
-			{@render trigger()}
-		</button>
-	{/if}
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
+		{@render trigger?.()}
+	</button>
+
 	{#if api.open}
 		<!-- Backdrop -->
 		<div
@@ -80,7 +86,7 @@
 		<div
 			use:portal
 			{...api.getPositionerProps()}
-			class="{positionerBase} {positionerDisplay} {positionerJustify} {positionerAlign} {positionerPadding} {positionerClasses}"
+			class="{positionerBase} {positionerDisplay} {positionerJustify} {positionerAlign} {positionerPadding} {positionerZIndex} {positionerClasses}"
 			in:fly={transitionsPositionerIn}
 			out:fly={transitionsPositionerOut}
 		>

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

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

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

@@ -4,6 +4,10 @@ import type { FlyParams, FadeParams } from 'svelte/transition';
 export interface ModalProps extends Omit<dialog.Context, 'id' | 'open'> {
     /** Set the open state of the dialog. */
     open?: boolean;
+    /** Set base classes for the root element. */
+    base?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
     /** Set base classes for the trigger. */
     triggerBase?: string;
     /** Set background classes for the trigger. */
@@ -26,6 +30,8 @@ export interface ModalProps extends Omit<dialog.Context, 'id' | 'open'> {
     positionerAlign?: string;
     /** Set padding classes for the positioner. */
     positionerPadding?: string;
+    /** Set z-index classes for the positioner. */
+    positionerZIndex?: string;
     /** Provide arbitrary classes for the positioner. */
     positionerClasses?: string;
     /** Set base classes for the content. */
@@ -34,12 +40,18 @@ export interface ModalProps extends Omit<dialog.Context, 'id' | 'open'> {
     contentBackground?: string;
     /** Provide arbitrary classes for the content. */
     contentClasses?: string;
+    /** Provide transition for backdrop in */
     transitionsBackdropIn?: FadeParams;
+    /** Provide transition for backdrop out */
     transitionsBackdropOut?: FadeParams;
+    /** Provide transition for dialog in */
     transitionsPositionerIn?: FlyParams;
+    /** Provide transition for dialog out */
     transitionsPositionerOut?: FlyParams;
-    /** Provide the template contents of the trigger element. */
+    /** Provide the template contents inside the trigger button. */
     trigger?: Snippet;
     /** Provide the template contents of the dialog itself. */
     content?: Snippet;
+    /** Handle the dialog button click event. */
+    onclick?: () => void;
 }

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.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { NavBarProps } from './types.js';
 /** Provides a horizontal navigation interface. */
 declare const NavBar: import("svelte").Component<NavBarProps, {}, "value">;
+type NavBar = ReturnType<typeof NavBar>;
 export default NavBar;

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

@@ -1,4 +1,5 @@
 declare const NavBar: import("svelte").Component<{
     childProps?: Record<string, unknown>;
 }, {}, "">;
+type NavBar = ReturnType<typeof NavBar>;
 export default NavBar;

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

@@ -1,4 +1,5 @@
 import type { NavRailProps } from './types.js';
 /** Provides a vertical navigation interface. */
 declare const NavRail: import("svelte").Component<NavRailProps, {}, "value">;
+type NavRail = ReturnType<typeof NavRail>;
 export default NavRail;

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

@@ -2,4 +2,5 @@ declare const NavRail: import("svelte").Component<{
     rootProps?: Record<string, unknown>;
     childProps?: Record<string, unknown>;
 }, {}, "">;
+type NavRail = ReturnType<typeof NavRail>;
 export default NavRail;

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

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

package/dist/components/Pagination/Pagination.svelte

@@ -64,7 +64,8 @@
 					return pageSize;
 				},
 				get count() {
-					return data.length;
+					// Use 'count' if specified; required for server-side pagination.
+					return zagProps.count ?? data.length;
 				}
 			}
 		}

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

@@ -1,3 +1,4 @@
 import type { PaginationProps } from './types.js';
 declare const Pagination: import("svelte").Component<PaginationProps, {}, "pageSize" | "page" | "data">;
+type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

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

@@ -1,11 +1,15 @@
 import type { Snippet } from 'svelte';
 import * as pagination from '@zag-js/pagination';
 export interface PaginationProps extends Omit<pagination.Context, 'id' | 'page' | 'pageSize' | 'count'> {
+    /** Provide source data as an array. */
+    data: unknown[];
+    /** Total number of data items. Required for server-side pagination. */
+    count?: number;
     /** Bind the current page. */
     page: number;
     /** Bind the number of data items to display. */
     pageSize: number;
-    data: unknown[];
+    /** Enables alternative display with stats and first/last buttons. */
     alternative?: boolean;
     /** Set the separator text or character, such as "of" in "X of Y". */
     textSeparator?: string;

package/dist/components/Popover/Popover.svelte

@@ -2,17 +2,24 @@
 	import { fade } from 'svelte/transition';
 
 	import * as popover from '@zag-js/popover';
-	import { portal, useMachine, normalizeProps } from '@zag-js/svelte';
+	import { portal, useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { PopoverProps } from './types.js';
 	import { useId } from '../../internal/use-id.js';
 
 	let {
 		open = $bindable(false),
 		arrow = false,
+		// Base
+		base = '',
+		classes = '',
 		// Trigger
 		triggerBase = '',
 		triggerBackground = '',
 		triggerClasses = '',
+		// Positioner
+		positionerBase = '',
+		positionerZIndex = '',
+		positionerClasses = '',
 		// Content
 		contentBase = '',
 		contentBackground = '',
@@ -24,6 +31,8 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: PopoverProps = $props();
@@ -47,15 +56,20 @@
 		}
 	);
 	const api = $derived(popover.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
-<span data-testid="popover">
+<span class="{base} {classes}" data-testid="popover">
 	<!-- Snippet: Trigger -->
-	<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
 		{@render trigger?.()}
 	</button>
 	<!-- Portal -->
-	<div use:portal={{ disabled: !api.portalled }} {...api.getPositionerProps()}>
+	<div
+		use:portal={{ disabled: !api.portalled }}
+		{...api.getPositionerProps()}
+		class="{positionerBase} {positionerZIndex} {positionerClasses}"
+	>
 		<!-- Popover -->
 		{#if api.open}
 			<div {...api.getContentProps()} transition:fade={{ duration: 100 }}>

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

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

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

@@ -5,26 +5,38 @@ export interface PopoverProps extends Omit<popover.Context, 'id' | 'open'> {
     open?: boolean;
     /** Enable display of the popover arrow. */
     arrow?: boolean;
-    /** Set base styles for the trigger. */
+    /** Set base classes for the root element. */
+    base?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
+    /** Set base classes for the trigger. */
     triggerBase?: string;
-    /** Set background styles for the trigger. */
+    /** Set background classes for the trigger. */
     triggerBackground?: string;
-    /** Provide arbitrary styles for the trigger. */
+    /** Provide arbitrary classes for the trigger. */
     triggerClasses?: string;
-    /** Set base styles for the content. */
+    /** Set base classes for the positioner. */
+    positionerBase?: string;
+    /** Set z-index classes for the positioner. */
+    positionerZIndex?: string;
+    /** Provide arbitrary classes for the positioner. */
+    positionerClasses?: string;
+    /** Set base classes for the content. */
     contentBase?: string;
-    /** Set background styles for the content. */
+    /** Set background classes for the content. */
     contentBackground?: string;
-    /** Provide arbitrary styles for the content. */
+    /** Provide arbitrary classes for the content. */
     contentClasses?: string;
-    /** Set base styles for the arrow. */
+    /** Set base classes for the arrow. */
     arrowBase?: string;
-    /** Set background styles for the arrow. */
+    /** Set background classes for the arrow. */
     arrowBackground?: string;
-    /** Provide arbitrary styles for the arrow. */
+    /** Provide arbitrary classes for the arrow. */
     arrowClasses?: string;
-    /** Provide the the trigger element, such as a button. */
+    /** Provide the template contents inside the trigger button. */
     trigger?: Snippet;
     /** Provide the template contents of the popover itself. */
     content?: Snippet;
+    /** Handle the popover button click event. */
+    onclick?: () => void;
 }

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

@@ -1,4 +1,5 @@
 import type { ProgressProps } from './types.js';
 /** A linear progress bar. */
 declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
 export default Progress;

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

@@ -1,4 +1,5 @@
 import type { ProgressRingProps } from './types.js';
 /** A circular progress bar. */
 declare const ProgressRing: import("svelte").Component<ProgressRingProps, {}, "">;
+type ProgressRing = ReturnType<typeof ProgressRing>;
 export default ProgressRing;

package/dist/components/Rating/Rating.svelte

@@ -17,7 +17,7 @@
 		controlGap = 'gap-2',
 		controlClasses,
 		// Label
-		labelBase = '',
+		labelBase = 'label-text',
 		labelClasses = '',
 		// Item
 		itemBase = '',

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

@@ -1,4 +1,5 @@
 import type { RatingProps } from './types.js';
 /** A visual representation of a numeric range. */
 declare const Rating: import("svelte").Component<RatingProps, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/Segment/Segment.svelte

@@ -28,6 +28,10 @@
 		indicatorText = 'text-surface-contrast-950 dark:text-surface-contrast-50',
 		indicatorRounded = 'rounded',
 		indicatorClasses = '',
+
+		// Label
+		labelledby = '',
+
 		// Snippets
 		children,
 		// Zag
@@ -75,6 +79,7 @@
 <div
 	{...api.getRootProps()}
 	class="{base} {rxOrientation} {background} {border} {padding} {gap} {rounded} {width} {rxDisabled} {rxReadOnly} {classes}"
+	aria-labelledby={labelledby}
 	data-testid="segment"
 >
 	<!-- Indicator -->

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

@@ -1,4 +1,5 @@
 import type { SegmentProps } from './types.js';
 /** Capture input for a limited set of options. */
 declare const Segment: import("svelte").Component<SegmentProps, {}, "value">;
+type Segment = ReturnType<typeof Segment>;
 export default Segment;

package/dist/components/Segment/Segment.test.js

@@ -46,14 +46,14 @@ describe('SegmentItem', () => {
     it('should render in the checked state', () => {
         render(SegmentTest, {});
         const component = screen.getAllByTestId(testIds.root)[0];
-        const ariaSelected = component.getAttribute('aria-selected');
-        expect(ariaSelected).toBeTruthy;
+        const attrDataState = component.getAttribute('data-state');
+        expect(attrDataState).toBe('checked');
     });
     it('should render in the unchecked state', () => {
         render(SegmentTest, {});
         const component = screen.getAllByTestId(testIds.root)[1];
-        const ariaSelected = component.getAttribute('aria-selected');
-        expect(ariaSelected).toBeFalsy;
+        const attrDataState = component.getAttribute('data-state');
+        expect(attrDataState).toBe('unchecked');
     });
     it('should render in the disabled state', () => {
         render(SegmentTest, {});

package/dist/components/Segment/Segment.test.svelte.d.ts

@@ -2,4 +2,5 @@ import { Segment } from '../../index.js';
 declare const Segment: import("svelte").Component<{
     childProps?: Record<string, unknown>;
 }, {}, "">;
+type Segment = ReturnType<typeof Segment>;
 export default Segment;

package/dist/components/Segment/SegmentItem.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { SegmentItemProps } from './types.js';
 /** An individual Segment option. */
 declare const SegmentItem: import("svelte").Component<SegmentItemProps, {}, "">;
+type SegmentItem = ReturnType<typeof SegmentItem>;
 export default SegmentItem;

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

@@ -8,7 +8,7 @@ export interface SegmentProps extends Omit<radio.Context, 'id' | 'orientation' |
     /** Set the active value. */
     value?: string;
     /** Set the orientation. */
-    orientation?: 'horizontal' | 'vertical' | undefined;
+    orientation?: 'horizontal' | 'vertical';
     /** Sets base classes. */
     base?: string;
     /** Set background classes. */
@@ -29,11 +29,11 @@ export interface SegmentProps extends Omit<radio.Context, 'id' | 'orientation' |
     classes?: string;
     /** Set classes to provide a vertical layout. */
     orientVertical?: string;
-    /** Set classes to provide a horizintal layout. */
+    /** Set classes to provide a horizontal layout. */
     orientHorizontal?: string;
-    /** Set claseses for the disabled state. */
+    /** Set classes for the disabled state. */
     stateDisabled?: string;
-    /** Set claseses for the read-only state. */
+    /** Set classes for the read-only state. */
     stateReadOnly?: string;
     /** Sets base classes to the indicator. */
     indicatorBase?: string;
@@ -45,6 +45,8 @@ export interface SegmentProps extends Omit<radio.Context, 'id' | 'orientation' |
     indicatorRounded?: string;
     /** Provide arbitrary CSS classes to the indicator. */
     indicatorClasses?: string;
+    /** Set aria-labelledby for element */
+    labelledby?: string;
     /** The default child slot. */
     children?: Snippet;
 }
@@ -53,9 +55,9 @@ export interface SegmentItemProps extends Omit<radio.ItemProps, 'invalid'> {
     base?: string;
     /** Provide arbitrary CSS classes. */
     classes?: string;
-    /** Set claseses for the disabled state. */
+    /** Set classes for the disabled state. */
     stateDisabled?: string;
-    /** Set claseses for the focus state. */
+    /** Set classes for the focus state. */
     stateFocused?: string;
     /** Sets base classes for the label element. */
     labelBase?: string;

package/dist/components/Slider/Slider.svelte

@@ -33,7 +33,6 @@
 		thumbRingSize = 'ring-2',
 		thumbRingColor = 'ring-surface-950-50',
 		thumbRounded = 'rounded-full',
-		thumbScale = 'hover:scale-125',
 		thumbCursor = 'hover:cursor-pointer',
 		thumbClasses = '',
 		// Markers ---
@@ -74,7 +73,7 @@
 
 	// Reactive
 	const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : '');
-	const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : `${thumbScale} ${thumbCursor}`);
+	const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : thumbCursor);
 </script>
 
 <div {...api.getRootProps()} class="{base} {height} {spaceY} {rxDisabled} {classes}" data-testid="slider">

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

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

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

@@ -45,8 +45,6 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
     thumbRingColor?: string;
     /** Set border-radius classes for the thumb. */
     thumbRounded?: string;
-    /** Set scale classes for the thumb. */
-    thumbScale?: string;
     /** Set cursor classes for the thumb. */
     thumbCursor?: string;
     /** Provide arbitrary classes for the thumb. */

package/dist/components/Switch/Switch.svelte

@@ -12,7 +12,7 @@
 		base = 'inline-flex items-center gap-4',
 		classes = '',
 		// State
-		stateFocused = '[&>span]:focused',
+		stateFocused = 'data-[focus-visible]:focused',
 		// Control
 		controlBase = 'cursor-pointer transition duration-200',
 		controlInactive = 'preset-filled-surface-200-800',
@@ -98,13 +98,13 @@
 
 <!-- @component A control for toggling between checked states. -->
 
-<label {...api.getRootProps()} class="{base} {rxFocused} {classes}" data-testid="switch">
+<label {...api.getRootProps()} class="{base} {classes}" data-testid="switch">
 	<!-- Input -->
 	<input {...api.getHiddenInputProps()} data-testid="switch-input" />
 	<!-- Control -->
 	<span
 		{...api.getControlProps()}
-		class="{controlBase} {rxTrackState} {controlWidth} {controlHeight} {controlPadding} {controlRounded} {controlHover} {rxDisabled}  {controlClasses}"
+		class="{controlBase} {rxTrackState} {rxFocused} {controlWidth} {controlHeight} {controlPadding} {controlRounded} {controlHover} {rxDisabled}  {controlClasses}"
 		data-testid="switch-control"
 	>
 		<!-- Thumb -->
@@ -124,7 +124,9 @@
 		</span>
 	</span>
 	<!-- Label -->
-	<span {...api.getLabelProps()} class="{labelBase} {labelClasses}" data-testid="switch-label">
-		{@render children?.()}
-	</span>
+	{#if children}
+		<span {...api.getLabelProps()} class="{labelBase} {labelClasses}" data-testid="switch-label">
+			{@render children()}
+		</span>
+	{/if}
 </label>

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

@@ -1,4 +1,5 @@
 import type { SwitchProps } from './types.js';
 /** A control for toggling between checked states. */
 declare const Switch: import("svelte").Component<SwitchProps, {}, "disabled" | "checked" | "compact">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,4 +1,5 @@
 import type { TabsProps } from './types.js';
 /** Use tabs to quickly switch between different views and pages. */
 declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/Tabs/Tabs.test.svelte.d.ts

@@ -3,4 +3,5 @@ declare const Tabs: import("svelte").Component<{
     controlProps?: Record<string, unknown>;
     panelProps?: Record<string, unknown>;
 }, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/Tabs/TabsControl.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TabsControlProps } from './types.js';
 /** A individual tab trigger element. */
 declare const TabsControl: import("svelte").Component<TabsControlProps, {}, "">;
+type TabsControl = ReturnType<typeof TabsControl>;
 export default TabsControl;

package/dist/components/Tabs/TabsPanel.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TabsPanelProps } from './types.js';
 /** A individual tab panel of content. */
 declare const TabsPanel: import("svelte").Component<TabsPanelProps, {}, "">;
+type TabsPanel = ReturnType<typeof TabsPanel>;
 export default TabsPanel;

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

@@ -1,4 +1,5 @@
 import type { TagsInputProps } from './types.js';
 /** Capture a set of values from users via input and suggestions. */
 declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

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

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

package/dist/components/Tooltip/Tooltip.svelte

@@ -2,16 +2,23 @@
 	import { fade } from 'svelte/transition';
 
 	import * as tooltip from '@zag-js/tooltip';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { TooltipProps } from './types.js';
 	import { useId } from '../../internal/use-id.js';
 
 	let {
 		open = $bindable(false),
+		// Base
+		base = '',
+		classes = '',
 		// Trigger
 		triggerBase = '',
 		triggerBackground = '',
 		triggerClasses = '',
+		// Positioner
+		positionerBase = '',
+		positionerZIndex = '',
+		positionerClasses = '',
 		// Content
 		contentBase = '',
 		contentBackground = '',
@@ -19,6 +26,9 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onmouseover,
+		onclick,
 		// Zag ---
 		...zagProps
 	}: TooltipProps = $props();
@@ -42,16 +52,17 @@
 		}
 	);
 	const api = $derived(tooltip.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onmouseover, onclick }));
 </script>
 
-<span data-testid="tooltip">
+<span class="{base} {classes}" data-testid="tooltip">
 	<!-- Snippet: Trigger -->
-	<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
 		{@render trigger?.()}
 	</button>
 	<!-- Tooltip Content -->
 	{#if api.open}
-		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }}>
+		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerZIndex} {positionerClasses}">
 			<!-- Snippet Content -->
 			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}">
 				{@render content?.()}

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

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

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

@@ -3,20 +3,34 @@ import * as tooltip from '@zag-js/tooltip';
 export interface TooltipProps extends Omit<tooltip.Context, 'id' | 'open'> {
     /** Set the open state of the tooltip. */
     open?: boolean;
+    /** Set base classes for the root element. */
+    base?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
     /** Set base styles for the trigger. */
     triggerBase?: string;
     /** Set background styles for the trigger. */
     triggerBackground?: string;
     /** Provide arbitrary styles for the trigger. */
     triggerClasses?: string;
+    /** Set base classes for the positioner. */
+    positionerBase?: string;
+    /** Set z-index classes for the positioner. */
+    positionerZIndex?: string;
+    /** Provide arbitrary classes for the positioner. */
+    positionerClasses?: string;
     /** Set base styles for the content. */
     contentBase?: string;
     /** Set background styles for the content. */
     contentBackground?: string;
     /** Provide arbitrary styles for the content. */
     contentClasses?: string;
-    /** Provide the the trigger element, such as a button. */
+    /** Provide the template contents inside the trigger button. */
     trigger?: Snippet;
     /** Provide the template contents of the tooltip itself. */
     content?: Snippet;
+    /** Handle the tooltip button hover event. */
+    onmouseover?: () => void;
+    /** Handle the tooltip button click event. */
+    onclick?: () => void;
 }

package/dist/internal/snippets.js

@@ -15,8 +15,13 @@ export const starEmpty = createRawSnippet(() => {
 export const starHalf = createRawSnippet(() => {
     return {
         render: () => /*html*/ `
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
-                <defs>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" height="24" width="24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+                />
+				<defs>
                     <linearGradient id="half-fill">
                         <stop offset="50%" stop-color="currentColor" />
                         <stop offset="50%" stop-color="transparent" />
@@ -26,7 +31,7 @@ export const starHalf = createRawSnippet(() => {
                     fill="url(#half-fill)"
                     d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                 />
-            </svg>
+	        </svg>
         `
     };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.0.0-next.15",
+  "version": "1.0.0-next.17",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -22,48 +22,48 @@
     "./dist/**/*.d.cts"
   ],
   "dependencies": {
-    "@zag-js/accordion": "^0.75.0",
-    "@zag-js/avatar": "^0.75.0",
-    "@zag-js/combobox": "^0.75.0",
-    "@zag-js/dialog": "^0.75.0",
-    "@zag-js/file-upload": "^0.75.0",
-    "@zag-js/pagination": "^0.75.0",
-    "@zag-js/popover": "^0.75.0",
-    "@zag-js/progress": "^0.75.0",
-    "@zag-js/radio-group": "^0.75.0",
-    "@zag-js/rating-group": "^0.75.0",
-    "@zag-js/slider": "^0.75.0",
-    "@zag-js/svelte": "^0.75.0",
-    "@zag-js/switch": "^0.75.0",
-    "@zag-js/tabs": "^0.75.0",
-    "@zag-js/tags-input": "^0.75.0",
-    "@zag-js/tooltip": "^0.75.0"
+    "@zag-js/accordion": "^0.78.3",
+    "@zag-js/avatar": "^0.78.3",
+    "@zag-js/combobox": "^0.78.3",
+    "@zag-js/dialog": "^0.78.3",
+    "@zag-js/file-upload": "^0.78.3",
+    "@zag-js/pagination": "^0.78.3",
+    "@zag-js/popover": "^0.78.3",
+    "@zag-js/progress": "^0.78.3",
+    "@zag-js/radio-group": "^0.78.3",
+    "@zag-js/rating-group": "^0.78.3",
+    "@zag-js/slider": "^0.78.3",
+    "@zag-js/svelte": "^0.78.3",
+    "@zag-js/switch": "^0.78.3",
+    "@zag-js/tabs": "^0.78.3",
+    "@zag-js/tags-input": "^0.78.3",
+    "@zag-js/tooltip": "^0.78.3"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/svelte": "^5.2.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
     "autoprefixer": "^10.4.19",
     "jsdom": "^25.0.1",
-    "lucide-svelte": "^0.436.0",
-    "postcss": "^8.4.39",
-    "postcss-load-config": "^5.1.0",
-    "publint": "^0.1.16",
-    "svelte": "^5.0.5",
-    "svelte-check": "^3.8.4",
-    "tailwindcss": "^3.4.6",
-    "tslib": "^2.6.3",
+    "lucide-svelte": "^0.465.0",
+    "postcss": "^8.4.49",
+    "postcss-load-config": "^6.0.1",
+    "publint": "^0.2.12",
+    "svelte": "^5.6.2",
+    "svelte-check": "^4.1.1",
+    "tailwindcss": "^3.4.16",
+    "tslib": "^2.8.1",
     "typescript": "^5.6.3",
-    "vite": "^5.3.4",
-    "vitest": "^2.1.5",
-    "@skeletonlabs/skeleton": "3.0.0-next.9",
+    "vite": "^6.0.2",
+    "vitest": "3.0.0-beta.1",
+    "@skeletonlabs/skeleton": "3.0.0-next.10",
     "vite-plugin-tw-plugin-watcher": "0.0.1-next.0"
   },
   "type": "module",
@@ -74,6 +74,6 @@
     "package": "svelte-package",
     "package:watch": "svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest"
+    "test": "vitest run"
   }
 }