@skeletonlabs/skeleton-svelte 4.7.1 → 4.7.3

package/dist/components/accordion/anatomy/item-content.svelte

@@ -8,7 +8,6 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AccordionItemContentProps = $props();
@@ -18,15 +17,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getItemContentProps(itemProps()),
-			{
-				class: classes.accordion.itemContent,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getItemContentProps(itemProps()), rest));
 </script>
 
 {#if element}

package/dist/components/accordion/anatomy/item-indicator.svelte

@@ -8,7 +8,6 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AccordionItemIndicatorProps = $props();
@@ -18,15 +17,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getItemIndicatorProps(itemProps()),
-			{
-				class: classes.accordion.itemIndicator,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getItemIndicatorProps(itemProps()), rest));
 </script>
 
 {#if element}

package/dist/components/accordion/anatomy/item-trigger.svelte

@@ -8,7 +8,6 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AccordionItemTriggerProps = $props();
@@ -18,15 +17,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getItemTriggerProps(itemProps()),
-			{
-				class: classes.accordion.itemTrigger,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getItemTriggerProps(itemProps()), rest));
 </script>
 
 {#if element}

package/dist/components/accordion/anatomy/item.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitItemProps } from '@zag-js/accordion';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -20,15 +19,7 @@
 	const [itemProps, componentProps] = $derived(splitItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getItemProps(itemProps),
-			{
-				class: classes.accordion.item,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getItemProps(itemProps), rest));
 
 	ItemContext.provide(() => itemProps);
 </script>

package/dist/components/accordion/anatomy/root-provider.svelte

@@ -10,22 +10,13 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AccordionRootProviderProps = $props();
 
 	const { element, children, value: accordion, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getRootProps(),
-			{
-				class: classes.accordion.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getRootProps(), rest));
 
 	RootContext.provide(() => accordion());
 </script>

package/dist/components/accordion/anatomy/root.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
 	import { useAccordion } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/accordion';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -24,15 +23,7 @@
 		id: id,
 	}));
 
-	const attributes = $derived(
-		mergeProps(
-			accordion().getRootProps(),
-			{
-				class: classes.accordion.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(accordion().getRootProps(), rest));
 
 	RootContext.provide(() => accordion());
 </script>

package/dist/components/app-bar/anatomy/headline.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AppBarHeadlineProps = $props();
@@ -16,7 +15,8 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classes.appBar.headline,
+				'data-scope': 'app-bar',
+				'data-part': 'headline',
 			},
 			rest,
 		),

package/dist/components/app-bar/anatomy/lead.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AppBarLeadProps = $props();
@@ -16,7 +15,8 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classes.appBar.lead,
+				'data-scope': 'app-bar',
+				'data-part': 'lead',
 			},
 			rest,
 		),

package/dist/components/app-bar/anatomy/root.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AppBarRootProps = $props();
@@ -16,7 +15,8 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classes.appBar.root,
+				'data-scope': 'app-bar',
+				'data-part': 'root',
 			},
 			rest,
 		),

package/dist/components/app-bar/anatomy/toolbar.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AppBarToolbarProps = $props();
@@ -16,7 +15,8 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classes.appBar.toolbar,
+				'data-scope': 'app-bar',
+				'data-part': 'toolbar',
 			},
 			rest,
 		),

package/dist/components/app-bar/anatomy/trail.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AppBarTrailProps = $props();
@@ -16,7 +15,8 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classes.appBar.trail,
+				'data-scope': 'app-bar',
+				'data-part': 'trail',
 			},
 			rest,
 		),

package/dist/components/avatar/anatomy/fallback.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AvatarFallbackProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			avatar().getFallbackProps(),
-			{
-				class: classes.avatar.fallback,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(avatar().getFallbackProps(), rest));
 </script>
 
 {#if element}

package/dist/components/avatar/anatomy/image.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AvatarImageProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			avatar().getImageProps(),
-			{
-				class: classes.avatar.image,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(avatar().getImageProps(), rest));
 </script>
 
 {#if element}

package/dist/components/avatar/anatomy/root-provider.svelte

@@ -10,22 +10,13 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: AvatarRootProviderProps = $props();
 
 	const { element, children, value: avatar, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			avatar().getRootProps(),
-			{
-				class: classes.avatar.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
 
 	RootContext.provide(() => avatar());
 </script>

package/dist/components/avatar/anatomy/root.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
 	import { useAvatar } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/avatar';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -24,15 +23,7 @@
 		id: id,
 	}));
 
-	const attributes = $derived(
-		mergeProps(
-			avatar().getRootProps(),
-			{
-				class: classes.avatar.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
 
 	RootContext.provide(() => avatar());
 </script>

package/dist/components/collapsible/anatomy/content.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: CollapsibleContentProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			collapsible().getContentProps(),
-			{
-				class: classes.collapsible.content,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(collapsible().getContentProps(), rest));
 </script>
 
 {#if element}

package/dist/components/collapsible/anatomy/indicator.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: CollapsibleIndicatorProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			collapsible().getIndicatorProps(),
-			{
-				class: classes.collapsible.indicator,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(collapsible().getIndicatorProps(), rest));
 </script>
 
 {#if element}

package/dist/components/collapsible/anatomy/root-provider.svelte

@@ -10,22 +10,13 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: CollapsibleRootProviderProps = $props();
 
 	const { element, children, value: collapsible, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			collapsible().getRootProps(),
-			{
-				class: classes.collapsible.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(collapsible().getRootProps(), rest));
 
 	RootContext.provide(() => collapsible());
 </script>

package/dist/components/collapsible/anatomy/root.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
 	import { useCollapsible } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/collapsible';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -24,15 +23,7 @@
 		id: id,
 	}));
 
-	const attributes = $derived(
-		mergeProps(
-			collapsible().getRootProps(),
-			{
-				class: classes.collapsible.root,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(collapsible().getRootProps(), rest));
 
 	RootContext.provide(() => collapsible());
 </script>

package/dist/components/collapsible/anatomy/trigger.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: CollapsibleTriggerProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			collapsible().getTriggerProps(),
-			{
-				class: classes.collapsible.trigger,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(collapsible().getTriggerProps(), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/clear-trigger.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ComboboxClearTriggerProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getClearTriggerProps(),
-			{
-				class: classes.combobox.clearTrigger,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getClearTriggerProps(), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/content.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ComboboxContentProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getContentProps(),
-			{
-				class: classes.combobox.content,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getContentProps(), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/control.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ComboboxControlProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getControlProps(),
-			{
-				class: classes.combobox.control,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getControlProps(), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/input.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ComboboxInputProps = $props();
@@ -16,15 +15,7 @@
 
 	const { element, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getInputProps(),
-			{
-				class: classes.combobox.input,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getInputProps(), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/item-group-label.svelte

@@ -3,15 +3,12 @@
 	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface ComboboxItemGroupLabelProps
-		extends Omit<ItemGroupLabelProps, 'htmlFor'>,
-			PropsWithElement<'div'>,
-			HTMLAttributes<'div'> {}
+		extends Omit<ItemGroupLabelProps, 'htmlFor'>, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
 </script>
 
 <script lang="ts">
 	import { ItemGroupContext } from '../modules/item-group-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { type ItemGroupLabelProps, splitItemGroupLabelProps } from '@zag-js/combobox';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -28,15 +25,7 @@
 	);
 	const { element, children, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getItemGroupLabelProps(itemGroupLabelProps),
-			{
-				class: classes.combobox.itemGroupLabel,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getItemGroupLabelProps(itemGroupLabelProps), rest));
 </script>
 
 {#if element}

package/dist/components/combobox/anatomy/item-group.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
 	import { ItemGroupContext } from '../modules/item-group-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitItemGroupProps } from '@zag-js/combobox';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -26,15 +25,7 @@
 	);
 	const { element, children, ...rest } = $derived(componentProps);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getItemGroupProps(itemGroupProps),
-			{
-				class: classes.combobox.itemGroup,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getItemGroupProps(itemGroupProps), rest));
 
 	ItemGroupContext.provide(() => itemGroupProps);
 </script>

package/dist/components/combobox/anatomy/item-indicator.svelte

@@ -9,7 +9,6 @@
 	import Check from '../../../internal/components/check.svelte';
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ComboboxItemIndicatorProps = $props();
@@ -19,15 +18,7 @@
 
 	const { element, children = check, ...rest } = $derived(props);
 
-	const attributes = $derived(
-		mergeProps(
-			combobox().getItemIndicatorProps(itemProps()),
-			{
-				class: classes.combobox.itemIndicator,
-			},
-			rest,
-		),
-	);
+	const attributes = $derived(mergeProps(combobox().getItemIndicatorProps(itemProps()), rest));
 </script>
 
 {#snippet check()}