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

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.1",
+  "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": {