@skeletonlabs/skeleton-svelte 1.5.0 → 1.6.0-next.0

package/dist/components/Combobox/Combobox.svelte

@@ -26,9 +26,10 @@
 		positionerBase = '',
 		positionerClasses = '',
 		// Content
-		contentBase = 'card p-2',
+		contentBase = 'card p-2 overflow-y-auto',
 		contentBackground = 'preset-outlined-surface-200-800 bg-surface-50-950',
 		contentSpaceY = 'space-y-1',
+		contentMaxHeight = 'max-h-80',
 		contentClasses = '',
 		// Option
 		optionBase = 'btn justify-start w-full',
@@ -45,7 +46,8 @@
 	}: ComboboxProps<T> = $props();
 
 	// Zag
-	let options = $state.raw(data);
+	let options = $derived(data);
+
 	const collection = $derived(
 		combobox.collection({
 			items: options,
@@ -58,18 +60,27 @@
 	const id = $props.id();
 	const service = useMachine(combobox.machine, () => ({
 		id: id,
-		collection: collection,
+		get collection() {
+			return collection;
+		},
 		...zagProps,
-		onOpenChange(event) {
+		async onOpenChange(event) {
+			if (zagProps.onOpenChange) {
+				zagProps.onOpenChange(event);
+				return;
+			}
 			options = data;
-			zagProps.onOpenChange?.(event);
 		},
-		onInputValueChange(event) {
+		async onInputValueChange(event) {
+			if (zagProps.onInputValueChange) {
+				zagProps.onInputValueChange(event);
+				return;
+			}
 			const filtered = data.filter((item) => item.label.toLowerCase().includes(event.inputValue.toLowerCase()));
 			options = filtered;
-			zagProps.onInputValueChange?.(event);
 		}
 	}));
+
 	const api = $derived(combobox.connect(service, normalizeProps));
 	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
@@ -113,7 +124,7 @@
 				<!-- Content (list) -->
 				<nav
 					{...api.getContentProps()}
-					class="{contentBase} {contentBackground} {contentSpaceY} {contentClasses}"
+					class="{contentBase} {contentBackground} {contentSpaceY} {contentClasses} {contentMaxHeight}"
 					style="z-index: {zIndex}"
 				>
 					{#each options as option (option.label)}

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

@@ -39,6 +39,8 @@ export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Pro
     contentBackground?: string;
     /** Set space-y classes for the content. */
     contentSpaceY?: string;
+    /** Set max-h classes for the content. */
+    contentMaxHeight?: string;
     /** Provide arbitrary classes for the content. */
     contentClasses?: string;
     /** Set base classes for the option. */

package/dist/composed/accordion/anatomy/accordion-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionContentProps } from '../modules/types.js';
 
 	const rootContext = AccordionRootContext.consume();
@@ -11,7 +12,7 @@
 		mergeProps(
 			rootContext.api.getItemContentProps(itemContext.itemProps),
 			{
-				class: 'skb:py-2 skb:px-4'
+				class: classesAccordion.content
 			},
 			restAttributes
 		)

package/dist/composed/accordion/anatomy/accordion-heading.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionHeadingProps } from '../modules/types.js';
 
 	const props: AccordionHeadingProps = $props();
 	const { level = 3, element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			{
+				class: classesAccordion.heading
+			},
+			restAttributes
+		)
+	);
 	const tag = $derived(`h${level}`);
 </script>
 
 {#if element}
-	{@render element({ attributes: restAttributes })}
+	{@render element({ attributes })}
 {:else}
-	<svelte:element this={tag} {...restAttributes}>
+	<svelte:element this={tag} {...attributes}>
 		{@render children?.()}
 	</svelte:element>
 {/if}

package/dist/composed/accordion/anatomy/accordion-indicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionRootContext, AccordionItemContext } from '../modules/context.js';
 	import type { AccordionIndicatorProps } from '../modules/types.js';
 
@@ -7,7 +8,15 @@
 	const itemContext = AccordionItemContext.consume();
 	const props: AccordionIndicatorProps = $props();
 	const { element, children, ...restAttributes } = $derived(props);
-	const attributes = $derived(mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), restAttributes));
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemIndicatorProps(itemContext.itemProps),
+			{
+				class: classesAccordion.indicator
+			},
+			restAttributes
+		)
+	);
 </script>
 
 {#if element}

package/dist/composed/accordion/anatomy/accordion-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import * as accordion from '@zag-js/accordion';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
 	import type { AccordionItemProps } from '../modules/types.js';
 
@@ -12,7 +13,7 @@
 		mergeProps(
 			rootContext.api.getItemProps(itemProps),
 			{
-				class: 'skb:grid skb:gap-2'
+				class: classesAccordion.item
 			},
 			restAttributes
 		)

package/dist/composed/accordion/anatomy/accordion-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
 	import * as accordion from '@zag-js/accordion';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionRootContext } from '../modules/context.js';
 	import type { AccordionRootProps } from '../modules/types.js';
 
@@ -17,7 +18,7 @@
 		mergeProps(
 			api.getRootProps(),
 			{
-				class: 'skb:w-full skb:grid skb:gap-2'
+				class: classesAccordion.root
 			},
 			restAttributes
 		)

package/dist/composed/accordion/anatomy/accordion-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionTriggerProps } from '../modules/types.js';
 
 	const rootContext = AccordionRootContext.consume();
@@ -11,8 +12,7 @@
 		mergeProps(
 			rootContext.api.getItemTriggerProps(itemContext.itemProps),
 			{
-				class:
-					'skb:w-full skb:grid skb:items-center skb:gap-4 skb:py-2 skb:px-4 skb:rounded-base skb:text-left skb:hover:preset-tonal-primary'
+				class: classesAccordion.trigger
 			},
 			restAttributes
 		)

package/dist/composed/avatar/anatomy/avatar-fallback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarFallbackProps } from '../modules/types.js';
 
@@ -10,7 +11,7 @@
 		mergeProps(
 			rootContext.api.getFallbackProps(),
 			{
-				class: 'skb:size-full skb:flex skb:justify-center skb:items-center'
+				class: classesAvatar.fallback
 			},
 			restAttributes
 		)

package/dist/composed/avatar/anatomy/avatar-image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarImageProps } from '../modules/types.js';
 
@@ -10,7 +11,7 @@
 		mergeProps(
 			rootContext.api.getImageProps(),
 			{
-				class: 'skb:w-full skb:object-cover'
+				class: classesAvatar.image
 			},
 			restAttributes
 		)

package/dist/composed/avatar/anatomy/avatar-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as avatar from '@zag-js/avatar';
 	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarRootProps } from '../modules/types.js';
 
@@ -17,7 +18,7 @@
 		mergeProps(
 			api.getRootProps(),
 			{
-				class: 'skb:isolate skb:bg-surface-400-600 skb:size-16 skb:rounded-full skb:overflow-hidden'
+				class: classesAvatar.root
 			},
 			restAttributes
 		)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.5.0",
+  "version": "1.6.0-next.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -37,7 +37,8 @@
     "@zag-js/tabs": "^1.18.3",
     "@zag-js/tags-input": "^1.18.3",
     "@zag-js/toast": "^1.18.3",
-    "@zag-js/tooltip": "^1.18.3"
+    "@zag-js/tooltip": "^1.18.3",
+    "@skeletonlabs/skeleton-common": "0.0.1-next.0"
   },
   "peerDependencies": {
     "svelte": "^5.20.0"
@@ -60,7 +61,7 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.4",
     "vitest": "3.2.4",
-    "@skeletonlabs/skeleton": "3.2.0"
+    "@skeletonlabs/skeleton": "3.3.0-next.0"
   },
   "type": "module",
   "scripts": {